shraga 0.0.3 → 0.1.1

package/src/client/components/ui/dialog.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 flex flex-col w-[calc(100vw-2rem)] max-w-lg max-h-[85dvh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('shrink-0 flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />;
+}
+
+// Scrolling region between a fixed header and footer. Bleeds to the dialog edges
+// (so the scrollbar sits at the edge) while keeping content padding.
+function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div data-dialog-body className={cn('flex-1 min-h-0 overflow-y-auto -mx-4 px-4 sm:-mx-6 sm:px-6', className)} {...props} />;
+}
+
+function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        // Fixed section below the scroll area — full-width divider, CTA always visible.
+        'shrink-0 -mx-4 px-4 pt-3 border-t sm:-mx-6 sm:px-6',
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogClose };

package/src/client/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/client/components/ui/scroll-area.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/client/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/client/globals.css

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * { @apply border-border; }
+  body { @apply bg-background text-foreground font-sans antialiased; }
+  html, body, #root { height: 100%; }
+}

package/src/client/hooks/useAgentSocket.ts

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from 'react';
+import { AgentSocket, type ServerEvent } from '@/lib/ws';
+
+export type ConnectionStatus =
+  | 'disconnected'
+  | 'reconnected'
+  | 'update_available'
+  | 'server_restarting'
+  | null;
+
+/**
+ * Owns the single shared {@link AgentSocket} connection for the whole app, plus connection-level
+ * state (status, auth error, server-build update detection). Every socket event is forwarded to
+ * `onEvent` for app-global routing (schedules, unread, sidebar, busy set). Per-conversation event
+ * handling lives in `useConversation`, which subscribes to the same socket independently.
+ */
+export function useAgentSocket(
+  token: string | null,
+  getToken: () => Promise<string | null>,
+  onEvent?: (event: ServerEvent) => void,
+): { socket: AgentSocket | null; connectionStatus: ConnectionStatus; authError: string | null } {
+  const [socket, setSocket] = useState<AgentSocket | null>(null);
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>(null);
+  const [authError, setAuthError] = useState<string | null>(null);
+  const serverBuildIdRef = useRef<string | undefined>(undefined);
+  const getTokenRef = useRef(getToken);
+  getTokenRef.current = getToken;
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+
+  useEffect(() => {
+    if (!token) return;
+    let reconnectTimer: ReturnType<typeof setTimeout>;
+    const s = new AgentSocket();
+    setSocket(s);
+    // Provider returns a fresh token on every (re)connect so expired Firebase tokens auto-refresh.
+    s.connect(() => getTokenRef.current());
+
+    const off = s.on((event: ServerEvent) => {
+      switch (event.type) {
+        case 'auth_ok':
+          if (event.buildId) {
+            if (serverBuildIdRef.current && serverBuildIdRef.current !== event.buildId) {
+              setConnectionStatus('update_available');
+            } else {
+              serverBuildIdRef.current = event.buildId;
+            }
+          }
+          break;
+        case 'auth_error':
+          if (event.message?.toLowerCase().includes('whitelist')) setAuthError(event.message);
+          break;
+        case 'server_restarting':
+          setConnectionStatus('server_restarting');
+          break;
+        case 'disconnected':
+          setConnectionStatus((prev) => (prev === 'server_restarting' ? prev : 'disconnected'));
+          break;
+        case 'reconnected':
+          setConnectionStatus((prev) => (prev === 'update_available' ? prev : 'reconnected'));
+          reconnectTimer = setTimeout(
+            () => setConnectionStatus((prev) => (prev === 'update_available' ? prev : null)),
+            2000,
+          );
+          break;
+      }
+      onEventRef.current?.(event);
+    });
+
+    return () => {
+      off();
+      clearTimeout(reconnectTimer);
+      s.disconnect();
+      setSocket(null);
+    };
+  }, [token]);
+
+  return { socket, connectionStatus, authError };
+}

package/src/client/hooks/useArtifacts.ts

@@ -0,0 +1,89 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { ServerEvent } from '@/lib/ws';
+
+export interface ArtifactMeta {
+  id: string;
+  sessionId: string;
+  title: string;
+  dimensions: [number, number];
+  version: number;
+}
+
+interface ArtifactsState {
+  artifacts: ArtifactMeta[];
+  selectedId: string | null;
+  panelOpen: boolean;
+}
+
+const PANEL_KEY = 'shraga:artifactPanel';
+const SELECTED_KEY = 'shraga:artifactSelected';
+const isMobile = () => window.innerWidth < 640; // matches Tailwind sm: breakpoint
+
+export function useArtifacts(sessionId: string | undefined, getToken?: () => Promise<string | null>, token?: string | null) {
+  const [state, setState] = useState<ArtifactsState>({
+    artifacts: [],
+    selectedId: null,
+    panelOpen: isMobile() ? false : localStorage.getItem(PANEL_KEY) === 'true',
+  });
+
+  const reset = useCallback(() => {
+    setState(s => ({ ...s, artifacts: [], selectedId: null }));
+    localStorage.removeItem(SELECTED_KEY);
+  }, []);
+
+  const handleArtifactEvent = useCallback((event: ServerEvent) => {
+    if (event.type !== 'artifact') return;
+    const e = event as any;
+    setState(s => {
+      const existing = s.artifacts.findIndex(a => a.id === e.id);
+      const meta: ArtifactMeta = { id: e.id, sessionId: e.sessionId, title: e.title, dimensions: e.dimensions, version: e.version };
+      const artifacts = existing >= 0
+        ? s.artifacts.map((a, i) => i === existing ? meta : a)
+        : [...s.artifacts, meta];
+      localStorage.setItem(SELECTED_KEY, e.id);
+      return { artifacts, selectedId: e.id, panelOpen: true };
+    });
+  }, []);
+
+  const selectArtifact = useCallback((id: string) => {
+    setState(s => ({ ...s, selectedId: id, panelOpen: true }));
+    localStorage.setItem(SELECTED_KEY, id);
+  }, []);
+
+  const togglePanel = useCallback(() => {
+    setState(s => {
+      const next = !s.panelOpen;
+      localStorage.setItem(PANEL_KEY, String(next));
+      return { ...s, panelOpen: next };
+    });
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setState(s => ({ ...s, panelOpen: false }));
+    localStorage.setItem(PANEL_KEY, 'false');
+  }, []);
+
+  // Load artifacts when session changes
+  useEffect(() => {
+    if (!sessionId) { reset(); return; }
+    (async () => {
+      const token = await getToken?.();
+      if (!token) return;
+      const res = await fetch(`/api/artifacts/${sessionId}`, { headers: { Authorization: `Bearer ${token}` } });
+      if (!res.ok) return;
+      const artifacts: ArtifactMeta[] = await res.json();
+      const savedId = localStorage.getItem(SELECTED_KEY);
+      const restoredId = artifacts.find(a => a.id === savedId)?.id ?? artifacts[artifacts.length - 1]?.id ?? null;
+      setState(s => ({ ...s, artifacts, selectedId: restoredId }));
+    })().catch(() => {});
+  }, [sessionId, reset, getToken, token]);
+
+  return {
+    ...state,
+    handleArtifactEvent,
+    selectArtifact,
+    togglePanel,
+    closePanel,
+    reset,
+  };
+}

package/src/client/hooks/useAuth.ts

@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { onAuth, signOutUser, hasFirebase } from '@/lib/firebase';
+
+export interface AuthUser {
+  uid: string;
+  email: string | null;
+}
+
+export interface AuthState {
+  user: AuthUser | null;
+  token: string | null;
+  getToken: () => Promise<string | null>;
+  loading: boolean;
+  /** Active auth provider (from GET /api/auth/mode). */
+  mode: 'local' | 'firebase' | null;
+  /** Local mode, zero users yet → show the create-first-user form. */
+  needsSetup: boolean;
+  /** Local login/register. Resolves to an error message, or null on success. */
+  loginLocal: (email: string, password: string) => Promise<string | null>;
+  registerLocal: (email: string, password: string) => Promise<string | null>;
+  logout: () => Promise<void>;
+}
+
+const LS_TOKEN = 'shraga_token';
+
+function decodeLocalEmail(token: string): string | null {
+  try {
+    const payload = atob(token.slice(4).split('.')[1].replace(/-/g, '+').replace(/_/g, '/'));
+    return payload.slice(0, payload.lastIndexOf(':')) || null;
+  } catch {
+    return null;
+  }
+}
+
+export function useAuth(): AuthState {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [mode, setMode] = useState<'local' | 'firebase' | null>(null);
+  const [needsSetup, setNeedsSetup] = useState(false);
+  const tokenRef = useRef<string | null>(null);
+  const fbUserRef = useRef<any>(null);
+
+  useEffect(() => {
+    let unsub: (() => void) | undefined;
+    (async () => {
+      let m: 'local' | 'firebase' = hasFirebase ? 'firebase' : 'local';
+      try {
+        const r = await fetch('/api/auth/mode');
+        if (r.ok) {
+          const d = await r.json();
+          m = d.provider === 'firebase' ? 'firebase' : 'local';
+          setNeedsSetup(!!d.needsSetup);
+        }
+      } catch {
+        /* fall back to firebase-presence heuristic */
+      }
+      setMode(m);
+
+      if (m === 'firebase') {
+        unsub = onAuth(async (u) => {
+          fbUserRef.current = u;
+          const t = u ? await u.getIdToken() : null;
+          tokenRef.current = t;
+          setToken(t);
+          setUser(u ? { uid: u.uid, email: u.email } : null);
+          setLoading(false);
+        });
+      } else {
+        const t = localStorage.getItem(LS_TOKEN);
+        if (t) {
+          tokenRef.current = t;
+          setToken(t);
+          const email = decodeLocalEmail(t);
+          setUser({ uid: email ?? 'user', email });
+        }
+        setLoading(false);
+      }
+    })();
+    return () => unsub?.();
+  }, []);
+
+  const getToken = useCallback(async () => {
+    if (mode === 'firebase') return fbUserRef.current ? fbUserRef.current.getIdToken() : null;
+    return tokenRef.current;
+  }, [mode]);
+
+  const applyLocalToken = (t: string, email: string) => {
+    localStorage.setItem(LS_TOKEN, t);
+    tokenRef.current = t;
+    setToken(t);
+    setUser({ uid: email, email });
+    setNeedsSetup(false);
+  };
+
+  const localAuth = useCallback(async (path: 'login' | 'register', email: string, password: string): Promise<string | null> => {
+    try {
+      const r = await fetch(`/api/auth/${path}`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      const d = await r.json().catch(() => ({}));
+      if (!r.ok || !d.token) return d.error || 'Authentication failed';
+      applyLocalToken(d.token, email);
+      return null;
+    } catch (e: any) {
+      return e?.message || 'Network error';
+    }
+  }, []);
+
+  const loginLocal = useCallback((e: string, p: string) => localAuth('login', e, p), [localAuth]);
+  const registerLocal = useCallback((e: string, p: string) => localAuth('register', e, p), [localAuth]);
+
+  const logout = useCallback(async () => {
+    if (mode === 'firebase') {
+      await signOutUser();
+    } else {
+      localStorage.removeItem(LS_TOKEN);
+      tokenRef.current = null;
+      setToken(null);
+      setUser(null);
+    }
+  }, [mode]);
+
+  return { user, token, getToken, loading, mode, needsSetup, loginLocal, registerLocal, logout };
+}