@hienlh/ppm 0.9.0-beta.8 → 0.9.1

package/src/web/app.tsx

@@ -10,12 +10,18 @@ import { ProjectBottomSheet } from "@/components/layout/project-bottom-sheet";
 import { LoginScreen } from "@/components/auth/login-screen";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
+import { usePanelStore } from "@/stores/panel-store";
+import {
+  fetchWorkspaceFromServer,
+  resolveWorkspaceConflict,
+  savePanelLayout,
+} from "@/stores/panel-utils";
 import {
   useSettingsStore,
   applyThemeClass,
 } from "@/stores/settings-store";
 import { getAuthToken } from "@/lib/api-client";
-import { useUrlSync, parseUrlState } from "@/hooks/use-url-sync";
+import { useUrlSync, parseUrlState, autoOpenFromUrl } from "@/hooks/use-url-sync";
 import { useGlobalKeybindings } from "@/hooks/use-global-keybindings";
 import { useNotificationBadge } from "@/hooks/use-notification-badge";
 import { useServerReload } from "@/hooks/use-server-reload";
@@ -24,12 +30,18 @@ import { BugReportPopup } from "@/components/shared/bug-report-popup";
 import { UpgradeBanner } from "@/components/layout/upgrade-banner";
 import { ImageOverlay } from "@/components/shared/image-overlay";
 import { DiagramOverlay } from "@/components/shared/diagram-overlay";
+import { ConnectionLostOverlay } from "@/components/shared/connection-lost-overlay";
+import { StatusBar } from "@/components/layout/status-bar";
+import { ExtensionQuickPick } from "@/components/extensions/extension-quickpick";
+import { ExtensionInputBox } from "@/components/extensions/extension-inputbox";
+import { useExtensionWs } from "@/hooks/use-extension-ws";
 import { cn } from "@/lib/utils";
 
 type AuthState = "checking" | "authenticated" | "unauthenticated";
 
 export function App() {
   const [authState, setAuthState] = useState<AuthState>("checking");
+  const [upgradeBannerVisible, setUpgradeBannerVisible] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | "settings" | undefined>();
   const [projectSheetOpen, setProjectSheetOpen] = useState(false);
@@ -109,6 +121,9 @@ export function App() {
   // Auto-reload when server restarts (clears SW cache first)
   useServerReload();
 
+  // Extension WS bridge — connects to /ws/extensions for UI updates (only after auth)
+  useExtensionWs(authState === "authenticated");
+
   // Warn before closing browser tab (prevents accidental Ctrl+W)
   useEffect(() => {
     if (authState !== "authenticated") return;
@@ -127,56 +142,52 @@ export function App() {
     });
   }, [authState]);
 
-  // Fetch projects after auth, then restore from URL if applicable
+  // Fetch projects after auth, then restore workspace + URL
   useEffect(() => {
     if (authState !== "authenticated") return;
 
-    fetchProjects().then(() => {
-      const { projectName: urlProject, tabId: urlTab, openChat } = initialUrlRef.current;
+    fetchProjects().then(async () => {
+      const urlState = initialUrlRef.current;
       const { projects, customOrder } = useProjectStore.getState();
       if (projects.length === 0) return;
 
       // URL project takes priority, then fall back to first sorted project
-      let target = urlProject ? projects.find((p) => p.name === urlProject) : undefined;
+      let target = urlState.projectName
+        ? projects.find((p) => p.name === urlState.projectName)
+        : undefined;
       if (!target) {
         target = resolveOrder(projects, customOrder)[0];
       }
-      if (target) {
-        useProjectStore.getState().setActiveProject(target);
-        if (urlProject && urlTab) {
-          queueMicrotask(() => {
-            const { tabs } = useTabStore.getState();
-            if (tabs.some((t) => t.id === urlTab)) {
-              useTabStore.getState().setActiveTab(urlTab);
-            }
-          });
+      if (!target) return;
+
+      useProjectStore.getState().setActiveProject(target);
+
+      // Fetch server workspace + compare with localStorage (latest-wins)
+      const serverLayout = await fetchWorkspaceFromServer(target.name);
+      if (serverLayout) {
+        const localRaw = localStorage.getItem(`ppm-panels-${target.name}`);
+        const localLayout = localRaw ? JSON.parse(localRaw) : null;
+        const resolved = resolveWorkspaceConflict(localLayout, serverLayout);
+        if (resolved && resolved === serverLayout) {
+          // Server wins — overwrite localStorage and reload panels
+          savePanelLayout(target.name, resolved);
+          usePanelStore.getState().reloadProject(target.name);
         }
       }
 
-      // Deep link: ?openChat=sessionId — open/focus the chat tab
-      if (openChat) {
-        queueMicrotask(() => {
-          const { tabs, setActiveTab, openTab } = useTabStore.getState();
-          const existing = tabs.find(
-            (t) => t.type === "chat" && t.metadata?.sessionId === openChat,
-          );
-          if (existing) {
-            setActiveTab(existing.id);
-          } else {
-            openTab({
-              type: "chat",
-              title: "Chat",
-              projectId: target?.name ?? null,
-              closable: true,
-              metadata: { sessionId: openChat },
-            });
-          }
-          // Clean up query param
+      // Auto-open target tab from URL (type-based)
+      queueMicrotask(() => {
+        if (urlState.tabType) {
+          autoOpenFromUrl(urlState.tabType, urlState.tabIdentifier, target!.name);
+        }
+        // Legacy: ?openChat= query param
+        if (urlState.openChat) {
+          autoOpenFromUrl("chat", urlState.openChat, target!.name);
           const url = new URL(window.location.href);
           url.searchParams.delete("openChat");
           window.history.replaceState(null, "", url.pathname);
-        });
-      }
+        }
+      });
     });
   }, [authState, fetchProjects]);
 
@@ -226,11 +237,11 @@ export function App() {
     <TooltipProvider>
       <div className="h-dvh flex flex-col bg-background text-foreground overflow-hidden relative">
         {/* Upgrade banner — shown when new version available */}
-        <UpgradeBanner />
+        <UpgradeBanner onVisibilityChange={setUpgradeBannerVisible} />
 
         {/* Mobile device name badge — floating top-left */}
         {deviceName && (
-          <div className="md:hidden fixed top-0 left-0 z-50 px-2 py-0.5 bg-primary/80 text-primary-foreground text-[10px] font-medium rounded-br">
+          <div className={cn("md:hidden fixed left-0 z-50 px-2 py-0.5 bg-primary/80 text-primary-foreground text-[10px] font-medium rounded-br transition-[top]", upgradeBannerVisible ? "top-7" : "top-0")}>
             {deviceName}
           </div>
         )}
@@ -244,17 +255,20 @@ export function App() {
           <Sidebar />
 
           {/* Content area — keep-alive per project */}
-          {[...mountedProjects].map((projectName) => (
-            <div
-              key={projectName}
-              className={cn(
-                "flex-1 overflow-hidden pb-12 md:pb-0",
-                activeProjectName !== projectName && "hidden",
-              )}
-            >
-              <PanelLayout projectName={projectName} />
-            </div>
-          ))}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {[...mountedProjects].map((projectName) => (
+              <div
+                key={projectName}
+                className={cn(
+                  "flex-1 overflow-hidden pb-12 md:pb-0",
+                  activeProjectName !== projectName && "hidden",
+                )}
+              >
+                <PanelLayout projectName={projectName} />
+              </div>
+            ))}
+            <StatusBar />
+          </div>
         </div>
 
         {/* Mobile bottom nav */}
@@ -288,6 +302,13 @@ export function App() {
         {/* Global diagram lightbox (mermaid) */}
         <DiagramOverlay />
 
+        {/* Extension modals (QuickPick, InputBox) */}
+        <ExtensionQuickPick />
+        <ExtensionInputBox />
+
+        {/* Connection lost overlay — shown when API unreachable for >15s */}
+        <ConnectionLostOverlay />
+
         {/* Toast notifications */}
         <Toaster
           position="bottom-left"

package/src/web/components/chat/account-rotation-settings.tsx

@@ -0,0 +1,163 @@
+import { useState, useEffect, useSyncExternalStore } from "react";
+import { Settings, X } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import {
+  getAccountSettings,
+  updateAccountSettings,
+  type AccountSettings,
+} from "../../lib/api-settings";
+
+interface AccountRotationSettingsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const mdQuery = typeof window !== "undefined" ? window.matchMedia("(min-width: 768px)") : null;
+function subscribeMedia(cb: () => void) {
+  mdQuery?.addEventListener("change", cb);
+  return () => mdQuery?.removeEventListener("change", cb);
+}
+function getIsDesktop() {
+  return mdQuery?.matches ?? true;
+}
+
+function SettingsContent() {
+  const [settings, setSettings] = useState<AccountSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    getAccountSettings()
+      .then(setSettings)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return <p className="text-xs text-text-subtle py-4 text-center">Loading...</p>;
+  }
+  if (!settings) {
+    return <p className="text-xs text-text-subtle py-4 text-center">Failed to load settings</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Strategy */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-text-primary">Rotation Strategy</label>
+        <Select
+          value={settings.strategy}
+          onValueChange={async (v) => {
+            const updated = await updateAccountSettings({ strategy: v as AccountSettings["strategy"] });
+            setSettings(updated);
+          }}
+        >
+          <SelectTrigger className="w-full h-9 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="round-robin">Round-robin</SelectItem>
+            <SelectItem value="fill-first">Fill-first</SelectItem>
+            <SelectItem value="lowest-usage">Lowest usage</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-text-subtle">
+          {settings.strategy === "round-robin" && "Cycles through accounts evenly"}
+          {settings.strategy === "fill-first" && "Uses one account until its limit, then moves on"}
+          {settings.strategy === "lowest-usage" && "Picks the account with the lowest current usage"}
+        </p>
+      </div>
+
+      {/* Max Retry */}
+      <div className="space-y-1.5">
+        <label className="text-xs font-medium text-text-primary">Max Retry</label>
+        <input
+          type="number"
+          min={0}
+          value={settings.maxRetry}
+          className="w-full h-9 text-xs border rounded-md px-3 bg-background"
+          onChange={async (e) => {
+            const v = parseInt(e.target.value, 10);
+            if (!isNaN(v) && v >= 0) {
+              const updated = await updateAccountSettings({ maxRetry: v });
+              setSettings(updated);
+            }
+          }}
+        />
+        <p className="text-[10px] text-text-subtle">
+          How many accounts to try on failure. 0 = try all available accounts.
+        </p>
+      </div>
+
+      {/* Active accounts */}
+      <div className="flex items-center justify-between text-xs border-t border-border pt-3">
+        <span className="text-text-subtle">Active accounts</span>
+        <span className="font-medium text-text-primary">{settings.activeCount}</span>
+      </div>
+    </div>
+  );
+}
+
+export function AccountRotationSettings({ open, onOpenChange }: AccountRotationSettingsProps) {
+  const isDesktop = useSyncExternalStore(subscribeMedia, getIsDesktop);
+
+  if (!open) return null;
+
+  // Desktop: Dialog
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle className="text-sm flex items-center gap-2">
+              <Settings className="size-4" /> Rotation & Retry
+            </DialogTitle>
+          </DialogHeader>
+          <SettingsContent />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Mobile: Bottom sheet
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 transition-opacity duration-200 opacity-100"
+        onClick={() => onOpenChange(false)}
+        style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      />
+      <div
+        className={cn(
+          "fixed bottom-0 left-0 right-0 z-50 bg-background rounded-t-2xl border-t border-border shadow-2xl",
+          "transition-transform duration-300 ease-out max-h-[85vh] overflow-y-auto",
+          "translate-y-0",
+        )}
+      >
+        {/* Drag handle */}
+        <div className="flex justify-center pt-3 pb-1">
+          <div className="w-10 h-1 rounded-full bg-border" />
+        </div>
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-2 border-b border-border">
+          <span className="text-sm font-semibold flex items-center gap-2">
+            <Settings className="size-4" /> Rotation & Retry
+          </span>
+          <button
+            onClick={() => onOpenChange(false)}
+            className="flex items-center justify-center size-7 rounded-md hover:bg-surface-elevated transition-colors"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-4 py-4 pb-8">
+          <SettingsContent />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, RefreshCw, Search, Pencil, Check, X, BellOff } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2 } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -16,6 +16,7 @@ interface ChatHistoryBarProps {
   projectName: string;
   usageInfo: UsageInfo;
   contextWindowPct?: number | null;
+  compactStatus?: "compacting" | null;
   usageLoading?: boolean;
   refreshUsage?: () => void;
   lastFetchedAt?: string | null;
@@ -50,8 +51,36 @@ function pctColor(pct: number): string {
   return "text-green-500";
 }
 
+function DebugCopyButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={async () => {
+        try {
+          const data = await api.get<{ ppmSessionId: string; sdkSessionId: string; jsonlPath: string | null; projectPath: string }>(
+            `${projectUrl(projectName)}/chat/sessions/${sessionId}/debug?project=${encodeURIComponent(projectName)}`,
+          );
+          const info = [
+            `PPM Session: ${data.ppmSessionId}`,
+            `SDK Session: ${data.sdkSessionId}`,
+            data.jsonlPath ? `JSONL: ${data.jsonlPath}` : `JSONL: not found`,
+            data.projectPath ? `Project: ${data.projectPath}` : null,
+          ].filter(Boolean).join("\n");
+          await navigator.clipboard.writeText(info);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        } catch { /* silent */ }
+      }}
+      className={`p-1 rounded transition-colors ${copied ? "text-green-500 bg-green-500/10" : "text-text-subtle hover:text-text-secondary hover:bg-surface-elevated"}`}
+      title={copied ? "Copied!" : "Copy session debug info"}
+    >
+      {copied ? <ClipboardCheck className="size-3" /> : <Bug className="size-3" />}
+    </button>
+  );
+}
+
 export function ChatHistoryBar({
-  projectName, usageInfo, contextWindowPct, usageLoading, refreshUsage, lastFetchedAt,
+  projectName, usageInfo, contextWindowPct, compactStatus, usageLoading, refreshUsage, lastFetchedAt,
   sessionId, providerId, onSelectSession, onBugReport, isConnected, onReconnect,
 }: ChatHistoryBarProps) {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
@@ -123,6 +152,37 @@ export function ChatHistoryBar({
 
   const cancelEditing = useCallback(() => setEditingId(null), []);
 
+  const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
+    e.stopPropagation();
+    if (!projectName) return;
+    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/pin`;
+    try {
+      if (session.pinned) {
+        await api.del(url);
+      } else {
+        await api.put(url);
+      }
+      setSessions((prev) => {
+        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
+        return updated.sort((a, b) => {
+          if (a.pinned && !b.pinned) return -1;
+          if (!a.pinned && b.pinned) return 1;
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        });
+      });
+    } catch { /* silent */ }
+  }, [projectName]);
+
+  const deleteSession = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
+    e.stopPropagation();
+    if (!projectName) return;
+    if (!window.confirm("Delete this session? This cannot be undone.")) return;
+    try {
+      await api.del(`${projectUrl(projectName)}/chat/sessions/${session.id}?providerId=${session.providerId}`);
+      setSessions((prev) => prev.filter((s) => s.id !== session.id));
+    } catch { /* silent */ }
+  }, [projectName]);
+
   // Filter sessions by search query
   const filteredSessions = searchQuery.trim()
     ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
@@ -191,14 +251,27 @@ export function ChatHistoryBar({
                 <span className={pctColor(contextWindowPct)}>Ctx:{contextWindowPct}%</span>
               </>
             )}
+            {compactStatus === "compacting" && (
+              <>
+                <span className="text-text-subtle">·</span>
+                <span className="text-blue-400 animate-pulse">compacting...</span>
+              </>
+            )}
           </button>
         ) : (
-          contextWindowPct != null && (
-            <span className={`flex items-center gap-1 px-1.5 py-0.5 text-[11px] font-medium tabular-nums ${pctColor(contextWindowPct)}`}>
-              <Activity className="size-3" />
-              <span>Ctx:{contextWindowPct}%</span>
-            </span>
-          )
+          <>
+            {contextWindowPct != null && (
+              <span className={`flex items-center gap-1 px-1.5 py-0.5 text-[11px] font-medium tabular-nums ${pctColor(contextWindowPct)}`}>
+                <Activity className="size-3" />
+                <span>Ctx:{contextWindowPct}%</span>
+              </span>
+            )}
+            {compactStatus === "compacting" && (
+              <span className="text-[11px] px-1.5 py-0.5 text-blue-400 animate-pulse">
+                compacting...
+              </span>
+            )}
+          </>
         )}
 
         {/* Spacer */}
@@ -215,6 +288,11 @@ export function ChatHistoryBar({
           </button>
         )}
 
+        {/* Debug info — copy session IDs + JSONL path */}
+        {sessionId && (
+          <DebugCopyButton sessionId={sessionId} projectName={projectName} />
+        )}
+
         {/* Connection indicator */}
         {onReconnect && (
           <button
@@ -297,17 +375,35 @@ export function ChatHistoryBar({
                       >
                         {session.title || "Untitled"}
                       </button>
+                      <button
+                        onClick={(e) => togglePin(e, session)}
+                        className={`p-0.5 rounded transition-all ${
+                          session.pinned
+                            ? "text-primary hover:text-primary/70"
+                            : "text-text-subtle hover:text-text-secondary md:opacity-0 md:group-hover:opacity-100"
+                        }`}
+                        title={session.pinned ? "Unpin session" : "Pin session"}
+                      >
+                        {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+                      </button>
                       <button
                         onClick={(e) => startEditing(session, e)}
-                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary md:opacity-0 md:group-hover:opacity-100 transition-opacity"
                         title="Rename session"
                       >
                         <Pencil className="size-3" />
                       </button>
+                      <button
+                        onClick={(e) => deleteSession(e, session)}
+                        className="p-0.5 rounded text-text-subtle hover:text-red-400 hover:bg-red-500/20 md:opacity-0 md:group-hover:opacity-100 transition-opacity"
+                        title="Delete session"
+                      >
+                        <Trash2 className="size-3" />
+                      </button>
                     </>
                   )}
                   {editingId !== session.id && session.updatedAt && (
-                    <span className="text-[10px] text-text-subtle shrink-0">{formatDate(session.updatedAt)}</span>
+                    <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
                   )}
                 </div>
               ))

package/src/web/components/chat/chat-tab.tsx

@@ -89,6 +89,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     connectingElapsed,
     pendingApproval,
     contextWindowPct,
+    compactStatus,
     sessionTitle,
     migratedSessionId,
     sendMessage,
@@ -134,14 +135,12 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     }
   }, [sessionTitle]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Auto-send pending message for forked sessions (set by handleFork)
-  const pendingForkMsgRef = useRef(metadata?.pendingMessage as string | undefined);
+  // Pending fork message — show in input for user to edit, not auto-send
+  const [forkDraft, setForkDraft] = useState<string | undefined>(metadata?.pendingMessage as string | undefined);
   useEffect(() => {
-    if (pendingForkMsgRef.current && isConnected && sessionId) {
-      const msg = pendingForkMsgRef.current;
-      pendingForkMsgRef.current = undefined;
-      if (tabId) updateTab(tabId, { metadata: { ...metadata, pendingMessage: undefined } });
-      setTimeout(() => sendMessage(msg, { permissionMode }), 100);
+    if (forkDraft && isConnected && sessionId && tabId) {
+      // Clear from tab metadata once consumed
+      updateTab(tabId, { metadata: { ...metadata, pendingMessage: undefined } });
     }
   }, [isConnected, sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -162,12 +161,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   }, [tabId, updateTab]);
 
   /** Fork current session and open new tab with the forked session, resending userMessage */
-  const handleFork = useCallback(async (userMessage: string) => {
+  const handleFork = useCallback(async (userMessage: string, messageId?: string) => {
     if (!sessionId || !projectName) return;
     try {
       const { api, projectUrl } = await import("@/lib/api-client");
       const forked = await api.post<{ id: string; forkedFrom: string }>(
         `${projectUrl(projectName)}/chat/sessions/${sessionId}/fork?providerId=${providerId}`,
+        { messageId },
       );
       // Open new chat tab with forked session — it will send userMessage on connect
       useTabStore.getState().openTab({
@@ -350,6 +350,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           projectName={projectName}
           usageInfo={usageInfo}
           contextWindowPct={contextWindowPct}
+          compactStatus={compactStatus}
           usageLoading={usageLoading}
           refreshUsage={refreshUsage}
           lastFetchedAt={lastFetchedAt}
@@ -382,10 +383,14 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
         {/* Input */}
         <MessageInput
-          onSend={handleSend}
+          onSend={(content, attachments, priority) => {
+            if (forkDraft) setForkDraft(undefined);
+            handleSend(content, attachments, priority);
+          }}
           isStreaming={isStreaming}
           onCancel={cancelStreaming}
-          autoFocus={!(metadata?.sessionId)}
+          autoFocus={!(metadata?.sessionId) || !!forkDraft}
+          initialValue={forkDraft}
           projectName={projectName}
           onSlashStateChange={handleSlashStateChange}
           onSlashItemsLoaded={setSlashItems}