@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/components/channel-wizard/field-qr.tsx

@@ -164,20 +164,14 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
               {/* bg-white is intentional -- QR codes require white background for scanability */}
               <div className="h-40 w-40 rounded-sm bg-white p-3 min-[375px]:h-48 min-[375px]:w-48">
                 {/* biome-ignore lint/performance/noImgElement: QR PNG is a base64 data URI from the API — next/image does not support data: URIs (cannot optimize, resize, or lazy-load inline blobs). Raw <img> is the only option here. */}
-                <img
-                  src={qrPng}
-                  alt="Scan this QR code with your phone"
-                  className="h-full w-full"
-                />
+                <img src={qrPng} alt="Scan this QR code with your phone" className="h-full w-full" />
               </div>
             </div>
 
             {/* Scanning indicator */}
             <div className="flex items-center gap-2">
               <div className="h-1.5 w-1.5 rounded-full bg-terminal motion-safe:animate-[pulse-dot_2s_ease-in-out_infinite]" />
-              <span className="text-xs font-medium uppercase tracking-wider text-terminal">
-                WAITING FOR SCAN
-              </span>
+              <span className="text-xs font-medium uppercase tracking-wider text-terminal">WAITING FOR SCAN</span>
             </div>
 
             {/* Instructions */}
@@ -186,9 +180,7 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
             </p>
 
             {/* Countdown */}
-            <span className={`text-xs tabular-nums ${countdownColor()}`}>
-              Expires in {secondsLeft}s
-            </span>
+            <span className={`text-xs tabular-nums ${countdownColor()}`}>Expires in {secondsLeft}s</span>
           </div>
         )}
 
@@ -215,21 +207,13 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
               </div>
             </div>
 
-            <span className="text-xs font-medium uppercase tracking-wider text-amber-500">
-              QR CODE EXPIRED
-            </span>
+            <span className="text-xs font-medium uppercase tracking-wider text-amber-500">QR CODE EXPIRED</span>
 
             <p className="text-center text-sm text-muted-foreground">
               The code expired. Tap below to generate a fresh one.
             </p>
 
-            <Button
-              type="button"
-              variant="terminal"
-              size="sm"
-              className="h-10 px-4"
-              onClick={handleRefresh}
-            >
+            <Button type="button" variant="terminal" size="sm" className="h-10 px-4" onClick={handleRefresh}>
               <RefreshCw className="size-3.5" />
               Generate New Code
             </Button>
@@ -243,9 +227,7 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
               <Check className="size-16 text-emerald-500" />
             </div>
 
-            <span className="text-xs font-medium uppercase tracking-wider text-emerald-500">
-              LINKED SUCCESSFULLY
-            </span>
+            <span className="text-xs font-medium uppercase tracking-wider text-emerald-500">LINKED SUCCESSFULLY</span>
 
             <p className="text-center text-sm text-muted-foreground">
               {field.label ? `${field.label} connected` : "Connected"}. You can continue setup.
@@ -258,22 +240,13 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
           <div className="flex flex-col items-center gap-4">
             <AlertTriangle className="size-10 text-destructive" />
 
-            <span className="text-xs font-medium uppercase tracking-wider text-destructive">
-              CONNECTION ERROR
-            </span>
+            <span className="text-xs font-medium uppercase tracking-wider text-destructive">CONNECTION ERROR</span>
 
             <p className="max-w-[280px] text-center text-sm text-muted-foreground">
-              {errorMsg ||
-                "Could not reach the server. Check that your bot is running and try again."}
+              {errorMsg || "Could not reach the server. Check that your bot is running and try again."}
             </p>
 
-            <Button
-              type="button"
-              variant="terminal"
-              size="sm"
-              className="h-10 px-4"
-              onClick={handleRefresh}
-            >
+            <Button type="button" variant="terminal" size="sm" className="h-10 px-4" onClick={handleRefresh}>
               <RefreshCw className="size-3.5" />
               Try Again
             </Button>
@@ -285,9 +258,7 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
           <div className="flex flex-col items-center gap-4">
             <WifiOff className="size-10 text-muted-foreground" />
 
-            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              BOT OFFLINE
-            </span>
+            <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">BOT OFFLINE</span>
 
             <p className="max-w-[280px] text-center text-sm text-muted-foreground">
               Your bot is currently offline. Start it from the fleet dashboard to link your account.

package/src/components/channel-wizard/step-renderer.tsx

@@ -24,34 +24,13 @@ function renderField(
 ) {
   switch (field.setupFlow) {
     case "oauth":
-      return (
-        <FieldOAuth key={field.key} field={field} value={value} onChange={onChange} error={error} />
-      );
+      return <FieldOAuth key={field.key} field={field} value={value} onChange={onChange} error={error} />;
     case "qr":
-      return (
-        <FieldQR
-          key={field.key}
-          field={field}
-          value={value}
-          onChange={onChange}
-          error={error}
-          botId={botId}
-        />
-      );
+      return <FieldQR key={field.key} field={field} value={value} onChange={onChange} error={error} botId={botId} />;
     case "interactive":
-      return (
-        <FieldInteractive
-          key={field.key}
-          field={field}
-          value={value}
-          onChange={onChange}
-          error={error}
-        />
-      );
+      return <FieldInteractive key={field.key} field={field} value={value} onChange={onChange} error={error} />;
     default:
-      return (
-        <FieldPaste key={field.key} field={field} value={value} onChange={onChange} error={error} />
-      );
+      return <FieldPaste key={field.key} field={field} value={value} onChange={onChange} error={error} />;
   }
 }
 
@@ -93,9 +72,7 @@ export function StepRenderer({ step, values, errors, onChange, botId }: StepRend
 
       {hasFields && (
         <div className="space-y-4">
-          {step.fields.map((field) =>
-            renderField(field, values[field.key] || "", onChange, errors[field.key], botId),
-          )}
+          {step.fields.map((field) => renderField(field, values[field.key] || "", onChange, errors[field.key], botId))}
         </div>
       )}
     </div>

package/src/components/channel-wizard/wizard.tsx

@@ -3,14 +3,7 @@
 import { useCallback, useState } from "react";
 import { z } from "zod";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { testChannelConnection } from "@/lib/api";
 import type { ChannelManifest } from "@/lib/channel-manifests";
@@ -55,10 +48,7 @@ export function Wizard({ manifest, onComplete, onCancel, submitting, botId }: Wi
         strSchema = strSchema.min(1, `${field.label} is required`);
       }
       if (field.validation?.pattern) {
-        strSchema = strSchema.regex(
-          new RegExp(field.validation.pattern),
-          field.validation.message || "Invalid format",
-        );
+        strSchema = strSchema.regex(new RegExp(field.validation.pattern), field.validation.message || "Invalid format");
       }
       shape[field.key] = field.required ? strSchema : strSchema.optional().or(z.literal(""));
     }
@@ -149,31 +139,16 @@ export function Wizard({ manifest, onComplete, onCancel, submitting, botId }: Wi
       </CardHeader>
 
       <CardContent>
-        <StepRenderer
-          step={step}
-          values={values}
-          errors={errors}
-          onChange={handleChange}
-          botId={botId}
-        />
+        <StepRenderer step={step} values={values} errors={errors} onChange={handleChange} botId={botId} />
 
         {manifest.connectionTest && isLastStep && (
           <div className="mt-6 flex flex-col items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={handleTestConnection}
-              disabled={testing}
-            >
+            <Button type="button" variant="outline" onClick={handleTestConnection} disabled={testing}>
               {testing ? "Testing..." : manifest.connectionTest.label}
             </Button>
-            {testResult === "success" && (
-              <p className="text-sm text-emerald-500">Connection successful</p>
-            )}
+            {testResult === "success" && <p className="text-sm text-emerald-500">Connection successful</p>}
             {testResult === "failure" && (
-              <p className="text-sm text-destructive">
-                {testError || "Connection failed. Check your settings."}
-              </p>
+              <p className="text-sm text-destructive">{testError || "Connection failed. Check your settings."}</p>
             )}
           </div>
         )}

package/src/components/chat/chat-message.tsx

@@ -18,10 +18,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
   const isUser = message.role === "user";
 
   return (
-    <div
-      className={`flex ${isUser ? "justify-end" : "justify-start"}`}
-      data-testid={`chat-message-${message.role}`}
-    >
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`} data-testid={`chat-message-${message.role}`}>
       <div
         className={`max-w-[80%] rounded-lg px-3 py-2 ${
           isUser

package/src/components/chat/chat-panel.tsx

@@ -36,15 +36,7 @@ const fullscreenVariants = {
   exit: { opacity: 0, transition: { duration: 0.15 } },
 };
 
-export function ChatPanel({
-  messages,
-  mode,
-  isConnected,
-  isTyping,
-  onSend,
-  onClose,
-  onFullscreen,
-}: ChatPanelProps) {
+export function ChatPanel({ messages, mode, isConnected, isTyping, onSend, onClose, onFullscreen }: ChatPanelProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const isFullscreen = mode === "fullscreen";
 
@@ -81,9 +73,7 @@ export function ChatPanel({
             className={`h-2 w-2 rounded-full inline-block ${isConnected ? "bg-terminal" : "bg-destructive"}`}
             aria-label={isConnected ? "Connected" : "Disconnected"}
           />
-          <span className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
-            {brandName()}
-          </span>
+          <span className="text-xs font-mono uppercase tracking-wider text-muted-foreground">{brandName()}</span>
         </div>
         <div className="flex items-center gap-1">
           {!isFullscreen && (
@@ -112,13 +102,9 @@ export function ChatPanel({
       </div>
 
       {/* Messages */}
-      <div
-        className={`flex-1 overflow-y-auto px-4 py-3 space-y-2 ${isFullscreen ? "max-w-2xl mx-auto w-full" : ""}`}
-      >
+      <div className={`flex-1 overflow-y-auto px-4 py-3 space-y-2 ${isFullscreen ? "max-w-2xl mx-auto w-full" : ""}`}>
         {messages.length === 0 && !isConnected && (
-          <p className="text-center text-xs text-muted-foreground animate-ellipsis">
-            Connecting to {brandName()}
-          </p>
+          <p className="text-center text-xs text-muted-foreground animate-ellipsis">Connecting to {brandName()}</p>
         )}
         {messages.map((msg) => (
           <ChatMessage key={msg.id} message={msg} />

package/src/components/chat/chat-widget.tsx

@@ -6,23 +6,12 @@ import { AmbientDot } from "./ambient-dot";
 import { ChatPanel } from "./chat-panel";
 
 export function ChatWidget() {
-  const {
-    messages,
-    mode,
-    isConnected,
-    isTyping,
-    hasUnread,
-    expand,
-    collapse,
-    fullscreen,
-    sendMessage,
-  } = useChatContext();
+  const { messages, mode, isConnected, isTyping, hasUnread, expand, collapse, fullscreen, sendMessage } =
+    useChatContext();
 
   return (
     <>
-      <AnimatePresence>
-        {mode === "collapsed" && <AmbientDot hasUnread={hasUnread} onClick={expand} />}
-      </AnimatePresence>
+      <AnimatePresence>{mode === "collapsed" && <AmbientDot hasUnread={hasUnread} onClick={expand} />}</AnimatePresence>
       <AnimatePresence>
         {(mode === "expanded" || mode === "fullscreen") && (
           <ChatPanel

package/src/components/dashboard/command-center.tsx

@@ -9,19 +9,8 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useFleetSSE } from "@/hooks/use-fleet-sse";
 import { usePaginationParams } from "@/hooks/use-pagination-params";
-import type {
-  ActivityEvent,
-  BotStatusResponse,
-  DividendWalletStats,
-  FleetInstance,
-  FleetResources,
-} from "@/lib/api";
-import {
-  getActivityFeed,
-  getDividendStats,
-  getFleetResources,
-  mapBotStatusToFleetInstance,
-} from "@/lib/api";
+import type { ActivityEvent, BotStatusResponse, DividendWalletStats, FleetInstance, FleetResources } from "@/lib/api";
+import { getActivityFeed, getDividendStats, getFleetResources, mapBotStatusToFleetInstance } from "@/lib/api";
 import { productName } from "@/lib/brand-config";
 import { toUserMessage } from "@/lib/errors";
 import { formatRelativeTime } from "@/lib/format";
@@ -32,9 +21,7 @@ import { cn } from "@/lib/utils";
 function computeFleetStats(instances: FleetInstance[], resources: FleetResources | null) {
   const running = instances.filter((i) => i.status === "running").length;
   const stopped = instances.filter((i) => i.status === "stopped").length;
-  const degraded = instances.filter(
-    (i) => i.health === "degraded" || i.health === "unhealthy",
-  ).length;
+  const degraded = instances.filter((i) => i.health === "degraded" || i.health === "unhealthy").length;
   const totalCpu = resources?.totalCpuPercent ?? 0;
   const totalMemory = resources?.totalMemoryMb ?? 0;
   const memoryCapacity = resources?.memoryCapacityMb ?? 2048;
@@ -236,12 +223,7 @@ export function CommandCenter() {
           className="flex items-center justify-between rounded-md border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400"
         >
           <span>{error}</span>
-          <Button
-            data-onboarding-id="dashboard.retry"
-            variant="ghost"
-            size="sm"
-            onClick={() => loadNonFleet()}
-          >
+          <Button data-onboarding-id="dashboard.retry" variant="ghost" size="sm" onClick={() => loadNonFleet()}>
             Retry
           </Button>
         </div>
@@ -249,10 +231,7 @@ export function CommandCenter() {
 
       {/* Fleet Summary Cards */}
       <motion.div
-        className={cn(
-          "grid gap-4 sm:grid-cols-2",
-          dividendStats ? "lg:grid-cols-5" : "lg:grid-cols-4",
-        )}
+        className={cn("grid gap-4 sm:grid-cols-2", dividendStats ? "lg:grid-cols-5" : "lg:grid-cols-4")}
         variants={staggerContainer}
         initial="hidden"
         animate="show"
@@ -268,9 +247,7 @@ export function CommandCenter() {
               <p className="mt-2 text-3xl font-bold tabular-nums" data-testid="running-count">
                 {loading ? "--" : <CountUp value={stats.running} />}
               </p>
-              <p className="text-xs text-muted-foreground">
-                {stats.running === 1 ? "instance" : "instances"}
-              </p>
+              <p className="text-xs text-muted-foreground">{stats.running === 1 ? "instance" : "instances"}</p>
             </CardContent>
           </Card>
         </motion.div>
@@ -286,9 +263,7 @@ export function CommandCenter() {
               <p className="mt-2 text-3xl font-bold tabular-nums" data-testid="stopped-count">
                 {loading ? "--" : <CountUp value={stats.stopped} />}
               </p>
-              <p className="text-xs text-muted-foreground">
-                {stats.stopped === 1 ? "instance" : "instances"}
-              </p>
+              <p className="text-xs text-muted-foreground">{stats.stopped === 1 ? "instance" : "instances"}</p>
             </CardContent>
           </Card>
         </motion.div>
@@ -308,9 +283,7 @@ export function CommandCenter() {
               <p className="mt-2 text-3xl font-bold tabular-nums" data-testid="degraded-count">
                 {loading ? "--" : <CountUp value={stats.degraded} />}
               </p>
-              <p className="text-xs text-muted-foreground">
-                {stats.degraded > 0 ? "need attention" : "all clear"}
-              </p>
+              <p className="text-xs text-muted-foreground">{stats.degraded > 0 ? "need attention" : "all clear"}</p>
             </CardContent>
           </Card>
         </motion.div>
@@ -349,9 +322,7 @@ export function CommandCenter() {
                       className="h-full rounded-full bg-primary"
                       initial={{ width: "0%" }}
                       animate={{
-                        width: loading
-                          ? "0%"
-                          : `${Math.min(100, (stats.totalMemory / stats.memoryCapacity) * 100)}%`,
+                        width: loading ? "0%" : `${Math.min(100, (stats.totalMemory / stats.memoryCapacity) * 100)}%`,
                       }}
                       transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
                     />
@@ -372,10 +343,7 @@ export function CommandCenter() {
                   <p className="text-sm text-muted-foreground">Today&apos;s Dividend</p>
                   <TrendingUpIcon className="size-4 text-terminal" />
                 </div>
-                <p
-                  className="mt-2 text-3xl font-bold tabular-nums text-terminal"
-                  data-testid="dividend-amount"
-                >
+                <p className="mt-2 text-3xl font-bold tabular-nums text-terminal" data-testid="dividend-amount">
                   {loading ? "--" : formatCreditStandard((dividendStats?.perUserCents ?? 0) / 100)}
                 </p>
                 <p className="text-xs text-muted-foreground">
@@ -407,9 +375,7 @@ export function CommandCenter() {
           ) : activity.length === 0 ? (
             <div className="flex flex-col items-center gap-2 py-8 text-center">
               <p className="font-mono text-sm text-terminal">&gt; STANDING BY</p>
-              <p className="font-mono text-xs text-muted-foreground">
-                NO EVENTS LOGGED. AWAITING ACTIVITY.
-              </p>
+              <p className="font-mono text-xs text-muted-foreground">NO EVENTS LOGGED. AWAITING ACTIVITY.</p>
             </div>
           ) : (
             <motion.div
@@ -475,11 +441,7 @@ export function CommandCenter() {
             <motion.div
               className="h-full rounded-sm border border-dashed border-terminal/20"
               animate={{
-                borderColor: [
-                  "hsl(var(--terminal) / 0.2)",
-                  "hsl(var(--terminal) / 0.5)",
-                  "hsl(var(--terminal) / 0.2)",
-                ],
+                borderColor: ["hsl(var(--terminal) / 0.2)", "hsl(var(--terminal) / 0.5)", "hsl(var(--terminal) / 0.2)"],
               }}
               transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
             >
@@ -497,9 +459,7 @@ export function CommandCenter() {
                     <Plus size={24} />
                   </motion.div>
                   <p className="font-semibold">Add another {productName()}</p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    Name it. Teach it. Give it superpowers.
-                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">Name it. Teach it. Give it superpowers.</p>
                 </CardContent>
               </Card>
             </motion.div>
@@ -511,16 +471,10 @@ export function CommandCenter() {
       {fleetTotal > FLEET_PAGE_SIZE && (
         <div className="flex items-center justify-between text-xs text-muted-foreground font-mono">
           <span>
-            Showing {fleetStart + 1}-{Math.min(fleetStart + FLEET_PAGE_SIZE, fleetTotal)} of{" "}
-            {fleetTotal}
+            Showing {fleetStart + 1}-{Math.min(fleetStart + FLEET_PAGE_SIZE, fleetTotal)} of {fleetTotal}
           </span>
           <div className="flex gap-2">
-            <Button
-              variant="ghost"
-              size="xs"
-              disabled={fleetPage <= 1}
-              onClick={() => setFleetPage(fleetPage - 1)}
-            >
+            <Button variant="ghost" size="xs" disabled={fleetPage <= 1} onClick={() => setFleetPage(fleetPage - 1)}>
               Previous
             </Button>
             <Button

package/src/components/fleet/update-settings-card.tsx

@@ -5,20 +5,13 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { useTenant } from "@/lib/tenant-context";
 import { trpc } from "@/lib/trpc";
 
 const HOUR_OPTIONS = Array.from({ length: 24 }, (_, i) => {
-  const label =
-    i === 0 ? "12:00 AM" : i < 12 ? `${i}:00 AM` : i === 12 ? "12:00 PM" : `${i - 12}:00 PM`;
+  const label = i === 0 ? "12:00 AM" : i < 12 ? `${i}:00 AM` : i === 12 ? "12:00 PM" : `${i - 12}:00 PM`;
   return { value: String(i), label };
 });
 
@@ -26,10 +19,7 @@ export function UpdateSettingsCard() {
   const { activeTenantId: tenantId } = useTenant();
   const [saving, setSaving] = useState(false);
 
-  const configQuery = trpc.fleetUpdateConfig.getUpdateConfig.useQuery(
-    { tenantId },
-    { enabled: !!tenantId },
-  );
+  const configQuery = trpc.fleetUpdateConfig.getUpdateConfig.useQuery({ tenantId }, { enabled: !!tenantId });
 
   const setConfigMutation = trpc.fleetUpdateConfig.setUpdateConfig.useMutation();
 
@@ -82,8 +72,8 @@ export function UpdateSettingsCard() {
           Auto-Update Settings
         </CardTitle>
         <CardDescription>
-          Control how your fleet receives updates. Auto mode applies updates during your preferred
-          maintenance window. Manual mode shows an update badge — you choose when to apply.
+          Control how your fleet receives updates. Auto mode applies updates during your preferred maintenance window.
+          Manual mode shows an update badge — you choose when to apply.
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
@@ -129,15 +119,9 @@ export function UpdateSettingsCard() {
                     <Clock className="h-4 w-4 text-muted-foreground" />
                     Maintenance Window
                   </Label>
-                  <p className="text-sm text-muted-foreground">
-                    Preferred hour for applying updates (UTC)
-                  </p>
+                  <p className="text-sm text-muted-foreground">Preferred hour for applying updates (UTC)</p>
                 </div>
-                <Select
-                  value={String(preferredHourUtc)}
-                  onValueChange={handleHourChange}
-                  disabled={saving}
-                >
+                <Select value={String(preferredHourUtc)} onValueChange={handleHourChange} disabled={saving}>
                   <SelectTrigger className="w-[140px]">
                     <SelectValue />
                   </SelectTrigger>

package/src/components/instance-update-banner.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { controlInstance, type InstanceVersionCheck, instanceVersionCheck } from "@/lib/api";
+import { trpcVanilla } from "@/lib/trpc";
+
+type Status = "idle" | "rolling" | "done";
+
+/**
+ * Banner that appears when the user's sidecar container is running an
+ * older image than the one currently pulled on the host node. Offers an
+ * opt-in "Update now" button that triggers a fleet.controlInstance roll.
+ *
+ * Polls every 60s. During roll the banner shows "Updating…" and expects
+ * a brief iframe/sidebar reconnect; on success it reloads the page so
+ * the fresh container serves the iframe from its new image.
+ */
+export function InstanceUpdateBanner() {
+  const [instanceId, setInstanceId] = useState<string | null>(null);
+  const [check, setCheck] = useState<InstanceVersionCheck | null>(null);
+  const [status, setStatus] = useState<Status>("idle");
+  const [dismissed, setDismissed] = useState(false);
+  const reloadTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    // Go direct to the raw tRPC response so we can read platformInstanceId
+    // (the bot_instances UUID). `listInstances()` in api.ts maps to a
+    // client-friendly shape but reads `bot.id` which is the docker
+    // container hash in the success path — not what the fleet APIs want.
+    (async () => {
+      try {
+        const data = (await trpcVanilla.fleet.listInstances.query(undefined)) as {
+          bots?: Array<{ platformInstanceId?: string }>;
+        };
+        // The hosted shell currently provisions exactly one sidecar per
+        // user, so bots[0] is the workspace the shell is backing. If
+        // multi-instance support lands, pick the active instance here.
+        if (!cancelled) setInstanceId(data.bots?.[0]?.platformInstanceId ?? null);
+      } catch {
+        if (!cancelled) setInstanceId(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Clear any in-flight reload timer if the component unmounts, to avoid
+  // a setState on an unmounted component and a surprise reload firing
+  // after navigation.
+  useEffect(() => {
+    return () => {
+      if (reloadTimeoutRef.current) {
+        clearTimeout(reloadTimeoutRef.current);
+        reloadTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!instanceId) return;
+    let cancelled = false;
+    async function poll() {
+      if (!instanceId) return;
+      try {
+        const result = await instanceVersionCheck(instanceId);
+        if (!cancelled) setCheck(result);
+      } catch {
+        // Transient errors are fine — we'll retry on the next tick.
+      }
+    }
+    void poll();
+    const handle = window.setInterval(poll, 60_000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(handle);
+    };
+  }, [instanceId]);
+
+  const onUpdate = useCallback(async () => {
+    if (!instanceId) return;
+    setStatus("rolling");
+    try {
+      await controlInstance(instanceId, "roll");
+      // Give the container ~25s to come back up before reloading. A tighter
+      // loop that polls health would be nicer, but reload is simpler and
+      // matches how the shell already recovers from routeChanged.
+      reloadTimeoutRef.current = setTimeout(() => {
+        setStatus("done");
+        window.location.reload();
+      }, 25_000);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast.error(`Update failed: ${msg}`);
+      setStatus("idle");
+    }
+  }, [instanceId]);
+
+  if (dismissed) return null;
+  if (!check) return null;
+  if (check.upToDate) return null;
+
+  return (
+    <div className="flex items-center gap-3 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2 text-sm text-amber-100">
+      <span className="font-medium">New version available</span>
+      <span className="text-amber-100/70">Your workspace will briefly disconnect while we swap it in.</span>
+      <div className="ml-auto flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onUpdate}
+          disabled={status !== "idle"}
+          className="rounded-md bg-amber-500 px-3 py-1 text-xs font-medium text-amber-950 transition-colors hover:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {status === "rolling" ? "Updating…" : status === "done" ? "Reloading…" : "Update now"}
+        </button>
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          disabled={status !== "idle"}
+          className="rounded-md px-2 py-1 text-xs text-amber-100/70 hover:bg-amber-500/10 hover:text-amber-50 disabled:cursor-not-allowed"
+          aria-label="Dismiss update banner"
+        >
+          Later
+        </button>
+      </div>
+    </div>
+  );
+}