dsh-mobile-plugin 0.5.27 → 0.5.29

package/extensions/magpie/plugins/sessions/settings.js

@@ -0,0 +1,100 @@
+// The sessions plugin's part of Settings: General's Session terminal and
+// Privacy's Agents' session history. Run after app.js, whose helpers it
+// shares (el, segs, svg, api, writingPrefs, savePrefs, openProtoMenu,
+// status), and before start.js draws Settings; drawn whether the plugin is
+// on or off.
+
+function renderSessionTerminal(s, keep) {
+  const row = $("#sessionTerminalRow");
+  // a Mac's, and Windows' and Linux's when a terminal is found there
+  const mac = document.body.classList.contains("mac");
+  const apps = [...(s.terminalApps || [])];
+  row.hidden = web || !mac && !apps.length;
+  if (row.hidden) return;
+  const select = $("#sessionTerminalSelect");
+  if (mac && !apps.some((app) => app.id === "com.apple.Terminal")) apps.unshift({ id: "com.apple.Terminal", name: "Terminal" });
+  const chosen = s.sessionTerminal || "system";
+  // a default that is not a terminal opens Terminal, as the server does
+  const defaultApp = apps.find((app) => app.id === s.terminalDefault) || apps.find((app) => app.id === "com.apple.Terminal") || apps[0];
+  const options = [{ id: "system", name: t("System default ({name})", { name: defaultApp.name }) }];
+  for (const app of apps) {
+    if (app.id === defaultApp.id && app.id !== chosen) continue;
+    options.push({ id: app.id, name: app.id === defaultApp.id ? t("{name} (fixed)", { name: app.name }) : app.name });
+  }
+  if (!options.some((app) => app.id === chosen)) {
+    options.push({ id: chosen, name: t("Unavailable app ({id})", { id: chosen }) });
+  }
+  // the app's own menu, not a native select
+  select.dataset.value = chosen;
+  select.replaceChildren(el("span", "", options.find((app) => app.id === chosen).name), svg(CHEV, 11, 1.6));
+  select.onclick = (e) => {
+    e.stopPropagation();
+    if (select.classList.contains("open")) return closeProtoMenu();
+    openProtoMenu(select, options.map((app) => ({ v: app.id, name: app.name, note: "", literalName: true })), chosen, (v) => {
+      if (v === chosen) return;
+      // drawn at once; the save draws it again with what was kept
+      select.dataset.value = v;
+      select.firstChild.textContent = options.find((app) => app.id === v).name;
+      savePrefs({ ...keep, sessionTerminal: v === "system" ? "" : v });
+    }, "Session terminal", "sess-menu");
+  };
+}
+
+// renderSessionReads: which agents' own session history magpie reads
+// (RustCats on X: a new install showed every agent's sessions before
+// anyone agreed). The Sessions page asks once; here it changes later.
+// "Agents found later" is whether an agent with no row of its own is
+// read, and drawn from the settings at once; each agent found on this
+// computer has a row of its own, read from /api/sessions/reads when the
+// Privacy part is shown (loadSessionReads).
+let sessionReads = null; // /api/sessions/reads, as last read
+let sessionReadsSeq = 0;
+function renderSessionReads(s) {
+  const box = $("#sessionReadsList");
+  const r = sessionReads || { asked: !!s?.sessionReads?.asked, all: !!s?.sessionReads?.all, found: [] };
+  // gateway mode reads no agent's session history here, whatever these
+  // say (ownSessionsOff), so they are left out
+  const gw = !!(s?.gatewayOn || r.gateway);
+  box.hidden = gw;
+  box.previousElementSibling.hidden = gw;
+  if (gw) return;
+  const save = (body) => {
+    const n = ++sessionReadsSeq;
+    writingPrefs(api("sessions/reads", body))
+      .then((got) => { if (n === sessionReadsSeq) { sessionReads = got; renderSessionReads(prefs); } })
+      .catch((e) => { status(t(e.message), "err"); renderSessionReads(prefs); });
+  };
+  const row = (name, sub, on, fn) => {
+    const rw = el("div", "row pref");
+    const who = el("div", "who");
+    who.append(el("div", "name", name));
+    if (sub) who.append(el("div", "sub", sub));
+    const val = el("div", "val");
+    val.append(segs([["off", t("Off")], ["on", t("On")]], on ? "on" : "off", (v) => {
+      if ((v === "on") !== on) fn(v === "on");
+    }));
+    rw.append(who, val);
+    return rw;
+  };
+  const rows = [row(t("Agents found later"), t("Read the session history of an agent with no row here, one installed later too. Off, magpie reads only the agents turned on below; what its gateway served is counted either way"),
+    r.asked && r.all, (on) => {
+      // the agents with a row keep what their rows show
+      const agents = {};
+      for (const a of r.found || []) agents[a.agent] = !!a.on;
+      save(Object.keys(agents).length ? { all: on, agents } : { all: on });
+    })];
+  for (const a of r.found || []) {
+    const rw = row(a.name, "", a.on, (on) => save({ agents: { [a.agent]: on } }));
+    rw.dataset.agent = a.agent;
+    rows.push(rw);
+  }
+  box.replaceChildren(...rows);
+}
+function loadSessionReads() {
+  const n = ++sessionReadsSeq;
+  api("sessions/reads").then((got) => {
+    if (n !== sessionReadsSeq) return;
+    sessionReads = got;
+    renderSessionReads(prefs);
+  }).catch(() => {}); // the row drawn from the settings stays
+}

package/extensions/magpie/plugins/usage/client.js

@@ -0,0 +1,150 @@
+// The Usage page: the allowances, what was spent and on what, the
+// sessions, each request, and what filled the context window.
+//
+// A page the Usage plugin adds to the window (kernel.js), its words in
+// i18n.js beside this file. This file registers the page and its markup,
+// before app.js; page.js, after app.js and the scripts it shares the page
+// with, is the page's code, and start.js then shows the first page. The
+// hooks are what the shell asks of it: open (the reader came to the page),
+// refresh (the window came back: the tab shown read again, quietly when it
+// has its figures), reload (Refresh in the sidebar), costs (the currency
+// or a rate changed) and tab (the tab shown, for the allowance card a
+// link opens on). The allowance cards themselves, which the tray panel
+// shows too, stay app.js's.
+magpie.plugin("usage", (ctx) => {
+  ctx.slots.add("page", {
+    key: "usage",
+    title: "Usage",
+    html: `
+  <div class="usage-head">
+    <div class="segs" id="usageTab"></div>
+    <div class="segs" id="period"></div>
+    <div class="segs" id="sessRange" hidden></div>
+    <span class="ctx-range" id="ctxRange" hidden></span>
+    <button class="usage-range-menu" id="usageRangeMenu" type="button" aria-haspopup="menu" hidden></button>
+    <span class="grow"></span>
+    <span class="usage-refresh" id="usageRefresh">
+      <button class="icon" id="usageReload" type="button" aria-label="Refresh now" data-tt><svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v3h-3"/></svg></button>
+      <button class="sess-pick" id="usageEvery" type="button"></button>
+    </span>
+    <span class="usage-cost" id="usageCost"></span>
+  </div>
+  <div class="usage-pane" id="usagePane">
+    <div class="row-head quota-head" id="quotaHead" hidden>
+      <span class="label" data-t>Allowances</span>
+      <span class="grow"></span>
+      <button class="sess-pick quota-trend" id="quotaTrend" type="button" hidden></button>
+      <button class="text rt-mask" id="usageMask" aria-pressed="false" data-tt="Mask the accounts on every page — email addresses and account names — for a screenshot to share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 4.2A10.4 10.4 0 0 1 12 4c6.5 0 10 8 10 8a17.6 17.6 0 0 1-2.2 3.2M6.6 6.6C3.9 8.4 2 12 2 12s3.5 8 10 8a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20"/></svg><span data-t>Hide accounts</span></button>
+      <div class="segs" id="quotaMode" hidden></div>
+    </div>
+    <section class="subscription-usage" id="subscriptionUsage"></section>
+    <div class="us-hid" id="quotaHid" hidden><button class="text us-hidline" type="button" aria-expanded="false"></button><div class="list" hidden></div></div>
+    <p class="usage-note" id="usageScope" data-t>Gateway calls only; session-log calls are in Requests. Local rejections are excluded from totals.</p>
+    <section class="stats" id="stats"></section>
+    <section class="chart" id="chart"></section>
+    <div class="row-head"><button class="fold" type="button" data-fold="agents" aria-expanded="true" aria-controls="usageAgents"><span class="label" data-t>Agents</span></button></div>
+    <div class="list" id="usageAgents"></div>
+    <div class="us-hid" id="usageAgentsHid" hidden><button class="text us-hidline" type="button" aria-expanded="false"></button><div class="list" hidden></div></div>
+    <div class="row-head"><button class="fold" type="button" data-fold="models" aria-expanded="true" aria-controls="usageModels"><span class="label" data-t>Models</span></button></div>
+    <div class="list" id="usageModels"></div>
+    <div class="row-head" id="usageAccountsHead" hidden><button class="fold" type="button" data-fold="accounts" aria-expanded="true" aria-controls="usageAccounts"><span class="label" data-t>Accounts</span></button></div>
+    <div class="list" id="usageAccounts" hidden></div>
+    <div class="row-head" id="usageKeysHead" hidden><button class="fold" type="button" data-fold="keys" aria-expanded="true" aria-controls="usageKeys"><span class="label" data-t>Gateway keys</span></button></div>
+    <div class="list" id="usageKeys" hidden></div>
+    <p class="usage-note" id="usageNote"></p>
+    <p class="usage-clear"><button class="text" id="usageClear" type="button" hidden><span data-t>Clear all usage…</span></button></p>
+    <div class="plugin-slot" data-slot="usage" hidden></div>
+  </div>
+  <div class="usage-pane" id="ledgerPane" hidden>
+    <div class="sess-tools">
+      <button class="sess-pick" id="ledComputer" type="button" hidden></button>
+      <button class="sess-pick" id="ledAgent" type="button" hidden></button>
+      <button class="sess-pick" id="ledPurpose" type="button" hidden></button>
+      <button class="sess-pick" id="ledProvider" type="button" hidden></button>
+      <button class="sess-pick led-more" id="ledProviderMore" type="button" aria-haspopup="menu" hidden></button>
+      <button class="sess-pick" id="ledModel" type="button" hidden></button>
+      <button class="sess-pick" id="ledAccount" type="button" hidden></button>
+      <button class="sess-pick" id="ledKey" type="button" hidden></button>
+      <div class="segs" id="ledStatus"></div>
+      <span id="ledRoute" hidden><span id="ledRouteLabel"></span><button class="text" id="ledRouteClear" type="button" data-tt="Clear filter" aria-label="Clear filter">×</button></span>
+      <span class="grow"></span>
+      <input class="sess-filter" id="ledQ" type="search" spellcheck="false" autocomplete="off" placeholder="Search models, providers, sessions" data-tp>
+      <button class="text" id="ledExport" type="button" title="Save every request listed, all pages, as a CSV file in Downloads" data-tt><span data-t>Export CSV</span></button>
+    </div>
+    <p class="usage-note" id="ledScope" data-t>Gateway and session-log calls; local rejections excluded from totals.</p>
+    <div class="led-dash" id="ledDash" hidden>
+      <div class="led-strip" id="ledKpi"></div>
+      <section class="led-trend">
+        <div class="led-bar">
+          <div class="segs" id="ledMetric"></div>
+          <div class="segs led-style" id="ledStyle"></div>
+          <span class="grow"></span>
+          <span class="led-split"><span class="led-by" data-t>Split by</span><span class="segs" id="ledSplit"></span></span>
+        </div>
+        <div class="led-body">
+          <div class="led-chart" id="ledChart"></div>
+          <div class="led-rank" id="ledRank"></div>
+          <div class="led-rail" id="ledRail" hidden><i></i></div>
+        </div>
+      </section>
+    </div>
+    <section class="led-heat" id="ledHeat" hidden>
+      <div class="led-bar">
+        <div class="heat-title"><b data-t>Usage heatmap</b><span data-t>Daily usage over the last 53 weeks</span></div>
+        <span class="grow"></span>
+        <div class="segs" id="ledHeatMetric"></div>
+      </div>
+      <div class="heat-scroll" id="ledHeatScroll"></div>
+      <div class="heat-foot"></div>
+      <div class="heat-tip" id="ledHeatTip" hidden></div>
+    </section>
+    <div class="led-head"><p class="led-sum" id="ledSum"></p><span class="grow"></span><span class="led-arch" id="ledArchive"></span></div>
+    <div class="led-strip led-vias" id="ledVia" hidden></div>
+    <div class="led-wrap" id="ledWrap"></div>
+            <div class="led-hscroll" id="ledHScroll" hidden><div></div></div>
+    <div class="led-pager" id="ledPager" hidden></div>
+    <p class="usage-note" id="ledNote"></p>
+  </div>
+  <div class="usage-pane ctx-pane" id="contextPane" hidden></div>
+  <div class="usage-pane sess-pane" id="sessionsPane" hidden>
+    <div class="sess-tools">
+      <button class="sess-pick" id="sessAgent" type="button" hidden></button>
+      <button class="sess-pick" id="sessModel" type="button" hidden></button>
+      <button class="sess-pick" id="sessFolder" type="button" hidden></button>
+    </div>
+    <section class="stats" id="sessStats"></section>
+    <section class="chart sess-chart" id="sessChart" hidden></section>
+    <div class="sess-grid" id="sessGrid" hidden>
+      <section class="sess-card" id="sessProjects"></section>
+      <section class="sess-card" id="sessModels"></section>
+      <section class="sess-card" id="sessHours"></section>
+      <section class="sess-card" id="sessTop"></section>
+      <section class="sess-card" id="sessShape"></section>
+      <section class="sess-card" id="sessSkills"></section>
+      <section class="sess-card wide" id="sessTools"></section>
+    </div>
+    <div class="row-head" id="sessListHead" hidden>
+      <span class="label" data-t>Latest sessions</span>
+      <span class="grow"></span>
+      <button class="text sess-all" id="sessAll" type="button" data-feature="sessions" data-t>All sessions</button>
+      <input class="sess-filter" id="sessQ" type="search" spellcheck="false" autocomplete="off" placeholder="Search sessions" data-tp>
+    </div>
+    <div class="list sess-list" id="sessList"></div>
+    <p class="usage-note" id="sessNote"></p>
+  </div>
+`,
+    mount() { mountUsageFolds(); },
+    open() { return loadUsage(true).catch((e) => status(e.message, "err")); },
+    refresh(again) {
+      // on the Overview, where the allowances are, coming back is opening them (#1588)
+      if (again && usageTab === "usage") quotasOpened();
+      return (again && usageDrawn() ? refreshUsage() : loadUsage()).catch((e) => status(e.message, "err"));
+    },
+    reload() { return refreshUsage(true); },
+    costs() { renderCosts(); },
+    tab() { return usageTab; },
+    // the reader goes to another page: the Requests give back what a
+    // click lent them (ledLeave)
+    leave() { if (usageTab === "requests") ledLeave(); },
+  });
+});