@assistkick/create 1.0.1 → 1.3.0

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

@@ -0,0 +1,333 @@
+/**
+ * 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';
+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';
+
+interface ActiveConnection {
+  sessionId: string;
+  ws: WebSocket;
+  terminal: Terminal;
+  fitAddon: FitAddon;
+}
+
+export function TerminalView({ visible, projects }: TerminalViewProps) {
+  const containerRef = useRef<HTMLDivElement>(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);
+
+  // Default new session project picker to first project
+  useEffect(() => {
+    if (projects.length > 0 && !newSessionProjectId) {
+      setNewSessionProjectId(projects[0].id);
+    }
+  }, [projects, newSessionProjectId]);
+
+  const fetchSessions = useCallback(async () => {
+    try {
+      const data = await apiClient.listTerminalSessions();
+      setSessions(data.sessions);
+      return data.sessions as SessionInfo[];
+    } catch {
+      return [] as SessionInfo[];
+    }
+  }, []);
+
+  // Load sessions when tab becomes visible
+  useEffect(() => {
+    if (visible) {
+      fetchSessions();
+    }
+  }, [visible, fetchSessions]);
+
+  const disconnectCurrent = useCallback(() => {
+    const conn = connectionRef.current;
+    if (!conn) return;
+    conn.ws.close();
+    conn.terminal.dispose();
+    connectionRef.current = null;
+    setStatus('disconnected');
+    setErrorMsg('');
+  }, []);
+
+  const connectToSession = useCallback((sessionId: string) => {
+    disconnectCurrent();
+
+    if (!containerRef.current) return;
+
+    const terminal = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      theme: {
+        background: '#1e1e2e',
+        foreground: '#cdd6f4',
+        cursor: '#f5e0dc',
+        selectionBackground: '#585b7066',
+        black: '#45475a',
+        red: '#f38ba8',
+        green: '#a6e3a1',
+        yellow: '#f9e2af',
+        blue: '#89b4fa',
+        magenta: '#f5c2e7',
+        cyan: '#94e2d5',
+        white: '#bac2de',
+        brightBlack: '#585b70',
+        brightRed: '#f38ba8',
+        brightGreen: '#a6e3a1',
+        brightYellow: '#f9e2af',
+        brightBlue: '#89b4fa',
+        brightMagenta: '#f5c2e7',
+        brightCyan: '#94e2d5',
+        brightWhite: '#a6adc8',
+      },
+    });
+
+    const fitAddon = new FitAddon();
+    const webLinksAddon = new WebLinksAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.loadAddon(webLinksAddon);
+    terminal.open(containerRef.current);
+    fitAddon.fit();
+
+    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) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'input', data }));
+      }
+    });
+  }, [disconnectCurrent, fetchSessions]);
+
+  const handleSelectSession = useCallback((sessionId: string) => {
+    setActiveSessionId(sessionId);
+    connectToSession(sessionId);
+  }, [connectToSession]);
+
+  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);
+    }
+  }, [newSessionProjectId, projects, fetchSessions, connectToSession]);
+
+  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 = () => {
+      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 }));
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [visible]);
+
+  // Clean up WebSocket on unmount
+  useEffect(() => {
+    return () => {
+      disconnectCurrent();
+    };
+  }, [disconnectCurrent]);
+
+  const activeSession = sessions.find(s => s.id === activeSessionId);
+
+  return (
+    <div className="terminal-view" style={{ display: visible ? 'flex' : 'none' }}>
+      {/* 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>
+
+        {/* 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/{product-system → 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/{product-system → 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/{product-system → 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/{product-system → 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>
   );