@spunto/design-system 0.32.0 → 0.33.0

package/README.md

@@ -264,7 +264,7 @@ sides — exactly the duplication this package is for.
   dozen entries, where picking is a *logo* task and full cards become a wall.
   They flow and wrap like tags; the pickers pair them with the full card of
   what's selected.
-- **`ExtensionCard`** (+ `ExtensionCardSkeleton`) — a VS Code extension: its real
+- **`ExtensionCard`** (+ `ExtensionCardSkeleton`) — an IDE extension: its real
   Open VSX icon, display name, publisher + verified badge, version, formatted
   install count, rating.
 
@@ -304,9 +304,10 @@ review. Every surface that shows one:
   an organization as a messaging app's list: search, state chips whose counts ignore
   the filter, grouped rows. Fully controlled. Sized by `pointer-coarse`, not width.
 - **`TaskCockpit`** / **`TaskCockpitMobile`** — one conversation, as a **layout**: top
-  bar + Accept/Drop, the Session/Diff switch, and where each slot goes. The panels are
-  slots filled with the package's own components (`session`/`diff` are render
-  functions receiving the switch to draw in their header). The phone one is its own
+  bar + Accept/Drop, the Session/Diff/Terminal switch, and where each slot goes. The
+  panels are slots filled with the package's own components (`session`/`diff`/`terminal`
+  are render functions receiving the switch to draw in their header; an omitted slot is
+  no tab). The phone one is its own
   screen — a `visualViewport`-sized layer, details in a sheet, Drop at the bottom.
 - **`TaskEventStream`** — the agent session (RFC 0020): prose first, tool calls folded
   into runs ("read 8 files · ran 3 commands"), the session-wide tool stack in a sheet,
@@ -315,6 +316,9 @@ review. Every surface that shows one:
 - **`TaskDiffPanel`** — the branch's diff: summary as a prop, each file's patch through
   `loadPatch` (a promise; the component owns per-file loading state), intra-line
   highlighting, and a sentence for every reason it could not be read.
+- **`TaskTerminalPanel`** — the frame of the Terminal tab: the header with the switch,
+  optional `actions`, and a dark surface for the app's own shell (the socket is the
+  app's), or a sentence saying why there is none. No composer under it.
 - **`TaskDetails`** (`sidebar` | `sheet`) with **`TaskMachine`**, **`TaskBoot`**,
   `TaskSessionUsage`, `TaskPullRequest`, `TaskCommandLog` — the facts about a task, in
   one order, instead of two hand-kept copies.
@@ -418,7 +422,7 @@ And the read-only twin of that form:
 And the build that configuration triggers, while it runs:
 
 - **`BuildSteps`** — an image build as the **list of blocks it is made of**
-  (base image, bootstrap, one per devcontainer feature, VS Code extensions,
+  (base image, bootstrap, one per devcontainer feature, IDE extensions,
   finalize, DinD seed) rather than a wall of log. Each row lights up in turn and
   carries its own duration, so "what is it doing, and for how long" reads at a
   glance and a slow feature is visibly *the* slow one.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/devcontainer/extension-card.tsx

@@ -24,7 +24,7 @@ export interface ExtensionCardProps {
 }
 
 /**
- * A VS Code extension, as a card: its real Open VSX icon, its display name, the
+ * An IDE extension, as a card: its real Open VSX icon, its display name, the
  * publisher (with the marketplace's verified check), version, install count and
  * rating.
  *

package/src/components/devcontainer/index.ts

@@ -1,5 +1,5 @@
 // @spunto/design-system/devcontainer — the three catalogs you compose an
-// environment from: base images, devcontainer features, VS Code extensions.
+// environment from: base images, devcontainer features, IDE extensions.
 //
 // A second *domain* sub-export, next to `/workers`: the root entry stays
 // "primitives with no domain" (a Button knows nothing about an OCI reference).

package/src/components/devcontainer/types.ts

@@ -59,7 +59,7 @@ export interface DevcontainerFeatureEntry {
 }
 
 /**
- * A VS Code extension. Shaped to swallow an Open VSX search result as-is
+ * An IDE extension. Shaped to swallow an Open VSX search result as-is
  * (`namespace` + `name` + `files.icon` + `downloadCount`…) as well as the
  * flattened form an app might store.
  */

package/src/components/projects/build-steps.tsx

@@ -163,7 +163,7 @@ function StepRow({ step, last }: { step: BuildStepItem; last: boolean }) {
  * An image build, as the list of blocks it is actually made of, instead of a wall of log.
  *
  * A project image build pulls a base image, creates the user, installs the editor and the terminal
- * tooling, every devcontainer feature and every VS Code extension, then bakes the DinD seed — all of
+ * tooling, every devcontainer feature and every IDE extension, then bakes the DinD seed — all of
  * it, until now, indistinguishable from the outside: one terminal scrolling. Here each of those is a
  * row that lights up in turn, with its own duration, so "what is it doing, and for how long" is
  * readable at a glance and a slow feature is visibly *the* slow one.

package/src/components/projects/chip-list.tsx

@@ -104,10 +104,10 @@ export function FeatureChips({ features, className }: { features: { id: string }
 }
 
 /**
- * VS Code extensions — `publisher.name` shown by its name half, with the
+ * IDE extensions — `publisher.name` shown by its name half, with the
  * publisher kept in the tooltip. Same logo derivation as the features
  * (`ms-python.python` → Python); anything unrecognised keeps the puzzle piece,
- * which is what a VS Code extension *is*.
+ * which is what an IDE extension *is*.
  */
 export function ExtensionChips({ extensions, className }: { extensions: string[]; className?: string }) {
   return (

package/src/components/projects/extension-picker.tsx

@@ -25,7 +25,7 @@ export interface ExtensionPickerProps {
 }
 
 /**
- * Pick the VS Code extensions installed into code-server: a marketplace search
+ * Pick the IDE extensions installed into code-server: a marketplace search
  * rendering `ExtensionCard`s, plus the picked list.
  *
  * The payloads of everything picked this session are kept around, so a selected

package/src/components/projects/index.ts

@@ -95,7 +95,7 @@ export type { BuildCacheListProps, PrebuildButtonProps } from "./build-cache-lis
 // The build itself, while it runs: the blocks an image is made of, each lighting
 // up in turn. Same domain as the cache list it sits next to (a project's image),
 // hence this entry rather than one of its own — and domain it is, since the
-// blocks are Spunto's (a devcontainer feature, a VS Code extension).
+// blocks are Spunto's (a devcontainer feature, an IDE extension).
 export { BuildSteps } from "./build-steps"
 export type { BuildStepsProps, BuildStepItem, BuildStepKind, BuildStepState } from "./build-steps"
 

package/src/components/projects/project-form.tsx

@@ -45,7 +45,7 @@ const SECTION_META: Record<
   image: { icon: BoxIcon, accent: "ship", title: "Base image", hint: "The devcontainer your workers run on" },
   repositories: { icon: GitBranchIcon, accent: "run", title: "Repositories", hint: "Cloned into /workspace at startup" },
   features: { icon: PuzzleIcon, accent: "flame", title: "Features", hint: "Devcontainer features baked into the image" },
-  extensions: { icon: BlocksIcon, accent: "build", title: "Extensions", hint: "VS Code extensions, installed via code-server" },
+  extensions: { icon: BlocksIcon, accent: "build", title: "Extensions", hint: "IDE extensions, installed via code-server" },
   lifecycle: { icon: TerminalIcon, accent: "ship", title: "Lifecycle", hint: "Commands run on create & on every start" },
   ports: { icon: NetworkIcon, accent: "run", title: "Ports", hint: "Automatically forwarded for every worker" },
   prewarm: { icon: LayersIcon, accent: "build", title: "Prewarm images", hint: "Docker images pre-loaded into the worker's docker-in-docker on first start" },

package/src/components/tasks/index.ts

@@ -79,6 +79,8 @@ export {
 // ── Side panels ─────────────────────────────────────────────────────────────────────────────
 export { TaskDiffPanel } from "./diff-panel"
 export type { TaskDiffPanelProps } from "./diff-panel"
+export { TaskTerminalPanel } from "./terminal-panel"
+export type { TaskTerminalPanelProps } from "./terminal-panel"
 export { TaskPullRequest } from "./pull-request"
 export { TaskSessionUsage, formatCost, formatTokens } from "./session-usage"
 export { TaskCommandLog } from "./command-log"

package/src/components/tasks/task-cockpit-mobile.tsx

@@ -23,7 +23,7 @@ import { CheckCircle2Icon, ChevronLeftIcon, Loader2Icon, SlidersHorizontalIcon,
 import { cn, formatRelativeTime } from "../../utils"
 import { useOverlayContainer } from "../spunto-provider"
 import type { LinkRender } from "../workers/worker-card"
-import { TaskPanelTabs, useCockpitView, type TaskCockpitProps } from "./task-cockpit"
+import { useCockpitPanels, type TaskCockpitProps } from "./task-cockpit"
 import { TaskDetailsSheetContext } from "./task-details"
 import { TaskStateIcon, taskPendingActionConfig, taskStateStyle, useElapsed } from "./task-state"
 import { TaskTitle } from "./task-title"
@@ -173,6 +173,7 @@ export function TaskCockpitMobile({
   onViewChange,
   session,
   diff,
+  terminal,
   composer,
   details,
   fullscreen = true,
@@ -181,12 +182,11 @@ export function TaskCockpitMobile({
   const vp = useVisualViewport(fullscreen)
   const container = useOverlayContainer()
   const [detailsOpen, setDetailsOpen] = useState(false)
-  const [view, setView] = useCockpitView(viewProp, onViewChange)
+  const { view, panel } = useCockpitPanels({ view: viewProp, onViewChange, session, diff, terminal })
   const Link = render?.link ?? defaultLink
 
   const action = task ? (pendingAction !== undefined ? pendingAction : (task.pendingAction ?? null)) : null
   const since = task ? (pendingSince !== undefined ? pendingSince : (task.pendingSince ?? null)) : null
-  const tabs = diff ? <TaskPanelTabs view={view} onChange={setView} /> : null
 
   const back = onBack ? (
     <button type="button" onClick={onBack} aria-label="Back" className={NAV_BUTTON}>
@@ -260,8 +260,8 @@ export function TaskCockpitMobile({
         )
       ) : (
         <>
-          {view === "diff" && diff ? diff(tabs) : session(tabs)}
-          {composer && <div style={{ paddingBottom: fullscreen && vp.keyboard === 0 ? "env(safe-area-inset-bottom)" : 0 }}>{composer}</div>}
+          {panel()}
+          {composer && view !== "terminal" && <div style={{ paddingBottom: fullscreen && vp.keyboard === 0 ? "env(safe-area-inset-bottom)" : 0 }}>{composer}</div>}
         </>
       )}
 

package/src/components/tasks/task-cockpit.tsx

@@ -12,11 +12,12 @@
 //
 //   session  → `TaskEventStream`       diff     → `TaskDiffPanel`
 //   composer → `TaskComposer`          details  → `TaskDetails` (with a `TaskMachine` inside)
+//   terminal → `TaskTerminalPanel` (around the app's own shell)
 //
 // — and the cockpit owns the chrome between them: the top bar and its two actions, the
-// Session/Diff switch, and where each slot goes as the box narrows. `session` and `diff` are
-// render functions because the switch is drawn *inside* their header strip (two strips of chrome
-// above a transcript is one too many).
+// Session/Diff/Terminal switch, and where each slot goes as the box narrows. `session`, `diff` and
+// `terminal` are render functions because the switch is drawn *inside* their header strip (two
+// strips of chrome above a transcript is one too many).
 //
 // It claims no page chrome of its own — it fills its parent — which is what lets the same code
 // live at its own URL and on the right-hand side of the org-wide conversation list. On a phone,
@@ -33,7 +34,9 @@ import { TaskStateBadge, isLiveTaskState } from "./task-state"
 import { TaskTitle } from "./task-title"
 import type { TaskItem, TaskPendingAction } from "./types"
 
-export type TaskCockpitView = "session" | "diff"
+export type TaskCockpitView = "session" | "diff" | "terminal"
+
+const VIEW_ORDER: readonly TaskCockpitView[] = ["session", "diff", "terminal"]
 
 export interface TaskCockpitProps {
   /** `undefined`/`null` → the loading line, or the not-found message once `loading` is false. */
@@ -59,15 +62,25 @@ export interface TaskCockpitProps {
   backHref?: string
   render?: { link?: LinkRender }
 
-  /** Controlled Session/Diff switch. Uncontrolled (starting on `session`) when omitted. */
+  /** Controlled Session/Diff/Terminal switch. Uncontrolled (starting on `session`) when omitted. */
   view?: TaskCockpitView
   onViewChange?: (view: TaskCockpitView) => void
 
-  /** The session panel. Receives the Session/Diff switch to draw in its header. */
+  /** The session panel. Receives the switch to draw in its header. */
   session: (tabs: ReactNode) => ReactNode
-  /** The diff panel. Omitted → no switch, the session alone. */
+  /** The diff panel. Omitted → no Diff tab. */
   diff?: (tabs: ReactNode) => ReactNode
-  /** Under both panels: answering the agent is something a reviewer does *because* of the diff. */
+  /**
+   * A shell on the task's machine — typically a `TaskTerminalPanel` around the app's own terminal,
+   * since the socket behind it is the app's. Omitted → no Terminal tab (a task with no machine has
+   * nothing to open one on). With neither `diff` nor `terminal`, no switch at all: the session alone.
+   */
+  terminal?: (tabs: ReactNode) => ReactNode
+  /**
+   * Under the session and the diff: answering the agent is something a reviewer does *because* of
+   * the diff. Not under the terminal — it has a keyboard of its own, and two places to type,
+   * stacked, is one too many.
+   */
   composer?: ReactNode
   /** The side column. */
   details?: ReactNode
@@ -81,22 +94,25 @@ const defaultLink: LinkRender = ({ href, className, children }) => (
 )
 
 /**
- * The two ways of looking at a task, in the strip each panel already owns. A tab rather than a
- * second column: "what it did" and "what is different now" are two frames of mind, and splitting
- * the width would make both unreadable in a sidebar-sized column.
+ * The ways of looking at a task, in the strip each panel already owns. A tab rather than a second
+ * column: "what it did", "what is different now" and "let me look myself" are three frames of
+ * mind, and splitting the width would make each unreadable in a sidebar-sized column.
  */
 export function TaskPanelTabs({
   view,
   onChange,
+  views = ["session", "diff"],
   className,
 }: {
   view: TaskCockpitView
   onChange: (view: TaskCockpitView) => void
+  /** Which tabs to draw, in this order. Defaults to Session/Diff. */
+  views?: readonly TaskCockpitView[]
   className?: string
 }) {
   return (
     <div role="tablist" className={cn("flex shrink-0 items-center gap-0.5 rounded-md bg-muted/60 p-0.5", className)}>
-      {(["session", "diff"] as const).map((value) => (
+      {views.map((value) => (
         <button
           key={value}
           type="button"
@@ -115,7 +131,28 @@ export function TaskPanelTabs({
   )
 }
 
-/** The view state, controlled or not — shared with `TaskCockpitMobile`. @internal */
+/**
+ * The panels this cockpit has, the switch between them, and the one to draw — shared with
+ * `TaskCockpitMobile`. A view whose slot went away (the machine was released while its terminal
+ * was open) falls back to the session rather than to an empty box. @internal
+ */
+export function useCockpitPanels({
+  view: viewProp,
+  onViewChange,
+  session,
+  diff,
+  terminal,
+}: Pick<TaskCockpitProps, "view" | "onViewChange" | "session" | "diff" | "terminal">) {
+  const [view, setView] = useCockpitView(viewProp, onViewChange)
+  const slots: Record<TaskCockpitView, ((tabs: ReactNode) => ReactNode) | undefined> = { session, diff, terminal }
+  const views = VIEW_ORDER.filter((v) => slots[v])
+  const current = slots[view] ? view : "session"
+  const tabs = views.length > 1 ? <TaskPanelTabs view={current} onChange={setView} views={views} /> : null
+  // A thunk, not the element: the cockpit asks for it only once there is a task to draw.
+  return { view: current, panel: () => (slots[current] ?? session)(tabs) }
+}
+
+/** The view state, controlled or not. @internal */
 export function useCockpitView(view: TaskCockpitView | undefined, onViewChange: ((view: TaskCockpitView) => void) | undefined) {
   const [local, setLocal] = useState<TaskCockpitView>("session")
   const current = view ?? local
@@ -141,11 +178,12 @@ export function TaskCockpit({
   onViewChange,
   session,
   diff,
+  terminal,
   composer,
   details,
   className,
 }: TaskCockpitProps) {
-  const [view, setView] = useCockpitView(viewProp, onViewChange)
+  const { view, panel } = useCockpitPanels({ view: viewProp, onViewChange, session, diff, terminal })
   const Link = render?.link ?? defaultLink
 
   if (!task) {
@@ -171,7 +209,6 @@ export function TaskCockpit({
   const since = pendingSince !== undefined ? pendingSince : (task.pendingSince ?? null)
   const busy = action !== null
   const live = isLiveTaskState(task.state)
-  const tabs = diff ? <TaskPanelTabs view={view} onChange={setView} /> : null
 
   return (
     <div className={cn("@container flex min-h-0 flex-1 flex-col overflow-hidden", className)}>
@@ -226,8 +263,8 @@ export function TaskCockpit({
             column holds long mono lines and <pre> blocks. Without it the column refuses to shrink
             and pushes the details column past the edge, where `overflow-hidden` clips it. */}
         <div className="flex min-h-[280px] min-w-0 flex-1 flex-col border-border @min-[42rem]:border-r">
-          {view === "diff" && diff ? diff(tabs) : session(tabs)}
-          {composer}
+          {panel()}
+          {view !== "terminal" && composer}
         </div>
 
         {details && (

package/src/components/tasks/tasks.test.tsx

@@ -5,6 +5,7 @@
  * The timeline itself is virtualized and measures real layout, which jsdom does not have; what it
  * draws is covered by the pure functions it folds events with.
  */
+import type { ReactNode } from "react"
 import { describe, it, expect, vi } from "vitest"
 import { render, screen, fireEvent } from "@testing-library/react"
 
@@ -337,3 +338,47 @@ describe("TaskTitle", () => {
     expect(onTitleChange).toHaveBeenCalledWith("Safari 18 login")
   })
 })
+
+describe("TaskCockpit panels", () => {
+  const panel = (name: string) => (tabs: ReactNode) => (
+    <div>
+      {tabs}
+      <p>{name} panel</p>
+    </div>
+  )
+
+  it("draws no switch with the session alone", () => {
+    render(<TaskCockpit task={task()} session={panel("session")} />)
+    expect(screen.queryByRole("tablist")).toBeNull()
+  })
+
+  it("offers only the tabs it has a panel for, in a fixed order", () => {
+    render(<TaskCockpit task={task()} session={panel("session")} terminal={panel("terminal")} />)
+    expect(screen.getAllByRole("tab").map((t) => t.textContent)).toEqual(["session", "terminal"])
+  })
+
+  it("switches to the terminal, and leaves the composer behind", () => {
+    render(
+      <TaskCockpit
+        task={task()}
+        session={panel("session")}
+        diff={panel("diff")}
+        terminal={panel("terminal")}
+        composer={<p>composer</p>}
+      />,
+    )
+    expect(screen.getAllByRole("tab").map((t) => t.textContent)).toEqual(["session", "diff", "terminal"])
+    fireEvent.click(screen.getByRole("tab", { name: "terminal" }))
+    expect(screen.getByText("terminal panel")).toBeTruthy()
+    expect(screen.queryByText("composer")).toBeNull()
+    fireEvent.click(screen.getByRole("tab", { name: "diff" }))
+    expect(screen.getByText("composer")).toBeTruthy()
+  })
+
+  it("falls back to the session when the open view's panel goes away", () => {
+    const { rerender } = render(<TaskCockpit task={task()} view="terminal" session={panel("session")} terminal={panel("terminal")} />)
+    expect(screen.getByText("terminal panel")).toBeTruthy()
+    rerender(<TaskCockpit task={task()} view="terminal" session={panel("session")} />)
+    expect(screen.getByText("session panel")).toBeTruthy()
+  })
+})

package/src/components/tasks/terminal-panel.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+// A shell on the task's machine, in the cockpit's third tab.
+//
+// The frame only: the header strip every cockpit panel owns (so the Session/Diff/Terminal switch
+// sits where it sits on the other two), and a dark box under it. What goes in the box is the
+// app's — a pty at the other end of a socket, persistent sessions, a clipboard — none of which a
+// design system can open. Without it, the box says why there is nothing to type into.
+//
+// Same surface as `TerminalPanel` (#09090b), so the switch from a light transcript to a shell
+// reads as "a terminal", not as a broken theme.
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+
+export interface TaskTerminalPanelProps {
+  /** The Session/Diff/Terminal switch, from the cockpit's render function. */
+  tabs?: ReactNode
+  /** Right of the switch — a way out to the full worker page, a full-screen button on a phone. */
+  actions?: ReactNode
+  /** The shell. Omitted → `placeholder`, on the same dark surface. */
+  children?: ReactNode
+  /** Why there is no shell (yet). */
+  placeholder?: ReactNode
+  className?: string
+}
+
+export function TaskTerminalPanel({
+  tabs,
+  actions,
+  children,
+  placeholder = "The machine is not running — there is nothing to open a shell on.",
+  className,
+}: TaskTerminalPanelProps) {
+  return (
+    <div className={cn("flex min-h-0 flex-1 flex-col", className)}>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-card px-4 py-2">
+        {tabs ?? <h2 className="text-xs font-medium">Terminal</h2>}
+        {actions && <div className="ml-auto flex shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+      <div className="flex min-h-0 flex-1 flex-col bg-[#09090b]">
+        {children ?? (
+          <div className="flex flex-1 items-center justify-center px-6 text-center">
+            <p className="max-w-sm font-mono text-xs text-[#71717a]">{placeholder}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/workers/git-branch-chips.tsx

@@ -100,7 +100,7 @@ function RepoCounters({ repo }: { repo: GitRepoStatus }) {
 
 export interface GitStatusSummaryProps {
   repos: GitRepoStatus[]
-  /** Heading above the list — e.g. "Open in VS Code" inside a tooltip. */
+  /** Heading above the list — e.g. "Open IDE" inside a tooltip. */
   title?: string
   className?: string
 }

package/src/components/workers/worker-card.tsx

@@ -90,7 +90,7 @@ export interface WorkerCardProps {
    *
    * ```tsx
    * menu={[
-   *   codeUrl && { label: "Open in VS Code", icon: Code2Icon, href: codeUrl, target: "_blank" },
+   *   codeUrl && { label: "Open IDE", icon: Code2Icon, href: codeUrl, target: "_blank" },
    *   "separator",
    *   isRunning && { label: "Stop", icon: SquareIcon, onClick: () => stop.mutate(), loading: stop.isPending },
    *   "separator",
@@ -104,7 +104,7 @@ export interface WorkerCardProps {
    * item, a dialog opened from an entry). Takes precedence over `menu`.
    */
   actions?: ReactNode
-  /** Replaces the default "View" footer entirely (extra buttons, a VS Code link…). */
+  /** Replaces the default "View" footer entirely (extra buttons, an IDE link…). */
   footer?: ReactNode
   /** Label of the default footer button. */
   viewLabel?: string

package/src/components/workers/worker-cockpit.tsx

@@ -90,7 +90,7 @@ export interface WorkerCockpitProps {
   onAddTag?: (tag: string, next: string[]) => void
   onRemoveTag?: (tag: string, next: string[]) => void
 
-  /** "Open VS Code", top-right. Omitted → the button doesn't show. */
+  /** "Open IDE", top-right. Omitted → the button doesn't show. */
   editorHref?: string
 
   onStop?: () => void
@@ -473,7 +473,7 @@ export function WorkerCockpit({
         <div className="flex shrink-0 items-center gap-2">
           {settled && editorHref && (
             <Link href={editorHref} className={cn(buttonVariants({ variant: "default", size: "sm" }), "h-8 gap-1.5 px-3 text-xs")}>
-              <Code2Icon className="h-3.5 w-3.5" />Open VS Code<ExternalLinkIcon className="h-2.5 w-2.5 opacity-70" />
+              <Code2Icon className="h-3.5 w-3.5" />Open IDE<ExternalLinkIcon className="h-2.5 w-2.5 opacity-70" />
             </Link>
           )}
           {settled && onStop && (