claude-teammate 0.1.166 → 0.1.167

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-teammate",
-  "version": "0.1.166",
+  "version": "0.1.167",
   "description": "CLI bootstrapper for Claude Teammate.",
   "license": "MIT",
   "type": "module",

package/src/dashboard/ui.html

@@ -1326,6 +1326,28 @@ a:hover { text-decoration:underline; }
   font-size:.65rem;
 }
 
+/* Log rich formatting */
+.tool-name { color:#86EFAC; font-weight:600; }
+.tool-key  { color:#FCD34D; }
+.tool-arg  { color:#9CA3AF; }
+.so-key    { color:#60A5FA; font-weight:500; }
+.so-val    { color:#E5E0D8; }
+.so-item   { color:#D1D5DB; }
+.so-empty  { color:#6B7280; font-style:italic; }
+.log-expand-btn {
+  background:none; border:1px solid #374151; color:#9CA3AF;
+  font-size:.6rem; padding:1px 5px; cursor:pointer; border-radius:3px;
+  margin-left:6px; vertical-align:middle;
+}
+.log-expand-btn:hover { border-color:#6B7280; color:#E5E0D8; }
+.log-code {
+  background:#0D0C0B; border:1px solid #1F2937; color:#9CA3AF;
+  font-size:.63rem; padding:6px 8px; margin-top:4px; border-radius:4px;
+  white-space:pre-wrap; word-break:break-all;
+  max-height:180px; overflow-y:auto;
+}
+.log-code.hidden { display:none; }
+
 /* Drawer info sections */
 .drawer-section { margin-bottom:20px; }
 
@@ -2638,13 +2660,166 @@ setInterval(() => {
 /* ── Detail Drawer ── */
 function classifyLogEntry(text) {
   if (text.startsWith("[thinking]")) return "thinking";
+  if (text.startsWith("[tool: StructuredOutput]")) return "meta";
   if (text.startsWith("[tool:")) return "tool";
   if (text.startsWith("[session]")) return "session";
   if (text.startsWith("[done]")) return "done";
-  if (text.startsWith("[tool: StructuredOutput]")) return "meta";
   return "response";
 }
 
+function _eid() { return "e" + Math.random().toString(36).slice(2,9); }
+
+function truncLog(s, n) {
+  s = String(s).replace(/\n/g, " ");
+  return s.length > n ? s.slice(0, n) + "…" : s;
+}
+
+function toggleExpand(id) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.classList.toggle("hidden");
+  const btn = document.querySelector(`[data-expand="${id}"]`);
+  if (btn) btn.textContent = el.classList.contains("hidden") ? "▶ show" : "▼ hide";
+}
+
+function fmtExpandable(label, fullText, maxInline) {
+  if (fullText.length <= maxInline) return esc(fullText);
+  const id = _eid();
+  const preview = esc(fullText.slice(0, maxInline)) + "…";
+  return `${preview} <button class="log-expand-btn" data-expand="${id}" onclick="toggleExpand('${id}')">▶ show</button><pre class="log-code hidden" id="${id}">${esc(fullText.slice(0, 3000))}${fullText.length > 3000 ? "\n…" : ""}</pre>`;
+}
+
+function fmtToolCall(toolName, rawArg) {
+  /* StructuredOutput → pretty key-value */
+  if (toolName === "StructuredOutput") {
+    let parsed = null;
+    try { parsed = JSON.parse(rawArg); } catch {}
+    if (!parsed) return `<span class="tool-name">output</span> ${esc(rawArg.slice(0, 200))}`;
+    const lines = [];
+    for (const [k, v] of Object.entries(parsed)) {
+      if (Array.isArray(v)) {
+        if (v.length === 0) lines.push(`<span class="so-key">${esc(k)}:</span> <span class="so-empty">(empty)</span>`);
+        else {
+          lines.push(`<span class="so-key">${esc(k)}:</span>`);
+          v.forEach(item => lines.push(`  <span class="so-item">• ${esc(truncLog(String(item), 120))}</span>`));
+        }
+      } else if (v !== null && v !== undefined) {
+        const s = String(v);
+        lines.push(`<span class="so-key">${esc(k)}:</span> <span class="so-val">${esc(truncLog(s, 150))}</span>`);
+      }
+    }
+    return lines.join("\n");
+  }
+
+  /* Try parse JSON args */
+  let parsed = null;
+  try { parsed = JSON.parse(rawArg); } catch {}
+
+  const nameHtml = `<span class="tool-name">${esc(toolName.replace(/^mcp__[^_]+__/, ""))}</span>`;
+
+  if (!parsed) {
+    return `${nameHtml} <span class="tool-arg">${esc(truncLog(rawArg, 150))}</span>`;
+  }
+
+  /* Pick the most meaningful single field to show inline */
+  const KEY_MAP = {
+    Bash: "command", Read: "file_path", Write: "file_path",
+    Edit: "file_path", Glob: "pattern", Grep: "pattern",
+    WebFetch: "url", WebSearch: "query",
+    TodoWrite: null,
+  };
+  const tn = toolName.replace(/^mcp__[^_]+__/, "");
+  let keyVal = null;
+  if (tn in KEY_MAP && KEY_MAP[tn]) {
+    keyVal = parsed[KEY_MAP[tn]] != null ? String(parsed[KEY_MAP[tn]]) : null;
+  } else if (tn.includes("jira_get_issue")) keyVal = parsed.issue_key || null;
+  else if (tn.includes("jira_add_comment")) keyVal = parsed.issue_key ? `${parsed.issue_key}: ${truncLog(parsed.body || "", 60)}` : null;
+  else if (tn.includes("jira_transition")) keyVal = parsed.issue_key ? `${parsed.issue_key}` : null;
+  else if (tn.includes("jira_search") || tn.includes("confluence_search")) keyVal = parsed.jql || parsed.query || null;
+  else if (tn.includes("jira_update") || tn.includes("jira_create")) keyVal = parsed.issue_key || parsed.summary || null;
+  else if (tn.includes("confluence_get_page") || tn.includes("confluence_update")) keyVal = parsed.page_id ? `page ${parsed.page_id}` : null;
+  else if (tn === "TodoWrite") keyVal = `${Array.isArray(parsed.todos) ? parsed.todos.length : "?"} items`;
+  else if (tn.includes("browser_navigate")) keyVal = parsed.url || null;
+  else if (tn.includes("browser_")) keyVal = parsed.selector || parsed.text || null;
+  else if (tn.includes("gsheets")) keyVal = parsed.spreadsheet_id || parsed.sheet_name || null;
+
+  const fullJson = JSON.stringify(parsed, null, 2);
+  const id = _eid();
+  const keyHtml = keyVal ? ` <span class="tool-key">${esc(truncLog(keyVal, 100))}</span>` : "";
+  const expandHtml = fullJson.length > 120
+    ? ` <button class="log-expand-btn" data-expand="${id}" onclick="toggleExpand('${id}')">▶ args</button><pre class="log-code hidden" id="${id}">${esc(fullJson.slice(0, 3000))}${fullJson.length > 3000 ? "\n…" : ""}</pre>`
+    : ` <span class="tool-arg">${esc(fullJson)}</span>`;
+
+  return `${nameHtml}${keyHtml}${keyVal ? "" : expandHtml}${keyVal ? expandHtml : ""}`;
+}
+
+function fmtAgentMessage(text) {
+  /* Strip base64 blobs first */
+  const b64re = /"base64":"([A-Za-z0-9+/]{80,}={0,2})"/g;
+  let b64total = 0;
+  const stripped = text.replace(b64re, (_, b) => {
+    b64total += Math.round(b.length * 0.75);
+    return `"base64":"[…${Math.round(b.length * 0.75 / 1024)}kb…]"`;
+  });
+
+  if (b64total > 0) {
+    return `<span class="tool-key">📎 Binary/image data (~${Math.round(b64total/1024)}kb encoded)</span>`;
+  }
+
+  /* Large JSON blob → collapse */
+  if (text.length > 250) {
+    let summary = "Agent message";
+    try {
+      const p = JSON.parse(text);
+      const role = p.message?.role || p.type || "";
+      const content = p.message?.content;
+      if (Array.isArray(content)) {
+        const types = [...new Set(content.map(c => c.type || "?"))].join(", ");
+        const first = content.find(c => typeof c.content === "string" && c.content.length > 0);
+        summary = role ? `${role} [${types}]` : `[${types}]`;
+        if (first) summary += `: ${truncLog(first.content, 80)}`;
+      } else if (role) {
+        summary = role;
+      }
+    } catch {}
+    const id = _eid();
+    return `<span class="tool-arg">${esc(summary)}</span> <button class="log-expand-btn" data-expand="${id}" onclick="toggleExpand('${id}')">▶ raw</button><pre class="log-code hidden" id="${id}">${esc(text.slice(0, 3000))}${text.length > 3000 ? "\n…" : ""}</pre>`;
+  }
+
+  return esc(text);
+}
+
+function formatLogContent(text) {
+  /* [done] success duration=Xms cost=$Y */
+  const doneM = text.match(/^\[done\]\s+(\w+)\s+duration=(\d+)ms(?:\s+cost=\$?([\d.]+))?/);
+  if (doneM) {
+    const secs = (parseInt(doneM[2]) / 1000).toFixed(1);
+    const cost = doneM[3] ? ` · $${doneM[3]}` : "";
+    return `${esc(doneM[1])} — ${secs}s${esc(cost)}`;
+  }
+
+  /* [session] model=... */
+  if (text.startsWith("[session]")) {
+    return `<span style="opacity:.35">${esc(text.replace(/^\[session\]\s*/, ""))}</span>`;
+  }
+
+  /* [tool: NAME] args */
+  const toolM = text.match(/^\[tool: ([^\]]+)\]\s*([\s\S]*)/);
+  if (toolM) return fmtToolCall(toolM[1], toolM[2].trim());
+
+  /* [thinking] text */
+  if (text.startsWith("[thinking]")) {
+    const body = text.replace(/^\[thinking\]\s*/, "");
+    return fmtExpandable("thinking", body, 200);
+  }
+
+  /* Agent message JSON */
+  if (text.startsWith('{"type":')) return fmtAgentMessage(text);
+
+  /* Plain text — collapse if very long */
+  return fmtExpandable("text", text, 300);
+}
+
 function setLogFilter(filter) {
   currentLogFilter = filter;
   document.querySelectorAll(".log-filter-btn[data-filter]").forEach(btn => {
@@ -2813,14 +2988,12 @@ function renderIssueLogLine(line) {
   const phase = phaseMatch ? phaseMatch[1] : "";
   const text = line.replace(/^\[[^\]]+\] (?:\[[^\]]+\] )?/, "");
   const type = classifyLogEntry(text);
-  const displayText = text
-    .replace(/^\[thinking\] /, "")
-    .replace(/^\[tool: ([^\]]+)\] /, (_, name) => name === "StructuredOutput" ? "[output] " : `${name}: `);
+  const content = formatLogContent(text);
   return `<div class="log-entry type-${type}" data-type="${type}">
     <div class="log-entry-ts">${esc(ts)}</div>
     <div class="log-entry-phase phase-${esc(phase)}">${esc(phase)}</div>
     <div class="log-entry-sep">|</div>
-    <div class="log-entry-content">${esc(displayText)}</div>
+    <div class="log-entry-content">${content}</div>
   </div>`;
 }