@assistkick/create 1.2.0 → 1.3.0

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

@@ -1,6 +1,8 @@
 /**
- * Terminal view component — embeds an xterm.js terminal connected
- * to the backend PTY via WebSocket. Admin-only access.
+ * Terminal view — multi-session manager with chat-like layout.
+ * Left sidebar lists all terminal sessions; right panel shows the active session's terminal.
+ * Each session is permanently bound to a project chosen at creation time.
+ * Admin-only access.
  */
 
 import React, { useEffect, useRef, useCallback, useState } from 'react';
@@ -8,78 +10,80 @@ import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import '@xterm/xterm/css/xterm.css';
+import { apiClient } from '../api/client';
+import type { Project } from '../hooks/useProjects';
 
 interface TerminalViewProps {
   visible: boolean;
+  projects: Project[];
+}
+
+interface SessionInfo {
+  id: string;
+  name: string;
+  projectId: string;
+  projectName: string;
+  state: 'idle' | 'running';
+  createdAt: string;
 }
 
 type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
 
-export function TerminalView({ visible }: TerminalViewProps) {
+interface ActiveConnection {
+  sessionId: string;
+  ws: WebSocket;
+  terminal: Terminal;
+  fitAddon: FitAddon;
+}
+
+export function TerminalView({ visible, projects }: TerminalViewProps) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const terminalRef = useRef<Terminal | null>(null);
-  const fitAddonRef = useRef<FitAddon | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
+  const connectionRef = useRef<ActiveConnection | null>(null);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [status, setStatus] = useState<ConnectionStatus>('disconnected');
   const [errorMsg, setErrorMsg] = useState('');
+  const [newSessionProjectId, setNewSessionProjectId] = useState<string>('');
+  const [creating, setCreating] = useState(false);
 
-  const connect = useCallback(() => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) return;
-
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/api/terminal`;
-
-    setStatus('connecting');
-    setErrorMsg('');
-
-    const ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
-
-    ws.onopen = () => {
-      setStatus('connected');
-
-      // Send initial resize
-      if (terminalRef.current && fitAddonRef.current) {
-        fitAddonRef.current.fit();
-        const { cols, rows } = terminalRef.current;
-        ws.send(JSON.stringify({ type: 'resize', cols, rows }));
-      }
-    };
+  // Default new session project picker to first project
+  useEffect(() => {
+    if (projects.length > 0 && !newSessionProjectId) {
+      setNewSessionProjectId(projects[0].id);
+    }
+  }, [projects, newSessionProjectId]);
 
-    ws.onmessage = (event) => {
-      try {
-        const msg = JSON.parse(event.data);
-        if (msg.type === 'output' && terminalRef.current) {
-          terminalRef.current.write(msg.data);
-        }
-      } catch {
-        // Ignore malformed messages
-      }
-    };
+  const fetchSessions = useCallback(async () => {
+    try {
+      const data = await apiClient.listTerminalSessions();
+      setSessions(data.sessions);
+      return data.sessions as SessionInfo[];
+    } catch {
+      return [] as SessionInfo[];
+    }
+  }, []);
 
-    ws.onclose = (event) => {
-      wsRef.current = null;
-      if (event.code === 4001) {
-        setStatus('error');
-        setErrorMsg('Authentication required. Please log in.');
-      } else if (event.code === 4003) {
-        setStatus('error');
-        setErrorMsg('Access denied. Admin privileges required.');
-      } else {
-        setStatus('disconnected');
-      }
-    };
+  // Load sessions when tab becomes visible
+  useEffect(() => {
+    if (visible) {
+      fetchSessions();
+    }
+  }, [visible, fetchSessions]);
 
-    ws.onerror = () => {
-      setStatus('error');
-      setErrorMsg('Failed to connect to terminal.');
-      wsRef.current = null;
-    };
+  const disconnectCurrent = useCallback(() => {
+    const conn = connectionRef.current;
+    if (!conn) return;
+    conn.ws.close();
+    conn.terminal.dispose();
+    connectionRef.current = null;
+    setStatus('disconnected');
+    setErrorMsg('');
   }, []);
 
-  // Initialize terminal
-  useEffect(() => {
-    if (!containerRef.current || terminalRef.current) return;
+  const connectToSession = useCallback((sessionId: string) => {
+    disconnectCurrent();
+
+    if (!containerRef.current) return;
 
     const terminal = new Terminal({
       cursorBlink: true,
@@ -111,55 +115,129 @@ export function TerminalView({ visible }: TerminalViewProps) {
 
     const fitAddon = new FitAddon();
     const webLinksAddon = new WebLinksAddon();
-
     terminal.loadAddon(fitAddon);
     terminal.loadAddon(webLinksAddon);
     terminal.open(containerRef.current);
-
     fitAddon.fit();
-    terminalRef.current = terminal;
-    fitAddonRef.current = fitAddon;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/api/terminal?sessionId=${encodeURIComponent(sessionId)}`;
+
+    setStatus('connecting');
+    setErrorMsg('');
+
+    const ws = new WebSocket(wsUrl);
+    connectionRef.current = { sessionId, ws, terminal, fitAddon };
+
+    ws.onopen = () => {
+      setStatus('connected');
+      fitAddon.fit();
+      const { cols, rows } = terminal;
+      ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === 'output') {
+          terminal.write(msg.data);
+        }
+      } catch {
+        // Ignore malformed messages
+      }
+    };
+
+    ws.onclose = (event) => {
+      if (connectionRef.current?.sessionId === sessionId) {
+        connectionRef.current = null;
+      }
+      if (event.code === 4001) {
+        setStatus('error');
+        setErrorMsg('Authentication required. Please log in.');
+      } else if (event.code === 4003) {
+        setStatus('error');
+        setErrorMsg('Access denied. Admin privileges required.');
+      } else if (event.code === 4004) {
+        setStatus('error');
+        setErrorMsg('Session not found. It may have been killed.');
+        fetchSessions();
+      } else {
+        setStatus('disconnected');
+      }
+    };
+
+    ws.onerror = () => {
+      setStatus('error');
+      setErrorMsg('Failed to connect to terminal session.');
+      if (connectionRef.current?.sessionId === sessionId) {
+        connectionRef.current = null;
+      }
+    };
 
     // Forward user input to WebSocket
     terminal.onData((data) => {
-      const ws = wsRef.current;
-      if (ws?.readyState === WebSocket.OPEN) {
+      if (ws.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify({ type: 'input', data }));
       }
     });
+  }, [disconnectCurrent, fetchSessions]);
 
-    return () => {
-      terminal.dispose();
-      terminalRef.current = null;
-      fitAddonRef.current = null;
-    };
-  }, []);
+  const handleSelectSession = useCallback((sessionId: string) => {
+    setActiveSessionId(sessionId);
+    connectToSession(sessionId);
+  }, [connectToSession]);
 
-  // Connect when visible
-  useEffect(() => {
-    if (visible && status === 'disconnected') {
-      connect();
+  const handleCreateSession = useCallback(async () => {
+    const projectId = newSessionProjectId || projects[0]?.id;
+    if (!projectId) return;
+
+    const project = projects.find(p => p.id === projectId) || projects[0];
+    if (!project) return;
+
+    setCreating(true);
+    try {
+      const data = await apiClient.createTerminalSession(project.id, project.name);
+      const newSession: SessionInfo = data.session;
+      const updated = await fetchSessions();
+      const created = updated.find(s => s.id === newSession.id) || newSession;
+      setActiveSessionId(created.id);
+      connectToSession(created.id);
+    } catch {
+      // silently ignore — session list stays as-is
+    } finally {
+      setCreating(false);
     }
-  }, [visible, status, connect]);
+  }, [newSessionProjectId, projects, fetchSessions, connectToSession]);
 
-  // Handle resize
+  const handleKillSession = useCallback(async (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await apiClient.killTerminalSession(sessionId);
+      if (activeSessionId === sessionId) {
+        disconnectCurrent();
+        setActiveSessionId(null);
+      }
+      await fetchSessions();
+    } catch {
+      // silently ignore
+    }
+  }, [activeSessionId, disconnectCurrent, fetchSessions]);
+
+  // Handle window resize — refit when visible
   useEffect(() => {
     if (!visible) return;
 
     const handleResize = () => {
-      if (fitAddonRef.current && terminalRef.current) {
-        fitAddonRef.current.fit();
-        const { cols, rows } = terminalRef.current;
-        const ws = wsRef.current;
-        if (ws?.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'resize', cols, rows }));
-        }
+      const conn = connectionRef.current;
+      if (!conn) return;
+      conn.fitAddon.fit();
+      const { cols, rows } = conn.terminal;
+      if (conn.ws.readyState === WebSocket.OPEN) {
+        conn.ws.send(JSON.stringify({ type: 'resize', cols, rows }));
       }
     };
 
-    // Fit on visibility change
     handleResize();
-
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, [visible]);
@@ -167,34 +245,89 @@ export function TerminalView({ visible }: TerminalViewProps) {
   // Clean up WebSocket on unmount
   useEffect(() => {
     return () => {
-      wsRef.current?.close();
-      wsRef.current = null;
+      disconnectCurrent();
     };
-  }, []);
+  }, [disconnectCurrent]);
+
+  const activeSession = sessions.find(s => s.id === activeSessionId);
 
   return (
     <div className="terminal-view" style={{ display: visible ? 'flex' : 'none' }}>
-      {errorMsg && (
-        <div className="terminal-error">
-          <span>{errorMsg}</span>
-          {status !== 'connecting' && (
-            <button className="terminal-reconnect-btn" onClick={connect}>
-              Reconnect
-            </button>
+      {/* Left sidebar — session list */}
+      <div className="terminal-sidebar">
+        <div className="terminal-sidebar-header">Sessions</div>
+        <div className="terminal-session-list">
+          {sessions.length === 0 && (
+            <div className="terminal-no-sessions">No sessions yet</div>
           )}
+          {sessions.map(session => (
+            <div
+              key={session.id}
+              className={`terminal-session-item${session.id === activeSessionId ? ' terminal-session-item--active' : ''}`}
+              onClick={() => handleSelectSession(session.id)}
+            >
+              <div className="terminal-session-name">{session.name}</div>
+              <div className="terminal-session-project">{session.projectName}</div>
+              <button
+                className="terminal-session-kill"
+                onClick={(e) => handleKillSession(session.id, e)}
+                title="Kill session"
+              >
+                ✕
+              </button>
+            </div>
+          ))}
         </div>
-      )}
-      {status === 'connecting' && (
-        <div className="terminal-status">Connecting...</div>
-      )}
-      <div ref={containerRef} className="terminal-container" />
-      {status === 'disconnected' && !errorMsg && (
-        <div className="terminal-overlay">
-          <button className="terminal-connect-btn" onClick={connect}>
-            Connect to Terminal
+
+        {/* New session controls */}
+        <div className="terminal-new-session">
+          <select
+            className="terminal-project-picker"
+            value={newSessionProjectId}
+            onChange={e => setNewSessionProjectId(e.target.value)}
+            disabled={creating || projects.length === 0}
+          >
+            {projects.map(p => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+          <button
+            className="terminal-new-session-btn"
+            onClick={handleCreateSession}
+            disabled={creating || projects.length === 0}
+          >
+            {creating ? '…' : '+ New'}
           </button>
         </div>
-      )}
+      </div>
+
+      {/* Right panel — terminal content */}
+      <div className="terminal-panel">
+        {!activeSessionId && (
+          <div className="terminal-empty-state">
+            Select a session or create a new one
+          </div>
+        )}
+        {activeSession && errorMsg && (
+          <div className="terminal-error">
+            <span>{errorMsg}</span>
+            <button
+              className="terminal-reconnect-btn"
+              onClick={() => connectToSession(activeSessionId!)}
+            >
+              Reconnect
+            </button>
+          </div>
+        )}
+        {activeSession && status === 'connecting' && (
+          <div className="terminal-status">Connecting…</div>
+        )}
+        <div
+          ref={containerRef}
+          className="terminal-container"
+          style={{ display: activeSessionId ? 'flex' : 'none' }}
+        />
+      </div>
     </div>
   );
 }

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

@@ -19,32 +19,24 @@ interface ToolbarProps {
   onProjectCreate: (name: string) => Promise<any>;
   onProjectRename: (id: string, name: string) => Promise<void>;
   onProjectArchive: (id: string) => Promise<void>;
+  onOpenGitModal?: (project: Project) => void;
 }
 
 export function Toolbar({
   activeTab, onTabChange, completeness, onFit,
   onSettingsToggle, settingsOpen, theme, onThemeToggle, isAdmin, onLogout,
-  projects, selectedProjectId, onProjectSelect, onProjectCreate, onProjectRename, onProjectArchive,
+  projects, selectedProjectId, onProjectSelect, onProjectCreate, onProjectRename, onProjectArchive, onOpenGitModal,
 }: ToolbarProps) {
-  const tabs = ['graph', 'kanban', 'coherence'];
+  const tabs = ['kanban', 'terminal', 'graph', 'coherence'];
   if (isAdmin) {
     tabs.push('users');
-    tabs.push('terminal');
   }
 
+  const tabLabels: Record<string, string> = { terminal: 'Chat' };
+
   return (
     <div className="toolbar">
       <div className="tab-bar">
-        {tabs.map(tab => (
-          <button
-            key={tab}
-            className={`tab-btn${activeTab === tab ? ' active' : ''}`}
-            onClick={() => onTabChange(tab)}
-          >
-            {tab.charAt(0).toUpperCase() + tab.slice(1)}
-          </button>
-        ))}
-        <div className="tab-bar-separator" />
         <ProjectSelector
           projects={projects}
           selectedProjectId={selectedProjectId}
@@ -52,7 +44,17 @@ export function Toolbar({
           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" />

package/templates/assistkick-product-system/packages/frontend/src/constants/graph.ts

@@ -169,6 +169,7 @@ export const ALL_NODE_TYPES = [
 ];
 
 export const COLUMNS = [
+  { id: 'backlog', label: 'Backlog' },
   { id: 'todo', label: 'Todo' },
   { id: 'in_progress', label: 'In Progress' },
   { id: 'in_review', label: 'In Review' },

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

@@ -8,6 +8,10 @@ export interface Project {
   name: string;
   isDefault: number;
   archivedAt: string | null;
+  repoUrl: string | null;
+  githubInstallationId: string | null;
+  githubRepoFullName: string | null;
+  baseBranch: string | null;
   createdAt: string;
   updatedAt: string;
 }

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

@@ -11,6 +11,7 @@ import { TerminalView } from '../components/TerminalView';
 import { UsersView } from '../components/UsersView';
 import { SidePanel, openSidePanel, closeSidePanel } from '../components/SidePanel';
 import { QaIssueSheet } from '../components/QaIssueSheet';
+import { GitRepoModal } from '../components/GitRepoModal';
 import { useTheme } from '../hooks/useTheme';
 import { useGraph } from '../hooks/useGraph';
 import { useAuth } from '../hooks/useAuth';
@@ -22,7 +23,7 @@ const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal']
 
 function tabFromPath(pathname: string): string {
   const seg = pathname.replace(/^\//, '');
-  return VALID_TABS.has(seg) ? seg : 'graph';
+  return VALID_TABS.has(seg) ? seg : 'kanban';
 }
 
 export function DashboardRoute() {
@@ -33,7 +34,7 @@ export function DashboardRoute() {
   const isAdmin = user?.role === 'admin';
   const {
     projects, selectedProjectId, selectProject,
-    createProject, renameProject, archiveProject,
+    createProject, renameProject, archiveProject, refetchProjects,
   } = useProjects();
   const { graphData, error: graphError } = useGraph(selectedProjectId);
   const graphRef = useRef<GraphViewHandle>(null);
@@ -42,6 +43,13 @@ export function DashboardRoute() {
   const [legendVisible, setLegendVisible] = useState(true);
   const [hiddenTypes, setHiddenTypes] = useState<Set<string>>(new Set());
 
+  // Git Repo Modal state
+  const [gitModalProject, setGitModalProject] = useState<any>(null);
+
+  const handleOpenGitModal = useCallback((project: any) => {
+    setGitModalProject(project);
+  }, []);
+
   // QA Issue Sheet state
   const [qaOpen, setQaOpen] = useState(false);
   const [qaFeatureId, setQaFeatureId] = useState<string | null>(null);
@@ -146,6 +154,7 @@ export function DashboardRoute() {
         onProjectCreate={createProject}
         onProjectRename={renameProject}
         onProjectArchive={archiveProject}
+        onOpenGitModal={handleOpenGitModal}
       />
 
       <div className="main-content">
@@ -196,8 +205,8 @@ export function DashboardRoute() {
         {/* Users View (admin-only) */}
         {isAdmin && <UsersView visible={activeTab === 'users'} />}
 
-        {/* Terminal View (admin-only) */}
-        {isAdmin && <TerminalView visible={activeTab === 'terminal'} />}
+        {/* Chat View */}
+        <TerminalView visible={activeTab === 'terminal'} projects={projects} />
 
         {/* Side Panel */}
         <SidePanel graphData={graphData} onEdgeClick={handleEdgeClick} />
@@ -215,6 +224,15 @@ export function DashboardRoute() {
         />
       </div>
 
+      {/* Git Repo Modal */}
+      {gitModalProject && (
+        <GitRepoModal
+          project={gitModalProject}
+          onClose={() => setGitModalProject(null)}
+          onProjectUpdated={refetchProjects}
+        />
+      )}
+
     </div>
     </ToastProvider>
   );