fix(ui): preserve desktop lobster run outcomes (#103501)

steipete · web-flow · commit 51c1c08227db · 2026-07-10T08:18:54.000+01:00
diff --git a/ui/src/components/app-sidebar.test.ts b/ui/src/components/app-sidebar.test.ts
@@ -37,6 +37,11 @@ type SidebarLifecycleState = HTMLElement & {
   sessionsAgentId: string | null;
   sessionsResult: SessionsListResult | null;
   updateComplete: Promise<boolean>;
+  variant: "panel" | "drawer";
+};
+
+type LobsterPetElement = HTMLElement & {
+  runOutcome: "ok" | "error" | "aborted";
 };
 
 function createGatewayHarness(client: GatewayBrowserClient) {
@@ -157,11 +162,16 @@ function createContext(
   } as unknown as ApplicationContext<RouteId>;
 }
 
-async function mountSidebar(gateway: ApplicationGateway, sessions: SessionCapability) {
+async function mountSidebar(
+  gateway: ApplicationGateway,
+  sessions: SessionCapability,
+  variant: SidebarLifecycleState["variant"] = "panel",
+) {
   const provider = document.createElement(PROVIDER_ELEMENT_NAME) as AppSidebarContextProvider;
   const sidebar = document.createElement(
     "openclaw-app-sidebar",
   ) as unknown as SidebarLifecycleState;
+  sidebar.variant = variant;
   provider.setContext(createContext(gateway, sessions));
   provider.append(sidebar);
   document.body.append(provider);
@@ -173,6 +183,50 @@ afterEach(() => {
   document.body.replaceChildren();
 });
 
+describe("AppSidebar lobster outcome wiring", () => {
+  it.each([
+    ["panel", "failed", "error"],
+    ["panel", "killed", "aborted"],
+    ["drawer", "failed", "error"],
+    ["drawer", "killed", "aborted"],
+  ] as const)(
+    "passes the %s variant's latest %s session outcome",
+    async (variant, status, expectedOutcome) => {
+      const client = {} as GatewayBrowserClient;
+      const gateway = createGateway(client);
+      const sessions = createSessionsHarness("main", ["agent:main:main"]);
+      const { sidebar } = await mountSidebar(gateway, sessions.sessions, variant);
+      const terminalState = createSessionState("main", ["agent:main:main"]);
+      const result = terminalState.result;
+      if (!result) {
+        throw new Error("expected terminal session result");
+      }
+      const row = result.sessions[0];
+      if (!row) {
+        throw new Error("expected terminal session row");
+      }
+
+      sessions.publishList({
+        result: {
+          ...result,
+          sessions: [
+            {
+              ...row,
+              status,
+              endedAt: 100,
+            },
+          ],
+        },
+        agentId: terminalState.agentId,
+      });
+      await sidebar.updateComplete;
+
+      const pet = sidebar.querySelector<LobsterPetElement>("openclaw-lobster-pet");
+      expect(pet?.runOutcome).toBe(expectedOutcome);
+    },
+  );
+});
+
 describe("AppSidebar session source lifecycle", () => {
   it("resets cached rows and creation order when the sessions source changes", async () => {
     const client = {} as GatewayBrowserClient;
diff --git a/ui/src/components/app-sidebar.ts b/ui/src/components/app-sidebar.ts
@@ -1645,6 +1645,7 @@ class AppSidebar extends OpenClawLightDomContentsElement {
               <openclaw-lobster-pet
                 .seed=${lobsterPetSeed(this.sessionKey)}
                 .mode=${resolveLobsterPetMode(this.connected, this.sessionsResult?.sessions)}
+                .runOutcome=${resolveLobsterRunOutcome(this.sessionsResult?.sessions)}
                 .visitsEnabled=${this.lobsterPetVisits}
               ></openclaw-lobster-pet>
             </div>
diff --git a/ui/src/e2e/sidebar-customization.e2e.test.ts b/ui/src/e2e/sidebar-customization.e2e.test.ts
@@ -397,4 +397,53 @@ describeControlUiE2e("Control UI sidebar customization mocked Gateway E2E", () =
       await context.close();
     }
   });
+
+  it("passes failed run outcomes to both desktop and drawer lobsters", async () => {
+    const context = await browser.newContext({
+      locale: "en-US",
+      serviceWorkers: "block",
+      viewport: { height: 900, width: 1440 },
+    });
+    const page = await context.newPage();
+    await installMockGateway(page, {
+      methodResponses: {
+        "sessions.list": {
+          count: 1,
+          defaults: {
+            contextTokens: null,
+            model: "gpt-5.5",
+            modelProvider: "openai",
+          },
+          path: "",
+          sessions: [
+            {
+              endedAt: 100,
+              key: "main",
+              kind: "direct",
+              status: "failed",
+              updatedAt: 100,
+            },
+          ],
+          ts: 100,
+        },
+      },
+    });
+
+    const outcome = (locator: Locator) =>
+      locator.evaluate((element) => (element as HTMLElement & { runOutcome: string }).runOutcome);
+
+    try {
+      await page.goto(`${server.baseUrl}overview`);
+      const sidebar = page.locator("openclaw-app-sidebar");
+      const desktopPet = sidebar.locator(".sidebar-panel openclaw-lobster-pet");
+      await expect.poll(() => outcome(desktopPet)).toBe("error");
+
+      await page.setViewportSize({ height: 900, width: 900 });
+      await page.locator(".topbar-nav-toggle").click();
+      const drawerPet = sidebar.locator(".sidebar-shell openclaw-lobster-pet");
+      await expect.poll(() => outcome(drawerPet)).toBe("error");
+    } finally {
+      await context.close();
+    }
+  });
 });
