@assistkick/create 1.0.0

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

@@ -0,0 +1,200 @@
+/**
+ * Terminal view component — embeds an xterm.js terminal connected
+ * to the backend PTY via WebSocket. 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';
+
+interface TerminalViewProps {
+  visible: boolean;
+}
+
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+
+export function TerminalView({ visible }: 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 [status, setStatus] = useState<ConnectionStatus>('disconnected');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  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 }));
+      }
+    };
+
+    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
+      }
+    };
+
+    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');
+      }
+    };
+
+    ws.onerror = () => {
+      setStatus('error');
+      setErrorMsg('Failed to connect to terminal.');
+      wsRef.current = null;
+    };
+  }, []);
+
+  // Initialize terminal
+  useEffect(() => {
+    if (!containerRef.current || terminalRef.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();
+    terminalRef.current = terminal;
+    fitAddonRef.current = fitAddon;
+
+    // Forward user input to WebSocket
+    terminal.onData((data) => {
+      const ws = wsRef.current;
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'input', data }));
+      }
+    });
+
+    return () => {
+      terminal.dispose();
+      terminalRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, []);
+
+  // Connect when visible
+  useEffect(() => {
+    if (visible && status === 'disconnected') {
+      connect();
+    }
+  }, [visible, status, connect]);
+
+  // Handle resize
+  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 }));
+        }
+      }
+    };
+
+    // Fit on visibility change
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [visible]);
+
+  // Clean up WebSocket on unmount
+  useEffect(() => {
+    return () => {
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, []);
+
+  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>
+          )}
+        </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
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ProjectSelector } from './ProjectSelector';
+import type { Project } from '../hooks/useProjects';
+
+interface ToolbarProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  completeness: number;
+  onFit: () => void;
+  onSettingsToggle: () => void;
+  settingsOpen: boolean;
+  theme: string;
+  onThemeToggle: () => void;
+  isAdmin?: boolean;
+  onLogout: () => void;
+  projects: Project[];
+  selectedProjectId: string | null;
+  onProjectSelect: (id: string) => void;
+  onProjectCreate: (name: string) => Promise<any>;
+  onProjectRename: (id: string, name: string) => Promise<void>;
+  onProjectArchive: (id: string) => Promise<void>;
+}
+
+export function Toolbar({
+  activeTab, onTabChange, completeness, onFit,
+  onSettingsToggle, settingsOpen, theme, onThemeToggle, isAdmin, onLogout,
+  projects, selectedProjectId, onProjectSelect, onProjectCreate, onProjectRename, onProjectArchive,
+}: ToolbarProps) {
+  const tabs = ['graph', 'kanban', 'coherence'];
+  if (isAdmin) {
+    tabs.push('users');
+    tabs.push('terminal');
+  }
+
+  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}
+          onSelect={onProjectSelect}
+          onCreate={onProjectCreate}
+          onRename={onProjectRename}
+          onArchive={onProjectArchive}
+        />
+      </div>
+
+      <div className="toolbar-spacer" />
+
+      <div className="completeness-bar">
+        <span>Completeness</span>
+        <div className="completeness-track">
+          <div className="completeness-fill" style={{ width: `${completeness}%` }} />
+        </div>
+        <span>{completeness}%</span>
+      </div>
+
+      <button className="toolbar-btn" onClick={onFit} title="Fit graph to viewport">Fit</button>
+      <button
+        className={`toolbar-btn settings-gear-btn${settingsOpen ? ' active' : ''}`}
+        onClick={onSettingsToggle}
+        title="Graph settings"
+      >
+        &#9881;
+      </button>
+      <button className="theme-toggle" onClick={onThemeToggle} title="Toggle theme">
+        {theme === 'dark' ? '\u2600' : '\u263E'}
+      </button>
+      <button className="toolbar-btn logout-btn" onClick={onLogout} title="Logout">
+        Logout
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,249 @@
+/**
+ * Users View — admin-only page showing registered users and pending invitations.
+ * Admins can delete users and cancel invitations. Includes inline invite form.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { apiClient } from '../api/client';
+import { useAuth } from '../hooks/useAuth';
+import { InviteUserDialog } from './InviteUserDialog';
+
+interface User {
+  id: string;
+  email: string;
+  role: string;
+  createdAt: string;
+}
+
+interface Invitation {
+  id: string;
+  email: string;
+  invitedBy: string;
+  invitedByEmail: string;
+  createdAt: string;
+  expiresAt: string;
+  acceptedAt: string | null;
+}
+
+interface UsersViewProps {
+  visible: boolean;
+}
+
+export function UsersView({ visible }: UsersViewProps) {
+  const { user: currentUser } = useAuth();
+  const [users, setUsers] = useState<User[]>([]);
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [inviteOpen, setInviteOpen] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const [usersResp, invResp] = await Promise.all([
+        apiClient.listUsers(),
+        apiClient.listInvitations(),
+      ]);
+      setUsers(usersResp.users);
+      setInvitations(invResp.invitations);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      fetchData();
+    }
+  }, [visible, fetchData]);
+
+  const handleDeleteUser = useCallback(async (userId: string, email: string) => {
+    if (!confirm(`Delete user ${email}? This action cannot be undone.`)) return;
+
+    setDeletingId(userId);
+    try {
+      await apiClient.deleteUser(userId);
+      setUsers(prev => prev.filter(u => u.id !== userId));
+    } catch (err: any) {
+      setError(err.message || 'Failed to delete user');
+    } finally {
+      setDeletingId(null);
+    }
+  }, []);
+
+  const handleDeleteInvitation = useCallback(async (invitationId: string, email: string) => {
+    if (!confirm(`Delete invitation for ${email}?`)) return;
+
+    setDeletingId(invitationId);
+    try {
+      await apiClient.deleteInvitation(invitationId);
+      setInvitations(prev => prev.filter(i => i.id !== invitationId));
+    } catch (err: any) {
+      setError(err.message || 'Failed to delete invitation');
+    } finally {
+      setDeletingId(null);
+    }
+  }, []);
+
+  const handleInviteClose = useCallback(() => {
+    setInviteOpen(false);
+    fetchData();
+  }, [fetchData]);
+
+  const formatDate = (iso: string) => {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const isExpired = (expiresAt: string) => new Date(expiresAt) < new Date();
+
+  const pendingInvitations = invitations.filter(i => !i.acceptedAt && !isExpired(i.expiresAt));
+  const pastInvitations = invitations.filter(i => i.acceptedAt || isExpired(i.expiresAt));
+
+  if (!visible) return null;
+
+  return (
+    <div className="users-view">
+      <div className="users-view-header">
+        <h2>User Management</h2>
+        <button className="users-invite-btn" onClick={() => setInviteOpen(true)}>
+          + Invite User
+        </button>
+      </div>
+
+      {error && <div className="users-error">{error}<button className="users-error-dismiss" onClick={() => setError('')}>&times;</button></div>}
+
+      {loading ? (
+        <div className="users-loading">Loading...</div>
+      ) : (
+        <>
+          <section className="users-section">
+            <h3>Registered Users ({users.length})</h3>
+            <table className="users-table">
+              <thead>
+                <tr>
+                  <th>Email</th>
+                  <th>Role</th>
+                  <th>Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {users.map(u => (
+                  <tr key={u.id} className={u.id === currentUser?.id ? 'users-current-row' : ''}>
+                    <td>{u.email}</td>
+                    <td><span className={`users-role-badge users-role-${u.role}`}>{u.role}</span></td>
+                    <td>{formatDate(u.createdAt)}</td>
+                    <td>
+                      {u.id === currentUser?.id ? (
+                        <span className="users-you-badge">you</span>
+                      ) : (
+                        <button
+                          className="users-delete-btn"
+                          onClick={() => handleDeleteUser(u.id, u.email)}
+                          disabled={deletingId === u.id}
+                          title={`Delete ${u.email}`}
+                        >
+                          {deletingId === u.id ? '...' : 'Delete'}
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </section>
+
+          <section className="users-section">
+            <h3>Pending Invitations ({pendingInvitations.length})</h3>
+            {pendingInvitations.length === 0 ? (
+              <p className="users-empty">No pending invitations.</p>
+            ) : (
+              <table className="users-table">
+                <thead>
+                  <tr>
+                    <th>Email</th>
+                    <th>Invited By</th>
+                    <th>Sent</th>
+                    <th>Expires</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pendingInvitations.map(inv => (
+                    <tr key={inv.id}>
+                      <td>{inv.email}</td>
+                      <td>{inv.invitedByEmail}</td>
+                      <td>{formatDate(inv.createdAt)}</td>
+                      <td>{formatDate(inv.expiresAt)}</td>
+                      <td>
+                        <button
+                          className="users-delete-btn"
+                          onClick={() => handleDeleteInvitation(inv.id, inv.email)}
+                          disabled={deletingId === inv.id}
+                          title={`Cancel invitation for ${inv.email}`}
+                        >
+                          {deletingId === inv.id ? '...' : 'Cancel'}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </section>
+
+          {pastInvitations.length > 0 && (
+            <section className="users-section">
+              <h3>Past Invitations ({pastInvitations.length})</h3>
+              <table className="users-table">
+                <thead>
+                  <tr>
+                    <th>Email</th>
+                    <th>Invited By</th>
+                    <th>Status</th>
+                    <th>Date</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pastInvitations.map(inv => (
+                    <tr key={inv.id} className="users-past-row">
+                      <td>{inv.email}</td>
+                      <td>{inv.invitedByEmail}</td>
+                      <td>
+                        <span className={`users-status-badge ${inv.acceptedAt ? 'users-status-accepted' : 'users-status-expired'}`}>
+                          {inv.acceptedAt ? 'Accepted' : 'Expired'}
+                        </span>
+                      </td>
+                      <td>{formatDate(inv.acceptedAt || inv.expiresAt)}</td>
+                      <td>
+                        <button
+                          className="users-delete-btn"
+                          onClick={() => handleDeleteInvitation(inv.id, inv.email)}
+                          disabled={deletingId === inv.id}
+                          title={`Delete invitation record for ${inv.email}`}
+                        >
+                          {deletingId === inv.id ? '...' : 'Delete'}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </section>
+          )}
+        </>
+      )}
+
+      <InviteUserDialog isOpen={inviteOpen} onClose={handleInviteClose} />
+    </div>
+  );
+}