@crmy/web 0.5.1

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,95 @@
+import { useEffect, useCallback } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAppStore } from '@/store/appStore';
+
+export function useKeyboardShortcuts() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setCommandPaletteOpen, openDrawer, setShortcutsOpen, toggleZenMode, openQuickAdd } = useAppStore();
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    const target = e.target as HTMLElement;
+    const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+    // Cmd+K — command palette
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      setCommandPaletteOpen(true);
+      return;
+    }
+
+    // Cmd+J — AI agent
+    if ((e.metaKey || e.ctrlKey) && e.key === 'j') {
+      e.preventDefault();
+      navigate('/agent');
+      return;
+    }
+
+    // Cmd+Shift+Z — zen mode
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'Z') {
+      e.preventDefault();
+      toggleZenMode();
+      return;
+    }
+
+    // Escape
+    if (e.key === 'Escape') {
+      // On /agent, go back to previous page
+      if (location.pathname === '/agent') {
+        e.preventDefault();
+        navigate(-1);
+        return;
+      }
+      useAppStore.getState().closeDrawer();
+      useAppStore.getState().closeQuickAdd();
+      setCommandPaletteOpen(false);
+      setShortcutsOpen(false);
+      return;
+    }
+
+    if (isInput) return;
+
+    // ? — shortcuts
+    if (e.key === '?') {
+      e.preventDefault();
+      setShortcutsOpen(true);
+      return;
+    }
+
+    // N — new contact (on contacts page)
+    if (e.key === 'n' || e.key === 'N') {
+      if (location.pathname === '/contacts') {
+        e.preventDefault();
+        openQuickAdd('contact');
+        return;
+      }
+    }
+
+    // D — new opportunity (on opportunities page, not with meta key)
+    if (e.key === 'd' && !e.metaKey && !e.ctrlKey) {
+      if (location.pathname === '/opportunities') {
+        e.preventDefault();
+        openQuickAdd('opportunity');
+        return;
+      }
+    }
+
+    // G then navigation
+    if (e.key === 'g') {
+      const handler = (e2: KeyboardEvent) => {
+        window.removeEventListener('keydown', handler);
+        if (e2.key === 'h') navigate('/');
+        else if (e2.key === 'c') navigate('/contacts');
+        else if (e2.key === 'd') navigate('/opportunities');
+      };
+      window.addEventListener('keydown', handler);
+      setTimeout(() => window.removeEventListener('keydown', handler), 1000);
+      return;
+    }
+  }, [navigate, location.pathname, setCommandPaletteOpen, openDrawer, setShortcutsOpen, toggleZenMode, openQuickAdd]);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useAppStore } from '@/store/appStore';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  const { darkVariant } = useAppStore();
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem('theme') as Theme | null;
+    if (stored) return stored;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle('dark', theme === 'dark');
+    root.classList.toggle('charcoal', darkVariant === 'charcoal');
+    localStorage.setItem('theme', theme);
+  }, [theme, darkVariant]);
+
+  const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
+
+  return { theme, setTheme, toggle };
+}

package/src/index.css

@@ -0,0 +1,245 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 30 25% 95%;
+    --foreground: 12 100% 4%;
+    --card: 30 30% 100%;
+    --card-foreground: 12 100% 4%;
+    --popover: 30 30% 100%;
+    --popover-foreground: 12 100% 4%;
+    --primary: 24 95% 53%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 45 97% 65%;
+    --secondary-foreground: 12 100% 4%;
+    --accent: 199 90% 60%;
+    --accent-foreground: 0 0% 100%;
+    --muted: 30 20% 90%;
+    --muted-foreground: 20 10% 44%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 30 15% 86%;
+    --input: 30 15% 88%;
+    --ring: 24 95% 53%;
+    --radius: 0.75rem;
+
+    --success: 152 55% 42%;
+    --success-foreground: 0 0% 100%;
+    --warning: 45 97% 65%;
+    --warning-foreground: 12 100% 4%;
+    --info: 199 90% 60%;
+    --info-foreground: 0 0% 100%;
+
+    --surface: 30 25% 97%;
+    --surface-raised: 30 30% 100%;
+    --surface-sunken: 30 20% 91%;
+
+    --sidebar-background: 15 25% 10%;
+    --sidebar-foreground: 20 10% 55%;
+    --sidebar-primary: 24 95% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 15 20% 15%;
+    --sidebar-accent-foreground: 30 20% 92%;
+    --sidebar-border: 15 20% 15%;
+    --sidebar-ring: 24 95% 53%;
+  }
+
+  /* Charcoal variant in light mode — sidebar uses cool blue-gray, content area uses cool light gray */
+  .charcoal:not(.dark) {
+    --background: 220 20% 94%;
+    --card: 0 0% 100%;
+    --popover: 0 0% 100%;
+    --muted: 220 16% 88%;
+    --border: 220 14% 84%;
+    --input: 220 14% 88%;
+
+    --surface: 220 18% 96%;
+    --surface-raised: 0 0% 100%;
+    --surface-sunken: 220 18% 90%;
+
+    --sidebar-background: 220 18% 10%;
+    --sidebar-foreground: 220 8% 55%;
+    --sidebar-primary: 24 95% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 220 12% 16%;
+    --sidebar-accent-foreground: 36 15% 92%;
+    --sidebar-border: 220 12% 16%;
+    --sidebar-ring: 24 95% 53%;
+  }
+
+  .dark {
+    --background: 15 25% 7%;
+    --foreground: 25 100% 98%;
+    --card: 15 22% 10%;
+    --card-foreground: 25 100% 98%;
+    --popover: 15 22% 12%;
+    --popover-foreground: 25 100% 98%;
+    --primary: 24 95% 53%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 45 97% 65%;
+    --secondary-foreground: 15 25% 7%;
+    --accent: 199 90% 60%;
+    --accent-foreground: 0 0% 100%;
+    --muted: 15 20% 15%;
+    --muted-foreground: 20 15% 55%;
+    --destructive: 0 90% 65%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 15 20% 15%;
+    --input: 15 20% 15%;
+    --ring: 24 95% 53%;
+
+    --success: 152 50% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 45 90% 60%;
+    --warning-foreground: 15 25% 7%;
+    --info: 199 85% 60%;
+    --info-foreground: 0 0% 100%;
+
+    --surface: 15 22% 8%;
+    --surface-raised: 15 22% 12%;
+    --surface-sunken: 15 25% 5%;
+
+    --sidebar-background: 15 25% 5%;
+    --sidebar-foreground: 20 15% 50%;
+    --sidebar-primary: 24 95% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 15 20% 12%;
+    --sidebar-accent-foreground: 25 100% 95%;
+    --sidebar-border: 15 20% 12%;
+    --sidebar-ring: 24 95% 53%;
+  }
+
+  .dark.charcoal {
+    --background: 220 16% 8%;
+    --foreground: 36 15% 92%;
+    --card: 220 14% 11%;
+    --card-foreground: 36 15% 92%;
+    --popover: 220 14% 13%;
+    --popover-foreground: 36 15% 92%;
+    --primary: 24 95% 53%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 45 97% 65%;
+    --secondary-foreground: 220 16% 8%;
+    --accent: 199 90% 60%;
+    --accent-foreground: 0 0% 100%;
+    --muted: 220 10% 14%;
+    --muted-foreground: 220 8% 50%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 36 15% 95%;
+    --border: 220 10% 16%;
+    --input: 220 10% 18%;
+    --ring: 24 95% 53%;
+
+    --success: 152 50% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 45 90% 60%;
+    --warning-foreground: 220 16% 8%;
+    --info: 199 85% 60%;
+    --info-foreground: 0 0% 100%;
+
+    --surface: 220 14% 9%;
+    --surface-raised: 220 14% 13%;
+    --surface-sunken: 220 16% 5%;
+
+    --sidebar-background: 220 18% 5%;
+    --sidebar-foreground: 220 8% 50%;
+    --sidebar-primary: 24 95% 53%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 220 12% 12%;
+    --sidebar-accent-foreground: 36 15% 92%;
+    --sidebar-border: 220 12% 12%;
+    --sidebar-ring: 24 95% 53%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground font-body antialiased;
+  }
+}
+
+@layer utilities {
+  .font-display {
+    font-family: 'Plus Jakarta Sans', sans-serif;
+  }
+  .font-body {
+    font-family: 'DM Sans', sans-serif;
+  }
+  .font-mono {
+    font-family: 'Space Mono', monospace;
+  }
+  .safe-area-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.2);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* Pulsing dot animation */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.3); }
+}
+.animate-pulse-dot {
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+/* FAB gradient animation */
+@keyframes fab-glow {
+  0%, 100% { box-shadow: 0 0 20px hsl(24 90% 55% / 0.4), 0 0 60px hsl(24 90% 55% / 0.1); }
+  50% { box-shadow: 0 0 30px hsl(210 80% 55% / 0.4), 0 0 80px hsl(210 80% 55% / 0.1); }
+}
+.animate-fab-glow {
+  animation: fab-glow 3s ease-in-out infinite;
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, hsl(24 95% 53%), hsl(45 97% 65%));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.dark .gradient-text {
+  background: linear-gradient(135deg, hsl(24 95% 53%), hsl(45 97% 65%));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Hide scrollbar but keep scroll functionality */
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Active press state */
+.press-scale {
+  transition: transform 0.1s ease;
+}
+.press-scale:active {
+  transform: scale(0.97);
+}

package/src/lib/entityColors.ts

@@ -0,0 +1,18 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Canonical entity color tokens — single source of truth used by the
+ * Sidebar active indicator, Command Palette icons, and any other place
+ * entity types are colour-coded throughout the app.
+ */
+export const ENTITY_COLORS = {
+  dashboard:     { text: 'text-[#14b8a6]',   bg: 'bg-[#14b8a6]/15',  bar: 'bg-[#14b8a6]' },
+  contacts:      { text: 'text-primary',      bg: 'bg-primary/15',    bar: 'bg-primary' },
+  accounts:      { text: 'text-[#8b5cf6]',   bg: 'bg-[#8b5cf6]/15', bar: 'bg-[#8b5cf6]' },
+  opportunities: { text: 'text-accent',       bg: 'bg-accent/15',     bar: 'bg-accent' },
+  useCases:      { text: 'text-success',      bg: 'bg-success/15',    bar: 'bg-success' },
+  activities:    { text: 'text-warning',      bg: 'bg-warning/15',    bar: 'bg-warning' },
+  assignments:   { text: 'text-destructive',  bg: 'bg-destructive/15',bar: 'bg-destructive' },
+  inbox:         { text: 'text-destructive',  bg: 'bg-destructive/15',bar: 'bg-destructive' },
+} as const;

package/src/lib/stageConfig.ts

@@ -0,0 +1,32 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export const stageConfig: Record<string, { label: string; color: string }> = {
+  prospecting: { label: 'Prospecting', color: '#94a3b8' },
+  qualification: { label: 'Qualification', color: '#60a5fa' },
+  proposal: { label: 'Proposal', color: '#a78bfa' },
+  negotiation: { label: 'Negotiation', color: '#fb923c' },
+  closed_won: { label: 'Won', color: '#4ade80' },
+  closed_lost: { label: 'Lost', color: '#f87171' },
+  // Contact stages
+  new: { label: 'New', color: '#94a3b8' },
+  contacted: { label: 'Contacted', color: '#60a5fa' },
+  qualified: { label: 'Qualified', color: '#a78bfa' },
+  active: { label: 'Active', color: '#fb923c' },
+  inactive: { label: 'Inactive', color: '#f87171' },
+};
+
+export const useCaseStageConfig: Record<string, { label: string; color: string }> = {
+  discovery: { label: 'Discovery', color: '#94a3b8' },
+  poc: { label: 'PoC', color: '#60a5fa' },
+  production: { label: 'Production', color: '#4ade80' },
+  scaling: { label: 'Scaling', color: '#fb923c' },
+  sunset: { label: 'Sunset', color: '#f87171' },
+};
+
+export const accountStageConfig: Record<string, { label: string; color: string }> = {
+  prospect: { label: 'Prospect', color: '#94a3b8' },
+  customer: { label: 'Customer', color: '#4ade80' },
+  partner: { label: 'Partner', color: '#a78bfa' },
+  churned: { label: 'Churned', color: '#f87171' },
+};

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,25 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { App } from './App';
+import './index.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      retry: 1,
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>,
+);

package/src/pages/Accounts.tsx

@@ -0,0 +1,205 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState, useMemo, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ContactAvatar } from '@/components/crm/ContactAvatar';
+import { TopBar } from '@/components/layout/TopBar';
+import { useAccounts } from '@/api/hooks';
+import { useAppStore } from '@/store/appStore';
+import { useAgentSettings } from '@/contexts/AgentSettingsContext';
+import { ListToolbar, type FilterConfig, type SortOption } from '@/components/crm/ListToolbar';
+import { motion } from 'framer-motion';
+import { LayoutGrid, List, ChevronUp, ChevronDown, Sparkles, Globe, DollarSign, Heart } from 'lucide-react';
+import { PaginationBar } from '@/components/crm/PaginationBar';
+import { useIsMobile } from '@/hooks/use-mobile';
+
+type ViewMode = 'table' | 'cards';
+
+const filterConfigs: FilterConfig[] = [];
+
+const sortOptions: SortOption[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'annual_revenue', label: 'Revenue' },
+  { key: 'health_score', label: 'Health' },
+  { key: 'employee_count', label: 'Employees' },
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Account = any;
+
+function HealthBadge({ score }: { score: number }) {
+  const color = score >= 80 ? 'bg-green-500/15 text-green-400' : score >= 50 ? 'bg-yellow-500/15 text-yellow-400' : 'bg-red-500/15 text-red-400';
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold ${color}`}>
+      <Heart className="w-3 h-3" />{score}
+    </span>
+  );
+}
+
+function formatRevenue(revenue: number) {
+  if (revenue >= 1_000_000) return `$${(revenue / 1_000_000).toFixed(1)}M`;
+  if (revenue >= 1_000) return `$${(revenue / 1_000).toFixed(0)}K`;
+  return `$${revenue}`;
+}
+
+export default function Accounts() {
+  const isMobile = useIsMobile();
+  const [view, setView] = useState<ViewMode>('table');
+  const effectiveView = isMobile ? 'cards' : view;
+  const { openDrawer, openQuickAdd, openAIWithContext } = useAppStore();
+  const { enabled: agentEnabled } = useAgentSettings();
+  const navigate = useNavigate();
+  const [search, setSearch] = useState('');
+  const [activeFilters, setActiveFilters] = useState<Record<string, string[]>>({});
+  const [sort, setSort] = useState<{ key: string; dir: 'asc' | 'desc' } | null>(null);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { data, isLoading } = useAccounts({ q: search || undefined, limit: 200 }) as any;
+  const allAccounts: Account[] = data?.data ?? [];
+
+  const handleFilterChange = (key: string, values: string[]) => {
+    setActiveFilters(prev => { const next = { ...prev }; if (values.length === 0) delete next[key]; else next[key] = values; return next; });
+  };
+  const handleSortChange = (key: string) => {
+    setSort(prev => prev?.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'asc' });
+  };
+
+  const filtered = useMemo(() => {
+    let result = [...allAccounts];
+    if (activeFilters.industry?.length) result = result.filter(a => activeFilters.industry.includes(a.industry as string));
+    if (sort) {
+      result.sort((a, b) => {
+        const aVal = (a[sort.key] ?? '') as string | number;
+        const bVal = (b[sort.key] ?? '') as string | number;
+        if (typeof aVal === 'number' && typeof bVal === 'number') return sort.dir === 'asc' ? aVal - bVal : bVal - aVal;
+        return sort.dir === 'asc' ? String(aVal).localeCompare(String(bVal)) : String(bVal).localeCompare(String(aVal));
+      });
+    }
+    return result;
+  }, [allAccounts, activeFilters, sort]);
+
+  useEffect(() => { setPage(1); }, [search, activeFilters, sort]);
+  const paginated = filtered.slice((page - 1) * pageSize, page * pageSize);
+
+  const SortHeader = ({ label, sortKey }: { label: string; sortKey: string }) => (
+    <th onClick={() => handleSortChange(sortKey)}
+      className="text-left px-4 py-3 text-xs font-display font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors select-none">
+      <span className="inline-flex items-center gap-1">
+        {label}
+        {sort?.key === sortKey ? (sort.dir === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />) : null}
+      </span>
+    </th>
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <TopBar title="Accounts">
+        <div className="hidden md:flex items-center gap-1 bg-muted rounded-xl p-0.5">
+          <button onClick={() => setView('table')} className={`p-1.5 rounded-lg text-sm transition-all ${view === 'table' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground'}`}>
+            <List className="w-4 h-4" />
+          </button>
+          <button onClick={() => setView('cards')} className={`p-1.5 rounded-lg text-sm transition-all ${view === 'cards' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground'}`}>
+            <LayoutGrid className="w-4 h-4" />
+          </button>
+        </div>
+      </TopBar>
+
+      <ListToolbar
+        searchValue={search} onSearchChange={setSearch} searchPlaceholder="Search accounts..."
+        filters={filterConfigs} activeFilters={activeFilters} onFilterChange={handleFilterChange}
+        onClearFilters={() => setActiveFilters({})} sortOptions={sortOptions} currentSort={sort}
+        onSortChange={handleSortChange} onAdd={() => openQuickAdd('account')} addLabel="New Account" entityType="accounts"
+      />
+
+      <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-24 md:pb-6">
+        {isLoading ? (
+          <div className="space-y-2 pt-2">
+            {[...Array(5)].map((_, i) => <div key={i} className="h-14 bg-muted/50 rounded-xl animate-pulse" />)}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <p className="text-sm">No accounts found.</p>
+            <button onClick={() => { setSearch(''); setActiveFilters({}); }} className="mt-2 text-xs text-primary font-semibold hover:underline">Clear all filters</button>
+          </div>
+        ) : effectiveView === 'table' ? (
+          <div className="bg-card border border-border rounded-2xl overflow-hidden shadow-sm">
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border bg-surface-sunken/50">
+                    <SortHeader label="Name" sortKey="name" />
+                    <th className="text-left px-4 py-3 text-xs font-display font-semibold text-muted-foreground">Industry</th>
+                    <SortHeader label="Revenue" sortKey="annual_revenue" />
+                    <SortHeader label="Employees" sortKey="employee_count" />
+                    <SortHeader label="Health" sortKey="health_score" />
+                    {agentEnabled && <th className="px-2 py-3 w-8"></th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {paginated.map((a, i) => (
+                    <tr key={a.id as string} onClick={() => openDrawer('account', a.id as string)}
+                      className={`border-b border-border last:border-0 hover:bg-primary/5 cursor-pointer group transition-colors ${i % 2 === 1 ? 'bg-surface-sunken/30' : ''}`}>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-3">
+                          <ContactAvatar name={a.name as string} className="w-8 h-8 text-xs" />
+                          <div>
+                            <span className="font-semibold text-foreground">{a.name as string}</span>
+                            {a.website && <p className="text-xs text-muted-foreground">{a.website as string}</p>}
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-muted-foreground">{(a.industry as string) || '—'}</td>
+                      <td className="px-4 py-3 text-foreground font-medium">{a.annual_revenue ? formatRevenue(a.annual_revenue as number) : '—'}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{(a.employee_count as number) || '—'}</td>
+                      <td className="px-4 py-3">{a.health_score ? <HealthBadge score={a.health_score as number} /> : '—'}</td>
+                      {agentEnabled && (
+                        <td className="px-2 py-3">
+                          <button onClick={(e) => { e.stopPropagation(); openAIWithContext({ type: 'account', id: a.id as string, name: a.name as string, detail: a.industry as string }); navigate('/agent'); }}
+                            className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-accent/10 transition-all">
+                            <Sparkles className="w-3.5 h-3.5 text-accent" />
+                          </button>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="px-4">
+              <PaginationBar page={page} pageSize={pageSize} total={filtered.length} onPageChange={setPage} onPageSizeChange={setPageSize} />
+            </div>
+          </div>
+        ) : (
+          <>
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {paginated.map((a, i) => (
+              <motion.div key={a.id as string} initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.02 }}
+                onClick={() => openDrawer('account', a.id as string)}
+                className="bg-card border border-border rounded-2xl p-4 cursor-pointer hover:shadow-lg hover:border-primary/20 transition-all press-scale group relative">
+                <div className="flex items-center gap-3 mb-3">
+                  <ContactAvatar name={a.name as string} className="w-11 h-11 rounded-2xl text-sm" />
+                  <div className="min-w-0">
+                    <p className="font-display font-bold text-foreground truncate">{a.name as string}</p>
+                    <p className="text-xs text-muted-foreground">{(a.industry as string) || '—'}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 mb-3">
+                  {a.health_score && <HealthBadge score={a.health_score as number} />}
+                </div>
+                <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                  {a.annual_revenue && <span className="inline-flex items-center gap-1"><DollarSign className="w-3 h-3" />{formatRevenue(a.annual_revenue as number)}</span>}
+                  {a.website && <span className="inline-flex items-center gap-1"><Globe className="w-3 h-3" />{a.website as string}</span>}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+          <PaginationBar page={page} pageSize={pageSize} total={filtered.length} onPageChange={setPage} onPageSizeChange={setPageSize} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}