@duckmind/dm-darwin-arm64 0.13.6 → 0.13.7

package/extensions/dm-phone/public/app/sheets-view.js

@@ -0,0 +1,272 @@
+import { THINKING_LEVELS } from "./constants.js";
+import { commandCategoryLabel, groupedCommands, selectedCommandCategory, sortCommandCategories } from "./command-catalog.js";
+import { escapeHtml, formatDateTime } from "./formatters.js";
+import { el, state } from "./state.js";
+
+function renderStatsSection() {
+  if (!state.stats) return '<div class="label">Session stats will appear here after refresh.</div>';
+  const tokens = state.stats.tokens || {};
+  return `
+    <div class="stat-grid">
+      <div class="stat-chip"><span>Input tokens</span><strong>${escapeHtml((tokens.input || 0).toLocaleString())}</strong></div>
+      <div class="stat-chip"><span>Output tokens</span><strong>${escapeHtml((tokens.output || 0).toLocaleString())}</strong></div>
+      <div class="stat-chip"><span>Total tokens</span><strong>${escapeHtml((tokens.total || 0).toLocaleString())}</strong></div>
+      <div class="stat-chip"><span>Tool calls</span><strong>${escapeHtml(String(state.stats.toolCalls || 0))}</strong></div>
+      <div class="stat-chip"><span>Messages</span><strong>${escapeHtml(String(state.stats.totalMessages || 0))}</strong></div>
+      <div class="stat-chip"><span>Cost</span><strong>${escapeHtml(state.stats.cost != null ? `$${Number(state.stats.cost).toFixed(4)}` : "—")}</strong></div>
+    </div>
+  `;
+}
+
+function renderActionsSheet() {
+  return `
+    <section class="sheet-section">
+      <h3>Quick actions</h3>
+      <div class="sheet-actions">
+        <div class="sheet-action-row">
+          <button class="secondary" data-sheet-action="refresh">Refresh snapshot</button>
+          <button class="secondary" data-sheet-action="new-session">New session</button>
+          <button class="secondary" data-sheet-action="compact">Compact session</button>
+          <button class="secondary" data-sheet-action="stats">Refresh stats</button>
+        </div>
+        <div class="sheet-action-row">
+          <button class="secondary" data-sheet-action="models">Open model picker</button>
+          <button class="secondary" data-sheet-action="thinking">Open thinking picker</button>
+          <button class="secondary" data-sheet-action="commands">Browse commands</button>
+          <button class="secondary" data-sheet-action="sessions">Browse sessions</button>
+          <button class="secondary" data-sheet-action="tree">Browse tree</button>
+        </div>
+      </div>
+    </section>
+    <section class="sheet-section">
+      <h3>Session stats</h3>
+      ${renderStatsSection()}
+    </section>
+  `;
+}
+
+function renderThinkingSheet() {
+  return `
+    <section class="sheet-section">
+      <h3>Thinking levels</h3>
+      <div class="sheet-list">
+        ${THINKING_LEVELS.map((level) => `
+          <button class="secondary" data-thinking-level="${escapeHtml(level)}">
+            ${escapeHtml(level)}${state.snapshotState?.thinkingLevel === level ? " · current" : ""}
+          </button>
+        `).join("")}
+      </div>
+    </section>
+  `;
+}
+
+function renderModelsSheet() {
+  return `
+    <section class="sheet-section">
+      <h3>Models</h3>
+      <div class="model-list">
+        ${state.models.length
+          ? state.models.map((model) => `
+            <button class="secondary" data-model-provider="${escapeHtml(model.provider)}" data-model-id="${escapeHtml(model.id)}">
+              <div><strong>${escapeHtml(model.name || model.id)}</strong></div>
+              <div class="label">${escapeHtml(`${model.provider}/${model.id}`)}${state.snapshotState?.model?.id === model.id && state.snapshotState?.model?.provider === model.provider ? " · current" : ""}</div>
+            </button>
+          `).join("")
+          : '<div class="label">Loading available models…</div>'}
+      </div>
+    </section>
+  `;
+}
+
+function renderCommandsSheet() {
+  const groups = groupedCommands();
+  const categories = sortCommandCategories([...new Set([...groups.keys()])]);
+  const activeCategory = selectedCommandCategory(categories);
+  const commands = groups.get(activeCategory) || [];
+  const emptyLabel = activeCategory ? `${commandCategoryLabel(activeCategory).toLowerCase()} commands` : "commands";
+
+  return `
+    <section class="sheet-section">
+      <h3>Commands, skills, prompts</h3>
+      <label class="sheet-filter">
+        <span class="label">Category</span>
+        <select class="sheet-select" data-command-category-select aria-label="Command category">
+          ${categories.map((category) => `
+            <option value="${escapeHtml(category)}" ${category === activeCategory ? "selected" : ""}>${escapeHtml(commandCategoryLabel(category))}</option>
+          `).join("")}
+        </select>
+      </label>
+      <div class="sheet-list">
+        ${commands.length ? commands.map((command) => `
+          <button
+            class="secondary"
+            ${command.source === "local"
+              ? `data-run-local-command="${escapeHtml(command.name)}"`
+              : `data-run-command="/${escapeHtml(command.name)}"`}
+          >
+            <div><strong>${escapeHtml(`/${command.name}`)}</strong></div>
+            <div class="label">${escapeHtml(command.description || "No description")}</div>
+          </button>
+        `).join("") : `<div class="label">No ${escapeHtml(emptyLabel)} available.</div>`}
+      </div>
+    </section>
+  `;
+}
+
+function renderSessionsSheet() {
+  return `
+    <section class="sheet-section">
+      <h3>Sessions for this project</h3>
+      <div class="sheet-list">
+        ${state.sessions.length ? state.sessions.map((session) => `
+          <button class="secondary" data-session-path="${escapeHtml(session.path)}">
+            <div><strong>${escapeHtml(session.name || session.firstMessage || session.id)}</strong></div>
+            <div class="label">${escapeHtml(formatDateTime(session.modified))} · ${escapeHtml(String(session.messageCount))} messages</div>
+            <div class="label mono">${escapeHtml(session.path)}</div>
+          </button>
+        `).join("") : '<div class="label">No sessions found yet for this cwd.</div>'}
+      </div>
+    </section>
+  `;
+}
+
+function sortedActiveSessions() {
+  return [...state.activeSessions].sort((left, right) => {
+    const leftCurrent = left.id === state.activeSessionId ? 1 : 0;
+    const rightCurrent = right.id === state.activeSessionId ? 1 : 0;
+    if (leftCurrent !== rightCurrent) return rightCurrent - leftCurrent;
+
+    const leftLive = left.isStreaming ? 1 : 0;
+    const rightLive = right.isStreaming ? 1 : 0;
+    if (leftLive !== rightLive) return rightLive - leftLive;
+
+    const leftLabel = left.label || left.sessionId || left.id;
+    const rightLabel = right.label || right.sessionId || right.id;
+    return leftLabel.localeCompare(rightLabel);
+  });
+}
+
+function renderActiveSessionsSheet() {
+  const sessions = sortedActiveSessions();
+  const parentSessions = sessions.filter((session) => session.kind === "parent");
+  const parallelSessions = sessions.filter((session) => session.kind === "parallel");
+
+  const renderSessionButton = (session, sectionKind) => {
+    const statusBits = [
+      session.id === state.activeSessionId ? "current" : "",
+      sectionKind === "parent" ? "mirroring cli" : "parallel",
+      session.isStreaming ? "live" : "",
+      session.hasPendingUiRequest ? "needs input" : "",
+      session.model?.name || "",
+      Number.isFinite(session.messageCount) ? `${session.messageCount} messages` : "",
+      session.secondaryLabel || "",
+    ].filter(Boolean).join(" · ");
+
+    const preview = session.lastUserPreview || session.firstUserPreview || "";
+
+    return `
+      <button class="secondary" data-active-session-id="${escapeHtml(session.id)}">
+        <div><strong>${escapeHtml(session.label || "Session")}</strong></div>
+        ${statusBits ? `<div class="label">${escapeHtml(statusBits)}</div>` : ""}
+        ${preview ? `<div class="label">${escapeHtml(preview)}</div>` : ""}
+      </button>
+    `;
+  };
+
+  return `
+    <section class="sheet-section">
+      <h3>Parent</h3>
+      <div class="button-row compact">
+        <button class="secondary" data-sheet-action="new-parent-session">New Parent</button>
+      </div>
+      <div class="sheet-list">
+        ${parentSessions.length
+          ? parentSessions.map((session) => renderSessionButton(session, "parent")).join("")
+          : '<div class="label">Parent session unavailable.</div>'}
+      </div>
+    </section>
+    <section class="sheet-section">
+      <h3>Parallel</h3>
+      <div class="button-row compact">
+        <button class="secondary" data-sheet-action="new-parallel-session">New Parallel</button>
+      </div>
+      <div class="sheet-list">
+        ${parallelSessions.length
+          ? parallelSessions.map((session) => renderSessionButton(session, "parallel")).join("")
+          : '<div class="label">No parallel sessions yet. Start one with “New Parallel”.</div>'}
+      </div>
+    </section>
+  `;
+}
+
+function renderTreeSheet() {
+  if (!state.tree) {
+    return `
+      <section class="sheet-section">
+        <h3>Session tree</h3>
+        <div class="label">Loading tree…</div>
+      </section>
+    `;
+  }
+
+  return `
+    <section class="sheet-section">
+      <h3>Session tree</h3>
+      <div class="label mono">${escapeHtml(state.tree.sessionFile || "")}</div>
+      <div class="sheet-list">
+        ${state.tree.nodes.map((node) => {
+          const isCurrent = state.tree.currentLeafId === node.id;
+          const onPath = state.tree.currentPathIds.includes(node.id);
+          return `
+            <div class="sheet-section" style="margin-left:${Math.min(node.depth * 12, 72)}px">
+              <div><strong>${escapeHtml(node.summary.kind)}</strong>${node.summary.role ? ` <span class="label">${escapeHtml(node.summary.role)}</span>` : ""}${node.label ? ` <span class="label">#${escapeHtml(node.label)}</span>` : ""}${isCurrent ? ' <span class="label">current</span>' : onPath ? ' <span class="label">path</span>' : ''}</div>
+              <div class="label">${escapeHtml(formatDateTime(node.timestamp))}</div>
+              <div>${escapeHtml(node.summary.preview || "(empty)")}</div>
+              <div class="button-row compact">
+                <button class="secondary" data-open-branch-entry="${escapeHtml(node.id)}">Open path</button>
+                ${node.summary.role === "user" ? `<button class="secondary" data-fork-entry="${escapeHtml(node.id)}">Fork here</button>` : ""}
+              </div>
+            </div>
+          `;
+        }).join("")}
+      </div>
+    </section>
+  `;
+}
+
+export function renderSheet() {
+  if (el.sheetModal.classList.contains("hidden")) return;
+
+  const titles = {
+    actions: "Actions",
+    commands: "Commands",
+    models: "Models",
+    thinking: "Thinking",
+    sessions: "Sessions",
+    "active-sessions": "Sessions",
+    tree: "Tree",
+  };
+  const nextTitle = titles[state.sheetMode] || "Actions";
+  if (el.sheetTitle.textContent !== nextTitle) {
+    el.sheetTitle.textContent = nextTitle;
+  }
+
+  if (el.sheetSavedSessionsButton) {
+    el.sheetSavedSessionsButton.classList.toggle("hidden", state.sheetMode !== "active-sessions");
+  }
+
+  const sections = {
+    actions: renderActionsSheet() + renderThinkingSheet() + renderModelsSheet(),
+    commands: renderCommandsSheet(),
+    models: renderModelsSheet() + renderThinkingSheet(),
+    thinking: renderThinkingSheet() + renderModelsSheet(),
+    sessions: renderSessionsSheet(),
+    "active-sessions": renderActiveSessionsSheet(),
+    tree: renderTreeSheet(),
+  };
+
+  const nextHtml = sections[state.sheetMode] || sections.actions;
+  if (el.sheetContent.innerHTML !== nextHtml) {
+    el.sheetContent.innerHTML = nextHtml;
+  }
+}

package/extensions/dm-phone/public/app/state.js

@@ -0,0 +1,95 @@
+import { TOKEN_STORAGE_KEY } from "./constants.js";
+
+export const state = {
+  health: null,
+  status: null,
+  snapshotState: null,
+  snapshotWorkerId: null,
+  messages: [],
+  commands: [],
+  models: [],
+  sessions: [],
+  activeSessions: [],
+  activeSessionId: null,
+  tree: null,
+  stats: null,
+  widgets: new Map(),
+  footerStatus: "",
+  quota: null,
+  quotaRequestId: 0,
+  liveAssistant: null,
+  liveTools: new Map(),
+  followLatest: true,
+  lastAutoFollowAt: 0,
+  lastAutoFollowHeight: 0,
+  ignoreScrollTrackingUntil: 0,
+  lastUserScrollIntentAt: 0,
+  pendingUiRequest: null,
+  socket: null,
+  reconnectTimer: null,
+  manuallyClosed: false,
+  token: localStorage.getItem(TOKEN_STORAGE_KEY) || "",
+  sheetMode: "actions",
+  commandSheetCategory: "local",
+  autocompleteContext: null,
+  autocompleteItems: [],
+  autocompleteRemoteRequestId: 0,
+  autocompleteRemoteTimer: null,
+  attachments: [],
+  nextAttachmentTokenId: 1,
+  lastSheetPointerAction: "",
+  lastSheetPointerActionAt: 0,
+  toolPanelOpen: new Map(),
+};
+
+export const el = {
+  abortButton: document.querySelector("#abort-button"),
+  actionsButton: document.querySelector("#actions-button"),
+  attachImageButton: document.querySelector("#attach-image-button"),
+  cdCommandButton: document.querySelector("#cd-command-button"),
+  attachmentStrip: document.querySelector("#attachment-strip"),
+  banner: document.querySelector("#banner"),
+  commandStrip: document.querySelector("#command-strip"),
+  composerWrap: document.querySelector(".composer-wrap"),
+  connectionPill: document.querySelector("#connection-pill"),
+  cwdValue: document.querySelector("#cwd-value"),
+  imageInput: document.querySelector("#image-input"),
+  insertCommandButton: document.querySelector("#insert-command-button"),
+  jumpToLatestButton: document.querySelector("#jump-to-latest-button"),
+  loginModal: document.querySelector("#login-modal"),
+  messages: document.querySelector("#messages"),
+  modelValue: document.querySelector("#model-value"),
+  promptInput: document.querySelector("#prompt-input"),
+  quotaContext: document.querySelector("#quota-context"),
+  quotaCwd: document.querySelector("#quota-cwd"),
+  quotaMetaRow: document.querySelector("#quota-meta-row"),
+  quotaPillsRow: document.querySelector("#quota-pills-row"),
+  quotaPrimary: document.querySelector("#quota-primary"),
+  quotaRow: document.querySelector("#quota-row"),
+  quotaSecondary: document.querySelector("#quota-secondary"),
+  refreshButton: document.querySelector("#refresh-button"),
+  sendButton: document.querySelector("#send-button"),
+  stopButton: document.querySelector("#stop-button"),
+  serverValue: document.querySelector("#server-value"),
+  sessionSidebarButton: document.querySelector("#session-sidebar-button"),
+  sessionValue: document.querySelector("#session-value"),
+  sheetCloseButton: document.querySelector("#sheet-close-button"),
+  sheetContent: document.querySelector("#sheet-content"),
+  sheetModal: document.querySelector("#sheet-modal"),
+  sheetSavedSessionsButton: document.querySelector("#sheet-saved-sessions-button"),
+  sheetTitle: document.querySelector("#sheet-title"),
+  steerButton: document.querySelector("#steer-button"),
+  streamingValue: document.querySelector("#streaming-value"),
+  thinkingValue: document.querySelector("#thinking-value"),
+  toastHost: document.querySelector("#toast-host"),
+  tokenInput: document.querySelector("#token-input"),
+  tokenSaveButton: document.querySelector("#token-save-button"),
+  treeBrowserButton: document.querySelector("#tree-browser-button"),
+  uiModal: document.querySelector("#ui-modal"),
+  uiModalButtons: document.querySelector("#ui-modal-buttons"),
+  uiModalInput: document.querySelector("#ui-modal-input"),
+  uiModalMessage: document.querySelector("#ui-modal-message"),
+  uiModalOptions: document.querySelector("#ui-modal-options"),
+  uiModalTitle: document.querySelector("#ui-modal-title"),
+  widgetStack: document.querySelector("#widget-stack"),
+};