@marimo-team/islands 0.25.2-dev0 → 0.25.2-dev100

package/src/components/editor/actions/useRestartKernel.tsx

@@ -5,7 +5,7 @@ import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { reloadSafe } from "@/utils/reload-safe";
 
 export function useRestartKernel() {
@@ -22,7 +22,7 @@ export function useRestartKernel() {
       confirmAction: (
         <AlertDialogDestructiveAction
           onClick={async () => {
-            setConnection({ state: WebSocketState.CLOSING });
+            setConnection({ state: ConnectionState.CLOSING });
             await sendRestart();
             reloadSafe();
           }}

package/src/components/editor/actions/useSetOutputsExpanded.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useCallback } from "react";
+import {
+  getNotebook,
+  type NotebookState,
+  useCellActions,
+} from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { isOutputEmpty } from "@/core/cells/outputs";
+import { useRequestClient } from "@/core/network/requests";
+import type { CellConfig } from "@/core/network/types";
+import { Objects } from "@/utils/objects";
+
+/**
+ * The `expand_output` config changes needed to expand or clamp every output.
+ *
+ * Both actions skip cells without output, so their source isn't annotated
+ * with a config that has no effect.
+ */
+export function outputExpansionConfigs(
+  notebook: NotebookState,
+  expanded: boolean,
+): Record<CellId, Partial<CellConfig>> {
+  const configs: Record<CellId, Partial<CellConfig>> = {};
+  for (const cellId of notebook.cellIds.inOrderIds) {
+    const cell = notebook.cellData[cellId];
+    if (
+      cell === undefined ||
+      (cell.config.expand_output ?? false) === expanded
+    ) {
+      continue;
+    }
+    if (isOutputEmpty(notebook.cellRuntime[cellId]?.output)) {
+      continue;
+    }
+    configs[cellId] = { expand_output: expanded };
+  }
+  return configs;
+}
+
+/**
+ * Hook returning a callback that shows every cell's output in full, or clamps
+ * every output to a fixed height, by setting each cell's `expand_output` config.
+ */
+export const useSetOutputsExpanded = () => {
+  const { updateCellConfig } = useCellActions();
+  const { saveCellConfig } = useRequestClient();
+
+  return useCallback(
+    async (expanded: boolean) => {
+      const newConfigs = outputExpansionConfigs(getNotebook(), expanded);
+
+      const entries = Objects.entries(newConfigs);
+      if (entries.length === 0) {
+        return;
+      }
+
+      await saveCellConfig({ configs: newConfigs });
+
+      for (const [cellId, config] of entries) {
+        updateCellConfig({ cellId, config });
+      }
+    },
+    [updateCellConfig, saveCellConfig],
+  );
+};

package/src/components/editor/alerts/__tests__/connection-notice.test.tsx

@@ -8,16 +8,22 @@ import { alertAtom, getPackageAlert } from "@/core/alerts/state";
 import { notebookAtom } from "@/core/cells/cells";
 import { CellId } from "@/core/cells/ids";
 import { AppConfigSchema } from "@/core/config/config-schema";
+import { kernelStartupErrorAtom } from "@/core/errors/state";
 import { connectionAtom } from "@/core/network/connection";
 import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
-import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
 import { chromeAtom } from "../../chrome/state";
+import { runtimeDetailsExpandedAtom } from "../../chrome/panels/runtime-details-state";
 import { ConnectionNotice } from "../connection-notice";
 
 beforeEach(() => vi.useFakeTimers());
 afterEach(() => vi.useRealTimers());
 
-function mount(existingCells = false) {
+function mount({
+  existingCells = false,
+  onRetry = vi.fn(),
+  canOpenPackages = true,
+} = {}) {
   const store = createStore();
   store.set(sandboxAtom, {
     backend: "pixi",
@@ -25,7 +31,7 @@ function mount(existingCells = false) {
     filename: "notebook.py",
   });
   store.set(connectionAtom, {
-    state: WebSocketState.CONNECTING,
+    state: ConnectionState.CONNECTING,
     phase: "preparing-environment",
   });
   if (existingCells) {
@@ -40,7 +46,8 @@ function mount(existingCells = false) {
     <Provider store={store}>
       <ConnectionNotice
         appConfig={AppConfigSchema.parse({})}
-        onRetry={vi.fn()}
+        onRetry={onRetry}
+        canOpenPackages={canOpenPackages}
       />
     </Provider>,
   );
@@ -57,13 +64,13 @@ it("shows both stages in an empty notebook, checks them off, then dismisses Read
   expect(steps.getByText("Start kernel")).toBeInTheDocument();
   act(() =>
     store.set(connectionAtom, {
-      state: WebSocketState.CONNECTING,
+      state: ConnectionState.CONNECTING,
       phase: "starting-kernel",
     }),
   );
   expect(steps.getByText("Environment prepared")).toBeInTheDocument();
   expect(steps.getByText("Starting kernel")).toBeInTheDocument();
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   expect(
     screen.getByRole("heading", { name: "Your notebook is ready" }),
   ).toBeInTheDocument();
@@ -78,8 +85,122 @@ it("shows both stages in an empty notebook, checks them off, then dismisses Read
   ).not.toBeInTheDocument();
 });
 
+it("uses the shared kernel stage for an ordinary connection and dismisses it when connected", () => {
+  const store = mount();
+  act(() => {
+    store.set(sandboxAtom, null);
+    store.set(connectionAtom, { state: ConnectionState.CONNECTING });
+  });
+  act(() => vi.advanceTimersByTime(500));
+  const stages = within(
+    screen.getByRole("list", {
+      name: "Notebook startup stages",
+    }),
+  );
+  expect(stages.getAllByRole("listitem")).toHaveLength(1);
+  expect(stages.getByText("Starting kernel")).toBeVisible();
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
+  expect(screen.queryByRole("region", { name: "Notebook startup" })).toBeNull();
+});
+
+it("shows connection status until a sandbox reports its startup phase", () => {
+  const store = mount();
+  act(() => store.set(connectionAtom, { state: ConnectionState.CONNECTING }));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByRole("heading", { name: "Connecting…" })).toBeVisible();
+  expect(screen.queryByRole("list")).not.toBeInTheDocument();
+
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    }),
+  );
+  expect(
+    screen.getByRole("heading", { name: "Kernel failed to start" }),
+  ).toBeVisible();
+  expect(screen.queryByRole("list")).not.toBeInTheDocument();
+
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CONNECTING,
+      phase: "preparing-environment",
+    }),
+  );
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByRole("list")).toHaveTextContent("Preparing environment");
+});
+
+it("shows kernel startup while sandbox metadata is loading, then adds environment preparation", () => {
+  const store = mount();
+  const sandbox = store.get(sandboxAtom);
+  act(() => store.set(sandboxAtom, null));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByText("Starting kernel")).toBeVisible();
+  expect(screen.getAllByRole("listitem")).toHaveLength(1);
+
+  act(() => store.set(sandboxAtom, sandbox));
+  const stages = within(screen.getByRole("list"));
+  expect(stages.getByText("Preparing environment")).toBeVisible();
+  expect(stages.getByText("Start kernel")).toBeVisible();
+});
+
+it("shows ordinary environment preparation failures in the kernel stage", () => {
+  const store = mount();
+  act(() => store.set(sandboxAtom, null));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByText("Starting kernel")).toBeVisible();
+  expect(screen.getAllByRole("listitem")).toHaveLength(1);
+  act(() => {
+    store.set(
+      kernelStartupErrorAtom,
+      "Configured Python environment is missing",
+    );
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      phase: "preparing-environment",
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    });
+  });
+  expect(screen.getByRole("listitem")).toHaveTextContent(
+    "Kernel failed to start",
+  );
+  expect(screen.getByRole("status")).toHaveTextContent(
+    "Kernel failed to start",
+  );
+  expect(screen.getByLabelText("Error details")).toHaveTextContent(
+    "Configured Python environment is missing",
+  );
+});
+
+it("reports the inline disclosure as expanded only when Packages and runtime details are open", () => {
+  const store = mount({ existingCells: true });
+  act(() => {
+    store.set(chromeAtom, (value) => ({
+      ...value,
+      isSidebarOpen: true,
+      selectedPanel: "packages",
+    }));
+    store.set(runtimeDetailsExpandedAtom, false);
+  });
+  act(() => vi.advanceTimersByTime(500));
+  const toggle = screen.getByRole("button", { name: /Open Packages/ });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-expanded", "true");
+  act(() => store.set(runtimeDetailsExpandedAtom, false));
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  act(() => {
+    store.set(runtimeDetailsExpandedAtom, true);
+    store.set(chromeAtom, (value) => ({ ...value, isSidebarOpen: false }));
+  });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+});
+
 it("opens Packages from the minimal inline status when cells exist", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   act(() => vi.advanceTimersByTime(500));
   expect(screen.queryByRole("list")).not.toBeInTheDocument();
   fireEvent.click(screen.getByRole("button", { name: /Open Packages/ }));
@@ -87,14 +208,100 @@ it("opens Packages from the minimal inline status when cells exist", () => {
     isSidebarOpen: true,
     selectedPanel: "packages",
   });
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   expect(screen.getByRole("status")).toHaveTextContent(/^Ready$/);
 });
 
+it("uses an inline notice for an existing ordinary notebook, opens collapsed details, and offers retry on failure", () => {
+  const onRetry = vi.fn();
+  const store = mount({ existingCells: true, onRetry });
+  act(() => {
+    store.set(sandboxAtom, null);
+    store.set(connectionAtom, { state: ConnectionState.CONNECTING });
+    store.set(runtimeDetailsExpandedAtom, false);
+  });
+  act(() => vi.advanceTimersByTime(500));
+  const statusRow = screen.getByRole("region", {
+    name: "Notebook startup",
+  }).parentElement;
+  fireEvent.click(screen.getByRole("button", { name: /Open Packages/ }));
+  expect(store.get(chromeAtom)).toMatchObject({
+    isSidebarOpen: true,
+    selectedPanel: "packages",
+  });
+  expect(store.get(runtimeDetailsExpandedAtom)).toBe(true);
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    }),
+  );
+  expect(
+    screen.getByRole("button", {
+      name: /Kernel failed to start Open Packages/,
+    }),
+  ).toBeVisible();
+  fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+  expect(onRetry).toHaveBeenCalledOnce();
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
+  expect(screen.queryByRole("region", { name: "Notebook startup" })).toBeNull();
+  expect(statusRow).not.toBeInTheDocument();
+});
+
+it.each([
+  { existingCells: false, sandbox: false },
+  { existingCells: true, sandbox: false },
+  { existingCells: false, sandbox: true },
+  { existingCells: true, sandbox: true },
+])(
+  "keeps errors in the notebook without chrome (cells=$existingCells, sandbox=$sandbox)",
+  ({ existingCells, sandbox }) => {
+    const onRetry = vi.fn();
+    const store = mount({ existingCells, onRetry, canOpenPackages: false });
+    act(() => {
+      if (!sandbox) {
+        store.set(sandboxAtom, null);
+      }
+      store.set(connectionAtom, {
+        state: ConnectionState.CONNECTING,
+        phase: "starting-kernel",
+      });
+    });
+    act(() => vi.advanceTimersByTime(500));
+    expect(screen.getByText("Starting kernel")).toBeVisible();
+    expect(screen.getByRole("status")).toHaveTextContent("Starting kernel…");
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+
+    act(() => {
+      store.set(kernelStartupErrorAtom, "Could not import the runtime");
+      store.set(connectionAtom, {
+        state: ConnectionState.CLOSED,
+        phase: "starting-kernel",
+        code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+        reason: "Kernel startup failed",
+      });
+    });
+    expect(screen.getByLabelText("Error details")).toHaveTextContent(
+      "Could not import the runtime",
+    );
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "Kernel failed to start",
+    );
+    expect(
+      screen.queryByRole("button", { name: /Open Packages/ }),
+    ).not.toBeInTheDocument();
+    if (!sandbox) {
+      fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    }
+    expect(onRetry).toHaveBeenCalledTimes(sandbox ? 0 : 1);
+  },
+);
+
 it("does not flash Ready for a startup that finished before the notice appeared", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   act(() => vi.advanceTimersByTime(200));
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   expect(screen.queryByRole("status")).not.toBeInTheDocument();
   act(() => vi.advanceTimersByTime(2000));
   expect(screen.queryByRole("status")).not.toBeInTheDocument();
@@ -103,11 +310,11 @@ it("does not flash Ready for a startup that finished before the notice appeared"
 it("replaces Ready with a new attempt and never dismisses a failure", () => {
   const store = mount();
   act(() => vi.advanceTimersByTime(500));
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   act(() => vi.advanceTimersByTime(1000));
   act(() =>
     store.set(connectionAtom, {
-      state: WebSocketState.CONNECTING,
+      state: ConnectionState.CONNECTING,
       phase: "starting-kernel",
     }),
   );
@@ -115,7 +322,7 @@ it("replaces Ready with a new attempt and never dismisses a failure", () => {
   expect(screen.getByText("Starting kernel")).toBeInTheDocument();
   act(() =>
     store.set(connectionAtom, {
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
       phase: "starting-kernel",
       reason: "Kernel startup failed",
@@ -128,9 +335,9 @@ it("replaces Ready with a new attempt and never dismisses a failure", () => {
 });
 
 it("shows a sync as a single operation, without pretending to restart the kernel", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   act(() => {
-    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(connectionAtom, { state: ConnectionState.OPEN });
     store.set(sandboxSyncAtom, { kind: "running" });
   });
   act(() => vi.advanceTimersByTime(500));
@@ -141,7 +348,7 @@ it("shows a sync as a single operation, without pretending to restart the kernel
 });
 
 it("restores syncing in the existing status and stays quiet for a completed snapshot", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   const operation: EnvironmentOperation = {
     operation_id: "sync",
     action: "sync",
@@ -162,7 +369,7 @@ it("restores syncing in the existing status and stays quiet for a completed snap
       },
     }));
   act(() => {
-    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(connectionAtom, { state: ConnectionState.OPEN });
     restore({ kind: "succeeded" });
   });
   act(() => vi.advanceTimersByTime(2000));

package/src/components/editor/alerts/connection-details.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { PropsWithChildren } from "react";
+import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
+import { cn } from "@/utils/cn";
+import {
+  ConnectionStatusIcon,
+  hasStartupStages,
+  StartupProgress,
+} from "./startup-progress";
+
+export function ConnectionErrorOutput({ error }: { error: string }) {
+  return (
+    <pre
+      tabIndex={0}
+      aria-label="Error details"
+      className="mt-3 p-3 rounded border bg-muted/30 text-xs text-muted-foreground whitespace-pre min-w-0 max-w-full max-h-52 overflow-auto"
+    >
+      {error}
+    </pre>
+  );
+}
+
+export function ConnectionDetails({
+  notice,
+  surface = "sidebar",
+  children,
+}: PropsWithChildren<{
+  notice: DisplayConnectionNotice;
+  surface?: "notebook" | "sidebar";
+}>) {
+  const showSteps = hasStartupStages(notice);
+  const failed = !notice.pending && !notice.ready;
+  return (
+    <div className="min-w-0 text-sm">
+      {showSteps ? (
+        <StartupProgress notice={notice} surface={surface} />
+      ) : (
+        <div className="flex items-center gap-2" role="status">
+          <ConnectionStatusIcon notice={notice} />
+          <h2
+            className={cn(
+              surface === "notebook" && "text-base",
+              failed ? "font-medium text-(--red-11)" : "text-foreground",
+            )}
+          >
+            {notice.title}
+          </h2>
+        </div>
+      )}
+      {(failed || (!showSteps && surface === "notebook")) && (
+        <p className={cn("mt-2", failed && "text-foreground")}>
+          {notice.description}
+        </p>
+      )}
+      {notice.error && (surface === "sidebar" || !notice.sandbox) && (
+        <ConnectionErrorOutput error={notice.error} />
+      )}
+      {children}
+    </div>
+  );
+}

package/src/components/editor/alerts/connection-notice.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { ArrowRightIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -8,25 +8,31 @@ import type { AppConfig } from "@/core/config/config-schema";
 import { connectionAtom } from "@/core/network/connection";
 import { useConnectionNotice } from "@/core/network/useConnectionNotice";
 import { sandboxAtom } from "@/core/packages/sandbox-state";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";
-import { SandboxErrorOutput } from "../chrome/panels/sandbox-panel";
+import { runtimeDetailsExpandedAtom } from "../chrome/panels/runtime-details-state";
 import { chromeAtom, useChromeActions } from "../chrome/state";
 import { VerticalLayoutWrapper } from "../renderers/vertical-layout/vertical-layout-wrapper";
-import { ConnectionStatusIcon, StartupProgress } from "./startup-progress";
+import { ConnectionDetails } from "./connection-details";
+import { ConnectionStatusIcon, hasStartupStages } from "./startup-progress";
 
 export const ConnectionNotice = ({
   appConfig,
   onRetry,
+  canOpenPackages = true,
 }: {
   appConfig: AppConfig;
   onRetry: () => void;
+  canOpenPackages?: boolean;
 }) => {
   const notice = useConnectionNotice();
   const connection = useAtomValue(connectionAtom);
   const hasCells = useAtomValue(hasCellsAtom);
   const sandbox = useAtomValue(sandboxAtom);
+  const [detailsExpanded, setDetailsExpanded] = useAtom(
+    runtimeDetailsExpandedAtom,
+  );
   const chrome = useAtomValue(chromeAtom);
   const packagesOpen =
     (chrome.isSidebarOpen && chrome.selectedPanel === "packages") ||
@@ -36,48 +42,60 @@ export const ConnectionNotice = ({
 
   // Reconnection uses the footer indicator while existing cells stay visible.
   const reconnecting =
-    connection.state === WebSocketState.CONNECTING &&
+    connection.state === ConnectionState.CONNECTING &&
     connection.phase === "reconnecting";
 
-  if (sandbox?.backend && hasCells) {
+  const openDetails = () => {
+    setDetailsExpanded(true);
+    openApplication("packages");
+  };
+
+  if (!notice && !sandbox?.backend) {
+    return null;
+  }
+
+  if (hasCells && canOpenPackages) {
     const title =
       notice?.ready && notice.kind === "startup" ? "Ready" : notice?.title;
     return (
       <VerticalLayoutWrapper
         appConfig={appConfig}
-        // Reserve the status row and gutter so completion never shifts cells.
+        // Sandboxes retain this row for subsequent environment syncs.
         className="shrink-0 h-12 pb-0 sm:pb-0 print:hidden"
         innerClassName="pb-0 sm:pb-0 pr-4"
       >
         {notice && !reconnecting && (
-          <section aria-label="Notebook startup">
+          <section
+            aria-label="Notebook startup"
+            className="flex items-center gap-4"
+          >
             <button
               type="button"
-              onClick={() => openApplication("packages")}
+              onClick={openDetails}
               aria-label={`${title} Open Packages`}
-              aria-expanded={packagesOpen}
+              aria-expanded={packagesOpen && detailsExpanded}
               className="flex h-6 items-center gap-2 whitespace-nowrap text-xs text-muted-foreground hover:text-foreground rounded focus-visible:outline-2 focus-visible:outline-ring"
             >
               <ConnectionStatusIcon notice={notice} />
               <output>{title}</output>
               <ChevronRightIcon className="size-3" aria-hidden={true} />
             </button>
+            {!notice.pending && !notice.ready && !notice.sandbox && (
+              <Button variant="text" size="xs" onClick={onRetry}>
+                Try again
+              </Button>
+            )}
           </section>
         )}
       </VerticalLayoutWrapper>
     );
   }
 
-  if (!notice || (hasCells && reconnecting)) {
+  if (!notice) {
     return null;
   }
 
-  const showSteps =
-    notice.sandbox &&
-    notice.kind === "startup" &&
-    (notice.ready ||
-      notice.phase === "preparing-environment" ||
-      notice.phase === "starting-kernel");
+  const showSteps = hasStartupStages(notice);
   return (
     <VerticalLayoutWrapper
       appConfig={appConfig}
@@ -87,51 +105,26 @@ export const ConnectionNotice = ({
       <section
         aria-label="Notebook startup"
         className={cn(
-          "text-muted-foreground",
-          hasCells
-            ? "mt-4 mb-8 border rounded-lg px-5 py-5"
-            : "max-w-md mx-auto mt-16 sm:mt-24 px-4",
-          hasCells && !notice.pending && "border-(--red-7)",
+          "text-muted-foreground max-w-md mx-auto px-4",
+          hasCells ? "mt-4 mb-8" : "mt-16 sm:mt-24",
         )}
       >
-        {showSteps ? (
-          <StartupProgress notice={notice} surface="notebook" />
-        ) : (
-          <div role="status" className="flex items-center gap-2.5">
-            <ConnectionStatusIcon notice={notice} />
-            <h2
-              className={cn(
-                "text-base",
-                notice.pending || notice.ready
-                  ? "font-normal text-foreground"
-                  : "font-medium text-(--red-11)",
-              )}
-            >
-              {notice.title}
-            </h2>
-          </div>
+        {!canOpenPackages && showSteps && (
+          <output className="sr-only">{notice.title}</output>
         )}
+        <ConnectionDetails
+          notice={notice}
+          surface={canOpenPackages ? "notebook" : "sidebar"}
+        />
         <div className={showSteps ? "mt-8" : "ml-6.5"}>
-          {!showSteps && (
-            <p
-              className={cn(
-                "mt-3 text-sm leading-7",
-                !notice.pending && "text-foreground",
-              )}
-            >
-              {notice.description}
-            </p>
-          )}
-          {!notice.sandbox && notice.error && (
-            <SandboxErrorOutput error={notice.error} />
-          )}
           <div
             className={cn(
               "flex flex-wrap items-center gap-x-6 gap-y-3",
               showSteps ? "border-t border-border/60 pt-4" : "mt-5",
             )}
           >
-            {!notice.ready &&
+            {canOpenPackages &&
+              !notice.ready &&
               !packagesOpen &&
               (notice.sandbox || notice.pending) && (
                 <Button
@@ -141,7 +134,7 @@ export const ConnectionNotice = ({
                     "p-0 text-xs gap-1.5",
                     showSteps ? "h-6" : "h-auto",
                   )}
-                  onClick={() => openApplication("packages")}
+                  onClick={openDetails}
                 >
                   {notice.pending ? "View setup details" : "Open Packages"}
                   <ArrowRightIcon className="size-3" aria-hidden={true} />