feat: Sprint 23 — agentic transparency + polish

Track A: Token/cost display
- Read agent usage attrs (session_prompt_tokens, session_completion_tokens,
  session_estimated_cost_usd) after run_conversation in streaming.py
- Add input_tokens, output_tokens, estimated_cost fields to Session model
- Include usage in done SSE event payload
- Store usage on S.lastUsage in messages.js done handler
- Render usage badge below last assistant message (input/output/cost)

Track B: Subagent delegation cards
- Add subagent_progress to toolIcon map with shuffle emoji
- Special-case subagent_progress in buildToolCard: "Subagent" label,
  strip double emoji from preview, add tool-card-subagent CSS class
- Indented border-left styling for subagent cards
- Clean delegate_task display name

Track C: Skill picker in cron create form
- Add skill search input + tag chips to cron create form HTML
- Skill picker JS in panels.js: search/filter, click-to-add tags,
  remove tag chips, pre-fetch skill list on form open
- submitCronCreate sends skills array in POST body
- Skill picker dropdown + tag CSS

Track D: Skill linked files viewer
- Add file query param to /api/skills/content endpoint
- Serve linked files from skill directory with path traversal protection
- Ensure linked_files key always present in skill content response
- Render linked files section below SKILL.md content in preview panel
- openSkillFile function for viewing individual linked files

Track E: Bug fixes and code quality
- Expand Session.__init__ and compact() to readable multi-line format
- Remove inline import json as _j2 inside loop in streaming.py
- Fix tool_calls: capture args from assistant messages, skip unresolved names
- Store args snapshot in persisted tool_calls for reload display

6 new tests. Total: 421 (409 passing).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/ui.js

@@ -82,6 +82,8 @@ let _scrollPinned=true;
     _scrollPinned=nearBottom;
   });
 })();
+function _fmtTokens(n){if(n>=1e6)return(n/1e6).toFixed(1)+'M';if(n>=1e3)return(n/1e3).toFixed(1)+'k';return String(n);}
+
 function scrollIfPinned(){
   if(!_scrollPinned) return;
   const el=$('messages');
@@ -486,6 +488,21 @@ function renderMessages(){
       else inner.appendChild(frag);
     }
   }
+  // Render per-turn usage badge on the last assistant message (if usage data exists)
+  if(S.session&&(S.session.input_tokens||S.session.output_tokens)){
+    const lastAssist=inner.querySelector('.msg-row:last-child');
+    if(lastAssist&&!lastAssist.querySelector('.msg-usage')){
+      const usage=document.createElement('div');
+      usage.className='msg-usage';
+      const inTok=S.session.input_tokens||0;
+      const outTok=S.session.output_tokens||0;
+      const cost=S.session.estimated_cost;
+      let text=`${_fmtTokens(inTok)} in · ${_fmtTokens(outTok)} out`;
+      if(cost) text+=` · ~$${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
+      usage.textContent=text;
+      lastAssist.appendChild(usage);
+    }
+  }
   scrollToBottom();
   // Apply syntax highlighting after DOM is built
   requestAnimationFrame(()=>{highlightCode();addCopyButtons();renderMermaidBlocks();});
@@ -499,7 +516,8 @@ function toolIcon(name){
   const icons={terminal:'⬛',read_file:'📄',write_file:'✏️',search_files:'🔍',
     web_search:'🌐',web_extract:'🌐',execute_code:'⚙️',patch:'🔧',
     memory:'🧠',skill_manage:'📚',todo:'✅',cronjob:'⏱️',delegate_task:'🤖',
-    send_message:'💬',browser_navigate:'🌐',vision_analyze:'👁️'};
+    send_message:'💬',browser_navigate:'🌐',vision_analyze:'👁️',
+    subagent_progress:'🔀'};
   return icons[name]||'🔧';
 }
 
@@ -520,13 +538,22 @@ function buildToolCard(tc){
   }
   const hasMore=tc.snippet&&tc.snippet.length>displaySnippet.length;
   const runIndicator=tc.done===false?'<span class="tool-card-running-dot"></span>':'';
+  const isSubagent=tc.name==='subagent_progress';
+  const isDelegation=tc.name==='delegate_task';
+  const cardClass='tool-card'+(tc.done===false?' tool-card-running':'')+(isSubagent?' tool-card-subagent':'');
+  // Clean up subagent preview: strip leading 🔀 emoji since the icon already shows it
+  let displayName=tc.name;
+  if(isSubagent) displayName='Subagent';
+  if(isDelegation) displayName='Delegate task';
+  let previewText=tc.preview||displaySnippet||'';
+  if(isSubagent) previewText=previewText.replace(/^🔀\s*/,'');
   row.innerHTML=`
-    <div class="tool-card${tc.done===false?' tool-card-running':''}">
+    <div class="${cardClass}">
       <div class="tool-card-header" onclick="this.closest('.tool-card').classList.toggle('open')">
         ${runIndicator}
         <span class="tool-card-icon">${icon}</span>
-        <span class="tool-card-name">${esc(tc.name)}</span>
-        <span class="tool-card-preview">${esc(tc.preview||displaySnippet||'')}</span>
+        <span class="tool-card-name">${esc(displayName)}</span>
+        <span class="tool-card-preview">${esc(previewText)}</span>
         ${hasDetail?'<span class="tool-card-toggle">▸</span>':''}
       </div>
       ${hasDetail?`<div class="tool-card-detail">