@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/GitRepoModal.tsx

@@ -1,12 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { apiClient } from '../api/client';
-import type { Project } from '../hooks/useProjects';
-
-interface GitRepoModalProps {
-  project: Project;
-  onClose: () => void;
-  onProjectUpdated: () => void;
-}
+import { useGitModalStore } from '../stores/useGitModalStore';
+import { useProjectStore } from '../stores/useProjectStore';
 
 interface Installation {
   id: number;
@@ -22,32 +17,47 @@ interface Repo {
   cloneUrl: string;
 }
 
-type Tab = 'status' | 'github' | 'url' | 'init';
+type Tab = 'status' | 'github' | 'ssh' | 'url' | 'init';
+
+const tabCls = (active: boolean) =>
+  `bg-none border-none cursor-pointer font-mono text-xs px-3 py-2.5 border-b-2 ${
+    active ? 'text-accent border-b-accent' : 'text-content-secondary border-b-transparent hover:text-content'
+  }`;
+
+const btnBase = 'inline-block px-4 py-2 border border-edge rounded bg-surface-raised text-content font-mono text-xs cursor-pointer mt-3 hover:bg-tab-hover disabled:opacity-50 disabled:cursor-not-allowed';
+const btnPrimary = 'inline-block px-4 py-2 rounded font-mono text-xs cursor-pointer mt-3 bg-accent text-white border border-accent hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed';
+const btnDanger = 'inline-block px-4 py-2 rounded font-mono text-xs cursor-pointer mt-4 bg-transparent border border-error text-error hover:bg-[rgba(255,107,107,0.1)] disabled:opacity-50 disabled:cursor-not-allowed';
 
-export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModalProps) {
+export function GitRepoModal() {
+  const project = useGitModalStore((s) => s.project)!;
+  const onClose = useGitModalStore((s) => s.close);
+  const onProjectUpdated = useProjectStore((s) => s.refetchProjects);
   const [tab, setTab] = useState<Tab>('status');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
 
-  // Status tab
   const [gitStatus, setGitStatus] = useState<any>(null);
 
-  // GitHub tab
   const [installations, setInstallations] = useState<Installation[]>([]);
   const [selectedInstallation, setSelectedInstallation] = useState<string>('');
   const [repos, setRepos] = useState<Repo[]>([]);
   const [selectedRepo, setSelectedRepo] = useState<string>('');
   const [githubConfigured, setGithubConfigured] = useState(false);
 
-  // URL tab
   const [cloneUrl, setCloneUrl] = useState('');
 
+  // SSH state
+  const [sshPublicKey, setSshPublicKey] = useState<string | null>(null);
+  const [sshCloneUrl, setSshCloneUrl] = useState('');
+  const [copied, setCopied] = useState(false);
+
   const loadStatus = useCallback(async () => {
     try {
       const data = await apiClient.getGitStatus(project.id);
       setGitStatus(data);
       setGithubConfigured(data.githubAppConfigured);
+      if (data.sshPublicKey) setSshPublicKey(data.sshPublicKey);
     } catch (err: any) {
       setError(err.message);
     }
@@ -165,6 +175,50 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
     try {
       await apiClient.disconnectGitRepo(project.id);
       setSuccess('Repository disconnected');
+      setSshPublicKey(null);
+      onProjectUpdated();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGenerateSshKey = async () => {
+    setLoading(true);
+    setError(null);
+    setCopied(false);
+    try {
+      const data = await apiClient.generateSshKey(project.id);
+      setSshPublicKey(data.publicKey);
+      setSuccess(sshPublicKey ? 'SSH keypair regenerated — old key is now invalid' : 'SSH keypair generated');
+      onProjectUpdated();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopyPublicKey = async () => {
+    if (!sshPublicKey) return;
+    try {
+      await navigator.clipboard.writeText(sshPublicKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setError('Failed to copy to clipboard');
+    }
+  };
+
+  const handleConnectSsh = async () => {
+    if (!sshCloneUrl.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.connectSshRepo(project.id, sshCloneUrl.trim());
+      setSuccess('Repository connected via SSH');
       onProjectUpdated();
       await loadStatus();
     } catch (err: any) {
@@ -175,98 +229,105 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
   };
 
   return (
-    <div className="git-modal-overlay" onClick={onClose}>
-      <div className="git-modal" onClick={e => e.stopPropagation()}>
-        <div className="git-modal-header">
-          <h3>Git Repository &mdash; {project.name}</h3>
-          <button className="git-modal-close" onClick={onClose}>&times;</button>
+    <div className="fixed inset-0 bg-black/50 z-[1000] flex items-center justify-center" onClick={onClose}>
+      <div className="bg-surface-alt border border-edge rounded-lg w-[480px] max-w-[90vw] max-h-[80vh] overflow-y-auto shadow-[0_8px_32px_var(--panel-shadow)] font-mono text-[13px]" onClick={e => e.stopPropagation()}>
+        <div className="flex justify-between items-center px-5 pt-4 pb-3 border-b border-edge">
+          <h3 className="m-0 text-sm text-content font-semibold">Git Repository &mdash; {project.name}</h3>
+          <button className="bg-none border-none text-content-secondary cursor-pointer text-lg px-1 leading-none hover:text-content" onClick={onClose}>&times;</button>
         </div>
 
-        {error && <div className="git-modal-error">{error}</div>}
-        {success && <div className="git-modal-success">{success}</div>}
+        {error && <div className="px-5 py-2 text-error text-xs bg-[rgba(255,107,107,0.08)] border-b border-edge">{error}</div>}
+        {success && <div className="px-5 py-2 text-[#69db7c] text-xs bg-[rgba(105,219,124,0.08)] border-b border-edge">{success}</div>}
 
-        <div className="git-modal-tabs">
-          <button className={`git-modal-tab${tab === 'status' ? ' active' : ''}`} onClick={() => { setTab('status'); setError(null); setSuccess(null); }}>Status</button>
-          <button className={`git-modal-tab${tab === 'github' ? ' active' : ''}`} onClick={() => { setTab('github'); setError(null); setSuccess(null); handleLoadInstallations(); }}>GitHub</button>
-          <button className={`git-modal-tab${tab === 'url' ? ' active' : ''}`} onClick={() => { setTab('url'); setError(null); setSuccess(null); }}>Clone URL</button>
-          <button className={`git-modal-tab${tab === 'init' ? ' active' : ''}`} onClick={() => { setTab('init'); setError(null); setSuccess(null); }}>Init</button>
+        <div className="flex border-b border-edge px-4">
+          <button className={tabCls(tab === 'status')} onClick={() => { setTab('status'); setError(null); setSuccess(null); }}>Status</button>
+          <button className={tabCls(tab === 'github')} onClick={() => { setTab('github'); setError(null); setSuccess(null); handleLoadInstallations(); }}>GitHub</button>
+          <button className={tabCls(tab === 'ssh')} onClick={() => { setTab('ssh'); setError(null); setSuccess(null); }}>SSH Key</button>
+          <button className={tabCls(tab === 'url')} onClick={() => { setTab('url'); setError(null); setSuccess(null); }}>Clone URL</button>
+          <button className={tabCls(tab === 'init')} onClick={() => { setTab('init'); setError(null); setSuccess(null); }}>Init</button>
         </div>
 
-        <div className="git-modal-body">
+        <div className="px-5 py-4">
           {tab === 'status' && (
-            <div className="git-modal-status">
+            <div>
               {gitStatus ? (
                 <>
-                  <div className="git-status-row">
-                    <span className="git-status-label">Workspace:</span>
-                    <span className={`git-status-value ${gitStatus.hasWorkspace ? 'connected' : ''}`}>
+                  <div className="flex justify-between py-1.5 border-b border-edge">
+                    <span className="text-content-secondary text-xs">Workspace:</span>
+                    <span className={`text-xs ${gitStatus.hasWorkspace ? 'text-[#69db7c]' : 'text-content'}`}>
                       {gitStatus.hasWorkspace ? 'Configured' : 'Not configured'}
                     </span>
                   </div>
                   {gitStatus.hasWorkspace && (
                     <>
-                      <div className="git-status-row">
-                        <span className="git-status-label">Remote:</span>
-                        <span className={`git-status-value ${gitStatus.hasRemote ? 'connected' : ''}`}>
+                      <div className="flex justify-between py-1.5 border-b border-edge">
+                        <span className="text-content-secondary text-xs">Remote:</span>
+                        <span className={`text-xs ${gitStatus.hasRemote ? 'text-[#69db7c]' : 'text-content'}`}>
                           {gitStatus.hasRemote ? 'Connected' : 'Local only'}
                         </span>
                       </div>
-                      <div className="git-status-row">
-                        <span className="git-status-label">Branch:</span>
-                        <span className="git-status-value">{gitStatus.currentBranch || '-'}</span>
+                      <div className="flex justify-between py-1.5 border-b border-edge">
+                        <span className="text-content-secondary text-xs">Branch:</span>
+                        <span className="text-xs text-content">{gitStatus.currentBranch || '-'}</span>
                       </div>
                     </>
                   )}
                   {project.githubRepoFullName && (
-                    <div className="git-status-row">
-                      <span className="git-status-label">GitHub Repo:</span>
-                      <span className="git-status-value">{project.githubRepoFullName}</span>
+                    <div className="flex justify-between py-1.5 border-b border-edge">
+                      <span className="text-content-secondary text-xs">GitHub Repo:</span>
+                      <span className="text-xs text-content">{project.githubRepoFullName}</span>
                     </div>
                   )}
                   {project.repoUrl && !project.githubRepoFullName && (
-                    <div className="git-status-row">
-                      <span className="git-status-label">Clone URL:</span>
-                      <span className="git-status-value git-status-url">{project.repoUrl}</span>
+                    <div className="flex justify-between py-1.5 border-b border-edge">
+                      <span className="text-content-secondary text-xs">Clone URL:</span>
+                      <span className="text-xs text-content max-w-60 overflow-hidden text-ellipsis whitespace-nowrap">{project.repoUrl}</span>
                     </div>
                   )}
-                  <div className="git-status-row">
-                    <span className="git-status-label">GitHub App:</span>
-                    <span className={`git-status-value ${gitStatus.githubAppConfigured ? 'connected' : ''}`}>
+                  <div className="flex justify-between py-1.5 border-b border-edge">
+                    <span className="text-content-secondary text-xs">Auth Method:</span>
+                    <span className="text-xs text-content">
+                      {gitStatus.gitAuthMethod === 'ssh_key' ? 'SSH Key' : gitStatus.gitAuthMethod === 'github_app' ? 'GitHub App' : 'None'}
+                    </span>
+                  </div>
+                  <div className="flex justify-between py-1.5 border-b border-edge">
+                    <span className="text-content-secondary text-xs">GitHub App:</span>
+                    <span className={`text-xs ${gitStatus.githubAppConfigured ? 'text-[#69db7c]' : 'text-content'}`}>
                       {gitStatus.githubAppConfigured ? 'Configured' : 'Not configured'}
                     </span>
                   </div>
                   {gitStatus.hasWorkspace && (
-                    <button className="git-modal-btn git-modal-btn-danger" onClick={handleDisconnect} disabled={loading}>
+                    <button className={btnDanger} onClick={handleDisconnect} disabled={loading}>
                       Disconnect
                     </button>
                   )}
                 </>
               ) : (
-                <div className="git-modal-loading">Loading...</div>
+                <div className="text-content-muted text-center py-5">Loading...</div>
               )}
             </div>
           )}
 
           {tab === 'github' && (
-            <div className="git-modal-github">
+            <div>
               {!githubConfigured ? (
-                <div className="git-modal-info">
+                <div className="text-content-secondary text-xs leading-relaxed mb-3">
                   GitHub App not configured. Set GITHUB_APP_ID and GITHUB_APP_PRIVATE_KEY environment variables.
-                  <button className="git-modal-btn" onClick={handleTestConnection} disabled={loading}>
+                  <button className={btnBase} onClick={handleTestConnection} disabled={loading}>
                     Test Connection
                   </button>
                 </div>
               ) : (
                 <>
                   {installations.length === 0 ? (
-                    <div className="git-modal-info">
+                    <div className="text-content-secondary text-xs leading-relaxed mb-3">
                       No GitHub App installations found. Install the app on your GitHub organization or account.
                     </div>
                   ) : (
-                    <div className="git-modal-installations">
-                      <label className="git-modal-label">Installation:</label>
+                    <div>
+                      <label className="block text-content-secondary text-[11px] uppercase tracking-wider mb-1.5 mt-3">Installation:</label>
                       <select
-                        className="git-modal-select"
+                        className="w-full py-2 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-xs"
                         value={selectedInstallation}
                         onChange={e => handleLoadRepos(e.target.value)}
                       >
@@ -281,10 +342,10 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
                   )}
 
                   {repos.length > 0 && (
-                    <div className="git-modal-repos">
-                      <label className="git-modal-label">Repository:</label>
+                    <div>
+                      <label className="block text-content-secondary text-[11px] uppercase tracking-wider mb-1.5 mt-3">Repository:</label>
                       <select
-                        className="git-modal-select"
+                        className="w-full py-2 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-xs"
                         value={selectedRepo}
                         onChange={e => setSelectedRepo(e.target.value)}
                       >
@@ -296,7 +357,7 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
                         ))}
                       </select>
                       <button
-                        className="git-modal-btn git-modal-btn-primary"
+                        className={btnPrimary}
                         onClick={handleConnectGitHub}
                         disabled={loading || !selectedRepo}
                       >
@@ -309,11 +370,79 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
             </div>
           )}
 
+          {tab === 'ssh' && (
+            <div>
+              <p className="text-content-secondary text-xs leading-relaxed mb-3">
+                Generate an SSH deploy key for this project. Add the public key to your GitHub repository
+                as a deploy key to enable SSH-based git operations.
+              </p>
+
+              {!sshPublicKey ? (
+                <button
+                  className={btnPrimary}
+                  onClick={handleGenerateSshKey}
+                  disabled={loading}
+                >
+                  {loading ? 'Generating...' : 'Generate SSH Key'}
+                </button>
+              ) : (
+                <>
+                  <label className="block text-content-secondary text-[11px] uppercase tracking-wider mb-1.5 mt-3">Public key:</label>
+                  <div className="relative">
+                    <textarea
+                      className="w-full py-2 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-[11px] outline-none resize-none h-16"
+                      readOnly
+                      value={sshPublicKey}
+                    />
+                    <button
+                      className="absolute top-1.5 right-1.5 px-2 py-1 bg-surface-raised border border-edge rounded text-[10px] text-content-secondary hover:text-content cursor-pointer"
+                      onClick={handleCopyPublicKey}
+                    >
+                      {copied ? 'Copied!' : 'Copy'}
+                    </button>
+                  </div>
+
+                  <div className="mt-3 p-2.5 bg-[rgba(255,200,50,0.08)] border border-[rgba(255,200,50,0.2)] rounded text-xs text-content-secondary leading-relaxed">
+                    Add this key as a <strong className="text-content">deploy key</strong> in your GitHub repo settings.
+                    Make sure to check <strong className="text-content">&quot;Allow write access&quot;</strong> so the system can push commits.
+                  </div>
+
+                  <div className="mt-4 border-t border-edge pt-4">
+                    <label className="block text-content-secondary text-[11px] uppercase tracking-wider mb-1.5">SSH clone URL:</label>
+                    <input
+                      className="w-full py-2 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-xs outline-none focus:border-accent"
+                      type="text"
+                      placeholder="git@github.com:org/repo.git"
+                      value={sshCloneUrl}
+                      onChange={e => setSshCloneUrl(e.target.value)}
+                      onKeyDown={e => { if (e.key === 'Enter') handleConnectSsh(); }}
+                    />
+                    <button
+                      className={btnPrimary}
+                      onClick={handleConnectSsh}
+                      disabled={loading || !sshCloneUrl.trim()}
+                    >
+                      {loading ? 'Cloning...' : 'Clone & Connect via SSH'}
+                    </button>
+                  </div>
+
+                  <button
+                    className={`${btnBase} mt-4`}
+                    onClick={handleGenerateSshKey}
+                    disabled={loading}
+                  >
+                    {loading ? 'Regenerating...' : 'Regenerate Key'}
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+
           {tab === 'url' && (
-            <div className="git-modal-url">
-              <label className="git-modal-label">Git clone URL:</label>
+            <div>
+              <label className="block text-content-secondary text-[11px] uppercase tracking-wider mb-1.5 mt-3">Git clone URL:</label>
               <input
-                className="git-modal-input"
+                className="w-full py-2 px-2.5 bg-surface-raised border border-edge rounded text-content font-mono text-xs outline-none focus:border-accent"
                 type="text"
                 placeholder="https://github.com/org/repo.git"
                 value={cloneUrl}
@@ -321,7 +450,7 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
                 onKeyDown={e => { if (e.key === 'Enter') handleConnectUrl(); }}
               />
               <button
-                className="git-modal-btn git-modal-btn-primary"
+                className={btnPrimary}
                 onClick={handleConnectUrl}
                 disabled={loading || !cloneUrl.trim()}
               >
@@ -331,13 +460,13 @@ export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModa
           )}
 
           {tab === 'init' && (
-            <div className="git-modal-init">
-              <p className="git-modal-info">
+            <div>
+              <p className="text-content-secondary text-xs leading-relaxed mb-3">
                 Initialize a new empty local git repository for this project.
                 You can connect it to a remote later.
               </p>
               <button
-                className="git-modal-btn git-modal-btn-primary"
+                className={btnPrimary}
                 onClick={handleInit}
                 disabled={loading}
               >

package/templates/assistkick-product-system/packages/frontend/src/components/GraphLegend.tsx

@@ -35,86 +35,84 @@ export function GraphLegend({ visible, onTypeToggle, onSearchChange }: GraphLege
   if (!visible) return null;
 
   return (
-    <div id="graph-legend">
-      <div className="graph-legend">
-        <div className="legend-search-container" id="search-container">
-          <input
-            type="text"
-            className="search-input"
-            placeholder="Search nodes..."
-            onChange={(e) => onSearchChange(e.target.value)}
-          />
+    <div className="fixed bottom-4 left-4 bg-surface-alt border border-edge rounded-md z-[150] max-h-[calc(100vh-116px)] overflow-y-auto min-w-[180px] shadow-[0_2px_8px_var(--panel-shadow)]">
+      <div className="relative flex flex-wrap items-center gap-1.5 px-2.5 py-2 border-b border-edge" id="search-container">
+        <input
+          type="text"
+          className="flex-1 min-w-0 h-7 px-2 bg-surface-raised border border-edge rounded text-content font-mono text-[11px] outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted"
+          placeholder="Search nodes..."
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
+      </div>
+      <div className="flex items-center gap-1.5 px-3 py-2 text-content-secondary font-mono text-[11px] font-semibold uppercase tracking-wide"><span>Legend</span></div>
+      <div className="px-3 pb-2.5">
+        <div className="mt-2 first:mt-0">
+          <div className="text-[10px] text-content-muted uppercase tracking-wider mb-1">Node Types</div>
+          <div className="flex flex-col gap-[3px]">
+            {Object.entries(NODE_COLORS).map(([type, color]) => {
+              const shape = NODE_SHAPES[type] || 'circle';
+              const pathD = nodeShapePath(shape, 6);
+              const active = !hiddenTypes.has(type);
+              return (
+                <div
+                  key={type}
+                  className={`flex items-center gap-2 cursor-pointer transition-opacity duration-150 rounded px-1 py-0.5 -mx-1 -my-0.5 hover:bg-surface-raised ${active ? 'opacity-100' : 'opacity-40'}`}
+                  onClick={() => handleTypeClick(type)}
+                  title={`Toggle ${LEGEND_LABELS[type]}`}
+                >
+                  <svg className="shrink-0" width="16" height="16" viewBox="-8 -8 16 16">
+                    <path d={pathD} fill={color} />
+                  </svg>
+                  <span className="text-[11px] text-content-secondary whitespace-nowrap">{LEGEND_LABELS[type] || type}</span>
+                </div>
+              );
+            })}
+          </div>
         </div>
-        <div className="legend-header"><span>Legend</span></div>
-        <div className="legend-body">
-          <div className="legend-section">
-            <div className="legend-section-title">Node Types</div>
-            <div className="legend-items">
-              {Object.entries(NODE_COLORS).map(([type, color]) => {
-                const shape = NODE_SHAPES[type] || 'circle';
-                const pathD = nodeShapePath(shape, 6);
-                const active = !hiddenTypes.has(type);
-                return (
-                  <div
-                    key={type}
-                    className={`legend-item legend-type-toggle${active ? ' active' : ''}`}
-                    onClick={() => handleTypeClick(type)}
-                    title={`Toggle ${LEGEND_LABELS[type]}`}
-                  >
-                    <svg className="legend-node-svg" width="16" height="16" viewBox="-8 -8 16 16">
-                      <path d={pathD} fill={color} />
-                    </svg>
-                    <span className="legend-item-label">{LEGEND_LABELS[type] || type}</span>
-                  </div>
-                );
-              })}
-            </div>
+        <div className="mt-2 first:mt-0">
+          <div className="text-[10px] text-content-muted uppercase tracking-wider mb-1">Node Size</div>
+          <div className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-full" style={{ background: 'var(--text-muted)' }} />
+            <span className="text-[10px] text-content-muted">{'\u2192'}</span>
+            <span className="w-[18px] h-[18px] rounded-full" style={{ background: 'var(--text-muted)' }} />
+            <span className="text-[11px] text-content-secondary whitespace-nowrap">more connections = larger</span>
           </div>
-          <div className="legend-section">
-            <div className="legend-section-title">Node Size</div>
-            <div className="legend-size-explanation">
-              <span className="legend-size-small" />
-              <span className="legend-size-arrow">{'\u2192'}</span>
-              <span className="legend-size-large" />
-              <span className="legend-item-label">more connections = larger</span>
-            </div>
+        </div>
+      </div>
+      <button className="flex items-center gap-1.5 w-full px-3 py-1.5 bg-transparent border-none border-t border-edge text-content-secondary font-mono text-[11px] font-semibold cursor-pointer uppercase tracking-wide hover:text-content" onClick={toggleEdges} title="Toggle edge relations">
+        <span className="text-[9px]" dangerouslySetInnerHTML={{ __html: edgesCollapsed ? '&#9654;' : '&#9660;' }} />
+        <span>Edge Relations</span>
+      </button>
+      <div className={edgesCollapsed ? 'hidden' : 'px-3 pb-2.5'}>
+        <div className="mt-2 first:mt-0">
+          <div className="flex flex-col gap-[3px]">
+            {Object.entries(EDGE_COLORS).map(([relation, color]) => (
+              <div key={relation} className="flex items-center gap-2">
+                <span className="w-5 h-[3px] rounded-sm shrink-0" style={{ background: color }} />
+                <span className="text-[11px] text-content-secondary whitespace-nowrap">{EDGE_LABELS[relation] || relation}</span>
+              </div>
+            ))}
           </div>
         </div>
-        <button className="legend-edges-toggle" onClick={toggleEdges} title="Toggle edge relations">
-          <span className="legend-toggle-icon" dangerouslySetInnerHTML={{ __html: edgesCollapsed ? '&#9654;' : '&#9660;' }} />
-          <span>Edge Relations</span>
-        </button>
-        <div className={`legend-edges-body${edgesCollapsed ? ' collapsed' : ''}`}>
-          <div className="legend-section">
-            <div className="legend-items">
-              {Object.entries(EDGE_COLORS).map(([relation, color]) => (
-                <div key={relation} className="legend-item">
-                  <span className="legend-edge-swatch" style={{ background: color }} />
-                  <span className="legend-item-label">{EDGE_LABELS[relation] || relation}</span>
-                </div>
-              ))}
+        <div className="mt-2 first:mt-0">
+          <div className="text-[10px] text-content-muted uppercase tracking-wider mb-1">Node Border</div>
+          <div className="flex flex-col gap-[3px]">
+            <div className="flex items-center gap-2">
+              <span className="w-3 h-3 rounded-full shrink-0 !bg-surface-raised border-2 border-[#ffd43b]" />
+              <span className="text-[11px] text-content-secondary whitespace-nowrap">incomplete</span>
             </div>
-          </div>
-          <div className="legend-section">
-            <div className="legend-section-title">Node Border</div>
-            <div className="legend-items">
-              <div className="legend-item">
-                <span className="legend-node-swatch legend-border-yellow" />
-                <span className="legend-item-label">incomplete</span>
-              </div>
-              <div className="legend-item">
-                <span className="legend-node-swatch legend-border-red" />
-                <span className="legend-item-label">has open questions</span>
-              </div>
+            <div className="flex items-center gap-2">
+              <span className="w-3 h-3 rounded-full shrink-0 !bg-surface-raised border-2 border-[#ff6b6b]" />
+              <span className="text-[11px] text-content-secondary whitespace-nowrap">has open questions</span>
             </div>
           </div>
-          <div className="legend-section">
-            <div className="legend-section-title">Gap Indicators</div>
-            <div className="legend-items">
-              <div className="legend-item">
-                <span className="legend-node-swatch legend-gap-pulse" />
-                <span className="legend-item-label">{'\u26A0'} pulsing = open questions</span>
-              </div>
+        </div>
+        <div className="mt-2 first:mt-0">
+          <div className="text-[10px] text-content-muted uppercase tracking-wider mb-1">Gap Indicators</div>
+          <div className="flex flex-col gap-[3px]">
+            <div className="flex items-center gap-2">
+              <span className="w-3 h-3 rounded-full shrink-0 legend-gap-pulse" />
+              <span className="text-[11px] text-content-secondary whitespace-nowrap">{'\u26A0'} pulsing = open questions</span>
             </div>
           </div>
         </div>

package/templates/assistkick-product-system/packages/frontend/src/components/GraphSettings.tsx

@@ -89,18 +89,18 @@ export function GraphSettings({ isOpen, onClose, graphRef }: GraphSettingsProps)
   ];
 
   return (
-    <div className={`settings-sheet${isOpen ? ' open' : ''}`} ref={sheetRef}>
-      <div className="settings-header">
-        <span className="settings-title">Settings</span>
-        <button className="settings-close" onClick={onClose}>&times;</button>
+    <div className={`fixed top-[84px] right-0 w-[280px] bg-panel border-l border-edge shadow-[-4px_0_16px_var(--panel-shadow)] transition-transform duration-[250ms] ease-out z-[250] flex flex-col ${isOpen ? 'translate-x-0' : 'translate-x-full'}`} ref={sheetRef}>
+      <div className="flex items-center justify-between px-4 py-3 border-b border-edge min-h-12">
+        <span className="text-[13px] font-semibold text-content uppercase tracking-wide">Settings</span>
+        <button className="bg-transparent border-none text-content-secondary text-lg cursor-pointer px-2 py-1 rounded hover:bg-tab-hover hover:text-content" onClick={onClose}>&times;</button>
       </div>
-      <div className="settings-body">
+      <div className="px-4 py-3 flex flex-col">
         {toggleItems.map(({ key, label }) => (
-          <label key={key} className="settings-row">
-            <span className="settings-label">{label}</span>
+          <label key={key} className="flex items-center justify-between py-2.5 border-b border-edge cursor-pointer last:border-b-0">
+            <span className="text-xs text-content-secondary">{label}</span>
             <input
               type="checkbox"
-              className="settings-toggle"
+              className="settings-toggle appearance-none w-9 h-5 bg-surface-raised border border-edge rounded-[10px] relative cursor-pointer transition-[background,border-color] duration-150 shrink-0 checked:bg-[rgba(77,171,247,0.2)] checked:border-accent"
               checked={settings[key]}
               onChange={() => handleToggle(key)}
             />

package/templates/assistkick-product-system/packages/frontend/src/components/GraphView.tsx

@@ -365,6 +365,6 @@ export const GraphView = forwardRef<GraphViewHandle, GraphViewProps>(
       return () => window.removeEventListener('resize', handleResize);
     }, [visible]);
 
-    return <div id="graph-container" ref={containerRef} style={{ display: visible ? 'block' : 'none' }} />;
+    return <div className="w-full h-[calc(100vh-44px)] overflow-hidden" ref={containerRef} style={{ display: visible ? 'block' : 'none' }} />;
   }
 );