@assistkick/create 1.6.0 → 1.7.0

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

@@ -1,86 +1,158 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  Columns3, MessageSquare, Network, ShieldCheck, Palette, Users,
+  Maximize, Settings, Sun, Moon,
+} from 'lucide-react';
+import { NavBarSidekick } from './ds/NavBarSidekick';
+import type { NavItem } from './ds/NavBarSidekick';
 import { ProjectSelector } from './ProjectSelector';
-import type { Project } from '../hooks/useProjects';
-
-interface ToolbarProps {
-  activeTab: string;
-  onTabChange: (tab: string) => void;
-  completeness: number;
-  onFit: () => void;
-  onSettingsToggle: () => void;
-  settingsOpen: boolean;
-  theme: string;
-  onThemeToggle: () => void;
-  isAdmin?: boolean;
-  onLogout: () => void;
-  projects: Project[];
-  selectedProjectId: string | null;
-  onProjectSelect: (id: string) => void;
-  onProjectCreate: (name: string) => Promise<any>;
-  onProjectRename: (id: string, name: string) => Promise<void>;
-  onProjectArchive: (id: string) => Promise<void>;
-  onOpenGitModal?: (project: Project) => void;
+import { useProjectStore } from '../stores/useProjectStore';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useGraphUIStore } from '../stores/useGraphUIStore';
+import { useGitModalStore } from '../stores/useGitModalStore';
+import { useTheme } from '../hooks/useTheme';
+import { useAuth } from '../hooks/useAuth';
+import { apiClient } from '../api/client';
+
+const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal', 'design-system']);
+
+function tabFromPath(pathname: string): string {
+  const seg = pathname.replace(/^\//, '');
+  return VALID_TABS.has(seg) ? seg : 'kanban';
 }
 
-export function Toolbar({
-  activeTab, onTabChange, completeness, onFit,
-  onSettingsToggle, settingsOpen, theme, onThemeToggle, isAdmin, onLogout,
-  projects, selectedProjectId, onProjectSelect, onProjectCreate, onProjectRename, onProjectArchive, onOpenGitModal,
-}: ToolbarProps) {
-  const tabs = ['kanban', 'terminal', 'graph', 'coherence'];
-  if (isAdmin) {
-    tabs.push('users');
-  }
+const ICON_PROPS = { size: 14, strokeWidth: 2 } as const;
+
+const TAB_ITEMS: NavItem[] = [
+  { id: 'kanban', label: 'Kanban', icon: <Columns3 {...ICON_PROPS} />, description: 'Board view of features' },
+  { id: 'terminal', label: 'Chat', icon: <MessageSquare {...ICON_PROPS} />, description: 'AI assistant terminal' },
+  { id: 'graph', label: 'Graph', icon: <Network {...ICON_PROPS} />, description: 'Knowledge graph visualization' },
+  { id: 'coherence', label: 'Coherence', icon: <ShieldCheck {...ICON_PROPS} />, description: 'Coherence analysis' },
+  { id: 'design-system', label: 'Design System', icon: <Palette {...ICON_PROPS} />, description: 'Living style guide' },
+];
+
+const ADMIN_ITEM: NavItem = { id: 'users', label: 'Users', icon: <Users {...ICON_PROPS} />, description: 'User management' };
+
+const iconBtnClass = (active?: boolean) => [
+  'flex h-8 w-8 items-center justify-center rounded-lg border',
+  'transition-all duration-150 cursor-pointer outline-none',
+  active
+    ? 'border-accent/40 bg-accent/10 text-accent'
+    : 'border-edge text-content-muted hover:border-content/20 hover:text-content',
+].join(' ');
+
+export function Toolbar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const activeTab = tabFromPath(location.pathname);
+
+  const { theme, toggleTheme } = useTheme();
+  const { user } = useAuth();
+  const isAdmin = user?.role === 'admin';
+
+  const projects = useProjectStore((s) => s.projects);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+  const selectProject = useProjectStore((s) => s.selectProject);
+  const createProject = useProjectStore((s) => s.createProject);
+  const renameProject = useProjectStore((s) => s.renameProject);
+  const archiveProject = useProjectStore((s) => s.archiveProject);
+
+  const graphData = useGraphStore((s) => s.graphData);
+  const onFit = useGraphUIStore((s) => s.onFit);
+  const settingsOpen = useGraphUIStore((s) => s.settingsOpen);
+  const onSettingsToggle = useGraphUIStore((s) => s.onSettingsToggle);
+
+  const openGitModal = useGitModalStore((s) => s.open);
+
+  const completeness = graphData
+    ? Math.round((graphData.nodes.reduce((acc: number, n: any) => acc + (n.completeness || 0), 0) / Math.max(graphData.nodes.length, 1)) * 100)
+    : 0;
+
+  const items = isAdmin ? [...TAB_ITEMS, ADMIN_ITEM] : TAB_ITEMS;
+
+  const handleNavigate = useCallback((id: string) => {
+    navigate(`/${id}`);
+  }, [navigate]);
+
+  const handleLogout = useCallback(async () => {
+    try {
+      await apiClient.logout();
+    } catch {
+      // ignore
+    }
+    navigate('/login', { replace: true });
+  }, [navigate]);
 
-  const tabLabels: Record<string, string> = { terminal: 'Chat' };
+  // Global '/' shortcut — the NavBarSidekick handles its own cmd palette UI,
+  // but we wire the keyboard shortcut at the toolbar level for page-wide reach
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === '/' && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement)) {
+        // Let the NavBarSidekick's own button handle it via a simulated click
+        const btn = document.querySelector('[data-cmd-trigger]') as HTMLButtonElement | null;
+        if (btn) { e.preventDefault(); btn.click(); }
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
 
   return (
-    <div className="toolbar">
-      <div className="tab-bar">
-        <ProjectSelector
-          projects={projects}
-          selectedProjectId={selectedProjectId}
-          onSelect={onProjectSelect}
-          onCreate={onProjectCreate}
-          onRename={onProjectRename}
-          onArchive={onProjectArchive}
-          onOpenGitModal={onOpenGitModal}
-        />
-        {tabs.map(tab => (
-          <button
-            key={tab}
-            className={`tab-btn${activeTab === tab ? ' active' : ''}`}
-            onClick={() => onTabChange(tab)}
-          >
-            {tabLabels[tab] || tab.charAt(0).toUpperCase() + tab.slice(1)}
-          </button>
-        ))}
-      </div>
-
-      <div className="toolbar-spacer" />
-
-      <div className="completeness-bar">
-        <span>Completeness</span>
-        <div className="completeness-track">
-          <div className="completeness-fill" style={{ width: `${completeness}%` }} />
-        </div>
-        <span>{completeness}%</span>
-      </div>
-
-      <button className="toolbar-btn" onClick={onFit} title="Fit graph to viewport">Fit</button>
-      <button
-        className={`toolbar-btn settings-gear-btn${settingsOpen ? ' active' : ''}`}
-        onClick={onSettingsToggle}
-        title="Graph settings"
-      >
-        &#9881;
-      </button>
-      <button className="theme-toggle" onClick={onThemeToggle} title="Toggle theme">
-        {theme === 'dark' ? '\u2600' : '\u263E'}
-      </button>
-      <button className="toolbar-btn logout-btn" onClick={onLogout} title="Logout">
-        Logout
-      </button>
+    <div className="border-b border-edge">
+      <NavBarSidekick
+        items={items}
+        activeId={activeTab}
+        onNavigate={handleNavigate}
+        brand={
+          <ProjectSelector
+            projects={projects}
+            selectedProjectId={selectedProjectId}
+            onSelect={selectProject}
+            onCreate={createProject}
+            onRename={renameProject}
+            onArchive={archiveProject}
+            onOpenGitModal={openGitModal}
+          />
+        }
+        center={
+          <div className="flex items-center justify-end gap-2 text-[11px] text-content-muted">
+            <span className="hidden lg:inline uppercase tracking-wider font-medium">Completeness</span>
+            <div className="w-20 h-1.5 rounded-full bg-completeness-bg overflow-hidden">
+              <div
+                className="h-full rounded-full bg-completeness-fill transition-all duration-300"
+                style={{ width: `${completeness}%` }}
+              />
+            </div>
+            <span className="font-mono text-[11px] text-content-secondary w-8 text-right">{completeness}%</span>
+          </div>
+        }
+        actions={
+          <div className="flex items-center gap-1.5">
+            <button onClick={() => onFit?.()} title="Fit graph to viewport" className={iconBtnClass()}>
+              <Maximize size={14} strokeWidth={2} />
+            </button>
+            <button onClick={onSettingsToggle} title="Graph settings" className={iconBtnClass(settingsOpen)}>
+              <Settings size={14} strokeWidth={2} />
+            </button>
+            <div className="h-5 w-px bg-edge mx-1" />
+          </div>
+        }
+        trailing={
+          <div className="flex items-center gap-1.5">
+            <button onClick={toggleTheme} title="Toggle theme" className={iconBtnClass()}>
+              {theme === 'dark' ? <Sun size={14} strokeWidth={2} /> : <Moon size={14} strokeWidth={2} />}
+            </button>
+            <button
+              onClick={handleLogout}
+              title="Logout"
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-[11px] font-bold text-surface cursor-pointer outline-none hover:opacity-90 transition-opacity"
+            >
+              {user?.email?.slice(0, 2).toUpperCase() || 'U'}
+            </button>
+          </div>
+        }
+      />
     </div>
   );
 }

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

@@ -0,0 +1,254 @@
+import React from 'react';
+import {
+  Play, AlertTriangle, Lock, CircleDot, Copy, Check,
+} from 'lucide-react';
+
+/* ── Types ── */
+
+export interface KanbanCardProps {
+  id: string;
+  name: string;
+  /** 0–100 */
+  pct: number;
+  kind?: string;
+  rejectionCount: number;
+  blocked: boolean;
+  /** Pipeline status string */
+  pipeline: string;
+  /** Pipeline badge label (e.g. "Retry 2", "Running...") */
+  pipelineLabel?: string;
+  /** Tool call counts — { Read: 6, Tools: 11, Write: 3, Edit: 2 } */
+  toolCalls?: Record<string, number>;
+  /** Session meta pills — e.g. ["Ctx 17%", "19t", "$0.3948", "opus-4"] */
+  meta?: string[];
+  /** Stop reason (e.g. "end_turn", "max_turns") */
+  stopReason?: string;
+  /** Number of issues / notes */
+  issueCount: number;
+  /** Issue button label override */
+  issueLabel?: string;
+  /** Show play button */
+  showPlay?: boolean;
+  /** Show resume button */
+  showResume?: boolean;
+  /** Whether copy was just triggered */
+  copied?: boolean;
+  /** Is this the currently-playing card in Play All */
+  playAllActive?: boolean;
+
+  /* Callbacks */
+  onClick?: () => void;
+  onCopy?: () => void;
+  onPlay?: () => void;
+  onResume?: () => void;
+  onUnblock?: () => void;
+  onIssuesClick?: () => void;
+
+  /* Drag */
+  draggable?: boolean;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragEnd?: (e: React.DragEvent) => void;
+}
+
+/* ── Pipeline style helpers ── */
+
+function pipelineCls(status: string): string {
+  if (['developing', 'reviewing', 'testing', 'committing'].includes(status)) return 'bg-accent/10 text-accent animate-pulse';
+  switch (status) {
+    case 'completed': return 'bg-emerald-500/10 text-emerald-400';
+    case 'failed': return 'bg-error/10 text-error';
+    case 'blocked': return 'bg-error/10 text-error';
+    case 'interrupted': return 'bg-amber-500/10 text-amber-400';
+    default: return 'bg-white/[0.06] text-content-muted';
+  }
+}
+
+function pipelineIcon(status: string) {
+  if (['developing', 'reviewing', 'testing', 'committing'].includes(status)) return <CircleDot size={12} strokeWidth={2.5} />;
+  if (status === 'failed') return <AlertTriangle size={12} strokeWidth={2.5} />;
+  return null;
+}
+
+/* ── Kind badge ── */
+
+function KindBadge({ kind }: { kind: string }) {
+  if (!kind || kind === 'new') return null;
+  const cls = kind === 'improvement'
+    ? 'text-blue-400 bg-blue-400/15'
+    : 'text-amber-400 bg-amber-400/15';
+  return (
+    <span className={`rounded px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide ${cls}`}>
+      {kind}
+    </span>
+  );
+}
+
+/* ── Card component ── */
+
+export function KanbanCard({
+  id, name, pct, kind, rejectionCount, blocked, pipeline, pipelineLabel: pipLabel,
+  toolCalls, meta, stopReason, issueCount, issueLabel, showPlay, showResume, copied,
+  playAllActive,
+  onClick, onCopy, onPlay, onResume, onUnblock, onIssuesClick,
+  draggable, onDragStart, onDragEnd,
+}: KanbanCardProps) {
+  const hasPipeline = pipeline !== 'idle' && !!pipLabel;
+  const hasTools = toolCalls && Object.values(toolCalls).some(v => v > 0);
+  const hasStatusRow = rejectionCount > 0 || hasPipeline || !!stopReason;
+
+  const stripColor = blocked
+    ? 'from-error/60 to-error/20'
+    : rejectionCount >= 3
+      ? 'from-error/40 to-amber-500/20'
+      : ['developing', 'reviewing', 'testing', 'committing'].includes(pipeline)
+        ? 'from-accent/60 to-accent/20'
+        : pipeline === 'completed'
+          ? 'from-emerald-400/60 to-emerald-400/20'
+          : playAllActive
+            ? 'from-accent/60 to-accent/20'
+            : 'from-edge to-transparent';
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button')) return;
+    onClick?.();
+  };
+
+  return (
+    <div
+      className="group relative shrink-0 overflow-hidden rounded-2xl bg-surface border border-edge shadow-lg shadow-black/10 backdrop-blur-sm transition-all duration-200 hover:border-content/15 hover:shadow-xl hover:shadow-black/15 cursor-pointer"
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onClick={handleCardClick}
+      data-feature-id={id}
+    >
+      {/* Left accent strip */}
+      <div className={`absolute left-0 top-0 h-full w-1 bg-gradient-to-b ${stripColor}`} />
+
+      <div className="p-4 pl-5">
+        {/* Header */}
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-[12px] text-content-secondary">{id}</span>
+          <KindBadge kind={kind || 'new'} />
+          <button
+            className="flex h-6 w-6 items-center justify-center rounded-md bg-white/[0.08] text-content-secondary transition-colors hover:bg-white/15 hover:text-content cursor-pointer"
+            title="Copy feature ID and name"
+            onClick={(e) => { e.stopPropagation(); onCopy?.(); }}
+          >
+            {copied ? <Check size={12} strokeWidth={2.5} className="text-emerald-400" /> : <Copy size={12} strokeWidth={2} />}
+          </button>
+          <div className="flex-1" />
+          {blocked ? (
+            <span className="flex items-center gap-1.5 rounded-full bg-error/15 px-2.5 py-1 text-[11px] font-bold text-error backdrop-blur">
+              <Lock size={11} strokeWidth={2.5} /> Blocked
+            </span>
+          ) : showPlay ? (
+            <button
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer"
+              title="Start automated development pipeline"
+              onClick={(e) => { e.stopPropagation(); onPlay?.(); }}
+            >
+              <Play size={12} strokeWidth={2.5} fill="currentColor" />
+            </button>
+          ) : showResume ? (
+            <button
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer"
+              title="Resume pipeline from last completed step"
+              onClick={(e) => { e.stopPropagation(); onResume?.(); }}
+            >
+              <Play size={12} strokeWidth={2.5} fill="currentColor" />
+            </button>
+          ) : null}
+        </div>
+
+        {/* Name */}
+        <div className="mt-2.5 text-[14px] font-semibold leading-snug text-content">{name}</div>
+
+        {/* Spec disc */}
+        <div className="mt-3 flex items-center gap-2">
+          <svg width="22" height="22" viewBox="0 0 22 22" className="shrink-0 -rotate-90">
+            <circle cx="11" cy="11" r="9" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/5" />
+            <circle
+              cx="11" cy="11" r="9" fill="none" strokeWidth="2.5"
+              stroke="url(#specGrad)" strokeLinecap="round"
+              strokeDasharray={`${(pct / 100) * 2 * Math.PI * 9} ${2 * Math.PI * 9}`}
+            />
+            <defs>
+              <linearGradient id="specGrad" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stopColor="var(--completeness-fill)" />
+                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.6" />
+              </linearGradient>
+            </defs>
+          </svg>
+          <span className="font-mono text-[11px] text-content-secondary">{pct}%</span>
+        </div>
+
+        {/* Stats pills */}
+        {(hasTools || hasStatusRow) && (
+          <div className="mt-3 space-y-1.5" onClick={(e) => e.stopPropagation()}>
+            {/* Tool calls row */}
+            {hasTools && (
+              <div className="flex gap-1">
+                {Object.entries(toolCalls!).filter(([, v]) => v > 0).map(([k, v]) => (
+                  <span key={k} className="flex-1 rounded-full bg-accent/10 py-1 text-center font-mono text-[10px] font-medium text-accent backdrop-blur">
+                    {k}: {v}
+                  </span>
+                ))}
+              </div>
+            )}
+            {/* Meta row */}
+            {meta && meta.length > 0 && (
+              <div className="flex gap-1">
+                {meta.map(t => (
+                  <span key={t} className="flex-1 rounded-full bg-white/[0.08] py-1 text-center font-mono text-[10px] text-content backdrop-blur">{t}</span>
+                ))}
+              </div>
+            )}
+            {/* Status row: rejected + pipeline + stop reason */}
+            {hasStatusRow && (
+              <div className="flex gap-1">
+                {rejectionCount > 0 && (
+                  <span className="flex-1 rounded-full bg-amber-400/15 py-1 text-center text-[10px] font-semibold text-amber-400 backdrop-blur">
+                    {rejectionCount}x rejected
+                  </span>
+                )}
+                {hasPipeline && (
+                  <span className={`flex-1 inline-flex items-center justify-center gap-1.5 rounded-full py-1 text-[10px] font-semibold backdrop-blur ${pipelineCls(pipeline)}`}>
+                    {pipelineIcon(pipeline)}
+                    {pipLabel}
+                  </span>
+                )}
+                {stopReason && (
+                  <span className="flex-1 rounded-full bg-accent-secondary/10 py-1 text-center font-mono text-[10px] text-accent-secondary backdrop-blur">{stopReason}</span>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Unblock */}
+        {blocked && (
+          <button
+            className="mt-3 w-full rounded-full border border-error/30 py-1.5 text-center text-[11px] font-mono text-error backdrop-blur transition-all hover:bg-error/10 cursor-pointer"
+            onClick={(e) => { e.stopPropagation(); onUnblock?.(); }}
+          >
+            Unblock
+          </button>
+        )}
+
+        {/* Issues */}
+        <button
+          className={[
+            'mt-3 w-full rounded-full border py-1.5 text-center text-[11px] font-mono backdrop-blur transition-all cursor-pointer',
+            issueCount > 0
+              ? 'border-white/10 text-content-secondary hover:border-accent/30 hover:text-accent'
+              : 'border-white/5 text-content-muted/50 hover:border-white/10 hover:text-content-muted',
+          ].join(' ')}
+          onClick={(e) => { e.stopPropagation(); onIssuesClick?.(); }}
+        >
+          {issueLabel}
+        </button>
+      </div>
+    </div>
+  );
+}