feat: refine workspace editor and terminal UX

Author: pallyoung

e2e-ui/fixtures/scene-runner.ts

@@ -33,9 +33,12 @@ async function openSettingsSection(
 ) {
   const sectionOrder = {
     general: 0,
-    providers: 1,
-    appearance: 2,
-    shortcuts: 3,
+    monitoring: 1,
+    analysis: 2,
+    providers: 3,
+    appearance: 4,
+    shortcuts: 5,
+    about: 6,
   } as const;
 
   const index = sectionOrder[section];

packages/web/src/app/providers.lifecycle.test.tsx

@@ -9,6 +9,7 @@ import {
 } from "../atoms/activation";
 import { appearancePersonalizationAtom, authenticatedAtom, themeAtom } from "../atoms/app-ui";
 import { authEnabledAtom, connectionStatusAtom } from "../atoms/connection";
+import { providerListAtom } from "../atoms/providers";
 import { sessionsAtom } from "../atoms/sessions";
 import {
   activeWorkspaceIdAtom,
@@ -1136,6 +1137,17 @@ describe("AppProviders lifecycle recovery", () => {
       store.set(activationStatusAtom, "active");
       store.set(activationGenerationAtom, 1);
       store.set(activationReasonAtom, null);
+      store.set(providerListAtom, [
+        {
+          id: "codex",
+          displayName: "Codex",
+          badge: "Codex",
+          kind: "built_in",
+          capability: "full",
+          capabilities: [],
+          requiredCommands: ["codex"],
+        },
+      ]);
       store.set(gitStateAtomFamily("ws-1"), {
         branch: "feature/test",
         ahead: 1,
@@ -1205,6 +1217,7 @@ describe("AppProviders lifecycle recovery", () => {
       expect(store.get(worktreeListAtomFamily("ws-1")).items).toEqual([]);
       expect(store.get(fileTreeStaleAtomFamily("ws-1"))).toBe(false);
       expect(store.get(sessionsAtom)).toEqual({});
+      expect(store.get(providerListAtom).map((provider) => provider.id)).toEqual(["codex"]);
     });
   });
 

packages/web/src/app/providers.tsx

@@ -30,6 +30,7 @@ import {
   dispatchCommandAtom,
   isWriterAtom,
   lastReconnectAttemptAtom,
+  providerListAtom,
   reconnectAttemptCountAtom,
   serverInfoAtom,
   sessionsAtom,
@@ -88,6 +89,7 @@ import {
 } from "../features/workspace/atoms";
 import { useActivation } from "../hooks/use-activation";
 import { getThemeById, resolveStoredThemeId } from "../theme";
+import { useSyncTerminalThemeBackground } from "../theme/use-sync-terminal-theme-background";
 import type { ConnectionStatus, EventListener } from "../ws";
 import { resolveWsUrl, WsClient } from "../ws";
 
@@ -221,6 +223,34 @@ function resetServerProjectedState(store: Store): void {
   }
 }
 
+function ProviderListBootstrapper() {
+  const connectionStatus = useAtomValue(connectionStatusAtom);
+  const dispatch = useAtomValue(dispatchCommandAtom);
+  const providerList = useAtomValue(providerListAtom);
+  const setProviderList = useSetAtom(providerListAtom);
+
+  useEffect(() => {
+    if (connectionStatus !== "connected" || providerList.length > 0) {
+      return;
+    }
+
+    let cancelled = false;
+
+    void dispatch("provider.list", {}).then((result) => {
+      if (cancelled || !result.ok || !Array.isArray(result.data)) {
+        return;
+      }
+      setProviderList(result.data);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [connectionStatus, dispatch, providerList.length, setProviderList]);
+
+  return null;
+}
+
 function parseWorkspaceRefreshHint(
   topic: string,
   payload: unknown
@@ -302,6 +332,7 @@ export function AppProviders({ children }: AppProvidersProps) {
   const { claim } = useActivation();
 
   useSessionNotifications();
+  useSyncTerminalThemeBackground(dispatch, activeWorkspaceId, connectionStatus);
 
   // Use refs to avoid stale closures in event handlers
   const wsClientRef = useRef<WsClient | null>(null);
@@ -1186,7 +1217,12 @@ export function AppProviders({ children }: AppProvidersProps) {
       .catch(() => {});
   }, [activeWorkspaceId, activationStatus, authEnabled, authenticated, connectionStatus]);
 
-  return <>{children}</>;
+  return (
+    <>
+      <ProviderListBootstrapper />
+      {children}
+    </>
+  );
 }
 
 function storeServerMetadata(

packages/web/src/atoms/providers.ts

@@ -0,0 +1,8 @@
+import type { ProviderListItem, ProviderRuntimeStatusResponse } from "@coder-studio/core";
+import { atom } from "jotai";
+
+export const providerListAtom = atom<ProviderListItem[]>([]);
+
+export const providerRuntimeStatusAtom = atom<
+  ProviderRuntimeStatusResponse["providers"] | undefined
+>(undefined);

packages/web/src/features/agent-panes/index.test.tsx

@@ -1,4 +1,4 @@
-import type { Session } from "@coder-studio/core";
+import type { ProviderRuntimeStatusResponse, Session } from "@coder-studio/core";
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -201,6 +201,45 @@ const mockEditorPaneCard = vi.fn(
   )
 );
 
+const AVAILABLE_PROVIDER_RUNTIME_STATUS: ProviderRuntimeStatusResponse = {
+  providers: {
+    claude: {
+      providerId: "claude",
+      displayName: "Claude",
+      badge: "Claude",
+      kind: "built_in",
+      stability: "stable",
+      capability: "full",
+      capabilities: [],
+      requiredCommands: ["claude"],
+      available: true,
+      missingCommands: [],
+      missingPrerequisites: [],
+      autoInstallSupported: false,
+      installReadiness: "ready",
+      manualGuideKeys: [],
+      docUrls: { provider: "", prerequisites: {} },
+    },
+    codex: {
+      providerId: "codex",
+      displayName: "Codex",
+      badge: "Codex",
+      kind: "built_in",
+      stability: "stable",
+      capability: "full",
+      capabilities: [],
+      requiredCommands: ["codex"],
+      available: true,
+      missingCommands: [],
+      missingPrerequisites: [],
+      autoInstallSupported: false,
+      installReadiness: "ready",
+      manualGuideKeys: [],
+      docUrls: { provider: "", prerequisites: {} },
+    },
+  },
+};
+
 vi.mock("./views/shared/editor-pane-card", () => ({
   EditorPaneCard: (props: {
     paneId: string;
@@ -1436,6 +1475,9 @@ describe("AgentPanes", () => {
   it("disables provider buttons while session.create is in flight to prevent re-entry", async () => {
     let resolveCreate: ((value: unknown) => void) | undefined;
     const sendCommand = vi.fn().mockImplementation((op: string) => {
+      if (op === "provider.runtimeStatus") {
+        return AVAILABLE_PROVIDER_RUNTIME_STATUS;
+      }
       if (op === "session.create") {
         return new Promise((resolve) => {
           resolveCreate = resolve;