@crmy/web 0.5.1

package/src/pages/hitl/HITL.tsx

@@ -0,0 +1,101 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import { ShieldCheck } from 'lucide-react';
+import { Card, CardContent } from '../../components/ui/card';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { useHITLRequests, useResolveHITL } from '../../api/hooks';
+
+function timeAgo(date: string) {
+  const diff = Date.now() - new Date(date).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+export function HITLPage() {
+  const { data, isLoading } = useHITLRequests();
+  const resolve = useResolveHITL();
+  const [notes, setNotes] = useState<Record<string, string>>({});
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const requests = (data as any)?.data ?? [];
+
+  return (
+    <div className="space-y-4">
+      <h1 className="font-display text-2xl font-bold">HITL Queue</h1>
+      {isLoading ? (
+        <p className="text-muted-foreground">Loading...</p>
+      ) : requests.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+            <ShieldCheck className="h-12 w-12 text-emerald-500 mb-3" />
+            <p className="text-lg font-medium">No pending approvals</p>
+            <p className="text-sm text-muted-foreground">Your agents are running autonomously</p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {requests.map((r: any) => (
+            <Card key={r.id}>
+              <CardContent className="p-4 space-y-3">
+                <div className="flex items-center gap-3">
+                  <Badge variant="outline">{r.action_type}</Badge>
+                  <span className="text-sm text-muted-foreground">Submitted by: {r.agent_id ?? r.created_by ?? 'agent'}</span>
+                  <span className="text-sm text-muted-foreground">{timeAgo(r.created_at)}</span>
+                  {r.expires_at && (
+                    <span className="ml-auto text-xs text-muted-foreground">
+                      Expires: {new Date(r.expires_at).toLocaleString()}
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm">{r.action_summary}</p>
+                <div>
+                  <button
+                    className="text-xs text-primary hover:underline"
+                    onClick={() => setExpanded({ ...expanded, [r.id]: !expanded[r.id] })}
+                  >
+                    {expanded[r.id] ? 'Hide payload' : 'Show payload'}
+                  </button>
+                  {expanded[r.id] && (
+                    <pre className="mt-2 max-h-48 overflow-auto rounded bg-muted p-3 text-xs">
+                      {JSON.stringify(r.action_payload, null, 2)}
+                    </pre>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Input
+                    placeholder="Note (optional)"
+                    value={notes[r.id] ?? ''}
+                    onChange={(e) => setNotes({ ...notes, [r.id]: e.target.value })}
+                    className="flex-1"
+                  />
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => resolve.mutate({ id: r.id, status: 'rejected', note: notes[r.id] })}
+                    disabled={resolve.isPending}
+                  >
+                    Reject
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={() => resolve.mutate({ id: r.id, status: 'approved', note: notes[r.id] })}
+                    disabled={resolve.isPending}
+                  >
+                    Approve
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/store/appStore.ts

@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type DrawerType = 'contact' | 'opportunity' | 'use-case' | 'account' | 'assignment' | null;
+
+export interface AIContextEntity {
+  type: 'contact' | 'opportunity' | 'use-case' | 'account';
+  id: string;
+  name: string;
+  detail?: string;
+}
+type QuickAddType = 'contact' | 'opportunity' | 'use-case' | 'activity' | 'account' | 'assignment' | null;
+
+interface AppState {
+  darkVariant: 'warm' | 'charcoal';
+  setDarkVariant: (variant: 'warm' | 'charcoal') => void;
+  sidebarExpanded: boolean;
+  setSidebarExpanded: (expanded: boolean) => void;
+  toggleSidebar: () => void;
+
+  drawerOpen: boolean;
+  drawerType: DrawerType;
+  drawerEntityId: string | null;
+  openDrawer: (type: DrawerType, entityId?: string) => void;
+  closeDrawer: () => void;
+
+  commandPaletteOpen: boolean;
+  setCommandPaletteOpen: (open: boolean) => void;
+
+  shortcutsOpen: boolean;
+  setShortcutsOpen: (open: boolean) => void;
+
+  zenMode: boolean;
+  toggleZenMode: () => void;
+
+  theme: 'dark' | 'light' | 'system';
+  setTheme: (theme: 'dark' | 'light' | 'system') => void;
+
+  quickAddOpen: boolean;
+  quickAddType: QuickAddType;
+  openQuickAdd: (type: QuickAddType) => void;
+  closeQuickAdd: () => void;
+
+  aiContext: AIContextEntity | null;
+  openAIWithContext: (context: AIContextEntity) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      sidebarExpanded: false,
+      setSidebarExpanded: (expanded) => set({ sidebarExpanded: expanded }),
+      toggleSidebar: () => set((s) => ({ sidebarExpanded: !s.sidebarExpanded })),
+
+      drawerOpen: false,
+      drawerType: null,
+      drawerEntityId: null,
+      openDrawer: (type, entityId) => set({ drawerOpen: true, drawerType: type, drawerEntityId: entityId ?? null }),
+      closeDrawer: () => set({ drawerOpen: false, drawerType: null, drawerEntityId: null }),
+
+      commandPaletteOpen: false,
+      setCommandPaletteOpen: (open) => set({ commandPaletteOpen: open }),
+
+      shortcutsOpen: false,
+      setShortcutsOpen: (open) => set({ shortcutsOpen: open }),
+
+      zenMode: false,
+      toggleZenMode: () => set((s) => ({ zenMode: !s.zenMode })),
+
+      theme: 'dark',
+      setTheme: (theme) => {
+        const root = document.documentElement;
+        root.classList.remove('dark', 'light');
+        if (theme === 'system') {
+          const sys = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          root.classList.add(sys);
+        } else {
+          root.classList.add(theme);
+        }
+        set({ theme });
+      },
+
+      quickAddOpen: false,
+      quickAddType: null,
+      openQuickAdd: (type) => set({ quickAddOpen: true, quickAddType: type }),
+      closeQuickAdd: () => set({ quickAddOpen: false, quickAddType: null }),
+
+      aiContext: null,
+      openAIWithContext: (context) => set({ aiContext: context }),
+
+      darkVariant: 'warm',
+      setDarkVariant: (variant) => set({ darkVariant: variant }),
+    }),
+    {
+      name: 'crmy-app-store',
+      partialize: (state) => ({
+        sidebarExpanded: state.sidebarExpanded,
+        theme: state.theme,
+        darkVariant: state.darkVariant,
+      }),
+    }
+  )
+);

package/src/vite-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

package/tailwind.config.js

@@ -0,0 +1,121 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: { "2xl": "1400px" },
+    },
+    extend: {
+      fontFamily: {
+        display: ["Plus Jakarta Sans", "sans-serif"],
+        brand: ["Syne", "sans-serif"],
+        body: ["DM Sans", "sans-serif"],
+        mono: ["Space Mono", "monospace"],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
+        surface: {
+          DEFAULT: "hsl(var(--surface))",
+          raised: "hsl(var(--surface-raised))",
+          sunken: "hsl(var(--surface-sunken))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+        xl: "1rem",
+        "2xl": "1.25rem",
+        "3xl": "1.5rem",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "slide-in-right": {
+          from: { transform: "translateX(100%)" },
+          to: { transform: "translateX(0)" },
+        },
+        "slide-out-right": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(100%)" },
+        },
+        "slide-up": {
+          from: { transform: "translateY(100%)" },
+          to: { transform: "translateY(0)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "slide-in-right": "slide-in-right 0.2s ease-out",
+        "slide-out-right": "slide-out-right 0.2s ease-out",
+        "slide-up": "slide-up 0.3s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+// Copyright 2026 CRMy Contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/app/',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3001',
+      '/auth': 'http://localhost:3001',
+      '/health': 'http://localhost:3001',
+    },
+  },
+  build: {
+    outDir: 'dist',
+  },
+});