@assistkick/create 1.6.0 → 1.7.0

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  Play, AlertTriangle, Lock, CircleDot, Copy,
+} from 'lucide-react';
+
+/* ── Demo data ── */
+
+interface DemoCard {
+  id: string;
+  name: string;
+  pct: number;
+  kind: 'new' | 'improvement' | 'bugfix';
+  rejections: number;
+  pipeline: 'idle' | 'active' | 'completed' | 'failed' | 'interrupted' | 'blocked';
+  blocked: boolean;
+  issues: number;
+  stage: 'in_progress' | 'in_review' | 'qa';
+  tools: { read: number; tools: number; write: number; edit: number };
+  ctx: string;
+  turns: number;
+  cost: string;
+  model: string;
+  stop: string;
+}
+
+const DEMO_CARDS: DemoCard[] = [
+  {
+    id: 'feat_0f2d6616', name: 'TailwindCSS Integration', pct: 100, kind: 'new',
+    rejections: 1, pipeline: 'interrupted', blocked: false, issues: 1,
+    stage: 'in_review', tools: { read: 6, tools: 11, write: 0, edit: 0 },
+    ctx: '17%', turns: 19, cost: '$0.3948', model: 'opus-4', stop: 'end_turn',
+  },
+  {
+    id: 'feat_a3c71b02', name: 'Auth Flow Redesign', pct: 72, kind: 'improvement',
+    rejections: 0, pipeline: 'active', blocked: false, issues: 0,
+    stage: 'in_progress', tools: { read: 12, tools: 4, write: 3, edit: 7 },
+    ctx: '34%', turns: 26, cost: '$0.5120', model: 'sonnet-4', stop: '',
+  },
+  {
+    id: 'feat_9e45f1d8', name: 'WebSocket Events', pct: 45, kind: 'new',
+    rejections: 3, pipeline: 'failed', blocked: false, issues: 3,
+    stage: 'qa', tools: { read: 2, tools: 8, write: 1, edit: 0 },
+    ctx: '9%', turns: 11, cost: '$0.1840', model: 'opus-4', stop: 'max_turns',
+  },
+  {
+    id: 'feat_b7d20cc4', name: 'Rate Limiter Middleware', pct: 88, kind: 'bugfix',
+    rejections: 0, pipeline: 'idle', blocked: true, issues: 0,
+    stage: 'in_progress', tools: { read: 0, tools: 0, write: 0, edit: 0 },
+    ctx: '', turns: 0, cost: '', model: '', stop: '',
+  },
+];
+
+/* ── Pipeline helpers ── */
+
+function pipelineStyle(status: DemoCard['pipeline']): string {
+  switch (status) {
+    case 'active': return 'bg-accent/10 text-accent animate-pulse';
+    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 '';
+  }
+}
+
+function pipelineLabel(status: DemoCard['pipeline'], rejections: number): string {
+  if (rejections >= 1 && status !== 'idle') return `Retry ${rejections + 1}`;
+  switch (status) {
+    case 'active': return 'Running...';
+    case 'completed': return 'Completed';
+    case 'failed': return 'Failed';
+    case 'blocked': return 'Blocked';
+    case 'interrupted': return 'Interrupted';
+    default: return '';
+  }
+}
+
+/* ── Kind badge ── */
+
+function KindBadge({ kind }: { kind: DemoCard['kind'] }) {
+  if (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>
+  );
+}
+
+/* ── Glass Card ── */
+
+function CardGlass({ card }: { card: DemoCard }) {
+  const hasTools = Object.values(card.tools).some(v => v > 0);
+  const hasPipeline = card.pipeline !== 'idle';
+  const hasStatusRow = card.rejections > 0 || hasPipeline || card.stop;
+  const stripColor = card.blocked
+    ? 'from-error/60 to-error/20'
+    : card.rejections >= 3
+      ? 'from-error/40 to-amber-500/20'
+      : card.pipeline === 'active'
+        ? 'from-accent/60 to-accent/20'
+        : card.pipeline === 'completed'
+          ? 'from-emerald-400/60 to-emerald-400/20'
+          : 'from-edge to-transparent';
+
+  return (
+    <div className="group relative 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">
+      <div className={`absolute left-0 top-0 h-full w-1 bg-gradient-to-b ${stripColor}`} />
+      <div className="p-5 pl-6">
+        {/* Header */}
+        <div className="flex items-center gap-2.5">
+          <span className="font-mono text-[12px] text-content-secondary">{card.id}</span>
+          <KindBadge kind={card.kind} />
+          <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">
+            <Copy size={12} strokeWidth={2} />
+          </button>
+          <div className="flex-1" />
+          {card.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>
+          ) : card.pipeline === 'idle' ? (
+            <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">
+              <Play size={12} strokeWidth={2.5} fill="currentColor" />
+            </button>
+          ) : null}
+        </div>
+
+        {/* Name */}
+        <div className="mt-3 text-[15px] font-semibold leading-snug text-content">{card.name}</div>
+
+        {/* Spec disc */}
+        <div className="mt-3.5 flex items-center gap-2.5">
+          <svg width="24" height="24" viewBox="0 0 24 24" className="shrink-0 -rotate-90">
+            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/5" />
+            <circle
+              cx="12" cy="12" r="10" fill="none" strokeWidth="2.5"
+              stroke="url(#specGrad)" strokeLinecap="round"
+              strokeDasharray={`${(card.pct / 100) * 2 * Math.PI * 10} ${2 * Math.PI * 10}`}
+            />
+            <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-[12px] text-content-secondary">{card.pct}%</span>
+        </div>
+
+        {/* Stats — evenly spaced pills */}
+        {(hasTools || hasStatusRow) && (
+          <div className="mt-3.5 space-y-2">
+            {hasTools && (
+              <div className="flex gap-1.5">
+                {Object.entries(card.tools).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-[11px] font-medium text-accent backdrop-blur">
+                    {k.charAt(0).toUpperCase() + k.slice(1)}: {v}
+                  </span>
+                ))}
+              </div>
+            )}
+            {hasTools && (
+              <div className="flex gap-1.5">
+                {[card.ctx && `Ctx ${card.ctx}`, card.turns > 0 && `${card.turns}t`, card.cost, card.model].filter(Boolean).map(t => (
+                  <span key={t as string} className="flex-1 rounded-full bg-white/[0.08] py-1 text-center font-mono text-[11px] text-content backdrop-blur">{t}</span>
+                ))}
+              </div>
+            )}
+            {hasStatusRow && (
+              <div className="flex gap-1.5">
+                {card.rejections > 0 && (
+                  <span className="flex-1 rounded-full bg-amber-400/15 py-1 text-center text-[11px] font-semibold text-amber-400 backdrop-blur">
+                    {card.rejections}x rejected
+                  </span>
+                )}
+                {hasPipeline && (
+                  <span className={`flex-1 inline-flex items-center justify-center gap-1.5 rounded-full py-1 text-[11px] font-semibold backdrop-blur ${pipelineStyle(card.pipeline)}`}>
+                    {card.pipeline === 'active' && <CircleDot size={12} strokeWidth={2.5} />}
+                    {card.pipeline === 'failed' && <AlertTriangle size={12} strokeWidth={2.5} />}
+                    {pipelineLabel(card.pipeline, card.rejections)}
+                  </span>
+                )}
+                {card.stop && (
+                  <span className="flex-1 rounded-full bg-accent-secondary/10 py-1 text-center font-mono text-[11px] text-accent-secondary backdrop-blur">{card.stop}</span>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Issues */}
+        <button className={[
+          'mt-3.5 w-full rounded-full border py-2 text-center text-[12px] font-mono backdrop-blur transition-all cursor-pointer',
+          card.issues > 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(' ')}>
+          {card.issues > 0 ? `${card.issues} issue${card.issues !== 1 ? 's' : ''} reported` : 'No issues'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ── Showcase export ── */
+
+export function KanbanCardShowcase() {
+  return (
+    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
+      {DEMO_CARDS.map(c => <CardGlass key={c.id} card={c} />)}
+    </div>
+  );
+}

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

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { Search } from 'lucide-react';
+
+export interface NavItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+}
+
+export interface NavBarSidekickProps {
+  /** Navigation items shown in the segmented control */
+  items: NavItem[];
+  /** Currently active item id — controlled externally */
+  activeId?: string;
+  /** Called when a nav item is selected */
+  onNavigate?: (id: string) => void;
+  /** Left-side brand / project slot */
+  brand?: React.ReactNode;
+  /** Content between the segmented control and the right-side actions */
+  center?: React.ReactNode;
+  /** Right-side actions rendered before the search trigger */
+  actions?: React.ReactNode;
+  /** Far-right trailing element (avatar, etc.) */
+  trailing?: React.ReactNode;
+}
+
+export function NavBarSidekick({
+  items, activeId, onNavigate, brand, center, actions, trailing,
+}: NavBarSidekickProps) {
+  // Fallback to internal state when no external activeId is provided (design system demo mode)
+  const [internalActive, setInternalActive] = useState(items[0]?.id ?? '');
+  const active = activeId ?? internalActive;
+
+  const [cmdOpen, setCmdOpen] = useState(false);
+  const [cmdQuery, setCmdQuery] = useState('');
+
+  const filteredItems = cmdQuery
+    ? items.filter((i) =>
+        i.label.toLowerCase().includes(cmdQuery.toLowerCase()) ||
+        (i.description?.toLowerCase().includes(cmdQuery.toLowerCase()) ?? false))
+    : items;
+
+  const handleSelect = (id: string) => {
+    if (onNavigate) {
+      onNavigate(id);
+    } else {
+      setInternalActive(id);
+    }
+  };
+
+  return (
+    <nav className="bg-surface-alt">
+      {/* Top bar */}
+      <div className="flex items-center gap-3 px-5 py-2">
+        {brand && <div className="mr-1 shrink-0">{brand}</div>}
+
+        {/* Segmented control */}
+        <div className="flex items-center rounded-xl bg-surface p-1 border border-edge">
+          {items.map((item) => {
+            const isActive = active === item.id;
+            return (
+              <button
+                key={item.id}
+                onClick={() => handleSelect(item.id)}
+                className={[
+                  'flex items-center gap-1.5 rounded-lg px-3.5 py-1.5',
+                  'text-[12px] font-semibold uppercase tracking-wider',
+                  'transition-all duration-150 cursor-pointer outline-none',
+                  isActive
+                    ? 'bg-accent text-surface shadow-sm'
+                    : 'text-content-muted hover:text-content hover:bg-surface-raised',
+                ].join(' ')}
+                style={isActive ? { boxShadow: '0 2px 8px -2px var(--accent)' } : {}}
+              >
+                {item.icon && <span className="flex items-center">{item.icon}</span>}
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex-1">
+          {center}
+        </div>
+
+        {/* Actions slot */}
+        {actions}
+
+        {/* Command palette trigger */}
+        <button
+          data-cmd-trigger
+          onClick={() => { setCmdOpen(!cmdOpen); setCmdQuery(''); }}
+          className={[
+            'flex items-center gap-2 rounded-lg border px-3 py-1.5',
+            'text-[12px] transition-all duration-150 cursor-pointer outline-none',
+            cmdOpen
+              ? 'border-accent/40 bg-surface text-content'
+              : 'border-edge text-content-muted hover:border-content/20 hover:text-content-secondary',
+          ].join(' ')}
+        >
+          <Search size={13} strokeWidth={2} />
+          <span className="hidden sm:inline">Search</span>
+          <kbd className="hidden sm:inline-flex items-center rounded border border-edge bg-surface-raised px-1.5 py-0.5 text-[10px] font-mono text-content-muted">
+            /
+          </kbd>
+        </button>
+
+        {trailing && <div className="ml-1 shrink-0">{trailing}</div>}
+      </div>
+
+      {/* Command palette dropdown */}
+      {cmdOpen && (
+        <div className="border-t border-edge bg-surface px-5 py-3">
+          <input
+            autoFocus
+            value={cmdQuery}
+            onChange={(e) => setCmdQuery(e.target.value)}
+            placeholder="Type to search pages..."
+            className="w-full bg-transparent text-[13px] text-content outline-none placeholder:text-content-muted"
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') { setCmdOpen(false); setCmdQuery(''); }
+              if (e.key === 'Enter' && filteredItems.length > 0) {
+                handleSelect(filteredItems[0].id);
+                setCmdOpen(false);
+                setCmdQuery('');
+              }
+            }}
+          />
+          {cmdQuery && (
+            <div className="mt-2 flex flex-col gap-1">
+              {filteredItems.length === 0 ? (
+                <div className="py-2 text-[12px] text-content-muted">No results</div>
+              ) : (
+                filteredItems.map((item) => (
+                  <button
+                    key={item.id}
+                    onClick={() => { handleSelect(item.id); setCmdOpen(false); setCmdQuery(''); }}
+                    className={[
+                      'flex items-center gap-3 rounded-lg px-3 py-2 text-left',
+                      'text-[13px] transition-colors duration-100 cursor-pointer outline-none',
+                      active === item.id
+                        ? 'bg-accent/10 text-accent'
+                        : 'text-content-secondary hover:bg-surface-raised hover:text-content',
+                    ].join(' ')}
+                  >
+                    {item.icon && <span className="flex items-center">{item.icon}</span>}
+                    <div>
+                      <div className="font-medium">{item.label}</div>
+                      {item.description && (
+                        <div className="text-[11px] text-content-muted">{item.description}</div>
+                      )}
+                    </div>
+                  </button>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </nav>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/hooks/useGraph.ts

@@ -1,27 +1,12 @@
-import { useState, useEffect, useCallback } from 'react';
-import { apiClient } from '../api/client';
+import { useEffect } from 'react';
+import { useGraphStore } from '../stores/useGraphStore';
 
 export function useGraph(projectId?: string | null) {
-  const [graphData, setGraphData] = useState<any>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  const fetchGraph = useCallback(async () => {
-    try {
-      setLoading(true);
-      const data = await apiClient.fetchGraph(projectId ?? undefined);
-      setGraphData(data);
-      setError(null);
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }, [projectId]);
+  const { graphData, error, loading, fetchGraph } = useGraphStore();
 
   useEffect(() => {
-    fetchGraph();
-  }, [fetchGraph]);
+    fetchGraph(projectId);
+  }, [projectId, fetchGraph]);
 
-  return { graphData, error, loading, refetch: fetchGraph };
+  return { graphData, error, loading, refetch: () => fetchGraph(projectId) };
 }

package/templates/assistkick-product-system/packages/frontend/src/hooks/useProjects.ts

@@ -1,90 +1,25 @@
-import { useState, useEffect, useCallback } from 'react';
-import { apiClient } from '../api/client';
+import { useEffect } from 'react';
+import { useProjectStore } from '../stores/useProjectStore';
 
-const STORAGE_KEY = 'selectedProjectId';
-
-export interface Project {
-  id: string;
-  name: string;
-  isDefault: number;
-  archivedAt: string | null;
-  repoUrl: string | null;
-  githubInstallationId: string | null;
-  githubRepoFullName: string | null;
-  baseBranch: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
+export type { Project } from '../stores/useProjectStore';
 
 export function useProjects() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
-    () => localStorage.getItem(STORAGE_KEY),
-  );
-  const [loading, setLoading] = useState(true);
-
-  const fetchProjects = useCallback(async () => {
-    try {
-      const data = await apiClient.fetchProjects();
-      setProjects(data.projects);
-      return data.projects as Project[];
-    } catch {
-      setProjects([]);
-      return [] as Project[];
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const store = useProjectStore();
 
   useEffect(() => {
-    fetchProjects().then((fetched) => {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored && fetched.some((p: Project) => p.id === stored)) {
-        setSelectedProjectId(stored);
-      } else if (fetched.length > 0) {
-        const defaultProject = fetched.find((p: Project) => p.isDefault === 1);
-        const fallback = defaultProject ? defaultProject.id : fetched[0].id;
-        setSelectedProjectId(fallback);
-        localStorage.setItem(STORAGE_KEY, fallback);
-      }
-    });
-  }, [fetchProjects]);
-
-  const selectProject = useCallback((id: string) => {
-    setSelectedProjectId(id);
-    localStorage.setItem(STORAGE_KEY, id);
-  }, []);
-
-  const createProject = useCallback(async (name: string) => {
-    const data = await apiClient.createProject(name);
-    await fetchProjects();
-    selectProject(data.project.id);
-    return data.project;
-  }, [fetchProjects, selectProject]);
-
-  const renameProject = useCallback(async (id: string, name: string) => {
-    await apiClient.renameProject(id, name);
-    await fetchProjects();
-  }, [fetchProjects]);
-
-  const archiveProject = useCallback(async (id: string) => {
-    await apiClient.archiveProject(id);
-    const updated = await fetchProjects();
-    if (selectedProjectId === id && updated.length > 0) {
-      const defaultProject = updated.find((p: Project) => p.isDefault === 1);
-      const fallback = defaultProject ? defaultProject.id : updated[0].id;
-      selectProject(fallback);
+    if (store.loading) {
+      store.init();
     }
-  }, [fetchProjects, selectProject, selectedProjectId]);
+  }, []);
 
   return {
-    projects,
-    selectedProjectId,
-    loading,
-    selectProject,
-    createProject,
-    renameProject,
-    archiveProject,
-    refetchProjects: fetchProjects,
+    projects: store.projects,
+    selectedProjectId: store.selectedProjectId,
+    loading: store.loading,
+    selectProject: store.selectProject,
+    createProject: store.createProject,
+    renameProject: store.renameProject,
+    archiveProject: store.archiveProject,
+    refetchProjects: store.refetchProjects,
   };
 }

package/templates/assistkick-product-system/packages/frontend/src/routes/CoherenceRoute.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CoherenceView } from '../components/CoherenceView';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useProjectStore } from '../stores/useProjectStore';
+import { useSidePanelStore } from '../stores/useSidePanelStore';
+
+export function CoherenceRoute() {
+  const graphData = useGraphStore((s) => s.graphData);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+  const openSidePanel = useSidePanelStore((s) => s.open);
+
+  if (!graphData) return null;
+
+  return (
+    <div id="coherence-container" style={{ display: 'block' }}>
+      <CoherenceView graphData={graphData} onNodeClick={openSidePanel} projectId={selectedProjectId} />
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/routes/DashboardLayout.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { Outlet } from 'react-router-dom';
+import { Toolbar } from '../components/Toolbar';
+import { SidePanel } from '../components/SidePanel';
+import { QaIssueSheet } from '../components/QaIssueSheet';
+import { GitRepoModal } from '../components/GitRepoModal';
+import { useSidePanelStore } from '../stores/useSidePanelStore';
+import { useQaSheetStore } from '../stores/useQaSheetStore';
+import { useGitModalStore } from '../stores/useGitModalStore';
+import { useGraphUIStore } from '../stores/useGraphUIStore';
+import { useProjects } from '../hooks/useProjects';
+import { useGraph } from '../hooks/useGraph';
+import { ToastProvider } from '../hooks/useToast';
+
+export function DashboardLayout() {
+  const { selectedProjectId } = useProjects();
+  // Keep graph data fetching at layout level so it's available for all views
+  useGraph(selectedProjectId);
+
+  const closeSidePanel = useSidePanelStore((s) => s.close);
+  const closeQaSheet = useQaSheetStore((s) => s.close);
+  const gitModalProject = useGitModalStore((s) => s.project);
+  const setSettingsOpen = useGraphUIStore((s) => s.setSettingsOpen);
+
+  // Global keyboard handler
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeSidePanel();
+        setSettingsOpen(false);
+        closeQaSheet();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [closeSidePanel, closeQaSheet, setSettingsOpen]);
+
+  return (
+    <ToastProvider>
+      <div className="app-container">
+        <Toolbar />
+
+        <div className="main-content">
+          <Outlet />
+
+          <SidePanel />
+          <QaIssueSheet />
+        </div>
+
+        {gitModalProject && <GitRepoModal />}
+      </div>
+    </ToastProvider>
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/routes/DesignSystemRoute.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DesignSystemView } from '../components/DesignSystemView';
+
+export function DesignSystemRoute() {
+  return <DesignSystemView visible={true} />;
+}