@lon-ask/dockit 0.1.1 → 0.1.4

package/apps/client/src/components/SourceForm.tsx

@@ -0,0 +1,497 @@
+import { useState } from 'react';
+import type { SourceType, SourceConfig } from '../types';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onCreate: (data: { type: SourceType; label: string; config: SourceConfig }) => Promise<void>;
+  initial?: { type: SourceType; label: string; config: SourceConfig };
+}
+
+const TYPE_LABELS: Record<SourceType, string> = {
+  zip: 'ZIP Bundle',
+  antora: 'Antora',
+  maven: 'Maven',
+  asciidoc: 'AsciiDoc',
+  'github-markdown': 'GitHub Markdown',
+  'source-code': 'Source Code',
+};
+
+type ZipMode = 'remote' | 'local';
+type MavenMode = 'direct' | 'cli' | 'localJar';
+type RepoMode = 'git' | 'localDir' | 'zipFile';
+
+export default function SourceForm({ open, onClose, onCreate, initial }: Props) {
+  const [type, setType] = useState<SourceType>(initial?.type || 'zip');
+  const [label, setLabel] = useState(initial?.label || '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function getInitialMode(): ZipMode {
+    if (initial?.config && (initial.config as Record<string, unknown>).localPath) return 'local';
+    return 'remote';
+  }
+  function getInitialMavenMode(): MavenMode {
+    if (initial?.config && (initial.config as Record<string, unknown>).localJar) return 'localJar';
+    if (initial?.config && (initial.config as Record<string, unknown>).useMavenCommand) return 'cli';
+    return 'direct';
+  }
+  function getInitialRepoMode(): RepoMode {
+    const c = initial?.config as Record<string, unknown> | undefined;
+    if (c?.localPath) return 'localDir';
+    if (c?.zipPath && !c?.repoUrl) return 'zipFile';
+    return 'git';
+  }
+  function getInitialGhmdMode(): RepoMode {
+    const c = initial?.config as Record<string, unknown> | undefined;
+    if (c?.localPath) return 'localDir';
+    return 'git';
+  }
+  function getInitialScMode(): RepoMode {
+    const c = initial?.config as Record<string, unknown> | undefined;
+    if (c?.localPath) return 'localDir';
+    if (c?.zipPath && !c?.repoUrl) return 'zipFile';
+    return 'git';
+  }
+
+  const [zipMode, setZipMode] = useState<ZipMode>(getInitialMode());
+  const [mavenMode, setMavenMode] = useState<MavenMode>(getInitialMavenMode());
+  const [antoraMode, setAntoraMode] = useState<RepoMode>(getInitialRepoMode());
+  const [adocMode, setAdocMode] = useState<RepoMode>(getInitialRepoMode());
+  const [ghmdMode, setGhmdMode] = useState<RepoMode>(getInitialGhmdMode());
+  const [scMode, setScMode] = useState<RepoMode>(getInitialScMode());
+
+  const [zipUrl, setZipUrl] = useState((initial?.config as { url?: string })?.url || '');
+  const [zipLocalPath, setZipLocalPath] = useState((initial?.config as { localPath?: string })?.localPath || '');
+  const [antoraRepoUrl, setAntoraRepoUrl] = useState((initial?.config as { repoUrl?: string })?.repoUrl || '');
+  const [antoraZipPath, setAntoraZipPath] = useState((initial?.config as { zipPath?: string })?.zipPath || '');
+  const [antoraLocalPath, setAntoraLocalPath] = useState((initial?.config as { localPath?: string })?.localPath || '');
+  const [mavenGroupId, setMavenGroupId] = useState((initial?.config as { groupId?: string })?.groupId || '');
+  const [mavenArtifactId, setMavenArtifactId] = useState((initial?.config as { artifactId?: string })?.artifactId || '');
+  const [mavenVersion, setMavenVersion] = useState((initial?.config as { version?: string })?.version || '');
+  const [mavenClassifier, setMavenClassifier] = useState((initial?.config as { classifier?: string })?.classifier || 'javadoc');
+  const [mavenLocalJar, setMavenLocalJar] = useState((initial?.config as { localJar?: string })?.localJar || '');
+  const [adocRepoUrl, setAdocRepoUrl] = useState((initial?.config as { repoUrl?: string })?.repoUrl || '');
+  const [adocSourcePath, setAdocSourcePath] = useState((initial?.config as { sourcePath?: string })?.sourcePath || '');
+  const [adocZipPath, setAdocZipPath] = useState((initial?.config as { zipPath?: string })?.zipPath || '');
+  const [adocLocalPath, setAdocLocalPath] = useState((initial?.config as { localPath?: string })?.localPath || '');
+  const [ghmdRepoUrl, setGhmdRepoUrl] = useState((initial?.config as { repoUrl?: string })?.repoUrl || '');
+  const [ghmdLocalPath, setGhmdLocalPath] = useState((initial?.config as { localPath?: string })?.localPath || '');
+  const [ghmdSourcePath, setGhmdSourcePath] = useState((initial?.config as { sourcePath?: string })?.sourcePath || '');
+  const [ghmdBranch, setGhmdBranch] = useState((initial?.config as { branch?: string })?.branch || '');
+  const [graphifyEnabled, setGraphifyEnabled] = useState((initial?.config as { graphifyEnabled?: boolean })?.graphifyEnabled || false);
+  const [graphifySourcePath, setGraphifySourcePath] = useState((initial?.config as { graphifySourcePath?: string })?.graphifySourcePath || '');
+  const [scRepoUrl, setScRepoUrl] = useState((initial?.config as { repoUrl?: string })?.repoUrl || '');
+  const [scLocalPath, setScLocalPath] = useState((initial?.config as { localPath?: string })?.localPath || '');
+  const [scZipPath, setScZipPath] = useState((initial?.config as { zipPath?: string })?.zipPath || '');
+  const [scSourcePath, setScSourcePath] = useState((initial?.config as { sourcePath?: string })?.sourcePath || '');
+  const [scBranch, setScBranch] = useState((initial?.config as { branch?: string })?.branch || '');
+
+  if (!open) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    let config: SourceConfig;
+    switch (type) {
+      case 'zip':
+        if (zipMode === 'remote') {
+          if (!zipUrl.trim()) { setError('URL is required'); return; }
+          config = { url: zipUrl.trim() };
+        } else {
+          if (!zipLocalPath.trim()) { setError('Local path is required'); return; }
+          config = { localPath: zipLocalPath.trim() };
+        }
+        break;
+      case 'antora':
+        if (antoraMode === 'git') {
+          if (!antoraRepoUrl.trim()) { setError('Repository URL is required'); return; }
+          config = { repoUrl: antoraRepoUrl.trim(), graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else if (antoraMode === 'localDir') {
+          if (!antoraLocalPath.trim()) { setError('Local path is required'); return; }
+          config = { localPath: antoraLocalPath.trim(), graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else {
+          if (!antoraZipPath.trim()) { setError('ZIP path is required'); return; }
+          config = { zipPath: antoraZipPath.trim(), graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        }
+        break;
+      case 'maven':
+        if (!mavenGroupId.trim() || !mavenArtifactId.trim() || !mavenVersion.trim()) {
+          setError('Group ID, Artifact ID, and Version are required');
+          return;
+        }
+        if (mavenMode === 'direct') {
+          config = { groupId: mavenGroupId.trim(), artifactId: mavenArtifactId.trim(), version: mavenVersion.trim(), classifier: mavenClassifier.trim() || 'javadoc' };
+        } else if (mavenMode === 'cli') {
+          config = { groupId: mavenGroupId.trim(), artifactId: mavenArtifactId.trim(), version: mavenVersion.trim(), classifier: mavenClassifier.trim() || 'javadoc', useMavenCommand: true };
+        } else {
+          if (!mavenLocalJar.trim()) { setError('Local JAR path is required'); return; }
+          config = { groupId: mavenGroupId.trim(), artifactId: mavenArtifactId.trim(), version: mavenVersion.trim(), classifier: mavenClassifier.trim() || 'javadoc', localJar: mavenLocalJar.trim() };
+        }
+        break;
+      case 'asciidoc':
+        if (adocMode === 'git') {
+          if (!adocRepoUrl.trim()) { setError('Repository URL is required'); return; }
+          config = { repoUrl: adocRepoUrl.trim(), sourcePath: adocSourcePath.trim() || undefined, graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else if (adocMode === 'localDir') {
+          if (!adocLocalPath.trim()) { setError('Local path is required'); return; }
+          config = { localPath: adocLocalPath.trim(), sourcePath: adocSourcePath.trim() || undefined, graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else {
+          config = { zipPath: adocZipPath.trim(), sourcePath: adocSourcePath.trim() || undefined, graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        }
+        break;
+      case 'github-markdown':
+        if (ghmdMode === 'git') {
+          if (!ghmdRepoUrl.trim()) { setError('Repository URL is required'); return; }
+          config = { repoUrl: ghmdRepoUrl.trim(), sourcePath: ghmdSourcePath.trim() || undefined, branch: ghmdBranch.trim() || undefined, graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else {
+          if (!ghmdLocalPath.trim()) { setError('Local path is required'); return; }
+          config = { localPath: ghmdLocalPath.trim(), sourcePath: ghmdSourcePath.trim() || undefined, graphifyEnabled, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        }
+        break;
+      case 'source-code':
+        if (scMode === 'git') {
+          if (!scRepoUrl.trim()) { setError('Repository URL is required'); return; }
+          config = { repoUrl: scRepoUrl.trim(), sourcePath: scSourcePath.trim() || undefined, branch: scBranch.trim() || undefined, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else if (scMode === 'localDir') {
+          if (!scLocalPath.trim()) { setError('Local path is required'); return; }
+          config = { localPath: scLocalPath.trim(), sourcePath: scSourcePath.trim() || undefined, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        } else {
+          if (!scZipPath.trim()) { setError('ZIP file path is required'); return; }
+          config = { zipPath: scZipPath.trim(), sourcePath: scSourcePath.trim() || undefined, graphifySourcePath: graphifySourcePath.trim() || undefined };
+        }
+        break;
+    }
+
+    setSaving(true);
+    try {
+      await onCreate({ type, label: label.trim() || `${TYPE_LABELS[type]} source`, config });
+      onClose();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const inputClass = "w-full px-3.5 py-2.5 bg-bg ring-1 ring-border rounded-lg text-sm text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all";
+  const labelClass = "block text-sm font-medium text-text mb-2";
+  const helpClass = "text-xs text-text-muted mt-1.5";
+
+  const modeBtnClass = (active: boolean) =>
+    `flex-1 px-2.5 py-2 rounded-lg text-xs font-medium ring-1 transition-all cursor-pointer text-center ${
+      active
+        ? 'ring-primary bg-primary/10 text-primary'
+        : 'ring-border text-text-dim hover:ring-text-muted hover:bg-bg-alt'
+    }`;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative bg-surface ring-1 ring-border rounded-2xl shadow-2xl w-full max-w-md p-6 max-h-[90vh] overflow-auto">
+        <h2 className="text-lg font-semibold text-text mb-1">
+          {initial ? 'Edit Source' : 'Add Source'}
+        </h2>
+        <p className="text-sm text-text-dim mb-5">
+          Select the source type and fill in the details.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className={labelClass}>Type</label>
+            <div className="flex gap-2 flex-wrap">
+              {(['zip', 'maven', 'antora', 'asciidoc', 'github-markdown', 'source-code'] as SourceType[]).map((t) => (
+                <button key={t} type="button" onClick={() => setType(t)}
+                  className={modeBtnClass(type === t)}>
+                  {TYPE_LABELS[t]}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className={labelClass}>Label</label>
+            <input type="text" value={label} onChange={(e) => setLabel(e.target.value)}
+              placeholder="e.g. API Docs" className={inputClass} />
+          </div>
+
+          {type === 'zip' && (
+            <div className="space-y-3">
+              <div>
+                <label className={labelClass}>Source</label>
+                <div className="flex gap-2">
+                  <button type="button" onClick={() => setZipMode('remote')} className={modeBtnClass(zipMode === 'remote')}>Remote URL</button>
+                  <button type="button" onClick={() => setZipMode('local')} className={modeBtnClass(zipMode === 'local')}>Local File</button>
+                </div>
+              </div>
+              {zipMode === 'remote' ? (
+                <div>
+                  <label className={labelClass}>ZIP URL</label>
+                  <input type="url" value={zipUrl} onChange={(e) => setZipUrl(e.target.value)} placeholder="https://example.com/docs.zip" className={inputClass} />
+                </div>
+              ) : (
+                <div>
+                  <label className={labelClass}>File Path</label>
+                  <input type="text" value={zipLocalPath} onChange={(e) => setZipLocalPath(e.target.value)} placeholder="/home/user/docs.zip" className={inputClass} />
+                  <p className={helpClass}>Absolute path on the server to a pre-downloaded ZIP file.</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {type === 'antora' && (
+            <div className="space-y-3">
+              <div>
+                <label className={labelClass}>Source</label>
+                <div className="flex gap-1.5">
+                  <button type="button" onClick={() => setAntoraMode('git')} className={modeBtnClass(antoraMode === 'git')}>Git Repo</button>
+                  <button type="button" onClick={() => setAntoraMode('localDir')} className={modeBtnClass(antoraMode === 'localDir')}>Local Dir</button>
+                  <button type="button" onClick={() => setAntoraMode('zipFile')} className={modeBtnClass(antoraMode === 'zipFile')}>ZIP File</button>
+                </div>
+              </div>
+              {antoraMode === 'git' && (
+                <div>
+                  <label className={labelClass}>Git Repository URL</label>
+                  <input type="text" value={antoraRepoUrl} onChange={(e) => setAntoraRepoUrl(e.target.value)} placeholder="https://github.com/spring-projects/spring-boot.git" className={inputClass} />
+                </div>
+              )}
+              {antoraMode === 'localDir' && (
+                <div>
+                  <label className={labelClass}>Directory Path</label>
+                  <input type="text" value={antoraLocalPath} onChange={(e) => setAntoraLocalPath(e.target.value)} placeholder="/home/user/repos/spring-boot" className={inputClass} />
+                  <p className={helpClass}>Absolute path to a pre-cloned Antora documentation repository.</p>
+                </div>
+              )}
+              {antoraMode === 'zipFile' && (
+                <div>
+                  <label className={labelClass}>ZIP File Path</label>
+                  <input type="text" value={antoraZipPath} onChange={(e) => setAntoraZipPath(e.target.value)} placeholder="/tmp/antora-content.zip" className={inputClass} />
+                </div>
+              )}
+            </div>
+          )}
+
+          {type === 'maven' && (
+            <div className="space-y-3">
+              <div>
+                <label className={labelClass}>Mode</label>
+                <div className="flex gap-1.5">
+                  <button type="button" onClick={() => setMavenMode('direct')} className={modeBtnClass(mavenMode === 'direct')}>Direct Download</button>
+                  <button type="button" onClick={() => setMavenMode('cli')} className={modeBtnClass(mavenMode === 'cli')}>Maven CLI</button>
+                  <button type="button" onClick={() => setMavenMode('localJar')} className={modeBtnClass(mavenMode === 'localJar')}>Local JAR</button>
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <div className="flex-1">
+                  <label className={labelClass}>Group ID</label>
+                  <input type="text" value={mavenGroupId} onChange={(e) => setMavenGroupId(e.target.value)} placeholder="io.quarkus" className={inputClass} />
+                </div>
+                <div className="flex-1">
+                  <label className={labelClass}>Artifact ID</label>
+                  <input type="text" value={mavenArtifactId} onChange={(e) => setMavenArtifactId(e.target.value)} placeholder="quarkus-core-docs" className={inputClass} />
+                </div>
+              </div>
+              <div className="flex gap-3">
+                <div className="flex-1">
+                  <label className={labelClass}>Version</label>
+                  <input type="text" value={mavenVersion} onChange={(e) => setMavenVersion(e.target.value)} placeholder="3.8.0" className={inputClass} />
+                </div>
+                <div className="flex-1">
+                  <label className={labelClass}>Classifier</label>
+                  <input type="text" value={mavenClassifier} onChange={(e) => setMavenClassifier(e.target.value)} placeholder="javadoc" className={inputClass} />
+                </div>
+              </div>
+              {mavenMode === 'cli' && (
+                <p className="text-xs text-accent bg-accent/5 ring-1 ring-accent/20 rounded-lg px-3 py-2">
+                  Uses <code className="text-xs bg-accent/10 px-1 rounded">mvn dependency:copy</code> with your local
+                  <code className="text-xs bg-accent/10 px-1 rounded ml-1">~/.m2/settings.xml</code> (proxy, mirrors, private repos).
+                  Requires Maven installed and in PATH.
+                </p>
+              )}
+              {mavenMode === 'localJar' && (
+                <div>
+                  <label className={labelClass}>JAR File Path</label>
+                  <input type="text" value={mavenLocalJar} onChange={(e) => setMavenLocalJar(e.target.value)}
+                    placeholder="/home/user/.m2/repository/.../library-1.0-javadoc.jar"
+                    className={inputClass} />
+                  <p className={helpClass}>Absolute path to a pre-downloaded javadoc JAR.</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {type === 'asciidoc' && (
+            <div className="space-y-3">
+              <div>
+                <label className={labelClass}>Source</label>
+                <div className="flex gap-1.5">
+                  <button type="button" onClick={() => setAdocMode('git')} className={modeBtnClass(adocMode === 'git')}>Git Repo</button>
+                  <button type="button" onClick={() => setAdocMode('localDir')} className={modeBtnClass(adocMode === 'localDir')}>Local Dir</button>
+                  <button type="button" onClick={() => setAdocMode('zipFile')} className={modeBtnClass(adocMode === 'zipFile')}>ZIP File</button>
+                </div>
+              </div>
+              {adocMode === 'git' && (
+                <div>
+                  <label className={labelClass}>Repository URL</label>
+                  <input type="text" value={adocRepoUrl} onChange={(e) => setAdocRepoUrl(e.target.value)} placeholder="https://github.com/quarkusio/quarkus.git" className={inputClass} />
+                </div>
+              )}
+              {adocMode === 'localDir' && (
+                <div>
+                  <label className={labelClass}>Directory Path</label>
+                  <input type="text" value={adocLocalPath} onChange={(e) => setAdocLocalPath(e.target.value)} placeholder="/home/user/repos/quarkus" className={inputClass} />
+                  <p className={helpClass}>Absolute path to a pre-cloned repository with .adoc files.</p>
+                </div>
+              )}
+              {adocMode === 'zipFile' && (
+                <div>
+                  <label className={labelClass}>ZIP File Path</label>
+                  <input type="text" value={adocZipPath} onChange={(e) => setAdocZipPath(e.target.value)} placeholder="/tmp/docs.zip" className={inputClass} />
+                </div>
+              )}
+              <div>
+                <label className={labelClass}>Source Path <span className="text-text-muted font-normal">(optional)</span></label>
+                <input type="text" value={adocSourcePath} onChange={(e) => setAdocSourcePath(e.target.value)}
+                  placeholder="e.g. docs/src/main/asciidoc" className={inputClass} />
+                <p className={helpClass}>Path within the source where .adoc files are located. Leave empty to scan entire source.</p>
+              </div>
+            </div>
+          )}
+
+          {type === 'github-markdown' && (
+            <div className="space-y-3">
+              <div>
+                <label className={labelClass}>Source</label>
+                <div className="flex gap-1.5">
+                  <button type="button" onClick={() => setGhmdMode('git')} className={modeBtnClass(ghmdMode === 'git')}>Git Repo</button>
+                  <button type="button" onClick={() => setGhmdMode('localDir')} className={modeBtnClass(ghmdMode === 'localDir')}>Local Dir</button>
+                </div>
+              </div>
+              {ghmdMode === 'git' && (
+                <div>
+                  <label className={labelClass}>Repository URL</label>
+                  <input type="text" value={ghmdRepoUrl} onChange={(e) => setGhmdRepoUrl(e.target.value)} placeholder="https://github.com/reactjs/react.dev.git" className={inputClass} />
+                </div>
+              )}
+              {ghmdMode === 'localDir' && (
+                <div>
+                  <label className={labelClass}>Directory Path</label>
+                  <input type="text" value={ghmdLocalPath} onChange={(e) => setGhmdLocalPath(e.target.value)} placeholder="/home/user/repos/react.dev" className={inputClass} />
+                  <p className={helpClass}>Absolute path to a pre-cloned repository with .md files.</p>
+                </div>
+              )}
+              <div>
+                <label className={labelClass}>Source Path <span className="text-text-muted font-normal">(optional)</span></label>
+                <input type="text" value={ghmdSourcePath} onChange={(e) => setGhmdSourcePath(e.target.value)}
+                  placeholder="e.g. src/content" className={inputClass} />
+                <p className={helpClass}>Path within the source where .md files are located. Leave empty to scan entire source.</p>
+              </div>
+              {ghmdMode === 'git' && (
+                <div>
+                  <label className={labelClass}>Branch <span className="text-text-muted font-normal">(optional)</span></label>
+                  <input type="text" value={ghmdBranch} onChange={(e) => setGhmdBranch(e.target.value)}
+                    placeholder="e.g. main" className={inputClass} />
+                  <p className={helpClass}>Git branch to clone. Defaults to the repository default branch.</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {type === 'source-code' && (
+            <div className="space-y-3">
+              <div>
+                <label className={labelClass}>Source</label>
+                <div className="flex gap-1.5">
+                  <button type="button" onClick={() => setScMode('git')} className={modeBtnClass(scMode === 'git')}>Git Repo</button>
+                  <button type="button" onClick={() => setScMode('localDir')} className={modeBtnClass(scMode === 'localDir')}>Local Dir</button>
+                  <button type="button" onClick={() => setScMode('zipFile')} className={modeBtnClass(scMode === 'zipFile')}>ZIP File</button>
+                </div>
+              </div>
+              {scMode === 'git' && (
+                <div>
+                  <label className={labelClass}>Repository URL</label>
+                  <input type="text" value={scRepoUrl} onChange={(e) => setScRepoUrl(e.target.value)} placeholder="https://github.com/org/repo.git" className={inputClass} />
+                </div>
+              )}
+              {scMode === 'localDir' && (
+                <div>
+                  <label className={labelClass}>Directory Path</label>
+                  <input type="text" value={scLocalPath} onChange={(e) => setScLocalPath(e.target.value)} placeholder="/home/user/repos/project" className={inputClass} />
+                  <p className={helpClass}>Absolute path to a pre-cloned repository with source code.</p>
+                </div>
+              )}
+              {scMode === 'zipFile' && (
+                <div>
+                  <label className={labelClass}>ZIP File Path</label>
+                  <input type="text" value={scZipPath} onChange={(e) => setScZipPath(e.target.value)} placeholder="/tmp/source-code.zip" className={inputClass} />
+                </div>
+              )}
+              <div>
+                <label className={labelClass}>Source Path <span className="text-text-muted font-normal">(optional)</span></label>
+                <input type="text" value={scSourcePath} onChange={(e) => setScSourcePath(e.target.value)}
+                  placeholder="e.g. src/main/java" className={inputClass} />
+                <p className={helpClass}>Directory within the source to scan. Leave empty to scan the entire source.</p>
+              </div>
+              {scMode === 'git' && (
+                <div>
+                  <label className={labelClass}>Branch <span className="text-text-muted font-normal">(optional)</span></label>
+                  <input type="text" value={scBranch} onChange={(e) => setScBranch(e.target.value)}
+                    placeholder="e.g. main" className={inputClass} />
+                  <p className={helpClass}>Git branch to clone. Defaults to the repository default branch.</p>
+                </div>
+              )}
+              <div className="px-3 py-2 bg-accent/5 ring-1 ring-accent/20 rounded-lg text-xs text-accent">
+                Generates a knowledge graph using Graphify (Tree-sitter AST analysis). Supports 15+ languages.
+              </div>
+            </div>
+          )}
+
+          {(type === 'asciidoc' || type === 'github-markdown' || type === 'antora') && (
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" className="sr-only peer" checked={graphifyEnabled} onChange={(e) => setGraphifyEnabled(e.target.checked)} />
+                  <div className="w-9 h-5 bg-bg-alt ring-1 ring-border rounded-full peer peer-checked:bg-primary peer-checked:ring-primary/30 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full" />
+                </label>
+                <span className="text-sm font-medium text-text">Generate source code knowledge graph</span>
+              </div>
+              {graphifyEnabled && (
+                <div className="space-y-3">
+                  <div>
+                    <label className={labelClass}>Source Code Path <span className="text-text-muted font-normal">(optional)</span></label>
+                    <input type="text" value={graphifySourcePath} onChange={(e) => setGraphifySourcePath(e.target.value)}
+                      placeholder="e.g. core/src/main/java" className={inputClass} />
+                    <p className={helpClass}>
+                      Directory within the repo containing source code. Scan the entire repo if empty (may be slow for large repos).
+                    </p>
+                  </div>
+                  <div className="px-3 py-2 bg-accent/5 ring-1 ring-accent/20 rounded-lg text-xs text-accent">
+                    Runs Graphify (Tree-sitter AST) on the source code to build a structural dependency graph. Auto-installed via pip if not present.
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {error && (
+            <div className="px-3 py-2 bg-danger/5 ring-1 ring-danger/20 rounded-lg text-sm text-danger">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-2 justify-end pt-2">
+            <button type="button" onClick={onClose}
+              className="px-4 py-2 rounded-lg text-sm font-medium text-text-dim hover:bg-bg-alt hover:text-text transition-colors">
+              Cancel
+            </button>
+            <button type="submit" disabled={saving}
+              className="px-5 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50">
+              {saving ? 'Saving...' : initial ? 'Save' : 'Add Source'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/apps/client/src/hooks/useTheme.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<'light' | 'dark'>(() => {
+    const stored = localStorage.getItem('dockit-theme');
+    if (stored === 'dark' || stored === 'light') return stored;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    localStorage.setItem('dockit-theme', theme);
+  }, [theme]);
+
+  const setTheme = useCallback((t: 'light' | 'dark') => setThemeState(t), []);
+  const toggleTheme = useCallback(() => setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark')), []);
+
+  return { theme, setTheme, toggleTheme };
+}

package/apps/client/src/index.css

@@ -0,0 +1,77 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
+
+  --color-bg: #FAFAF9;
+  --color-bg-alt: #F5F5F4;
+  --color-surface: #FFFFFF;
+  --color-border: #E7E5E4;
+  --color-text: #1C1917;
+  --color-text-dim: #78716C;
+  --color-text-muted: #A8A29E;
+  --color-primary: #B45309;
+  --color-primary-hover: #92400E;
+  --color-primary-light: #FFFBEB;
+  --color-accent: #0F766E;
+  --color-danger: #DC2626;
+  --color-success: #16A34A;
+  --color-warning: #D97706;
+  --color-terminal-bg: #171717;
+  --color-terminal-fg: #A3E635;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --color-bg: #0C0A09;
+  --color-bg-alt: #171412;
+  --color-surface: #1C1917;
+  --color-border: #292524;
+  --color-text: #FAFAF9;
+  --color-text-dim: #A8A29E;
+  --color-text-muted: #78716C;
+  --color-primary: #F59E0B;
+  --color-primary-hover: #D97706;
+  --color-primary-light: #451A03;
+  --color-accent: #14B8A6;
+  --color-danger: #EF4444;
+  --color-success: #22C55E;
+  --color-warning: #F59E0B;
+  --color-terminal-bg: #0A0A0A;
+  --color-terminal-fg: #A3E635;
+}
+
+* {
+  transition-property: color, background-color, border-color;
+  transition-duration: 150ms;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+#root {
+  min-height: 100vh;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}

package/apps/client/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);