@assistkick/create 1.5.0 → 1.7.0

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

@@ -0,0 +1,93 @@
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { GraphView } from '../components/GraphView';
+import type { GraphViewHandle } from '../components/GraphView';
+import { GraphLegend } from '../components/GraphLegend';
+import { GraphSettings } from '../components/GraphSettings';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useGraphUIStore } from '../stores/useGraphUIStore';
+import { useSidePanelStore } from '../stores/useSidePanelStore';
+
+export function GraphRoute() {
+  const graphData = useGraphStore((s) => s.graphData);
+  const graphError = useGraphStore((s) => s.error);
+  const openSidePanel = useSidePanelStore((s) => s.open);
+  const settingsOpen = useGraphUIStore((s) => s.settingsOpen);
+  const setSettingsOpen = useGraphUIStore((s) => s.setSettingsOpen);
+  const setOnFit = useGraphUIStore((s) => s.setOnFit);
+  const setOnEdgeClick = useGraphUIStore((s) => s.setOnEdgeClick);
+
+  const graphRef = useRef<GraphViewHandle>(null);
+  const [legendVisible] = useState(true);
+
+  // Register graph callbacks with the UI store
+  useEffect(() => {
+    setOnFit(() => graphRef.current?.fitToView());
+    setOnEdgeClick((neighborId: string) => {
+      const node = graphRef.current?.getNodeById(neighborId);
+      if (node) {
+        graphRef.current?.focusNode(neighborId);
+        openSidePanel(node);
+      }
+    });
+    return () => {
+      setOnFit(null);
+      setOnEdgeClick(null);
+    };
+  }, [setOnFit, setOnEdgeClick, openSidePanel]);
+
+  // Window resize
+  useEffect(() => {
+    const handler = () => graphRef.current?.fitToView();
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  // Escape clears graph selection
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        graphRef.current?.clearSelection();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  const handleNodeClick = useCallback(async (node: any) => {
+    openSidePanel(node);
+  }, [openSidePanel]);
+
+  const handleTypeToggle = useCallback((newHiddenTypes: Set<string>) => {
+    graphRef.current?.setHiddenTypes(newHiddenTypes);
+  }, []);
+
+  const handleSearchChange = useCallback((query: string) => {
+    graphRef.current?.highlightBySearch(query);
+  }, []);
+
+  if (graphError) {
+    return (
+      <div id="graph-container">
+        <div className="error-msg">Failed to load graph data. Is the server running?</div>
+      </div>
+    );
+  }
+
+  if (!graphData) return null;
+
+  return (
+    <>
+      <GraphView ref={graphRef} graphData={graphData} onNodeClick={handleNodeClick} visible={true} />
+      <GraphLegend
+        visible={legendVisible}
+        onTypeToggle={handleTypeToggle}
+        onSearchChange={handleSearchChange}
+      />
+      <GraphSettings
+        isOpen={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+        graphRef={graphRef}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { KanbanView } from '../components/KanbanView';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useProjectStore } from '../stores/useProjectStore';
+import { useSidePanelStore } from '../stores/useSidePanelStore';
+import { useQaSheetStore } from '../stores/useQaSheetStore';
+
+export function KanbanRoute() {
+  const graphData = useGraphStore((s) => s.graphData);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+  const openSidePanel = useSidePanelStore((s) => s.open);
+  const openQaSheet = useQaSheetStore((s) => s.open);
+
+  const handleIssuesClick = useCallback((featureId: string, featureName: string, column: string, notes: any[], reviews: any[]) => {
+    openQaSheet(featureId, featureName, column, notes, reviews);
+  }, [openQaSheet]);
+
+  if (!graphData) return null;
+
+  return (
+    <div className="flex w-full h-full overflow-hidden p-3">
+      <KanbanView
+        graphData={graphData}
+        projectId={selectedProjectId}
+        onCardClick={openSidePanel}
+        onIssuesClick={handleIssuesClick}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TerminalView } from '../components/TerminalView';
+import { useProjectStore } from '../stores/useProjectStore';
+
+export function TerminalRoute() {
+  const projects = useProjectStore((s) => s.projects);
+
+  return <TerminalView visible={true} projects={projects} />;
+}

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

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

package/templates/assistkick-product-system/packages/frontend/src/stores/useGitModalStore.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+import type { Project } from './useProjectStore';
+
+interface GitModalState {
+  project: Project | null;
+  open: (project: Project) => void;
+  close: () => void;
+}
+
+export const useGitModalStore = create<GitModalState>((set) => ({
+  project: null,
+  open: (project) => set({ project }),
+  close: () => set({ project: null }),
+}));

package/templates/assistkick-product-system/packages/frontend/src/stores/useGraphStore.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+import { apiClient } from '../api/client';
+import { useProjectStore } from './useProjectStore';
+
+interface GraphState {
+  graphData: any | null;
+  error: string | null;
+  loading: boolean;
+
+  fetchGraph: (projectId?: string | null) => Promise<void>;
+}
+
+export const useGraphStore = create<GraphState>((set) => ({
+  graphData: null,
+  error: null,
+  loading: true,
+
+  fetchGraph: async (projectId?: string | null) => {
+    try {
+      set({ loading: true });
+      const data = await apiClient.fetchGraph(projectId ?? undefined);
+      set({ graphData: data, error: null, loading: false });
+    } catch (err: any) {
+      set({ error: err.message, loading: false });
+    }
+  },
+}));
+
+// Auto-fetch when selectedProjectId changes
+let prevProjectId = useProjectStore.getState().selectedProjectId;
+useProjectStore.subscribe((state) => {
+  if (state.selectedProjectId !== prevProjectId) {
+    prevProjectId = state.selectedProjectId;
+    useGraphStore.getState().fetchGraph(state.selectedProjectId);
+  }
+});

package/templates/assistkick-product-system/packages/frontend/src/stores/useGraphUIStore.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+interface GraphUIState {
+  settingsOpen: boolean;
+  legendVisible: boolean;
+
+  onFit: (() => void) | null;
+  onEdgeClick: ((neighborId: string) => void) | null;
+  onSettingsToggle: () => void;
+  setOnFit: (fn: (() => void) | null) => void;
+  setOnEdgeClick: (fn: ((neighborId: string) => void) | null) => void;
+  setSettingsOpen: (open: boolean) => void;
+}
+
+export const useGraphUIStore = create<GraphUIState>((set) => ({
+  settingsOpen: false,
+  legendVisible: true,
+  onFit: null,
+  onEdgeClick: null,
+
+  onSettingsToggle: () => set((s) => ({ settingsOpen: !s.settingsOpen })),
+  setOnFit: (fn) => set({ onFit: fn }),
+  setOnEdgeClick: (fn) => set({ onEdgeClick: fn }),
+  setSettingsOpen: (open) => set({ settingsOpen: open }),
+}));

package/templates/assistkick-product-system/packages/frontend/src/stores/useProjectStore.ts

@@ -0,0 +1,87 @@
+import { create } from 'zustand';
+import { apiClient } from '../api/client';
+
+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;
+}
+
+interface ProjectState {
+  projects: Project[];
+  selectedProjectId: string | null;
+  loading: boolean;
+
+  init: () => Promise<void>;
+  selectProject: (id: string) => void;
+  createProject: (name: string) => Promise<Project>;
+  renameProject: (id: string, name: string) => Promise<void>;
+  archiveProject: (id: string) => Promise<void>;
+  refetchProjects: () => Promise<Project[]>;
+}
+
+export const useProjectStore = create<ProjectState>((set, get) => ({
+  projects: [],
+  selectedProjectId: localStorage.getItem(STORAGE_KEY),
+  loading: true,
+
+  init: async () => {
+    const fetched = await get().refetchProjects();
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && fetched.some((p) => p.id === stored)) {
+      set({ selectedProjectId: stored });
+    } else if (fetched.length > 0) {
+      const defaultProject = fetched.find((p) => p.isDefault === 1);
+      const fallback = defaultProject ? defaultProject.id : fetched[0].id;
+      set({ selectedProjectId: fallback });
+      localStorage.setItem(STORAGE_KEY, fallback);
+    }
+  },
+
+  selectProject: (id) => {
+    set({ selectedProjectId: id });
+    localStorage.setItem(STORAGE_KEY, id);
+  },
+
+  refetchProjects: async () => {
+    try {
+      const data = await apiClient.fetchProjects();
+      set({ projects: data.projects, loading: false });
+      return data.projects as Project[];
+    } catch {
+      set({ projects: [], loading: false });
+      return [] as Project[];
+    }
+  },
+
+  createProject: async (name) => {
+    const data = await apiClient.createProject(name);
+    await get().refetchProjects();
+    get().selectProject(data.project.id);
+    return data.project;
+  },
+
+  renameProject: async (id, name) => {
+    await apiClient.renameProject(id, name);
+    await get().refetchProjects();
+  },
+
+  archiveProject: async (id) => {
+    await apiClient.archiveProject(id);
+    const updated = await get().refetchProjects();
+    if (get().selectedProjectId === id && updated.length > 0) {
+      const defaultProject = updated.find((p) => p.isDefault === 1);
+      const fallback = defaultProject ? defaultProject.id : updated[0].id;
+      get().selectProject(fallback);
+    }
+  },
+}));

package/templates/assistkick-product-system/packages/frontend/src/stores/useQaSheetStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+
+interface QaSheetState {
+  isOpen: boolean;
+  featureId: string | null;
+  featureName: string;
+  column: string;
+  notes: any[];
+  reviews: any[];
+
+  open: (featureId: string, featureName: string, column: string, notes: any[], reviews: any[]) => void;
+  close: () => void;
+}
+
+export const useQaSheetStore = create<QaSheetState>((set) => ({
+  isOpen: false,
+  featureId: null,
+  featureName: '',
+  column: '',
+  notes: [],
+  reviews: [],
+
+  open: (featureId, featureName, column, notes, reviews) =>
+    set({ isOpen: true, featureId, featureName, column, notes, reviews }),
+
+  close: () => set({ isOpen: false }),
+}));

package/templates/assistkick-product-system/packages/frontend/src/stores/useSidePanelStore.ts

@@ -0,0 +1,76 @@
+import { create } from 'zustand';
+import { apiClient } from '../api/client';
+
+interface WorkSummary {
+  cycle: number;
+  filesCreated: string[];
+  filesUpdated: string[];
+  filesDeleted: string[];
+  approach: string;
+  decisions: string[];
+  timestamp: string;
+}
+
+interface Tasks {
+  total: number;
+  completed: number;
+  items: any[];
+}
+
+interface SidePanelState {
+  isOpen: boolean;
+  node: any | null;
+  content: string;
+  workSummaries: WorkSummary[];
+  expandedSummaries: boolean;
+  tasks: Tasks | null;
+  expandedTasks: boolean;
+
+  open: (node: any) => Promise<void>;
+  close: () => void;
+  toggleSummaries: () => void;
+  toggleTasks: () => void;
+}
+
+export const useSidePanelStore = create<SidePanelState>((set) => ({
+  isOpen: false,
+  node: null,
+  content: '',
+  workSummaries: [],
+  expandedSummaries: false,
+  tasks: null,
+  expandedTasks: false,
+
+  open: async (node: any) => {
+    set({
+      node,
+      workSummaries: [],
+      expandedSummaries: false,
+      tasks: null,
+      expandedTasks: false,
+    });
+
+    try {
+      const detail = await apiClient.fetchNode(node.id);
+      set({ content: detail.content, isOpen: true });
+
+      if (node.type === 'feature' || node.id?.startsWith('feat_')) {
+        try {
+          const pStatus = await apiClient.getPipelineStatus(node.id);
+          set({
+            workSummaries: pStatus?.workSummaries?.length > 0 ? pStatus.workSummaries : [],
+            tasks: pStatus?.tasks ?? null,
+          });
+        } catch {
+          // Pipeline status may not exist for all features
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch node:', err);
+    }
+  },
+
+  close: () => set({ isOpen: false }),
+  toggleSummaries: () => set((s) => ({ expandedSummaries: !s.expandedSummaries })),
+  toggleTasks: () => set((s) => ({ expandedTasks: !s.expandedTasks })),
+}));

package/templates/assistkick-product-system/packages/frontend/src/styles/index.css

@@ -1,47 +1,79 @@
+@import "tailwindcss";
+
+/* Map existing CSS custom properties to Tailwind theme tokens.
+   Token names are chosen so generated utility classes read naturally:
+   bg-surface, text-content, border-edge, bg-panel, etc. */
+@theme {
+  --color-surface: var(--bg-primary);
+  --color-surface-alt: var(--bg-secondary);
+  --color-surface-raised: var(--bg-tertiary);
+  --color-edge: var(--border-color);
+  --color-content: var(--text-primary);
+  --color-content-secondary: var(--text-secondary);
+  --color-content-muted: var(--text-muted);
+  --color-accent: var(--accent);
+  --color-accent-secondary: var(--accent-secondary);
+  --color-completeness-bg: var(--completeness-bg);
+  --color-completeness-fill: var(--completeness-fill);
+  --color-panel: var(--panel-bg);
+  --color-panel-shadow: var(--panel-shadow);
+  --color-tab-active: var(--tab-active-bg);
+  --color-tab-hover: var(--tab-hover-bg);
+  --color-error: var(--error-color);
+
+  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;
+  --font-system: "Inter", system-ui, -apple-system, sans-serif;
+}
+
 /* Graph Visualization Web UI — Styles */
 /* Minimal developer tool aesthetic, dark/light theme support */
 
 :root {
   --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;
-  --font-system: system-ui, -apple-system, sans-serif;
+  --font-system: "Inter", system-ui, -apple-system, sans-serif;
 }
 
 [data-theme="dark"] {
-  --bg-primary: #1a1b1e;
-  --bg-secondary: #25262b;
-  --bg-tertiary: #2c2e33;
-  --border-color: #373a40;
-  --text-primary: #c1c2c5;
-  --text-secondary: #909296;
-  --text-muted: #5c5f66;
-  --accent: #4dabf7;
-  --completeness-bg: #373a40;
-  --completeness-fill: #69db7c;
-  --panel-bg: #25262b;
-  --panel-shadow: rgba(0, 0, 0, 0.4);
-  --tab-active-bg: #2c2e33;
-  --tab-hover-bg: #373a40;
-  --error-color: #ff6b6b;
+  --bg-primary: #0c0c0e;
+  --bg-secondary: #18191c;
+  --bg-tertiary: #222326;
+  --border-color: #2e2f33;
+  --text-primary: #f0f0f0;
+  --text-secondary: #9a9ba0;
+  --text-muted: #56575c;
+  --accent: #b5e853;
+  --accent-secondary: #f0a050;
+  --completeness-bg: #2e2f33;
+  --completeness-fill: #b5e853;
+  --panel-bg: #18191c;
+  --panel-shadow: rgba(0, 0, 0, 0.5);
+  --tab-active-bg: #222326;
+  --tab-hover-bg: #2e2f33;
+  --error-color: #f06060;
 }
 
 [data-theme="light"] {
-  --bg-primary: #f8f9fa;
+  --bg-primary: #fafbfc;
   --bg-secondary: #ffffff;
-  --bg-tertiary: #f1f3f5;
-  --border-color: #dee2e6;
-  --text-primary: #212529;
-  --text-secondary: #495057;
-  --text-muted: #adb5bd;
-  --accent: #228be6;
-  --completeness-bg: #e9ecef;
-  --completeness-fill: #40c057;
+  --bg-tertiary: #f4f5f7;
+  --border-color: #e8e9ec;
+  --text-primary: #1a1a1a;
+  --text-secondary: #5a5b60;
+  --text-muted: #a0a1a6;
+  --accent: #4a9e1e;
+  --accent-secondary: #d08530;
+  --completeness-bg: #eeeff1;
+  --completeness-fill: #4a9e1e;
   --panel-bg: #ffffff;
-  --panel-shadow: rgba(0, 0, 0, 0.15);
+  --panel-shadow: rgba(0, 0, 0, 0.08);
   --tab-active-bg: #ffffff;
-  --tab-hover-bg: #e9ecef;
-  --error-color: #e03131;
+  --tab-hover-bg: #f0f1f3;
+  --error-color: #d93025;
 }
 
+/* Legacy CSS wrapped in @layer so Tailwind utilities take precedence */
+@layer base {
+
 * {
   margin: 0;
   padding: 0;
@@ -400,82 +432,12 @@ html, body, #root {
 
 /* Kanban container */
 #kanban-container {
-  display: none;
-  width: 100%;
-  height: calc(100vh - 44px);
-  overflow: auto;
-  padding: 12px;
+  display: none; /* legacy — KanbanRoute uses Tailwind now */
   color: var(--text-secondary);
   font-size: 12px;
 }
 
-/* Kanban board */
-.kanban-board {
-  display: flex;
-  gap: 12px;
-  height: 100%;
-  min-width: min-content;
-}
-
-.kanban-column {
-  flex: 1;
-  min-width: 220px;
-  max-width: 320px;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.kanban-column-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-tertiary);
-}
-
-.kanban-column-title {
-  font-weight: 600;
-  font-size: 12px;
-  color: var(--text-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.kanban-column-count {
-  font-size: 11px;
-  color: var(--text-muted);
-  background: var(--bg-primary);
-  padding: 1px 6px;
-  border-radius: 8px;
-}
-
-.kanban-column-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 60px;
-  transition: background 0.15s;
-}
-
-.kanban-column-body.drop-target {
-  background: rgba(77, 171, 247, 0.05);
-  border: 1px dashed var(--accent);
-  border-radius: 4px;
-  margin: 4px;
-  padding: 4px;
-}
-
-.kanban-column-body.drag-over {
-  background: rgba(77, 171, 247, 0.12);
-}
+/* Kanban board — layout now handled by Tailwind in KanbanView.tsx */
 
 /* Kanban cards */
 .kanban-card {
@@ -3804,3 +3766,5 @@ html, body, #root {
 .git-modal-btn-danger:hover {
   background: rgba(255, 107, 107, 0.1);
 }
+
+} /* end @layer base */

package/templates/assistkick-product-system/packages/frontend/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 
@@ -12,7 +13,7 @@ export default defineConfig(({ mode }) => {
   const backendPort = parseInt(env.PORT || '3000', 10);
 
   return {
-    plugins: [react()],
+    plugins: [tailwindcss(), react()],
     build: {
       outDir: 'dist',
       emptyOutDir: true,

package/templates/assistkick-product-system/packages/shared/lib/graph.ts

@@ -6,7 +6,7 @@
 
 import { eq, and } from 'drizzle-orm';
 import { getDb, getProjectRoot as _getProjectRoot } from './db.js';
-import { nodes, edges } from '../db/schema.js';
+import { nodes, edges, projects } from '../db/schema.js';
 
 export { getProjectRoot } from './db.js';
 
@@ -26,13 +26,19 @@ export const readGraph = async (projectId?: string) => {
     ? (() => { const ids = new Set(allNodes.map(n => n.id)); return allEdges.filter(e => ids.has(e.fromId) && ids.has(e.toId)); })()
     : allEdges;
 
+  let projectRow;
+  if (projectId) {
+    const rows = await db.select().from(projects).where(eq(projects.id, projectId));
+    projectRow = rows[0];
+  }
+
   return {
     version: '1.0',
     project: {
-      name: '',
+      name: projectRow?.name || '',
       description: '',
-      created_at: '',
-      updated_at: '',
+      created_at: projectRow?.createdAt || '',
+      updated_at: projectRow?.updatedAt || '',
     },
     nodes: allNodes.map(n => ({
       id: n.id,
@@ -107,7 +113,7 @@ export const patchNode = async (id, fields) => {
     throw new Error(`Node not found in graph: ${id}`);
   }
 
-  const updates = {};
+  const updates: Record<string, unknown> = {};
   if (fields.status !== undefined) updates.status = fields.status;
   if (fields.completeness !== undefined) updates.completeness = fields.completeness;
   if (fields.open_questions_count !== undefined) updates.openQuestionsCount = fields.open_questions_count;