@assistkick/create 1.6.0 → 1.8.0

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

@@ -1,86 +1,164 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  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';
 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>;
-  onOpenGitModal?: (project: Project) => void;
+import { useProjectStore } from '../stores/useProjectStore';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useGraphUIStore } from '../stores/useGraphUIStore';
+import { useGitModalStore } from '../stores/useGitModalStore';
+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', 'agents', 'workflows', 'design-system', 'files', 'videography']);
+
+function tabFromPath(pathname: string): string {
+  const seg = pathname.replace(/^\//, '');
+  return VALID_TABS.has(seg) ? seg : 'kanban';
 }
 
-export function Toolbar({
-  activeTab, onTabChange, completeness, onFit,
-  onSettingsToggle, settingsOpen, theme, onThemeToggle, isAdmin, onLogout,
-  projects, selectedProjectId, onProjectSelect, onProjectCreate, onProjectRename, onProjectArchive, onOpenGitModal,
-}: ToolbarProps) {
-  const tabs = ['kanban', 'terminal', 'graph', 'coherence'];
-  if (isAdmin) {
-    tabs.push('users');
-  }
+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', 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 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',
+  'transition-all duration-150 cursor-pointer outline-none',
+  active
+    ? 'border-accent/40 bg-accent/10 text-accent'
+    : 'border-edge text-content-muted hover:border-content/20 hover:text-content',
+].join(' ');
+
+export function Toolbar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const activeTab = tabFromPath(location.pathname);
+
+  const { theme, toggleTheme } = useTheme();
+  const { user } = useAuth();
+  const isAdmin = user?.role === 'admin';
+
+  const projects = useProjectStore((s) => s.projects);
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+  const selectProject = useProjectStore((s) => s.selectProject);
+  const createProject = useProjectStore((s) => s.createProject);
+  const renameProject = useProjectStore((s) => s.renameProject);
+  const archiveProject = useProjectStore((s) => s.archiveProject);
+
+  const graphData = useGraphStore((s) => s.graphData);
+  const onFit = useGraphUIStore((s) => s.onFit);
+  const settingsOpen = useGraphUIStore((s) => s.settingsOpen);
+  const onSettingsToggle = useGraphUIStore((s) => s.onSettingsToggle);
+
+  const openGitModal = useGitModalStore((s) => s.open);
+
+  const completeness = graphData
+    ? Math.round((graphData.nodes.reduce((acc: number, n: any) => acc + (n.completeness || 0), 0) / Math.max(graphData.nodes.length, 1)) * 100)
+    : 0;
+
+  const selectedProject = projects.find(p => p.id === selectedProjectId);
+  const isVideoProject = selectedProject?.type === 'video';
+
+  const items = [
+    ...TAB_ITEMS,
+    ...(isVideoProject ? [VIDEOGRAPHY_ITEM] : []),
+    ...(isAdmin ? [ADMIN_ITEM] : []),
+  ];
+
+  const handleLogout = useCallback(async () => {
+    try {
+      await apiClient.logout();
+    } catch {
+      // ignore
+    }
+    navigate('/login', { replace: true });
+  }, [navigate]);
 
-  const tabLabels: Record<string, string> = { terminal: 'Chat' };
+  // Global '/' shortcut — the NavBarSidekick handles its own cmd palette UI,
+  // but we wire the keyboard shortcut at the toolbar level for page-wide reach
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === '/' && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement)) {
+        // Let the NavBarSidekick's own button handle it via a simulated click
+        const btn = document.querySelector('[data-cmd-trigger]') as HTMLButtonElement | null;
+        if (btn) { e.preventDefault(); btn.click(); }
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
 
   return (
-    <div className="toolbar">
-      <div className="tab-bar">
-        <ProjectSelector
-          projects={projects}
-          selectedProjectId={selectedProjectId}
-          onSelect={onProjectSelect}
-          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" />
-
-      <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 className="border-b border-edge">
+      <NavBarSidekick
+        items={items}
+        activeId={activeTab}
+        brand={
+          <ProjectSelector
+            projects={projects}
+            selectedProjectId={selectedProjectId}
+            onSelect={selectProject}
+            onCreate={createProject}
+            onRename={renameProject}
+            onArchive={archiveProject}
+            onOpenGitModal={openGitModal}
+          />
+        }
+        center={
+          <div className="flex items-center justify-end gap-2 text-[11px] text-content-muted">
+            <span className="hidden lg:inline uppercase tracking-wider font-medium">Completeness</span>
+            <div className="w-20 h-1.5 rounded-full bg-completeness-bg overflow-hidden">
+              <div
+                className="h-full rounded-full bg-completeness-fill transition-all duration-300"
+                style={{ width: `${completeness}%` }}
+              />
+            </div>
+            <span className="font-mono text-[11px] text-content-secondary w-8 text-right">{completeness}%</span>
+          </div>
+        }
+        actions={
+          <div className="flex items-center gap-1.5">
+            <button onClick={() => onFit?.()} title="Fit graph to viewport" className={iconBtnClass()}>
+              <Maximize size={14} strokeWidth={2} />
+            </button>
+            <button onClick={onSettingsToggle} title="Graph settings" className={iconBtnClass(settingsOpen)}>
+              <Settings size={14} strokeWidth={2} />
+            </button>
+            <div className="h-5 w-px bg-edge mx-1" />
+          </div>
+        }
+        trailing={
+          <div className="flex items-center gap-1.5">
+            <button onClick={toggleTheme} title="Toggle theme" className={iconBtnClass()}>
+              {theme === 'dark' ? <Sun size={14} strokeWidth={2} /> : <Moon size={14} strokeWidth={2} />}
+            </button>
+            <button
+              onClick={handleLogout}
+              title="Logout"
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-[11px] font-bold text-surface cursor-pointer outline-none hover:opacity-90 transition-opacity"
+            >
+              {user?.email?.slice(0, 2).toUpperCase() || 'U'}
+            </button>
+          </div>
+        }
+      />
     </div>
   );
 }

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}`}