feat(vscode-webui): add unified background job and terminal manage panel

packages/vscode-webui/package.json

@@ -41,6 +41,7 @@
     "@radix-ui/react-checkbox": "^1.2.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.12",
     "@radix-ui/react-hover-card": "^1.1.11",
     "@radix-ui/react-label": "^2.1.6",

packages/vscode-webui/src/components/ui/sheet.tsx

@@ -0,0 +1,150 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import type * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+        bottom:
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+        right:
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+type SheetContentProps = React.ComponentProps<typeof SheetPrimitive.Content> &
+  VariantProps<typeof sheetVariants>;
+
+function SheetContent({
+  side = "right",
+  className,
+  children,
+  ...props
+}: SheetContentProps) {
+  const { t } = useTranslation();
+
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <X className="h-4 w-4" />
+          <span className="sr-only">{t("common.close")}</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn(
+        "flex flex-col space-y-2 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-semibold text-foreground text-lg", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

packages/vscode-webui/src/features/chat/components/__stories__/manage-panel.stories.tsx

@@ -0,0 +1,120 @@
+import type { BackgroundJobNotification } from "@getpochi/common";
+import type { Message } from "@getpochi/livekit";
+import { signal } from "@preact/signals-core";
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import type { TerminalSnapshot } from "../../lib/build-job-list";
+import { ManagePanel } from "../manage-panel";
+
+const meta = {
+  title: "Features/Chat/ManagePanel",
+  component: ManagePanel,
+  args: {
+    taskId: "story-task",
+    messages: [],
+  },
+  decorators: [
+    (Story) => (
+      // The trigger lives in the chat toolbar in the app, so give it a
+      // stand-in row here.
+      <div className="relative flex h-64 justify-end p-2">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ManagePanel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Nothing running: the trigger stays put so the panel remains discoverable. */
+export const Empty: Story = {
+  play: openPanel,
+};
+
+export const WithJobs: Story = {
+  args: {
+    messages: [
+      message([
+        executeCommandPart("bgjob-cmd-1", "bun run dev"),
+        executeCommandPart("bgjob-cmd-2", "bun run build"),
+        notificationPart(notification("bgjob-cmd-2", "completed")),
+        executeCommandPart("bgjob-cmd-3", "bun run test"),
+        notificationPart(notification("bgjob-cmd-3", "failed")),
+      ]),
+    ],
+  },
+  decorators: [withTerminals([terminal("bgjob-cmd-1")])],
+  play: openPanel,
+};
+
+async function openPanel({
+  canvasElement,
+}: { canvasElement: HTMLElement }): Promise<void> {
+  const canvas = within(canvasElement);
+  const toggle = canvas.getByTestId("manage-panel-toggle");
+  await userEvent.click(toggle);
+  await expect(toggle).toHaveAttribute("data-state", "open");
+}
+
+/**
+ * Seeds the terminal query so the panel sees live terminals without a host.
+ */
+function withTerminals(terminals: TerminalSnapshot[]) {
+  const data = {
+    terminals: signal(terminals),
+    openBackgroundJobTerminal: () => {},
+  };
+
+  return (Story: React.ComponentType) => {
+    const queryClient = useQueryClient();
+    // Seed once, before the panel below mounts and fires the query.
+    useState(() => {
+      queryClient.setQueryData(["visibleTerminals"], data);
+      return null;
+    });
+    return <Story />;
+  };
+}
+
+function message(parts: unknown[]): Message {
+  return { id: "message-1", role: "assistant", parts } as unknown as Message;
+}
+
+function executeCommandPart(backgroundJobId: string, command: string) {
+  return {
+    type: "tool-executeCommand",
+    state: "output-available",
+    input: { command, background: true },
+    output: { _meta: { backgroundJobId } },
+  };
+}
+
+function notificationPart(data: BackgroundJobNotification) {
+  return { type: "data-background-job-notification", data };
+}
+
+function terminal(backgroundJobId: string): TerminalSnapshot {
+  return {
+    isActive: false,
+    backgroundJobId,
+    outputFile: `/tmp/${backgroundJobId}.log`,
+  };
+}
+
+function notification(
+  backgroundJobId: string,
+  status: BackgroundJobNotification["status"],
+): BackgroundJobNotification {
+  return {
+    notificationId: `${backgroundJobId}:terminal`,
+    backgroundJobId,
+    outputFile: `/tmp/${backgroundJobId}.log`,
+    command: `run ${backgroundJobId}`,
+    status,
+    summary: `Background command "${backgroundJobId}" ${status}`,
+    finishedAt: Date.now(),
+  };
+}

packages/vscode-webui/src/features/chat/components/background-task-debug-panel.test.tsx

@@ -1,8 +1,10 @@
 // @vitest-environment jsdom
 import { fireEvent, render, screen } from "@testing-library/react";
-import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { BackgroundTaskDebugPanel } from "./background-task-debug-panel";
+import {
+  BackgroundTaskDetail,
+  BackgroundTaskRow,
+} from "./background-task-debug-panel";
 
 const task = {
   id: "task-1",
@@ -45,16 +47,6 @@ vi.mock("@/components/ui/button", () => ({
   ),
 }));
 
-vi.mock("@/components/ui/hover-card", () => ({
-  HoverCard: ({ children }: { children: ReactNode }) => <>{children}</>,
-  HoverCardContent: ({ children }: { children: ReactNode }) => <>{children}</>,
-  HoverCardTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
-
-vi.mock("@/features/settings", () => ({
-  useIsDevMode: () => [true],
-}));
-
 vi.mock("@/lib/hooks/use-background-task-state", () => ({
   useBackgroundTaskState: () => ({
     backgroundTaskState: {
@@ -87,15 +79,28 @@ vi.mock("@/lib/use-default-store", () => ({
 }));
 
 function openTaskDetail() {
-  render(<BackgroundTaskDebugPanel />);
-  fireEvent.click(screen.getByText("Background task"));
+  render(<BackgroundTaskDetail taskId={task.id} onBack={() => {}} />);
 }
 
 function getDetailValue(label: string): string | null | undefined {
   return screen.getByText(label).parentElement?.lastElementChild?.textContent;
 }
 
-describe("BackgroundTaskDebugPanel", () => {
+describe("BackgroundTaskRow", () => {
+  it("names the task and hands its id back when picked", () => {
+    const onSelect = vi.fn();
+    // biome-ignore lint/suspicious/noExplicitAny: the store rows are mocked.
+    render(<BackgroundTaskRow task={task as any} onSelect={onSelect} />);
+
+    fireEvent.click(screen.getByText("Background task"));
+    expect(onSelect).toHaveBeenCalled();
+    // A failed task rests on a dot, it does not spin.
+    expect(document.querySelector(".animate-spin")).toBeNull();
+    expect(document.querySelector(".bg-destructive")).not.toBeNull();
+  });
+});
+
+describe("BackgroundTaskDetail", () => {
   beforeEach(() => {
     messageRows = [];
   });