feat: add orchestrator execution engine, observability panel, and LSP document caching

Wire FlowExecutor into orchestrator routes for actual flow execution with
pause/resume/stop lifecycle management. Add CLI session audit system with
audit-routes backend and Observability tab in IssueHub frontend. Introduce
cli-session-mux for cross-workspace session routing and QueueSendToOrchestrator
UI component. Normalize frontend API response handling for { data: ... }
wrapper format and propagate projectPath through flow hooks.

In codex-lens, add per-server opened-document cache in StandaloneLspManager
to avoid redundant didOpen notifications (using didChange for updates), and
skip warmup delay for already-warmed LSP server instances in ChainSearchEngine.

ccw/frontend/src/components/issue/hub/IssueHubHeader.tsx

@@ -4,9 +4,9 @@
 // Dynamic header component for IssueHub
 
 import { useIntl } from 'react-intl';
-import { AlertCircle, Radar, ListTodo, LayoutGrid } from 'lucide-react';
+import { AlertCircle, Radar, ListTodo, LayoutGrid, Activity } from 'lucide-react';
 
-type IssueTab = 'issues' | 'board' | 'queue' | 'discovery';
+type IssueTab = 'issues' | 'board' | 'queue' | 'discovery' | 'observability';
 
 interface IssueHubHeaderProps {
   currentTab: IssueTab;
@@ -37,6 +37,11 @@ export function IssueHubHeader({ currentTab }: IssueHubHeaderProps) {
       title: formatMessage({ id: 'issues.discovery.pageTitle' }),
       description: formatMessage({ id: 'issues.discovery.description' }),
     },
+    observability: {
+      icon: <Activity className="w-6 h-6 text-primary" />,
+      title: formatMessage({ id: 'issues.observability.pageTitle' }),
+      description: formatMessage({ id: 'issues.observability.description' }),
+    },
   };
 
   const config = tabConfig[currentTab];

ccw/frontend/src/components/issue/hub/IssueHubTabs.tsx

@@ -7,7 +7,8 @@ import { useIntl } from 'react-intl';
 import { Button } from '@/components/ui/Button';
 import { cn } from '@/lib/utils';
 
-export type IssueTab = 'issues' | 'board' | 'queue' | 'discovery';
+// Keep in sync with IssueHubHeader/IssueHubPage
+export type IssueTab = 'issues' | 'board' | 'queue' | 'discovery' | 'observability';
 
 interface IssueHubTabsProps {
   currentTab: IssueTab;
@@ -22,6 +23,7 @@ export function IssueHubTabs({ currentTab, onTabChange }: IssueHubTabsProps) {
     { value: 'board', label: formatMessage({ id: 'issues.hub.tabs.board' }) },
     { value: 'queue', label: formatMessage({ id: 'issues.hub.tabs.queue' }) },
     { value: 'discovery', label: formatMessage({ id: 'issues.hub.tabs.discovery' }) },
+    { value: 'observability', label: formatMessage({ id: 'issues.hub.tabs.observability' }) },
   ];
 
   return (

ccw/frontend/src/components/issue/hub/ObservabilityPanel.tsx

@@ -0,0 +1,294 @@
+// ========================================
+// Observability Panel
+// ========================================
+// Audit log UI for issue workbench (read-only)
+
+import { useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { ChevronDown, ChevronRight, RefreshCw } from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/Select';
+import { useCliSessionAudit } from '@/hooks';
+import { cn } from '@/lib/utils';
+import type { CliSessionAuditEvent, CliSessionAuditEventType } from '@/lib/api';
+
+const EVENT_TYPES: CliSessionAuditEventType[] = [
+  'session_created',
+  'session_closed',
+  'session_send',
+  'session_execute',
+  'session_resize',
+  'session_share_created',
+  'session_share_revoked',
+  'session_idle_reaped',
+];
+
+function badgeVariantForType(type: CliSessionAuditEventType): 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info' {
+  switch (type) {
+    case 'session_created':
+      return 'success';
+    case 'session_closed':
+    case 'session_idle_reaped':
+      return 'secondary';
+    case 'session_execute':
+      return 'info';
+    case 'session_send':
+    case 'session_resize':
+      return 'outline';
+    case 'session_share_created':
+      return 'warning';
+    case 'session_share_revoked':
+      return 'secondary';
+    default:
+      return 'default';
+  }
+}
+
+function stableEventKey(ev: CliSessionAuditEvent, index: number): string {
+  return `${ev.timestamp}|${ev.type}|${ev.sessionKey ?? ''}|${index}`;
+}
+
+export function ObservabilityPanel() {
+  const { formatMessage } = useIntl();
+
+  const [q, setQ] = useState('');
+  const [sessionKey, setSessionKey] = useState('');
+  const [type, setType] = useState<string>('');
+  const [limit, setLimit] = useState<number>(200);
+  const [offset, setOffset] = useState<number>(0);
+  const [expandedKey, setExpandedKey] = useState<string | null>(null);
+
+  // Reset paging when filters change
+  useEffect(() => {
+    setOffset(0);
+  }, [q, sessionKey, type, limit]);
+
+  const query = useCliSessionAudit({
+    q: q.trim() || undefined,
+    sessionKey: sessionKey.trim() || undefined,
+    type: type ? (type as CliSessionAuditEventType) : undefined,
+    limit,
+    offset,
+  });
+
+  const events = query.data?.data.events ?? [];
+  const total = query.data?.data.total ?? 0;
+  const hasMore = query.data?.data.hasMore ?? false;
+
+  const headerRight = useMemo(() => {
+    const start = total === 0 ? 0 : offset + 1;
+    const end = Math.min(total, offset + limit);
+    return `${start}-${end} / ${total}`;
+  }, [limit, offset, total]);
+
+  const handleRefresh = async () => {
+    try {
+      await query.refetch();
+    } catch (e) {
+      // Errors are surfaced by query.error
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card className="p-4">
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center justify-between gap-3">
+            <div className="text-sm font-semibold text-foreground">
+              {formatMessage({ id: 'issues.observability.audit.title' })}
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="text-xs text-muted-foreground font-mono">
+                {headerRight}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleRefresh}
+                disabled={query.isFetching}
+                className="gap-2"
+              >
+                <RefreshCw className={cn('h-4 w-4', query.isFetching && 'animate-spin')} />
+                {formatMessage({ id: 'common.actions.refresh' })}
+              </Button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
+            <div className="md:col-span-2">
+              <label className="block text-xs font-medium text-muted-foreground mb-1">
+                {formatMessage({ id: 'issues.observability.filters.search' })}
+              </label>
+              <Input
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                placeholder={formatMessage({ id: 'issues.observability.filters.searchPlaceholder' })}
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-muted-foreground mb-1">
+                {formatMessage({ id: 'issues.observability.filters.sessionKey' })}
+              </label>
+              <Input
+                value={sessionKey}
+                onChange={(e) => setSessionKey(e.target.value)}
+                placeholder={formatMessage({ id: 'issues.observability.filters.sessionKeyPlaceholder' })}
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-muted-foreground mb-1">
+                {formatMessage({ id: 'issues.observability.filters.type' })}
+              </label>
+              <Select value={type} onValueChange={(v) => setType(v)}>
+                <SelectTrigger>
+                  <SelectValue placeholder={formatMessage({ id: 'issues.observability.filters.typeAll' })} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="">{formatMessage({ id: 'issues.observability.filters.typeAll' })}</SelectItem>
+                  {EVENT_TYPES.map((t) => (
+                    <SelectItem key={t} value={t}>
+                      {t}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <label className="block text-xs font-medium text-muted-foreground">
+                {formatMessage({ id: 'issues.observability.filters.limit' })}
+              </label>
+              <Select value={String(limit)} onValueChange={(v) => setLimit(parseInt(v, 10))}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {[50, 100, 200, 500, 1000].map((n) => (
+                    <SelectItem key={n} value={String(n)}>{n}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setOffset(Math.max(0, offset - limit))}
+                disabled={offset === 0 || query.isFetching}
+              >
+                {formatMessage({ id: 'common.actions.previous' })}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setOffset(offset + limit)}
+                disabled={!hasMore || query.isFetching}
+              >
+                {formatMessage({ id: 'common.actions.next' })}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {query.error && (
+        <Card className="p-6 border-destructive/50 bg-destructive/5">
+          <div className="text-sm text-destructive">
+            {(query.error as Error).message || formatMessage({ id: 'issues.observability.error' })}
+          </div>
+        </Card>
+      )}
+
+      {!query.isLoading && events.length === 0 && (
+        <Card className="p-10 text-center text-muted-foreground">
+          {formatMessage({ id: 'issues.observability.empty' })}
+        </Card>
+      )}
+
+      {events.length > 0 && (
+        <Card className="p-0 overflow-hidden">
+          <div className="px-4 py-2 border-b border-border bg-card/50 text-xs font-medium text-muted-foreground grid grid-cols-12 gap-3">
+            <div className="col-span-3">{formatMessage({ id: 'issues.observability.table.timestamp' })}</div>
+            <div className="col-span-2">{formatMessage({ id: 'issues.observability.table.type' })}</div>
+            <div className="col-span-3">{formatMessage({ id: 'issues.observability.table.sessionKey' })}</div>
+            <div className="col-span-2">{formatMessage({ id: 'issues.observability.table.tool' })}</div>
+            <div className="col-span-2">{formatMessage({ id: 'issues.observability.table.resumeKey' })}</div>
+          </div>
+
+          <div className="divide-y divide-border">
+            {events.map((ev, index) => {
+              const key = stableEventKey(ev, index);
+              const expanded = expandedKey === key;
+              return (
+                <div key={key} className="px-4 py-2">
+                  <button
+                    type="button"
+                    className="w-full text-left grid grid-cols-12 gap-3 items-center hover:bg-muted/40 rounded-md px-2 py-2"
+                    onClick={() => setExpandedKey(expanded ? null : key)}
+                  >
+                    <div className="col-span-3 flex items-center gap-2 min-w-0">
+                      {expanded ? (
+                        <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+                      ) : (
+                        <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+                      )}
+                      <span className="font-mono text-xs text-foreground truncate">
+                        {ev.timestamp}
+                      </span>
+                    </div>
+                    <div className="col-span-2">
+                      <Badge variant={badgeVariantForType(ev.type)} className="font-mono text-xs">
+                        {ev.type}
+                      </Badge>
+                    </div>
+                    <div className="col-span-3 font-mono text-xs text-muted-foreground truncate">
+                      {ev.sessionKey || '-'}
+                    </div>
+                    <div className="col-span-2 font-mono text-xs text-muted-foreground truncate">
+                      {ev.tool || '-'}
+                    </div>
+                    <div className="col-span-2 font-mono text-xs text-muted-foreground truncate">
+                      {ev.resumeKey || '-'}
+                    </div>
+                  </button>
+
+                  {expanded && (
+                    <div className="mt-2 ml-6 space-y-2">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
+                        <div className="text-muted-foreground">
+                          <span className="font-medium text-foreground">{formatMessage({ id: 'issues.observability.table.workingDir' })}: </span>
+                          <span className="font-mono break-all">{ev.workingDir || '-'}</span>
+                        </div>
+                        <div className="text-muted-foreground">
+                          <span className="font-medium text-foreground">{formatMessage({ id: 'issues.observability.table.ip' })}: </span>
+                          <span className="font-mono break-all">{ev.ip || '-'}</span>
+                        </div>
+                      </div>
+                      {ev.userAgent && (
+                        <div className="text-xs text-muted-foreground">
+                          <span className="font-medium text-foreground">{formatMessage({ id: 'issues.observability.table.userAgent' })}: </span>
+                          <span className="font-mono break-all">{ev.userAgent}</span>
+                        </div>
+                      )}
+                      <pre className="text-xs bg-muted/50 rounded-md p-3 overflow-x-auto">
+                        {JSON.stringify(ev.details ?? {}, null, 2)}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default ObservabilityPanel;

ccw/frontend/src/components/issue/queue/QueueSendToOrchestrator.tsx

@@ -0,0 +1,355 @@
+// ========================================
+// QueueSendToOrchestrator
+// ========================================
+// Create a flow from a queue item and execute it via Orchestrator (tmux-like delivery to PTY session).
+
+import { useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+import { Plus, RefreshCw, Workflow } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/Select';
+import { cn } from '@/lib/utils';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
+import { toast, useExecutionStore, useFlowStore } from '@/stores';
+import { useIssues } from '@/hooks';
+import {
+  createCliSession,
+  createOrchestratorFlow,
+  executeOrchestratorFlow,
+  fetchCliSessions,
+  type CliSession,
+  type QueueItem,
+} from '@/lib/api';
+import { useCliSessionStore } from '@/stores/cliSessionStore';
+
+type ToolName = 'claude' | 'codex' | 'gemini' | 'qwen';
+type ResumeStrategy = 'nativeResume' | 'promptConcat';
+
+function buildQueueItemInstruction(item: QueueItem, issue: any | undefined): string {
+  const lines: string[] = [];
+  lines.push(`Queue Item: ${item.item_id}`);
+  lines.push(`Issue: ${item.issue_id}`);
+  lines.push(`Solution: ${item.solution_id}`);
+  if (item.task_id) lines.push(`Task: ${item.task_id}`);
+  lines.push('');
+
+  if (issue) {
+    if (issue.title) lines.push(`Title: ${issue.title}`);
+    if (issue.context) {
+      lines.push('');
+      lines.push('Context:');
+      lines.push(String(issue.context));
+    }
+
+    const solution = Array.isArray(issue.solutions)
+      ? issue.solutions.find((s: any) => s?.id === item.solution_id)
+      : undefined;
+    if (solution) {
+      lines.push('');
+      lines.push('Solution Description:');
+      if (solution.description) lines.push(String(solution.description));
+      if (solution.approach) {
+        lines.push('');
+        lines.push('Approach:');
+        lines.push(String(solution.approach));
+      }
+    }
+  }
+
+  lines.push('');
+  lines.push('Instruction:');
+  lines.push(
+    'Implement the above queue item in this repository. Prefer small, testable changes; run relevant tests; report blockers if any.'
+  );
+
+  return lines.join('\n');
+}
+
+function generateId(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function QueueSendToOrchestrator({ item, className }: { item: QueueItem; className?: string }) {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const projectPath = useWorkflowStore(selectProjectPath);
+
+  const { issues } = useIssues();
+  const issue = useMemo(() => issues.find((i) => i.id === item.issue_id) as any, [issues, item.issue_id]);
+
+  const sessionsByKey = useCliSessionStore((s) => s.sessions);
+  const setSessions = useCliSessionStore((s) => s.setSessions);
+  const upsertSession = useCliSessionStore((s) => s.upsertSession);
+
+  const sessions = useMemo(
+    () => Object.values(sessionsByKey).sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
+    [sessionsByKey]
+  );
+
+  const [selectedSessionKey, setSelectedSessionKey] = useState<string>('');
+  const [tool, setTool] = useState<ToolName>('claude');
+  const [mode, setMode] = useState<'analysis' | 'write'>('write');
+  const [resumeStrategy, setResumeStrategy] = useState<ResumeStrategy>('nativeResume');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastResult, setLastResult] = useState<{ flowId: string; execId: string } | null>(null);
+
+  const refreshSessions = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const r = await fetchCliSessions(projectPath || undefined);
+      setSessions(r.sessions as unknown as CliSession[]);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void refreshSessions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectPath]);
+
+  useEffect(() => {
+    if (selectedSessionKey) return;
+    if (sessions.length === 0) return;
+    setSelectedSessionKey(sessions[sessions.length - 1]?.sessionKey ?? '');
+  }, [sessions, selectedSessionKey]);
+
+  const ensureSession = async (): Promise<string> => {
+    if (selectedSessionKey) return selectedSessionKey;
+    if (!projectPath) throw new Error('No project path selected');
+    const created = await createCliSession({
+      workingDir: projectPath,
+      preferredShell: 'bash',
+      resumeKey: item.issue_id,
+    }, projectPath);
+    upsertSession(created.session as unknown as CliSession);
+    setSelectedSessionKey(created.session.sessionKey);
+    return created.session.sessionKey;
+  };
+
+  const handleCreateSession = async () => {
+    setError(null);
+    try {
+      if (!projectPath) throw new Error('No project path selected');
+      const created = await createCliSession({
+        workingDir: projectPath,
+        preferredShell: 'bash',
+        resumeKey: item.issue_id,
+      }, projectPath);
+      upsertSession(created.session as unknown as CliSession);
+      setSelectedSessionKey(created.session.sessionKey);
+      await refreshSessions();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const handleSend = async () => {
+    setIsSending(true);
+    setError(null);
+    setLastResult(null);
+    try {
+      const sessionKey = await ensureSession();
+      const instruction = buildQueueItemInstruction(item, issue);
+
+      const nodeId = generateId('node');
+      const flowName = `Queue ${item.issue_id} / ${item.solution_id}${item.task_id ? ` / ${item.task_id}` : ''}`;
+      const flowDescription = `Queue item ${item.item_id} -> Orchestrator`;
+
+      const created = await createOrchestratorFlow({
+        name: flowName,
+        description: flowDescription,
+        version: '1.0.0',
+        nodes: [
+          {
+            id: nodeId,
+            type: 'prompt-template',
+            position: { x: 100, y: 100 },
+            data: {
+              label: flowName,
+              instruction,
+              tool,
+              mode,
+              delivery: 'sendToSession',
+              targetSessionKey: sessionKey,
+              resumeKey: item.issue_id,
+              resumeStrategy,
+              tags: ['queue', item.item_id, item.issue_id, item.solution_id].filter(Boolean),
+            },
+          },
+        ],
+        edges: [],
+        variables: {},
+        metadata: {
+          source: 'local',
+          tags: ['queue', item.item_id, item.issue_id, item.solution_id].filter(Boolean),
+        },
+      }, projectPath || undefined);
+
+      if (!created.success) {
+        throw new Error('Failed to create flow');
+      }
+
+      // Best-effort: hydrate Orchestrator stores so the user lands on the created flow.
+      const flowDto = created.data as any;
+      const parsedVersion = parseInt(String(flowDto.version ?? '1'), 10);
+      const flowForStore = {
+        ...flowDto,
+        version: Number.isFinite(parsedVersion) ? parsedVersion : 1,
+      } as any;
+      useFlowStore.getState().setCurrentFlow(flowForStore);
+
+      // Trigger execution (backend returns execId; engine wiring may run async).
+      const executed = await executeOrchestratorFlow(created.data.id, {}, projectPath || undefined);
+      if (!executed.success) {
+        throw new Error('Failed to execute flow');
+      }
+
+      const execId = executed.data.execId;
+      useExecutionStore.getState().startExecution(execId, created.data.id);
+      useExecutionStore.getState().setMonitorPanelOpen(true);
+
+      setLastResult({ flowId: created.data.id, execId });
+      toast.success(
+        formatMessage({ id: 'issues.queue.orchestrator.sentTitle' }),
+        formatMessage({ id: 'issues.queue.orchestrator.sentDesc' }, { flowId: created.data.id })
+      );
+
+      navigate('/orchestrator');
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      setError(message);
+      toast.error(formatMessage({ id: 'issues.queue.orchestrator.sendFailed' }), message);
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+          <Workflow className="h-4 w-4" />
+          {formatMessage({ id: 'issues.queue.orchestrator.title' })}
+        </h3>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={refreshSessions}
+            disabled={isLoading}
+            className="gap-2"
+          >
+            <RefreshCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
+            {formatMessage({ id: 'issues.terminal.session.refresh' })}
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleCreateSession} className="gap-2">
+            <Plus className="h-4 w-4" />
+            {formatMessage({ id: 'issues.terminal.session.new' })}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <div>
+          <label className="block text-xs font-medium text-muted-foreground mb-1">
+            {formatMessage({ id: 'issues.queue.orchestrator.targetSession' })}
+          </label>
+          <Select value={selectedSessionKey} onValueChange={(v) => setSelectedSessionKey(v)}>
+            <SelectTrigger>
+              <SelectValue placeholder={formatMessage({ id: 'issues.terminal.session.none' })} />
+            </SelectTrigger>
+            <SelectContent>
+              {sessions.length === 0 ? (
+                <SelectItem value="" disabled>
+                  {formatMessage({ id: 'issues.terminal.session.none' })}
+                </SelectItem>
+              ) : (
+                sessions.map((s) => (
+                  <SelectItem key={s.sessionKey} value={s.sessionKey}>
+                    {(s.tool || 'cli') + ' · ' + s.sessionKey}
+                  </SelectItem>
+                ))
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-muted-foreground mb-1">
+            {formatMessage({ id: 'issues.queue.orchestrator.tool' })}
+          </label>
+          <Select value={tool} onValueChange={(v) => setTool(v as ToolName)}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="claude">claude</SelectItem>
+              <SelectItem value="codex">codex</SelectItem>
+              <SelectItem value="gemini">gemini</SelectItem>
+              <SelectItem value="qwen">qwen</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-muted-foreground mb-1">
+            {formatMessage({ id: 'issues.queue.orchestrator.mode' })}
+          </label>
+          <Select value={mode} onValueChange={(v) => setMode(v as 'analysis' | 'write')}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="analysis">analysis</SelectItem>
+              <SelectItem value="write">write</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-muted-foreground mb-1">
+            {formatMessage({ id: 'issues.queue.orchestrator.resumeStrategy' })}
+          </label>
+          <Select value={resumeStrategy} onValueChange={(v) => setResumeStrategy(v as ResumeStrategy)}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="nativeResume">nativeResume</SelectItem>
+              <SelectItem value="promptConcat">promptConcat</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {error && <div className="text-sm text-destructive">{error}</div>}
+      {lastResult && (
+        <div className="text-xs text-muted-foreground font-mono break-all">
+          {lastResult.flowId} · {lastResult.execId}
+        </div>
+      )}
+
+      <div className="flex items-center justify-end">
+        <Button onClick={handleSend} disabled={isSending || !projectPath} className="gap-2">
+          {isSending ? (
+            <>
+              <RefreshCw className="h-4 w-4 animate-spin" />
+              {formatMessage({ id: 'issues.queue.orchestrator.sending' })}
+            </>
+          ) : (
+            formatMessage({ id: 'issues.queue.orchestrator.send' })
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default QueueSendToOrchestrator;

ccw/frontend/src/components/issue/queue/SolutionDrawer.tsx

@@ -10,6 +10,7 @@ import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
 import { QueueExecuteInSession } from '@/components/issue/queue/QueueExecuteInSession';
+import { QueueSendToOrchestrator } from '@/components/issue/queue/QueueSendToOrchestrator';
 import { IssueTerminalTab } from '@/components/issue/hub/IssueTerminalTab';
 import { useIssueQueue } from '@/hooks';
 import { cn } from '@/lib/utils';
@@ -179,6 +180,9 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
                   {/* Execute in Session */}
                   <QueueExecuteInSession item={item} />
 
+                  {/* Send to Orchestrator */}
+                  <QueueSendToOrchestrator item={item} />
+
                   {/* Dependencies */}
                   {item.depends_on && item.depends_on.length > 0 && (
                     <div>

ccw/frontend/src/hooks/index.ts

@@ -91,6 +91,14 @@ export type {
   UseIssueDiscoveryReturn,
 } from './useIssues';
 
+// ========== Audit ==========
+export {
+  useCliSessionAudit,
+} from './useAudit';
+export type {
+  UseCliSessionAuditOptions,
+} from './useAudit';
+
 // ========== Skills ==========
 export {
   useSkills,

ccw/frontend/src/hooks/useAudit.ts

@@ -0,0 +1,57 @@
+// ========================================
+// useAudit Hooks
+// ========================================
+// TanStack Query hooks for audit/observability APIs
+
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
+import { workspaceQueryKeys } from '@/lib/queryKeys';
+import {
+  fetchCliSessionAudit,
+  type CliSessionAuditEventType,
+  type CliSessionAuditListResponse,
+} from '@/lib/api';
+
+export interface UseCliSessionAuditOptions {
+  sessionKey?: string;
+  type?: CliSessionAuditEventType | CliSessionAuditEventType[];
+  q?: string;
+  limit?: number;
+  offset?: number;
+  enabled?: boolean;
+}
+
+export function useCliSessionAudit(
+  options: UseCliSessionAuditOptions = {}
+): UseQueryResult<{ success: boolean; data: CliSessionAuditListResponse }> {
+  const projectPath = useWorkflowStore(selectProjectPath);
+  const enabled = (options.enabled ?? true) && !!projectPath;
+
+  const typeParam = Array.isArray(options.type)
+    ? options.type.join(',')
+    : options.type;
+
+  return useQuery({
+    queryKey: projectPath
+      ? workspaceQueryKeys.cliSessionAudit(projectPath, {
+        sessionKey: options.sessionKey,
+        type: typeParam,
+        q: options.q,
+        limit: options.limit,
+        offset: options.offset,
+      })
+      : ['audit', 'cliSessions', 'no-project'],
+    queryFn: () => fetchCliSessionAudit({
+      projectPath: projectPath ?? undefined,
+      sessionKey: options.sessionKey,
+      type: options.type,
+      q: options.q,
+      limit: options.limit,
+      offset: options.offset,
+    }),
+    enabled,
+    staleTime: 10_000,
+    retry: 1,
+  });
+}
+

ccw/frontend/src/hooks/useFlows.ts

@@ -5,10 +5,18 @@
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import type { Flow } from '../types/flow';
+import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
 
 // API base URL
 const API_BASE = '/api/orchestrator';
 
+function withPath(url: string, projectPath?: string | null): string {
+  const p = typeof projectPath === 'string' ? projectPath.trim() : '';
+  if (!p) return url;
+  const sep = url.includes('?') ? '&' : '?';
+  return `${url}${sep}path=${encodeURIComponent(p)}`;
+}
+
 // Query keys
 export const flowKeys = {
   all: ['flows'] as const,
@@ -30,32 +38,36 @@ interface FlowsListResponse {
 interface ExecutionStartResponse {
   execId: string;
   flowId: string;
-  status: 'running';
+  status: 'pending' | 'running' | 'paused' | 'completed' | 'failed';
   startedAt: string;
 }
 
 interface ExecutionControlResponse {
   execId: string;
-  status: 'paused' | 'running' | 'stopped';
+  status: 'pending' | 'running' | 'paused' | 'completed' | 'failed';
   message: string;
 }
 
 // ========== Fetch Functions ==========
 
 async function fetchFlows(): Promise<FlowsListResponse> {
-  const response = await fetch(`${API_BASE}/flows`);
+  const response = await fetch(`${API_BASE}/flows`, { credentials: 'same-origin' });
   if (!response.ok) {
     throw new Error(`Failed to fetch flows: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  const flows = Array.isArray(json?.data) ? json.data : (json?.flows || []);
+  const total = typeof json?.total === 'number' ? json.total : flows.length;
+  return { flows, total };
 }
 
 async function fetchFlow(id: string): Promise<Flow> {
-  const response = await fetch(`${API_BASE}/flows/${id}`);
+  const response = await fetch(`${API_BASE}/flows/${id}`, { credentials: 'same-origin' });
   if (!response.ok) {
     throw new Error(`Failed to fetch flow: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  return (json && typeof json === 'object' && 'data' in json) ? json.data : json;
 }
 
 async function createFlow(flow: Omit<Flow, 'id' | 'created_at' | 'updated_at'>): Promise<Flow> {
@@ -63,11 +75,13 @@ async function createFlow(flow: Omit<Flow, 'id' | 'created_at' | 'updated_at'>):
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(flow),
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to create flow: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  return (json && typeof json === 'object' && 'data' in json) ? json.data : json;
 }
 
 async function updateFlow(id: string, flow: Partial<Flow>): Promise<Flow> {
@@ -75,16 +89,19 @@ async function updateFlow(id: string, flow: Partial<Flow>): Promise<Flow> {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(flow),
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to update flow: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  return (json && typeof json === 'object' && 'data' in json) ? json.data : json;
 }
 
 async function deleteFlow(id: string): Promise<void> {
   const response = await fetch(`${API_BASE}/flows/${id}`, {
     method: 'DELETE',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to delete flow: ${response.statusText}`);
@@ -94,53 +111,72 @@ async function deleteFlow(id: string): Promise<void> {
 async function duplicateFlow(id: string): Promise<Flow> {
   const response = await fetch(`${API_BASE}/flows/${id}/duplicate`, {
     method: 'POST',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to duplicate flow: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  return (json && typeof json === 'object' && 'data' in json) ? json.data : json;
 }
 
 // ========== Execution Functions ==========
 
-async function executeFlow(flowId: string): Promise<ExecutionStartResponse> {
-  const response = await fetch(`${API_BASE}/flows/${flowId}/execute`, {
+async function executeFlow(flowId: string, projectPath?: string | null): Promise<ExecutionStartResponse> {
+  const response = await fetch(withPath(`${API_BASE}/flows/${flowId}/execute`, projectPath), {
     method: 'POST',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to execute flow: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  return (json && typeof json === 'object' && 'data' in json) ? json.data : json;
 }
 
-async function pauseExecution(execId: string): Promise<ExecutionControlResponse> {
-  const response = await fetch(`${API_BASE}/executions/${execId}/pause`, {
+async function pauseExecution(execId: string, projectPath?: string | null): Promise<ExecutionControlResponse> {
+  const response = await fetch(withPath(`${API_BASE}/executions/${execId}/pause`, projectPath), {
     method: 'POST',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to pause execution: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  if (json?.data?.id) {
+    return { execId: json.data.id, status: json.data.status, message: json.message || 'Execution paused' };
+  }
+  return json;
 }
 
-async function resumeExecution(execId: string): Promise<ExecutionControlResponse> {
-  const response = await fetch(`${API_BASE}/executions/${execId}/resume`, {
+async function resumeExecution(execId: string, projectPath?: string | null): Promise<ExecutionControlResponse> {
+  const response = await fetch(withPath(`${API_BASE}/executions/${execId}/resume`, projectPath), {
     method: 'POST',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to resume execution: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  if (json?.data?.id) {
+    return { execId: json.data.id, status: json.data.status, message: json.message || 'Execution resumed' };
+  }
+  return json;
 }
 
-async function stopExecution(execId: string): Promise<ExecutionControlResponse> {
-  const response = await fetch(`${API_BASE}/executions/${execId}/stop`, {
+async function stopExecution(execId: string, projectPath?: string | null): Promise<ExecutionControlResponse> {
+  const response = await fetch(withPath(`${API_BASE}/executions/${execId}/stop`, projectPath), {
     method: 'POST',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to stop execution: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  if (json?.data?.id) {
+    return { execId: json.data.id, status: json.data.status, message: json.message || 'Execution stopped' };
+  }
+  return json;
 }
 
 // ========== Query Hooks ==========
@@ -265,8 +301,9 @@ export function useDuplicateFlow() {
  * Execute a flow
  */
 export function useExecuteFlow() {
+  const projectPath = useWorkflowStore(selectProjectPath);
   return useMutation({
-    mutationFn: executeFlow,
+    mutationFn: (flowId: string) => executeFlow(flowId, projectPath),
   });
 }
 
@@ -274,8 +311,9 @@ export function useExecuteFlow() {
  * Pause execution
  */
 export function usePauseExecution() {
+  const projectPath = useWorkflowStore(selectProjectPath);
   return useMutation({
-    mutationFn: pauseExecution,
+    mutationFn: (execId: string) => pauseExecution(execId, projectPath),
   });
 }
 
@@ -283,8 +321,9 @@ export function usePauseExecution() {
  * Resume execution
  */
 export function useResumeExecution() {
+  const projectPath = useWorkflowStore(selectProjectPath);
   return useMutation({
-    mutationFn: resumeExecution,
+    mutationFn: (execId: string) => resumeExecution(execId, projectPath),
   });
 }
 
@@ -292,15 +331,19 @@ export function useResumeExecution() {
  * Stop execution
  */
 export function useStopExecution() {
+  const projectPath = useWorkflowStore(selectProjectPath);
   return useMutation({
-    mutationFn: stopExecution,
+    mutationFn: (execId: string) => stopExecution(execId, projectPath),
   });
 }
 
 // ========== Execution Monitoring Fetch Functions ==========
 
-async function fetchExecutionStateById(execId: string): Promise<{ success: boolean; data: { execId: string; flowId: string; status: string; currentNodeId?: string; startedAt: string; completedAt?: string; elapsedMs: number } }> {
-  const response = await fetch(`${API_BASE}/executions/${execId}`);
+async function fetchExecutionStateById(
+  execId: string,
+  projectPath?: string | null
+): Promise<{ success: boolean; data: { execId: string; flowId: string; status: string; currentNodeId?: string; startedAt: string; completedAt?: string; elapsedMs: number } }> {
+  const response = await fetch(withPath(`${API_BASE}/executions/${execId}`, projectPath), { credentials: 'same-origin' });
   if (!response.ok) {
     throw new Error(`Failed to fetch execution state: ${response.statusText}`);
   }
@@ -314,7 +357,8 @@ async function fetchExecutionLogsById(
     offset?: number;
     level?: string;
     nodeId?: string;
-  }
+  },
+  projectPath?: string | null
 ): Promise<{ success: boolean; data: { execId: string; logs: unknown[]; total: number; limit: number; offset: number; hasMore: boolean } }> {
   const params = new URLSearchParams();
   if (options?.limit) params.append('limit', String(options.limit));
@@ -323,7 +367,11 @@ async function fetchExecutionLogsById(
   if (options?.nodeId) params.append('nodeId', options.nodeId);
 
   const queryString = params.toString();
-  const response = await fetch(`${API_BASE}/executions/${execId}/logs${queryString ? `?${queryString}` : ''}`);
+  const url = withPath(
+    `${API_BASE}/executions/${execId}/logs${queryString ? `?${queryString}` : ''}`,
+    projectPath
+  );
+  const response = await fetch(url, { credentials: 'same-origin' });
   if (!response.ok) {
     throw new Error(`Failed to fetch execution logs: ${response.statusText}`);
   }
@@ -337,9 +385,10 @@ async function fetchExecutionLogsById(
  * Uses useQuery to get execution state, enabled when execId exists
  */
 export function useExecutionState(execId: string | null) {
+  const projectPath = useWorkflowStore(selectProjectPath);
   return useQuery({
-    queryKey: flowKeys.executionState(execId ?? ''),
-    queryFn: () => fetchExecutionStateById(execId!),
+    queryKey: [...flowKeys.executionState(execId ?? ''), projectPath],
+    queryFn: () => fetchExecutionStateById(execId!, projectPath),
     enabled: !!execId,
     staleTime: 5000, // 5 seconds - needs more frequent updates for monitoring
   });
@@ -358,9 +407,10 @@ export function useExecutionLogs(
     nodeId?: string;
   }
 ) {
+  const projectPath = useWorkflowStore(selectProjectPath);
   return useQuery({
-    queryKey: flowKeys.executionLogs(execId ?? '', options),
-    queryFn: () => fetchExecutionLogsById(execId!, options),
+    queryKey: [...flowKeys.executionLogs(execId ?? '', options), projectPath],
+    queryFn: () => fetchExecutionLogsById(execId!, options, projectPath),
     enabled: !!execId,
     staleTime: 10000, // 10 seconds
   });

ccw/frontend/src/hooks/useTemplates.ts

@@ -43,15 +43,66 @@ interface ExportTemplateResponse {
 
 // ========== Fetch Functions ==========
 
+function toFlowTemplate(raw: any): FlowTemplate {
+  const meta = raw?.template_metadata ?? {};
+  const nodes = Array.isArray(raw?.nodes) ? raw.nodes : [];
+  const edges = Array.isArray(raw?.edges) ? raw.edges : [];
+
+  return {
+    id: String(raw?.id ?? ''),
+    name: String(raw?.name ?? ''),
+    description: (typeof meta.description === 'string' ? meta.description : raw?.description) || undefined,
+    category: typeof meta.category === 'string' ? meta.category : undefined,
+    tags: Array.isArray(meta.tags) ? meta.tags : undefined,
+    author: typeof meta.author === 'string' ? meta.author : undefined,
+    version: String(meta.version ?? raw?.version ?? '1.0.0'),
+    created_at: String(raw?.created_at ?? new Date().toISOString()),
+    updated_at: String(raw?.updated_at ?? new Date().toISOString()),
+    nodeCount: nodes.length,
+    edgeCount: edges.length,
+  };
+}
+
+function toFlowFromTemplate(raw: any): Flow {
+  const meta = raw?.template_metadata ?? {};
+  const now = new Date().toISOString();
+  return {
+    id: `flow-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
+    name: String(raw?.name ?? 'Template Flow'),
+    description: (typeof meta.description === 'string' ? meta.description : raw?.description) || undefined,
+    version: String(meta.version ?? raw?.version ?? '1.0.0'),
+    created_at: String(raw?.created_at ?? now),
+    updated_at: String(raw?.updated_at ?? now),
+    nodes: Array.isArray(raw?.nodes) ? raw.nodes : [],
+    edges: Array.isArray(raw?.edges) ? raw.edges : [],
+    variables: typeof raw?.variables === 'object' && raw.variables ? raw.variables : {},
+    metadata: {
+      source: 'template',
+      templateId: typeof raw?.id === 'string' ? raw.id : undefined,
+      tags: Array.isArray(meta.tags) ? meta.tags : undefined,
+      category: typeof meta.category === 'string' ? meta.category : undefined,
+    },
+  };
+}
+
 async function fetchTemplates(category?: string): Promise<TemplatesListResponse> {
   const url = category
     ? `${API_BASE}/templates?category=${encodeURIComponent(category)}`
     : `${API_BASE}/templates`;
-  const response = await fetch(url);
+  const response = await fetch(url, { credentials: 'same-origin' });
   if (!response.ok) {
     throw new Error(`Failed to fetch templates: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  const rawTemplates: any[] = Array.isArray(json?.data) ? json.data : (json?.templates || []);
+  const templates: FlowTemplate[] = rawTemplates.map(toFlowTemplate);
+  const total = typeof json?.total === 'number' ? json.total : templates.length;
+  const categories = Array.from(new Set(
+    templates
+      .map((t) => t.category)
+      .filter((c): c is string => typeof c === 'string' && c.trim().length > 0)
+  ));
+  return { templates, total, categories };
 }
 
 async function fetchTemplate(id: string): Promise<TemplateDetailResponse> {
@@ -67,11 +118,14 @@ async function installTemplate(request: TemplateInstallRequest): Promise<Install
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(request),
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to install template: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  const template = (json && typeof json === 'object' && 'data' in json) ? json.data : json;
+  return { flow: toFlowFromTemplate(template), message: json?.message || 'Template installed' };
 }
 
 async function exportTemplate(request: TemplateExportRequest): Promise<ExportTemplateResponse> {
@@ -79,16 +133,20 @@ async function exportTemplate(request: TemplateExportRequest): Promise<ExportTem
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(request),
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to export template: ${response.statusText}`);
   }
-  return response.json();
+  const json = await response.json();
+  const template = (json && typeof json === 'object' && 'data' in json) ? json.data : json;
+  return { template: toFlowTemplate(template), message: json?.message || 'Template exported' };
 }
 
 async function deleteTemplate(id: string): Promise<void> {
   const response = await fetch(`${API_BASE}/templates/${id}`, {
     method: 'DELETE',
+    credentials: 'same-origin',
   });
   if (!response.ok) {
     throw new Error(`Failed to delete template: ${response.statusText}`);

ccw/frontend/src/lib/api.ts

@@ -5451,6 +5451,52 @@ export interface ExecutionLogsResponse {
   hasMore: boolean;
 }
 
+// ========== Orchestrator Flow API (Create/Execute) ==========
+
+export interface OrchestratorFlowDto {
+  id: string;
+  name: string;
+  description?: string;
+  version: string;
+  created_at: string;
+  updated_at: string;
+  nodes: Array<Record<string, unknown>>;
+  edges: Array<Record<string, unknown>>;
+  variables: Record<string, unknown>;
+  metadata: Record<string, unknown>;
+}
+
+export interface CreateOrchestratorFlowRequest {
+  name: string;
+  description?: string;
+  version?: string;
+  nodes?: Array<Record<string, unknown>>;
+  edges?: Array<Record<string, unknown>>;
+  variables?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+}
+
+export async function createOrchestratorFlow(
+  request: CreateOrchestratorFlowRequest,
+  projectPath?: string
+): Promise<{ success: boolean; data: OrchestratorFlowDto }> {
+  return fetchApi(withPath('/api/orchestrator/flows', projectPath), {
+    method: 'POST',
+    body: JSON.stringify(request),
+  });
+}
+
+export async function executeOrchestratorFlow(
+  flowId: string,
+  request?: { variables?: Record<string, unknown> },
+  projectPath?: string
+): Promise<{ success: boolean; data: { execId: string; flowId: string; status: string; startedAt: string } }> {
+  return fetchApi(withPath(`/api/orchestrator/flows/${encodeURIComponent(flowId)}/execute`, projectPath), {
+    method: 'POST',
+    body: JSON.stringify(request ?? {}),
+  });
+}
+
 /**
  * Fetch execution state by execId
  * @param execId - Execution ID
@@ -5824,3 +5870,62 @@ export async function revokeCliSessionShareToken(
     { method: 'POST', body: JSON.stringify(input) }
   );
 }
+
+// ========== Audit (Observability) API ==========
+
+export type CliSessionAuditEventType =
+  | 'session_created'
+  | 'session_closed'
+  | 'session_send'
+  | 'session_execute'
+  | 'session_resize'
+  | 'session_share_created'
+  | 'session_share_revoked'
+  | 'session_idle_reaped';
+
+export interface CliSessionAuditEvent {
+  type: CliSessionAuditEventType;
+  timestamp: string;
+  projectRoot: string;
+  sessionKey?: string;
+  tool?: string;
+  resumeKey?: string;
+  workingDir?: string;
+  ip?: string;
+  userAgent?: string;
+  details?: Record<string, unknown>;
+}
+
+export interface CliSessionAuditListResponse {
+  events: CliSessionAuditEvent[];
+  total: number;
+  limit: number;
+  offset: number;
+  hasMore: boolean;
+}
+
+export async function fetchCliSessionAudit(
+  options?: {
+    projectPath?: string;
+    sessionKey?: string;
+    type?: CliSessionAuditEventType | CliSessionAuditEventType[];
+    q?: string;
+    limit?: number;
+    offset?: number;
+  }
+): Promise<{ success: boolean; data: CliSessionAuditListResponse }> {
+  const params = new URLSearchParams();
+  if (options?.sessionKey) params.set('sessionKey', options.sessionKey);
+  if (options?.q) params.set('q', options.q);
+  if (typeof options?.limit === 'number') params.set('limit', String(options.limit));
+  if (typeof options?.offset === 'number') params.set('offset', String(options.offset));
+  if (options?.type) {
+    const types = Array.isArray(options.type) ? options.type : [options.type];
+    params.set('type', types.join(','));
+  }
+
+  const queryString = params.toString();
+  return fetchApi<{ success: boolean; data: CliSessionAuditListResponse }>(
+    withPath(`/api/audit/cli-sessions${queryString ? `?${queryString}` : ''}`, options?.projectPath)
+  );
+}

ccw/frontend/src/lib/queryKeys.ts

@@ -116,6 +116,19 @@ export const workspaceQueryKeys = {
   cliHistoryList: (projectPath: string) => [...workspaceQueryKeys.cliHistory(projectPath), 'list'] as const,
   cliExecutionDetail: (projectPath: string, executionId: string) =>
     [...workspaceQueryKeys.cliHistory(projectPath), 'detail', executionId] as const,
+
+  // ========== Audit ==========
+  audit: (projectPath: string) => [...workspaceQueryKeys.all(projectPath), 'audit'] as const,
+  cliSessionAudit: (
+    projectPath: string,
+    options?: {
+      sessionKey?: string;
+      type?: string;
+      q?: string;
+      limit?: number;
+      offset?: number;
+    }
+  ) => [...workspaceQueryKeys.audit(projectPath), 'cliSessions', options] as const,
 };
 
 // ========== API Settings Keys ==========

ccw/frontend/src/locales/en/issues.json

@@ -159,6 +159,18 @@
     "exec": {
       "title": "Execute in Session"
     },
+    "orchestrator": {
+      "title": "Send to Orchestrator",
+      "targetSession": "Target session",
+      "tool": "Tool",
+      "mode": "Mode",
+      "resumeStrategy": "resumeStrategy",
+      "send": "Send",
+      "sending": "Sending...",
+      "sentTitle": "Sent to Orchestrator",
+      "sentDesc": "Flow created: {flowId}",
+      "sendFailed": "Failed to send"
+    },
     "status": {
       "pending": "Pending",
       "ready": "Ready",
@@ -359,9 +371,38 @@
       "issues": "Issues",
       "board": "Board",
       "queue": "Queue",
-      "discovery": "Discovery"
+      "discovery": "Discovery",
+      "observability": "Observability"
     }
   },
+  "observability": {
+    "pageTitle": "Observability",
+    "description": "Audit and inspect automated deliveries and CLI session activity",
+    "audit": {
+      "title": "CLI Session Audit"
+    },
+    "filters": {
+      "search": "Search",
+      "searchPlaceholder": "Search type/sessionKey/resumeKey/details...",
+      "sessionKey": "Session Key",
+      "sessionKeyPlaceholder": "e.g. cli-xxxx",
+      "type": "Type",
+      "typeAll": "All types",
+      "limit": "Limit"
+    },
+    "table": {
+      "timestamp": "Timestamp",
+      "type": "Type",
+      "sessionKey": "Session",
+      "tool": "Tool",
+      "resumeKey": "Resume Key",
+      "workingDir": "Working Dir",
+      "ip": "IP",
+      "userAgent": "User Agent"
+    },
+    "empty": "No audit events",
+    "error": "Failed to load audit events"
+  },
   "board": {
     "pageTitle": "Issue Board",
     "description": "Visualize and manage issues in a kanban board",

ccw/frontend/src/locales/zh/issues.json

@@ -159,6 +159,18 @@
     "exec": {
       "title": "在会话中执行"
     },
+    "orchestrator": {
+      "title": "发送到编排器",
+      "targetSession": "目标会话",
+      "tool": "工具",
+      "mode": "模式",
+      "resumeStrategy": "resumeStrategy",
+      "send": "发送",
+      "sending": "发送中...",
+      "sentTitle": "已发送到编排器",
+      "sentDesc": "已创建 flow: {flowId}",
+      "sendFailed": "发送失败"
+    },
     "status": {
       "pending": "待处理",
       "ready": "就绪",
@@ -359,9 +371,38 @@
       "issues": "问题列表",
       "board": "看板",
       "queue": "执行队列",
-      "discovery": "问题发现"
+      "discovery": "问题发现",
+      "observability": "可观测"
     }
   },
+  "observability": {
+    "pageTitle": "可观测面板",
+    "description": "审计并查看自动投递与 CLI 会话活动",
+    "audit": {
+      "title": "CLI 会话审计"
+    },
+    "filters": {
+      "search": "搜索",
+      "searchPlaceholder": "搜索 type/sessionKey/resumeKey/details...",
+      "sessionKey": "会话 Key",
+      "sessionKeyPlaceholder": "例如 cli-xxxx",
+      "type": "类型",
+      "typeAll": "全部类型",
+      "limit": "条数"
+    },
+    "table": {
+      "timestamp": "时间戳",
+      "type": "类型",
+      "sessionKey": "会话",
+      "tool": "工具",
+      "resumeKey": "resumeKey",
+      "workingDir": "工作目录",
+      "ip": "IP",
+      "userAgent": "User-Agent"
+    },
+    "empty": "暂无审计事件",
+    "error": "加载审计事件失败"
+  },
   "board": {
     "pageTitle": "问题看板",
     "description": "以看板方式可视化管理问题",

ccw/frontend/src/pages/IssueHubPage.tsx

@@ -18,6 +18,7 @@ import { IssuesPanel } from '@/components/issue/hub/IssuesPanel';
 import { IssueBoardPanel } from '@/components/issue/hub/IssueBoardPanel';
 import { QueuePanel } from '@/components/issue/hub/QueuePanel';
 import { DiscoveryPanel } from '@/components/issue/hub/DiscoveryPanel';
+import { ObservabilityPanel } from '@/components/issue/hub/ObservabilityPanel';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
@@ -193,6 +194,9 @@ export function IssueHubPage() {
       case 'discovery':
         return null; // Discovery panel has its own controls
 
+      case 'observability':
+        return null; // Observability panel has its own controls
+
       default:
         return null;
     }
@@ -217,6 +221,7 @@ export function IssueHubPage() {
       {currentTab === 'board' && <IssueBoardPanel />}
       {currentTab === 'queue' && <QueuePanel />}
       {currentTab === 'discovery' && <DiscoveryPanel />}
+      {currentTab === 'observability' && <ObservabilityPanel />}
 
       <NewIssueDialog open={isNewIssueOpen} onOpenChange={setIsNewIssueOpen} onSubmit={handleCreateIssue} isCreating={isCreating} />
     </div>

ccw/frontend/src/stores/flowStore.ts

@@ -186,13 +186,18 @@ export const useFlowStore = create<FlowStore>()(
             method,
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(flowToSave),
+            credentials: 'same-origin',
           });
 
           if (!response.ok) {
             throw new Error(`Failed to save flow: ${response.statusText}`);
           }
 
-          const savedFlow = await response.json();
+          const payload = await response.json();
+          const savedFlow = (payload && typeof payload === 'object' && 'data' in payload)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ? (payload as any).data
+            : payload;
 
           set(
             (state) => ({
@@ -215,12 +220,16 @@ export const useFlowStore = create<FlowStore>()(
 
       loadFlow: async (id: string): Promise<boolean> => {
         try {
-          const response = await fetch(`${API_BASE}/flows/${id}`);
+          const response = await fetch(`${API_BASE}/flows/${id}`, { credentials: 'same-origin' });
           if (!response.ok) {
             throw new Error(`Failed to load flow: ${response.statusText}`);
           }
 
-          const flow: Flow = await response.json();
+          const payload = await response.json();
+          const flow: Flow = (payload && typeof payload === 'object' && 'data' in payload)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ? (payload as any).data
+            : payload;
 
           set(
             {
@@ -246,6 +255,7 @@ export const useFlowStore = create<FlowStore>()(
         try {
           const response = await fetch(`${API_BASE}/flows/${id}`, {
             method: 'DELETE',
+            credentials: 'same-origin',
           });
 
           if (!response.ok) {
@@ -274,13 +284,18 @@ export const useFlowStore = create<FlowStore>()(
         try {
           const response = await fetch(`${API_BASE}/flows/${id}/duplicate`, {
             method: 'POST',
+            credentials: 'same-origin',
           });
 
           if (!response.ok) {
             throw new Error(`Failed to duplicate flow: ${response.statusText}`);
           }
 
-          const duplicatedFlow: Flow = await response.json();
+          const payload = await response.json();
+          const duplicatedFlow: Flow = (payload && typeof payload === 'object' && 'data' in payload)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ? (payload as any).data
+            : payload;
 
           set(
             (state) => ({
@@ -478,13 +493,13 @@ export const useFlowStore = create<FlowStore>()(
         set({ isLoadingFlows: true }, false, 'fetchFlows/start');
 
         try {
-          const response = await fetch(`${API_BASE}/flows`);
+          const response = await fetch(`${API_BASE}/flows`, { credentials: 'same-origin' });
           if (!response.ok) {
             throw new Error(`Failed to fetch flows: ${response.statusText}`);
           }
 
           const data = await response.json();
-          const flows: Flow[] = data.flows || [];
+          const flows: Flow[] = Array.isArray(data?.data) ? data.data : (data?.flows || []);
 
           set({ flows, isLoadingFlows: false }, false, 'fetchFlows/success');
         } catch (error) {

ccw/frontend/src/types/flow.ts

@@ -206,7 +206,7 @@ export interface Flow {
   id: string;
   name: string;
   description?: string;
-  version: number;
+  version: string | number;
   created_at: string;
   updated_at: string;
   nodes: FlowNode[];