Add session commands, auth picker, and completion

packages/app/src/app/app.tsx

@@ -9,7 +9,7 @@ import {
   onMount,
 } from "solid-js";
 
-import type { Provider } from "@opencode-ai/sdk/v2/client";
+import type { Agent, Provider } from "@opencode-ai/sdk/v2/client";
 
 import { getVersion } from "@tauri-apps/api/app";
 import { parse } from "jsonc-parser";
@@ -98,6 +98,8 @@ import {
 } from "./lib/tauri";
 
 export default function App() {
+  type ProviderAuthMethod = { type: "oauth" | "api"; label: string };
+
   const initialView: View = (() => {
     if (typeof window === "undefined") return "onboarding";
     try {
@@ -157,6 +159,11 @@ export default function App() {
   const [sessionModelById, setSessionModelById] = createSignal<
     Record<string, ModelRef>
   >({});
+  const [sessionAgentById, setSessionAgentById] = createSignal<Record<string, string>>({});
+  const [providerAuthModalOpen, setProviderAuthModalOpen] = createSignal(false);
+  const [providerAuthBusy, setProviderAuthBusy] = createSignal(false);
+  const [providerAuthError, setProviderAuthError] = createSignal<string | null>(null);
+  const [providerAuthMethods, setProviderAuthMethods] = createSignal<Record<string, ProviderAuthMethod[]>>({});
 
   const sessionStore = createSessionStore({
     client,
@@ -195,6 +202,7 @@ export default function App() {
     loadSessions,
     refreshPendingPermissions,
     selectSession,
+    renameSession,
     respondPermission,
     setSessions,
     setSessionStatusById,
@@ -227,6 +235,7 @@ export default function App() {
     activeArtifacts,
     activeWorkingFiles,
     selectDemoSession,
+    renameDemoSession,
   } = demoState;
 
   const [prompt, setPrompt] = createSignal("");
@@ -256,10 +265,12 @@ export default function App() {
       setPrompt("");
 
       const model = selectedSessionModel();
+      const agent = selectedSessionAgent();
 
       await c.session.promptAsync({
         sessionID,
         model,
+        agent: agent ?? undefined,
         variant: modelVariant() ?? undefined,
         parts: [{ type: "text", text: content }],
       });
@@ -289,6 +300,169 @@ export default function App() {
     }
   }
 
+  async function renameSessionTitle(sessionID: string, title: string) {
+    const trimmed = title.trim();
+    if (!trimmed) {
+      throw new Error("Session name is required");
+    }
+
+    if (isDemoMode()) {
+      renameDemoSession(sessionID, trimmed);
+      return;
+    }
+
+    await renameSession(sessionID, trimmed);
+  }
+
+  async function openConnectFlow() {
+    setView("onboarding");
+    setMode("client");
+    setOnboardingStep("client");
+  }
+
+  async function listAgents(): Promise<Agent[]> {
+    const c = client();
+    if (!c) return [];
+    const list = unwrap(await c.app.agents());
+    return list.filter((agent) => !agent.hidden && agent.mode !== "subagent");
+  }
+
+  function setSessionAgent(sessionID: string, agent: string | null) {
+    const trimmed = agent?.trim() ?? "";
+    setSessionAgentById((current) => {
+      const next = { ...current };
+      if (!trimmed) {
+        delete next[sessionID];
+        return next;
+      }
+      next[sessionID] = trimmed;
+      return next;
+    });
+  }
+
+  async function startProviderAuth(providerId?: string) {
+    const c = client();
+    if (!c) {
+      throw new Error("Not connected to a server");
+    }
+
+    const authMethods = unwrap(await c.provider.auth());
+    const providerIds = Object.keys(authMethods).sort();
+    if (!providerIds.length) {
+      throw new Error("No providers available");
+    }
+
+    const resolved = providerId?.trim() ?? "";
+    if (!resolved) {
+      throw new Error("Provider ID is required");
+    }
+    if (!authMethods[resolved]) {
+      throw new Error(`Unknown provider: ${resolved}`);
+    }
+
+    const methods = authMethods[resolved];
+    if (!methods || !methods.length) {
+      throw new Error(`No auth methods for ${resolved}`);
+    }
+
+    const oauthIndex = methods.findIndex((method) => method.type === "oauth");
+    if (oauthIndex === -1) {
+      return `Configure ${resolved} API keys in opencode.json`;
+    }
+
+    const auth = unwrap(await c.provider.oauth.authorize({ providerID: resolved, method: oauthIndex }));
+    if (isTauriRuntime()) {
+      const { openUrl } = await import("@tauri-apps/plugin-opener");
+      await openUrl(auth.url);
+    } else {
+      window.open(auth.url, "_blank", "noopener,noreferrer");
+    }
+
+    return auth.instructions || `Opened ${resolved} auth in browser`;
+  }
+
+  async function openProviderAuthModal() {
+    const c = client();
+    if (!c) {
+      throw new Error("Not connected to a server");
+    }
+
+    setProviderAuthBusy(true);
+    setProviderAuthError(null);
+    try {
+      const methods = unwrap(await c.provider.auth());
+      setProviderAuthMethods(methods as Record<string, ProviderAuthMethod[]>);
+      setProviderAuthModalOpen(true);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to load providers";
+      setProviderAuthError(message);
+      throw error;
+    } finally {
+      setProviderAuthBusy(false);
+    }
+  }
+
+  function closeProviderAuthModal() {
+    setProviderAuthModalOpen(false);
+    setProviderAuthError(null);
+  }
+
+  async function saveSessionExport(sessionID: string) {
+    if (isDemoMode()) {
+      const payload = {
+        sessionID,
+        messages: activeMessages(),
+        todos: activeTodos(),
+        exportedAt: new Date().toISOString(),
+        source: "openwork",
+      };
+      return downloadSessionExport(payload, `session-${sessionID}.json`);
+    }
+
+    const c = client();
+    if (!c) {
+      throw new Error("Not connected to a server");
+    }
+
+    const session = unwrap(await c.session.get({ sessionID }));
+    const messages = unwrap(await c.session.messages({ sessionID }));
+    let todos: TodoItem[] = [];
+    try {
+      todos = unwrap(await c.session.todo({ sessionID }));
+    } catch {
+      // ignore
+    }
+
+    const payload = {
+      session,
+      messages,
+      todos,
+      exportedAt: new Date().toISOString(),
+      source: "openwork",
+    };
+
+    const baseName = session.title || session.slug || session.id;
+    const safeName = baseName
+      .toLowerCase()
+      .replace(/[^a-z0-9\-_.]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 80);
+    const fileName = `session-${safeName || session.id}.json`;
+    return downloadSessionExport(payload, fileName);
+  }
+
+  function downloadSessionExport(payload: unknown, fileName: string) {
+    const json = JSON.stringify(payload, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+    return fileName;
+  }
+
 
 
   async function respondPermissionAndRemember(
@@ -629,6 +803,12 @@ export default function App() {
     return defaultModel();
   });
 
+  const selectedSessionAgent = createMemo(() => {
+    const id = selectedSessionId();
+    if (!id) return null;
+    return sessionAgentById()[id] ?? null;
+  });
+
   const selectedSessionModelLabel = createMemo(() =>
     formatModelLabel(selectedSessionModel(), providers())
   );
@@ -1779,6 +1959,19 @@ export default function App() {
               respondPermissionAndRemember={respondPermissionAndRemember}
               safeStringify={safeStringify}
               showTryNotionPrompt={tryNotionPromptVisible() && notionIsActive()}
+              openConnect={openConnectFlow}
+              startProviderAuth={startProviderAuth}
+              openProviderAuthModal={openProviderAuthModal}
+              closeProviderAuthModal={closeProviderAuthModal}
+              providerAuthModalOpen={providerAuthModalOpen()}
+              providerAuthBusy={providerAuthBusy()}
+              providerAuthError={providerAuthError()}
+              providerAuthMethods={providerAuthMethods()}
+              providers={providers()}
+              providerConnectedIds={providerConnectedIds()}
+              listAgents={listAgents}
+              setSessionAgent={setSessionAgent}
+              saveSession={saveSessionExport}
               onTryNotionPrompt={() => {
                 setPrompt("setup my crm");
                 setTryNotionPromptVisible(false);
@@ -1790,6 +1983,7 @@ export default function App() {
                 }
               }}
               sessionStatus={selectedSessionStatus()}
+              renameSession={renameSessionTitle}
             error={error()}
           />
         </Match>

packages/app/src/app/components/model-picker-modal.tsx

@@ -67,9 +67,8 @@ export default function ModelPickerModal(props: ModelPickerModalProps) {
   });
 
   createEffect(() => {
-    if (!props.open) return;
-
     const onKeyDown = (event: KeyboardEvent) => {
+      if (!props.open) return;
       if (event.key === "Escape") {
         event.preventDefault();
         event.stopPropagation();