dawlad-paperclip-direction 0.2.1 → 0.2.2

package/dist/manifest.js

@@ -11,7 +11,7 @@ var route = (routeKey, method, path) => ({
 var manifest = {
   id: "dawlad.direction",
   apiVersion: 1,
-  version: "0.2.1",
+  version: "0.2.2",
   displayName: "Direction",
   description: "Horizon, campaigns, milestones and one queue of decisions: where Dawlad is heading and what's in the way.",
   author: "Aly Solamon",

package/dist/ui/index.js

@@ -216,8 +216,31 @@ html:has([data-dx-page="decisions"]) ol[data-slot="breadcrumb-list"]:has(a[href$
 .dx-err { color: var(--dx-red); font-size: 13px; }
 .dx-tabs-line { display: flex; gap: 6px; }
 /* Decisions: documents beside the card */
-.dx-dq.beside { grid-template-columns: 260px minmax(360px, 1fr) minmax(380px, 44%); }
-.dx-dq.beside.wide { grid-template-columns: minmax(340px, .8fr) minmax(480px, 1.6fr); }
+.dx-dq.beside { grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1.05fr); }
+.dx-dq.beside.wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
+.dx-dq.beside.closed { grid-template-columns: 250px minmax(0, 1fr) 44px; }
+.dx-dq-main { min-width: 0; }
+.dx-pane-rail { border-left: 1px solid var(--dx-line); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; position: sticky; top: 0; height: calc(100vh - 60px); }
+.dx-pane-rail-t { writing-mode: vertical-rl; font-size: 12px; color: var(--dx-muted); cursor: pointer; letter-spacing: .04em; }
+.dx-pane-rail-t:hover { color: var(--dx-fg); }
+.dx-menu-anchor { position: relative; flex: none; }
+.dx-menu.right { left: auto; right: 0; }
+.dx-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 340px; max-width: calc(100vw - 32px); background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 10px; box-shadow: 0 8px 28px rgb(0 0 0 / .14); display: flex; flex-direction: column; max-height: 70vh; }
+.dx-menu-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--dx-line); color: var(--dx-muted); }
+.dx-menu-search input { border: 0; outline: none; background: transparent; color: var(--dx-fg); font-size: 13.5px; flex: 1; min-width: 0; }
+.dx-menu-body { overflow: auto; padding: 4px 6px 8px; }
+.dx-menu-label { font-size: 12px; color: var(--dx-muted); padding: 10px 8px 4px; }
+.dx-menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--dx-fg); padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
+.dx-menu-item:hover, .dx-menu-item:focus-visible { background: var(--dx-soft2); outline: none; }
+.dx-menu-item svg { margin-top: 3px; flex: none; }
+.dx-menu-item .t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.dx-menu-item .t > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dx-menu-item .s { font-size: 11.5px; color: var(--dx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dx-menu-item .ck { color: var(--dx-fg); font-size: 12px; }
+.dx-run-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); padding: 12px 0; margin-bottom: 16px; }
+.dx-run-stats b { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dx-run-stats span { font-size: 12px; color: var(--dx-muted); }
+.dx-run-h { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
 .dx-dq.beside.wide .dx-dq-list { display: none; }
 .dx-dq-foot { margin-top: 10px; border-top: 1px solid var(--dx-line); padding: 10px 8px 0; font-size: 12px; color: var(--dx-muted); cursor: pointer; }
 .dx-dq-foot:hover { color: var(--dx-fg); }
@@ -227,7 +250,8 @@ html:has([data-dx-page="decisions"]) ol[data-slot="breadcrumb-list"]:has(a[href$
 .dx-pill.lane-this-week { color: var(--dx-amber); background: var(--dx-amber-bg); border-color: transparent; }
 .dx-pill.lane-needs-work { color: var(--dx-amber); border-color: var(--dx-amber-line); }
 .dx-pane { border-left: 1px solid var(--dx-line); display: flex; flex-direction: column; min-width: 0; position: sticky; top: 0; height: calc(100vh - 60px); background: var(--dx-bg); }
-.dx-pane-tabs { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--dx-line); overflow-x: auto; flex: none; }
+.dx-pane-head { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--dx-line); flex: none; min-width: 0; }
+.dx-pane-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; min-width: 0; flex: 0 1 auto; scrollbar-width: none; }
 .dx-pane-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 9px; border-radius: 6px; font-size: 13px; color: var(--dx-muted); cursor: pointer; max-width: 220px; flex: none; }
 .dx-pane-tab .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dx-pane-tab.on { background: var(--dx-soft2); color: var(--dx-fg); }
@@ -236,7 +260,7 @@ html:has([data-dx-page="decisions"]) ol[data-slot="breadcrumb-list"]:has(a[href$
 .dx-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--dx-muted); cursor: pointer; flex: none; }
 .dx-icon:hover, .dx-icon.on { background: var(--dx-soft2); color: var(--dx-fg); }
 .dx-icon:focus-visible, .dx-pane-tab:focus-visible { outline: 2px solid var(--dx-blue); outline-offset: 1px; }
-.dx-pane-add { border-bottom: 1px solid var(--dx-line); padding: 6px 14px 10px; max-height: 40%; overflow: auto; flex: none; }
+.dx-pane-add-unused { border-bottom: 1px solid var(--dx-line); padding: 6px 14px 10px; max-height: 40%; overflow: auto; flex: none; }
 .dx-pane-pick { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
 .dx-pane-pick:hover { background: var(--dx-soft); }
 .dx-pane-pick .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -249,13 +273,15 @@ html:has([data-dx-page="decisions"]) ol[data-slot="breadcrumb-list"]:has(a[href$
 .dx-convo { padding: 2px 0 12px 22px; display: grid; gap: 12px; }
 .dx-convo-c { border-left: 2px solid var(--dx-line); padding-left: 10px; }
 @media (max-width: 1200px) {
-  .dx-dq.beside, .dx-dq.beside.wide { grid-template-columns: 240px minmax(0, 1fr); }
+  .dx-dq.beside, .dx-dq.beside.wide, .dx-dq.beside.closed { grid-template-columns: 240px minmax(0, 1fr); }
+  .dx-pane-rail { grid-column: 1 / -1; flex-direction: row; height: auto; position: static; border-left: 0; border-top: 1px solid var(--dx-line); padding: 8px 12px; }
+  .dx-pane-rail-t { writing-mode: horizontal-tb; }
   .dx-dq.beside.wide .dx-dq-list { display: flex; }
   .dx-pane { grid-column: 1 / -1; position: static; height: 75vh; border-left: 0; border-top: 1px solid var(--dx-line); }
   .dx-wide-btn { display: none; }
 }
 @media (max-width: 760px) {
-  .dx-dq.beside, .dx-dq.beside.wide { grid-template-columns: minmax(0, 1fr); margin: -16px; }
+  .dx-dq.beside, .dx-dq.beside.wide, .dx-dq.beside.closed { grid-template-columns: minmax(0, 1fr); margin: -16px; }
   .dx-dq-list { border-right: 0; border-bottom: 1px solid var(--dx-line); max-height: 40vh; }
   .dx-dq-main { padding: 16px; }
 }
@@ -2147,7 +2173,7 @@ import { useEffect as useEffect4, useMemo as useMemo4, useState as useState7 } f
 import { MarkdownBlock as MarkdownBlock2, usePluginAction as usePluginAction2, usePluginData as usePluginData2 } from "@paperclipai/plugin-sdk/ui";
 
 // src/ui/beside.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState6 } from "react";
 import { MarkdownBlock } from "@paperclipai/plugin-sdk/ui";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var get = async (path) => {
@@ -2223,30 +2249,76 @@ var Ico = {
   out: /* @__PURE__ */ jsx7("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("path", { d: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" }) }),
   doc: /* @__PURE__ */ jsx7("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("path", { d: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z M14 3v5h5 M8 13h8M8 17h6" }) }),
   file: /* @__PURE__ */ jsx7("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("path", { d: "M4 5h16v14H4z M4 9h16 M9 9v10" }) }),
+  search: /* @__PURE__ */ jsxs7("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx7("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx7("path", { d: "m20 20-3.5-3.5" })
+  ] }),
+  run: /* @__PURE__ */ jsx7("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx7("path", { d: "M3 12h4l3-8 4 16 3-8h4" }) }),
   phone: /* @__PURE__ */ jsx7("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx7("path", { d: "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z" }) })
 };
-function BesidePane({ d, wide, setWide }) {
+function useRuns(issueId, companyId) {
+  const [runs, setRuns] = useState6([]);
+  const [agents, setAgents] = useState6([]);
+  useEffect3(() => {
+    if (!issueId) return;
+    let live = true;
+    get(`/issues/${issueId}/runs`).then((r) => live && setRuns(r.filter((x) => !["queued"].includes(x.status)).slice(0, 4))).catch(() => {
+    });
+    if (companyId) get(`/companies/${companyId}/agents`).then((a) => live && setAgents(a)).catch(() => {
+    });
+    return () => {
+      live = false;
+    };
+  }, [issueId, companyId]);
+  return { runs, agentName: (id) => agents.find((a) => a.id === id)?.name ?? "Agent" };
+}
+var minutes = (a, b) => a && b ? Math.max(1, Math.round((Date.parse(b) - Date.parse(a)) / 6e4)) : null;
+function BesidePane({ d, wide, setWide, onClose }) {
   const go = useGo("decide");
   const { all, issue, linked, loading, error } = useResources(d);
+  const { runs, agentName } = useRuns(d.issueId, issue?.companyId ?? null);
   const [open, setOpen] = useState6([]);
   const [active, setActive] = useState6(null);
-  const [adding, setAdding] = useState6(false);
+  const [menu, setMenu] = useState6(false);
+  const [right, setRight] = useState6(false);
+  const [q, setQ] = useState6("");
   const [asked, setAsked] = useState6(false);
+  const menuRef = useRef2(null);
   useEffect3(() => {
     if (loading) return;
     const have = new Set(all.map((r) => r.key));
     let first = [...linked.docs, ...linked.files].filter((k) => have.has(k));
     if (!first.length) {
       const own = all.filter((r) => r.where === "task");
-      const pick = own.find((r) => r.primary) ?? own.find((r) => r.kind === "file" && /html/.test(r.file?.contentType ?? "")) ?? own.find((r) => r.kind === "doc");
-      first = pick ? [pick.key] : [];
+      const pick2 = own.find((r) => r.primary) ?? own.find((r) => r.kind === "file" && /html/.test(r.file?.contentType ?? "")) ?? own.find((r) => r.kind === "doc");
+      first = pick2 ? [pick2.key] : [];
     }
     setOpen([...new Set(first)]);
     setActive(first[0] ?? null);
   }, [loading, d.key]);
-  const missingLinks = [...linked.docs, ...linked.files].filter((k) => !all.some((r) => r.key === k));
-  const byKey = useMemo3(() => new Map(all.map((r) => [r.key, r])), [all]);
+  useEffect3(() => {
+    if (!menu) return;
+    const away = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setMenu(false);
+    };
+    const esc = (e) => {
+      if (e.key === "Escape") setMenu(false);
+    };
+    document.addEventListener("mousedown", away);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("mousedown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  }, [menu]);
+  const runRes = runs.map((r) => {
+    const id = r.runId ?? r.id ?? "";
+    const took = minutes(r.startedAt ?? r.createdAt, r.finishedAt);
+    return { key: `run:${id}`, kind: "run", title: `${agentName(r.agentId)}'s run ${id.slice(0, 8)}`, sub: `${ago(r.createdAt)} \xB7 ${r.status}${took ? ` \xB7 ${took} min` : ""} \xB7 read, made, changed`, issue, where: "task", run: { ...r, id, agentName: agentName(r.agentId) } };
+  });
+  const byKey = useMemo3(() => new Map([...all, ...runRes].map((r) => [r.key, r])), [all, runs]);
   const cur = active ? byKey.get(active) : void 0;
+  const missingLinks = [...linked.docs, ...linked.files].filter((k) => !all.some((r) => r.key === k));
   const toggle = (k) => {
     if (open.includes(k)) {
       const rest = open.filter((x) => x !== k);
@@ -2257,6 +2329,12 @@ function BesidePane({ d, wide, setWide }) {
       setActive(k);
     }
   };
+  const pick = (k) => {
+    if (!open.includes(k)) setOpen([...open, k]);
+    setActive(k);
+    setMenu(false);
+    setQ("");
+  };
   const askForEvidence = async () => {
     if (!issue) return;
     await fetch(`/api/issues/${issue.id}/comments`, {
@@ -2269,59 +2347,78 @@ function BesidePane({ d, wide, setWide }) {
     });
     setAsked(true);
   };
+  const match = (r) => !q || `${r.title} ${r.sub}`.toLowerCase().includes(q.toLowerCase());
   const groups = [
-    { label: issue ? `This task \xB7 ${issue.identifier}` : "This task", list: all.filter((r) => r.where === "task") },
-    { label: "Parent task", list: all.filter((r) => r.where === "parent") },
-    { label: "Linked from the card", list: all.filter((r) => r.where === "linked") }
-  ].filter((g) => g.list.length);
+    { label: "Open", list: open.map((k) => byKey.get(k)).filter((r) => !!r) },
+    { label: issue ? `Task documents \xB7 ${issue.identifier}` : "Task documents", list: all.filter((r) => r.where === "task" && !open.includes(r.key)) },
+    { label: "Parent task", list: all.filter((r) => r.where === "parent" && !open.includes(r.key)) },
+    { label: "Linked from the card", list: all.filter((r) => r.where === "linked" && !open.includes(r.key)) },
+    { label: "Runs", list: runRes.filter((r) => !open.includes(r.key)) }
+  ].map((g) => ({ ...g, list: g.list.filter(match) })).filter((g) => g.list.length);
+  const icon = (r) => r.kind === "doc" ? Ico.doc : r.kind === "run" ? Ico.run : Ico.file;
+  const talkTo = d.waitingAgentId && d.waitingName && d.waitingName !== "Jev" ? { id: d.waitingAgentId, name: d.waitingName } : null;
   return /* @__PURE__ */ jsxs7("aside", { className: "dx-pane", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "dx-pane-tabs", children: [
-      open.map((k) => {
+    /* @__PURE__ */ jsxs7("div", { className: "dx-pane-head", children: [
+      /* @__PURE__ */ jsx7("div", { className: "dx-pane-tabs", children: open.map((k) => {
         const r = byKey.get(k);
         return r && /* @__PURE__ */ jsxs7("span", { className: `dx-pane-tab${k === active ? " on" : ""}`, onClick: () => setActive(k), title: r.title, children: [
-          r.kind === "doc" ? Ico.doc : Ico.file,
+          icon(r),
           /* @__PURE__ */ jsx7("span", { className: "t", children: r.title }),
           /* @__PURE__ */ jsx7("button", { "aria-label": `Close ${r.title}`, onClick: (e) => {
             e.stopPropagation();
             toggle(k);
           }, children: Ico.x })
         ] }, k);
-      }),
+      }) }),
+      /* @__PURE__ */ jsxs7("div", { className: "dx-menu-anchor", ref: menuRef, children: [
+        /* @__PURE__ */ jsx7("button", { className: `dx-icon${menu ? " on" : ""}`, "aria-label": "Add a tab", "aria-expanded": menu, title: "Add a document, file or run", onClick: (e) => {
+          const x = e.currentTarget.getBoundingClientRect();
+          setRight(x.left + 360 > window.innerWidth - 16);
+          setMenu(!menu);
+        }, children: Ico.plus }),
+        menu && /* @__PURE__ */ jsxs7("div", { className: `dx-menu${right ? " right" : ""}`, role: "menu", children: [
+          /* @__PURE__ */ jsxs7("label", { className: "dx-menu-search", children: [
+            Ico.search,
+            /* @__PURE__ */ jsx7("input", { autoFocus: true, placeholder: "Search tabs and resources\u2026", value: q, onChange: (e) => setQ(e.target.value) })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "dx-menu-body", children: [
+            groups.map((g) => /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx7("div", { className: "dx-menu-label", children: g.label }),
+              g.list.map((r) => /* @__PURE__ */ jsxs7("button", { className: "dx-menu-item", role: "menuitem", onClick: () => g.label === "Open" ? (setActive(r.key), setMenu(false)) : pick(r.key), children: [
+                icon(r),
+                /* @__PURE__ */ jsxs7("span", { className: "t", children: [
+                  /* @__PURE__ */ jsx7("span", { children: r.title }),
+                  /* @__PURE__ */ jsx7("span", { className: "s", children: r.sub })
+                ] }),
+                g.label === "Open" && /* @__PURE__ */ jsx7("span", { className: "ck", children: "\u2713" })
+              ] }, r.key))
+            ] }, g.label)),
+            (!q || /talk|ask|call|jev/i.test(q) || talkTo && talkTo.name.toLowerCase().includes(q.toLowerCase())) && /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx7("div", { className: "dx-menu-label", children: "Talk" }),
+              talkTo && /* @__PURE__ */ jsx7(TalkMenuItem, { d, agentId: talkTo.id, label: `Talk it through with ${talkTo.name}`, sub: "a call \xB7 knows this decision, its documents and runs", onDone: () => setMenu(false) }),
+              /* @__PURE__ */ jsx7(TalkMenuItem, { d, agentId: null, label: "Ask Jev about this decision", sub: "a call \xB7 the bigger picture", onDone: () => setMenu(false) })
+            ] }),
+            !groups.length && q && /* @__PURE__ */ jsxs7("div", { className: "dx-muted dx-small", style: { padding: "8px 10px" }, children: [
+              'Nothing matches "',
+              q,
+              '".'
+            ] })
+          ] })
+        ] })
+      ] }),
       /* @__PURE__ */ jsx7("span", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsx7("button", { className: `dx-icon${adding ? " on" : ""}`, "aria-label": "Add a tab", title: "Add a document or file", onClick: () => setAdding(!adding), children: Ico.plus }),
       /* @__PURE__ */ jsx7("button", { className: "dx-icon dx-wide-btn", "aria-label": wide ? "Narrow the panel" : "Widen the panel", title: wide ? "Narrow" : "Widen", onClick: () => setWide(!wide), children: wide ? Ico.narrow : Ico.wide }),
-      cur && /* @__PURE__ */ jsx7("a", { className: "dx-icon", title: "Open in the task", ...go.hostLink(cur.kind === "doc" ? `/issues/${cur.issue.identifier}#document-${cur.doc.key}` : `/issues/${cur.issue.identifier}`), children: Ico.out })
-    ] }),
-    adding && /* @__PURE__ */ jsxs7("div", { className: "dx-pane-add", children: [
-      groups.map((g) => /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx7("div", { className: "dx-group-label", style: { margin: "6px 0 2px" }, children: g.label }),
-        g.list.map((r) => /* @__PURE__ */ jsxs7("div", { className: "dx-pane-pick", onClick: () => {
-          toggle(r.key);
-          setAdding(false);
-        }, children: [
-          r.kind === "doc" ? Ico.doc : Ico.file,
-          /* @__PURE__ */ jsx7("span", { className: "t", children: r.title }),
-          /* @__PURE__ */ jsx7("span", { className: "dx-muted dx-xs", children: r.sub }),
-          open.includes(r.key) && /* @__PURE__ */ jsx7("span", { className: "dx-xs", children: "\u2713" })
-        ] }, r.key))
-      ] }, g.label)),
-      !groups.length && /* @__PURE__ */ jsx7("div", { className: "dx-muted dx-small", children: "Nothing on this task or its parent yet." })
+      cur && /* @__PURE__ */ jsx7("a", { className: "dx-icon", title: "Open in the task", ...go.hostLink(cur.kind === "doc" ? `/issues/${cur.issue.identifier}#document-${cur.doc.key}` : cur.kind === "run" ? `/agents/${cur.run.agentId}/runs/${cur.run.id}` : `/issues/${cur.issue.identifier}`), children: Ico.out }),
+      /* @__PURE__ */ jsx7("button", { className: "dx-icon", "aria-label": "Hide the panel", title: "Hide the panel", onClick: onClose, children: Ico.x })
     ] }),
     /* @__PURE__ */ jsxs7("div", { className: `dx-pane-body${cur?.kind === "file" && /html|pdf/.test(cur.file.contentType) ? " flush" : ""}`, children: [
       loading ? /* @__PURE__ */ jsx7("div", { className: "dx-muted dx-small", children: "Loading what this rests on\u2026" }) : error ? /* @__PURE__ */ jsxs7("div", { className: "dx-err", children: [
         "Couldn't load the task's documents: ",
         error
-      ] }) : cur ? /* @__PURE__ */ jsx7(Viewer, { r: cur }) : /* @__PURE__ */ jsxs7("div", { className: "dx-pane-empty", children: [
-        /* @__PURE__ */ jsxs7("b", { children: [
-          "Nothing is attached to ",
-          issue?.identifier ?? "this decision",
-          "."
-        ] }),
-        /* @__PURE__ */ jsxs7("span", { className: "dx-muted dx-small", children: [
-          "The card should link the documents it rests on. ",
-          d.waitingName ? `${d.waitingName} gets a note on the task.` : ""
-        ] }),
-        issue && (asked ? /* @__PURE__ */ jsx7("span", { className: "dx-small", children: "Asked. The agent wakes with your note." }) : /* @__PURE__ */ jsxs7("button", { className: "dx-btn", onClick: askForEvidence, children: [
+      ] }) : cur ? cur.kind === "run" ? /* @__PURE__ */ jsx7(RunView, { r: cur }) : /* @__PURE__ */ jsx7(Viewer, { r: cur }) : /* @__PURE__ */ jsxs7("div", { className: "dx-pane-empty", children: [
+        /* @__PURE__ */ jsx7("b", { children: "Nothing is open." }),
+        /* @__PURE__ */ jsx7("span", { className: "dx-muted dx-small", children: all.length ? "Use + to open a document, file or run from this task." : `Nothing is attached to ${issue?.identifier ?? "this decision"}. The card should link the documents it rests on.` }),
+        !all.length && issue && (asked ? /* @__PURE__ */ jsx7("span", { className: "dx-small", children: "Asked. The agent wakes with your note." }) : /* @__PURE__ */ jsxs7("button", { className: "dx-btn", onClick: askForEvidence, children: [
           "Ask ",
           d.waitingName ?? "the agent",
           " to attach the evidence"
@@ -2339,6 +2436,86 @@ function BesidePane({ d, wide, setWide }) {
     ] })
   ] });
 }
+function PaneRail({ onOpen }) {
+  return /* @__PURE__ */ jsxs7("aside", { className: "dx-pane-rail", children: [
+    /* @__PURE__ */ jsx7("button", { className: "dx-icon", "aria-label": "Show the documents panel", title: "Show documents, files and runs", onClick: onOpen, children: Ico.doc }),
+    /* @__PURE__ */ jsx7("span", { className: "dx-pane-rail-t", onClick: onOpen, children: "Documents" })
+  ] });
+}
+function TalkMenuItem({ d, agentId, label, sub, onDone }) {
+  const start = useTalk(d, agentId);
+  return /* @__PURE__ */ jsxs7("button", { className: "dx-menu-item", role: "menuitem", onClick: () => {
+    void start();
+    onDone();
+  }, children: [
+    Ico.phone,
+    /* @__PURE__ */ jsxs7("span", { className: "t", children: [
+      /* @__PURE__ */ jsx7("span", { children: label }),
+      /* @__PURE__ */ jsx7("span", { className: "s", children: sub })
+    ] })
+  ] });
+}
+function RunView({ r }) {
+  const run = r.run;
+  const [detail, setDetail] = useState6(null);
+  const [posted, setPosted] = useState6(null);
+  const go = useGo("decide");
+  useEffect3(() => {
+    let live = true;
+    get(`/heartbeat-runs/${run.id}`).then((x) => live && setDetail(x)).catch(() => {
+    });
+    get(`/issues/${r.issue.id}/comments`).then((c) => live && setPosted(c.filter((x) => x.createdByRunId === run.id))).catch(() => live && setPosted([]));
+    return () => {
+      live = false;
+    };
+  }, [run.id]);
+  const u = detail?.usageJson ?? null;
+  const took = minutes(detail?.startedAt ?? run.createdAt, detail?.finishedAt ?? run.finishedAt);
+  const k = (n) => n == null ? "\u2014" : n >= 1e3 ? `${Math.round(n / 1e3)}k` : String(n);
+  const verb = run.status === "succeeded" ? "finished" : run.status;
+  return /* @__PURE__ */ jsxs7("article", { children: [
+    /* @__PURE__ */ jsxs7("h2", { style: { fontSize: 18, fontWeight: 600, margin: "0 0 2px" }, children: [
+      run.agentName,
+      "'s run ",
+      verb,
+      took ? ` in ${took} min` : ""
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "dx-muted dx-xs", style: { marginBottom: 14 }, children: [
+      "Run ",
+      run.id.slice(0, 8),
+      " \xB7 ",
+      new Date(run.createdAt).toLocaleString(),
+      run.errorCode ? ` \xB7 ${run.errorCode}` : ""
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "dx-run-stats", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx7("b", { children: u?.model ?? "\u2014" }),
+        /* @__PURE__ */ jsx7("span", { children: "model" })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx7("b", { children: k((u?.inputTokens ?? 0) + (u?.cachedInputTokens ?? 0) || void 0) }),
+        /* @__PURE__ */ jsx7("span", { children: "tokens read" })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx7("b", { children: k(u?.outputTokens) }),
+        /* @__PURE__ */ jsx7("span", { children: "tokens written" })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx7("b", { children: u?.costUsd != null ? `$${u.costUsd.toFixed(2)}` : u?.billingType === "subscription_included" ? "$0" : "\u2014" }),
+        /* @__PURE__ */ jsx7("span", { children: u?.billingType === "subscription_included" ? "on your subscription" : "cost" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("h3", { className: "dx-run-h", children: "What it posted" }),
+    posted == null ? /* @__PURE__ */ jsx7("div", { className: "dx-muted dx-small", children: "Loading\u2026" }) : posted.length ? posted.map((c) => /* @__PURE__ */ jsx7("div", { className: "dx-doc", children: /* @__PURE__ */ jsx7(MarkdownBlock, { content: c.body }) }, c.id)) : /* @__PURE__ */ jsxs7("div", { className: "dx-muted dx-small", children: [
+      "Nothing on this task from this run.",
+      run.status !== "succeeded" ? " It did not finish." : ""
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "dx-row", style: { gap: 8, marginTop: 16 }, children: /* @__PURE__ */ jsxs7("a", { className: "dx-btn", ...go.hostLink(`/agents/${run.agentId}/runs/${run.id}`), children: [
+      Ico.run,
+      " Open the full log"
+    ] }) })
+  ] });
+}
 function Viewer({ r }) {
   if (r.kind === "doc") {
     const doc = r.doc;
@@ -2479,24 +2656,29 @@ function askDock(timeoutMs = 250) {
     b.postMessage({ type: "ping" });
   });
 }
-function TalkButton({ d, agentId, label }) {
+function useTalk(d, agentId) {
   const go = useGo("decide");
-  const [busy, setBusy] = useState6(false);
-  const start = async () => {
-    setBusy(true);
+  return async () => {
     const decision = { issueId: d.issueId, interactionId: d.source === "interaction" ? d.id : null, approvalId: d.source === "approval" ? d.id : null };
     const m = { type: "start", ...agentId ? { entityType: "agent", entityId: agentId } : {}, path: d.identifier ? `/issues/${d.identifier}` : void 0, decision };
     if (await askDock()) {
       const b = new BroadcastChannel(BUS);
       b.postMessage(m);
       b.close();
-    } else {
-      const q = new URLSearchParams({ start: "1", ...agentId ? { entityType: "agent", entityId: agentId } : {}, ...d.issueId ? { decisionIssue: d.issueId } : {}, ...decision.interactionId ? { decisionInteraction: decision.interactionId } : {}, ...decision.approvalId ? { decisionApproval: decision.approvalId } : {} });
-      go.host(`/call?${q}`);
+      return;
     }
-    setTimeout(() => setBusy(false), 1500);
+    const q = new URLSearchParams({ start: "1", ...agentId ? { entityType: "agent", entityId: agentId } : {}, ...d.issueId ? { decisionIssue: d.issueId } : {}, ...decision.interactionId ? { decisionInteraction: decision.interactionId } : {}, ...decision.approvalId ? { decisionApproval: decision.approvalId } : {} });
+    go.host(`/call?${q}`);
   };
-  return /* @__PURE__ */ jsxs7("button", { className: "dx-btn", disabled: busy, onClick: start, children: [
+}
+function TalkButton({ d, agentId, label }) {
+  const start = useTalk(d, agentId);
+  const [busy, setBusy] = useState6(false);
+  return /* @__PURE__ */ jsxs7("button", { className: "dx-btn", disabled: busy, onClick: async () => {
+    setBusy(true);
+    await start();
+    setTimeout(() => setBusy(false), 1500);
+  }, children: [
     Ico.phone,
     " ",
     label
@@ -2527,6 +2709,20 @@ function DecisionsPage({ companyId }) {
   const [filter, setFilter] = useState7("waiting");
   const [answered, setAnswered] = useState7([]);
   const [wide, setWide] = useState7(false);
+  const [pane, setPaneState] = useState7(() => {
+    try {
+      return localStorage.getItem("dx-decisions-pane") !== "closed";
+    } catch {
+      return true;
+    }
+  });
+  const setPane = (v) => {
+    setPaneState(v);
+    try {
+      localStorage.setItem("dx-decisions-pane", v ? "open" : "closed");
+    } catch {
+    }
+  };
   const alarms = useAlarms(companyId);
   const forget = usePluginAction2("refresh-decisions");
   const items = (data?.items ?? []).filter((x) => !answered.includes(x.key)).filter((x) => !q || `${x.title} ${x.identifier} ${x.kindLabel}`.toLowerCase().includes(q.toLowerCase()));
@@ -2537,7 +2733,7 @@ function DecisionsPage({ companyId }) {
   if (error) return /* @__PURE__ */ jsx8(ErrorBox, { error });
   const groups = ["now", "this week", "whenever", "needs work"].map((b) => ({ b, list: items.filter((x) => (x.lane ?? (x.bucket === "today" ? "now" : x.bucket)) === b) }));
   const pick = (k) => go.to(`/${encodeURIComponent(k)}`);
-  return /* @__PURE__ */ jsxs8("div", { className: `dx-dq beside${wide ? " wide" : ""}`, children: [
+  return /* @__PURE__ */ jsxs8("div", { className: `dx-dq beside${pane ? wide ? " wide" : "" : " closed"}`, children: [
     /* @__PURE__ */ jsxs8("div", { className: "dx-dq-list", children: [
       /* @__PURE__ */ jsxs8("div", { className: "dx-row", style: { padding: "0 4px 10px" }, children: [
         /* @__PURE__ */ jsx8("b", { style: { fontSize: 15 }, children: "Queue" }),
@@ -2580,7 +2776,10 @@ function DecisionsPage({ companyId }) {
       setAnswered((a) => [...a, sel.key]);
       void forget({}).then(() => refresh());
     } }, sel.key) : /* @__PURE__ */ jsx8("div", { className: "dx-empty", style: { marginTop: 40 }, children: "Nothing is waiting on you. New decisions from the team land here." }) }),
-    sel && /* @__PURE__ */ jsx8(BesidePane, { d: sel, wide, setWide }, sel.key)
+    sel && (pane ? /* @__PURE__ */ jsx8(BesidePane, { d: sel, wide, setWide, onClose: () => {
+      setPane(false);
+      setWide(false);
+    } }, sel.key) : /* @__PURE__ */ jsx8(PaneRail, { onOpen: () => setPane(true) }))
   ] });
 }
 function Decision({ d, companyId, pos, total, onPrev, onNext, onDone }) {
@@ -3221,6 +3420,13 @@ function DecisionsLink({ context }) {
     const t = setInterval(refresh, 6e4);
     return () => clearInterval(t);
   }, [refresh]);
+  useEffect5(() => {
+    if (document.getElementById("dx-one-decisions")) return;
+    const st = document.createElement("style");
+    st.id = "dx-one-decisions";
+    st.textContent = 'aside nav a[href$="/decisions"] { display: none !important; }';
+    document.head.appendChild(st);
+  }, []);
   return /* @__PURE__ */ jsx9(SideLink, { base: "decide", label: "Decisions", icon: Icon.list, badge: data?.items.length ?? null });
 }
 function CampaignTab({ context }) {