@saadnvd1/agent-os 0.3.744 → 0.3.749

package/README.md

@@ -19,7 +19,7 @@ and check on all of it from your phone.
 - **Other machines in the same list.** Link another machine that runs AgentOS and start or move work there. [More](docs/reference/machines.md)
 - **Built for your phone.** The whole app works on a phone; pair it with a QR code. [More](docs/guides/phone.md)
 - **Phone to orchestrator.** A paired phone can send a shake report or a shared page or file to a workspace's orchestrator (`POST /api/orchestrators/:workspaceId/intake`, saved under `intake/` beside the database, shared content marked untrusted), and fetch names to improve dictation (`GET /api/voice/vocab?workspace=`). [More](docs/guides/phone.md)
-- **An analyst beside your coding agent.** Pair a chat with a second one that reviews each turn, explains it in plain English, flags issues and drafts the next prompt, which you send, edit or dismiss. Side by side on a desktop, a switch on a phone. [More](docs/decisions/2026-10-21-analyst-sessions.md)
+- **An analyst beside your coding agent.** Pair a chat with a second one that reviews each turn, explains it in plain English, flags issues and drafts the next prompt, which you send, edit or dismiss. It runs on Claude unless you pick another model, local ones included. Side by side on a desktop, a switch on a phone. [More](docs/decisions/2026-10-21-analyst-sessions.md)
 - **Agents that talk to each other.** Sessions message each other with `aos`, and you see every conversation in Messages. [More](docs/guides/agent-network.md)
 - **Chat or terminal, same conversation.** Streaming replies, steps and diffs, plan mode, slash commands, `@file`, undo. [More](docs/guides/chat.md)
 - **Bookmarks.** Star any message, tool call or turn, then find it again from the chat or across every chat, with a search. [More](docs/guides/chat.md)

package/app/api/models/choices/route.ts

@@ -1,9 +1,13 @@
 import { NextResponse } from "next/server";
-import { modelCatalog } from "@/lib/models/catalog";
+import { modelCatalog, unconfiguredChoices } from "@/lib/models/catalog";
 
 // GET /api/models/choices - every model a picker offers, from the server:
 // the enabled providers' models and the ones Pi reaches, each with its
-// locality (local or cloud) and the last availability check.
+// locality (local or cloud), the last availability check and whether it can
+// call tools. Models of a provider that is off, or half set up, are listed
+// with `unusable` saying why, so a picker can grey them rather than hide them.
 export async function GET() {
-  return NextResponse.json({ choices: modelCatalog() });
+  return NextResponse.json({
+    choices: [...modelCatalog(), ...unconfiguredChoices()],
+  });
 }

package/app/api/sessions/[id]/model/route.ts

@@ -1,10 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { db, type Session } from "@/lib/db";
-import { setChatModel } from "@/lib/chat/settings";
-import { providerFor, sessionRole } from "@/lib/models/resolve";
-import { switchSessionModel } from "@/lib/models/session-model";
-import { PI } from "@/lib/models/providers";
-import { formatModelRef, parseModelRef } from "@/lib/models/roles";
+import { switchSessionModelRef } from "@/lib/models/session-model";
 
 // POST /api/sessions/:id/model {ref} - move a running session to another
 // model ("provider/model", or "pi/<provider>/<model>" for a Pi session),
@@ -23,24 +19,7 @@ export async function POST(
   if (typeof ref !== "string" || !ref.trim())
     return NextResponse.json({ error: "ref is required" }, { status: 400 });
   try {
-    const parsed = parseModelRef(ref);
-    if (session.agent_type === "pi") {
-      if (parsed.provider !== PI)
-        throw new Error(
-          "A Pi session runs on a Pi model (pi/<provider>/<model>)"
-        );
-      await setChatModel(id, parsed.model);
-    } else {
-      if (parsed.provider === PI)
-        throw new Error("Only a Pi session can move to a Pi model");
-      await switchSessionModel(id, {
-        role: sessionRole(session),
-        ref: formatModelRef(parsed),
-        provider: providerFor(parsed.provider),
-        model: parsed.model,
-        source: "task",
-      });
-    }
+    await switchSessionModelRef(session, ref);
     return NextResponse.json({ ok: true });
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);

package/components/Analyst/StartAnalystSheet.tsx

@@ -13,8 +13,10 @@ import {
 } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import { RoleModelSelect } from "@/components/Models/RoleModelSelect";
+import { useSessionsQuery } from "@/data/sessions/queries";
 import { analystUi, analystUiActions } from "@/stores/analystUi";
 import { useStartAnalystBeside } from "./pair";
+import { useAnalystModels } from "./useAnalystModels";
 
 // Pairs an analyst with a chat: it reviews each turn the coding agent
 // finishes and recommends the next prompt, which the user sends or not.
@@ -46,6 +48,9 @@ function StartAnalystForm({
   const [model, setModel] = useState<string | null>(null);
   const [reviewLast, setReviewLast] = useState(false);
   const start = useStartAnalystBeside();
+  const { data } = useSessionsQuery();
+  const coder = data?.sessions.find((s) => s.id === sessionId);
+  const models = useAnalystModels(coder?.project_id);
 
   return (
     <DialogContent className="sm:max-w-[460px]">
@@ -68,8 +73,8 @@ function StartAnalystForm({
         <RoleModelSelect
           id="analyst-model"
           value={model}
-          inheritLabel="The analyst role's model"
-          claudeOnly
+          inheritLabel={models.defaultLabel}
+          blockedBy={models.blockedBy}
           onChange={setModel}
         />
       </div>

package/components/Analyst/useAnalystModels.ts

@@ -0,0 +1,19 @@
+import { useAgentRolesQuery, useModelChoices } from "@/data/models";
+import { analystBlock, defaultAnalystLabel } from "@/lib/models/usable";
+
+// What an analyst's model pickers need, all from the server: the list, the
+// reason a model can't be picked, and the label of the default (the model
+// the analyst role resolves to in the project the analyst starts in).
+export function useAnalystModels(projectId?: string | null) {
+  const { data: choices = [] } = useModelChoices();
+  const roles = useAgentRolesQuery(
+    projectId ? "project" : "settings",
+    projectId
+  );
+  const bound = roles.data?.roles.find((r) => r.id === "analyst")?.binding;
+  return {
+    choices,
+    defaultLabel: defaultAnalystLabel(bound?.ref, choices),
+    blockedBy: analystBlock,
+  };
+}

package/components/Approvals/NoApprovalsBadge.tsx

@@ -3,20 +3,33 @@
 import { ShieldOff } from "lucide-react";
 import { useApprovalsModeQuery } from "@/data/approvals";
 import { settingsUiActions } from "@/stores/settingsUi";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 // On screen for as long as No approvals mode is on; opens its Settings.
+// Shrinks to the icon when the sidebar header is narrow.
 export function NoApprovalsBadge() {
   const { data } = useApprovalsModeQuery();
   if (!data?.on) return null;
   return (
-    <button
-      type="button"
-      onClick={() => settingsUiActions.open("approvals")}
-      title="No approvals mode is on: nothing waits for a person. Open settings."
-      className="flex h-8 shrink-0 items-center gap-1 rounded-md bg-amber-500/20 px-2 text-xs font-medium text-amber-500 ring-1 ring-amber-500/50"
-    >
-      <ShieldOff className="h-3.5 w-3.5" />
-      No approvals
-    </button>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => settingsUiActions.open("approvals")}
+          aria-label="No approvals mode is on. Open settings."
+          className="flex h-11 w-11 shrink-0 items-center justify-center gap-1 rounded-md bg-amber-500/20 text-xs font-medium text-amber-500 ring-1 ring-amber-500/50 md:h-8 md:w-8 @[22rem]:w-auto @[22rem]:px-2 [@media(hover:none)]:md:h-11"
+        >
+          <ShieldOff className="h-3.5 w-3.5" />
+          <span className="hidden @[22rem]:inline">No approvals</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        No approvals mode is on: nothing waits for a person. Open settings.
+      </TooltipContent>
+    </Tooltip>
   );
 }

package/components/Away/AwayToggle.tsx

@@ -39,16 +39,16 @@ export function AwayToggle() {
   return (
     <ADropdownMenu
       minWidth="220px"
+      tooltip={
+        away
+          ? `Away ${until}`
+          : "Away: let the orchestrators follow work through"
+      }
       trigger={
         <Button
           variant="ghost"
           size="icon-sm"
           aria-label={away ? `Away ${until}` : "Away"}
-          title={
-            away
-              ? `Away ${until}`
-              : "Away: let the orchestrators follow work through"
-          }
           disabled={setAway.isPending}
           className={cn(
             "relative h-11 w-11 md:h-8 md:w-8 [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11",

package/components/Chat/ChatPanel.tsx

@@ -56,7 +56,8 @@ import { McpServers } from "./McpServers";
 import { ChatSessionId } from "./session";
 import { ArtifactCard } from "./Artifact";
 import { PlanCard } from "./PlanCard";
-import { ChatIdle } from "./idle";
+import { ChatIdle, RetryTurn } from "./idle";
+import { RETRY_TEXT } from "@/lib/chat/turn-end";
 import { ContextMeter } from "./ContextMeter";
 import { SetupCard } from "./SetupCard";
 import { UserTurn } from "./EventRow";
@@ -631,6 +632,11 @@ export function ChatPanel({
   // Another conversation starts without the last one's find.
   useEffect(() => closeFind, [sessionId, closeFind]);
   const idle = !running && connected;
+  const lastEndId = items.findLast((i) => i.kind === "turn_end")?.id ?? null;
+  const retryTurn = useMemo(
+    () => ({ id: lastEndId, retry: () => send(RETRY_TEXT) }),
+    [lastEndId, send]
+  );
   const actions: ItemActions = useMemo(
     () => ({
       respond,
@@ -691,7 +697,9 @@ export function ChatPanel({
                   </div>
                   <ChatSessionId.Provider value={sessionId}>
                     <ChatIdle.Provider value={idle}>
-                      <TimelineRows blocks={blocks} actions={actions} />
+                      <RetryTurn.Provider value={retryTurn}>
+                        <TimelineRows blocks={blocks} actions={actions} />
+                      </RetryTurn.Provider>
                     </ChatIdle.Provider>
                   </ChatSessionId.Provider>
                   {pending.map((p) => (

package/components/Chat/Messages.test.ts

@@ -2,6 +2,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 import { AssistantMessage, TurnEnd, UserMessage } from "./Messages";
+import { ChatIdle, RetryTurn } from "./idle";
 
 const item = {
   id: "a1",
@@ -131,3 +132,35 @@ describe("TurnEnd steps", () => {
     expect(html).toContain("Stopped · 4 of 5 steps done, 1 failed, 1 not run");
   });
 });
+
+describe("TurnEnd retry", () => {
+  const end = (reason: string, id = "e") =>
+    ({
+      id,
+      kind: "turn_end",
+      ended: { reason, notice: "It stalled." },
+    }) as never;
+  const html = (item: never, retry: { id: string | null }, idle = true) =>
+    renderToStaticMarkup(
+      createElement(
+        ChatIdle.Provider,
+        { value: idle },
+        createElement(
+          RetryTurn.Provider,
+          { value: { ...retry, retry: () => {} } },
+          createElement(TurnEnd, { item })
+        )
+      )
+    );
+
+  it("offers Retry on the latest stalled end while idle", () => {
+    expect(html(end("stalled"), { id: "e" })).toContain(">Retry<");
+    expect(html(end("compaction_empty"), { id: "e" })).toContain(">Retry<");
+  });
+
+  it("does not on an older end, a running chat, or an ending retry can't fix", () => {
+    expect(html(end("stalled"), { id: "later" })).not.toContain("Retry");
+    expect(html(end("stalled"), { id: "e" }, false)).not.toContain("Retry");
+    expect(html(end("length"), { id: "e" })).not.toContain("Retry");
+  });
+});

package/components/Chat/Messages.tsx

@@ -2,6 +2,8 @@
 
 import type { StepCounts } from "@/lib/chat/tool-outcome";
 import { memo } from "react";
+import { retryableEnd } from "@/lib/chat/turn-end";
+import { useChatIdle, useRetryTurn } from "./idle";
 import { useSnapshot } from "valtio";
 import {
   Check,
@@ -398,6 +400,10 @@ export function TurnEnd({
 }) {
   const secs = item.durationMs ? Math.round(item.durationMs / 1000) : null;
   const early = !item.interrupted && item.ended;
+  const idle = useChatIdle();
+  const retryTurn = useRetryTurn();
+  const canRetry =
+    !!early && idle && retryTurn.id === item.id && retryableEnd(early.reason);
   const label = item.interrupted
     ? "Stopped"
     : early
@@ -420,6 +426,15 @@ export function TurnEnd({
               finish reason: {item.finishReason}
             </span>
           )}
+          {canRetry && (
+            <button
+              type="button"
+              onClick={retryTurn.retry}
+              className="hover:bg-foreground/[0.06] mt-2 block min-h-11 rounded-md border border-current/30 px-3 text-sm font-medium md:min-h-8"
+            >
+              Retry
+            </button>
+          )}
         </div>
       )}
       <div className="group text-muted-foreground/60 flex items-center gap-3 font-mono text-[11px]">

package/components/Chat/ModelPicker.tsx

@@ -53,6 +53,7 @@ export function ModelPicker({
           <DropdownMenuItem
             key={m.value}
             onSelect={() => onPick(m.value)}
+            disabled={!!m.disabled}
             className="flex min-h-11 items-start gap-2 md:min-h-9"
           >
             <Check
@@ -60,9 +61,9 @@ export function ModelPicker({
             />
             <span className="flex flex-col">
               <span className="text-sm">{m.label}</span>
-              {m.description && (
+              {(m.disabled || m.description) && (
                 <span className="text-muted-foreground line-clamp-2 text-xs">
-                  {m.description}
+                  {m.disabled ?? m.description}
                 </span>
               )}
             </span>

package/components/Chat/idle.ts

@@ -7,3 +7,12 @@ import { createContext, useContext } from "react";
 // re-renders those buttons and not every row of a long conversation.
 export const ChatIdle = createContext(true);
 export const useChatIdle = () => useContext(ChatIdle);
+
+// The latest turn's end and what retrying it does: only that end offers
+// Retry, and only while the chat is idle. A context so the one turn ending
+// doesn't re-render every row.
+export const RetryTurn = createContext<{
+  id: string | null;
+  retry: () => void;
+}>({ id: null, retry: () => {} });
+export const useRetryTurn = () => useContext(RetryTurn);

package/components/Draft/AnalystModelChip.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Cpu } from "lucide-react";
+import {
+  AvailabilityDot,
+  LocalityBadge,
+} from "@/components/Models/ModelBadges";
+import { useAnalystModels } from "@/components/Analyst/useAnalystModels";
+import type { Draft } from "@/lib/drafts";
+import { ChipItem, ChipMenu } from "./Chip";
+
+// The model of the analyst a new chat starts with: the analyst role's
+// default unless one is picked. The list is the server's; a model that
+// can't serve an analyst is greyed with the reason.
+export function AnalystModelChip({
+  draft,
+  projectId,
+  onChange,
+}: {
+  draft: Draft;
+  projectId: string | null;
+  onChange: (patch: Partial<Draft>) => void;
+}) {
+  const { choices, defaultLabel, blockedBy } = useAnalystModels(projectId);
+  const picked = choices.find((c) => c.ref === draft.analystModel);
+  return (
+    <ChipMenu
+      icon={Cpu}
+      name="Analyst model"
+      label={picked?.label ?? draft.analystModel ?? defaultLabel}
+    >
+      <ChipItem
+        checked={!draft.analystModel}
+        onSelect={() => onChange({ analystModel: null })}
+      >
+        {defaultLabel}
+      </ChipItem>
+      {choices.map((c) => {
+        const why = c.unusable ?? blockedBy(c);
+        return (
+          <ChipItem
+            key={c.ref}
+            checked={c.ref === draft.analystModel}
+            onSelect={() => onChange({ analystModel: c.ref })}
+            disabled={!!why}
+            hint={why ?? c.group}
+          >
+            <span className="flex items-center gap-1.5">
+              <AvailabilityDot availability={c.availability} />
+              {c.label}
+              <LocalityBadge locality={c.locality} />
+            </span>
+          </ChipItem>
+        );
+      })}
+    </ChipMenu>
+  );
+}

package/components/Draft/DraftChips.tsx

@@ -20,6 +20,7 @@ import { modelChoices, useModelsQuery } from "@/data/models";
 import { useBrowserMachine } from "@/data/machines";
 import { machineLabel } from "@/lib/machines/label";
 import { RoleChips } from "./RoleChips";
+import { AnalystModelChip } from "./AnalystModelChip";
 import { AgentModelChip } from "./AgentModelChip";
 import { ChipHeading, ChipItem, ChipMenu, ChipToggle } from "./Chip";
 import {
@@ -232,6 +233,13 @@ export function DraftChips({
           onChange={(withAnalyst) => onChange({ withAnalyst })}
         />
       )}
+      {project && !draft.openPr && local && draft.withAnalyst && (
+        <AnalystModelChip
+          draft={draft}
+          projectId={project.id}
+          onChange={onChange}
+        />
+      )}
       {project && draft.openPr && local && (
         <ChipMenu
           icon={Cpu}

package/components/Draft/DraftPanel.tsx

@@ -179,7 +179,13 @@ export function DraftPanel({
       );
       if (draft.withAnalyst && project && draft.hostId === "local") {
         if (session.view === "chat")
-          void startAnalyst.run({ coderSessionId: session.id }, paneId);
+          void startAnalyst.run(
+            {
+              coderSessionId: session.id,
+              analystModel: draft.analystModel ?? undefined,
+            },
+            paneId
+          );
         else toast("An analyst reviews chats: this session runs in a terminal");
       }
     } catch (error) {

package/components/Draft/RoleChips.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/components/Models/ModelBadges";
 import { useAgentRolesQuery, useModelChoices } from "@/data/models";
 import type { Draft } from "@/lib/drafts";
+import { analystBlock, defaultAnalystLabel } from "@/lib/models/usable";
 import {
   AGENT_ROLES,
   AGENT_ROLE_DEFS,
@@ -34,6 +35,9 @@ export function RoleChips({
   const current = override ?? bound?.choice ?? null;
   const modelName = (ref: string | undefined | null) =>
     ref ? ref.split("/").slice(1).join("/") : "…";
+  const analyst = role === "analyst";
+  const whyNot = (c: (typeof choices)[number]) =>
+    c.unusable ?? (analyst ? analystBlock(c) : null);
   return (
     <>
       <ChipMenu
@@ -71,7 +75,9 @@ export function RoleChips({
           label={
             draft.roleModel
               ? modelName(draft.roleModel)
-              : `Role model: ${modelName(bound?.binding?.ref)}`
+              : analyst
+                ? defaultAnalystLabel(bound?.binding?.ref, choices)
+                : `Role model: ${modelName(bound?.binding?.ref)}`
           }
         >
           <ChipItem
@@ -79,14 +85,17 @@ export function RoleChips({
             onSelect={() => onChange({ roleModel: null })}
             hint={bound?.binding ? modelName(bound.binding.ref) : undefined}
           >
-            Role model
+            {analyst
+              ? defaultAnalystLabel(bound?.binding?.ref, choices)
+              : "Role model"}
           </ChipItem>
           {choices.map((c) => (
             <ChipItem
               key={c.ref}
               checked={c.ref === draft.roleModel}
               onSelect={() => onChange({ roleModel: c.ref })}
-              hint={c.group}
+              disabled={!!whyNot(c)}
+              hint={whyNot(c) ?? c.group}
             >
               <span className="flex items-center gap-1.5">
                 <AvailabilityDot availability={c.availability} />

package/components/Models/AgentRoleCard.tsx

@@ -2,6 +2,7 @@
 
 import { AlertTriangle } from "lucide-react";
 import type { AgentRoleView } from "@/lib/models/agent-roles-view";
+import { analystBlock, defaultAnalystLabel } from "@/lib/models/usable";
 import { cn } from "@/lib/utils";
 import { RoleModelSelect } from "./RoleModelSelect";
 
@@ -33,7 +34,11 @@ export function AgentRoleCard({
   onFallback: (ref: string | null) => void;
 }) {
   const down = role.choice?.availability.state === "down";
-  const label = `Default (${role.default.split("/").slice(1).join("/")})`;
+  const analyst = role.id === "analyst";
+  const label = analyst
+    ? defaultAnalystLabel(role.default, [])
+    : `Default (${role.default.split("/").slice(1).join("/")})`;
+  const blockedBy = analyst ? analystBlock : undefined;
   const inheritLabel =
     scope === "settings"
       ? role.modelRole === "advise"
@@ -66,6 +71,7 @@ export function AgentRoleCard({
             ? `${inheritLabel} · ${role.binding.ref.split("/").slice(1).join("/")}`
             : inheritLabel
         }
+        blockedBy={blockedBy}
         disabled={pending}
         onChange={onChange}
       />
@@ -102,7 +108,8 @@ export function AgentRoleCard({
               id={`agent-role-fallback-${role.id}`}
               value={role.fallback}
               inheritLabel="None (don't fall back)"
-              claudeOnly
+              claudeOnly={!analyst}
+              blockedBy={blockedBy}
               disabled={pending}
               onChange={onFallback}
             />

package/components/Models/RoleModelSelect.tsx

@@ -15,25 +15,35 @@ import { AvailabilityDot, LocalityBadge } from "./ModelBadges";
 
 const INHERIT = "__inherit";
 
-function Row({ choice }: { choice: ModelChoice }) {
+function Row({ choice, why }: { choice: ModelChoice; why?: string | null }) {
   return (
-    <span className="flex min-w-0 flex-1 items-center gap-2">
-      <AvailabilityDot availability={choice.availability} />
-      <span className="truncate">{choice.label}</span>
-      <LocalityBadge locality={choice.locality} />
+    <span className="flex min-w-0 flex-1 flex-col">
+      <span className="flex min-w-0 items-center gap-2">
+        <AvailabilityDot availability={choice.availability} />
+        <span className="truncate">{choice.label}</span>
+        <LocalityBadge locality={choice.locality} />
+      </span>
+      {why && (
+        <span className="text-muted-foreground text-xs whitespace-normal">
+          {why}
+        </span>
+      )}
     </span>
   );
 }
 
 // A model picker over the server's list: grouped by provider, each model
 // labelled Local or Cloud with whether its server answers. `claudeOnly`
-// leaves out the models that run through Pi.
+// leaves out the models that run through Pi. `blockedBy` greys a model with
+// the reason it can't be picked instead of hiding it; a model whose provider
+// isn't set up is always greyed.
 export function RoleModelSelect({
   id,
   value,
   inheritLabel,
   claudeOnly,
   gateOnly,
+  blockedBy,
   disabled,
   onChange,
 }: {
@@ -43,11 +53,16 @@ export function RoleModelSelect({
   claudeOnly?: boolean;
   // Only models that can serve a merge gate are selectable.
   gateOnly?: boolean;
+  blockedBy?: (c: ModelChoice) => string | null;
   disabled?: boolean;
   onChange: (ref: string | null) => void;
 }) {
   const { data } = useModelChoices();
   const choices = (data ?? []).filter((c) => !claudeOnly || c.agent !== "pi");
+  const whyNot = (c: ModelChoice) =>
+    c.unusable ??
+    blockedBy?.(c) ??
+    (gateOnly && !c.gateCapable ? "Can't serve a merge gate" : null);
   const groups = [...new Set(choices.map((c) => c.group))];
   const current = value ? choices.find((c) => c.ref === value) : undefined;
   return (
@@ -73,10 +88,10 @@ export function RoleModelSelect({
                 <SelectItem
                   key={c.ref}
                   value={c.ref}
-                  disabled={gateOnly && !c.gateCapable}
+                  disabled={!!whyNot(c)}
                   className="min-h-11 md:min-h-0"
                 >
-                  <Row choice={c} />
+                  <Row choice={c} why={whyNot(c)} />
                 </SelectItem>
               ))}
           </SelectGroup>

package/components/SessionList/MachineSwitcher.tsx

@@ -32,7 +32,7 @@ export function MachineSwitcher() {
           type="button"
           aria-label={`Machine: ${current ? machineLabel(current) : "All machines"}`}
           className={cn(
-            "border-border/70 text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04] flex h-11 max-w-full min-w-0 items-center gap-1.5 rounded-lg border px-2.5 text-xs md:h-8",
+            "text-muted-foreground hover:text-foreground bg-card flex min-h-11 max-w-full min-w-0 items-center gap-1.5 rounded-xl border border-transparent px-3 text-sm shadow-xs md:min-h-9 [@media(hover:none)]:md:min-h-11",
             current && "border-primary/40 bg-primary/10 text-primary"
           )}
         >

package/components/SessionList/ProjectFilter.tsx

@@ -25,7 +25,7 @@ export function ProjectFilter({
         <button
           type="button"
           className={cn(
-            "bg-card flex min-h-11 max-w-[7.5rem] shrink items-center gap-1 rounded-xl px-3 text-sm shadow-xs md:min-h-9 [@media(hover:none)]:md:min-h-11",
+            "bg-card flex min-h-11 max-w-full min-w-0 shrink items-center gap-1 rounded-xl px-3 text-sm shadow-xs md:min-h-9 [@media(hover:none)]:md:min-h-11",
             current && "text-primary"
           )}
         >

package/components/SessionList/SidebarHeader.tsx

@@ -67,8 +67,8 @@ export function SidebarHeader(props: SidebarHeaderProps) {
   const workspaceId = props.workspace?.id ?? null;
   const schedules = useSchedulesGlance(workspaceId);
   return (
-    <div className="flex flex-wrap items-center gap-x-1 px-3 pt-3 pb-2">
-      <div className="flex min-w-[9.5rem] flex-1 items-center">
+    <div className="@container flex flex-wrap items-center gap-x-1 gap-y-2 px-3 pt-3 pb-2">
+      <div className="flex min-w-[9.5rem] flex-1 basis-[9.5rem] items-center">
         <WorkspaceSwitcher
           workspaces={props.workspaces}
           current={props.workspace}
@@ -190,7 +190,7 @@ export function SidebarHeader(props: SidebarHeaderProps) {
           ]}
         />
       </div>
-      <div className="w-full empty:hidden">
+      <div className="flex w-full min-w-0 empty:hidden">
         <MachineSwitcher />
       </div>
     </div>

package/components/SessionList/SidebarSearch.tsx

@@ -7,7 +7,7 @@ import { sidebarUiActions } from "@/stores/sidebarUi";
 // sessions too.
 export function SidebarSearch({ query }: { query: string }) {
   return (
-    <label className="bg-card text-muted-foreground focus-within:ring-primary/40 flex min-h-11 min-w-[6rem] flex-1 items-center gap-2 rounded-xl px-3 shadow-xs focus-within:ring-2 md:min-h-9 [@media(hover:none)]:md:min-h-11">
+    <label className="bg-card text-muted-foreground focus-within:ring-primary/40 flex min-h-11 min-w-[6rem] flex-[1_1_8rem] items-center gap-2 rounded-xl px-3 shadow-xs focus-within:ring-2 md:min-h-9 [@media(hover:none)]:md:min-h-11">
       <Search className="h-3.5 w-3.5 shrink-0" />
       <input
         type="search"

package/components/SessionList/index.tsx

@@ -168,7 +168,7 @@ export function SessionList({
         }
         pinControls={pinControls}
       />
-      <div className="flex gap-2 px-3 pb-2">
+      <div className="flex flex-wrap gap-2 px-3 pb-2">
         <SidebarSearch query={ui.query} />
         <ProjectFilter
           projects={data.workspaceProjects}