@assistkick/create 1.9.0 → 1.11.0

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

@@ -2,8 +2,10 @@ import React from 'react';
 import { Navigate } from 'react-router-dom';
 import { ResetPasswordPage } from '../pages/reset_password_page';
 import { useAuth } from '../hooks/useAuth';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 export function ResetPasswordRoute() {
+  useDocumentTitle('Reset Password');
   const { user, loading } = useAuth();
 
   if (loading) return null;

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

@@ -0,0 +1,66 @@
+/**
+ * useAttachmentStore — Zustand store for Chat v2 file attachments.
+ *
+ * Wraps the pure AttachmentManager class for React integration.
+ * Manages files attached to the current message input, including
+ * upload state tracking and preview generation for images.
+ */
+
+import { create } from 'zustand';
+import { AttachmentManager, type Attachment } from '../lib/attachment_manager';
+
+export type { Attachment } from '../lib/attachment_manager';
+
+interface AttachmentState {
+  attachments: readonly Attachment[];
+  addUpload: (file: File, preview: string | null) => Attachment;
+  addWorkspaceFile: (path: string, name: string, size: number, mimeType: string) => Attachment;
+  markUploaded: (id: string, path: string) => void;
+  markUploadFailed: (id: string) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+  getReadyPaths: () => string[];
+  hasUploading: () => boolean;
+}
+
+const mgr = new AttachmentManager();
+
+export const useAttachmentStore = create<AttachmentState>((set) => ({
+  attachments: [],
+
+  addUpload: (file: File, preview: string | null) => {
+    const att = mgr.addUpload(file, preview);
+    set({ attachments: [...mgr.getAttachments()] });
+    return att;
+  },
+
+  addWorkspaceFile: (path: string, name: string, size: number, mimeType: string) => {
+    const att = mgr.addWorkspaceFile(path, name, size, mimeType);
+    set({ attachments: [...mgr.getAttachments()] });
+    return att;
+  },
+
+  markUploaded: (id: string, path: string) => {
+    mgr.markUploaded(id, path);
+    set({ attachments: [...mgr.getAttachments()] });
+  },
+
+  markUploadFailed: (id: string) => {
+    mgr.markUploadFailed(id);
+    set({ attachments: [...mgr.getAttachments()] });
+  },
+
+  remove: (id: string) => {
+    mgr.remove(id);
+    set({ attachments: [...mgr.getAttachments()] });
+  },
+
+  clear: () => {
+    mgr.clear();
+    set({ attachments: [] });
+  },
+
+  getReadyPaths: () => mgr.getReadyPaths(),
+
+  hasUploading: () => mgr.hasUploading(),
+}));

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

@@ -0,0 +1,107 @@
+import { create } from 'zustand';
+import { apiClient } from '../api/client';
+
+const ACTIVE_SESSION_STORAGE_KEY = 'assistkick_active_session_id';
+
+export interface ChatSession {
+  id: string;
+  claudeSessionId: string;
+  projectId: string;
+  name: string;
+  permissionMode: string | null;
+  continuationContext: string | null;
+  systemPrompt: string | null;
+  contextUsageJson: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface ChatSessionState {
+  sessions: ChatSession[];
+  activeSessionId: string | null;
+  loading: boolean;
+
+  fetchSessions: (projectId: string) => Promise<ChatSession[]>;
+  selectSession: (id: string | null) => void;
+  createSession: (projectId: string) => Promise<ChatSession>;
+  renameSession: (id: string, name: string) => Promise<void>;
+  /** Update a session name locally without an API call (used by WS session_renamed). */
+  updateSessionName: (id: string, name: string) => void;
+  deleteSession: (id: string, projectId: string) => Promise<void>;
+  /** Compact current session and create a new continuation session. */
+  compactAndContinue: (sessionId: string, projectId: string) => Promise<ChatSession>;
+}
+
+export const useChatSessionStore = create<ChatSessionState>((set, get) => ({
+  sessions: [],
+  activeSessionId: localStorage.getItem(ACTIVE_SESSION_STORAGE_KEY),
+  loading: false,
+
+  fetchSessions: async (projectId: string) => {
+    set({ loading: true });
+    try {
+      const data = await apiClient.listChatSessions(projectId);
+      const sessions = data.sessions as ChatSession[];
+      set({ sessions, loading: false });
+      return sessions;
+    } catch {
+      set({ sessions: [], loading: false });
+      return [] as ChatSession[];
+    }
+  },
+
+  selectSession: (id: string | null) => {
+    if (id) {
+      localStorage.setItem(ACTIVE_SESSION_STORAGE_KEY, id);
+    } else {
+      localStorage.removeItem(ACTIVE_SESSION_STORAGE_KEY);
+    }
+    set({ activeSessionId: id });
+  },
+
+  createSession: async (projectId: string) => {
+    const data = await apiClient.createChatSession(projectId);
+    const session = data.session as ChatSession;
+    await get().fetchSessions(projectId);
+    localStorage.setItem(ACTIVE_SESSION_STORAGE_KEY, session.id);
+    set({ activeSessionId: session.id });
+    return session;
+  },
+
+  renameSession: async (id: string, name: string) => {
+    await apiClient.renameChatSession(id, name);
+    // Update in-place without refetching
+    set((state) => ({
+      sessions: state.sessions.map((s) =>
+        s.id === id ? { ...s, name } : s,
+      ),
+    }));
+  },
+
+  updateSessionName: (id: string, name: string) => {
+    set((state) => ({
+      sessions: state.sessions.map((s) =>
+        s.id === id ? { ...s, name } : s,
+      ),
+    }));
+  },
+
+  deleteSession: async (id: string, projectId: string) => {
+    await apiClient.deleteChatSession(id);
+    const { activeSessionId } = get();
+    if (activeSessionId === id) {
+      localStorage.removeItem(ACTIVE_SESSION_STORAGE_KEY);
+      set({ activeSessionId: null });
+    }
+    await get().fetchSessions(projectId);
+  },
+
+  compactAndContinue: async (sessionId: string, projectId: string) => {
+    const data = await apiClient.compactAndContinue(sessionId);
+    const session = data.session as ChatSession;
+    await get().fetchSessions(projectId);
+    localStorage.setItem(ACTIVE_SESSION_STORAGE_KEY, session.id);
+    set({ activeSessionId: session.id });
+    return session;
+  },
+}));

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

@@ -0,0 +1,110 @@
+/**
+ * useMessageQueueStore — Zustand store for Chat v2 message queuing.
+ *
+ * Wraps the pure MessageQueue class for React integration.
+ * Manages per-session queues of user messages that are enqueued while Claude
+ * is still responding. When the current CLI invocation completes, all
+ * queued messages for that session are drained, merged into a single prompt,
+ * and sent as the next invocation. Each queued message is displayed as a
+ * separate bubble in the UI with a pending/queued visual state.
+ *
+ * Queues are scoped per session ID — switching sessions shows only that
+ * session's queued messages.
+ */
+
+import { create } from 'zustand';
+import { MessageQueue, type QueuedMessage } from '../lib/message_queue';
+
+export type { QueuedMessage } from '../lib/message_queue';
+
+interface MessageQueueState {
+  /** The currently active session ID (controls which queue is visible). */
+  activeSessionId: string | null;
+  /** The visible queue for the active session. */
+  queue: QueuedMessage[];
+  /** Set the active session — updates the visible queue. */
+  setActiveSession: (sessionId: string | null) => void;
+  /** Enqueue a message to a specific session (defaults to active session). */
+  enqueue: (text: string, sessionId?: string) => void;
+  /** Remove a queued message from a specific session (defaults to active session). */
+  remove: (id: string, sessionId?: string) => void;
+  /** Clear all queued messages for a specific session (defaults to active session). */
+  clear: (sessionId?: string) => void;
+  /** Drain all queued messages for a specific session (defaults to active session). Returns the drained messages. */
+  drainAll: (sessionId?: string) => QueuedMessage[];
+}
+
+/** Per-session MessageQueue instances, keyed by session ID. */
+const sessionQueues = new Map<string, MessageQueue>();
+
+const getOrCreateQueue = (sessionId: string): MessageQueue => {
+  let mq = sessionQueues.get(sessionId);
+  if (!mq) {
+    mq = new MessageQueue();
+    sessionQueues.set(sessionId, mq);
+  }
+  return mq;
+};
+
+export const useMessageQueueStore = create<MessageQueueState>((set, get) => ({
+  activeSessionId: null,
+  queue: [],
+
+  setActiveSession: (sessionId: string | null) => {
+    const visibleQueue = sessionId
+      ? [...(getOrCreateQueue(sessionId).getQueue())]
+      : [];
+    set({ activeSessionId: sessionId, queue: visibleQueue });
+  },
+
+  enqueue: (text: string, sessionId?: string) => {
+    const targetId = sessionId ?? get().activeSessionId;
+    if (!targetId) return;
+
+    const mq = getOrCreateQueue(targetId);
+    mq.enqueue(text);
+
+    // Only update visible queue if targeting the active session
+    if (targetId === get().activeSessionId) {
+      set({ queue: [...mq.getQueue()] });
+    }
+  },
+
+  remove: (id: string, sessionId?: string) => {
+    const targetId = sessionId ?? get().activeSessionId;
+    if (!targetId) return;
+
+    const mq = getOrCreateQueue(targetId);
+    mq.remove(id);
+
+    if (targetId === get().activeSessionId) {
+      set({ queue: [...mq.getQueue()] });
+    }
+  },
+
+  clear: (sessionId?: string) => {
+    const targetId = sessionId ?? get().activeSessionId;
+    if (!targetId) return;
+
+    const mq = getOrCreateQueue(targetId);
+    mq.clear();
+
+    if (targetId === get().activeSessionId) {
+      set({ queue: [] });
+    }
+  },
+
+  drainAll: (sessionId?: string) => {
+    const targetId = sessionId ?? get().activeSessionId;
+    if (!targetId) return [];
+
+    const mq = getOrCreateQueue(targetId);
+    const drained = mq.drainAll();
+
+    if (targetId === get().activeSessionId) {
+      set({ queue: [] });
+    }
+
+    return drained;
+  },
+}));

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

@@ -0,0 +1,78 @@
+import { create } from 'zustand';
+import { apiClient } from '../api/client';
+
+export interface PreviewApp {
+  appName: string;
+  port: number;
+  projectDir: string;
+  command: string;
+  scriptName: string;
+  isPublic: boolean;
+  startedAt: string;
+  lastAccessedAt: string;
+  pid: number | undefined;
+}
+
+interface PreviewState {
+  apps: PreviewApp[];
+  loading: boolean;
+  pollIntervalId: ReturnType<typeof setInterval> | null;
+
+  fetchApps: () => Promise<void>;
+  startPolling: () => void;
+  stopPolling: () => void;
+  startPreview: (appName: string, projectId: string) => Promise<PreviewApp>;
+  stopPreview: (appName: string) => Promise<void>;
+  isRunning: (appName: string) => boolean;
+}
+
+const POLL_INTERVAL_MS = 5000;
+
+export const usePreviewStore = create<PreviewState>((set, get) => ({
+  apps: [],
+  loading: false,
+  pollIntervalId: null,
+
+  fetchApps: async () => {
+    try {
+      const data = await apiClient.previewList();
+      set({ apps: data.apps, loading: false });
+    } catch {
+      set({ apps: [], loading: false });
+    }
+  },
+
+  startPolling: () => {
+    const existing = get().pollIntervalId;
+    if (existing) return;
+    // Fetch immediately, then poll
+    get().fetchApps();
+    const id = setInterval(() => get().fetchApps(), POLL_INTERVAL_MS);
+    set({ pollIntervalId: id });
+  },
+
+  stopPolling: () => {
+    const id = get().pollIntervalId;
+    if (id) {
+      clearInterval(id);
+      set({ pollIntervalId: null });
+    }
+  },
+
+  startPreview: async (appName, projectId) => {
+    set({ loading: true });
+    const data = await apiClient.previewStart(appName, projectId);
+    await get().fetchApps();
+    return data.app;
+  },
+
+  stopPreview: async (appName) => {
+    set({ loading: true });
+    await apiClient.previewStop(appName);
+    await get().fetchApps();
+  },
+
+  isRunning: (appName) => {
+    return get().apps.some(a => a.appName === appName);
+  },
+}));

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

@@ -15,6 +15,7 @@ export interface Project {
   baseBranch: string | null;
   gitAuthMethod: string | null;
   sshPublicKey: string | null;
+  previewCommand: string | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -28,6 +29,7 @@ interface ProjectState {
   selectProject: (id: string) => void;
   createProject: (name: string, type?: string) => Promise<Project>;
   renameProject: (id: string, name: string) => Promise<void>;
+  updatePreviewCommand: (id: string, previewCommand: string | null) => Promise<void>;
   archiveProject: (id: string) => Promise<void>;
   refetchProjects: () => Promise<Project[]>;
 }
@@ -78,6 +80,11 @@ export const useProjectStore = create<ProjectState>((set, get) => ({
     await get().refetchProjects();
   },
 
+  updatePreviewCommand: async (id, previewCommand) => {
+    await apiClient.updateProjectPreviewCommand(id, previewCommand);
+    await get().refetchProjects();
+  },
+
   archiveProject: async (id) => {
     await apiClient.archiveProject(id);
     const updated = await get().refetchProjects();

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

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { apiClient } from '../api/client';
+import { parseNodeMarkdown, type ParsedNodeContent } from '../utils/parse_node_markdown';
 
 interface WorkSummary {
   cycle: number;
@@ -21,6 +22,7 @@ interface SidePanelState {
   isOpen: boolean;
   node: any | null;
   content: string;
+  parsedContent: ParsedNodeContent | null;
   workSummaries: WorkSummary[];
   expandedSummaries: boolean;
   tasks: Tasks | null;
@@ -36,6 +38,7 @@ export const useSidePanelStore = create<SidePanelState>((set) => ({
   isOpen: false,
   node: null,
   content: '',
+  parsedContent: null,
   workSummaries: [],
   expandedSummaries: false,
   tasks: null,
@@ -44,6 +47,7 @@ export const useSidePanelStore = create<SidePanelState>((set) => ({
   open: async (node: any) => {
     set({
       node,
+      parsedContent: null,
       workSummaries: [],
       expandedSummaries: false,
       tasks: null,
@@ -52,7 +56,8 @@ export const useSidePanelStore = create<SidePanelState>((set) => ({
 
     try {
       const detail = await apiClient.fetchNode(node.id);
-      set({ content: detail.content, isOpen: true });
+      const parsed = parseNodeMarkdown(detail.content);
+      set({ content: detail.content, parsedContent: parsed, isOpen: true });
 
       if (node.type === 'feature' || node.id?.startsWith('feat_')) {
         try {