@assistkick/create 1.7.0 → 1.8.0

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

@@ -2,6 +2,7 @@
  * 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.
+ * Sessions persist across server restarts — suspended sessions are auto-resumed on connect.
  * Admin-only access.
  */
 
@@ -12,6 +13,10 @@ import { WebLinksAddon } from '@xterm/addon-web-links';
 import '@xterm/xterm/css/xterm.css';
 import { apiClient } from '../api/client';
 import type { Project } from '../hooks/useProjects';
+import { useProjectStore } from '../stores/useProjectStore';
+import { Button } from './ds/Button';
+import { IconButton } from './ds/IconButton';
+import { X, Plus, RefreshCw } from 'lucide-react';
 
 interface TerminalViewProps {
   visible: boolean;
@@ -20,11 +25,13 @@ interface TerminalViewProps {
 
 interface SessionInfo {
   id: string;
+  claudeSessionId: string;
   name: string;
   projectId: string;
   projectName: string;
-  state: 'idle' | 'running';
+  state: 'suspended' | 'running';
   createdAt: string;
+  lastUsedAt: string;
 }
 
 type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
@@ -43,15 +50,11 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
   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 [isDragging, setIsDragging] = useState(false);
+  const dragCounterRef = useRef(0);
 
-  // Default new session project picker to first project
-  useEffect(() => {
-    if (projects.length > 0 && !newSessionProjectId) {
-      setNewSessionProjectId(projects[0].id);
-    }
-  }, [projects, newSessionProjectId]);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
 
   const fetchSessions = useCallback(async () => {
     try {
@@ -120,8 +123,10 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     terminal.open(containerRef.current);
     fitAddon.fit();
 
+    // Pass terminal dimensions so the server can resume with correct size
+    const { cols, rows } = terminal;
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${protocol}//${window.location.host}/api/terminal?sessionId=${encodeURIComponent(sessionId)}`;
+    const wsUrl = `${protocol}//${window.location.host}/api/terminal?sessionId=${encodeURIComponent(sessionId)}&cols=${cols}&rows=${rows}`;
 
     setStatus('connecting');
     setErrorMsg('');
@@ -132,8 +137,10 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     ws.onopen = () => {
       setStatus('connected');
       fitAddon.fit();
-      const { cols, rows } = terminal;
-      ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+      const dims = terminal;
+      ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }));
+      // Refresh sessions to update state from suspended → running
+      fetchSessions();
     };
 
     ws.onmessage = (event) => {
@@ -159,7 +166,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
         setErrorMsg('Access denied. Admin privileges required.');
       } else if (event.code === 4004) {
         setStatus('error');
-        setErrorMsg('Session not found. It may have been killed.');
+        setErrorMsg('Session not found. It may have been deleted.');
         fetchSessions();
       } else {
         setStatus('disconnected');
@@ -188,7 +195,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
   }, [connectToSession]);
 
   const handleCreateSession = useCallback(async () => {
-    const projectId = newSessionProjectId || projects[0]?.id;
+    const projectId = selectedProjectId || projects[0]?.id;
     if (!projectId) return;
 
     const project = projects.find(p => p.id === projectId) || projects[0];
@@ -207,7 +214,7 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     } finally {
       setCreating(false);
     }
-  }, [newSessionProjectId, projects, fetchSessions, connectToSession]);
+  }, [selectedProjectId, projects, fetchSessions, connectToSession]);
 
   const handleKillSession = useCallback(async (sessionId: string, e: React.MouseEvent) => {
     e.stopPropagation();
@@ -249,82 +256,144 @@ export function TerminalView({ visible, projects }: TerminalViewProps) {
     };
   }, [disconnectCurrent]);
 
+  // --- Image drag-and-drop handlers ---
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if (e.dataTransfer.types.includes('Files')) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+
+    const conn = connectionRef.current;
+    if (!conn || conn.ws.readyState !== WebSocket.OPEN) return;
+
+    const files = Array.from(e.dataTransfer.files);
+    const imageFiles = files.filter(f => f.type.startsWith('image/'));
+    if (imageFiles.length === 0) return;
+
+    for (const file of imageFiles) {
+      try {
+        const { path } = await apiClient.uploadTerminalImage(file);
+        conn.ws.send(JSON.stringify({ type: 'input', data: path + ' ' }));
+      } catch (err) {
+        console.error('Failed to upload image:', err);
+      }
+    }
+  }, []);
+
   const activeSession = sessions.find(s => s.id === activeSessionId);
 
   return (
-    <div className="terminal-view" style={{ display: visible ? 'flex' : 'none' }}>
+    <div className="flex flex-row h-full w-full overflow-hidden" 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">
+      <div className="flex flex-col w-[280px] min-w-[280px] border-r border-edge bg-surface-alt overflow-hidden">
+        <div className="px-3 py-2.5 text-[11px] font-mono uppercase tracking-widest text-content-muted border-b border-edge shrink-0">Sessions</div>
+        <div className="flex-1 overflow-y-auto">
           {sessions.length === 0 && (
-            <div className="terminal-no-sessions">No sessions yet</div>
+            <div className="px-3 py-4 text-xs text-content-muted font-mono">No sessions yet</div>
           )}
           {sessions.map(session => (
             <div
               key={session.id}
-              className={`terminal-session-item${session.id === activeSessionId ? ' terminal-session-item--active' : ''}`}
+              className={`flex flex-col px-2.5 py-2 cursor-pointer border-b border-edge relative hover:bg-tab-hover${session.id === activeSessionId ? ' bg-tab-active border-l-2 border-l-accent pl-2' : ''}`}
               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"
+              <div className="text-xs font-mono text-content whitespace-nowrap overflow-hidden text-ellipsis pr-5 flex items-center gap-1">
+                {session.state === 'suspended' && (
+                  <span className="shrink-0 text-[10px] leading-none text-content-muted opacity-70" title="Suspended — will resume on connect">&#x23F8;</span>
+                )}
+                {session.name}
+              </div>
+              <div className="text-[11px] text-content-muted font-mono whitespace-nowrap overflow-hidden text-ellipsis pr-5 mt-0.5">{session.projectName}</div>
+              <IconButton
+                label="Kill session"
+                variant="danger"
+                size="sm"
+                className="absolute top-2 right-2"
                 onClick={(e) => handleKillSession(session.id, e)}
-                title="Kill session"
               >
-                ✕
-              </button>
+                <X size={10} strokeWidth={2} />
+              </IconButton>
             </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"
+        {/* New session — uses the project selected in the navbar */}
+        <div className="flex flex-col gap-1.5 p-2.5 border-t border-edge shrink-0">
+          <Button
+            variant="primary"
+            size="sm"
+            icon={!creating ? <Plus size={12} strokeWidth={2} /> : undefined}
+            className="w-full"
             onClick={handleCreateSession}
-            disabled={creating || projects.length === 0}
+            disabled={creating || !selectedProjectId}
           >
-            {creating ? '…' : '+ New'}
-          </button>
+            {creating ? '...' : 'New'}
+          </Button>
         </div>
       </div>
 
       {/* Right panel — terminal content */}
-      <div className="terminal-panel">
+      <div
+        className="flex-1 flex flex-col min-w-0 relative"
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        {isDragging && (
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-[rgba(30,30,46,0.85)] border-2 border-dashed border-[#89b4fa] rounded-lg pointer-events-none">
+            <div className="text-[#89b4fa] text-lg font-mono font-semibold">Drop image here</div>
+          </div>
+        )}
         {!activeSessionId && (
-          <div className="terminal-empty-state">
+          <div className="flex-1 flex items-center justify-center text-content-muted text-[13px] font-mono">
             Select a session or create a new one
           </div>
         )}
         {activeSession && errorMsg && (
-          <div className="terminal-error">
+          <div className="flex items-center gap-3 px-4 py-2 bg-error text-[#1e1e2e] text-[13px] font-mono shrink-0">
             <span>{errorMsg}</span>
-            <button
-              className="terminal-reconnect-btn"
+            <Button
+              variant="secondary"
+              size="sm"
+              icon={<RefreshCw size={12} strokeWidth={2} />}
               onClick={() => connectToSession(activeSessionId!)}
             >
               Reconnect
-            </button>
+            </Button>
           </div>
         )}
         {activeSession && status === 'connecting' && (
-          <div className="terminal-status">Connecting…</div>
+          <div className="px-4 py-2 text-content-secondary text-[13px] font-mono shrink-0">
+            {activeSession.state === 'suspended' ? 'Resuming session...' : 'Connecting...'}
+          </div>
         )}
         <div
           ref={containerRef}
-          className="terminal-container"
+          className="terminal-container flex-1 p-1 bg-[#1e1e2e] min-h-0"
           style={{ display: activeSessionId ? 'flex' : 'none' }}
         />
       </div>

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import {
-  Columns3, MessageSquare, Network, ShieldCheck, Palette, Users,
-  Maximize, Settings, Sun, Moon,
+  Columns3, MessageSquare, Network, ShieldCheck, Palette, Users, Bot, Workflow,
+  FolderOpen, Maximize, Settings, Sun, Moon, Video,
 } from 'lucide-react';
 import { NavBarSidekick } from './ds/NavBarSidekick';
 import type { NavItem } from './ds/NavBarSidekick';
@@ -15,7 +15,7 @@ import { useTheme } from '../hooks/useTheme';
 import { useAuth } from '../hooks/useAuth';
 import { apiClient } from '../api/client';
 
-const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal', 'design-system']);
+const VALID_TABS = new Set(['graph', 'kanban', 'coherence', 'users', 'terminal', 'agents', 'workflows', 'design-system', 'files', 'videography']);
 
 function tabFromPath(pathname: string): string {
   const seg = pathname.replace(/^\//, '');
@@ -25,14 +25,18 @@ function tabFromPath(pathname: string): string {
 const ICON_PROPS = { size: 14, strokeWidth: 2 } as const;
 
 const TAB_ITEMS: NavItem[] = [
-  { id: 'kanban', label: 'Kanban', icon: <Columns3 {...ICON_PROPS} />, description: 'Board view of features' },
-  { id: 'terminal', label: 'Chat', icon: <MessageSquare {...ICON_PROPS} />, description: 'AI assistant terminal' },
-  { id: 'graph', label: 'Graph', icon: <Network {...ICON_PROPS} />, description: 'Knowledge graph visualization' },
-  { id: 'coherence', label: 'Coherence', icon: <ShieldCheck {...ICON_PROPS} />, description: 'Coherence analysis' },
-  { id: 'design-system', label: 'Design System', icon: <Palette {...ICON_PROPS} />, description: 'Living style guide' },
+  { id: 'kanban', label: 'Kanban', icon: <Columns3 {...ICON_PROPS} />, description: 'Board view of features', href: '/kanban' },
+  { id: 'terminal', label: 'Chat', icon: <MessageSquare {...ICON_PROPS} />, description: 'AI assistant terminal', href: '/terminal' },
+  { id: 'graph', label: 'Graph', icon: <Network {...ICON_PROPS} />, description: 'Knowledge graph visualization', href: '/graph' },
+  { id: 'coherence', label: 'Coherence', icon: <ShieldCheck {...ICON_PROPS} />, description: 'Coherence analysis', href: '/coherence' },
+  { id: 'agents', label: 'Agents', icon: <Bot {...ICON_PROPS} />, description: 'Manage agent prompts', href: '/agents' },
+  { id: 'workflows', label: 'Workflows', icon: <Workflow {...ICON_PROPS} />, description: 'Visual workflow builder', href: '/workflows' },
+  { id: 'files', label: 'Files', icon: <FolderOpen {...ICON_PROPS} />, description: 'Browse and edit project files', href: '/files' },
+  { id: 'design-system', label: 'Design System', icon: <Palette {...ICON_PROPS} />, description: 'Living style guide', href: '/design-system' },
 ];
 
-const ADMIN_ITEM: NavItem = { id: 'users', label: 'Users', icon: <Users {...ICON_PROPS} />, description: 'User management' };
+const VIDEOGRAPHY_ITEM: NavItem = { id: 'videography', label: 'Videography', icon: <Video {...ICON_PROPS} />, description: 'Video production pipeline', href: '/videography' };
+const ADMIN_ITEM: NavItem = { id: 'users', label: 'Users', icon: <Users {...ICON_PROPS} />, description: 'User management', href: '/users' };
 
 const iconBtnClass = (active?: boolean) => [
   'flex h-8 w-8 items-center justify-center rounded-lg border',
@@ -69,11 +73,14 @@ export function Toolbar() {
     ? Math.round((graphData.nodes.reduce((acc: number, n: any) => acc + (n.completeness || 0), 0) / Math.max(graphData.nodes.length, 1)) * 100)
     : 0;
 
-  const items = isAdmin ? [...TAB_ITEMS, ADMIN_ITEM] : TAB_ITEMS;
+  const selectedProject = projects.find(p => p.id === selectedProjectId);
+  const isVideoProject = selectedProject?.type === 'video';
 
-  const handleNavigate = useCallback((id: string) => {
-    navigate(`/${id}`);
-  }, [navigate]);
+  const items = [
+    ...TAB_ITEMS,
+    ...(isVideoProject ? [VIDEOGRAPHY_ITEM] : []),
+    ...(isAdmin ? [ADMIN_ITEM] : []),
+  ];
 
   const handleLogout = useCallback(async () => {
     try {
@@ -103,7 +110,6 @@ export function Toolbar() {
       <NavBarSidekick
         items={items}
         activeId={activeTab}
-        onNavigate={handleNavigate}
         brand={
           <ProjectSelector
             projects={projects}

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

@@ -110,43 +110,43 @@ export function UsersView({ visible }: UsersViewProps) {
   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)}>
+    <div className="p-6 max-w-[900px] mx-auto text-content">
+      <div className="flex justify-between items-center mb-5">
+        <h2 className="text-xl font-semibold">User Management</h2>
+        <button className="bg-accent text-white border-none rounded-md px-4 py-2 text-sm cursor-pointer font-mono hover:opacity-90" onClick={() => setInviteOpen(true)}>
           + Invite User
         </button>
       </div>
 
-      {error && <div className="users-error">{error}<button className="users-error-dismiss" onClick={() => setError('')}>&times;</button></div>}
+      {error && <div className="bg-[rgba(255,107,107,0.15)] text-error px-3.5 py-2.5 rounded-md mb-4 text-sm flex justify-between items-center">{error}<button className="bg-none border-none text-error text-lg cursor-pointer px-1" onClick={() => setError('')}>&times;</button></div>}
 
       {loading ? (
-        <div className="users-loading">Loading...</div>
+        <div className="text-content-secondary py-10 text-center">Loading...</div>
       ) : (
         <>
-          <section className="users-section">
-            <h3>Registered Users ({users.length})</h3>
-            <table className="users-table">
+          <section className="mb-7">
+            <h3 className="text-[15px] font-semibold text-content-secondary mb-2.5">Registered Users ({users.length})</h3>
+            <table className="w-full border-collapse text-sm font-mono">
               <thead>
                 <tr>
-                  <th>Email</th>
-                  <th>Role</th>
-                  <th>Created</th>
-                  <th></th>
+                  <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Email</th>
+                  <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Role</th>
+                  <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Created</th>
+                  <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide"></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>
+                  <tr key={u.id} className={`hover:bg-surface-raised ${u.id === currentUser?.id ? 'bg-surface-alt' : ''}`}>
+                    <td className="px-3 py-2.5 border-b border-edge text-content">{u.email}</td>
+                    <td className="px-3 py-2.5 border-b border-edge text-content"><span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${u.role === 'admin' ? 'bg-[rgba(77,171,247,0.15)] text-accent' : 'bg-surface-raised text-content-secondary'}`}>{u.role}</span></td>
+                    <td className="px-3 py-2.5 border-b border-edge text-content">{formatDate(u.createdAt)}</td>
+                    <td className="px-3 py-2.5 border-b border-edge text-content">
                       {u.id === currentUser?.id ? (
-                        <span className="users-you-badge">you</span>
+                        <span className="text-xs text-content-muted italic">you</span>
                       ) : (
                         <button
-                          className="users-delete-btn"
+                          className="bg-none border border-edge text-error rounded px-2.5 py-1 text-xs cursor-pointer font-mono hover:bg-[rgba(255,107,107,0.1)] hover:border-error disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => handleDeleteUser(u.id, u.email)}
                           disabled={deletingId === u.id}
                           title={`Delete ${u.email}`}
@@ -161,31 +161,31 @@ export function UsersView({ visible }: UsersViewProps) {
             </table>
           </section>
 
-          <section className="users-section">
-            <h3>Pending Invitations ({pendingInvitations.length})</h3>
+          <section className="mb-7">
+            <h3 className="text-[15px] font-semibold text-content-secondary mb-2.5">Pending Invitations ({pendingInvitations.length})</h3>
             {pendingInvitations.length === 0 ? (
-              <p className="users-empty">No pending invitations.</p>
+              <p className="text-content-muted text-sm py-3">No pending invitations.</p>
             ) : (
-              <table className="users-table">
+              <table className="w-full border-collapse text-sm font-mono">
                 <thead>
                   <tr>
-                    <th>Email</th>
-                    <th>Invited By</th>
-                    <th>Sent</th>
-                    <th>Expires</th>
-                    <th></th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Email</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Invited By</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Sent</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Expires</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide"></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>
+                    <tr key={inv.id} className="hover:bg-surface-raised">
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{inv.email}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{inv.invitedByEmail}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{formatDate(inv.createdAt)}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{formatDate(inv.expiresAt)}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">
                         <button
-                          className="users-delete-btn"
+                          className="bg-none border border-edge text-error rounded px-2.5 py-1 text-xs cursor-pointer font-mono hover:bg-[rgba(255,107,107,0.1)] hover:border-error disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => handleDeleteInvitation(inv.id, inv.email)}
                           disabled={deletingId === inv.id}
                           title={`Cancel invitation for ${inv.email}`}
@@ -201,32 +201,32 @@ export function UsersView({ visible }: UsersViewProps) {
           </section>
 
           {pastInvitations.length > 0 && (
-            <section className="users-section">
-              <h3>Past Invitations ({pastInvitations.length})</h3>
-              <table className="users-table">
+            <section className="mb-7">
+              <h3 className="text-[15px] font-semibold text-content-secondary mb-2.5">Past Invitations ({pastInvitations.length})</h3>
+              <table className="w-full border-collapse text-sm font-mono">
                 <thead>
                   <tr>
-                    <th>Email</th>
-                    <th>Invited By</th>
-                    <th>Status</th>
-                    <th>Date</th>
-                    <th></th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Email</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Invited By</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Status</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide">Date</th>
+                    <th className="text-left px-3 py-2 border-b border-edge text-content-muted font-medium text-xs uppercase tracking-wide"></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'}`}>
+                    <tr key={inv.id} className="opacity-70 hover:bg-surface-raised">
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{inv.email}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{inv.invitedByEmail}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">
+                        <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${inv.acceptedAt ? 'bg-[rgba(105,219,124,0.15)] text-completeness-fill' : 'bg-[rgba(255,107,107,0.15)] text-error'}`}>
                           {inv.acceptedAt ? 'Accepted' : 'Expired'}
                         </span>
                       </td>
-                      <td>{formatDate(inv.acceptedAt || inv.expiresAt)}</td>
-                      <td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">{formatDate(inv.acceptedAt || inv.expiresAt)}</td>
+                      <td className="px-3 py-2.5 border-b border-edge text-content">
                         <button
-                          className="users-delete-btn"
+                          className="bg-none border border-edge text-error rounded px-2.5 py-1 text-xs cursor-pointer font-mono hover:bg-[rgba(255,107,107,0.1)] hover:border-error disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => handleDeleteInvitation(inv.id, inv.email)}
                           disabled={deletingId === inv.id}
                           title={`Delete invitation record for ${inv.email}`}