From 4527571d5ff73c9595275e6fd80b7126a20a0969 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 12 Apr 2026 05:26:37 +0000
Subject: [PATCH] feat: add manual create option for network maps

---
 .../components/network/CanvasEmptyPrompt.tsx  | 194 ++++++++++++------
 1 file changed, 136 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/network/CanvasEmptyPrompt.tsx b/frontend/src/components/network/CanvasEmptyPrompt.tsx
index ad23f6cf..e1cec86d 100644
--- a/frontend/src/components/network/CanvasEmptyPrompt.tsx
+++ b/frontend/src/components/network/CanvasEmptyPrompt.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import { Sparkles, ArrowRight } from 'lucide-react'
+import { Sparkles, ArrowRight, PencilRuler, Wand2 } from 'lucide-react'
 import { networkDiagramsApi } from '@/api'
 import type { AIGenerateResponse } from '@/types'
 
@@ -16,6 +16,7 @@ interface CanvasEmptyPromptProps {
 }
 
 export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
+  const [mode, setMode] = useState<'choice' | 'ai' | 'manual'>('choice')
   const [description, setDescription] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -39,69 +40,146 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
     }
   }, [description, onGenerate])
 
+  if (mode === 'manual') {
+    return (
+      <div className="pointer-events-none absolute inset-x-0 bottom-6 z-10 flex justify-center px-6">
+        <div className="pointer-events-auto flex items-center gap-3 rounded-full border border-default bg-card/95 px-4 py-2 shadow-xl backdrop-blur">
+          <span className="text-xs text-muted-foreground">
+            Manual mode enabled. Drag devices from the left panel to start building.
+          </span>
+          <button
+            onClick={() => setMode('ai')}
+            className="inline-flex items-center gap-1 rounded-full border border-default px-3 py-1 text-xs font-medium text-primary hover:border-accent hover:text-accent"
+          >
+            <Sparkles size={12} />
+            Open AI Generator
+          </button>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
       <div className="pointer-events-auto w-full max-w-lg rounded-xl border border-default bg-card p-8 shadow-2xl">
-        <div className="mb-5 text-center">
-          <div className="mb-2 flex items-center justify-center gap-2">
-            <Sparkles size={16} className="text-accent" />
-            <h2 className="font-heading text-base font-semibold text-heading">
-              Describe your network
-            </h2>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            AI will generate the topology in seconds — or drag devices from the left panel to build manually.
-          </p>
-        </div>
+        {mode === 'choice' ? (
+          <>
+            <div className="mb-6 text-center">
+              <div className="mb-2 flex items-center justify-center gap-2">
+                <Wand2 size={16} className="text-accent" />
+                <h2 className="font-heading text-base font-semibold text-heading">
+                  Start a network map
+                </h2>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Generate a topology with AI or start with a blank canvas and build it manually.
+              </p>
+            </div>
 
-        <div className="relative mb-3">
-          <textarea
-            value={description}
-            onChange={e => setDescription(e.target.value)}
-            onKeyDown={e => {
-              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleGenerate()
-            }}
-            placeholder="e.g. Small office with a firewall, core switch, 3 access points, a file server, and 20 workstations"
-            rows={3}
-            disabled={loading}
-            autoFocus
-            className="w-full resize-none rounded-lg border border-default bg-input px-4 py-3 pb-7 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none disabled:opacity-50"
-          />
-          <span className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-foreground/50">
-            ⌘↵ to generate
-          </span>
-        </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <button
+                onClick={() => setMode('ai')}
+                className="rounded-xl border border-accent/40 bg-accent/10 p-4 text-left transition-colors hover:border-accent hover:bg-accent/15"
+              >
+                <div className="mb-3 inline-flex rounded-lg bg-accent/15 p-2 text-accent">
+                  <Sparkles size={16} />
+                </div>
+                <div className="mb-1 text-sm font-semibold text-heading">Generate with AI</div>
+                <p className="text-xs text-muted-foreground">
+                  Describe the environment and let AI lay out the first version for you.
+                </p>
+              </button>
 
-        <div className="mb-4 flex flex-wrap gap-1.5">
-          {EXAMPLE_PROMPTS.map(p => (
-            <button
-              key={p}
-              onClick={() => handleGenerate(p)}
-              disabled={loading}
-              className="rounded-full border border-default px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:text-accent disabled:opacity-40"
-            >
-              {p}
-            </button>
-          ))}
-        </div>
-
-        {error && <p className="mb-3 text-xs text-red-400">{error}</p>}
-
-        {loading ? (
-          <div className="flex items-center justify-center gap-2 py-2.5">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent" />
-            <span className="text-sm text-muted-foreground">Mapping your network…</span>
-          </div>
+              <button
+                onClick={() => setMode('manual')}
+                className="rounded-xl border border-default bg-elevated/30 p-4 text-left transition-colors hover:border-hover hover:bg-elevated/50"
+              >
+                <div className="mb-3 inline-flex rounded-lg bg-elevated p-2 text-primary">
+                  <PencilRuler size={16} />
+                </div>
+                <div className="mb-1 text-sm font-semibold text-heading">Build manually</div>
+                <p className="text-xs text-muted-foreground">
+                  Close the AI prompt and drag devices from the left panel onto the canvas.
+                </p>
+              </button>
+            </div>
+          </>
         ) : (
-          <button
-            onClick={() => handleGenerate()}
-            disabled={!description.trim()}
-            className="flex w-full items-center justify-center gap-2 rounded-lg bg-accent px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:bg-accent/90 disabled:opacity-40"
-          >
-            <Sparkles size={14} />
-            Generate Diagram
-            <ArrowRight size={14} />
-          </button>
+          <>
+            <div className="mb-5 text-center">
+              <div className="mb-2 flex items-center justify-center gap-2">
+                <Sparkles size={16} className="text-accent" />
+                <h2 className="font-heading text-base font-semibold text-heading">
+                  Describe your network
+                </h2>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                AI will generate the topology in seconds, or you can go back and switch to manual creation.
+              </p>
+            </div>
+
+            <div className="relative mb-3">
+              <textarea
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                onKeyDown={e => {
+                  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleGenerate()
+                }}
+                placeholder="e.g. Small office with a firewall, core switch, 3 access points, a file server, and 20 workstations"
+                rows={3}
+                disabled={loading}
+                autoFocus
+                className="w-full resize-none rounded-lg border border-default bg-input px-4 py-3 pb-7 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none disabled:opacity-50"
+              />
+              <span className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-foreground/50">
+                ⌘↵ to generate
+              </span>
+            </div>
+
+            <div className="mb-4 flex flex-wrap gap-1.5">
+              {EXAMPLE_PROMPTS.map(p => (
+                <button
+                  key={p}
+                  onClick={() => handleGenerate(p)}
+                  disabled={loading}
+                  className="rounded-full border border-default px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-accent hover:text-accent disabled:opacity-40"
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+
+            {error && <p className="mb-3 text-xs text-red-400">{error}</p>}
+
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  setMode('manual')
+                  setError(null)
+                }}
+                disabled={loading}
+                className="flex-1 rounded-lg border border-default px-4 py-2.5 text-sm font-medium text-primary hover:border-hover disabled:opacity-40"
+              >
+                Build Manually
+              </button>
+              {loading ? (
+                <div className="flex flex-1 items-center justify-center gap-2 py-2.5">
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent" />
+                  <span className="text-sm text-muted-foreground">Mapping your network…</span>
+                </div>
+              ) : (
+                <button
+                  onClick={() => handleGenerate()}
+                  disabled={!description.trim()}
+                  className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-accent px-4 py-2.5 text-sm font-medium text-white transition-opacity hover:bg-accent/90 disabled:opacity-40"
+                >
+                  <Sparkles size={14} />
+                  Generate Diagram
+                  <ArrowRight size={14} />
+                </button>
+              )}
+            </div>
+          </>
         )}
       </div>
     </div>