@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.5

package/dist/ui/panel-fleet.js

@@ -5,7 +5,7 @@
 // Opening a tab reads its list: a person's navigation, so it counts as use, as the old tab click did (#1374 — no timer
 // here re-reads anything). Every read is under the navigation's lease: a list that arrives after the person moved on
 // is dropped (#1408 §4).
-import { html, useEffect, useRef, useState } from "/assets/app-html.js";
+import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { t, register, lang } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
@@ -16,6 +16,7 @@ import { RuntimePicker, AgentDraftAssistant, NativeAgendToolsHint, tr } from "./
 import { CliPicker, cliLabel as productLabel } from "./cli-picker.js";
 import { useWindowsCliCatalog, WindowsCliDiscoveryStatus, detectionText } from "./windows-cli-catalog.js";
 import { useRuntimeCatalog } from "./runtime-catalog.js";
+import { ClaudeAccountSelect } from "./credential-profile-select.js";
 import { chatPath, fleetPath, FLEET_TABS, rememberFleetTab } from "/assets/app-route.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
@@ -136,6 +137,62 @@ function useLoad(lease, path, version) {
   return state;
 }
 
+/**
+ * M-2542: whether the tab row goes in the header. Not on a phone (app.css's breakpoint — the query app-shell's narrow()
+ * asks). On a desktop only when the header's row holds everything at its natural width: the title (with any host
+ * memory warning), all six tabs and the header's tools. Otherwise the tabs are the row under the header, as before —
+ * never clipped, never squeezed. The natural widths are the same in either place, so the answer does not flip-flop.
+ */
+const NARROW = "(max-width: 899px)";
+export function tabsFit(m) { return m.title + m.tabs + m.tools + m.gaps <= m.room + 0.5; }
+export function measureTabsFit(root) {
+  const head = root?.querySelector(".panel-head");
+  const title = head?.querySelector(".panel-title");
+  const nav = root?.querySelector("nav[data-trust='panel-navigation']");
+  if (!head || !title || !nav || typeof getComputedStyle !== "function") return true;
+  const w = (el) => el.getBoundingClientRect().width || 0;
+  const natural = (el) => Math.max(w(el), el.scrollWidth || 0);   // an ellipsised title still counts its whole text
+  const px = (v) => parseFloat(v) || 0;
+  const sum = (els, f) => els.reduce((n, el) => n + f(el), 0);
+  const hs = getComputedStyle(head);
+  const parts = [...title.children], items = [...nav.children];
+  const others = [...head.children].filter(el => el !== title && el !== nav && w(el) > 0);   // tools, sidebar buttons
+  return tabsFit({
+    room: w(head) - px(hs.paddingLeft) - px(hs.paddingRight),
+    // The warning is deliberately capped; its hidden process text must not keep the tabs on a separate row.
+    title: sum(parts, el => el.querySelector?.(".host-mem") ? w(el) : natural(el)) + px(getComputedStyle(title).columnGap) * Math.max(0, parts.length - 1),
+    tabs: sum(items, w) + px(getComputedStyle(nav).columnGap) * Math.max(0, items.length - 1),
+    tools: sum(others, w),
+    gaps: px(hs.columnGap) * (others.length + 1),
+  });
+}
+function useTabsInHeader(rootRef) {
+  const mq = () => (typeof matchMedia === "function" ? matchMedia(NARROW) : null);
+  const [inHeader, setInHeader] = useState(() => !(mq()?.matches ?? false));
+  const check = () => setInHeader(!(mq()?.matches ?? false) && measureTabsFit(rootRef.current));
+  useLayoutEffect(() => {
+    check();   // every render: the title's warning can come and go
+    // A lazy panel can meet app.css cached before this fix. Re-link once, using the existing same-origin policy.
+    const warning = rootRef.current?.querySelector(".host-mem");
+    if (!warning || typeof getComputedStyle !== "function" || !document.head || document.getElementById("fleet-memory-css")) return;
+    const rev = getComputedStyle(warning).getPropertyValue?.("--fleet-memory-header");
+    if (rev === undefined || rev.trim() === "1") return;
+    const link = document.createElement("link"); link.id = "fleet-memory-css"; link.rel = "stylesheet";
+    link.href = "/assets/app.css?fleet-memory=1";
+    link.addEventListener("load", () => { if (rootRef.current) check(); }, { once: true });
+    document.head.appendChild(link);
+  });
+  useEffect(() => {
+    const m = mq();
+    m?.addEventListener?.("change", check);
+    const ro = typeof ResizeObserver === "function" ? new ResizeObserver(check) : null;
+    if (ro && rootRef.current) ro.observe(rootRef.current);
+    document.fonts?.ready?.then(check, () => {});
+    return () => { m?.removeEventListener?.("change", check); ro?.disconnect(); };
+  }, []);
+  return inHeader;
+}
+
 export function FleetPanel({ route, navKey }) {
   const lease = useLease(navKey);
   const tab = route.tab;
@@ -146,11 +203,19 @@ export function FleetPanel({ route, navKey }) {
   const { hostMemory, hostMemoryTop } = useStore(appStore);
   // #2015: and which processes hold the most, and whose — text only (never chat, #1712).
   const top = hostMemory && hostMemoryTop?.length ? t("fleet.hostMemory_top", hostMemoryTop.map(memoryHogText).join(" · ")) : "";
-  const sub = hostMemory ? html`<span class=${`status host-mem ${hostMemory}`} role="status"><span class=${`dot ${hostMemory === "critical" ? "bad" : "warn"}`} aria-hidden="true"></span>${t(`fleet.hostMemory_${hostMemory}`)}${top ? html`<span class="host-mem-top">${top}</span>` : null}</span>` : null;
-  return html`<div data-effect-panel="fleet" class="panel p-fleet">
-    <${PanelHeader} title=${t("fleet.title")} sub=${sub}><${DocsLink} /><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
-    <nav data-trust="panel-navigation" class="seg" aria-label=${t("fleet.title")}>${FLEET_TABS.map(k => html`<a key=${k} href=${fleetPath(k)} class=${`seg-item${k === tab ? " active" : ""}`}
-      aria-current=${k === tab ? "page" : undefined}><${Icon} name=${ICONS[k]} size=${16} /><span>${t(`fleet.${k}`)}</span></a>`)}</nav>
+  const sub = hostMemory ? html`<span class=${`status host-mem ${hostMemory}`} role="status"><span class=${`dot ${hostMemory === "critical" ? "bad" : "warn"}`} aria-hidden="true"></span>${t(`fleet.hostMemory_${hostMemory}`)}${top ? html`<span class="host-mem-top" title=${top}>${top}</span>` : null}</span>` : null;
+  const root = useRef(null);
+  const wide = useTabsInHeader(root);
+  const tabs = (cls) => html`<nav data-trust="panel-navigation" class=${cls} aria-label=${t("fleet.title")}>${FLEET_TABS.map(k => html`<a key=${k} href=${fleetPath(k)} class=${`seg-item${k === tab ? " active" : ""}`}
+    aria-current=${k === tab ? "page" : undefined}><${Icon} name=${ICONS[k]} size=${16} /><span>${t(`fleet.${k}`)}</span></a>`)}</nav>`;
+  return html`<div ref=${root} data-effect-panel="fleet" class="panel p-fleet">
+    ${/* M-2542: the tabs share the title row (PanelHeader's nav slot, as the instance tabs do) when everything fits
+         there (useTabsInHeader), saving a line; otherwise — a phone, a narrow window, a long host memory warning — they
+         stay the row under the header they always were (.seg, the same markup as before). Not ".seg" in the header,
+         and chosen here rather than by CSS: a previous release's app.css, cached in an open tab, has no rule for the
+         header slot — this way either stylesheet lays both out (smoke-2542 SKEW). */ ""}
+    <${PanelHeader} title=${t("fleet.title")} sub=${sub} nav=${wide ? tabs("fleet-tabs") : null}><${DocsLink} /><${HeaderTools} navKey=${navKey} /></${PanelHeader}>
+    ${wide ? null : tabs("seg")}
     <div data-trust="panel-content" class="panel-body"><div class=${`col${tab === "tasks" || tab === "org" || tab === "cache" || tab === "usage" ? " col-wide" : ""}`}><${Body} lease=${lease} /></div></div>
   </div>`;
 }
@@ -428,7 +493,11 @@ export function CreateInstanceDialog({ onClose }) {
   const [runtime,setRuntime] = useState("");
   const [machineId,setMachineId] = useState("");
   const [nativeAdapter,setNativeAdapter]=useState("exec");
+  // A Claude account on the chosen computer, by name ("" = that computer's own sign-in); never a folder.
+  const [credentialProfile,setCredentialProfile]=useState("");
   const machineCatalog = useRuntimeCatalog();
+  // A computer paired a moment ago must show up: ask for a fresh list whenever the dialog opens (the hook then keeps polling).
+  useEffect(() => { void machineCatalog.refresh(); },[]);
   const machines = machineCatalog.data?.machines || [];
   const machine = machines.find(item => item.id === machineId);
   const [step,setStep] = useState(1), [created,setCreated] = useState(null);
@@ -469,7 +538,7 @@ export function CreateInstanceDialog({ onClose }) {
     const nextInventory = nextMachineId ? machines.find(item => item.id === nextMachineId)?.inventory : discovery.data;
     const { sandbox: savedFileAccess } = saved || {};
     setRuntime(value);
-    setMachineId(nextMachineId);
+    setMachineId(nextMachineId);setCredentialProfile("");
     setF(saved?.form || {dir:"",topic:"",desc:"",prompt:"",tags:"",branch:"",model:"",backend:value === "windows" ? nextInventory?.clis?.find(b => b.path && b.runnable)?.id || "codex" : backends?.find(b => b.installed && !b.deprecated && !b.fallback)?.name || ""});
     setSandbox(savedFileAccess || "read-only");setNativeAdapter(saved?.nativeAdapter||"exec");
   };
@@ -488,7 +557,7 @@ export function CreateInstanceDialog({ onClose }) {
     if (windows) {
       const name = f.topic.trim() || f.dir.trim().replace(/[\\/]+$/, "").split(/[\\/]/).pop();
       if (!name) { toast(tr("required"),false); return null; }
-      return {runtime:"windows",...(nativeAdapter==="pane"?{native_adapter:"pane"}:{}),...(machineId ? {machineId} : {}),topic_name:name,backend:f.backend,...(f.model.trim() ? {model:f.model.trim()} : {}),...(f.dir.trim() ? {directory:f.dir.trim()} : {}),description:f.desc.trim(),systemPrompt:f.prompt.trim(),sandbox};
+      return {runtime:"windows",...(nativeAdapter==="pane"?{native_adapter:"pane"}:{}),...(machineId ? {machineId} : {}),...(machineId && f.backend === "claude-code" && credentialProfile ? {credentialProfile} : {}),topic_name:name,backend:f.backend,...(f.model.trim() ? {model:f.model.trim()} : {}),...(f.dir.trim() ? {directory:f.dir.trim()} : {}),description:f.desc.trim(),systemPrompt:f.prompt.trim(),sandbox};
     }
     if (!f.dir.trim() && !f.topic.trim()) { toast(t("fleet.topicRequired"), false); return null; }
     const body = {};
@@ -511,9 +580,10 @@ export function CreateInstanceDialog({ onClose }) {
   const runtimeLabel = machineId ? `${machine?.name || machineId} · ${machine?.platform || tr(runtime)}` : runtime ? tr(runtime) : "";
   const cliLabel = productLabel(f.backend) || `${t("fleet.fleetDefault")} (${productLabel(defaultBackend)})`;
   const backendField = windows ? html`<div class="field"><div class="cli-discovery-heading"><span>${tr("backend")}</span>${native && !machineId ? html`<button type="button" class="btn btn-ghost btn-sm" disabled=${discovery.loading} onClick=${discovery.refresh}><${Icon} name="restart" size=${14} />${detectionText("refresh")}</button>` : null}</div>
-    <div aria-busy=${!machineId && discovery.loading ? "true" : "false"}>${native ? html`<${CliPicker} label=${tr("backend")} value=${f.backend} choices=${nativeChoices} onChange=${value => setF(x => ({...x,backend:value,model:""}))} disabled=${!nativeChoices.length || !!machineId && machine?.status !== "online"} />` : null}</div>
+    <div aria-busy=${!machineId && discovery.loading ? "true" : "false"}>${native ? html`<${CliPicker} label=${tr("backend")} value=${f.backend} choices=${nativeChoices} onChange=${value => { setCredentialProfile(""); setF(x => ({...x,backend:value,model:""})); }} disabled=${!nativeChoices.length || !!machineId && machine?.status !== "online"} />` : null}</div>
     ${machineId ? html`<p class="note">${tr(!nativeChoices.length ? "noRemoteCli" : "remotePolicy")}</p>${machine?.inventoryUpdatedAt ? html`<p class="note">${t("runtime.inventoryAt",new Date(machine.inventoryUpdatedAt).toLocaleString())}</p>` : null}` : html`<${WindowsCliDiscoveryStatus} state=${discovery} />`}
-    ${!machineId && native && !discovery.loading && !discovery.error ? html`<p class="note">${!nativeChoices.length ? tr("noCli") : tr("nativeHint")}</p>` : null}</div>`
+    ${!machineId && native && !discovery.loading && !discovery.error ? html`<p class="note">${!nativeChoices.length ? tr("noCli") : tr("nativeHint")}</p>` : null}
+    ${machineId ? html`<${ClaudeAccountSelect} id="native-create-claude-account" machine=${machine} backend=${f.backend} value=${credentialProfile} onChange=${setCredentialProfile} disabled=${machine?.status !== "online"} />` : null}</div>`
     : field(tr("backend"),backends ? html`<${CliPicker} label=${tr("backend")} value=${f.backend} choices=${[{value:"",label:t("fleet.fleetDefault")},...backends.filter(b => backendState(b) !== "not_installed" && !b.deprecated).map(b => ({value:b.name,label:productLabel(b.name),disabled:backendBlocked(b),description:backendNote(b)}))]} onChange=${value => setF(x => ({...x,backend:value,model:""}))} />` : html`<div role="status" aria-busy="true"><${Skeleton} lines=${1} /><span class="note">${tr("loadingClis")}</span></div>`);
   const actions = ({busy,go}) => step === 3 ? html`<button type="button" class="btn" onClick=${onClose}>${tr("finish")}</button><button type="button" class="btn btn-primary" onClick=${() => { onClose(); navigate(destination || "/settings/agents"); }}>${tr(destination ? "openChat" : "viewAgents")}<${Icon} name="forward" size=${16} /></button>`
     : html`<button type="button" class="btn" disabled=${busy || assistBusy} onClick=${step === 1 ? onClose : () => setStep(1)}>${step === 1 ? t("fleet.cancel") : tr("back")}</button>
@@ -524,9 +594,9 @@ export function CreateInstanceDialog({ onClose }) {
     <div class="agent-create-wizard" data-step=${step}>
     <ol class="agent-create-steps" aria-label=${tr("progress")}>${["runtimeStep","configureStep","doneStep"].map((label,index) => html`<li key=${label} class=${index+1 === step ? "current" : index+1 < step ? "complete" : ""} aria-current=${index+1 === step ? "step" : undefined}><span class="agent-create-step-number">${index+1 < step ? html`<${Icon} name="check" size=${13} />` : index+1}</span><span>${tr(label)}</span></li>`)}</ol>
     ${step === 1 ? html`<section class="agent-create-stage"><h3 ref=${heading} tabindex="-1">${tr("where")}</h3><p class="note">${tr("runtimeLead")}</p>
-      <${RuntimePicker} value=${runtime} onChange=${chooseRuntime} windowsEnabled=${windowsCli} legend=${tr("environment")} machineId=${machineId} machines=${machines} onMachineChange=${id => chooseRuntime("windows",id)} />
+      <${RuntimePicker} value=${runtime} onChange=${chooseRuntime} windowsEnabled=${windowsCli} legend=${tr("environment")} machineId=${machineId} machines=${machines} onMachineChange=${id => chooseRuntime("windows",id)} onRefresh=${machineCatalog.refresh} loaded=${!!machineCatalog.data && !machineCatalog.error} />
       ${machineCatalog.loading && !machineCatalog.data ? html`<p class="note" role="status">${tr("machineLoading")}</p>` : null}
-      ${machineCatalog.error ? html`<p class="note" role="alert">${tr("machineFailed")} <button type="button" class="btn btn-ghost btn-sm" onClick=${machineCatalog.refresh}>${tr("machineRetry")}</button></p>` : null}
+      ${machineCatalog.error ? html`<p class="note" role="alert">${tr("machineFailed")}</p>` : null}
       <a class="note runtime-manage-link" href="/settings/runtimes">${tr("manage")}</a>
       ${runtime ? html`<div class="agent-create-cli">${backendField}</div>` : null}
     </section>` : step === 2 ? html`<section class="agent-create-stage"><h3 ref=${heading} tabindex="-1">${tr("configureStep")}</h3><p class="note">${tr("configureLead")}</p>