@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@interview-system/frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
+    "d3": "^7.9.0",
+    "marked": "^15.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}

package/templates/product-system/packages/frontend/public/favicon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- Background rounded square -->
+  <rect width="32" height="32" rx="6" fill="#1a1b1e"/>
+  <!-- Edges connecting nodes -->
+  <line x1="10" y1="9" x2="22" y2="9" stroke="#373a40" stroke-width="1.5"/>
+  <line x1="10" y1="9" x2="16" y2="22" stroke="#373a40" stroke-width="1.5"/>
+  <line x1="22" y1="9" x2="16" y2="22" stroke="#373a40" stroke-width="1.5"/>
+  <line x1="22" y1="9" x2="26" y2="18" stroke="#373a40" stroke-width="1.5"/>
+  <line x1="16" y1="22" x2="6" y2="20" stroke="#373a40" stroke-width="1.5"/>
+  <!-- Nodes -->
+  <circle cx="10" cy="9" r="3.5" fill="#4dabf7"/>
+  <circle cx="22" cy="9" r="3" fill="#69db7c"/>
+  <circle cx="16" cy="22" r="3.5" fill="#4dabf7"/>
+  <circle cx="26" cy="18" r="2.5" fill="#909296"/>
+  <circle cx="6" cy="20" r="2.5" fill="#69db7c"/>
+</svg>

package/templates/product-system/packages/frontend/src/App.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { ProtectedRoute } from './routes/ProtectedRoute';
+import { LoginRoute } from './routes/login';
+import { RegisterRoute } from './routes/register';
+import { ForgotPasswordRoute } from './routes/forgot_password';
+import { ResetPasswordRoute } from './routes/reset_password';
+import { AcceptInvitationRoute } from './routes/accept_invitation';
+import { DashboardRoute } from './routes/dashboard';
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginRoute />} />
+      <Route path="/register" element={<RegisterRoute />} />
+      <Route path="/forgot-password" element={<ForgotPasswordRoute />} />
+      <Route path="/reset-password" element={<ResetPasswordRoute />} />
+      <Route path="/accept-invitation" element={<AcceptInvitationRoute />} />
+      <Route element={<ProtectedRoute />}>
+        <Route path="/" element={<Navigate to="/graph" replace />} />
+        <Route path="/graph" element={<DashboardRoute />} />
+        <Route path="/kanban" element={<DashboardRoute />} />
+        <Route path="/coherence" element={<DashboardRoute />} />
+        <Route path="/users" element={<DashboardRoute />} />
+        <Route path="/terminal" element={<DashboardRoute />} />
+      </Route>
+    </Routes>
+  );
+}

package/templates/product-system/packages/frontend/src/api/client.ts

@@ -0,0 +1,386 @@
+/**
+ * API client for fetching graph data and node content.
+ * All HTTP calls to the server go through this class.
+ */
+export class ApiClient {
+  baseUrl: string;
+  private refreshPromise: Promise<boolean> | null = null;
+
+  constructor(baseUrl = '') {
+    this.baseUrl = baseUrl;
+  }
+
+  private attemptRefresh = async (): Promise<boolean> => {
+    try {
+      const resp = await fetch(`${this.baseUrl}/api/auth/refresh`, {
+        method: 'POST',
+        credentials: 'same-origin',
+      });
+      return resp.ok;
+    } catch {
+      return false;
+    }
+  };
+
+  private fetchWithRefresh = async (url: string, options: RequestInit = {}): Promise<Response> => {
+    const opts = { ...options, credentials: 'same-origin' as RequestCredentials };
+    const resp = await fetch(url, opts);
+
+    if (resp.status !== 401) return resp;
+
+    // Deduplicate concurrent refresh attempts
+    if (!this.refreshPromise) {
+      this.refreshPromise = this.attemptRefresh().finally(() => {
+        this.refreshPromise = null;
+      });
+    }
+
+    const refreshed = await this.refreshPromise;
+    if (!refreshed) return resp;
+
+    // Retry the original request with the new access token
+    return fetch(url, opts);
+  };
+
+  fetchGraph = async (projectId?: string) => {
+    const url = projectId
+      ? `${this.baseUrl}/api/graph?project_id=${encodeURIComponent(projectId)}`
+      : `${this.baseUrl}/api/graph`;
+    const resp = await this.fetchWithRefresh(url);
+    if (!resp.ok) throw new Error(`Failed to fetch graph: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchNode = async (nodeId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/node/${nodeId}`);
+    if (!resp.ok) throw new Error(`Failed to fetch node ${nodeId}: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchKanban = async (projectId?: string) => {
+    const url = projectId
+      ? `${this.baseUrl}/api/kanban?project_id=${encodeURIComponent(projectId)}`
+      : `${this.baseUrl}/api/kanban`;
+    const resp = await this.fetchWithRefresh(url);
+    if (!resp.ok) throw new Error(`Failed to fetch kanban: ${resp.status}`);
+    return resp.json();
+  };
+
+  moveCard = async (featureId: string, column: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/move`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ column }),
+    });
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.error || `Failed to move card: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  createNote = async (featureId: string, text: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/notes`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text }),
+    });
+    if (!resp.ok) throw new Error(`Failed to create note: ${resp.status}`);
+    return resp.json();
+  };
+
+  updateNote = async (featureId: string, noteId: string, text: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/notes/${noteId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text }),
+    });
+    if (!resp.ok) throw new Error(`Failed to update note: ${resp.status}`);
+    return resp.json();
+  };
+
+  deleteNote = async (featureId: string, noteId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/notes/${noteId}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) throw new Error(`Failed to delete note: ${resp.status}`);
+    return resp.json();
+  };
+
+  startPipeline = async (featureId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/develop`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to start pipeline: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON response */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  getPipelineStatus = async (featureId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/pipeline`);
+    if (!resp.ok) throw new Error(`Failed to get pipeline status: ${resp.status}`);
+    return resp.json();
+  };
+
+  fetchCoherence = async (projectId?: string) => {
+    const qs = projectId ? `?project_id=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/coherence${qs}`);
+    if (!resp.ok) throw new Error(`Failed to fetch coherence: ${resp.status}`);
+    return resp.json();
+  };
+
+  runCoherenceReview = async (projectId?: string) => {
+    const qs = projectId ? `?project_id=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/coherence/run${qs}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to start coherence review: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  approveProposal = async (proposalId: string, projectId?: string) => {
+    const qs = projectId ? `?project_id=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/coherence/${proposalId}/approve${qs}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to approve proposal: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  dismissProposal = async (proposalId: string, projectId?: string) => {
+    const qs = projectId ? `?project_id=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/coherence/${proposalId}/dismiss${qs}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to dismiss proposal: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  batchApprove = async (batchId: string, dismissIds: string[] = [], projectId?: string) => {
+    const qs = projectId ? `?project_id=${encodeURIComponent(projectId)}` : '';
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/coherence/batch/approve${qs}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ batch_id: batchId, dismiss_ids: dismissIds }),
+    });
+    if (!resp.ok) {
+      let msg = `Failed to batch approve: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  unblockCard = async (featureId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/kanban/${featureId}/unblock`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      let msg = `Failed to unblock card: ${resp.status}`;
+      try { const err = await resp.json(); msg = err.error || msg; } catch { /* non-JSON response */ }
+      throw new Error(msg);
+    }
+    return resp.json();
+  };
+
+  logout = async () => {
+    const resp = await fetch(`${this.baseUrl}/api/auth/logout`, {
+      method: 'POST',
+      credentials: 'same-origin',
+    });
+    if (!resp.ok) throw new Error(`Logout failed: ${resp.status}`);
+    return resp.json();
+  };
+
+  forgotPassword = async (email: string) => {
+    const resp = await fetch(`${this.baseUrl}/api/auth/forgot-password`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email }),
+    });
+    const data = await resp.json();
+    if (!resp.ok) {
+      throw new Error(data.error || `Request failed: ${resp.status}`);
+    }
+    return data;
+  };
+
+  resetPassword = async (token: string, password: string) => {
+    const resp = await fetch(`${this.baseUrl}/api/auth/reset-password`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token, password }),
+    });
+    const data = await resp.json();
+    if (!resp.ok) {
+      throw new Error(data.error || `Reset failed: ${resp.status}`);
+    }
+    return data;
+  };
+
+  register = async (email: string, password: string) => {
+    const resp = await fetch(`${this.baseUrl}/api/auth/register`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      body: JSON.stringify({ email, password }),
+    });
+    const data = await resp.json();
+    if (!resp.ok) {
+      throw new Error(data.error || `Registration failed: ${resp.status}`);
+    }
+    return data;
+  };
+  sendInvitation = async (email: string) => {
+    const resp = await fetch(`${this.baseUrl}/api/auth/invite`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      body: JSON.stringify({ email }),
+    });
+    const data = await resp.json();
+    if (!resp.ok) {
+      throw new Error(data.error || `Invitation failed: ${resp.status}`);
+    }
+    return data;
+  };
+
+  validateInvitation = async (token: string, email: string) => {
+    const resp = await fetch(
+      `${this.baseUrl}/api/auth/invitation?token=${encodeURIComponent(token)}&email=${encodeURIComponent(email)}`,
+      { credentials: 'same-origin' },
+    );
+    const data = await resp.json();
+    if (!resp.ok) {
+      throw new Error(data.error || `Validation failed: ${resp.status}`);
+    }
+    return data;
+  };
+
+  listUsers = async () => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/users`);
+    if (!resp.ok) throw new Error(`Failed to list users: ${resp.status}`);
+    return resp.json();
+  };
+
+  deleteUser = async (userId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/users/${userId}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to delete user: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  listInvitations = async () => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/users/invitations`);
+    if (!resp.ok) throw new Error(`Failed to list invitations: ${resp.status}`);
+    return resp.json();
+  };
+
+  deleteInvitation = async (invitationId: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/users/invitations/${invitationId}`, {
+      method: 'DELETE',
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to delete invitation: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  // Project management
+  fetchProjects = async () => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects`);
+    if (!resp.ok) throw new Error(`Failed to fetch projects: ${resp.status}`);
+    return resp.json();
+  };
+
+  createProject = async (name: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to create project: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  renameProject = async (id: string, name: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to rename project: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  archiveProject = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${id}/archive`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to archive project: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  restoreProject = async (id: string) => {
+    const resp = await this.fetchWithRefresh(`${this.baseUrl}/api/projects/${id}/restore`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!resp.ok) {
+      const data = await resp.json();
+      throw new Error(data.error || `Failed to restore project: ${resp.status}`);
+    }
+    return resp.json();
+  };
+
+  acceptInvitation = async (token: string, email: string, password: string) => {
+    const resp = await fetch(`${this.baseUrl}/api/auth/accept-invitation`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      body: JSON.stringify({ token, email, password }),
+    });
+    const data = await resp.json();
+    if (!resp.ok) {
+      throw new Error(data.error || `Accept invitation failed: ${resp.status}`);
+    }
+    return data;
+  };
+}
+
+export const apiClient = new ApiClient();

package/templates/product-system/packages/frontend/src/api/client_projects.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, mock, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { ApiClient } from './client.ts';
+
+describe('ApiClient project methods', () => {
+  let originalFetch: typeof globalThis.fetch;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it('fetchProjects returns list of projects', async () => {
+    const projects = [{ id: 'proj_001', name: 'Test', isDefault: 1 }];
+    globalThis.fetch = mock.fn(async () => ({
+      ok: true,
+      status: 200,
+      json: async () => ({ projects }),
+    })) as any;
+
+    const client = new ApiClient();
+    const result = await client.fetchProjects();
+    assert.deepEqual(result.projects, projects);
+  });
+
+  it('createProject sends name and returns created project', async () => {
+    const project = { id: 'proj_002', name: 'New Project' };
+    let capturedBody: string | undefined;
+
+    globalThis.fetch = mock.fn(async (_url: any, init?: any) => {
+      capturedBody = init?.body;
+      return {
+        ok: true,
+        status: 201,
+        json: async () => ({ project }),
+      };
+    }) as any;
+
+    const client = new ApiClient();
+    const result = await client.createProject('New Project');
+    assert.deepEqual(result.project, project);
+    assert.equal(JSON.parse(capturedBody!).name, 'New Project');
+  });
+
+  it('renameProject sends PATCH with new name', async () => {
+    let capturedUrl: string | undefined;
+    let capturedMethod: string | undefined;
+    let capturedBody: string | undefined;
+
+    globalThis.fetch = mock.fn(async (url: any, init?: any) => {
+      capturedUrl = url;
+      capturedMethod = init?.method;
+      capturedBody = init?.body;
+      return {
+        ok: true,
+        status: 200,
+        json: async () => ({ project: { id: 'proj_001', name: 'Renamed' } }),
+      };
+    }) as any;
+
+    const client = new ApiClient();
+    await client.renameProject('proj_001', 'Renamed');
+    assert.ok(capturedUrl!.includes('/api/projects/proj_001'));
+    assert.equal(capturedMethod, 'PATCH');
+    assert.equal(JSON.parse(capturedBody!).name, 'Renamed');
+  });
+
+  it('archiveProject sends POST to archive endpoint', async () => {
+    let capturedUrl: string | undefined;
+    let capturedMethod: string | undefined;
+
+    globalThis.fetch = mock.fn(async (url: any, init?: any) => {
+      capturedUrl = url;
+      capturedMethod = init?.method;
+      return {
+        ok: true,
+        status: 200,
+        json: async () => ({ project: { id: 'proj_001', archivedAt: '2026-01-01' } }),
+      };
+    }) as any;
+
+    const client = new ApiClient();
+    await client.archiveProject('proj_001');
+    assert.ok(capturedUrl!.includes('/api/projects/proj_001/archive'));
+    assert.equal(capturedMethod, 'POST');
+  });
+
+  it('throws on failed project creation', async () => {
+    globalThis.fetch = mock.fn(async () => ({
+      ok: false,
+      status: 400,
+      json: async () => ({ error: 'Project name is required' }),
+    })) as any;
+
+    const client = new ApiClient();
+    await assert.rejects(
+      () => client.createProject(''),
+      { message: 'Project name is required' },
+    );
+  });
+});