first

src/apps/officer-web/Screens/Dashboard/Applications/index.tsx

@@ -0,0 +1,169 @@
+import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { RefreshCw, Download, Circle, Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/Card';
+import { useClient } from 'hooks/useClient';
+import { DashboardLayout } from '../Layout';
+
+type AppStatus = {
+  id: string;
+  name: string;
+  description: string;
+  installed: boolean;
+  version: string | null;
+  running: boolean | null;
+  hasInstall: boolean;
+  hasUpdate: boolean;
+  manualInstallCommand: string | null;
+  manualUpdateCommand: string | null;
+};
+
+const CopyCommand = ({ command }: { command: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = () => {
+    navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex items-center gap-1 mt-1">
+      <code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-xs text-duck-dark/70">{command}</code>
+      <button
+        type="button"
+        onClick={copy}
+        className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+      >
+        {copied ? <Check className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5 text-duck-dark/50" />}
+      </button>
+    </div>
+  );
+};
+
+export const Applications = () => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+  const [actionInProgress, setActionInProgress] = useState<string | null>(null);
+
+  const { data: apps, isLoading } = useQuery({
+    queryKey: ['APPLICATIONS'],
+    queryFn: () => client.get<AppStatus[]>('/server-settings/applications'),
+  });
+
+  const runAction = async (id: string, action: 'install' | 'update') => {
+    setActionInProgress(id);
+    try {
+      await client.post<AppStatus>(`/server-settings/applications/${id}/${action}`);
+      await queryClient.invalidateQueries({ queryKey: ['APPLICATIONS'] });
+      toast.success(`${action === 'install' ? 'Installed' : 'Updated'} successfully`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : `${action} failed`;
+      toast.error(message);
+    } finally {
+      setActionInProgress(null);
+    }
+  };
+
+  const getManualCommand = (app: AppStatus): string | null => {
+    if (!app.installed) return app.manualInstallCommand;
+    return app.manualUpdateCommand ?? app.manualInstallCommand;
+  };
+
+  const hasAutoAction = (app: AppStatus): boolean => {
+    if (!app.installed) return app.hasInstall && !app.manualInstallCommand;
+    return app.hasUpdate && !(app.manualUpdateCommand ?? app.manualInstallCommand);
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+        <Card className="w-full max-w-2xl h-fit p-6">
+          <h2 className="text-lg font-bold text-duck-dark mb-1">Applications</h2>
+          <p className="text-sm text-duck-dark/60 mb-6">System tools and dependencies used by Officer.dev</p>
+
+          {isLoading && <p className="text-sm text-duck-dark/50">Checking applications...</p>}
+
+          {apps && (
+            <div className="flex flex-col gap-3">
+              {apps.map((app: AppStatus) => {
+                const manualCmd = getManualCommand(app);
+                const canAutoRun = hasAutoAction(app);
+
+                return (
+                  <div key={app.id} className="flex flex-col rounded-lg border border-duck-dark/10 px-4 py-3">
+                    <div className="flex items-center justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-semibold text-duck-dark">{app.name}</span>
+                          {app.installed && (
+                            <span className="text-xs bg-green-100 text-green-700 rounded-full px-2 py-0.5">
+                              {app.version}
+                            </span>
+                          )}
+                          {!app.installed && (
+                            <span className="text-xs bg-duck-dark/5 text-duck-dark/40 rounded-full px-2 py-0.5">
+                              Not installed
+                            </span>
+                          )}
+                          {app.running !== null && (
+                            <Circle
+                              className={`h-2.5 w-2.5 ${app.running ? 'fill-green-500 text-green-500' : 'fill-duck-dark/20 text-duck-dark/20'}`}
+                            />
+                          )}
+                        </div>
+                        <p className="text-xs text-duck-dark/50 mt-0.5">{app.description}</p>
+                      </div>
+
+                      <div className="shrink-0">
+                        {canAutoRun && !app.installed && (
+                          <Button
+                            size="sm"
+                            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                            disabled={actionInProgress === app.id}
+                            onClick={() => runAction(app.id, 'install')}
+                          >
+                            {actionInProgress === app.id ? (
+                              <RefreshCw className="h-3.5 w-3.5 animate-spin" />
+                            ) : (
+                              <Download className="h-3.5 w-3.5" />
+                            )}
+                            {actionInProgress === app.id ? 'Installing...' : 'Install'}
+                          </Button>
+                        )}
+                        {canAutoRun && app.installed && (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            disabled={actionInProgress === app.id}
+                            onClick={() => runAction(app.id, 'update')}
+                          >
+                            {actionInProgress === app.id ? (
+                              <RefreshCw className="h-3.5 w-3.5 animate-spin" />
+                            ) : (
+                              <RefreshCw className="h-3.5 w-3.5" />
+                            )}
+                            {actionInProgress === app.id ? 'Updating...' : 'Update'}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+
+                    {manualCmd && (
+                      <div className="mt-2 text-xs text-duck-dark/50">
+                        {app.installed ? 'Update' : 'Install'} manually:
+                        <CopyCommand command={manualCmd} />
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/ChatPanel/InputArea.tsx

@@ -0,0 +1,230 @@
+import type { KeyboardEvent, RefObject } from 'react';
+import { useState, useRef } from 'react';
+import { FileText, Image, Link, Loader2, Paperclip, Send, Square, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type { ModelOption } from '@/state/useModels';
+import type { ChatMessage } from '../types';
+import type { Attachment } from './index';
+import { Settings } from './Settings';
+
+type InputAreaProps = {
+  input: string;
+  onInputChange: (value: string) => void;
+  onKeyDown: (ev: KeyboardEvent<HTMLTextAreaElement>) => void;
+  onSend: () => void;
+  onStop: () => void;
+  isGenerating: boolean;
+  isConnected: boolean;
+  commandFeedback: string | null;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  provider: 'claude' | 'opencode';
+  messages: ChatMessage[];
+  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  availableModels: ModelOption[];
+  selectedModel: string | null;
+  onModelChange: (modelId: string) => void;
+  model: string | null;
+  attachments: Attachment[];
+  onAttachWebpage: (url: string) => void;
+  onAttachImage: (file: File) => void;
+  onRemoveAttachment: (index: number) => void;
+};
+
+export const InputArea = ({
+  input,
+  onInputChange,
+  onKeyDown,
+  onSend,
+  onStop,
+  isGenerating,
+  isConnected,
+  commandFeedback,
+  textareaRef,
+  provider,
+  messages,
+  onProviderChange,
+  availableModels,
+  selectedModel,
+  onModelChange,
+  model,
+  attachments,
+  onAttachWebpage,
+  onAttachImage,
+  onRemoveAttachment,
+}: InputAreaProps) => {
+  const [urlDialogOpen, setUrlDialogOpen] = useState(false);
+  const [urlInput, setUrlInput] = useState('');
+  const imageInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUrlSubmit = () => {
+    const url = urlInput.trim();
+    if (!url) return;
+    onAttachWebpage(url);
+    setUrlInput('');
+    setUrlDialogOpen(false);
+  };
+
+  return (
+    <div className="shrink-0 border-t border-duck-dark/10 bg-white/60 p-3">
+      {commandFeedback && (
+        <div className="mb-2 px-3 py-1.5 text-xs text-duck-teal bg-duck-teal/10 rounded-md">{commandFeedback}</div>
+      )}
+
+      {attachments.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1.5">
+          {attachments.map((a, i) => (
+            <span
+              key={i}
+              className="relative inline-flex items-center gap-1 px-2 py-1 text-xs bg-duck-teal/10 text-duck-teal rounded-md max-w-[240px] group"
+            >
+              {a.loading ? (
+                <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
+              ) : a.type === 'image' && a.dataUrl ? (
+                <img src={a.dataUrl} alt={a.filename} className="h-8 w-8 shrink-0 rounded object-cover" />
+              ) : a.type === 'image' ? (
+                <Image className="h-3 w-3 shrink-0" />
+              ) : (
+                <Link className="h-3 w-3 shrink-0" />
+              )}
+              <span className="truncate">{a.type === 'image' ? a.filename : a.loading ? a.url : a.title || a.url}</span>
+              <button
+                type="button"
+                onClick={() => onRemoveAttachment(i)}
+                className="shrink-0 hover:text-duck-dark cursor-pointer"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-end gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="shrink-0 h-9 w-9 flex items-center justify-center rounded-lg text-duck-dark/40 hover:text-duck-dark/70 hover:bg-duck-dark/5 transition-colors cursor-pointer"
+            >
+              <Paperclip className="h-4 w-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="top" align="start" className="z-[800]">
+            <DropdownMenuItem className="cursor-pointer" onSelect={() => imageInputRef.current?.click()}>
+              <Image className="mr-2 h-4 w-4" />
+              Image
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer">
+              <FileText className="mr-2 h-4 w-4" />
+              Text File
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer">
+              <FileText className="mr-2 h-4 w-4" />
+              PDF
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" onSelect={() => setUrlDialogOpen(true)}>
+              <Link className="mr-2 h-4 w-4" />
+              Webpage URL
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <input
+          ref={imageInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={(ev) => {
+            const file = ev.target.files?.[0];
+            if (file) onAttachImage(file);
+            ev.target.value = '';
+          }}
+        />
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(ev) => onInputChange(ev.target.value)}
+          onKeyDown={onKeyDown}
+          onPaste={(ev) => {
+            const items = ev.clipboardData?.items;
+            if (!items) return;
+            for (const item of Array.from(items)) {
+              if (item.type.startsWith('image/')) {
+                ev.preventDefault();
+                const file = item.getAsFile();
+                if (file) onAttachImage(file);
+                return;
+              }
+            }
+          }}
+          placeholder="Type a message..."
+          rows={1}
+          className="flex-1 resize-none rounded-lg border border-duck-dark/20 bg-white/80 px-3 py-2 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
+        />
+        {isGenerating ? (
+          <Button onClick={onStop} variant="destructive" size="icon" className="shrink-0 h-9 w-9 cursor-pointer">
+            <Square className="h-4 w-4" />
+          </Button>
+        ) : (
+          <Button
+            onClick={onSend}
+            disabled={!input.trim() || !isConnected}
+            size="icon"
+            className="shrink-0 h-9 w-9 bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
+          >
+            <Send className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      <Settings
+        provider={provider}
+        messages={messages}
+        onProviderChange={onProviderChange}
+        availableModels={availableModels}
+        selectedModel={selectedModel}
+        onModelChange={onModelChange}
+        model={model}
+        isConnected={isConnected}
+        isGenerating={isGenerating}
+      />
+
+      <Dialog open={urlDialogOpen} onOpenChange={setUrlDialogOpen}>
+        <DialogContent className="sm:max-w-md z-[700]">
+          <DialogHeader>
+            <DialogTitle>Attach Webpage</DialogTitle>
+            <DialogDescription>Enter a URL to scrape and attach as context.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <input
+              type="url"
+              value={urlInput}
+              onChange={(ev) => setUrlInput(ev.target.value)}
+              onKeyDown={(ev) => {
+                if (ev.key === 'Enter') {
+                  ev.preventDefault();
+                  handleUrlSubmit();
+                }
+              }}
+              placeholder="https://example.com"
+              className="flex-1 rounded-lg border border-duck-dark/20 bg-white px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
+              autoFocus
+            />
+            <Button
+              onClick={handleUrlSubmit}
+              disabled={!urlInput.trim()}
+              className="bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
+            >
+              Attach
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/ChatPanel/MessageList.tsx

@@ -0,0 +1,52 @@
+import type { RefObject } from 'react';
+import { ArrowDown } from 'lucide-react';
+import type { ChatMessage } from '../types';
+import { MessageBubble, StreamingBubble } from '../MessageBubble';
+
+type MessageListProps = {
+  messages: ChatMessage[];
+  streamingText: string;
+  isGenerating: boolean;
+  showJumpToBottom: boolean;
+  onJumpToBottom: () => void;
+  onQuestionAnswer?: (text: string) => void;
+  scrollViewportRef: RefObject<HTMLDivElement | null>;
+  bottomRef: RefObject<HTMLDivElement | null>;
+};
+
+export const MessageList = ({
+  messages,
+  streamingText,
+  isGenerating,
+  showJumpToBottom,
+  onJumpToBottom,
+  onQuestionAnswer,
+  scrollViewportRef,
+  bottomRef,
+}: MessageListProps) => (
+  <div className="flex-1 min-h-0 relative">
+    <div ref={scrollViewportRef} className="h-full overflow-y-auto">
+      <div className="p-4 space-y-3">
+        {messages.length === 0 && !isGenerating && (
+          <div className="flex items-center justify-center h-full min-h-[200px] text-duck-dark/30 text-sm">
+            Send a message to start
+          </div>
+        )}
+        {messages.map((msg, i) => (
+          <MessageBubble key={i} message={msg} onAnswer={onQuestionAnswer} />
+        ))}
+        {isGenerating && <StreamingBubble text={streamingText} />}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+
+    {showJumpToBottom && (
+      <button
+        onClick={onJumpToBottom}
+        className="absolute bottom-2 left-1/2 -translate-x-1/2 bg-duck-teal text-white rounded-full p-1.5 shadow-lg hover:bg-duck-teal/90 transition-colors cursor-pointer"
+      >
+        <ArrowDown className="h-4 w-4" />
+      </button>
+    )}
+  </div>
+);

src/apps/officer-web/Screens/Dashboard/Chat/ChatPanel/SessionBar.tsx

@@ -0,0 +1,64 @@
+import { Link } from 'react-router';
+import { ArrowLeft, Archive, Trash2, Maximize2, Minimize2 } from 'lucide-react';
+
+type SessionBarProps = {
+  listPath: string;
+  provider: 'claude' | 'opencode';
+  sessionTitle: string | undefined;
+  isConnected: boolean;
+  isGenerating: boolean;
+  fullscreen: boolean;
+  onArchive: (() => void) | undefined;
+  onDelete: () => void;
+  onToggleFullscreen: () => void;
+};
+
+export const SessionBar = ({
+  listPath,
+  provider,
+  sessionTitle,
+  isConnected,
+  isGenerating,
+  fullscreen,
+  onArchive,
+  onDelete,
+  onToggleFullscreen,
+}: SessionBarProps) => (
+  <div className="shrink-0 flex items-center px-4 py-2 border-b border-duck-dark/10 bg-white/60">
+    <div className="flex items-center gap-1">
+      <Link to={listPath} className="p-1 text-duck-dark/40 hover:text-duck-dark transition-colors">
+        <ArrowLeft className="h-4 w-4" />
+      </Link>
+      {provider === 'claude' && onArchive && (
+        <button
+          onClick={onArchive}
+          className="p-1 text-duck-dark/40 hover:text-duck-teal transition-colors cursor-pointer"
+        >
+          <Archive className="h-4 w-4" />
+        </button>
+      )}
+      <button onClick={onDelete} className="p-1 text-duck-dark/40 hover:text-red-500 transition-colors cursor-pointer">
+        <Trash2 className="h-4 w-4" />
+      </button>
+    </div>
+    <div className="flex-1 min-w-0 text-center text-sm font-medium text-duck-dark/70 truncate px-3">
+      {sessionTitle ?? 'New chat'}
+    </div>
+    <div className="flex items-center gap-2 text-xs text-duck-dark/50">
+      {!isConnected ? (
+        <span className="inline-block h-2 w-2 rounded-full bg-red-500" />
+      ) : isGenerating ? (
+        <span className="inline-block h-2 w-2 rounded-full bg-duck-orange animate-pulse" />
+      ) : (
+        <span className="inline-block h-2 w-2 rounded-full bg-green-500" />
+      )}
+      <span>{!isConnected ? 'Disconnected' : isGenerating ? 'Working...' : ''}</span>
+      <button
+        onClick={onToggleFullscreen}
+        className="p-1 text-duck-dark/40 hover:text-duck-dark transition-colors cursor-pointer"
+      >
+        {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+      </button>
+    </div>
+  </div>
+);

src/apps/officer-web/Screens/Dashboard/Chat/ChatPanel/Settings.tsx

@@ -0,0 +1,87 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useAuth } from 'hooks/useAuth';
+import type { ModelOption } from '@/state/useModels';
+import type { ChatMessage } from '../types';
+import { OpenCodeModelPicker } from '../OpenCodeModelPicker';
+
+type SettingsProps = {
+  provider: 'claude' | 'opencode';
+  messages: ChatMessage[];
+  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  availableModels: ModelOption[];
+  selectedModel: string | null;
+  onModelChange: (modelId: string) => void;
+  model: string | null;
+  isConnected: boolean;
+  isGenerating: boolean;
+};
+
+export const Settings = ({
+  provider,
+  messages,
+  onProviderChange,
+  availableModels,
+  selectedModel,
+  onModelChange,
+  model,
+  isConnected,
+  isGenerating,
+}: SettingsProps) => {
+  const { user } = useAuth();
+
+  const fallbackModelId = availableModels[0]?.id ?? null;
+
+  return (
+    <div className="flex items-center justify-between mt-2">
+      {messages.length > 0 ? (
+        <span className="rounded-md bg-duck-dark/80 px-3 py-1 text-xs font-medium text-white">
+          {provider === 'claude' ? 'Claude' : 'OpenCode'}
+        </span>
+      ) : (
+        <div className="flex items-center gap-1 rounded-lg bg-white/60 p-1">
+          {(['claude', 'opencode'] as const).map((value) => (
+            <button
+              key={value}
+              onClick={() => onProviderChange?.(value)}
+              className={`rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+                provider === value ? 'bg-white text-duck-dark shadow-sm' : 'text-duck-dark/70 hover:text-duck-dark/90'
+              } ${!onProviderChange ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+            >
+              {value === 'claude' ? 'Claude' : 'OpenCode'}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="text-xs text-duck-dark/50">
+        {availableModels.length > 0 && provider === 'opencode' ? (
+          <OpenCodeModelPicker
+            models={availableModels}
+            selectedModel={selectedModel ?? fallbackModelId}
+            onSelect={onModelChange}
+            isConnected={isConnected}
+            isGenerating={isGenerating}
+          />
+        ) : availableModels.length > 0 ? (
+          <Select
+            value={selectedModel ?? fallbackModelId ?? undefined}
+            onValueChange={(v) => onModelChange(v)}
+            disabled={isGenerating || !isConnected}
+          >
+            <SelectTrigger className="h-auto border-0 bg-transparent p-0 text-xs text-duck-dark/50 shadow-none focus:ring-0 gap-1 cursor-pointer">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="z-[800]" side="top">
+              {availableModels.map((m) => (
+                <SelectItem key={m.id} value={m.id}>
+                  {m.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <span>{model ?? (provider === 'claude' ? 'Claude' : 'OpenCode')}</span>
+        )}
+      </div>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/ChatPanel/index.tsx

@@ -0,0 +1,122 @@
+import { useRef, useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router';
+import { useSessions } from '@/state/useSessions';
+import type { ModelOption } from '@/state/useModels';
+import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import type { useClaude } from '../useClaude';
+import { useSlashCommands } from '@/state/useSlashCommands';
+import { Card } from '@/components/Card';
+import { SessionBar } from './SessionBar';
+import { EmbeddableChat } from '../EmbeddableChat';
+
+export type { Attachment } from '../EmbeddableChat';
+
+type ChatPanelProps = {
+  chat: ReturnType<typeof useClaude>;
+  provider?: 'claude' | 'opencode';
+  availableModels?: ModelOption[];
+  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+};
+
+export const ChatPanel = ({ chat, provider = 'claude', availableModels = [], onProviderChange }: ChatPanelProps) => {
+  const { isConnected, isGenerating, sessionId, setSelectedModel, sendPrompt } = chat;
+
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [commandFeedback, setCommandFeedback] = useState<string | null>(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const initialSentRef = useRef(false);
+
+  const claudeSessions = useSessions();
+  const opencodeSessions = useOpenCodeSessions();
+  const { archiveSession, deleteSession } =
+    provider === 'claude'
+      ? claudeSessions
+      : { archiveSession: undefined, deleteSession: opencodeSessions.deleteSession };
+  const sessions = provider === 'claude' ? claudeSessions.sessions : opencodeSessions.sessions;
+  const slashCommands = useSlashCommands({ sessionId });
+  const sessionTitle = sessionId ? sessions.find((s) => s.id === sessionId)?.title : undefined;
+  const listPath = '/chat';
+
+  // Capture prefill input from location.state (one-time, before first render completes)
+  const locationState = location.state as {
+    initialMessage?: string;
+    prefillInput?: string;
+    model?: string;
+    cwd?: { root?: string; path: string };
+    attachmentIds?: string[];
+    images?: { filename: string; dataUrl: string }[];
+  } | null;
+  const initialPrefill = useRef(locationState?.prefillInput ?? '');
+
+  const handleBeforeSend = async (text: string) => {
+    if (text.startsWith('/')) {
+      const result = await slashCommands.execute(text);
+      if (result.handled) {
+        setCommandFeedback(result.feedback);
+        return true;
+      }
+    }
+    setCommandFeedback(null);
+    return false;
+  };
+
+  // Auto-send initial message from Home launcher
+  useEffect(() => {
+    const state = location.state as typeof locationState;
+    if (!state || initialSentRef.current) return;
+    if (state.prefillInput) {
+      initialSentRef.current = true;
+      window.history.replaceState({}, '', location.pathname);
+      return;
+    }
+    if (!state.initialMessage || !isConnected) return;
+    initialSentRef.current = true;
+    if (state.model) setSelectedModel(state.model);
+    sendPrompt(state.initialMessage, state.attachmentIds, state.images, state.cwd);
+    // Clear the location state so refresh doesn't re-send
+    window.history.replaceState({}, '', location.pathname);
+  }, [isConnected, location.state]);
+
+  return (
+    <Card
+      className={`flex flex-col overflow-hidden transition-all duration-200 rounded-none border-0 md:rounded-xl md:border-2 ${
+        fullscreen ? 'fixed inset-0 m-auto z-50 w-[90vw] h-[calc(90vh-4.5rem)]' : 'h-full'
+      }`}
+    >
+      <SessionBar
+        listPath={listPath}
+        provider={provider}
+        sessionTitle={sessionTitle}
+        isConnected={isConnected}
+        isGenerating={isGenerating}
+        fullscreen={fullscreen}
+        onArchive={
+          archiveSession && sessionId
+            ? async () => {
+                await archiveSession(sessionId);
+                navigate(listPath);
+              }
+            : undefined
+        }
+        onDelete={async () => {
+          if (!sessionId) return;
+          await deleteSession(sessionId);
+          navigate(listPath);
+        }}
+        onToggleFullscreen={() => setFullscreen((f) => !f)}
+      />
+
+      <EmbeddableChat
+        chat={chat}
+        provider={provider}
+        availableModels={availableModels}
+        onProviderChange={onProviderChange}
+        onBeforeSend={handleBeforeSend}
+        commandFeedback={commandFeedback}
+        defaultInput={initialPrefill.current}
+        className="flex-1 min-h-0"
+      />
+    </Card>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/EmbeddableChat.tsx

@@ -0,0 +1,254 @@
+import type { KeyboardEvent } from 'react';
+import { useRef, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { useClient } from 'hooks/useClient';
+import type { ModelOption } from '@/state/useModels';
+import type { useClaude } from './useClaude';
+import { MessageList } from './ChatPanel/MessageList';
+import { InputArea } from './ChatPanel/InputArea';
+
+export type Attachment =
+  | { type: 'webpage'; url: string; title: string; content: string; attachmentId: string; loading?: boolean }
+  | { type: 'image'; filename: string; dataUrl: string; attachmentId: string; loading?: boolean };
+
+type EmbeddableChatProps = {
+  chat: ReturnType<typeof useClaude>;
+  provider?: 'claude' | 'opencode';
+  availableModels?: ModelOption[];
+  onProviderChange?: (provider: 'claude' | 'opencode') => void;
+  onBeforeSend?: (text: string) => boolean | Promise<boolean>;
+  commandFeedback?: string | null;
+  defaultInput?: string;
+  className?: string;
+  cwd?: { root?: string; path: string };
+  autoSend?: boolean;
+};
+
+export const EmbeddableChat = ({
+  chat,
+  provider = 'claude',
+  availableModels = [],
+  onProviderChange,
+  onBeforeSend,
+  commandFeedback = null,
+  defaultInput = '',
+  className,
+  cwd,
+  autoSend = false,
+}: EmbeddableChatProps) => {
+  const {
+    messages,
+    streamingText,
+    isConnected,
+    isGenerating,
+    sessionId,
+    model,
+    selectedModel,
+    setSelectedModel,
+    sendPrompt,
+    stopGeneration,
+  } = chat;
+
+  const client = useClient();
+  const [input, setInput] = useState(defaultInput);
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [showJumpToBottom, setShowJumpToBottom] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const scrollViewportRef = useRef<HTMLDivElement | null>(null);
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const userScrolledRef = useRef(false);
+
+  const handleAttachWebpage = async (url: string) => {
+    const idx = attachments.length;
+    setAttachments((prev) => [
+      ...prev,
+      { type: 'webpage', url, title: '', content: '', attachmentId: '', loading: true },
+    ]);
+
+    try {
+      const res = await client.post<{ url: string; title: string; content: string; attachmentId: string }>('/scrape', {
+        url,
+        sessionId: sessionId ?? undefined,
+        provider,
+      });
+      setAttachments((prev) =>
+        prev.map((a, i) =>
+          i === idx
+            ? { ...a, title: res.title, content: res.content, attachmentId: res.attachmentId, loading: false }
+            : a,
+        ),
+      );
+    } catch {
+      setAttachments((prev) => prev.filter((_, i) => i !== idx));
+      toast.error('Failed to scrape webpage');
+    }
+  };
+
+  const handleAttachImage = async (file: File) => {
+    const idx = attachments.length;
+    setAttachments((prev) => [
+      ...prev,
+      { type: 'image', filename: file.name, dataUrl: '', attachmentId: '', loading: true },
+    ]);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      if (sessionId) formData.append('sessionId', sessionId);
+      formData.append('provider', provider);
+
+      const res = await client.post<{ filename: string; dataUrl: string; attachmentId: string }>('/upload', formData);
+      setAttachments((prev) =>
+        prev.map((a, i) =>
+          i === idx ? { ...a, dataUrl: res.dataUrl, attachmentId: res.attachmentId, loading: false } : a,
+        ),
+      );
+    } catch {
+      setAttachments((prev) => prev.filter((_, i) => i !== idx));
+      toast.error('Failed to upload image');
+    }
+  };
+
+  const handleRemoveAttachment = (index: number) => {
+    setAttachments((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSend = async () => {
+    const text = input.trim();
+    if (!text || isGenerating) return;
+
+    if (onBeforeSend) {
+      const handled = await onBeforeSend(text);
+      if (handled) {
+        setInput('');
+        if (textareaRef.current) textareaRef.current.style.height = 'auto';
+        return;
+      }
+    }
+
+    // Prepend attachment content to the prompt
+    let prompt = text;
+    const ids: string[] = [];
+    const images: { filename: string; dataUrl: string }[] = [];
+    for (const a of attachments) {
+      if (a.loading) continue;
+      if (a.type === 'webpage' && a.content) {
+        prompt = `[Attached webpage: ${a.url}]\n${a.content}\n\n${prompt}`;
+      } else if (a.type === 'image' && a.dataUrl) {
+        prompt = `[Attached image: ${a.filename}]\n\n${prompt}`;
+        images.push({ filename: a.filename, dataUrl: a.dataUrl });
+      }
+      ids.push(a.attachmentId);
+    }
+
+    // On first message (no sessionId), include attachmentIds so server can relocate tmp files
+    const cwdForFirst = !sessionId ? cwd : undefined;
+    sendPrompt(
+      prompt,
+      !sessionId && ids.length > 0 ? ids : undefined,
+      images.length > 0 ? images : undefined,
+      cwdForFirst,
+    );
+    setAttachments([]);
+    setInput('');
+    userScrolledRef.current = false;
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  };
+
+  const handleKeyDown = (ev: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (ev.key === 'Enter' && !ev.shiftKey) {
+      ev.preventDefault();
+      handleSend();
+    }
+  };
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
+  }, [input]);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (!userScrolledRef.current) {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, streamingText]);
+
+  // Detect user scrolling up
+  useEffect(() => {
+    const viewport = scrollViewportRef.current;
+    if (!viewport) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = viewport;
+      const atBottom = scrollHeight - scrollTop - clientHeight < 60;
+      userScrolledRef.current = !atBottom;
+      setShowJumpToBottom(!atBottom);
+    };
+
+    viewport.addEventListener('scroll', handleScroll);
+    return () => viewport.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const jumpToBottom = () => {
+    userScrolledRef.current = false;
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  // Focus textarea on mount
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  // Auto-send first message when autoSend is enabled
+  const autoSentRef = useRef(false);
+  useEffect(() => {
+    if (autoSend && isConnected && !messages.length && input.trim() && !autoSentRef.current) {
+      autoSentRef.current = true;
+      handleSend();
+    }
+  }, [autoSend, isConnected, messages.length, input]);
+
+  return (
+    <div className={`flex flex-col ${className ?? ''}`}>
+      <MessageList
+        messages={messages}
+        streamingText={streamingText}
+        isGenerating={isGenerating}
+        showJumpToBottom={showJumpToBottom}
+        onJumpToBottom={jumpToBottom}
+        onQuestionAnswer={(text) => sendPrompt(text)}
+        scrollViewportRef={scrollViewportRef}
+        bottomRef={bottomRef}
+      />
+
+      <InputArea
+        input={input}
+        onInputChange={setInput}
+        onKeyDown={handleKeyDown}
+        onSend={handleSend}
+        onStop={stopGeneration}
+        isGenerating={isGenerating}
+        isConnected={isConnected}
+        commandFeedback={commandFeedback}
+        textareaRef={textareaRef}
+        provider={provider}
+        messages={messages}
+        onProviderChange={onProviderChange}
+        availableModels={availableModels}
+        selectedModel={selectedModel}
+        onModelChange={setSelectedModel}
+        model={model}
+        attachments={attachments}
+        onAttachWebpage={handleAttachWebpage}
+        onAttachImage={handleAttachImage}
+        onRemoveAttachment={handleRemoveAttachment}
+      />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/MessageBubble.tsx

@@ -0,0 +1,94 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import type { ChatMessage } from './types';
+import { ToolActivity } from './ToolActivity';
+import { QuestionActivity } from './QuestionActivity';
+
+type MessageBubbleProps = {
+  message: ChatMessage;
+  onAnswer?: (text: string) => void;
+};
+
+export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
+  const text = formatText(message.text);
+  switch (message.role) {
+    case 'user':
+      return (
+        <div className="flex justify-end">
+          <div className="max-w-[80%] rounded-2xl rounded-tr-sm bg-duck-yellow/10 border border-duck-yellow/20 px-4 py-2.5 text-sm text-duck-dark">
+            {message.images?.map((img, i) => (
+              <img key={i} src={img.dataUrl} alt={img.filename} className="max-w-full max-h-64 rounded-lg mb-2" />
+            ))}
+            <div className="whitespace-pre-wrap">{text}</div>
+          </div>
+        </div>
+      );
+
+    case 'assistant':
+      if (!text) return null;
+      return (
+        <div className="flex justify-start">
+          <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+              {text}
+            </ReactMarkdown>
+          </div>
+        </div>
+      );
+
+    case 'tool':
+      if (message.toolName === 'question' && onAnswer) {
+        return <QuestionActivity message={message} onAnswer={onAnswer} />;
+      }
+      return <ToolActivity message={message} />;
+
+    case 'result':
+      return (
+        <div className="flex justify-center py-1">
+          <span className="text-xs text-duck-dark/40">
+            Done · ${message.costUsd.toFixed(3)} · {(message.durationMs / 1000).toFixed(1)}s · {message.numTurns} turn
+            {message.numTurns !== 1 ? 's' : ''}
+            {message.isError ? ' (with errors)' : ''}
+          </span>
+        </div>
+      );
+
+    case 'error':
+      return (
+        <div className="flex justify-start">
+          <div className="max-w-[80%] rounded-2xl bg-red-50 border border-red-200 px-4 py-2.5 text-sm text-red-700">
+            {text}
+          </div>
+        </div>
+      );
+  }
+};
+
+function formatText(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (value == null) return '';
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+type StreamingBubbleProps = {
+  text: string;
+};
+
+export const StreamingBubble = ({ text }: StreamingBubbleProps) => {
+  if (!text) return null;
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+          {text}
+        </ReactMarkdown>
+        <span className="inline-block w-2 h-4 bg-duck-teal/60 animate-pulse ml-0.5 align-middle" />
+      </div>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/OpenCodeModelPicker.tsx

@@ -0,0 +1,110 @@
+import { useMemo, useState } from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { ModelOption } from '@/state/useModels';
+import { useRecentModels } from '@/state/useRecentModels';
+
+type OpenCodeModelPickerProps = {
+  models: ModelOption[];
+  selectedModel: string | null;
+  onSelect: (modelId: string) => void;
+  isConnected: boolean;
+  isGenerating: boolean;
+};
+
+export const OpenCodeModelPicker = ({
+  models,
+  selectedModel,
+  onSelect,
+  isConnected,
+  isGenerating,
+}: OpenCodeModelPickerProps) => {
+  const [open, setOpen] = useState(false);
+  const { recents, addRecent } = useRecentModels();
+
+  const selected = models.find((m) => m.id === selectedModel);
+
+  const groupedByProvider = useMemo(() => {
+    const groups: Record<string, ModelOption[]> = {};
+    for (const m of models) {
+      const provider = m.provider ?? 'Other';
+      if (!groups[provider]) groups[provider] = [];
+      groups[provider].push(m);
+    }
+    return Object.entries(groups)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([provider, items]) => ({
+        provider,
+        models: items.sort((a, b) => a.name.localeCompare(b.name)),
+      }));
+  }, [models]);
+
+  const handleSelect = (modelId: string) => {
+    const model = models.find((m) => m.id === modelId);
+    if (model) {
+      onSelect(model.id);
+      addRecent(model);
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          role="combobox"
+          aria-expanded={open}
+          disabled={isGenerating || !isConnected}
+          className="h-auto border-0 bg-transparent p-0 text-xs text-duck-dark/50 shadow-none focus:ring-0 gap-1 cursor-pointer hover:bg-transparent hover:text-duck-dark/70"
+        >
+          {selected ? (
+            <>
+              {selected.name}
+              {selected.provider && <span className="hidden md:inline"> ({selected.provider})</span>}
+            </>
+          ) : (
+            'select model'
+          )}
+          <ChevronsUpDown className="h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="z-[800] w-[320px] p-0" align="end" side="top">
+        <Command>
+          <CommandInput placeholder="Search models..." />
+          <CommandList className="max-h-[400px]">
+            <CommandEmpty>No models found.</CommandEmpty>
+            {recents.length > 0 && (
+              <CommandGroup heading="Recent">
+                {recents.map((m) => (
+                  <CommandItem
+                    key={`recent-${m.id}`}
+                    value={`${m.name} ${m.provider ?? ''}`}
+                    onSelect={() => handleSelect(m.id)}
+                  >
+                    <Check className={`mr-2 h-4 w-4 ${selectedModel === m.id ? 'opacity-100' : 'opacity-0'}`} />
+                    <span className="truncate font-bold">{m.name}</span>
+                    {m.provider && <span className="ml-1 text-xs text-muted-foreground">({m.provider})</span>}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {groupedByProvider.map(({ provider, models: providerModels }) => (
+              <CommandGroup key={provider} heading={provider}>
+                {providerModels.map((m) => (
+                  <CommandItem key={m.id} value={`${m.name} ${m.provider ?? ''}`} onSelect={() => handleSelect(m.id)}>
+                    <Check className={`mr-2 h-4 w-4 ${selectedModel === m.id ? 'opacity-100' : 'opacity-0'}`} />
+                    <span className="truncate font-bold">{m.name}</span>
+                    {m.provider && <span className="ml-1 text-xs text-muted-foreground">({m.provider})</span>}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/QuestionActivity.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { MessageCircleQuestion, Check } from 'lucide-react';
+import type { ChatMessage } from './types';
+
+type ToolMessage = Extract<ChatMessage, { role: 'tool' }>;
+
+type QuestionOption = {
+  label: string;
+  description: string;
+};
+
+type Question = {
+  question: string;
+  header: string;
+  multiple: boolean;
+  options: QuestionOption[];
+};
+
+type QuestionActivityProps = {
+  message: ToolMessage;
+  onAnswer: (text: string) => void;
+};
+
+export const QuestionActivity = ({ message, onAnswer }: QuestionActivityProps) => {
+  const [selectedOptions, setSelectedOptions] = useState<Set<string>>(new Set());
+  const [otherText, setOtherText] = useState('');
+  const [answered, setAnswered] = useState(false);
+  const [answeredText, setAnsweredText] = useState('');
+
+  const input = message.toolInput as { questions?: Question[] };
+  const questions = input.questions;
+  if (!questions || questions.length === 0) return null;
+
+  const pending = message.output === undefined;
+
+  const handleSelect = (question: Question, label: string) => {
+    if (answered || !pending) return;
+
+    if (question.multiple) {
+      setSelectedOptions((prev) => {
+        const next = new Set(prev);
+        if (next.has(label)) next.delete(label);
+        else next.add(label);
+        return next;
+      });
+    } else {
+      const text = label;
+      setAnswered(true);
+      setAnsweredText(text);
+      onAnswer(text);
+    }
+  };
+
+  const handleSubmitMultiple = () => {
+    if (selectedOptions.size === 0 || answered || !pending) return;
+    const text = Array.from(selectedOptions).join(', ');
+    setAnswered(true);
+    setAnsweredText(text);
+    onAnswer(text);
+  };
+
+  const handleSubmitOther = () => {
+    const text = otherText.trim();
+    if (!text || answered || !pending) return;
+    setAnswered(true);
+    setAnsweredText(text);
+    onAnswer(text);
+  };
+
+  const isDisabled = answered || !pending;
+
+  return (
+    <div className="my-1 space-y-3">
+      {questions.map((q, qi) => (
+        <div key={qi} className="rounded-xl border border-duck-teal/20 bg-white/90 overflow-hidden">
+          <div className="flex items-center gap-2 px-4 py-2.5 bg-duck-teal/5 border-b border-duck-teal/10">
+            <MessageCircleQuestion className="h-4 w-4 text-duck-teal shrink-0" />
+            <span className="text-xs font-medium text-duck-teal uppercase tracking-wider">{q.header}</span>
+          </div>
+
+          <div className="px-4 py-3 space-y-3">
+            <p className="text-sm text-duck-dark font-medium">{q.question}</p>
+
+            <div className="space-y-1.5">
+              {q.options.map((opt) => {
+                const isSelected = answered
+                  ? answeredText === opt.label || answeredText.split(', ').includes(opt.label)
+                  : selectedOptions.has(opt.label);
+
+                return (
+                  <button
+                    key={opt.label}
+                    onClick={() => handleSelect(q, opt.label)}
+                    disabled={isDisabled}
+                    className={`w-full text-left px-3 py-2 rounded-lg border text-sm transition-colors ${
+                      isSelected
+                        ? 'border-duck-teal bg-duck-teal/10 text-duck-dark'
+                        : isDisabled
+                          ? 'border-duck-dark/10 bg-duck-dark/5 text-duck-dark/40 cursor-not-allowed'
+                          : 'border-duck-dark/15 hover:border-duck-teal/40 hover:bg-duck-teal/5 text-duck-dark cursor-pointer'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      {isSelected && <Check className="h-3.5 w-3.5 text-duck-teal shrink-0" />}
+                      <div>
+                        <span className="font-medium">{opt.label}</span>
+                        {opt.description && <span className="text-duck-dark/50 ml-1.5">&mdash; {opt.description}</span>}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* "Other" free-text option */}
+            {!isDisabled && (
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={otherText}
+                  onChange={(ev) => setOtherText(ev.target.value)}
+                  onKeyDown={(ev) => {
+                    if (ev.key === 'Enter') {
+                      ev.preventDefault();
+                      handleSubmitOther();
+                    }
+                  }}
+                  placeholder="Other..."
+                  className="flex-1 px-3 py-1.5 rounded-lg border border-duck-dark/15 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:border-duck-teal/40"
+                />
+                <button
+                  onClick={handleSubmitOther}
+                  disabled={!otherText.trim()}
+                  className="px-3 py-1.5 rounded-lg bg-duck-teal text-white text-sm font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-duck-teal/90 transition-colors cursor-pointer"
+                >
+                  Send
+                </button>
+              </div>
+            )}
+
+            {/* Submit button for multi-select */}
+            {q.multiple && !isDisabled && (
+              <button
+                onClick={handleSubmitMultiple}
+                disabled={selectedOptions.size === 0}
+                className="px-4 py-1.5 rounded-lg bg-duck-teal text-white text-sm font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-duck-teal/90 transition-colors cursor-pointer"
+              >
+                Submit ({selectedOptions.size} selected)
+              </button>
+            )}
+
+            {/* Answered indicator */}
+            {isDisabled && answeredText && (
+              <div className="flex items-center gap-1.5 text-xs text-duck-teal">
+                <Check className="h-3 w-3" />
+                <span>Answered: {answeredText}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/SessionList.tsx

@@ -0,0 +1,105 @@
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router';
+import { Plus, MessageSquare, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/Card';
+import { useSessions } from '@/state/useSessions';
+import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+
+type Filter = 'all' | 'claude' | 'opencode';
+
+export const SessionList = () => {
+  const [filter, setFilter] = useState<Filter>('all');
+  const claude = useSessions();
+  const opencode = useOpenCodeSessions();
+
+  const merged = useMemo(
+    () => [...claude.sessions, ...opencode.sessions].sort((a, b) => b.createdAt - a.createdAt),
+    [claude.sessions, opencode.sessions],
+  );
+
+  const filtered = filter === 'all' ? merged : merged.filter((s) => s.provider === filter);
+
+  const handleDelete = (id: string, provider: 'claude' | 'opencode') => {
+    if (provider === 'claude') claude.deleteSession(id);
+    else opencode.deleteSession(id);
+  };
+
+  return (
+    <div className="flex flex-col h-full items-center p-4 md:p-6">
+      <Card className="w-full max-w-2xl flex flex-col gap-4 h-full p-4 md:p-6 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-bold text-duck-dark/80">Sessions</h2>
+          <Button asChild className="bg-duck-teal hover:bg-duck-teal/90 cursor-pointer gap-2">
+            <Link to="/chat/new">
+              <Plus className="h-4 w-4" />
+              New Chat
+            </Link>
+          </Button>
+        </div>
+
+        {/* Radio filter */}
+        <div className="flex items-center gap-1 rounded-lg bg-white/60 p-1">
+          {(['all', 'claude', 'opencode'] as const).map((value) => (
+            <button
+              key={value}
+              onClick={() => setFilter(value)}
+              className={`flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors cursor-pointer ${
+                filter === value ? 'bg-white text-duck-dark shadow-sm' : 'text-duck-dark/70 hover:text-duck-dark/90'
+              }`}
+            >
+              {value === 'all' ? 'All' : value === 'claude' ? 'Claude' : 'OpenCode'}
+            </button>
+          ))}
+        </div>
+
+        {/* Session list */}
+        <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
+          {filtered.length === 0 && (
+            <div className="text-center py-16 text-duck-dark/30 text-sm">No sessions yet. Start a new chat!</div>
+          )}
+
+          {filtered.map((session) => (
+            <div
+              key={`${session.provider}-${session.id}`}
+              className="group flex items-center gap-3 rounded-lg border border-duck-dark/10 bg-white/80 hover:bg-white/90 transition-colors"
+            >
+              <Link
+                to={session.provider === 'claude' ? `/chat/${session.id}` : `/chat/opencode/${session.id}`}
+                className="flex-1 flex items-center gap-3 px-4 py-3 min-w-0"
+              >
+                <MessageSquare className="h-4 w-4 shrink-0 text-duck-teal/60" />
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium text-duck-dark/80 truncate">{session.title}</div>
+                  <div className="text-xs text-duck-dark/40">
+                    {new Date(session.createdAt).toLocaleDateString(undefined, {
+                      month: 'short',
+                      day: 'numeric',
+                      hour: '2-digit',
+                      minute: '2-digit',
+                    })}
+                    <span
+                      className={`ml-2 text-xs font-medium ${
+                        session.provider === 'claude' ? 'text-duck-teal' : 'text-duck-orange'
+                      }`}
+                    >
+                      {session.provider === 'claude' ? 'Claude' : 'OpenCode'}
+                    </span>
+                    <span className="ml-2 font-mono text-duck-dark/25">{session.id.slice(0, 8)}</span>
+                  </div>
+                </div>
+              </Link>
+              <button
+                onClick={() => handleDelete(session.id, session.provider)}
+                className="shrink-0 p-2 mr-2 text-duck-dark/20 hover:text-red-500 md:opacity-0 md:group-hover:opacity-100 transition-opacity cursor-pointer"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/ToolActivity.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { FileText, Terminal, Pencil, Search, Globe, Wrench, ChevronRight } from 'lucide-react';
+import type { ChatMessage } from './types';
+
+type ToolMessage = Extract<ChatMessage, { role: 'tool' }>;
+
+type ToolActivityProps = {
+  message: ToolMessage;
+};
+
+const toolIcons: Record<string, typeof FileText> = {
+  Read: FileText,
+  Edit: Pencil,
+  Write: Pencil,
+  Bash: Terminal,
+  Grep: Search,
+  Glob: Search,
+  WebFetch: Globe,
+  WebSearch: Globe,
+};
+
+function getToolSummary(toolName: string, toolInput: Record<string, unknown>): string {
+  switch (toolName) {
+    case 'Read':
+    case 'Edit':
+    case 'Write':
+      return (toolInput.file_path as string) ?? '';
+    case 'Bash':
+      return truncate((toolInput.command as string) ?? '', 80);
+    case 'Grep':
+    case 'Glob':
+      return (toolInput.pattern as string) ?? '';
+    case 'WebFetch':
+      return (toolInput.url as string) ?? '';
+    case 'WebSearch':
+      return (toolInput.query as string) ?? '';
+    default:
+      return (
+        Object.values(toolInput)
+          .find((v) => typeof v === 'string')
+          ?.toString() ?? ''
+      );
+  }
+}
+
+function truncate(str: string, max: number): string {
+  return str.length > max ? str.slice(0, max) + '...' : str;
+}
+
+export const ToolActivity = ({ message }: ToolActivityProps) => {
+  const [open, setOpen] = useState(false);
+
+  const Icon = toolIcons[message.toolName] ?? Wrench;
+  const summary = getToolSummary(message.toolName, message.toolInput);
+  const pending = message.output === undefined;
+  const isError = message.isError === true;
+
+  return (
+    <div className="my-1">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-md hover:bg-duck-dark/5 transition-colors cursor-pointer text-sm"
+      >
+        <ChevronRight className={`h-3 w-3 shrink-0 transition-transform ${open ? 'rotate-90' : ''}`} />
+        <Icon className="h-4 w-4 shrink-0 text-duck-teal" />
+        <span className="font-medium text-duck-dark/80">{message.toolName}</span>
+        <span className="text-duck-dark/50 truncate flex-1 font-mono text-xs">{summary}</span>
+        <span className="shrink-0">
+          {pending && <span className="inline-block h-2 w-2 rounded-full bg-amber-400 animate-pulse" />}
+          {!pending && !isError && <span className="text-green-600 text-xs">done</span>}
+          {!pending && isError && <span className="text-red-600 text-xs">error</span>}
+        </span>
+      </button>
+
+      {open && (
+        <div className="ml-7 mt-1 space-y-2 text-xs">
+          <div className="rounded-md bg-duck-dark/5 p-2 overflow-x-auto">
+            <div className="text-duck-dark/50 text-[10px] uppercase tracking-wider mb-1">Input</div>
+            {message.toolName === 'Bash' ? (
+              <pre className="bg-gray-900 text-green-400 p-2 rounded font-mono whitespace-pre-wrap break-all">
+                {(message.toolInput.command as string) ?? JSON.stringify(message.toolInput, null, 2)}
+              </pre>
+            ) : (
+              <pre className="font-mono whitespace-pre-wrap break-all text-duck-dark/70">
+                {Object.entries(message.toolInput)
+                  .map(([k, v]) => `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`)
+                  .join('\n')}
+              </pre>
+            )}
+          </div>
+
+          {message.output !== undefined && (
+            <div className="rounded-md bg-duck-dark/5 p-2 overflow-x-auto">
+              <div className="text-duck-dark/50 text-[10px] uppercase tracking-wider mb-1">Output</div>
+              <ToolOutput toolName={message.toolName} output={message.output} isError={isError} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+type ToolOutputProps = {
+  toolName: string;
+  output: string;
+  isError: boolean;
+};
+
+const ToolOutput = ({ toolName, output, isError }: ToolOutputProps) => {
+  const [expanded, setExpanded] = useState(false);
+  const maxLines = 20;
+  const lines = output.split('\n');
+  const needsTruncation = lines.length > maxLines;
+  const displayText = expanded ? output : lines.slice(0, maxLines).join('\n');
+
+  const isBash = toolName === 'Bash';
+
+  return (
+    <>
+      <pre
+        className={`font-mono whitespace-pre-wrap break-all p-2 rounded ${
+          isBash ? 'bg-gray-900 text-green-400' : isError ? 'bg-red-50 text-red-700' : 'text-duck-dark/70'
+        }`}
+      >
+        {displayText}
+      </pre>
+      {needsTruncation && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-duck-teal hover:underline text-[11px] mt-1 cursor-pointer"
+        >
+          {expanded ? 'Show less' : `Show more (${lines.length - maxLines} more lines)`}
+        </button>
+      )}
+    </>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/index.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { useParams } from 'react-router';
+import { useQueryClient } from '@tanstack/react-query';
+import { DashboardLayout } from '../Layout';
+import { useClaude } from './useClaude';
+import { useOpenCode } from './useOpenCode';
+import { ChatPanel } from './ChatPanel';
+import { SessionList } from './SessionList';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import type { SessionEntry } from './types';
+
+export const ClaudeSessions = () => {
+  return (
+    <DashboardLayout>
+      <SessionList />
+    </DashboardLayout>
+  );
+};
+
+export const ClaudeChat = () => {
+  const { sessionId } = useParams<{ sessionId: string }>();
+  const queryClient = useQueryClient();
+  const sessions = queryClient.getQueryData<SessionEntry[]>(['SESSIONS']);
+  const sessionModel = sessions?.find((s) => s.id === sessionId)?.model;
+  const claude = useClaude(sessionId, sessionModel);
+  const claudeModels = useVisibleClaudeModels();
+
+  return (
+    <DashboardLayout mobileFull>
+      <div className="flex items-center justify-center h-full md:p-4">
+        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+          <ChatPanel chat={claude} provider="claude" availableModels={claudeModels} />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+export const OpenCodeChat = () => {
+  const { sessionId } = useParams<{ sessionId: string }>();
+  const queryClient = useQueryClient();
+  const sessions = queryClient.getQueryData<SessionEntry[]>(['OC_SESSIONS']);
+  const sessionModel = sessions?.find((s) => s.id === sessionId)?.model;
+  const opencode = useOpenCode(sessionId, sessionModel);
+  const openCodeModels = useVisibleOpenCodeModels();
+
+  return (
+    <DashboardLayout mobileFull>
+      <div className="flex items-center justify-center h-full md:p-4">
+        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+          <ChatPanel chat={opencode} provider="opencode" availableModels={openCodeModels} />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+const ClaudeNewChatInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+  const claude = useClaude();
+  const claudeModels = useVisibleClaudeModels();
+  return (
+    <ChatPanel chat={claude} provider="claude" availableModels={claudeModels} onProviderChange={onProviderChange} />
+  );
+};
+
+const OpenCodeNewChatInner = ({ onProviderChange }: { onProviderChange: (p: 'claude' | 'opencode') => void }) => {
+  const opencode = useOpenCode();
+  const openCodeModels = useVisibleOpenCodeModels();
+  return (
+    <ChatPanel
+      chat={opencode}
+      provider="opencode"
+      availableModels={openCodeModels}
+      onProviderChange={onProviderChange}
+    />
+  );
+};
+
+export const NewChat = () => {
+  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');
+
+  return (
+    <DashboardLayout mobileFull>
+      <div className="flex items-center justify-center h-full md:p-4">
+        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+          {provider === 'claude' ? (
+            <ClaudeNewChatInner key="claude" onProviderChange={setProvider} />
+          ) : (
+            <OpenCodeNewChatInner key="opencode" onProviderChange={setProvider} />
+          )}
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Chat/types.ts

@@ -0,0 +1,38 @@
+export type SessionEntry = {
+  id: string;
+  title: string;
+  createdAt: number;
+  provider: 'claude' | 'opencode';
+  model?: string | null;
+};
+
+export type ChatMessage =
+  | { role: 'user'; text: string; images?: { filename: string; dataUrl: string }[] }
+  | { role: 'assistant'; text: string }
+  | {
+      role: 'tool';
+      toolName: string;
+      toolInput: Record<string, unknown>;
+      toolUseId: string;
+      output?: string;
+      isError?: boolean;
+    }
+  | { role: 'result'; costUsd: number; durationMs: number; numTurns: number; isError: boolean }
+  | { role: 'error'; text: string };
+
+export type TaskInfo = {
+  taskName: string;
+  taskDirName: string;
+  entryName: string;
+  entryType: 'file' | 'directory';
+};
+
+export type ServerMessage =
+  | { type: 'session:init'; sessionId: string; model: string }
+  | { type: 'assistant:text'; text: string }
+  | { type: 'assistant:partial'; text: string }
+  | { type: 'tool:use'; toolName: string; toolInput: Record<string, unknown>; toolUseId: string }
+  | { type: 'tool:result'; toolUseId: string; output: string; isError: boolean }
+  | { type: 'result'; costUsd: number; durationMs: number; numTurns: number; isError: boolean }
+  | { type: 'error'; message: string }
+  | { type: 'stopped' };

src/apps/officer-web/Screens/Dashboard/Chat/useClaude.ts

@@ -0,0 +1,227 @@
+import { useState, useEffect, useRef } from 'react';
+import { useChatWebSocket } from 'hooks/useChatWebSocket';
+import { useSessions } from '@/state/useSessions';
+import type { ChatMessage, ServerMessage, TaskInfo } from './types';
+
+const SAVE_DEBOUNCE_MS = 1000;
+
+type ResourceChatStorage = {
+  load: () => Promise<{ sessionId: string | null; messages: ChatMessage[] }>;
+  save: (sessionId: string, messages: ChatMessage[]) => Promise<void>;
+};
+
+type UseClaudeOptions = {
+  replaceUrl?: boolean;
+  storage?: ResourceChatStorage;
+  resourceChatDir?: string;
+  taskInfo?: TaskInfo;
+};
+
+export const useClaude = (initialSessionId?: string, initialModel?: string | null, options?: UseClaudeOptions) => {
+  const { replaceUrl = true, storage, resourceChatDir, taskInfo } = options ?? {};
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [streamingText, setStreamingText] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(initialSessionId ?? null);
+  const [model, setModel] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<string | null>(initialModel ?? null);
+
+  const streamingRef = useRef('');
+  const rafRef = useRef<number | null>(null);
+  const sessionIdRef = useRef<string | null>(initialSessionId ?? null);
+  const saveTimerRef = useRef<number | null>(null);
+
+  const { getMessages, saveMessages } = useSessions();
+
+  const token = localStorage.getItem('BEARER_TOKEN');
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.host}/api/harness/claudecode/ws?token=${token}`;
+
+  const flushStreaming = () => {
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      setStreamingText(streamingRef.current);
+      rafRef.current = null;
+    });
+  };
+
+  const commitStreaming = () => {
+    if (!streamingRef.current) return;
+    setMessages((prev) => [...prev, { role: 'assistant', text: streamingRef.current }]);
+    streamingRef.current = '';
+    setStreamingText('');
+  };
+
+  const handleMessage = (data: unknown) => {
+    const msg = data as ServerMessage;
+
+    switch (msg.type) {
+      case 'session:init':
+        sessionIdRef.current = msg.sessionId;
+        setSessionId(msg.sessionId);
+        setModel(msg.model);
+        if (replaceUrl) window.history.replaceState(null, '', `/chat/${msg.sessionId}`);
+        break;
+
+      case 'assistant:partial':
+        streamingRef.current += msg.text;
+        flushStreaming();
+        break;
+
+      case 'assistant:text':
+        if (streamingRef.current) {
+          commitStreaming();
+        } else {
+          setMessages((prev) => [...prev, { role: 'assistant', text: msg.text }]);
+        }
+        break;
+
+      case 'tool:use':
+        setMessages((prev) => [
+          ...prev,
+          { role: 'tool', toolName: msg.toolName, toolInput: msg.toolInput, toolUseId: msg.toolUseId },
+        ]);
+        break;
+
+      case 'tool:result':
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.role === 'tool' && m.toolUseId === msg.toolUseId ? { ...m, output: msg.output, isError: msg.isError } : m,
+          ),
+        );
+        break;
+
+      case 'result':
+        commitStreaming();
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: 'result',
+            costUsd: msg.costUsd,
+            durationMs: msg.durationMs,
+            numTurns: msg.numTurns,
+            isError: msg.isError,
+          },
+        ]);
+        setIsGenerating(false);
+        break;
+
+      case 'error':
+        commitStreaming();
+        setMessages((prev) => [...prev, { role: 'error', text: msg.message }]);
+        setIsGenerating(false);
+        break;
+
+      case 'stopped':
+        commitStreaming();
+        setIsGenerating(false);
+        break;
+    }
+  };
+
+  const { isConnected, send } = useChatWebSocket({ url: wsUrl, onMessage: handleMessage });
+
+  // Load messages from server on mount when resuming a session
+  useEffect(() => {
+    if (storage) {
+      storage
+        .load()
+        .then(({ sessionId: sid, messages: msgs }) => {
+          if (sid) {
+            sessionIdRef.current = sid;
+            setSessionId(sid);
+          }
+          if (msgs.length > 0) setMessages(msgs);
+        })
+        .catch(() => {});
+      return;
+    }
+    if (!initialSessionId) return;
+    getMessages(initialSessionId)
+      .then((data) => {
+        if (Array.isArray(data) && data.length > 0) setMessages(data);
+      })
+      .catch(() => {});
+  }, [initialSessionId]);
+
+  // Debounced save messages to server
+  useEffect(() => {
+    if (!sessionIdRef.current || messages.length === 0) return;
+
+    if (saveTimerRef.current !== null) clearTimeout(saveTimerRef.current);
+
+    const sid = sessionIdRef.current;
+    const snapshot = messages;
+    saveTimerRef.current = window.setTimeout(() => {
+      if (storage) {
+        storage.save(sid, snapshot).catch(() => {});
+      } else {
+        saveMessages(sid, snapshot).catch(() => {});
+      }
+      saveTimerRef.current = null;
+    }, SAVE_DEBOUNCE_MS);
+
+    return () => {
+      if (saveTimerRef.current !== null) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, [messages]);
+
+  // Clean up RAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const sendPrompt = (
+    text: string,
+    attachmentIds?: string[],
+    images?: { filename: string; dataUrl: string }[],
+    cwd?: { root?: string; path: string },
+  ) => {
+    setMessages((prev) => [...prev, { role: 'user', text, ...(images?.length ? { images } : {}) }]);
+    setIsGenerating(true);
+    streamingRef.current = '';
+    setStreamingText('');
+
+    // Parse dataUrls into { mediaType, data } for the server
+    const imageData = images
+      ?.map((img) => {
+        const match = img.dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+        return match ? { mediaType: match[1], data: match[2] } : null;
+      })
+      .filter((x): x is { mediaType: string; data: string } => x !== null);
+
+    send({
+      type: 'chat',
+      prompt: text,
+      sessionId: sessionIdRef.current,
+      ...(selectedModel ? { model: selectedModel } : {}),
+      ...(cwd ? { cwd } : {}),
+      ...(attachmentIds?.length ? { attachmentIds } : {}),
+      ...(imageData?.length ? { images: imageData } : {}),
+      ...(resourceChatDir ? { resourceChatDir } : {}),
+      ...(taskInfo ? { taskInfo } : {}),
+    });
+  };
+
+  const stopGeneration = () => {
+    send({ type: 'stop' });
+  };
+
+  return {
+    messages,
+    streamingText,
+    isConnected,
+    isGenerating,
+    sessionId,
+    model,
+    selectedModel,
+    setSelectedModel,
+    sendPrompt,
+    stopGeneration,
+  };
+};

src/apps/officer-web/Screens/Dashboard/Chat/useOpenCode.ts

@@ -0,0 +1,225 @@
+import { useState, useEffect, useRef } from 'react';
+import { useChatWebSocket } from 'hooks/useChatWebSocket';
+import { useSettings } from '@/state/useSettings';
+import { useVisibleOpenCodeModels } from '@/state/useModels';
+import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import type { ChatMessage, ServerMessage, TaskInfo } from './types';
+
+type UseOpenCodeOptions = {
+  replaceUrl?: boolean;
+  taskInfo?: TaskInfo;
+};
+
+export const useOpenCode = (initialSessionId?: string, initialModel?: string | null, options?: UseOpenCodeOptions) => {
+  const { replaceUrl = true, taskInfo } = options ?? {};
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [streamingText, setStreamingText] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(initialSessionId ?? null);
+  const [model, setModel] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<string | null>(initialModel ?? null);
+
+  const streamingRef = useRef('');
+  const rafRef = useRef<number | null>(null);
+  const sessionIdRef = useRef<string | null>(initialSessionId ?? null);
+  const selectedModelRef = useRef<string | null>(initialModel ?? null);
+
+  const updateSelectedModel = (value: string | null) => {
+    selectedModelRef.current = value;
+    setSelectedModel(value);
+  };
+
+  const { getMessages } = useOpenCodeSessions();
+  const { settings } = useSettings();
+  const openCodeModels = useVisibleOpenCodeModels();
+
+  const token = localStorage.getItem('BEARER_TOKEN');
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = `${protocol}//${window.location.host}/api/harness/opencode/ws?token=${token}`;
+
+  const flushStreaming = () => {
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      setStreamingText(streamingRef.current);
+      rafRef.current = null;
+    });
+  };
+
+  const commitStreaming = () => {
+    // Cancel any pending RAF to prevent stale reads of cleared streamingRef
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    if (!streamingRef.current) return;
+    setMessages((prev) => [...prev, { role: 'assistant', text: streamingRef.current }]);
+    streamingRef.current = '';
+    setStreamingText('');
+  };
+
+  const handleMessage = (data: unknown) => {
+    const msg = data as ServerMessage;
+
+    switch (msg.type) {
+      case 'session:init':
+        sessionIdRef.current = msg.sessionId;
+        setSessionId(msg.sessionId);
+        setModel(msg.model);
+        if (replaceUrl) window.history.replaceState(null, '', `/chat/opencode/${msg.sessionId}`);
+        break;
+
+      case 'assistant:partial':
+        streamingRef.current += msg.text;
+        flushStreaming();
+        break;
+
+      case 'assistant:text':
+        // Server sends the final complete text — discard streaming and use this instead
+        if (rafRef.current !== null) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+        streamingRef.current = '';
+        setStreamingText('');
+        setMessages((prev) => [...prev, { role: 'assistant', text: msg.text }]);
+        break;
+
+      case 'tool:use':
+        commitStreaming();
+        setMessages((prev) => {
+          const existing = prev.find((m) => m.role === 'tool' && m.toolUseId === msg.toolUseId);
+          if (existing) {
+            // Update input (running event sends actual input after pending)
+            return prev.map((m) =>
+              m.role === 'tool' && m.toolUseId === msg.toolUseId
+                ? { ...m, toolName: msg.toolName, toolInput: msg.toolInput }
+                : m,
+            );
+          }
+          return [
+            ...prev,
+            { role: 'tool', toolName: msg.toolName, toolInput: msg.toolInput, toolUseId: msg.toolUseId },
+          ];
+        });
+        break;
+
+      case 'tool:result':
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.role === 'tool' && m.toolUseId === msg.toolUseId ? { ...m, output: msg.output, isError: msg.isError } : m,
+          ),
+        );
+        break;
+
+      case 'result':
+        commitStreaming();
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: 'result',
+            costUsd: msg.costUsd,
+            durationMs: msg.durationMs,
+            numTurns: msg.numTurns,
+            isError: msg.isError,
+          },
+        ]);
+        setIsGenerating(false);
+        break;
+
+      case 'error':
+        commitStreaming();
+        setMessages((prev) => [...prev, { role: 'error', text: msg.message }]);
+        setIsGenerating(false);
+        break;
+
+      case 'stopped':
+        commitStreaming();
+        setIsGenerating(false);
+        break;
+    }
+  };
+
+  const { isConnected, send } = useChatWebSocket({ url: wsUrl, onMessage: handleMessage });
+
+  // Load messages from OpenCode on mount when resuming a session
+  useEffect(() => {
+    if (!initialSessionId) return;
+    getMessages(initialSessionId)
+      .then((data) => {
+        if (Array.isArray(data) && data.length > 0) setMessages(data);
+      })
+      .catch(() => {});
+  }, [initialSessionId]);
+
+  useEffect(() => {
+    selectedModelRef.current = selectedModel;
+  }, [selectedModel]);
+
+  // Seed default model for OpenCode if none selected
+  useEffect(() => {
+    if (selectedModel) return;
+    if (settings.chat.defaultProvider !== 'opencode' || !settings.chat.defaultModel) return;
+    if (!openCodeModels.some((m) => m.id === settings.chat.defaultModel)) return;
+    updateSelectedModel(settings.chat.defaultModel);
+  }, [openCodeModels, selectedModel, settings.chat.defaultModel, settings.chat.defaultProvider]);
+
+  // Clean up RAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const sendPrompt = (text: string, attachmentIds?: string[], images?: { filename: string; dataUrl: string }[]) => {
+    setMessages((prev) => [...prev, { role: 'user', text, ...(images?.length ? { images } : {}) }]);
+    setIsGenerating(true);
+    streamingRef.current = '';
+    setStreamingText('');
+
+    // Parse dataUrls into { mediaType, data } for the server
+    const imageData = images
+      ?.map((img) => {
+        const match = img.dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+        return match ? { mediaType: match[1], data: match[2] } : null;
+      })
+      .filter((x): x is { mediaType: string; data: string } => x !== null);
+
+    const modelId = selectedModelRef.current;
+    const selectedOption = modelId ? openCodeModels.find((m) => m.id === modelId) : undefined;
+    const payload = {
+      type: 'chat',
+      prompt: text,
+      sessionId: sessionIdRef.current,
+      ...(modelId
+        ? {
+            model: {
+              modelID: modelId,
+              ...(selectedOption?.providerId ? { providerID: selectedOption.providerId } : {}),
+            },
+          }
+        : {}),
+      ...(attachmentIds?.length ? { attachmentIds } : {}),
+      ...(imageData?.length ? { images: imageData } : {}),
+      ...(taskInfo ? { taskInfo } : {}),
+    };
+    console.log('[opencode-ui] ws send', payload);
+    send(payload);
+  };
+
+  const stopGeneration = () => {
+    send({ type: 'stop' });
+  };
+
+  return {
+    messages,
+    streamingText,
+    isConnected,
+    isGenerating,
+    sessionId,
+    model,
+    selectedModel,
+    setSelectedModel: updateSelectedModel,
+    sendPrompt,
+    stopGeneration,
+  };
+};

src/apps/officer-web/Screens/Dashboard/Dock.tsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import { Link, useLocation } from 'react-router';
+import type { LucideIcon } from 'lucide-react';
+
+export type DockItem = {
+  label: string;
+  to: string;
+  icon: LucideIcon;
+  color: string;
+};
+
+type DockProps = {
+  items: DockItem[];
+  className?: string;
+};
+
+const ICON_SIZE = 48;
+const ICON_GAP = 24;
+const DOCK_PADDING = 12;
+const MAX_SCALE = 1.5;
+const MAX_DISTANCE = 150;
+
+const getScale = (mouseX: number | null, iconCenterX: number) => {
+  if (mouseX === null) return 1;
+  const distance = Math.abs(mouseX - iconCenterX);
+  if (distance > MAX_DISTANCE) return 1;
+  return 1 + (MAX_SCALE - 1) * Math.cos((distance / MAX_DISTANCE) * (Math.PI / 2));
+};
+
+export const Dock = ({ items, className }: DockProps) => {
+  const [mouseX, setMouseX] = useState<number | null>(null);
+  const dockRef = useRef<HTMLDivElement | null>(null);
+  const location = useLocation();
+
+  const isActive = (to: string) => location.pathname.startsWith(to);
+
+  const handleMouseMove = (ev: React.MouseEvent) => {
+    const rect = dockRef.current?.getBoundingClientRect();
+    if (rect) setMouseX(ev.clientX - rect.left);
+  };
+
+  const handleMouseLeave = () => setMouseX(null);
+
+  return (
+    <div
+      ref={dockRef}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-[550] items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border border-white/10 bg-black/15 backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
+    >
+      {items.map((item, index) => {
+        const iconCenter = DOCK_PADDING + index * (ICON_SIZE + ICON_GAP) + ICON_SIZE / 2;
+        const scale = getScale(mouseX, iconCenter);
+        const active = isActive(item.to);
+
+        return (
+          <Link
+            key={item.to}
+            to={item.to}
+            className="group relative flex flex-col items-center"
+            style={{
+              transform: `scale(${scale})`,
+              transformOrigin: 'bottom center',
+              transition: 'transform 150ms ease-out',
+            }}
+          >
+            <span className="absolute -top-9 px-2 py-1 rounded-md bg-black/75 text-white text-xs whitespace-nowrap hidden md:block opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none">
+              {item.label}
+            </span>
+            <div
+              className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center transition-all"
+              style={{
+                background: active ? `${item.color}55` : `${item.color}30`,
+                boxShadow: active ? `0 0 12px ${item.color}30` : 'none',
+              }}
+            >
+              <item.icon className="h-5 w-5 md:h-6 md:w-6" style={{ color: active ? item.color : `${item.color}cc` }} />
+            </div>
+            {active && (
+              <div className="absolute -bottom-1.5 w-1.5 h-1.5 rounded-full" style={{ background: item.color }} />
+            )}
+          </Link>
+        );
+      })}
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Home/ChatHistory.tsx

@@ -0,0 +1,90 @@
+import { useMemo } from 'react';
+import { Link } from 'react-router';
+import { MessageSquare, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import { Card } from '@/components/Card';
+import { useSessions } from '@/state/useSessions';
+import { useOpenCodeSessions } from '@/state/useOpenCodeSessions';
+import { useUserState } from '@/state/useUserState';
+
+export const ChatHistory = () => {
+  const [collapsed, setCollapsed] = useUserState('widget:chatHistory:collapsed', true);
+  const claude = useSessions();
+  const opencode = useOpenCodeSessions();
+
+  const sessions = useMemo(
+    () => [...claude.sessions, ...opencode.sessions].sort((a, b) => b.createdAt - a.createdAt),
+    [claude.sessions, opencode.sessions],
+  );
+
+  const handleDelete = (id: string, provider: 'claude' | 'opencode') => {
+    if (provider === 'claude') claude.deleteSession(id);
+    else opencode.deleteSession(id);
+  };
+
+  return (
+    <div className="w-full">
+      <Card className="overflow-hidden">
+        <div className={`flex items-center justify-between px-4 pt-3 ${collapsed ? 'pb-3' : 'pb-1'}`}>
+          <Link to="/chat" className="text-xs font-semibold text-duck-dark/60 uppercase tracking-wide hover:underline">
+            Chat History
+          </Link>
+          <button
+            onClick={() => setCollapsed((c) => !c)}
+            className="text-duck-dark/40 hover:text-duck-dark/70 cursor-pointer transition-colors"
+          >
+            {collapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
+          </button>
+        </div>
+        {!collapsed && (
+          <>
+            <div className="px-4 pb-3 max-h-72 overflow-y-auto">
+              {sessions.length === 0 ? (
+                <p className="text-xs text-duck-dark/40 py-4 text-center">No sessions yet</p>
+              ) : (
+                <ul className="space-y-0.5">
+                  {sessions.map((session) => (
+                    <li
+                      key={`${session.provider}-${session.id}`}
+                      className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-duck-dark/5 group"
+                    >
+                      <Link
+                        to={session.provider === 'claude' ? `/chat/${session.id}` : `/chat/opencode/${session.id}`}
+                        className="flex items-center gap-2 flex-1 min-w-0"
+                      >
+                        <MessageSquare className="h-4 w-4 shrink-0 text-duck-teal/60" />
+                        <div className="min-w-0 flex-1">
+                          <span className="text-sm text-duck-dark truncate block">{session.title}</span>
+                          <span className="text-xs text-duck-dark/40 truncate block">
+                            {new Date(session.createdAt).toLocaleDateString(undefined, {
+                              month: 'short',
+                              day: 'numeric',
+                              hour: '2-digit',
+                              minute: '2-digit',
+                            })}
+                            <span
+                              className={`ml-1.5 font-medium ${
+                                session.provider === 'claude' ? 'text-duck-teal' : 'text-duck-orange'
+                              }`}
+                            >
+                              {session.provider === 'claude' ? 'Claude' : 'OpenCode'}
+                            </span>
+                          </span>
+                        </div>
+                      </Link>
+                      <button
+                        onClick={() => handleDelete(session.id, session.provider)}
+                        className="shrink-0 p-1 rounded text-duck-dark/20 md:opacity-0 md:group-hover:opacity-100 hover:text-red-500 transition-opacity cursor-pointer"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </>
+        )}
+      </Card>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Home/ChatLauncher.tsx

@@ -0,0 +1,356 @@
+import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
+import { useNavigate, Link } from 'react-router';
+import {
+  Send,
+  ChevronDown,
+  ChevronUp,
+  Check,
+  Paperclip,
+  Link as LinkIcon,
+  Loader2,
+  X,
+  FileText,
+  Image,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { useClient } from 'hooks/useClient';
+import { useUserState } from '@/state/useUserState';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/Card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useSettings } from '@/state/useSettings';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import type { Attachment } from '../Chat/ChatPanel';
+
+export const ChatLauncher = () => {
+  const navigate = useNavigate();
+  const { settings } = useSettings();
+  const claudeModels = useVisibleClaudeModels();
+  const openCodeModels = useVisibleOpenCodeModels();
+
+  const client = useClient();
+  const [provider, setProvider] = useState<'claude' | 'opencode'>(settings.chat.defaultProvider);
+  const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
+  const [input, setInput] = useState('');
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [collapsed, setCollapsed] = useUserState('widget:chatLauncher:collapsed', true);
+  const [urlDialogOpen, setUrlDialogOpen] = useState(false);
+  const [urlInput, setUrlInput] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setProvider(settings.chat.defaultProvider);
+    setModel(settings.chat.defaultModel);
+  }, [settings.chat.defaultProvider, settings.chat.defaultModel]);
+
+  const models = provider === 'claude' ? claudeModels : openCodeModels;
+
+  const handleAttachWebpage = async (url: string) => {
+    const idx = attachments.length;
+    setAttachments((prev) => [
+      ...prev,
+      { type: 'webpage', url, title: '', content: '', attachmentId: '', loading: true },
+    ]);
+
+    try {
+      const res = await client.post<{ url: string; title: string; content: string; attachmentId: string }>('/scrape', {
+        url,
+        provider,
+      });
+      setAttachments((prev) =>
+        prev.map((a, i) =>
+          i === idx
+            ? { ...a, title: res.title, content: res.content, attachmentId: res.attachmentId, loading: false }
+            : a,
+        ),
+      );
+    } catch {
+      setAttachments((prev) => prev.filter((_, i) => i !== idx));
+      toast.error('Failed to scrape webpage');
+    }
+  };
+
+  const handleAttachImage = async (file: File) => {
+    const idx = attachments.length;
+    setAttachments((prev) => [
+      ...prev,
+      { type: 'image', filename: file.name, dataUrl: '', attachmentId: '', loading: true },
+    ]);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('provider', provider);
+
+      const res = await client.post<{ filename: string; dataUrl: string; attachmentId: string }>('/upload', formData);
+      setAttachments((prev) =>
+        prev.map((a, i) =>
+          i === idx ? { ...a, dataUrl: res.dataUrl, attachmentId: res.attachmentId, loading: false } : a,
+        ),
+      );
+    } catch {
+      setAttachments((prev) => prev.filter((_, i) => i !== idx));
+      toast.error('Failed to upload image');
+    }
+  };
+
+  const handleUrlSubmit = () => {
+    const url = urlInput.trim();
+    if (!url) return;
+    handleAttachWebpage(url);
+    setUrlInput('');
+    setUrlDialogOpen(false);
+  };
+
+  const handleSubmit = () => {
+    const text = input.trim();
+    if (!text) return;
+
+    let prompt = text;
+    const attachmentIds: string[] = [];
+    const images: { filename: string; dataUrl: string }[] = [];
+    for (const a of attachments) {
+      if (a.loading) continue;
+      if (a.type === 'webpage' && a.content) {
+        prompt = `[Attached webpage: ${a.url}]\n${a.content}\n\n${prompt}`;
+      } else if (a.type === 'image' && a.dataUrl) {
+        prompt = `[Attached image: ${a.filename}]\n\n${prompt}`;
+        images.push({ filename: a.filename, dataUrl: a.dataUrl });
+      }
+      attachmentIds.push(a.attachmentId);
+    }
+
+    const route = provider === 'claude' ? '/chat/new' : '/chat/opencode/new';
+    navigate(route, {
+      state: {
+        initialMessage: prompt,
+        model,
+        attachmentIds: attachmentIds.length > 0 ? attachmentIds : undefined,
+        images: images.length > 0 ? images : undefined,
+      },
+    });
+  };
+
+  const handleKeyDown = (ev: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (ev.key === 'Enter' && !ev.shiftKey) {
+      ev.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 160) + 'px';
+  }, [input]);
+
+  return (
+    <div className="w-full">
+      <Card className="overflow-hidden">
+        <div className={`flex items-center justify-between px-4 pt-3 ${collapsed ? 'pb-3' : 'pb-1'}`}>
+          <Link
+            to="/chat/new"
+            className="text-xs font-semibold text-duck-dark/60 uppercase tracking-wide hover:underline"
+          >
+            Start Chat
+          </Link>
+          <button
+            onClick={() => setCollapsed((c) => !c)}
+            className="text-duck-dark/40 hover:text-duck-dark/70 cursor-pointer transition-colors"
+          >
+            {collapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
+          </button>
+        </div>
+        {!collapsed && (
+          <>
+            <div className="p-4 pb-2 pt-1">
+              {attachments.length > 0 && (
+                <div className="mb-2 flex flex-wrap gap-1.5">
+                  {attachments.map((a, i) => (
+                    <span
+                      key={i}
+                      className="relative inline-flex items-center gap-1 px-2 py-1 text-xs bg-duck-teal/10 text-duck-teal rounded-md max-w-[240px] group"
+                    >
+                      {a.loading ? (
+                        <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
+                      ) : a.type === 'image' && a.dataUrl ? (
+                        <img src={a.dataUrl} alt={a.filename} className="h-8 w-8 shrink-0 rounded object-cover" />
+                      ) : a.type === 'image' ? (
+                        <Image className="h-3 w-3 shrink-0" />
+                      ) : (
+                        <LinkIcon className="h-3 w-3 shrink-0" />
+                      )}
+                      <span className="truncate">
+                        {a.type === 'image' ? a.filename : a.loading ? a.url : a.title || a.url}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))}
+                        className="shrink-0 hover:text-duck-dark cursor-pointer"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+              <div className="flex items-end gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      className="shrink-0 h-10 w-10 flex items-center justify-center rounded-lg text-duck-dark/40 hover:text-duck-dark/70 hover:bg-duck-dark/5 transition-colors cursor-pointer"
+                    >
+                      <Paperclip className="h-4 w-4" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="top" align="start" className="z-[600]">
+                    <DropdownMenuItem className="cursor-pointer" onSelect={() => imageInputRef.current?.click()}>
+                      <Image className="mr-2 h-4 w-4" />
+                      Image
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="cursor-pointer">
+                      <FileText className="mr-2 h-4 w-4" />
+                      Text File
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="cursor-pointer">
+                      <FileText className="mr-2 h-4 w-4" />
+                      PDF
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="cursor-pointer" onSelect={() => setUrlDialogOpen(true)}>
+                      <LinkIcon className="mr-2 h-4 w-4" />
+                      Webpage URL
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <input
+                  ref={imageInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={(ev) => {
+                    const file = ev.target.files?.[0];
+                    if (file) handleAttachImage(file);
+                    ev.target.value = '';
+                  }}
+                />
+                <textarea
+                  ref={textareaRef}
+                  value={input}
+                  onChange={(ev) => setInput(ev.target.value)}
+                  onKeyDown={handleKeyDown}
+                  onPaste={(ev) => {
+                    const items = ev.clipboardData?.items;
+                    if (!items) return;
+                    for (const item of Array.from(items)) {
+                      if (item.type.startsWith('image/')) {
+                        ev.preventDefault();
+                        const file = item.getAsFile();
+                        if (file) handleAttachImage(file);
+                        return;
+                      }
+                    }
+                  }}
+                  placeholder="What do you want to work on now?"
+                  rows={1}
+                  className="flex-1 resize-none bg-transparent px-2 py-2 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none text-lg"
+                />
+                <Button
+                  onClick={handleSubmit}
+                  disabled={!input.trim()}
+                  size="icon"
+                  className="shrink-0 h-10 w-10 bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
+                >
+                  <Send className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between px-4 pb-3">
+              <div className="flex items-center gap-1 rounded-lg bg-duck-dark/5 p-1">
+                {(['claude', 'opencode'] as const).map((value) => (
+                  <button
+                    key={value}
+                    onClick={() => {
+                      setProvider(value);
+                      setModel(null);
+                    }}
+                    className={`rounded-md px-3 py-1 text-xs font-medium transition-colors cursor-pointer ${
+                      provider === value
+                        ? 'bg-white text-duck-dark shadow-sm'
+                        : 'text-duck-dark/50 hover:text-duck-dark/70'
+                    }`}
+                  >
+                    {value === 'claude' ? 'Claude' : 'OpenCode'}
+                  </button>
+                ))}
+              </div>
+
+              {models.length > 0 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button className="flex items-center gap-1 text-xs text-duck-dark/50 hover:text-duck-dark/70 cursor-pointer transition-colors">
+                      {models.find((m) => m.id === (model ?? models[0]?.id))?.name ?? models[0]?.name}
+                      <ChevronDown className="h-3 w-3" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="z-[600] max-h-64 overflow-y-auto">
+                    {models.map((m) => (
+                      <DropdownMenuItem key={m.id} onClick={() => setModel(m.id)} className="cursor-pointer">
+                        <Check
+                          className={`mr-2 h-3 w-3 ${(model ?? models[0]?.id) === m.id ? 'opacity-100' : 'opacity-0'}`}
+                        />
+                        <span className="font-bold">{m.name}</span>
+                        {m.provider && <span className="text-duck-dark/50 ml-1">({m.provider})</span>}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+          </>
+        )}
+      </Card>
+
+      <Dialog open={urlDialogOpen} onOpenChange={setUrlDialogOpen}>
+        <DialogContent className="sm:max-w-md z-[700]">
+          <DialogHeader>
+            <DialogTitle>Attach Webpage</DialogTitle>
+            <DialogDescription>Enter a URL to scrape and attach as context.</DialogDescription>
+          </DialogHeader>
+          <div className="flex gap-2">
+            <input
+              type="url"
+              value={urlInput}
+              onChange={(ev) => setUrlInput(ev.target.value)}
+              onKeyDown={(ev) => {
+                if (ev.key === 'Enter') {
+                  ev.preventDefault();
+                  handleUrlSubmit();
+                }
+              }}
+              placeholder="https://example.com"
+              className="flex-1 rounded-lg border border-duck-dark/20 bg-white px-3 py-2 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-2 focus:ring-duck-teal/30 focus:border-duck-teal/50"
+              autoFocus
+            />
+            <Button
+              onClick={handleUrlSubmit}
+              disabled={!urlInput.trim()}
+              className="bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
+            >
+              Attach
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Home/index.tsx

@@ -0,0 +1,25 @@
+import { DashboardLayout } from '../Layout';
+import { ChatLauncher } from './ChatLauncher';
+import { Widget as FileBrowser } from 'plugins/FileBrowser/client';
+import { ChatHistory } from './ChatHistory';
+import { Catalog } from 'sounds';
+import { useServerSettings } from '@/state/useServerSettings';
+
+export const Home = () => {
+  const { plugins } = useServerSettings();
+
+  return (
+    <DashboardLayout>
+      <div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
+        <div className="flex flex-col gap-8 flex-1 min-w-0">
+          <ChatLauncher />
+          {plugins?.FileBrowser !== false && <FileBrowser />}
+        </div>
+        <div className="flex flex-col gap-8 flex-1 min-w-0">
+          <ChatHistory />
+          <Catalog />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Layout.tsx

@@ -0,0 +1,140 @@
+import type { ReactNode } from 'react';
+import { Link } from 'react-router';
+import {
+  User,
+  LogOut,
+  Terminal,
+  TerminalSquare,
+  FileText,
+  FolderOpen,
+  Server,
+  Package,
+  Bot,
+  Sparkles,
+  ClipboardList,
+  ScrollText,
+  Workflow,
+} from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type { UserWithToken } from 'hooks/useAuth';
+import { useAuth } from 'hooks/useAuth';
+import { PixelGrid } from '../LandingPage/components/PixelGrid';
+import { useIsProduction } from 'hooks/useIsProduction';
+import { useServerSettings } from '@/state/useServerSettings';
+import { PasskeyGate } from './PasskeyGate';
+import { Dock, type DockItem } from './Dock';
+
+type DashboardLayoutProps = {
+  children?: ReactNode;
+  mobileFull?: boolean;
+};
+
+export function DashboardLayout({ children, mobileFull }: DashboardLayoutProps) {
+  const { user } = useAuth();
+  const isProduction = useIsProduction();
+  const { plugins } = useServerSettings();
+  const passkeyCount = (user as UserWithToken & { passkeyCount?: number })?.passkeyCount ?? 0;
+
+  const dockItems: DockItem[] = [
+    { label: 'Chat', to: '/chat', icon: Terminal, color: '#60a5fa' },
+    ...(plugins?.FileBrowser !== false
+      ? [{ label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' } as DockItem]
+      : []),
+    ...(plugins?.Terminal !== false
+      ? [{ label: 'Terminal', to: '/terminal', icon: TerminalSquare, color: '#34d399' } as DockItem]
+      : []),
+    { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
+    { label: 'Skills', to: '/skills', icon: Sparkles, color: '#c084fc' },
+    { label: 'Tasks', to: '/tasks', icon: ClipboardList, color: '#fb923c' },
+    { label: 'Processes', to: '/processes', icon: Workflow, color: '#2dd4bf' },
+    { label: 'Logs', to: '/task-logs', icon: ScrollText, color: '#94a3b8' },
+  ];
+
+  return (
+    <div className="relative overflow-hidden h-dvh outline-none fixed inset-0">
+      <PixelGrid />
+
+      <section className="relative h-dvh snap-start overflow-hidden">
+        {/* Background layer */}
+        <div
+          className="absolute inset-0 z-0"
+          style={{
+            backgroundImage: 'url(/static/landscape1.jpg)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+          }}
+        />
+
+        {/* Content layer - above pixel grid */}
+        <div className="absolute inset-0 z-[520] flex flex-col">
+          <header className="shrink-0 border-b border-white/20 bg-white/10 backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between">
+            <Link to="/">
+              <img
+                src="/static/officer-logo.svg"
+                alt="Officer"
+                className="h-8 md:h-12 w-auto"
+                style={{ transform: 'skew(-15deg, -2deg)' }}
+              />
+            </Link>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-duck-yellow cursor-pointer">
+                  <Avatar className="h-9 w-9 rounded-full">
+                    <AvatarImage src={user?.avatar ?? undefined} />
+                    <AvatarFallback className="bg-duck-teal text-duck-yellow text-sm font-bold rounded-full">
+                      {user?.name?.charAt(0).toUpperCase() ?? '?'}
+                    </AvatarFallback>
+                  </Avatar>
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="z-[600] w-48">
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  <Link to="/settings/profile">
+                    <User className="mr-2 h-4 w-4" />
+                    Profile
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  <Link to="/settings/ai">
+                    <Bot className="mr-2 h-4 w-4" />
+                    AI Settings
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  <Link to="/settings/server">
+                    <Server className="mr-2 h-4 w-4" />
+                    Server Settings
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  <Link to="/settings/applications">
+                    <Package className="mr-2 h-4 w-4" />
+                    Applications
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  <Link to="/auth/signout">
+                    <LogOut className="mr-2 h-4 w-4" />
+                    Sign Out
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </header>
+
+          <div className={`flex-1 min-h-0 ${mobileFull ? 'pb-0 md:pb-20' : 'pb-16 md:pb-20'}`}>
+            {isProduction && passkeyCount === 0 ? <PasskeyGate /> : children}
+          </div>
+          <Dock items={dockItems} className={mobileFull ? 'hidden md:flex' : 'flex'} />
+        </div>
+      </section>
+    </div>
+  );
+}

src/apps/officer-web/Screens/Dashboard/OnboardingAdmin/AIHarnessesCard.tsx

@@ -0,0 +1,251 @@
+import { useState } from 'react';
+import { Terminal, Copy, Check } from 'lucide-react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Card } from '@/components/Card';
+import { useClient } from 'hooks/useClient';
+
+type Harnesses = {
+  claudeCode: boolean;
+  opencode: boolean;
+};
+
+type AIHarnessesCardProps = {
+  onNext: () => void;
+  onBack: () => void;
+  saveSettings: (settings: Record<string, unknown>) => Promise<void>;
+};
+
+export const AIHarnessesCard = ({ onNext, onBack, saveSettings }: AIHarnessesCardProps) => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+  const [harnesses, setHarnesses] = useState<Harnesses>({ claudeCode: false, opencode: false });
+  const [installing, setInstalling] = useState<{ claudeCode: boolean; opencode: boolean }>({
+    claudeCode: false,
+    opencode: false,
+  });
+
+  type VersionInfo = { version: string | null; path: string | null; globalPath: string | null };
+  type ClaudeAuthInfo = { authenticated: boolean; loggedIn?: boolean; subscriptionType?: string };
+  type OpencodeAuthInfo = { authenticated: boolean; providers: string[] };
+
+  const { data: claudeVersion, isLoading: claudeLoading } = useQuery({
+    queryKey: ['CLAUDE_CODE_VERSION'],
+    queryFn: () => client.get<VersionInfo>('/server-settings/claude-code/version'),
+    enabled: harnesses.claudeCode,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      return data?.version && !data?.globalPath ? 1000 : false;
+    },
+  });
+
+  const { data: opencodeVersion, isLoading: opencodeLoading } = useQuery({
+    queryKey: ['OPENCODE_VERSION'],
+    queryFn: () => client.get<VersionInfo>('/server-settings/opencode/version'),
+    enabled: harnesses.opencode,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      return data?.version && !data?.globalPath ? 1000 : false;
+    },
+  });
+
+  const { data: claudeAuth } = useQuery({
+    queryKey: ['CLAUDE_CODE_AUTH'],
+    queryFn: () => client.get<ClaudeAuthInfo>('/server-settings/claude-code/auth'),
+    enabled: !!claudeVersion?.version,
+    refetchInterval: (query) => (!query.state.data?.authenticated ? 2000 : false),
+  });
+
+  const { data: opencodeAuth } = useQuery({
+    queryKey: ['OPENCODE_AUTH'],
+    queryFn: () => client.get<OpencodeAuthInfo>('/server-settings/opencode/auth'),
+    enabled: !!opencodeVersion?.version,
+    refetchInterval: (query) => (!query.state.data?.authenticated ? 2000 : false),
+  });
+
+  const installClaude = async () => {
+    setInstalling((prev) => ({ ...prev, claudeCode: true }));
+    try {
+      const result = await client.post<VersionInfo>('/server-settings/claude-code/install');
+      queryClient.setQueryData(['CLAUDE_CODE_VERSION'], result);
+    } finally {
+      setInstalling((prev) => ({ ...prev, claudeCode: false }));
+    }
+  };
+
+  const installOpencode = async () => {
+    setInstalling((prev) => ({ ...prev, opencode: true }));
+    try {
+      const result = await client.post<VersionInfo>('/server-settings/opencode/install');
+      queryClient.setQueryData(['OPENCODE_VERSION'], result);
+    } finally {
+      setInstalling((prev) => ({ ...prev, opencode: false }));
+    }
+  };
+
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(text);
+    setTimeout(() => setCopied(null), 1500);
+  };
+
+  const CopyCommand = ({ command }: { command: string }) => (
+    <div className="mt-2 text-xs text-amber-600">
+      Not globally accessible. Run:
+      <div className="flex items-center gap-1 mt-1">
+        <code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-duck-dark/70">{command}</code>
+        <button
+          type="button"
+          onClick={() => copyToClipboard(command)}
+          className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+        >
+          {copied === command ? (
+            <Check className="h-3.5 w-3.5 text-green-600" />
+          ) : (
+            <Copy className="h-3.5 w-3.5 text-duck-dark/50" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+
+  const claudeReady =
+    !harnesses.claudeCode || (!!claudeVersion?.version && !!claudeVersion?.globalPath && !!claudeAuth?.authenticated);
+  const opencodeReady =
+    !harnesses.opencode ||
+    (!!opencodeVersion?.version && !!opencodeVersion?.globalPath && !!opencodeAuth?.authenticated);
+  const canProceed = (harnesses.claudeCode || harnesses.opencode) && claudeReady && opencodeReady;
+
+  const handleNext = async () => {
+    await saveSettings({ aiHarnesses: harnesses, onboardingComplete: true });
+    onNext();
+  };
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center gap-3 mb-2">
+        <Terminal className="h-5 w-5 text-duck-forest" />
+        <h2 className="text-xl font-bold text-duck-dark">AI Harnesses</h2>
+      </div>
+      <p className="text-duck-dark/70 text-sm mb-6">Which AI coding tools do you use?</p>
+
+      <div className="flex flex-col gap-4">
+        <div>
+          <label className="flex items-center gap-3 cursor-pointer">
+            <Checkbox
+              checked={harnesses.opencode}
+              onCheckedChange={(checked) => setHarnesses((prev) => ({ ...prev, opencode: !!checked }))}
+            />
+            <span className="text-sm font-medium text-duck-dark">Opencode</span>
+          </label>
+          {harnesses.opencode && (
+            <div className="ml-7 mt-2 text-xs text-duck-dark/50">
+              {opencodeLoading ? (
+                'Checking version...'
+              ) : opencodeVersion?.version ? (
+                <>
+                  <div>{opencodeVersion.version}</div>
+                  <div>{opencodeVersion.path}</div>
+                  {opencodeAuth && (
+                    <div className={`mt-1 ${opencodeAuth.authenticated ? 'text-green-600' : 'text-amber-600'}`}>
+                      {opencodeAuth.authenticated ? (
+                        `Logged in (${opencodeAuth.providers.join(', ')})`
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <span>Not logged in</span>
+                          <Button
+                            size="sm"
+                            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                            onClick={() => client.post('/server-settings/opencode/auth/login')}
+                          >
+                            Login
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  {!opencodeVersion.globalPath && opencodeVersion.path && (
+                    <CopyCommand command={`sudo ln -s ${opencodeVersion.path} /usr/local/bin/opencode`} />
+                  )}
+                </>
+              ) : (
+                <Button
+                  size="sm"
+                  className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                  onClick={installOpencode}
+                  disabled={installing.opencode}
+                >
+                  {installing.opencode ? 'Installing...' : 'Install'}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <label className="flex items-center gap-3 cursor-pointer">
+            <Checkbox
+              checked={harnesses.claudeCode}
+              onCheckedChange={(checked) => setHarnesses((prev) => ({ ...prev, claudeCode: !!checked }))}
+            />
+            <span className="text-sm font-medium text-duck-dark">Claude Code</span>
+          </label>
+          {harnesses.claudeCode && (
+            <div className="ml-7 mt-2 text-xs text-duck-dark/50">
+              {claudeLoading ? (
+                'Checking version...'
+              ) : claudeVersion?.version ? (
+                <>
+                  <div>{claudeVersion.version}</div>
+                  <div>{claudeVersion.path}</div>
+                  {claudeAuth && (
+                    <div className={`mt-1 ${claudeAuth.authenticated ? 'text-green-600' : 'text-amber-600'}`}>
+                      {claudeAuth.authenticated ? (
+                        `Logged in (${claudeAuth.subscriptionType ?? 'unknown plan'})`
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <span>Not logged in</span>
+                          <Button
+                            size="sm"
+                            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                            onClick={() => client.post('/server-settings/claude-code/auth/login')}
+                          >
+                            Login
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  {!claudeVersion.globalPath && claudeVersion.path && (
+                    <CopyCommand command={`sudo ln -s ${claudeVersion.path} /usr/local/bin/claude`} />
+                  )}
+                </>
+              ) : (
+                <Button
+                  size="sm"
+                  className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                  onClick={installOpencode}
+                  disabled={installing.opencode}
+                >
+                  {installing.opencode ? 'Installing...' : 'Install'}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex justify-between mt-6">
+        <Button variant="outline" onClick={onBack}>
+          Back
+        </Button>
+        <Button disabled={!canProceed} onClick={handleNext}>
+          Complete Setup
+        </Button>
+      </div>
+    </Card>
+  );
+};

src/apps/officer-web/Screens/Dashboard/OnboardingAdmin/ServerTypeCard.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Building2, UserRound } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/Card';
+
+type AccountMode = 'organization' | 'single' | null;
+
+type ServerTypeCardProps = {
+  onNext: () => void;
+  saveSettings: (settings: Record<string, unknown>) => Promise<void>;
+};
+
+export const ServerTypeCard = ({ onNext, saveSettings }: ServerTypeCardProps) => {
+  const [accountMode, setAccountMode] = useState<AccountMode>(null);
+
+  const handleNext = async () => {
+    await saveSettings({ accountMode });
+    onNext();
+  };
+
+  return (
+    <Card className="p-6">
+      <h2 className="text-xl font-bold text-duck-dark mb-2">Account Type</h2>
+      <p className="text-duck-dark/70 text-sm mb-6">How will you be using Officer?</p>
+
+      <div className="grid grid-cols-2 gap-4">
+        <button
+          type="button"
+          onClick={() => setAccountMode('single')}
+          className={`flex flex-col items-center gap-3 p-6 rounded-lg border-2 cursor-pointer transition-colors ${
+            accountMode === 'single'
+              ? 'border-duck-teal bg-duck-teal/10'
+              : 'border-duck-dark/20 hover:border-duck-dark/40'
+          }`}
+        >
+          <UserRound className={`h-8 w-8 ${accountMode === 'single' ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
+          <span className={`text-sm font-medium ${accountMode === 'single' ? 'text-duck-teal' : 'text-duck-dark'}`}>
+            Single User
+          </span>
+          <span className="text-xs text-duck-dark/50 text-center">Just me, personal use</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setAccountMode('organization')}
+          className={`flex flex-col items-center gap-3 p-6 rounded-lg border-2 cursor-pointer transition-colors ${
+            accountMode === 'organization'
+              ? 'border-duck-teal bg-duck-teal/10'
+              : 'border-duck-dark/20 hover:border-duck-dark/40'
+          }`}
+        >
+          <Building2 className={`h-8 w-8 ${accountMode === 'organization' ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
+          <span
+            className={`text-sm font-medium ${accountMode === 'organization' ? 'text-duck-teal' : 'text-duck-dark'}`}
+          >
+            Organization
+          </span>
+          <span className="text-xs text-duck-dark/50 text-center">Multiple users and teams</span>
+        </button>
+      </div>
+
+      <div className="flex justify-end mt-6">
+        <Button disabled={!accountMode} onClick={handleNext}>
+          Next
+        </Button>
+      </div>
+    </Card>
+  );
+};

src/apps/officer-web/Screens/Dashboard/OnboardingAdmin/index.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { useServerSettings } from '@/state/useServerSettings';
+import { DashboardLayout } from '../Layout';
+import { ServerTypeCard } from './ServerTypeCard';
+import { AIHarnessesCard } from './AIHarnessesCard';
+
+const STEPS = ['server-type', 'ai-harnesses'] as const;
+type Step = (typeof STEPS)[number];
+
+const getStepFromHash = (): Step => {
+  const hash = window.location.hash.slice(1);
+  if (STEPS.includes(hash as Step)) return hash as Step;
+  return STEPS[0]!;
+};
+
+const setHash = (step: Step) => {
+  window.location.hash = step;
+};
+
+export const OnboardingAdmin = () => {
+  const { saveSettings } = useServerSettings();
+  const [step, setStep] = useState<Step>(getStepFromHash);
+
+  useEffect(() => {
+    const onHashChange = () => setStep(getStepFromHash());
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, []);
+
+  useEffect(() => {
+    setHash(step);
+  }, [step]);
+
+  const currentIndex = STEPS.indexOf(step);
+
+  const nextStep = () => {
+    if (currentIndex < STEPS.length - 1) {
+      setStep(STEPS[currentIndex + 1]!);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentIndex > 0) {
+      setStep(STEPS[currentIndex - 1]!);
+    }
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="flex items-center justify-center h-full px-4">
+        <div className="w-full max-w-lg">
+          {step === 'server-type' && <ServerTypeCard onNext={nextStep} saveSettings={saveSettings} />}
+          {step === 'ai-harnesses' && (
+            <AIHarnessesCard onNext={nextStep} onBack={prevStep} saveSettings={saveSettings} />
+          )}
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/PasskeyGate/index.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { KeyRound } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/Card';
+import { useAuth } from 'hooks/useAuth';
+
+export const PasskeyGate = () => {
+  const { user, createPasskeyCredentials } = useAuth();
+  const [isRegistering, setIsRegistering] = useState(false);
+
+  const handleRegister = async () => {
+    if (!user || isRegistering) return;
+
+    setIsRegistering(true);
+    try {
+      await createPasskeyCredentials(user);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to register passkey. Please try again.');
+    } finally {
+      setIsRegistering(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center h-full px-4">
+      <Card className="w-full max-w-md p-8">
+        <div className="flex flex-col items-center text-center gap-4">
+          <div className="rounded-full bg-duck-teal/10 p-4">
+            <KeyRound className="h-8 w-8 text-duck-teal" />
+          </div>
+
+          <h2 className="text-2xl font-bold text-duck-dark">Set up your passkey</h2>
+
+          <p className="text-duck-dark/70">
+            Passkeys provide a secure, passwordless way to access your account. Each device or browser needs its own
+            passkey.
+          </p>
+
+          <Button
+            onClick={handleRegister}
+            disabled={isRegistering}
+            className="w-full h-11 mt-2 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+          >
+            {isRegistering ? 'Registering...' : 'Register Passkey'}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Plans/index.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { useClient } from 'hooks/useClient';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../Layout';
+
+export const Plans = () => {
+  const client = useClient();
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+
+  const { data: plans = [] } = useQuery<string[]>({
+    queryKey: ['plans'],
+    queryFn: () => client.get<string[]>('/plans'),
+  });
+
+  useEffect(() => {
+    if (plans.length > 0 && !selectedPlan) {
+      setSelectedPlan(plans[0]!);
+    }
+  }, [plans, selectedPlan]);
+
+  const { data: content = '' } = useQuery<string>({
+    queryKey: ['plans', selectedPlan],
+    queryFn: () => client.getText(`/plans/${selectedPlan}`),
+    enabled: !!selectedPlan,
+  });
+
+  return (
+    <DashboardLayout>
+      <div className="flex flex-col h-full p-4">
+        <Card className="flex-1 overflow-hidden">
+          {/* Header with plan selector */}
+          <div className="shrink-0 flex items-center gap-3 px-4 py-2 border-b border-duck-dark/10 bg-white/60">
+            <span className="text-sm font-medium text-duck-dark/70">Plans</span>
+            {plans.length > 1 && (
+              <select
+                value={selectedPlan ?? ''}
+                onChange={(ev) => setSelectedPlan(ev.target.value)}
+                className="text-xs border border-duck-dark/20 rounded px-2 py-1 bg-white/80"
+              >
+                {plans.map((p) => (
+                  <option key={p} value={p}>
+                    {p}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
+
+          {/* Markdown content */}
+          <div className="overflow-y-auto h-full p-6">
+            <div className="prose prose-sm max-w-none prose-headings:text-duck-dark prose-a:text-duck-teal prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none prose-td:text-sm prose-th:text-sm">
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                {content}
+              </ReactMarkdown>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Processes/index.tsx

@@ -0,0 +1,3 @@
+import { ResourcePage } from '../ResourcePage';
+
+export const Processes = () => <ResourcePage kind="Process" endpoint="/processes" queryKey="processes" />;

src/apps/officer-web/Screens/Dashboard/Profile/ChangePassword.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type PasswordFormState = {
+  password?: string;
+  newPassword?: string;
+  confirmPassword?: string;
+};
+
+const validate = (state: Partial<PasswordFormState>) => {
+  const { password, newPassword, confirmPassword } = state;
+  return !!(password && newPassword && confirmPassword && newPassword === confirmPassword);
+};
+
+export const ChangePassword = () => {
+  const { changePassword } = useAuth();
+  const [isChanging, setIsChanging] = useState(false);
+  const form = useForm<PasswordFormState>({}, validate);
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!form.isValid || isChanging) return;
+
+    setIsChanging(true);
+    try {
+      await changePassword({
+        password: form.state.password!,
+        newPassword: form.state.newPassword!,
+        confirmPassword: form.state.confirmPassword!,
+      });
+      toast.success('Password changed');
+      form.update({ password: '', newPassword: '', confirmPassword: '' });
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to change password');
+      form.update({ password: '', newPassword: '', confirmPassword: '' });
+    } finally {
+      setIsChanging(false);
+    }
+  };
+
+  return (
+    <div>
+      <form ref={form.formRef} onSubmit={handleSubmit} className="grid gap-4">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Current Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="password"
+            placeholder="Current password"
+            autoComplete="current-password"
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">New Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="newPassword"
+            placeholder="New password"
+            autoComplete="new-password"
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Confirm New Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="confirmPassword"
+            placeholder="Confirm new password"
+            autoComplete="new-password"
+          />
+        </Label>
+
+        <Button
+          type="submit"
+          disabled={!form.isValid || isChanging}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isChanging ? 'Changing...' : 'Change Password'}
+        </Button>
+      </form>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Profile/Languages.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { useSettings } from '@/state/useSettings';
+
+const LANGUAGES = [
+  { code: 'en', label: 'English' },
+  { code: 'pt', label: 'Portuguese' },
+  { code: 'es', label: 'Spanish' },
+  { code: 'fr', label: 'French' },
+  { code: 'de', label: 'German' },
+  { code: 'it', label: 'Italian' },
+  { code: 'nl', label: 'Dutch' },
+  { code: 'ru', label: 'Russian' },
+  { code: 'zh', label: 'Chinese' },
+  { code: 'ja', label: 'Japanese' },
+  { code: 'ko', label: 'Korean' },
+  { code: 'ar', label: 'Arabic' },
+  { code: 'hi', label: 'Hindi' },
+  { code: 'tr', label: 'Turkish' },
+  { code: 'pl', label: 'Polish' },
+  { code: 'sv', label: 'Swedish' },
+  { code: 'da', label: 'Danish' },
+  { code: 'no', label: 'Norwegian' },
+  { code: 'fi', label: 'Finnish' },
+  { code: 'uk', label: 'Ukrainian' },
+  { code: 'cs', label: 'Czech' },
+  { code: 'ro', label: 'Romanian' },
+  { code: 'el', label: 'Greek' },
+  { code: 'he', label: 'Hebrew' },
+  { code: 'th', label: 'Thai' },
+  { code: 'vi', label: 'Vietnamese' },
+  { code: 'id', label: 'Indonesian' },
+  { code: 'ms', label: 'Malay' },
+];
+
+const getLabel = (code: string) => LANGUAGES.find((l) => l.code === code)?.label ?? code;
+
+export const Languages = () => {
+  const { settings, saveSettings } = useSettings();
+  const { spoken, default: defaultLang, translateTo } = settings.languages;
+  const [addingLang, setAddingLang] = useState('');
+
+  const save = (languages: typeof settings.languages) => {
+    saveSettings({ ...settings, languages });
+  };
+
+  const addSpoken = (code: string) => {
+    if (!code || spoken.includes(code)) return;
+    save({ ...settings.languages, spoken: [...spoken, code] });
+    setAddingLang('');
+  };
+
+  const removeSpoken = (code: string) => {
+    const next = spoken.filter((s) => s !== code);
+    const updates = { ...settings.languages, spoken: next };
+    if (defaultLang === code) updates.default = next[0] ?? 'en';
+    if (translateTo === code) updates.translateTo = next[0] ?? 'en';
+    save(updates);
+  };
+
+  const availableToAdd = LANGUAGES.filter((l) => !spoken.includes(l.code));
+
+  return (
+    <div className="grid gap-5">
+      {/* Spoken languages */}
+      <div className="grid gap-2">
+        <span className="text-sm font-medium text-duck-dark/70">Languages you speak</span>
+        <div className="flex flex-wrap gap-2">
+          {spoken.map((code) => (
+            <span
+              key={code}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-duck-teal/10 text-duck-teal text-sm font-medium"
+            >
+              {getLabel(code)}
+              {spoken.length > 1 && (
+                <button
+                  onClick={() => removeSpoken(code)}
+                  className="hover:text-red-500 cursor-pointer transition-colors"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+        {availableToAdd.length > 0 && (
+          <div className="flex items-center gap-2 mt-1">
+            <select
+              value={addingLang}
+              onChange={(ev) => addSpoken(ev.target.value)}
+              className="text-sm border border-duck-dark/20 rounded-md px-3 py-1.5 bg-white/60 text-duck-dark cursor-pointer"
+            >
+              <option value="">Add a language...</option>
+              {availableToAdd.map((l) => (
+                <option key={l.code} value={l.code}>
+                  {l.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      {/* Default language */}
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Default language</span>
+        <select
+          value={defaultLang}
+          onChange={(ev) => save({ ...settings.languages, default: ev.target.value })}
+          className="text-sm border border-duck-dark/20 rounded-md px-3 py-2 bg-white/60 text-duck-dark cursor-pointer"
+        >
+          {spoken.map((code) => (
+            <option key={code} value={code}>
+              {getLabel(code)}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-duck-dark/40">Used for future UI localization.</span>
+      </Label>
+
+      {/* Translate from */}
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Translate to</span>
+        <select
+          value={translateTo}
+          onChange={(ev) => save({ ...settings.languages, translateTo: ev.target.value })}
+          className="text-sm border border-duck-dark/20 rounded-md px-3 py-2 bg-white/60 text-duck-dark cursor-pointer"
+        >
+          {LANGUAGES.map((l) => (
+            <option key={l.code} value={l.code}>
+              {l.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-duck-dark/40">Target language when translating content you don't speak.</span>
+      </Label>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Profile/TaskDefaults.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useSettings } from '@/state/useSettings';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+
+export const TaskDefaults = () => {
+  const { settings, saveSettings } = useSettings();
+  const claudeModels = useVisibleClaudeModels();
+  const openCodeModels = useVisibleOpenCodeModels();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [model, setModel] = useState<string | null>(settings.tasks.defaultModel);
+
+  useEffect(() => {
+    setModel(settings.tasks.defaultModel);
+  }, [settings]);
+
+  const openCodeGroups = useMemo(() => {
+    const groups: Record<string, { id: string; name: string }[]> = {};
+    for (const m of openCodeModels) {
+      const provider = m.provider ?? 'OpenCode';
+      if (!groups[provider]) groups[provider] = [];
+      groups[provider].push({ id: m.id, name: m.name });
+    }
+    return Object.entries(groups)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
+  }, [openCodeModels]);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      const isOpenCode = openCodeModels.some((m) => m.id === model);
+      const defaultProvider = isOpenCode ? ('opencode' as const) : ('claude' as const);
+      await saveSettings({ ...settings, tasks: { defaultProvider, defaultModel: model } });
+      toast.success('Task defaults saved');
+    } catch {
+      toast.error('Failed to save settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-4">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Default Model</span>
+        <Select value={model ?? ''} onValueChange={(v) => setModel(v || null)}>
+          <SelectTrigger className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark">
+            <SelectValue placeholder="Same as chat default" />
+          </SelectTrigger>
+          <SelectContent className="z-[600] max-h-[300px]">
+            {claudeModels.length > 0 && (
+              <SelectGroup>
+                <SelectLabel>Claude</SelectLabel>
+                {claudeModels.map((m) => (
+                  <SelectItem key={m.id} value={m.id}>
+                    {m.name}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            )}
+            {openCodeGroups.map(({ provider, models }) => (
+              <SelectGroup key={provider}>
+                <SelectLabel>{provider} (OpenCode)</SelectLabel>
+                {models.map((m) => (
+                  <SelectItem key={`${provider}:${m.id}`} value={m.id}>
+                    {m.name}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+          </SelectContent>
+        </Select>
+      </Label>
+
+      <Button
+        type="button"
+        onClick={handleSave}
+        disabled={isSaving}
+        className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+      >
+        {isSaving ? 'Saving...' : 'Save'}
+      </Button>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Profile/UserData.tsx

@@ -0,0 +1,126 @@
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { Camera } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type ProfileFormState = {
+  name?: string;
+};
+
+const MAX_AVATAR_SIZE = 384_000; // ~384KB to stay under 512KB varchar after base64 overhead
+
+const readFileAsBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
+
+export const UserData = () => {
+  const { user, updateUser } = useAuth();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const profileForm = useForm<ProfileFormState>({ name: user?.name ?? '' });
+
+  const handleAvatarChange = async (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const file = ev.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please select an image file');
+      return;
+    }
+
+    if (file.size > MAX_AVATAR_SIZE) {
+      toast.error('Image must be smaller than 384KB');
+      return;
+    }
+
+    const base64 = await readFileAsBase64(file);
+    setAvatarPreview(base64);
+  };
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (isUpdating) return;
+
+    setIsUpdating(true);
+    try {
+      await updateUser({
+        name: profileForm.state.name ?? '',
+        avatar: avatarPreview ?? user?.avatar ?? '',
+      });
+      toast.success('Profile updated');
+      setAvatarPreview(null);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to update profile');
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const displayAvatar = avatarPreview ?? user?.avatar ?? undefined;
+
+  return (
+    <div>
+      <div className="flex justify-center mb-6">
+        <button
+          type="button"
+          className="relative group cursor-pointer rounded-full"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Avatar className="h-20 w-20 rounded-full">
+            <AvatarImage src={displayAvatar} />
+            <AvatarFallback className="bg-duck-teal text-duck-yellow text-2xl font-bold rounded-full">
+              {user?.name?.charAt(0).toUpperCase() ?? '?'}
+            </AvatarFallback>
+          </Avatar>
+          <div className="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Camera className="h-6 w-6 text-white" />
+          </div>
+        </button>
+        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleAvatarChange} />
+      </div>
+
+      <form ref={profileForm.formRef} onSubmit={handleSubmit} className="grid gap-4">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Email</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="email"
+            value={user?.email ?? ''}
+            disabled
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Name</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="text"
+            name="name"
+            placeholder="Your name"
+            autoComplete="name"
+          />
+        </Label>
+
+        <Button
+          type="submit"
+          disabled={isUpdating}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isUpdating ? 'Saving...' : 'Save'}
+        </Button>
+      </form>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Profile/index.tsx

@@ -0,0 +1,104 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Search, User, Lock, Globe, ListChecks } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../Layout';
+import { UserData } from './UserData';
+import { ChangePassword } from './ChangePassword';
+import { Languages } from './Languages';
+import { TaskDefaults } from './TaskDefaults';
+
+const sections = [
+  {
+    key: 'profile',
+    icon: User,
+    title: 'Profile',
+    description: 'Update your name and avatar.',
+    content: <UserData />,
+  },
+  {
+    key: 'tasks',
+    icon: ListChecks,
+    title: 'Tasks',
+    description: 'Default model for file browser tasks.',
+    content: <TaskDefaults />,
+  },
+  {
+    key: 'languages',
+    icon: Globe,
+    title: 'Languages',
+    description: 'Set your spoken languages and translation preferences.',
+    content: <Languages />,
+  },
+  {
+    key: 'change-password',
+    icon: Lock,
+    title: 'Change Password',
+    description: 'Update your account password.',
+    content: <ChangePassword />,
+  },
+];
+
+const allKeys = sections.map((s) => s.key);
+
+export const Profile = () => {
+  const [search, setSearch] = useState('');
+  const [expanded, setExpanded] = useState<string[]>([]);
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const matchingKeys = useMemo(() => {
+    if (!search) return allKeys;
+    const query = search.toLowerCase();
+    return sections
+      .filter((s) => {
+        const el = sectionRefs.current[s.key];
+        return (el?.textContent?.toLowerCase() ?? '').includes(query);
+      })
+      .map((s) => s.key);
+  }, [search]);
+
+  useEffect(() => {
+    if (search) setExpanded(matchingKeys);
+  }, [search, matchingKeys]);
+
+  return (
+    <DashboardLayout>
+      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+        <Card className="w-full max-w-2xl h-fit p-6">
+          <div className="relative mb-6">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
+            <Input
+              placeholder="Search settings..."
+              value={search}
+              onChange={(ev) => setSearch(ev.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
+            {sections.map((section) => (
+              <div
+                key={section.key}
+                ref={(el) => {
+                  sectionRefs.current[section.key] = el;
+                }}
+                className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
+              >
+                <AccordionItem value={section.key}>
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-3">
+                      <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
+                      <div className="text-base font-bold text-duck-dark">{section.title}</div>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>{section.content}</AccordionContent>
+                </AccordionItem>
+              </div>
+            ))}
+          </Accordion>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/ResourcePage.tsx

@@ -0,0 +1,384 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { toast } from 'sonner';
+import { ArrowLeft, Pencil, Plus, Check, X, Trash2, Search } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { useClient } from 'hooks/useClient';
+import { useVisibleClaudeModels } from '@/state/useModels';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from './Layout';
+import { useClaude } from './Chat/useClaude';
+import { EmbeddableChat } from './Chat/EmbeddableChat';
+import type { ChatMessage } from './Chat/types';
+
+type ResourceSummary = {
+  dirName: string;
+  name: string;
+  description: string;
+  scope: 'global' | 'user';
+};
+
+type ResourceDetail = ResourceSummary & {
+  body: string;
+  filePath: string;
+  chatSessionId: string | null;
+};
+
+type ResourcePageProps = {
+  kind: string;
+  endpoint: string;
+  queryKey: string;
+};
+
+type ResourceChatProps = {
+  kind: string;
+  endpoint: string;
+  dirName: string;
+  filePath: string;
+  resourceDir: string;
+  chatSessionId: string | null;
+  isNew?: boolean;
+  onResponseEnd?: () => void;
+};
+
+const ResourceChat = ({
+  kind,
+  endpoint,
+  dirName,
+  filePath,
+  resourceDir,
+  chatSessionId,
+  isNew,
+  onResponseEnd,
+}: ResourceChatProps) => {
+  const client = useClient();
+  const claudeModels = useVisibleClaudeModels();
+  const defaultInput = chatSessionId
+    ? undefined
+    : isNew
+      ? `Help me create the content for this new ${kind} file: ${filePath}`
+      : `Help me understand and improve this ${kind} file: ${filePath}`;
+
+  const storage = useMemo(
+    () => ({
+      load: async () => {
+        const data = await client.get<{ sessionId: string | null; messages: ChatMessage[] }>(
+          `${endpoint}/${dirName}/chat`,
+        );
+        return { sessionId: data.sessionId, messages: data.messages ?? [] };
+      },
+      save: async (sessionId: string, messages: ChatMessage[]) => {
+        await client.put(`${endpoint}/${dirName}/chat`, { sessionId, messages });
+      },
+    }),
+    [endpoint, dirName],
+  );
+
+  const claude = useClaude(chatSessionId ?? undefined, undefined, {
+    replaceUrl: false,
+    storage,
+    resourceChatDir: resourceDir,
+  });
+
+  const onResponseEndRef = useRef(onResponseEnd);
+  onResponseEndRef.current = onResponseEnd;
+
+  const wasGenerating = useRef(false);
+  useEffect(() => {
+    if (wasGenerating.current && !claude.isGenerating) {
+      onResponseEndRef.current?.();
+    }
+    wasGenerating.current = claude.isGenerating;
+  }, [claude.isGenerating]);
+
+  return (
+    <EmbeddableChat
+      chat={claude}
+      provider="claude"
+      availableModels={claudeModels}
+      defaultInput={defaultInput}
+      className="h-full"
+    />
+  );
+};
+
+export const ResourcePage = ({ kind, endpoint, queryKey }: ResourcePageProps) => {
+  const client = useClient();
+  const qc = useQueryClient();
+  const [selected, setSelected] = useState<string | null>(null);
+  const [editing, setEditing] = useState(false);
+  const [isNew, setIsNew] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [search, setSearch] = useState('');
+  const [showDetail, setShowDetail] = useState(false);
+  const newNameRef = useRef<HTMLInputElement | null>(null);
+
+  const { data: items = [] } = useQuery<ResourceSummary[]>({
+    queryKey: [queryKey],
+    queryFn: () => client.get<ResourceSummary[]>(endpoint),
+  });
+
+  useEffect(() => {
+    if (items.length > 0 && !selected) {
+      setSelected(items[0]!.dirName);
+    }
+  }, [items, selected]);
+
+  const { data: detail } = useQuery<ResourceDetail>({
+    queryKey: [queryKey, selected],
+    queryFn: () => client.get<ResourceDetail>(`${endpoint}/${selected}`),
+    enabled: !!selected,
+  });
+
+  const selectItem = (dirName: string) => {
+    setSelected(dirName);
+    setShowDetail(true);
+    setIsNew(false);
+    setEditing(false);
+  };
+
+  const handleCreate = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    try {
+      const res = await client.post<{ name: string; dirName: string }>(endpoint, { name });
+      await qc.invalidateQueries({ queryKey: [queryKey] });
+      setCreating(false);
+      setNewName('');
+      setSelected(res.dirName);
+      setShowDetail(true);
+      setIsNew(true);
+      setEditing(true);
+    } catch {
+      toast.error(`Failed to create ${kind}`);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selected) return;
+    try {
+      await client.delete(`${endpoint}/${selected}`);
+      setDeleteConfirm(false);
+      setEditing(false);
+      setSelected(null);
+      setShowDetail(false);
+      await qc.invalidateQueries({ queryKey: [queryKey] });
+    } catch {
+      toast.error(`Failed to delete ${kind}`);
+    }
+  };
+
+  const filtered = items.filter(
+    (item) =>
+      !search ||
+      item.name.toLowerCase().includes(search.toLowerCase()) ||
+      item.description?.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  return (
+    <DashboardLayout mobileFull={editing}>
+      <div className="flex h-full p-2 md:p-4 gap-2 md:gap-4">
+        {/* Left panel — list */}
+        <Card
+          className={`md:w-72 shrink-0 overflow-hidden flex flex-col ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
+        >
+          <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 bg-white/60 flex items-center justify-between">
+            <span className="text-sm font-medium text-duck-dark/70">{kind}s</span>
+            {!creating && (
+              <button
+                onClick={() => {
+                  setCreating(true);
+                  setTimeout(() => newNameRef.current?.focus(), 0);
+                }}
+                className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+              >
+                <Plus className="h-4 w-4 text-duck-dark/50" />
+              </button>
+            )}
+          </div>
+          {creating && (
+            <div className="shrink-0 px-3 py-2 border-b border-duck-dark/10 bg-duck-teal/5 flex items-center gap-1.5">
+              <input
+                ref={newNameRef}
+                value={newName}
+                onChange={(ev) => setNewName(ev.target.value)}
+                onKeyDown={(ev) => {
+                  if (ev.key === 'Enter') {
+                    ev.preventDefault();
+                    handleCreate();
+                  }
+                  if (ev.key === 'Escape') {
+                    setCreating(false);
+                    setNewName('');
+                  }
+                }}
+                placeholder={`${kind} name...`}
+                className="flex-1 min-w-0 rounded border border-duck-dark/20 bg-white px-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
+              />
+              <button
+                onClick={handleCreate}
+                disabled={!newName.trim()}
+                className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors disabled:opacity-30"
+              >
+                <Check className="h-3.5 w-3.5 text-duck-teal" />
+              </button>
+              <button
+                onClick={() => {
+                  setCreating(false);
+                  setNewName('');
+                }}
+                className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+              >
+                <X className="h-3.5 w-3.5 text-duck-dark/50" />
+              </button>
+            </div>
+          )}
+          <div className="shrink-0 px-3 py-2 border-b border-duck-dark/10">
+            <div className="relative">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/30" />
+              <input
+                value={search}
+                onChange={(ev) => setSearch(ev.target.value)}
+                placeholder={`Search ${kind.toLowerCase()}s...`}
+                className="w-full rounded border border-duck-dark/15 bg-white/80 pl-7 pr-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
+              />
+            </div>
+          </div>
+          <div className="overflow-y-auto flex-1">
+            {filtered.map((item) => (
+              <button
+                key={item.dirName}
+                onClick={() => selectItem(item.dirName)}
+                className={`w-full text-left px-4 py-3 border-b border-duck-dark/5 cursor-pointer transition-colors ${
+                  selected === item.dirName ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-duck-dark truncate">{item.name}</span>
+                  <span
+                    className={`shrink-0 text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
+                      item.scope === 'user' ? 'bg-duck-teal/20 text-duck-teal' : 'bg-duck-dark/10 text-duck-dark/60'
+                    }`}
+                  >
+                    {item.scope}
+                  </span>
+                </div>
+                {item.description && <p className="text-xs text-duck-dark/50 mt-1 line-clamp-2">{item.description}</p>}
+              </button>
+            ))}
+            {items.length === 0 && (
+              <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No {kind.toLowerCase()}s found</p>
+            )}
+            {items.length > 0 && filtered.length === 0 && (
+              <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No matches</p>
+            )}
+          </div>
+        </Card>
+
+        {/* Right panel — detail + chat */}
+        <div className={`flex-1 flex flex-col gap-4 min-h-0 ${showDetail ? 'flex' : 'hidden md:flex'}`}>
+          <Card className={`flex-1 overflow-hidden flex flex-col min-h-0 ${editing ? 'hidden md:flex' : ''}`}>
+            <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 bg-white/60 flex items-center gap-2">
+              <button
+                onClick={() => setShowDetail(false)}
+                className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
+              >
+                <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
+              </button>
+              <span className="text-sm font-medium text-duck-dark/70 flex-1">
+                {detail?.name ?? `Select a ${kind.toLowerCase()}`}
+              </span>
+              {detail && (
+                <>
+                  <button
+                    onClick={() => setEditing((e) => !e)}
+                    className={`p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
+                  >
+                    <Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
+                  </button>
+                  <button
+                    onClick={() => setDeleteConfirm(true)}
+                    className="p-1 rounded hover:bg-red-50 cursor-pointer transition-colors"
+                  >
+                    <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 hover:text-red-500" />
+                  </button>
+                </>
+              )}
+            </div>
+            <div className="overflow-y-auto flex-1 p-6">
+              {detail?.body ? (
+                <article className="skill-md">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                    {detail.body}
+                  </ReactMarkdown>
+                </article>
+              ) : detail ? (
+                <p className="text-sm text-duck-dark/40 text-center mt-12">Empty file</p>
+              ) : (
+                <p className="text-sm text-duck-dark/40 text-center mt-12">
+                  Select a {kind.toLowerCase()} to view its contents
+                </p>
+              )}
+            </div>
+          </Card>
+
+          {editing && detail?.filePath && selected && (
+            <Card className="flex-1 overflow-hidden flex flex-col min-h-0">
+              <div className="shrink-0 px-4 py-1.5 border-b border-duck-dark/10 bg-white/60 flex items-center gap-2">
+                <button
+                  onClick={() => setEditing(false)}
+                  className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
+                >
+                  <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
+                </button>
+                <span className="text-xs font-medium text-duck-dark/50 flex-1">{detail?.name ?? 'Chat'}</span>
+                <button
+                  onClick={() => setEditing(false)}
+                  className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+                >
+                  <X className="h-3.5 w-3.5 text-duck-dark/50" />
+                </button>
+              </div>
+              <ResourceChat
+                kind={kind.toLowerCase()}
+                key={detail.filePath}
+                endpoint={endpoint}
+                dirName={selected}
+                filePath={detail.filePath}
+                resourceDir={detail.filePath.replace(/\/[^/]+$/, '')}
+                chatSessionId={detail.chatSessionId}
+                isNew={isNew}
+                onResponseEnd={() => qc.invalidateQueries({ queryKey: [queryKey, selected] })}
+              />
+            </Card>
+          )}
+        </div>
+      </div>
+
+      <Dialog open={deleteConfirm} onOpenChange={setDeleteConfirm}>
+        <DialogContent className="sm:max-w-md z-[700]">
+          <DialogHeader>
+            <DialogTitle>Delete {kind}</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete &quot;{detail?.name}&quot;? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-2 mt-2">
+            <Button variant="outline" onClick={() => setDeleteConfirm(false)} className="cursor-pointer">
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} className="cursor-pointer">
+              Delete
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/ServerSettings/AIHarnessesSection.tsx

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useClient } from 'hooks/useClient';
+import { useServerSettings } from '@/state/useServerSettings';
+
+type VersionInfo = { version: string | null; path: string | null; globalPath: string | null };
+type ClaudeAuthInfo = { authenticated: boolean; loggedIn?: boolean; subscriptionType?: string };
+type OpencodeAuthInfo = { authenticated: boolean; providers: string[] };
+
+export const AIHarnessesSection = () => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+  const { aiHarnesses, saveSettings } = useServerSettings();
+  const [installing, setInstalling] = useState<{ claudeCode: boolean; opencode: boolean }>({
+    claudeCode: false,
+    opencode: false,
+  });
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const { data: opencodeVersion, isLoading: opencodeLoading } = useQuery({
+    queryKey: ['OPENCODE_VERSION'],
+    queryFn: () => client.get<VersionInfo>('/server-settings/opencode/version'),
+    enabled: !!aiHarnesses?.opencode,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      return data?.version && !data?.globalPath ? 1000 : false;
+    },
+  });
+
+  const { data: claudeVersion, isLoading: claudeLoading } = useQuery({
+    queryKey: ['CLAUDE_CODE_VERSION'],
+    queryFn: () => client.get<VersionInfo>('/server-settings/claude-code/version'),
+    enabled: !!aiHarnesses?.claudeCode,
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      return data?.version && !data?.globalPath ? 1000 : false;
+    },
+  });
+
+  const { data: opencodeAuth } = useQuery({
+    queryKey: ['OPENCODE_AUTH'],
+    queryFn: () => client.get<OpencodeAuthInfo>('/server-settings/opencode/auth'),
+    enabled: !!opencodeVersion?.version,
+    refetchInterval: (query) => (!query.state.data?.authenticated ? 2000 : false),
+  });
+
+  const { data: claudeAuth } = useQuery({
+    queryKey: ['CLAUDE_CODE_AUTH'],
+    queryFn: () => client.get<ClaudeAuthInfo>('/server-settings/claude-code/auth'),
+    enabled: !!claudeVersion?.version,
+    refetchInterval: (query) => (!query.state.data?.authenticated ? 2000 : false),
+  });
+
+  const toggleHarness = (key: 'claudeCode' | 'opencode', checked: boolean) => {
+    const updated = { ...aiHarnesses, [key]: checked };
+    saveSettings({ aiHarnesses: updated });
+  };
+
+  const installClaude = async () => {
+    setInstalling((prev) => ({ ...prev, claudeCode: true }));
+    try {
+      const result = await client.post<VersionInfo>('/server-settings/claude-code/install');
+      queryClient.setQueryData(['CLAUDE_CODE_VERSION'], result);
+    } finally {
+      setInstalling((prev) => ({ ...prev, claudeCode: false }));
+    }
+  };
+
+  const installOpencode = async () => {
+    setInstalling((prev) => ({ ...prev, opencode: true }));
+    try {
+      const result = await client.post<VersionInfo>('/server-settings/opencode/install');
+      queryClient.setQueryData(['OPENCODE_VERSION'], result);
+    } finally {
+      setInstalling((prev) => ({ ...prev, opencode: false }));
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(text);
+    setTimeout(() => setCopied(null), 1500);
+  };
+
+  const CopyCommand = ({ command }: { command: string }) => (
+    <div className="mt-2 text-xs text-amber-600">
+      Not globally accessible. Run:
+      <div className="flex items-center gap-1 mt-1">
+        <code className="flex-1 bg-duck-dark/5 rounded px-2 py-1 text-duck-dark/70">{command}</code>
+        <button
+          type="button"
+          onClick={() => copyToClipboard(command)}
+          className="shrink-0 p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors"
+        >
+          {copied === command ? (
+            <Check className="h-3.5 w-3.5 text-green-600" />
+          ) : (
+            <Copy className="h-3.5 w-3.5 text-duck-dark/50" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <label className="flex items-center gap-3 cursor-pointer">
+          <Checkbox
+            checked={!!aiHarnesses?.opencode}
+            onCheckedChange={(checked) => toggleHarness('opencode', !!checked)}
+          />
+          <span className="text-sm font-medium text-duck-dark">Opencode</span>
+        </label>
+        {aiHarnesses?.opencode && (
+          <div className="ml-7 mt-2 text-xs text-duck-dark/50">
+            {opencodeLoading ? (
+              'Checking version...'
+            ) : opencodeVersion?.version ? (
+              <>
+                <div>{opencodeVersion.version}</div>
+                <div>{opencodeVersion.path}</div>
+                {opencodeAuth && (
+                  <div className={`mt-1 ${opencodeAuth.authenticated ? 'text-green-600' : 'text-amber-600'}`}>
+                    {opencodeAuth.authenticated ? (
+                      `Logged in (${opencodeAuth.providers.join(', ')})`
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <span>Not logged in</span>
+                        <Button
+                          size="sm"
+                          className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                          onClick={() => client.post('/server-settings/opencode/auth/login')}
+                        >
+                          Login
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                )}
+                {!opencodeVersion.globalPath && opencodeVersion.path && (
+                  <CopyCommand command={`sudo ln -s ${opencodeVersion.path} /usr/local/bin/opencode`} />
+                )}
+              </>
+            ) : (
+              <Button
+                size="sm"
+                className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                onClick={installOpencode}
+                disabled={installing.opencode}
+              >
+                {installing.opencode ? 'Installing...' : 'Install'}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div>
+        <label className="flex items-center gap-3 cursor-pointer">
+          <Checkbox
+            checked={!!aiHarnesses?.claudeCode}
+            onCheckedChange={(checked) => toggleHarness('claudeCode', !!checked)}
+          />
+          <span className="text-sm font-medium text-duck-dark">Claude Code</span>
+        </label>
+        {aiHarnesses?.claudeCode && (
+          <div className="ml-7 mt-2 text-xs text-duck-dark/50">
+            {claudeLoading ? (
+              'Checking version...'
+            ) : claudeVersion?.version ? (
+              <>
+                <div>{claudeVersion.version}</div>
+                <div>{claudeVersion.path}</div>
+                {claudeAuth && (
+                  <div className={`mt-1 ${claudeAuth.authenticated ? 'text-green-600' : 'text-amber-600'}`}>
+                    {claudeAuth.authenticated ? (
+                      `Logged in (${claudeAuth.subscriptionType ?? 'unknown plan'})`
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <span>Not logged in</span>
+                        <Button
+                          size="sm"
+                          className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                          onClick={() => client.post('/server-settings/claude-code/auth/login')}
+                        >
+                          Login
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                )}
+                {!claudeVersion.globalPath && claudeVersion.path && (
+                  <CopyCommand command={`sudo ln -s ${claudeVersion.path} /usr/local/bin/claude`} />
+                )}
+              </>
+            ) : (
+              <Button
+                size="sm"
+                className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90"
+                onClick={installClaude}
+                disabled={installing.claudeCode}
+              >
+                {installing.claudeCode ? 'Installing...' : 'Install'}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/ServerSettings/PluginsSection.tsx

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+import { Switch } from '@/components/ui/switch';
+import { useClient } from 'hooks/useClient';
+import { useServerSettings } from '@/state/useServerSettings';
+
+type PluginInfo = {
+  id: string;
+  name: string;
+  description: string;
+  enabled: boolean;
+};
+
+export const PluginsSection = () => {
+  const client = useClient();
+  const { plugins, saveSettings } = useServerSettings();
+
+  const { data: pluginList } = useQuery({
+    queryKey: ['PLUGINS_LIST'],
+    queryFn: () => client.get<PluginInfo[]>('/server-settings/plugins'),
+  });
+
+  const togglePlugin = (id: string, enabled: boolean) => {
+    saveSettings({ plugins: { ...plugins, [id]: enabled } });
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {pluginList?.map((p: PluginInfo) => (
+        <div key={p.id} className="flex items-center justify-between gap-4">
+          <div>
+            <div className="text-sm font-medium text-duck-dark">{p.name}</div>
+            <div className="text-xs text-duck-dark/50">{p.description}</div>
+          </div>
+          <Switch checked={plugins?.[p.id] !== false} onCheckedChange={(checked) => togglePlugin(p.id, !!checked)} />
+        </div>
+      ))}
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/ServerSettings/TerminalSection.tsx

@@ -0,0 +1,20 @@
+import { Switch } from '@/components/ui/switch';
+import { useServerSettings } from '@/state/useServerSettings';
+
+export const TerminalSection = () => {
+  const { terminalSandboxed, saveSettings } = useServerSettings();
+
+  const toggleSandbox = (checked: boolean) => {
+    saveSettings({ terminalSandboxed: checked });
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div>
+        <div className="text-sm font-medium text-duck-dark">Sandbox terminal (Docker)</div>
+        <div className="text-xs text-duck-dark/50">Restrict terminal access to the user's home directory.</div>
+      </div>
+      <Switch checked={terminalSandboxed === true} onCheckedChange={toggleSandbox} />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/ServerSettings/index.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Search, Terminal, Puzzle, Shield } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../Layout';
+import { AIHarnessesSection } from './AIHarnessesSection';
+import { PluginsSection } from './PluginsSection';
+import { TerminalSection } from './TerminalSection';
+
+const sections = [
+  {
+    key: 'ai-harnesses',
+    icon: Terminal,
+    title: 'AI Harnesses',
+    description: 'Which AI coding tools do you use?',
+    content: <AIHarnessesSection />,
+  },
+  {
+    key: 'plugins',
+    icon: Puzzle,
+    title: 'Plugins',
+    description: 'Enable or disable installed plugins.',
+    content: <PluginsSection />,
+  },
+  {
+    key: 'terminal',
+    icon: Shield,
+    title: 'Terminal',
+    description: 'Sandbox and access controls for the Terminal plugin.',
+    content: <TerminalSection />,
+  },
+];
+
+const allKeys = sections.map((s) => s.key);
+
+export const ServerSettings = () => {
+  const [search, setSearch] = useState('');
+  const [expanded, setExpanded] = useState<string[]>(allKeys);
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const matchingKeys = useMemo(() => {
+    if (!search) return allKeys;
+    const query = search.toLowerCase();
+    return sections
+      .filter((s) => {
+        const el = sectionRefs.current[s.key];
+        return (el?.textContent?.toLowerCase() ?? '').includes(query);
+      })
+      .map((s) => s.key);
+  }, [search]);
+
+  useEffect(() => {
+    setExpanded(search ? matchingKeys : allKeys);
+  }, [search, matchingKeys]);
+
+  return (
+    <DashboardLayout>
+      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+        <Card className="w-full max-w-2xl h-fit p-6">
+          <div className="relative mb-6">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
+            <Input
+              placeholder="Search settings..."
+              value={search}
+              onChange={(ev) => setSearch(ev.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
+            {sections.map((section) => (
+              <div
+                key={section.key}
+                ref={(el) => {
+                  sectionRefs.current[section.key] = el;
+                }}
+                className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
+              >
+                <AccordionItem value={section.key}>
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-3">
+                      <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
+                      <div className="text-left">
+                        <div className="text-base font-bold text-duck-dark">{section.title}</div>
+                        <div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
+                      </div>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent forceMount>{section.content}</AccordionContent>
+                </AccordionItem>
+              </div>
+            ))}
+          </Accordion>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/AISettings.tsx

@@ -0,0 +1,359 @@
+import { useState, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+import { Terminal, Eye, Trash2 } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Slider } from '@/components/ui/slider';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../Layout';
+import { useSettings } from '@/state/useSettings';
+import { useUserState } from '@/state/useUserState';
+import {
+  useClaudeModels,
+  useOpenCodeModels,
+  useVisibleClaudeModels,
+  useVisibleOpenCodeModels,
+} from '@/state/useModels';
+import type { UserSettings } from '@/state/types/user-settings';
+
+export const AISettings = () => {
+  const [mainTab, setMainTab] = useUserState('ai-settings-tab', 'chat-defaults');
+
+  return (
+    <DashboardLayout>
+      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+        <Card className="w-full max-w-2xl h-fit p-6">
+          <Tabs value={mainTab} onValueChange={setMainTab}>
+            <TabsList className="w-full mb-6">
+              <TabsTrigger value="chat-defaults" className="flex-1 gap-2 cursor-pointer">
+                <Terminal className="h-4 w-4" />
+                Chat Defaults
+              </TabsTrigger>
+              <TabsTrigger value="model-visibility" className="flex-1 gap-2 cursor-pointer">
+                <Eye className="h-4 w-4" />
+                Model Visibility
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="chat-defaults">
+              <ChatDefaultsSection />
+            </TabsContent>
+
+            <TabsContent value="model-visibility">
+              <ModelVisibilitySection />
+            </TabsContent>
+          </Tabs>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};
+
+const ChatDefaultsSection = () => {
+  const { settings, saveSettings } = useSettings();
+  const claudeModels = useVisibleClaudeModels();
+  const openCodeModels = useVisibleOpenCodeModels();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
+  const [systemPrompt, setSystemPrompt] = useState(settings.chat.systemPrompt);
+  const [temperature, setTemperature] = useState(settings.chat.temperature);
+  const [defaultPwd, setDefaultPwd] = useState(settings.chat.defaultPwd);
+
+  useEffect(() => {
+    setModel(settings.chat.defaultModel);
+    setSystemPrompt(settings.chat.systemPrompt);
+    setTemperature(settings.chat.temperature);
+    setDefaultPwd(settings.chat.defaultPwd);
+  }, [settings]);
+
+  const allModels = useMemo(
+    () => [
+      ...claudeModels.map((m) => ({ ...m, provider: 'Claude' })),
+      ...openCodeModels.map((m) => ({ ...m, provider: m.provider ?? 'OpenCode' })),
+    ],
+    [claudeModels, openCodeModels],
+  );
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      const isOpenCode = openCodeModels.some((m) => m.id === model);
+      const defaultProvider = isOpenCode ? ('opencode' as const) : ('claude' as const);
+      const updated: UserSettings = {
+        ...settings,
+        chat: { defaultProvider, defaultModel: model, systemPrompt, temperature, defaultPwd },
+      };
+      await saveSettings(updated);
+      toast.success('Chat defaults saved');
+    } catch {
+      toast.error('Failed to save settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-4">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Model</span>
+        <Select value={model ?? ''} onValueChange={(v) => setModel(v || null)}>
+          <SelectTrigger className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark">
+            <SelectValue placeholder="Default" />
+          </SelectTrigger>
+          <SelectContent className="z-[600]">
+            {allModels.map((m) => (
+              <SelectItem key={`${m.provider}:${m.id}`} value={m.id}>
+                <span className="font-bold">{m.name}</span>
+                <span className="text-duck-dark/50 ml-1">({m.provider})</span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </Label>
+
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">System Prompt</span>
+        <Textarea
+          className="bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40 min-h-[100px]"
+          placeholder="Custom instructions for the AI..."
+          value={systemPrompt}
+          onChange={(ev) => setSystemPrompt(ev.target.value)}
+        />
+      </Label>
+
+      <Label className="grid gap-2">
+        <div className="flex items-center justify-between">
+          <span className="text-duck-dark/70">Temperature</span>
+          <span className="text-sm text-duck-dark/50">{temperature.toFixed(1)}</span>
+        </div>
+        <Slider min={0} max={2} step={0.1} value={[temperature]} onValueChange={([v]) => setTemperature(v ?? 1)} />
+      </Label>
+
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Default Working Directory</span>
+        <Input
+          className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+          value={defaultPwd}
+          onChange={(ev) => setDefaultPwd(ev.target.value)}
+          placeholder="~"
+        />
+      </Label>
+
+      <Button
+        type="button"
+        onClick={handleSave}
+        disabled={isSaving}
+        className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+      >
+        {isSaving ? 'Saving...' : 'Save'}
+      </Button>
+    </div>
+  );
+};
+
+const ModelVisibilitySection = () => {
+  const { settings, saveSettings } = useSettings();
+  const claudeModels = useClaudeModels();
+  const openCodeModels = useOpenCodeModels();
+  const [subTab, setSubTab] = useUserState('ai-settings-visibility-tab', 'opencode');
+
+  const enabledModels = settings.ai?.enabledModels ?? [];
+  const enabledProviders = settings.ai?.enabledProviders ?? [];
+
+  const toggleModel = async (key: string) => {
+    const isEnabled = enabledModels.includes(key);
+    const newEnabled = isEnabled ? enabledModels.filter((id) => id !== key) : [...enabledModels, key];
+    await saveSettings({ ...settings, ai: { ...settings.ai, enabledModels: newEnabled } });
+  };
+
+  const ocGroups = useMemo(() => {
+    const groups: Record<string, { id: string; name: string }[]> = {};
+    for (const m of openCodeModels) {
+      const provider = m.provider ?? 'Other';
+      if (!groups[provider]) groups[provider] = [];
+      groups[provider].push({ id: m.id, name: m.name });
+    }
+    return Object.entries(groups)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
+  }, [openCodeModels]);
+
+  const [addingProvider, setAddingProvider] = useState(false);
+  const [selectedNewProvider, setSelectedNewProvider] = useState<string>('');
+  const disabledProviders = ocGroups.filter((g) => !enabledProviders.includes(g.provider));
+
+  const handleEnableProvider = async () => {
+    if (!selectedNewProvider) return;
+    await saveSettings({
+      ...settings,
+      ai: { ...settings.ai, enabledProviders: [...enabledProviders, selectedNewProvider] },
+    });
+    setAddingProvider(false);
+    setSelectedNewProvider('');
+  };
+
+  const handleRemoveProvider = async (provider: string) => {
+    await saveSettings({
+      ...settings,
+      ai: { ...settings.ai, enabledProviders: enabledProviders.filter((p) => p !== provider) },
+    });
+  };
+
+  return (
+    <Tabs value={subTab} onValueChange={setSubTab}>
+      <TabsList className="w-full mb-4">
+        <TabsTrigger value="opencode" className="flex-1 cursor-pointer">
+          OpenCode
+        </TabsTrigger>
+        <TabsTrigger value="claude" className="flex-1 cursor-pointer">
+          Claude
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="claude">
+        <div className="grid gap-1">
+          {claudeModels.map((m) => (
+            <label
+              key={m.id}
+              className="flex items-center justify-between py-2 px-3 rounded-md hover:bg-duck-dark/5 cursor-pointer"
+            >
+              <span className="text-sm text-duck-dark">{m.name}</span>
+              <Switch checked={enabledModels.includes(m.id)} onCheckedChange={() => toggleModel(m.id)} />
+            </label>
+          ))}
+        </div>
+      </TabsContent>
+
+      <TabsContent value="opencode">
+        <div className="flex justify-end items-center gap-2 mb-3">
+          {addingProvider ? (
+            <>
+              <Select value={selectedNewProvider} onValueChange={setSelectedNewProvider}>
+                <SelectTrigger className="h-9 flex-1 bg-white/60 border-duck-dark/20 text-duck-dark text-sm">
+                  <SelectValue placeholder="Select provider..." />
+                </SelectTrigger>
+                <SelectContent className="z-[600]">
+                  {disabledProviders.map((g) => (
+                    <SelectItem key={g.provider} value={g.provider}>
+                      {g.provider}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                type="button"
+                size="sm"
+                disabled={!selectedNewProvider}
+                onClick={handleEnableProvider}
+                className="cursor-pointer bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold disabled:opacity-50"
+              >
+                Enable
+              </Button>
+            </>
+          ) : (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="cursor-pointer"
+              onClick={() => setAddingProvider(true)}
+              disabled={disabledProviders.length === 0}
+            >
+              Add Provider
+            </Button>
+          )}
+        </div>
+        {ocGroups.length === 0 ? (
+          <p className="text-sm text-duck-dark/40">No OpenCode models available.</p>
+        ) : (
+          <OpenCodeProviderList
+            groups={ocGroups}
+            enabledProviders={enabledProviders}
+            enabledModels={enabledModels}
+            onToggleModel={toggleModel}
+            onRemoveProvider={handleRemoveProvider}
+          />
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+};
+
+type ProviderGroup = { provider: string; models: { id: string; name: string }[] };
+
+type OpenCodeProviderListProps = {
+  groups: ProviderGroup[];
+  enabledProviders: string[];
+  enabledModels: string[];
+  onToggleModel: (key: string) => void;
+  onRemoveProvider: (provider: string) => void;
+};
+
+const OpenCodeProviderList = ({
+  groups,
+  enabledProviders,
+  enabledModels,
+  onToggleModel,
+  onRemoveProvider,
+}: OpenCodeProviderListProps) => {
+  const [openProvider, setOpenProvider] = useUserState<string>('ai-settings-oc-accordion', '');
+  const enabled = groups.filter((g) => enabledProviders.includes(g.provider));
+
+  if (enabled.length === 0) {
+    return <p className="text-sm text-duck-dark/40">No providers enabled.</p>;
+  }
+
+  return (
+    <Accordion type="single" collapsible value={openProvider} onValueChange={(v) => setOpenProvider(v ?? '')}>
+      {enabled.map((g) => (
+        <AccordionItem key={g.provider} value={g.provider}>
+          <AccordionTrigger className="py-2 px-3 text-sm font-medium text-duck-dark hover:no-underline [&>svg]:ml-1">
+            <span className="flex-1 text-left">{g.provider}</span>
+            <span className="text-xs opacity-60 mr-5">{g.models.length}</span>
+            <button
+              type="button"
+              onClick={(ev) => {
+                ev.stopPropagation();
+                onRemoveProvider(g.provider);
+              }}
+              className="p-1 text-duck-dark/30 hover:text-red-500 cursor-pointer transition-colors mr-3"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </AccordionTrigger>
+          <AccordionContent className="px-3 pb-2">
+            <div className="grid gap-1 max-h-52 overflow-y-auto">
+              {[...g.models]
+                .sort((a, b) => {
+                  const aEnabled = enabledModels.includes(`${g.provider}:${a.id}`);
+                  const bEnabled = enabledModels.includes(`${g.provider}:${b.id}`);
+                  if (aEnabled !== bEnabled) return aEnabled ? -1 : 1;
+                  return a.name.localeCompare(b.name);
+                })
+                .map((m) => {
+                  const key = `${g.provider}:${m.id}`;
+                  return (
+                    <label
+                      key={m.id}
+                      className="flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-duck-dark/5 cursor-pointer"
+                    >
+                      <span className="text-sm text-duck-dark/70">{m.name}</span>
+                      <Switch checked={enabledModels.includes(key)} onCheckedChange={() => onToggleModel(key)} />
+                    </label>
+                  );
+                })}
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/Appearance.tsx

@@ -0,0 +1,49 @@
+import { Palette, Sun, Moon } from 'lucide-react';
+import { useTheme } from '@/components/ui/ThemeProvider';
+import { Card } from '@/components/Card';
+import { useSettings } from '@/state/useSettings';
+
+export const Appearance = () => {
+  const { settings, saveSettings } = useSettings();
+  const { theme, setTheme } = useTheme();
+
+  const handleThemeChange = (newTheme: string) => {
+    setTheme(newTheme);
+    saveSettings({ ...settings, appearance: { ...settings.appearance, theme: newTheme } });
+  };
+
+  return (
+    <Card className="p-6 h-fit">
+      <div className="flex items-center gap-3 mb-6">
+        <Palette className="h-5 w-5 text-duck-forest" />
+        <h2 className="text-xl font-bold text-duck-dark">Appearance</h2>
+      </div>
+
+      <div className="grid gap-3">
+        <span className="text-duck-dark/70 text-sm">Theme</span>
+        <div className="flex items-center border border-duck-dark/20 rounded-md overflow-hidden">
+          <button
+            type="button"
+            onClick={() => handleThemeChange('light')}
+            className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium cursor-pointer transition-colors ${
+              theme === 'light' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'
+            }`}
+          >
+            <Sun className="h-4 w-4" />
+            Light
+          </button>
+          <button
+            type="button"
+            onClick={() => handleThemeChange('dark')}
+            className={`flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium cursor-pointer transition-colors ${
+              theme === 'dark' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-dark/50 hover:bg-duck-dark/5'
+            }`}
+          >
+            <Moon className="h-4 w-4" />
+            Dark
+          </button>
+        </div>
+      </div>
+    </Card>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/index.tsx

@@ -0,0 +1,31 @@
+import { Link } from 'react-router';
+import { Bot, ChevronRight } from 'lucide-react';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../Layout';
+import { Appearance } from './Appearance';
+
+export const Settings = () => {
+  return (
+    <DashboardLayout>
+      <div className="flex items-center justify-center h-full px-4">
+        <div className="w-full max-w-4xl grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <Link to="/settings/ai">
+            <Card className="p-6 hover:border-duck-teal/50 transition-colors cursor-pointer">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Bot className="h-5 w-5 text-duck-forest" />
+                  <div>
+                    <h2 className="text-xl font-bold text-duck-dark">AI Settings</h2>
+                    <p className="text-sm text-duck-dark/60">Chat defaults, model visibility</p>
+                  </div>
+                </div>
+                <ChevronRight className="h-5 w-5 text-duck-dark/40" />
+              </div>
+            </Card>
+          </Link>
+          <Appearance />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/SignoutScreen/index.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useAuth } from 'hooks/useAuth';
+
+export const SignoutScreen = () => {
+  const { signout } = useAuth();
+
+  useEffect(() => {
+    const logout = async () => {
+      await signout();
+      window.location.href = '/';
+    };
+    logout();
+  }, []);
+
+  return null;
+};

src/apps/officer-web/Screens/Dashboard/Skills/index.tsx

@@ -0,0 +1,3 @@
+import { ResourcePage } from '../ResourcePage';
+
+export const Skills = () => <ResourcePage kind="Skill" endpoint="/skills" queryKey="skills" />;

src/apps/officer-web/Screens/Dashboard/TaskLogs/index.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react';
+import { Search, AlertCircle, CheckCircle2, Clock, ArrowLeft } from 'lucide-react';
+import { useClient } from 'hooks/useClient';
+import { DashboardLayout } from '../Layout';
+import { Card } from '@/components/Card';
+import { MessageBubble } from '../Chat/MessageBubble';
+import type { ChatMessage } from '../Chat/types';
+
+type LogMetadata = {
+  filename: string;
+  taskName: string;
+  taskDirName: string;
+  entryName: string;
+  entryType: 'file' | 'directory';
+  provider: string;
+  model: string;
+  startedAt: string;
+  completedAt: string | null;
+  isError: boolean;
+};
+
+type FullLog = LogMetadata & {
+  messages: ChatMessage[];
+};
+
+const formatDate = (iso: string) => {
+  const d = new Date(iso);
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+};
+
+const ProviderBadge = ({ provider }: { provider: string }) => (
+  <span
+    className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${provider === 'claude' ? 'bg-orange-100 text-orange-700' : 'bg-blue-100 text-blue-700'}`}
+  >
+    {provider}
+  </span>
+);
+
+export const TaskLogs = () => {
+  const client = useClient();
+  const [logs, setLogs] = useState<LogMetadata[]>([]);
+  const [selectedFilename, setSelectedFilename] = useState<string | null>(null);
+  const [showDetail, setShowDetail] = useState(false);
+  const [selectedLog, setSelectedLog] = useState<FullLog | null>(null);
+  const [search, setSearch] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    client
+      .get<LogMetadata[]>('/task-logs')
+      .then((data) => {
+        setLogs(data);
+        setIsLoading(false);
+      })
+      .catch(() => setIsLoading(false));
+  }, []);
+
+  useEffect(() => {
+    if (!selectedFilename) {
+      setSelectedLog(null);
+      return;
+    }
+    client
+      .get<FullLog>(`/task-logs/${selectedFilename}`)
+      .then(setSelectedLog)
+      .catch(() => setSelectedLog(null));
+  }, [selectedFilename]);
+
+  const filtered = search
+    ? logs.filter((l) => {
+        const q = search.toLowerCase();
+        return (
+          l.taskName.toLowerCase().includes(q) ||
+          l.entryName.toLowerCase().includes(q) ||
+          l.provider.toLowerCase().includes(q)
+        );
+      })
+    : logs;
+
+  return (
+    <DashboardLayout>
+      <div className="flex h-full p-3 md:p-6 gap-4">
+        {/* Left panel: list */}
+        <Card
+          className={`md:w-80 shrink-0 flex flex-col overflow-hidden ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
+        >
+          <div className="p-3 border-b border-duck-dark/10">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/40" />
+              <input
+                type="text"
+                placeholder="Search logs..."
+                value={search}
+                onChange={(ev) => setSearch(ev.target.value)}
+                className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-duck-dark/15 bg-white/60 focus:outline-none focus:ring-1 focus:ring-duck-teal/40"
+              />
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto">
+            {isLoading && (
+              <div className="flex items-center justify-center h-32 text-duck-dark/30 text-sm">Loading...</div>
+            )}
+            {!isLoading && filtered.length === 0 && (
+              <div className="flex items-center justify-center h-32 text-duck-dark/30 text-sm">No logs found</div>
+            )}
+            {filtered.map((log) => (
+              <button
+                key={log.filename}
+                onClick={() => {
+                  setSelectedFilename(log.filename);
+                  setShowDetail(true);
+                }}
+                className={`w-full text-left px-3 py-2.5 border-b border-duck-dark/5 hover:bg-duck-dark/5 transition-colors cursor-pointer ${selectedFilename === log.filename ? 'bg-duck-teal/10' : ''}`}
+              >
+                <div className="flex items-center gap-2 mb-0.5">
+                  {log.isError ? (
+                    <AlertCircle className="h-3.5 w-3.5 text-red-500 shrink-0" />
+                  ) : log.completedAt ? (
+                    <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
+                  ) : (
+                    <Clock className="h-3.5 w-3.5 text-amber-500 shrink-0" />
+                  )}
+                  <span className="text-sm font-medium text-duck-dark truncate">{log.taskName}</span>
+                </div>
+                <div className="flex items-center gap-2 ml-5.5">
+                  <span className="text-xs text-duck-dark/50 truncate">{log.entryName}</span>
+                  <ProviderBadge provider={log.provider} />
+                </div>
+                <div className="text-[10px] text-duck-dark/40 ml-5.5 mt-0.5">{formatDate(log.startedAt)}</div>
+              </button>
+            ))}
+          </div>
+        </Card>
+
+        {/* Right panel: log viewer */}
+        <Card className={`flex-1 min-w-0 flex flex-col overflow-hidden ${showDetail ? 'flex' : 'hidden md:flex'}`}>
+          {!selectedLog && (
+            <div className="flex flex-col items-center justify-center h-full text-duck-dark/30 text-sm gap-2">
+              Select a log to view
+              <button onClick={() => setShowDetail(false)} className="md:hidden text-duck-teal text-xs cursor-pointer">
+                <ArrowLeft className="h-4 w-4 inline mr-1" />
+                Back to list
+              </button>
+            </div>
+          )}
+          {selectedLog && (
+            <>
+              <div className="shrink-0 px-4 py-3 border-b border-duck-dark/10 flex items-center gap-3">
+                <button
+                  onClick={() => setShowDetail(false)}
+                  className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
+                >
+                  <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
+                </button>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-duck-dark">{selectedLog.taskName}</span>
+                    <ProviderBadge provider={selectedLog.provider} />
+                  </div>
+                  <div className="text-xs text-duck-dark/50 mt-0.5">
+                    {selectedLog.entryName} &middot; {selectedLog.model} &middot; {formatDate(selectedLog.startedAt)}
+                    {selectedLog.completedAt && ` — ${formatDate(selectedLog.completedAt)}`}
+                  </div>
+                </div>
+                {selectedLog.isError && (
+                  <span className="text-xs text-red-600 bg-red-50 px-2 py-0.5 rounded-full">Error</span>
+                )}
+              </div>
+              <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                {selectedLog.messages.map((msg, i) => (
+                  <MessageBubble key={i} message={msg} />
+                ))}
+              </div>
+            </>
+          )}
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Tasks/index.tsx

@@ -0,0 +1,3 @@
+import { ResourcePage } from '../ResourcePage';
+
+export const Tasks = () => <ResourcePage kind="Task" endpoint="/tasks" queryKey="tasks" />;

src/apps/officer-web/Screens/LandingPage/LandingPage.tsx

@@ -0,0 +1,10 @@
+import { AuthLayout } from './Layout';
+import { Hero } from './components/Hero';
+
+export function LandingPage() {
+  return (
+    <AuthLayout>
+      <Hero />
+    </AuthLayout>
+  );
+}

src/apps/officer-web/Screens/LandingPage/Layout.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { useAuth } from 'hooks/useAuth';
+import { PixelGrid } from './components/PixelGrid';
+import { DuckAvatar } from './components/DuckAvatar';
+import { SignupModal } from './components/SignupModal';
+import { LoginModal } from './components/LoginModal';
+import { ForgotPasswordModal } from './components/ForgotPasswordModal';
+import { VerifyModal } from './components/VerifyModal';
+import { ResetPasswordModal } from './components/ResetPasswordModal';
+
+type AuthLayoutProps = {
+  children?: ReactNode;
+};
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { registrationOpen } = useAuth();
+
+  const signupOpen = registrationOpen && location.pathname === '/auth/register';
+  const loginOpen = location.pathname === '/auth/login';
+  const forgotPasswordOpen = location.pathname === '/auth/forgot-password';
+  const verifyOpen = location.pathname === '/auth/verify';
+  const resetPasswordOpen = location.pathname === '/auth/reset-password';
+
+  const closeModal = (open: boolean) => !open && navigate('/');
+
+  return (
+    <div className="relative overflow-hidden h-dvh outline-none fixed inset-0">
+      <PixelGrid />
+      <DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />
+
+      <section className="relative h-dvh snap-start overflow-hidden">
+        {/* Background layer */}
+        <div
+          className="absolute inset-0 z-0"
+          style={{
+            backgroundImage: 'url(/static/landscape1.jpg)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+          }}
+        />
+
+        {/* Content layer - above duck and pixel grid */}
+        <div className="absolute inset-0 z-[520]">{children}</div>
+      </section>
+
+      <SignupModal open={signupOpen} onOpenChange={closeModal} />
+      <LoginModal open={loginOpen} onOpenChange={closeModal} />
+      <ForgotPasswordModal open={forgotPasswordOpen} onOpenChange={closeModal} />
+      <VerifyModal open={verifyOpen} onOpenChange={closeModal} />
+      <ResetPasswordModal open={resetPasswordOpen} onOpenChange={closeModal} />
+    </div>
+  );
+}

src/apps/officer-web/Screens/LandingPage/components/DuckAvatar/DebugPanel.tsx

@@ -0,0 +1,43 @@
+type DebugPanelProps = {
+  fullControlMode: boolean;
+  cameraInfo: {
+    cameraPosition: number[];
+    target: number[];
+    zoom: number;
+  };
+  modelInfo: {
+    position: number[];
+    rotation: number[];
+    scale: number;
+  };
+};
+
+export function DebugPanel({ fullControlMode, cameraInfo, modelInfo }: DebugPanelProps) {
+  return (
+    <div className="fixed top-4 left-4 bg-black/80 text-white p-4 rounded text-xs font-mono space-y-2 z-[100]">
+      <div className="font-bold text-blue-400">Controls:</div>
+      <div className={fullControlMode ? 'text-green-300' : 'text-yellow-300'}>
+        Mode: {fullControlMode ? 'FULL CONTROL' : 'ROTATION ONLY'}
+      </div>
+      <div>* Left-click/Touch + drag: Rotate</div>
+      {fullControlMode && (
+        <>
+          <div>* Right-click + drag: Pan</div>
+          <div>* Scroll: Zoom</div>
+        </>
+      )}
+      <div>* Ctrl+Alt+Enter: Toggle full control</div>
+      <div>* Ctrl+Alt+D: Toggle debug panel</div>
+
+      <div className="font-bold text-green-400 pt-2">Camera:</div>
+      <div>Position: [{cameraInfo.cameraPosition.map((v) => v.toFixed(2)).join(', ')}]</div>
+      <div>Target: [{cameraInfo.target.map((v) => v.toFixed(2)).join(', ')}]</div>
+      <div>Zoom: {cameraInfo.zoom.toFixed(2)}</div>
+
+      <div className="font-bold text-yellow-400 pt-2">Model:</div>
+      <div>Position: [{modelInfo.position.map((v) => v.toFixed(2)).join(', ')}]</div>
+      <div>Rotation: [{modelInfo.rotation.map((v) => v.toFixed(2)).join(', ')}]</div>
+      <div>Scale: {modelInfo.scale.toFixed(2)}</div>
+    </div>
+  );
+}

src/apps/officer-web/Screens/LandingPage/components/DuckAvatar/DuckAvatar.tsx

@@ -0,0 +1,118 @@
+import { Canvas, useThree } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+import { useEffect, useState, useRef } from 'react';
+import { DuckModel } from './DuckModel';
+import { DebugPanel } from './DebugPanel';
+
+type CameraInfoProps = {
+  onUpdate: (info: { cameraPosition: number[]; target: number[]; zoom: number }) => void;
+  initialTarget: [number, number, number];
+  fullControlMode: boolean;
+  initialPosition: [number, number, number];
+};
+
+function CameraInfo({ onUpdate, initialTarget, fullControlMode, initialPosition }: CameraInfoProps) {
+  const { camera } = useThree();
+  const controlsRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (controlsRef.current) {
+      controlsRef.current.target.set(...initialTarget);
+      camera.position.set(...initialPosition);
+      controlsRef.current.update();
+    }
+  }, [initialTarget, initialPosition, camera]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (controlsRef.current) {
+        const controls = controlsRef.current;
+        onUpdate({
+          cameraPosition: camera.position.toArray(),
+          target: controls.target.toArray(),
+          zoom: camera.zoom,
+        });
+      }
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [camera, onUpdate]);
+
+  return (
+    <OrbitControls
+      ref={controlsRef}
+      enabled={fullControlMode}
+      enableRotate={fullControlMode}
+      enableZoom={fullControlMode}
+      enablePan={fullControlMode}
+      target={initialTarget}
+    />
+  );
+}
+
+type DuckAvatarProps = {
+  showDebug: boolean;
+  fullControlMode: boolean;
+  currentSection: number;
+};
+
+export function DuckAvatar({ showDebug, fullControlMode, currentSection }: DuckAvatarProps) {
+  const isHeroSection = currentSection === 0;
+  const [cameraInfo, setCameraInfo] = useState({
+    cameraPosition: [2.89, 5.24, 7.38],
+    target: [0.3, 3.29, -0.4],
+    zoom: 1,
+  });
+
+  const [modelInfo, setModelInfo] = useState({
+    position: [0, -0.2, 0],
+    rotation: [-0.1, -0.75, 0],
+    scale: 4.5,
+  });
+
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const heroClasses = 'fixed bottom-0 left-1/2 -translate-x-1/2 w-[60vh] h-[75vh]';
+  const miniClasses = 'fixed bottom-4 right-4 w-[20vh] h-[25vh]';
+
+  return (
+    <div
+      className={`${isHeroSection ? heroClasses : miniClasses} overflow-visible z-[510] pointer-events-none`}
+      style={{
+        background: 'transparent',
+        opacity: isLoaded ? 1 : 0,
+      }}
+    >
+      <div className="w-full h-full pointer-events-none overflow-visible" style={{ background: 'transparent' }}>
+        <Canvas
+          camera={{
+            position: [2.89, 5.24, 7.38],
+            fov: 65,
+            near: 0.1,
+            far: 1000,
+          }}
+          style={{ background: 'transparent' }}
+        >
+          <ambientLight intensity={1.5} />
+          <directionalLight position={[10, 10, 5]} intensity={2} />
+          <directionalLight position={[-10, -10, -5]} intensity={1} />
+          <pointLight position={[0, 5, 0]} intensity={1.5} />
+          <CameraInfo
+            onUpdate={setCameraInfo}
+            initialTarget={[0.3, 3.29, -0.4]}
+            fullControlMode={fullControlMode}
+            initialPosition={[2.89, 5.24, 7.38]}
+          />
+          <DuckModel
+            onUpdate={setModelInfo}
+            onAssetsLoaded={() => {
+              setIsLoaded(true);
+            }}
+            currentSection={currentSection}
+          />
+        </Canvas>
+      </div>
+      {showDebug && <DebugPanel fullControlMode={fullControlMode} cameraInfo={cameraInfo} modelInfo={modelInfo} />}
+    </div>
+  );
+}

src/apps/officer-web/Screens/LandingPage/components/DuckAvatar/DuckModel.tsx

@@ -0,0 +1,68 @@
+import { useRef, useEffect } from 'react';
+import { useGLTF, useAnimations } from '@react-three/drei';
+
+type DuckModelProps = {
+  onUpdate: (info: { position: number[]; rotation: number[]; scale: number }) => void;
+  onAssetsLoaded: () => void;
+  currentSection: number;
+};
+
+export function DuckModel({ onUpdate, onAssetsLoaded, currentSection }: DuckModelProps) {
+  const character = useGLTF('/static/duck3D/Character_output.glb');
+  const animations = useGLTF('/static/duck3D/Meshy_Merged_Animations.glb');
+  const meshRef = useRef<any>(null);
+  const { actions } = useAnimations(animations.animations, meshRef);
+
+  useEffect(() => {
+    onAssetsLoaded();
+  }, [character, animations, onAssetsLoaded]);
+
+  useEffect(() => {
+    if (!actions) return;
+
+    const isContactSection = currentSection === 6;
+
+    if (isContactSection) {
+      Object.values(actions).forEach((a) => a?.fadeOut(0.4));
+      return;
+    }
+
+    const action = actions['Walking'];
+    if (!action) return;
+
+    Object.values(actions).forEach((a) => a?.fadeOut(0.4));
+
+    action.reset();
+    action.setLoop(2201, Infinity);
+    action.clampWhenFinished = false;
+    action.fadeIn(0.4);
+    action.play();
+  }, [actions, currentSection]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (meshRef.current) {
+        onUpdate({
+          position: meshRef.current.position.toArray(),
+          rotation: meshRef.current.rotation.toArray().slice(0, 3),
+          scale: meshRef.current.scale.x,
+        });
+      }
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [onUpdate]);
+
+  const isContactSection = currentSection === 6;
+  const rotationY = isContactSection ? 0 : (10 * Math.PI) / 180;
+
+  return (
+    <primitive
+      ref={meshRef}
+      object={character.scene}
+      position={[0, -0.2, 0]}
+      scale={4.5}
+      rotation={[-0.1, rotationY, 0]}
+    />
+  );
+}

src/apps/officer-web/Screens/LandingPage/components/DuckAvatar/index.tsx

@@ -0,0 +1 @@
+export * from './DuckAvatar';

src/apps/officer-web/Screens/LandingPage/components/ForgotPasswordModal.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router';
+import { PaperDialog } from '@/components/Dialogs';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type ForgotPasswordFormState = {
+  email?: string;
+};
+
+const validateForm = (state: Partial<ForgotPasswordFormState>) => {
+  return !!state.email;
+};
+
+type ForgotPasswordModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const ForgotPasswordModal = ({ open, onOpenChange }: ForgotPasswordModalProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [sent, setSent] = useState(false);
+  const { state, formRef, update, isValid } = useForm<ForgotPasswordFormState>({}, validateForm);
+  const { forgotPassword } = useAuth();
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!isValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await forgotPassword({ email: state.email! });
+      setSent(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to send recovery email. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = (isOpen: boolean) => {
+    if (!isOpen) {
+      setSent(false);
+      if (formRef.current) {
+        update({ email: '' });
+      }
+    }
+    onOpenChange(isOpen);
+  };
+
+  const isDisabled = !isValid || isSubmitting;
+
+  return (
+    <PaperDialog
+      open={open}
+      onOpenChange={handleClose}
+      onOpenAutoFocus={(ev) => {
+        if (!sent) {
+          const firstInput = (ev.currentTarget as HTMLElement | null)?.querySelector('input');
+          firstInput?.focus();
+        }
+      }}
+    >
+      {sent ? (
+        <div className="text-center py-4">
+          <h2 className="text-2xl font-bold text-duck-dark">Email Sent</h2>
+          <p className="mt-4 text-duck-dark/70">Please check your email for further instructions.</p>
+          <Button
+            onClick={() => handleClose(false)}
+            className="mt-6 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-8 py-3 transition-all duration-200 hover:scale-105 cursor-pointer"
+          >
+            Close
+          </Button>
+        </div>
+      ) : (
+        <>
+          <DialogHeader>
+            <DialogTitle className="text-duck-dark text-2xl font-bold">Forgot Password</DialogTitle>
+            <DialogDescription className="text-duck-dark/60">
+              Enter your email and we'll send you a recovery link
+            </DialogDescription>
+          </DialogHeader>
+
+          <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Email</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="email"
+                name="email"
+                placeholder="you@example.com"
+                autoComplete="email"
+              />
+            </Label>
+
+            <DialogFooter className="pt-2">
+              <Button
+                type="submit"
+                disabled={isDisabled}
+                className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+              >
+                {isSubmitting ? 'Sending...' : 'Send Recovery Email'}
+              </Button>
+            </DialogFooter>
+
+            <p className="text-center text-sm text-duck-dark/60">
+              Remember your password?{' '}
+              <Link to="/auth/login" className="text-duck-forest underline hover:text-duck-forest/80">
+                Sign In
+              </Link>
+            </p>
+          </form>
+        </>
+      )}
+    </PaperDialog>
+  );
+};

src/apps/officer-web/Screens/LandingPage/components/Hero/Hero.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+import { toast } from 'sonner';
+import { useAuth } from 'hooks/useAuth';
+import { Button } from '@/components/ui/button';
+import { OfficerSvgLogo } from '../Logos';
+
+export function Hero() {
+  const navigate = useNavigate();
+  const { registrationOpen, signup } = useAuth();
+  const [email, setEmail] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const handleBootstrap = async () => {
+    const trimmed = email.trim();
+    if (!trimmed || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await signup({ email: trimmed });
+      setDone(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Bootstrap failed. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <header className="pt-28 md:pt-20 lg:pt-24 xl:pt-0 z-20 flex justify-center">
+        <div className="hidden md:block">
+          <OfficerSvgLogo size="2xl" />
+        </div>
+        <div className="block md:hidden">
+          <OfficerSvgLogo size="lg" />
+        </div>
+      </header>
+
+      {registrationOpen ? (
+        <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-8 md:pb-12">
+          <div className="bg-white/90 border-2 border-duck-dark/20 rounded-2xl p-8 max-w-md w-full mx-4 shadow-xl">
+            {done ? (
+              <div className="text-center">
+                <h2 className="text-2xl font-bold text-duck-dark mb-2">Check your email</h2>
+                <p className="text-sm text-duck-dark/60">
+                  A verification link has been sent to <strong>{email}</strong>. Click it to activate your account.
+                </p>
+              </div>
+            ) : (
+              <>
+                <h2 className="text-2xl font-bold text-duck-dark mb-2">Welcome, Admin</h2>
+                <p className="text-sm text-duck-dark/60 mb-6">Enter your email to create your administrator account.</p>
+                <div className="flex gap-2">
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(ev) => setEmail(ev.target.value)}
+                    onKeyDown={(ev) => {
+                      if (ev.key === 'Enter') {
+                        ev.preventDefault();
+                        handleBootstrap();
+                      }
+                    }}
+                    placeholder="admin@example.com"
+                    className="flex-1 px-4 py-2.5 rounded-lg border-2 border-duck-dark/20 text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:border-duck-teal/50"
+                  />
+                  <Button
+                    onClick={handleBootstrap}
+                    disabled={!email.trim() || isSubmitting}
+                    className="bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-6 py-2.5 rounded-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+                  >
+                    {isSubmitting ? 'Sending...' : 'Bootstrap'}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="absolute top-4 right-4 md:top-6 md:right-6 z-20">
+          <Button
+            size="default"
+            onClick={() => navigate('/auth/login')}
+            className="bg-duck-teal hover:bg-duck-teal/90 text-duck-yellow rounded-lg font-bold transition-all duration-200 hover:scale-105 cursor-pointer px-12 py-5 text-lg md:text-xl lg:text-2xl"
+          >
+            Login
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}

src/apps/officer-web/Screens/LandingPage/components/Hero/index.tsx

@@ -0,0 +1 @@
+export * from './Hero';

src/apps/officer-web/Screens/LandingPage/components/LoginModal.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router';
+import { PaperDialog } from '@/components/Dialogs';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type LoginFormState = {
+  email?: string;
+  password?: string;
+};
+
+const validateForm = (state: Partial<LoginFormState>) => {
+  const { email, password } = state;
+  if (!email || !password) return false;
+  return true;
+};
+
+type LoginModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const LoginModal = ({ open, onOpenChange }: LoginModalProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { state, formRef, update, isValid } = useForm<LoginFormState>({}, validateForm);
+  const { signin } = useAuth();
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!isValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await signin({ email: state.email!, password: state.password! });
+      window.location.href = '/';
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Login failed. Please try again.');
+      update({ ...state, password: '' });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = (isOpen: boolean) => {
+    if (!isOpen) {
+      if (formRef.current) {
+        update({ email: '', password: '' });
+      }
+    }
+    onOpenChange(isOpen);
+  };
+
+  const isDisabled = !isValid || isSubmitting;
+
+  return (
+    <PaperDialog
+      open={open}
+      onOpenChange={handleClose}
+      onOpenAutoFocus={(ev) => {
+        const firstInput = (ev.currentTarget as HTMLElement | null)?.querySelector('input');
+        firstInput?.focus();
+      }}
+    >
+      <DialogHeader>
+        <DialogTitle className="text-duck-dark text-2xl font-bold">Welcome Back</DialogTitle>
+        <DialogDescription className="text-duck-dark/60">Sign in to your account</DialogDescription>
+      </DialogHeader>
+
+      <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Email</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="email"
+            name="email"
+            placeholder="you@example.com"
+            autoComplete="email"
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="password"
+            placeholder="Your password"
+            autoComplete="current-password"
+          />
+        </Label>
+
+        <DialogFooter className="pt-2">
+          <Button
+            type="submit"
+            disabled={isDisabled}
+            className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+          >
+            {isSubmitting ? 'Signing in...' : 'Sign In'}
+          </Button>
+        </DialogFooter>
+
+        <div className="text-center text-sm text-duck-dark/60 grid gap-1">
+          <p>
+            Don't have an account?{' '}
+            <Link to="/auth/register" className="text-duck-forest underline hover:text-duck-forest/80">
+              Register
+            </Link>
+          </p>
+          <p>
+            <Link to="/auth/forgot-password" className="text-duck-forest underline hover:text-duck-forest/80">
+              Forgot password?
+            </Link>
+          </p>
+        </div>
+      </form>
+    </PaperDialog>
+  );
+};

src/apps/officer-web/Screens/LandingPage/components/Logos/DevSvgLogo.tsx

@@ -0,0 +1,23 @@
+type SvgLogoProps = {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+export function OfficerIconLogo({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig[size];
+
+  return (
+    <img
+      src="/static/officer-icon-square.svg"
+      alt="Officer Icon"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+const sizeConfig = {
+  xs: { width: '120px' },
+  sm: { width: '200px' },
+  md: { width: '400px' },
+  lg: { width: '600px' },
+  xl: { width: '800px' },
+};

src/apps/officer-web/Screens/LandingPage/components/Logos/PastilhasSvgLogo.tsx

@@ -0,0 +1,55 @@
+type SvgLogoProps = {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  square?: boolean;
+};
+
+export function OfficerSvgLogo({ size = 'xl', square = false }: SvgLogoProps) {
+  if (square) {
+    return <OfficerSvgLogoSquare size={size} />;
+  }
+
+  return <OfficerSvgLogoRegular size={size} />;
+}
+
+export function OfficerSvgLogoRegular({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig.regular[size];
+
+  return (
+    <img
+      src="/static/officer-logo.svg"
+      alt="Officer Logo"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+export function OfficerSvgLogoSquare({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig.square[size];
+
+  return (
+    <img
+      src="/static/officer-logo-square.svg"
+      alt="Officer Logo"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+const sizeConfig = {
+  regular: {
+    xs: { width: '180px' },
+    sm: { width: '300px' },
+    md: { width: '600px' },
+    lg: { width: '900px' },
+    xl: { width: '1200px' },
+    '2xl': { width: '1500px' },
+  },
+  square: {
+    xs: { width: '120px' },
+    sm: { width: '200px' },
+    md: { width: '400px' },
+    lg: { width: '600px' },
+    xl: { width: '800px' },
+    '2xl': { width: '1000px' },
+  },
+};

src/apps/officer-web/Screens/LandingPage/components/Logos/index.tsx

@@ -0,0 +1,2 @@
+export * from './PastilhasSvgLogo';
+export * from './DevSvgLogo';

src/apps/officer-web/Screens/LandingPage/components/PixelGrid.tsx

@@ -0,0 +1,14 @@
+export function PixelGrid() {
+  return (
+    <div
+      className="fixed inset-0 pointer-events-none z-[500]"
+      style={{
+        backgroundImage: `
+          linear-gradient(to right, rgba(20, 83, 45, 0.1) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(20, 83, 45, 0.1) 1px, transparent 1px)
+        `,
+        backgroundSize: '20px 20px',
+      }}
+    />
+  );
+}

src/apps/officer-web/Screens/LandingPage/components/ResetPasswordModal.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router';
+import { PaperDialog } from '@/components/Dialogs';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type ResetPasswordFormState = {
+  password?: string;
+  confirmPassword?: string;
+};
+
+const validateForm = (state: Partial<ResetPasswordFormState>) => {
+  const { password, confirmPassword } = state;
+  if (!password || !confirmPassword) return false;
+  if (password !== confirmPassword) return false;
+  return true;
+};
+
+type ResetPasswordModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const ResetPasswordModal = ({ open, onOpenChange }: ResetPasswordModalProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [reset, setReset] = useState(false);
+  const { state, formRef, update, isValid } = useForm<ResetPasswordFormState>({}, validateForm);
+  const { resetPassword } = useAuth();
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!isValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      const verificationCode = new URL(window.location.href).searchParams.get('verificationCode');
+      if (!verificationCode) throw new Error('Invalid verification code');
+      await resetPassword({ password: state.password!, verificationCode });
+      setReset(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Password reset failed. Please try again.');
+      update({ password: '', confirmPassword: '' });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = (isOpen: boolean) => {
+    if (!isOpen) {
+      setReset(false);
+      if (formRef.current) {
+        update({ password: '', confirmPassword: '' });
+      }
+    }
+    onOpenChange(isOpen);
+  };
+
+  const isDisabled = !isValid || isSubmitting;
+
+  return (
+    <PaperDialog
+      open={open}
+      onOpenChange={handleClose}
+      onOpenAutoFocus={(ev) => {
+        if (!reset) {
+          const firstInput = (ev.currentTarget as HTMLElement | null)?.querySelector('input');
+          firstInput?.focus();
+        }
+      }}
+    >
+      {reset ? (
+        <div className="text-center py-4">
+          <h2 className="text-2xl font-bold text-duck-dark">Password Reset</h2>
+          <p className="mt-4 text-duck-dark/70">Your password has been reset. You can now sign in.</p>
+          <Button
+            onClick={() => (window.location.href = '/auth/login')}
+            className="mt-6 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-8 py-3 transition-all duration-200 hover:scale-105 cursor-pointer"
+          >
+            Sign In
+          </Button>
+        </div>
+      ) : (
+        <>
+          <DialogHeader>
+            <DialogTitle className="text-duck-dark text-2xl font-bold">Reset Password</DialogTitle>
+            <DialogDescription className="text-duck-dark/60">Enter your new password</DialogDescription>
+          </DialogHeader>
+
+          <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">New Password</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="password"
+                name="password"
+                placeholder="Min 12 chars, mixed case, number, symbol"
+                autoComplete="new-password"
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Confirm Password</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="password"
+                name="confirmPassword"
+                placeholder="Repeat your password"
+                autoComplete="new-password"
+              />
+            </Label>
+
+            <DialogFooter className="pt-2">
+              <Button
+                type="submit"
+                disabled={isDisabled}
+                className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+              >
+                {isSubmitting ? 'Resetting...' : 'Reset Password'}
+              </Button>
+            </DialogFooter>
+
+            <p className="text-center text-sm text-duck-dark/60">
+              <Link to="/auth/login" className="text-duck-forest underline hover:text-duck-forest/80">
+                Back to Sign In
+              </Link>
+            </p>
+          </form>
+        </>
+      )}
+    </PaperDialog>
+  );
+};

src/apps/officer-web/Screens/LandingPage/components/SignupModal.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { useLocation, Link } from 'react-router';
+import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { PaperDialog } from '@/components/Dialogs';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type SignupFormState = {
+  name?: string;
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+};
+
+const validateForm = (state: Partial<SignupFormState>) => {
+  const { name, email, password, confirmPassword } = state;
+  if (!name || !email || !password || !confirmPassword) return false;
+  if (password !== confirmPassword) return false;
+  return true;
+};
+
+type SignupModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const SignupModal = ({ open, onOpenChange }: SignupModalProps) => {
+  const location = useLocation();
+  const bootstrapEmail = (location.state as { email?: string } | null)?.email ?? '';
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [registered, setRegistered] = useState(false);
+  const { state, formRef, update, isValid } = useForm<SignupFormState>({ email: bootstrapEmail }, validateForm);
+  const { signup } = useAuth();
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!isValid || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await signup({ name: state.name, email: state.email, password: state.password });
+      setRegistered(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Signup failed. Please try again.');
+      update({ ...state, password: '', confirmPassword: '' });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = (isOpen: boolean) => {
+    if (!isOpen) {
+      setRegistered(false);
+      if (formRef.current) {
+        update({ name: '', email: '', password: '', confirmPassword: '' });
+      }
+    }
+    onOpenChange(isOpen);
+  };
+
+  const isDisabled = !isValid || isSubmitting;
+
+  return (
+    <PaperDialog
+      open={open}
+      onOpenChange={handleClose}
+      onOpenAutoFocus={(ev) => {
+        if (!registered) {
+          const firstInput = (ev.currentTarget as HTMLElement).querySelector('input');
+          firstInput?.focus();
+        }
+      }}
+    >
+      {registered ? (
+        <div className="text-center py-4">
+          <h2 className="text-2xl font-bold text-duck-dark">Registration Successful</h2>
+          <p className="mt-4 text-duck-dark/70">Please check your email to verify your account.</p>
+          <Button
+            onClick={() => handleClose(false)}
+            className="mt-6 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-8 py-3 transition-all duration-200 hover:scale-105 cursor-pointer"
+          >
+            Close
+          </Button>
+        </div>
+      ) : (
+        <>
+          <DialogHeader>
+            <DialogTitle className="text-duck-dark text-2xl font-bold">Create Account</DialogTitle>
+            <DialogDescription className="text-duck-dark/60">Create a new account to get started</DialogDescription>
+          </DialogHeader>
+
+          <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Name</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="text"
+                name="name"
+                placeholder="Your name"
+                autoComplete="name"
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Email</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="email"
+                name="email"
+                defaultValue={bootstrapEmail}
+                placeholder="you@example.com"
+                autoComplete="email"
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Password</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="password"
+                name="password"
+                placeholder="Min 12 chars, mixed case, number, symbol"
+                autoComplete="new-password"
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Confirm Password</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="password"
+                name="confirmPassword"
+                placeholder="Repeat your password"
+                autoComplete="new-password"
+              />
+            </Label>
+
+            <DialogFooter className="pt-2">
+              <Button
+                type="submit"
+                disabled={isDisabled}
+                className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+              >
+                {isSubmitting ? 'Creating account...' : 'Sign Up'}
+              </Button>
+            </DialogFooter>
+
+            <p className="text-center text-sm text-duck-dark/60">
+              Already have an account?{' '}
+              <Link to="/auth/login" className="text-duck-forest underline hover:text-duck-forest/80">
+                Sign In
+              </Link>
+            </p>
+          </form>
+        </>
+      )}
+    </PaperDialog>
+  );
+};

src/apps/officer-web/Screens/LandingPage/components/VerifyModal.tsx

@@ -0,0 +1,243 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { toast } from 'sonner';
+import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { PaperDialog } from '@/components/Dialogs';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+import { useClient } from 'hooks/useClient';
+
+type VerifyFormState = {
+  name?: string;
+  password?: string;
+  confirmPassword?: string;
+};
+
+const validateForm = (state: Partial<VerifyFormState>) => {
+  const { name, password, confirmPassword } = state;
+  if (!name || !password || !confirmPassword) return false;
+  if (password !== confirmPassword) return false;
+  return true;
+};
+
+type VerifyModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+type TokenStatus = 'loading' | 'valid' | 'invalid';
+
+export const VerifyModal = ({ open, onOpenChange }: VerifyModalProps) => {
+  const navigate = useNavigate();
+  const client = useClient('/api/auth');
+  const { verify } = useAuth();
+  const { state, formRef, update, isValid } = useForm<VerifyFormState>({}, validateForm);
+
+  const [verificationCode] = useState(() => new URL(window.location.href).searchParams.get('verificationCode') ?? '');
+  const [tokenStatus, setTokenStatus] = useState<TokenStatus>('loading');
+  const [email, setEmail] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [verified, setVerified] = useState(false);
+  const [resending, setResending] = useState(false);
+  const [resent, setResent] = useState(false);
+
+  // Validate token on mount and strip it from the URL
+  useEffect(() => {
+    if (!open || !verificationCode) {
+      if (!verificationCode) setTokenStatus('invalid');
+      return;
+    }
+
+    window.history.replaceState(null, '', '/auth/verify');
+
+    client
+      .post<{ email: string }>('/verify-token', { verificationCode })
+      .then((data) => {
+        setEmail(data.email);
+        setTokenStatus('valid');
+      })
+      .catch(() => {
+        // Try to decode email from expired token for resend
+        try {
+          const payload = JSON.parse(atob(verificationCode.split('.')[1]!));
+          if (payload.email) setEmail(payload.email);
+        } catch {
+          // ignore
+        }
+        setTokenStatus('invalid');
+      });
+  }, [open]);
+
+  // Redirect after successful verification
+  useEffect(() => {
+    if (!verified) return;
+    const timer = setTimeout(() => navigate('/'), 3000);
+    return () => clearTimeout(timer);
+  }, [verified]);
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!isValid || isSubmitting || !verificationCode) return;
+
+    setIsSubmitting(true);
+    try {
+      await verify({
+        verificationCode,
+        name: state.name,
+        password: state.password,
+        confirmPassword: state.confirmPassword,
+      });
+      setVerified(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Verification failed. Please try again.');
+      update({ ...state, password: '', confirmPassword: '' });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleResend = async () => {
+    if (!email || resending) return;
+    setResending(true);
+    try {
+      await client.post('/resend-verification', { email });
+      setResent(true);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to resend. Please try again.');
+    } finally {
+      setResending(false);
+    }
+  };
+
+  // Loading state
+  if (tokenStatus === 'loading') {
+    return (
+      <PaperDialog open={open} onOpenChange={onOpenChange}>
+        <div className="text-center py-4">
+          <DialogHeader>
+            <DialogTitle className="text-duck-dark text-2xl font-bold">Validating...</DialogTitle>
+            <DialogDescription className="text-duck-dark/60">Please wait</DialogDescription>
+          </DialogHeader>
+        </div>
+      </PaperDialog>
+    );
+  }
+
+  // Invalid / expired token
+  if (tokenStatus === 'invalid') {
+    return (
+      <PaperDialog open={open} onOpenChange={onOpenChange}>
+        <div className="text-center py-4">
+          <h2 className="text-2xl font-bold text-duck-dark">Link Expired</h2>
+          <p className="mt-4 text-duck-dark/70">
+            This verification link is no longer valid.{' '}
+            {email ? 'Click below to receive a new one.' : 'Please request a new one.'}
+          </p>
+          {resent ? (
+            <p className="mt-6 text-sm text-duck-teal font-medium">
+              A new verification email has been sent to <strong>{email}</strong>.
+            </p>
+          ) : (
+            email && (
+              <Button
+                onClick={handleResend}
+                disabled={resending}
+                className="mt-6 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-8 py-3 transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50"
+              >
+                {resending ? 'Sending...' : 'Resend Verification Email'}
+              </Button>
+            )
+          )}
+        </div>
+      </PaperDialog>
+    );
+  }
+
+  // Valid token — show form or success
+  return (
+    <PaperDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      onOpenAutoFocus={(ev) => {
+        const firstInput = (ev.currentTarget as HTMLElement).querySelector('input:not([disabled])');
+        (firstInput as HTMLElement)?.focus();
+      }}
+    >
+      {verified ? (
+        <div className="text-center py-4">
+          <h2 className="text-2xl font-bold text-duck-dark">Account Verified</h2>
+          <p className="mt-4 text-duck-dark/70">
+            Congratulations! Your account has been set up successfully. Redirecting...
+          </p>
+        </div>
+      ) : (
+        <>
+          <DialogHeader>
+            <DialogTitle className="text-duck-dark text-2xl font-bold">Set Up Your Account</DialogTitle>
+            <DialogDescription className="text-duck-dark/60">Complete your account details</DialogDescription>
+          </DialogHeader>
+
+          <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Email</span>
+              <Input
+                className="h-11 bg-duck-dark/5 border-duck-dark/10 text-duck-dark disabled:opacity-100"
+                type="email"
+                value={email}
+                disabled
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Name</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="text"
+                name="name"
+                placeholder="Your name"
+                autoComplete="name"
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Password</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="password"
+                name="password"
+                placeholder="Min 12 chars, mixed case, number, symbol"
+                autoComplete="new-password"
+              />
+            </Label>
+
+            <Label className="grid gap-2">
+              <span className="text-duck-dark/70">Confirm Password</span>
+              <Input
+                className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+                type="password"
+                name="confirmPassword"
+                placeholder="Repeat your password"
+                autoComplete="new-password"
+              />
+            </Label>
+
+            <DialogFooter className="pt-2">
+              <Button
+                type="submit"
+                disabled={!isValid || isSubmitting}
+                className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+              >
+                {isSubmitting ? 'Verifying...' : 'Verify'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </>
+      )}
+    </PaperDialog>
+  );
+};

src/apps/officer-web/Screens/LandingPage/index.tsx

@@ -0,0 +1,2 @@
+export { LandingPage } from './LandingPage';
+export { AuthLayout } from './Layout';