Make browser controls visible in chat and the Computer sidebar

CHANGELOG.md

@@ -8,6 +8,13 @@ Newest first. `Unreleased` is what is on `main` and not yet tagged.
 
 ## Unreleased
 
+### Browser controls are visible in chat and the Computer sidebar
+
+Channel chats and standalone Bot chats now have a labeled Computer button and always-visible
+Take control or Hand back controls. The same ownership state is shown in the chat, live Computer
+sidebar, and full-size viewer. Standalone Bot chats can open the current live browser alongside
+the conversation without losing the selected Bot or chat history.
+
 ### Browser challenges can be handed to a person without losing the Bot's page
 
 Bots pause for actionable browser challenges and resume from a fresh page snapshot after an explicit

app/src/components/computer/computer-controls.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from "react";
+import { IconDeviceDesktop } from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
+import { useComputerControl } from "@/lib/computers/use-control";
+
+/** The same ownership action appears in chat, the computer sidebar, and the full-size viewer. */
+export function ComputerControlButton({
+  computerId,
+  onTakeControl,
+}: {
+  computerId: string;
+  onTakeControl?: () => void;
+}) {
+  const { control, busy, problem, change } = useComputerControl(computerId);
+  const human = control?.holder === "human";
+  return (
+    <div className="flex flex-col items-start gap-1">
+      <Button
+        size="sm"
+        variant={human ? "default" : "outline"}
+        disabled={busy || !control || control.transitioning}
+        aria-busy={busy || control?.transitioning}
+        onClick={async () => {
+          if (await change?.(human ? "release" : "take")) {
+            if (!human) onTakeControl?.();
+          }
+        }}
+      >
+        {human ? "Hand back" : "Take control"}
+      </Button>
+      {control?.transitioning ? (
+        <span className="text-xs text-muted-foreground" role="status">
+          Finishing the current action…
+        </span>
+      ) : null}
+      {problem ? (
+        <span className="max-w-64 text-xs text-destructive" role="alert">
+          {problem}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export function ComputerChatControls({
+  computerId,
+  open,
+  onOpenChange,
+}: {
+  computerId?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const { control } = useComputerControl(computerId ?? "", Boolean(computerId));
+  const needsYou = Boolean(
+    control &&
+      (control.requested ||
+        control.holder === "human" ||
+        control.request?.status === "interrupted" ||
+        control.secretWanted !== undefined),
+  );
+  const promptKey = needsYou
+    ? `${computerId}:${control?.secretWanted ?? control?.request?.id ?? "human"}`
+    : null;
+  const shownPrompt = useRef<string | null>(null);
+  useEffect(() => {
+    if (shownPrompt.current === promptKey) return;
+    shownPrompt.current = promptKey;
+    // Surface each new prompt once; closing the Computer remains a real dismissal.
+    if (promptKey) onOpenChange(true);
+  }, [promptKey, onOpenChange]);
+  return (
+    <div className="flex items-start gap-1.5">
+      <Button
+        size="sm"
+        variant={open ? "secondary" : "ghost"}
+        aria-label={open ? "Close Computer" : "Open Computer"}
+        aria-expanded={open}
+        disabled={!computerId}
+        onClick={() => onOpenChange(!open)}
+      >
+        <IconDeviceDesktop className="size-4" />
+        Computer
+        {needsYou ? (
+          <span
+            className="size-2 rounded-full bg-amber-500"
+            role="img"
+            aria-label="Needs you"
+          />
+        ) : null}
+      </Button>
+      {computerId ? (
+        <ComputerControlButton
+          computerId={computerId}
+          onTakeControl={() => onOpenChange(true)}
+        />
+      ) : null}
+    </div>
+  );
+}

app/src/components/computer/computer-panel.tsx

@@ -0,0 +1,21 @@
+import { ActivityLog } from "./activity-log";
+import { ComputerView } from "./computer-view";
+
+/** The current live computer, separate from screenshots kept in historical tool results. */
+export function ComputerViewPanel({
+  agentId,
+  name,
+}: {
+  agentId: string;
+  name?: string;
+}) {
+  return (
+    <section aria-label="Computer sidebar" className="p-4">
+      <ComputerView active computerId={agentId} name={name} minWidth={0} />
+      <div className="mt-8">
+        <h3 className="mb-2 font-medium text-sm">Activity</h3>
+        <ActivityLog computerId={agentId} />
+      </div>
+    </section>
+  );
+}