Merge pull request #51 from nesquena/sprint-23-agentic-transparency

Sprint 23: Agentic transparency — token costs, subagent cards, skill picker, linked files

api/config.py

@@ -632,6 +632,7 @@ _SETTINGS_DEFAULTS = {
     'default_model': DEFAULT_MODEL,
     'default_workspace': str(DEFAULT_WORKSPACE),
     'send_key': 'enter',  # 'enter' or 'ctrl+enter'
+    'show_token_usage': False,  # show input/output token badge below assistant messages
     'password_hash': None,  # SHA-256 hash; None = auth disabled
 }
 
@@ -651,6 +652,7 @@ _SETTINGS_ALLOWED_KEYS = set(_SETTINGS_DEFAULTS.keys()) - {'password_hash'}
 _SETTINGS_ENUM_VALUES = {
     'send_key': {'enter', 'ctrl+enter'},
 }
+_SETTINGS_BOOL_KEYS = {'show_token_usage'}
 
 def save_settings(settings: dict) -> dict:
     """Save settings to disk. Returns the merged settings. Ignores unknown keys."""
@@ -669,6 +671,9 @@ def save_settings(settings: dict) -> dict:
             # Validate enum-constrained keys
             if k in _SETTINGS_ENUM_VALUES and v not in _SETTINGS_ENUM_VALUES[k]:
                 continue
+            # Coerce bool keys
+            if k in _SETTINGS_BOOL_KEYS:
+                v = bool(v)
             current[k] = v
     SETTINGS_FILE.write_text(
         json.dumps(current, ensure_ascii=False, indent=2),

api/models.py

@@ -34,17 +34,65 @@ def _write_session_index():
 
 
 class Session:
-    def __init__(self, session_id=None, title='Untitled', workspace=str(DEFAULT_WORKSPACE), model=DEFAULT_MODEL, messages=None, created_at=None, updated_at=None, tool_calls=None, pinned=False, archived=False, project_id=None, profile=None, **kwargs):
-        self.session_id = session_id or uuid.uuid4().hex[:12]; self.title = title; self.workspace = str(Path(workspace).expanduser().resolve()); self.model = model; self.messages = messages or []; self.tool_calls = tool_calls or []; self.created_at = created_at or time.time(); self.updated_at = updated_at or time.time(); self.pinned = bool(pinned); self.archived = bool(archived); self.project_id = project_id or None; self.profile = profile
+    def __init__(self, session_id=None, title='Untitled',
+                 workspace=str(DEFAULT_WORKSPACE), model=DEFAULT_MODEL,
+                 messages=None, created_at=None, updated_at=None,
+                 tool_calls=None, pinned=False, archived=False,
+                 project_id=None, profile=None,
+                 input_tokens=0, output_tokens=0, estimated_cost=None,
+                 **kwargs):
+        self.session_id = session_id or uuid.uuid4().hex[:12]
+        self.title = title
+        self.workspace = str(Path(workspace).expanduser().resolve())
+        self.model = model
+        self.messages = messages or []
+        self.tool_calls = tool_calls or []
+        self.created_at = created_at or time.time()
+        self.updated_at = updated_at or time.time()
+        self.pinned = bool(pinned)
+        self.archived = bool(archived)
+        self.project_id = project_id or None
+        self.profile = profile
+        self.input_tokens = input_tokens or 0
+        self.output_tokens = output_tokens or 0
+        self.estimated_cost = estimated_cost
+
     @property
-    def path(self): return SESSION_DIR / f'{self.session_id}.json'
-    def save(self): self.updated_at = time.time(); self.path.write_text(json.dumps(self.__dict__, ensure_ascii=False, indent=2), encoding='utf-8'); _write_session_index()
+    def path(self):
+        return SESSION_DIR / f'{self.session_id}.json'
+
+    def save(self):
+        self.updated_at = time.time()
+        self.path.write_text(
+            json.dumps(self.__dict__, ensure_ascii=False, indent=2),
+            encoding='utf-8',
+        )
+        _write_session_index()
+
     @classmethod
     def load(cls, sid):
         p = SESSION_DIR / f'{sid}.json'
-        if not p.exists(): return None
+        if not p.exists():
+            return None
         return cls(**json.loads(p.read_text(encoding='utf-8')))
-    def compact(self): return {'session_id': self.session_id, 'title': self.title, 'workspace': self.workspace, 'model': self.model, 'message_count': len(self.messages), 'created_at': self.created_at, 'updated_at': self.updated_at, 'pinned': self.pinned, 'archived': self.archived, 'project_id': self.project_id, 'profile': self.profile}
+
+    def compact(self):
+        return {
+            'session_id': self.session_id,
+            'title': self.title,
+            'workspace': self.workspace,
+            'model': self.model,
+            'message_count': len(self.messages),
+            'created_at': self.created_at,
+            'updated_at': self.updated_at,
+            'pinned': self.pinned,
+            'archived': self.archived,
+            'project_id': self.project_id,
+            'profile': self.profile,
+            'input_tokens': self.input_tokens,
+            'output_tokens': self.output_tokens,
+            'estimated_cost': self.estimated_cost,
+        }
 
 def get_session(sid):
     with LOCK:

api/routes.py

@@ -223,11 +223,29 @@ def handle_get(handler, parsed):
         return j(handler, {'skills': data.get('skills', [])})
 
     if parsed.path == '/api/skills/content':
-        from tools.skills_tool import skill_view as _skill_view
-        name = parse_qs(parsed.query).get('name', [''])[0]
+        from tools.skills_tool import skill_view as _skill_view, SKILLS_DIR
+        qs = parse_qs(parsed.query)
+        name = qs.get('name', [''])[0]
         if not name: return j(handler, {'error': 'name required'}, status=400)
+        file_path = qs.get('file', [''])[0]
+        if file_path:
+            # Serve a linked file from the skill directory
+            import re as _re
+            if _re.search(r'[*?\[\]]', name):
+                return bad(handler, 'Invalid skill name', 400)
+            skill_dir = None
+            for p in SKILLS_DIR.rglob(name):
+                if p.is_dir(): skill_dir = p; break
+            if not skill_dir: return bad(handler, 'Skill not found', 404)
+            target = (skill_dir / file_path).resolve()
+            try: target.relative_to(skill_dir.resolve())
+            except ValueError: return bad(handler, 'Invalid file path', 400)
+            if not target.exists() or not target.is_file():
+                return bad(handler, 'File not found', 404)
+            return j(handler, {'content': target.read_text(encoding='utf-8'), 'path': file_path})
         raw = _skill_view(name)
         data = json.loads(raw) if isinstance(raw, str) else raw
+        if 'linked_files' not in data: data['linked_files'] = {}
         return j(handler, data)
 
     # ── Memory API (GET) ──

api/streaming.py

@@ -170,12 +170,26 @@ def _run_agent_streaming(session_id, msg_text, model, workspace, stream_id, atta
                 persist_user_message=msg_text,
             )
             s.messages = result.get('messages') or s.messages
+            # Stamp 'timestamp' on any messages that don't have one yet
+            _now = time.time()
+            for _m in s.messages:
+                if isinstance(_m, dict) and not _m.get('timestamp') and not _m.get('_ts'):
+                    _m['timestamp'] = int(_now)
             s.title = title_from(s.messages, s.title)
+            # Read token/cost usage from the agent object (if available)
+            input_tokens = getattr(agent, 'session_prompt_tokens', 0) or 0
+            output_tokens = getattr(agent, 'session_completion_tokens', 0) or 0
+            estimated_cost = getattr(agent, 'session_estimated_cost_usd', None)
+            s.input_tokens = (s.input_tokens or 0) + input_tokens
+            s.output_tokens = (s.output_tokens or 0) + output_tokens
+            if estimated_cost:
+                s.estimated_cost = (s.estimated_cost or 0) + estimated_cost
             # Extract tool call metadata grouped by assistant message index
             # Each tool call gets assistant_msg_idx so the client can render
             # cards inline with the assistant bubble that triggered them.
             tool_calls = []
             pending_names = {}   # tool_call_id -> name
+            pending_args = {}    # tool_call_id -> args dict
             pending_asst_idx = {} # tool_call_id -> index in s.messages
             for msg_idx, m in enumerate(s.messages):
                 if m.get('role') == 'assistant':
@@ -184,22 +198,31 @@ def _run_agent_streaming(session_id, msg_text, model, workspace, stream_id, atta
                         for p in c:
                             if isinstance(p, dict) and p.get('type') == 'tool_use':
                                 tid = p.get('id', '')
-                                pending_names[tid] = p.get('name', 'tool')
+                                pending_names[tid] = p.get('name', '')
+                                pending_args[tid] = p.get('input', {})
                                 pending_asst_idx[tid] = msg_idx
                 elif m.get('role') == 'tool':
                     tid = m.get('tool_call_id') or m.get('tool_use_id', '')
-                    name = pending_names.get(tid, 'tool')
+                    name = pending_names.get(tid, '')
+                    if not name or name == 'tool':
+                        continue  # skip unresolvable tool entries
                     asst_idx = pending_asst_idx.get(tid, -1)
+                    args = pending_args.get(tid, {})
                     raw = str(m.get('content', ''))
                     try:
-                        import json as _j2
-                        rd = _j2.loads(raw)
+                        rd = json.loads(raw)
                         snippet = str(rd.get('output') or rd.get('result') or rd.get('error') or raw)[:200]
                     except Exception:
                         snippet = raw[:200]
+                    # Truncate args values for storage
+                    args_snap = {}
+                    if isinstance(args, dict):
+                        for k, v in list(args.items())[:6]:
+                            s2 = str(v)
+                            args_snap[k] = s2[:120] + ('...' if len(s2) > 120 else '')
                     tool_calls.append({
                         'name': name, 'snippet': snippet, 'tid': tid,
-                        'assistant_msg_idx': asst_idx,
+                        'assistant_msg_idx': asst_idx, 'args': args_snap,
                     })
             s.tool_calls = tool_calls
             # Tag the matching user message with attachment filenames for display on reload
@@ -215,7 +238,8 @@ def _run_agent_streaming(session_id, msg_text, model, workspace, stream_id, atta
                             m['attachments'] = attachments
                             break
             s.save()
-            put('done', {'session': s.compact() | {'messages': s.messages, 'tool_calls': tool_calls}})
+            usage = {'input_tokens': input_tokens, 'output_tokens': output_tokens, 'estimated_cost': estimated_cost}
+            put('done', {'session': s.compact() | {'messages': s.messages, 'tool_calls': tool_calls}, 'usage': usage})
           finally:
             if old_cwd is None: os.environ.pop('TERMINAL_CWD', None)
             else: os.environ['TERMINAL_CWD'] = old_cwd

static/boot.js

@@ -308,7 +308,7 @@ document.querySelectorAll('.suggestion').forEach(btn=>{
 
 (async()=>{
   // Load send key preference
-  try{const s=await api('/api/settings');window._sendKey=s.send_key||'enter';}catch(e){window._sendKey='enter';}
+  try{const s=await api('/api/settings');window._sendKey=s.send_key||'enter';window._showTokenUsage=!!s.show_token_usage;}catch(e){window._sendKey='enter';window._showTokenUsage=false;}
   // Fetch active profile
   try{const p=await api('/api/profile/active');S.activeProfile=p.name||'default';}catch(e){S.activeProfile='default';}
   // Update profile chip label immediately

static/commands.js

@@ -8,6 +8,7 @@ const COMMANDS=[
   {name:'model',     desc:'Switch model (e.g. /model gpt-4o)',  fn:cmdModel,     arg:'model_name'},
   {name:'workspace', desc:'Switch workspace by name',            fn:cmdWorkspace, arg:'name'},
   {name:'new',       desc:'Start a new chat session',            fn:cmdNew},
+  {name:'usage',     desc:'Toggle token usage display on/off',   fn:cmdUsage},
 ];
 
 function parseCommand(text){
@@ -98,6 +99,19 @@ async function cmdNew(){
   showToast('New session created');
 }
 
+async function cmdUsage(){
+  const next=!window._showTokenUsage;
+  window._showTokenUsage=next;
+  try{
+    await api('/api/settings',{method:'POST',body:JSON.stringify({show_token_usage:next})});
+  }catch(e){}
+  // Update the settings checkbox if the panel is open
+  const cb=$('settingsShowTokenUsage');
+  if(cb) cb.checked=next;
+  renderMessages();
+  showToast('Token usage '+(next?'on':'off'));
+}
+
 // ── Autocomplete dropdown ───────────────────────────────────────────────────
 
 let _cmdSelectedIdx=-1;

static/index.html

@@ -45,11 +45,16 @@
         <input id="cronFormName" placeholder="Job name (optional)" style="width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;margin-bottom:6px">
         <input id="cronFormSchedule" placeholder="Schedule: '0 9 * * *' or 'every 1h'" style="width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;margin-bottom:6px">
         <textarea id="cronFormPrompt" rows="3" placeholder="Prompt (must be self-contained)" style="width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;resize:none;font-family:inherit;margin-bottom:6px"></textarea>
-        <select id="cronFormDeliver" style="width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;margin-bottom:8px">
+        <select id="cronFormDeliver" style="width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;margin-bottom:6px">
           <option value="local">Local (save output only)</option>
           <option value="discord">Discord</option>
           <option value="telegram">Telegram</option>
         </select>
+        <div class="skill-picker-wrap" style="margin-bottom:8px">
+          <input id="cronFormSkillSearch" placeholder="Add skills (optional)..." style="width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none" autocomplete="off">
+          <div id="cronFormSkillDropdown" class="skill-picker-dropdown" style="display:none"></div>
+          <div id="cronFormSkillTags" class="skill-picker-tags"></div>
+        </div>
         <div style="display:flex;gap:6px">
           <button class="cron-btn run" style="flex:1" onclick="submitCronCreate()">Create job</button>
           <button class="cron-btn" style="flex:1" onclick="toggleCronForm()">Cancel</button>
@@ -319,6 +324,13 @@
           <option value="ctrl+enter">Ctrl+Enter (Enter for newline)</option>
         </select>
       </div>
+      <div class="settings-field">
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+          <input type="checkbox" id="settingsShowTokenUsage" style="width:15px;height:15px;accent-color:var(--accent)">
+          Show token usage after responses
+        </label>
+        <div style="font-size:11px;color:var(--muted);margin-top:4px">Displays input/output token count below each assistant reply. Also toggled with <code>/usage</code>.</div>
+      </div>
       <div class="settings-field" style="border-top:1px solid var(--border);padding-top:12px;margin-top:8px">
         <label for="settingsPassword">Access Password</label>
         <div style="font-size:11px;color:var(--muted);margin-bottom:6px">Enter a new password to set or change it. Leave blank to keep current setting.</div>

static/messages.js

@@ -146,6 +146,10 @@ async function send(){
       }
       if(S.session&&S.session.session_id===activeSid){
         S.session=d.session;S.messages=d.session.messages||[];
+        // Stamp _ts on the last assistant message if it has no timestamp
+        const lastAsst=[...S.messages].reverse().find(m=>m.role==='assistant');
+        if(lastAsst&&!lastAsst._ts&&!lastAsst.timestamp) lastAsst._ts=Date.now()/1000;
+        if(d.usage) S.lastUsage=d.usage;
         if(d.session.tool_calls&&d.session.tool_calls.length){
           S.toolCalls=d.session.tool_calls.map(tc=>({...tc,done:true}));
         } else {

static/panels.js

@@ -79,6 +79,9 @@ async function loadCrons() {
   } catch(e) { box.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`; }
 }
 
+let _cronSelectedSkills=[];
+let _cronSkillsCache=null;
+
 function toggleCronForm(){
   const form=$('cronCreateForm');
   if(!form)return;
@@ -90,10 +93,70 @@ function toggleCronForm(){
     $('cronFormPrompt').value='';
     $('cronFormDeliver').value='local';
     $('cronFormError').style.display='none';
+    _cronSelectedSkills=[];
+    _renderCronSkillTags();
+    const search=$('cronFormSkillSearch');
+    if(search)search.value='';
+    // Pre-fetch skills for the picker
+    if(!_cronSkillsCache){
+      api('/api/skills').then(d=>{_cronSkillsCache=d.skills||[];}).catch(()=>{});
+    }
     $('cronFormName').focus();
   }
 }
 
+function _renderCronSkillTags(){
+  const wrap=$('cronFormSkillTags');
+  if(!wrap)return;
+  wrap.innerHTML='';
+  for(const name of _cronSelectedSkills){
+    const tag=document.createElement('span');
+    tag.className='skill-tag';
+    tag.dataset.skill=name;
+    const rm=document.createElement('span');
+    rm.className='remove-tag';rm.textContent='×';
+    rm.onclick=()=>{_cronSelectedSkills=_cronSelectedSkills.filter(s=>s!==name);tag.remove();};
+    tag.appendChild(document.createTextNode(name));
+    tag.appendChild(rm);
+    wrap.appendChild(tag);
+  }
+}
+
+// Skill search input handler
+(function(){
+  const setup=()=>{
+    const search=$('cronFormSkillSearch');
+    const dropdown=$('cronFormSkillDropdown');
+    if(!search||!dropdown)return;
+    search.oninput=()=>{
+      const q=search.value.trim().toLowerCase();
+      if(!q||!_cronSkillsCache){dropdown.style.display='none';return;}
+      const matches=_cronSkillsCache.filter(s=>
+        !_cronSelectedSkills.includes(s.name)&&
+        (s.name.toLowerCase().includes(q)||(s.category||'').toLowerCase().includes(q))
+      ).slice(0,8);
+      if(!matches.length){dropdown.style.display='none';return;}
+      dropdown.innerHTML='';
+      for(const s of matches){
+        const opt=document.createElement('div');
+        opt.className='skill-opt';
+        opt.textContent=s.name+(s.category?' ('+s.category+')':'');
+        opt.onclick=()=>{
+          _cronSelectedSkills.push(s.name);
+          _renderCronSkillTags();
+          search.value='';
+          dropdown.style.display='none';
+        };
+        dropdown.appendChild(opt);
+      }
+      dropdown.style.display='';
+    };
+    search.onblur=()=>setTimeout(()=>{dropdown.style.display='none';},150);
+  };
+  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',setup);
+  else setTimeout(setup,0);
+})();
+
 async function submitCronCreate(){
   const name=$('cronFormName').value.trim();
   const schedule=$('cronFormSchedule').value.trim();
@@ -104,7 +167,10 @@ async function submitCronCreate(){
   if(!schedule){errEl.textContent='Schedule is required (e.g. "0 9 * * *" or "every 1h")';errEl.style.display='';return;}
   if(!prompt){errEl.textContent='Prompt is required';errEl.style.display='';return;}
   try{
-    await api('/api/crons/create',{method:'POST',body:JSON.stringify({name:name||undefined,schedule,prompt,deliver})});
+    const body={schedule,prompt,deliver};
+    if(name)body.name=name;
+    if(_cronSelectedSkills.length)body.skills=_cronSelectedSkills;
+    await api('/api/crons/create',{method:'POST',body:JSON.stringify(body)});
     toggleCronForm();
     showToast('Job created ✓');
     await loadCrons();
@@ -344,12 +410,49 @@ async function openSkill(name, el) {
     $('previewBadge').textContent = 'skill';
     $('previewBadge').className = 'preview-badge md';
     showPreview('md');
-    $('previewMd').innerHTML = renderMd(data.content || '(no content)');
+    let html = renderMd(data.content || '(no content)');
+    // Render linked files section if present
+    const lf = data.linked_files || {};
+    const categories = Object.entries(lf).filter(([,files]) => files && files.length > 0);
+    if (categories.length) {
+      html += '<div class="skill-linked-files"><div style="font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Linked Files</div>';
+      for (const [cat, files] of categories) {
+        html += `<div class="skill-linked-section"><h4>${esc(cat)}</h4>`;
+        for (const f of files) {
+          html += `<a class="skill-linked-file" href="#" data-skill-name="${esc(name)}" data-skill-file="${esc(f)}">${esc(f)}</a>`;
+        }
+        html += '</div>';
+      }
+      html += '</div>';
+    }
+    $('previewMd').innerHTML = html;
+    // Wire linked-file clicks via data attributes (avoids inline JS XSS with apostrophes)
+    $('previewMd').querySelectorAll('.skill-linked-file').forEach(a=>{
+      a.addEventListener('click',e=>{e.preventDefault();openSkillFile(a.dataset.skillName,a.dataset.skillFile);});
+    });
     $('previewArea').classList.add('visible');
     $('fileTree').style.display = 'none';
   } catch(e) { setStatus('Could not load skill: ' + e.message); }
 }
 
+async function openSkillFile(skillName, filePath) {
+  try {
+    const data = await api(`/api/skills/content?name=${encodeURIComponent(skillName)}&file=${encodeURIComponent(filePath)}`);
+    $('previewPathText').textContent = skillName + ' / ' + filePath;
+    $('previewBadge').textContent = filePath.split('.').pop() || 'file';
+    $('previewBadge').className = 'preview-badge code';
+    const ext = filePath.split('.').pop() || '';
+    if (['md','markdown'].includes(ext)) {
+      showPreview('md');
+      $('previewMd').innerHTML = renderMd(data.content || '');
+    } else {
+      showPreview('code');
+      $('previewCode').textContent = data.content || '';
+      requestAnimationFrame(() => highlightCode());
+    }
+  } catch(e) { setStatus('Could not load file: ' + e.message); }
+}
+
 // ── Skill create/edit form ──
 let _editingSkillName = null;
 
@@ -855,6 +958,8 @@ async function loadSettingsPanel(){
     // Send key preference
     const sendKeySel=$('settingsSendKey');
     if(sendKeySel) sendKeySel.value=settings.send_key||'enter';
+    const showUsageCb=$('settingsShowTokenUsage');
+    if(showUsageCb) showUsageCb.checked=!!settings.show_token_usage;
     // Password field: always blank (we don't send hash back)
     const pwField=$('settingsPassword');
     if(pwField) pwField.value='';
@@ -876,16 +981,19 @@ async function saveSettings(){
   const model=($('settingsModel')||{}).value;
   const workspace=($('settingsWorkspace')||{}).value;
   const sendKey=($('settingsSendKey')||{}).value;
+  const showTokenUsage=!!($('settingsShowTokenUsage')||{}).checked;
   const pw=($('settingsPassword')||{}).value;
   const body={};
   if(model) body.default_model=model;
   if(workspace) body.default_workspace=workspace;
   if(sendKey) body.send_key=sendKey;
+  body.show_token_usage=showTokenUsage;
   // Password: only act if the field has content; blank = leave auth unchanged
   if(pw && pw.trim()){
     try{
       await api('/api/settings',{method:'POST',body:JSON.stringify({...body,_set_password:pw.trim()})});
       window._sendKey=sendKey||'enter';
+      window._showTokenUsage=showTokenUsage;
       showToast('Settings saved (password set — login now required)');
       toggleSettings();
       return;
@@ -894,6 +1002,8 @@ async function saveSettings(){
   try{
     await api('/api/settings',{method:'POST',body:JSON.stringify(body)});
     window._sendKey=sendKey||'enter';
+    window._showTokenUsage=showTokenUsage;
+    renderMessages();
     showToast('Settings saved');
     toggleSettings();
   }catch(e){

static/style.css

@@ -562,6 +562,26 @@ body.resizing{user-select:none;cursor:col-resize;}
 /* Show more button inside tool card result */
 .tool-card-more{background:none;border:none;color:var(--blue);font-size:10px;cursor:pointer;padding:3px 0 0;opacity:.7;display:block;}
 .tool-card-more:hover{opacity:1;}
+/* Subagent cards: indented with accent border */
+.tool-card-subagent{border-left:2px solid rgba(124,185,255,.3);margin-left:8px;}
+/* Token usage badge below assistant messages */
+.msg-usage{font-size:11px;color:var(--muted);opacity:.6;margin-top:2px;padding-left:42px;}
+.msg-usage:hover{opacity:1;}
+/* Skill picker (cron create form) */
+.skill-picker-wrap{position:relative;}
+.skill-picker-dropdown{position:absolute;left:0;right:0;top:100%;background:var(--sidebar);border:1px solid var(--border2);border-radius:6px;z-index:10;max-height:180px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.3);}
+.skill-opt{padding:6px 10px;cursor:pointer;font-size:12px;color:var(--muted);transition:background .1s;}
+.skill-opt:hover{background:rgba(255,255,255,.08);color:var(--text);}
+.skill-picker-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
+.skill-tag{background:rgba(124,185,255,.12);border:1px solid rgba(124,185,255,.25);border-radius:12px;padding:2px 8px;font-size:11px;color:var(--blue);display:flex;align-items:center;gap:4px;}
+.remove-tag{cursor:pointer;opacity:.6;font-size:13px;line-height:1;}
+.remove-tag:hover{opacity:1;color:var(--accent);}
+/* Skill linked files section */
+.skill-linked-files{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
+.skill-linked-section{margin-bottom:8px;}
+.skill-linked-section h4{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;}
+.skill-linked-file{display:block;font-size:12px;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--blue);text-decoration:none;}
+.skill-linked-file:hover{background:rgba(255,255,255,.06);}
 .tool-card-row{margin:0;padding:1px 0;}
 .tool-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;margin:2px 0 2px 40px;overflow:hidden;transition:border-color .15s;}
 .tool-card:hover{border-color:rgba(255,255,255,.12);}

static/ui.js

@@ -82,6 +82,8 @@ let _scrollPinned=true;
     _scrollPinned=nearBottom;
   });
 })();
+function _fmtTokens(n){if(!n||n<0)return'0';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');
@@ -424,7 +426,7 @@ function renderMessages(){
       inner.appendChild(thinkRow);
     }
     const row=document.createElement('div');row.className='msg-row';
-    row.dataset.msgIdx=rawIdx;
+    row.dataset.msgIdx=rawIdx;row.dataset.role=m.role||'assistant';
     let filesHtml='';
     if(m.attachments&&m.attachments.length)
       filesHtml=`<div class="msg-files">${m.attachments.map(f=>`<div class="msg-file-badge">&#128206; ${esc(f)}</div>`).join('')}</div>`;
@@ -486,6 +488,23 @@ function renderMessages(){
       else inner.appendChild(frag);
     }
   }
+  // Render usage badge on the last assistant message row (if enabled and usage data exists)
+  if(window._showTokenUsage&&S.session&&(S.session.input_tokens||S.session.output_tokens)){
+    const rows=inner.querySelectorAll('.msg-row');
+    let lastAssist=null;
+    for(let i=rows.length-1;i>=0;i--){if(rows[i].dataset.role==='assistant'){lastAssist=rows[i];break;}}
+    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 +518,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 +540,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">
@@ -890,9 +919,11 @@ function _renderTreeItems(container, entries, depth){
         e.stopPropagation();
         if(S._expandedDirs.has(item.path)){
           S._expandedDirs.delete(item.path);
+          if(typeof _saveExpandedDirs==='function')_saveExpandedDirs();
           renderFileTree();
         }else{
           S._expandedDirs.add(item.path);
+          if(typeof _saveExpandedDirs==='function')_saveExpandedDirs();
           // Fetch children if not cached
           if(!S._dirCache[item.path]){
             try{

static/workspace.js

@@ -12,13 +12,46 @@ async function api(path,opts={}){
   return ct.includes('application/json')?res.json():res.text();
 }
 
+// Persist/restore expanded directory state per workspace in localStorage
+function _wsExpandKey(){
+  const ws=S.session&&S.session.workspace;
+  return ws?'hermes-webui-expanded:'+ws:null;
+}
+function _saveExpandedDirs(){
+  const key=_wsExpandKey();if(!key)return;
+  try{localStorage.setItem(key,JSON.stringify([...(S._expandedDirs||new Set())]));}catch(e){}
+}
+function _restoreExpandedDirs(){
+  const key=_wsExpandKey();
+  if(!key){S._expandedDirs=new Set();return;}
+  try{
+    const raw=localStorage.getItem(key);
+    S._expandedDirs=raw?new Set(JSON.parse(raw)):new Set();
+  }catch(e){S._expandedDirs=new Set();}
+}
+
 async function loadDir(path){
   if(!S.session)return;
   try{
-    if(!path||path==='.'){ S._dirCache={}; if(S._expandedDirs)S._expandedDirs=new Set(); }
+    if(!path||path==='.'){
+      S._dirCache={};
+      _restoreExpandedDirs();  // restore per-workspace expanded state on root load
+    }
     S.currentDir=path||'.';
     const data=await api(`/api/list?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}`);
     S.entries=data.entries||[];renderBreadcrumb();renderFileTree();
+    // Pre-fetch contents of restored expanded dirs so they render without a second click
+    if(!path||path==='.'){
+      for(const dirPath of (S._expandedDirs||[])){
+        if(!S._dirCache[dirPath]){
+          try{
+            const dc=await api(`/api/list?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(dirPath)}`);
+            S._dirCache[dirPath]=dc.entries||[];
+          }catch(e2){S._dirCache[dirPath]=[];}
+        }
+      }
+      if(S._expandedDirs&&S._expandedDirs.size>0)renderFileTree();
+    }
     if(typeof clearPreview==='function'){
       if(typeof _previewDirty!=='undefined'&&_previewDirty){
         if(confirm('You have unsaved changes in the preview. Discard and navigate?'))clearPreview();

tests/test_sprint23.py

@@ -1,15 +1,21 @@
-"""Sprint 23 tests: profile/workspace/model coherence."""
-import json, pathlib, re, urllib.request, urllib.error
+"""
+Sprint 23 Tests: agentic transparency — token/cost display, session usage fields,
+subagent card names, skill picker in cron, skill linked files.
+"""
+import json, urllib.error, urllib.request
 
 BASE = "http://127.0.0.1:8788"
 
+
 def get(path):
     with urllib.request.urlopen(BASE + path, timeout=10) as r:
         return json.loads(r.read()), r.status
 
+
 def post(path, body=None):
     data = json.dumps(body or {}).encode()
-    req = urllib.request.Request(BASE + path, data=data, headers={"Content-Type": "application/json"})
+    req = urllib.request.Request(BASE + path, data=data,
+                                headers={"Content-Type": "application/json"})
     try:
         with urllib.request.urlopen(req, timeout=10) as r:
             return json.loads(r.read()), r.status
@@ -17,177 +23,174 @@ def post(path, body=None):
         return json.loads(e.read()), e.code
 
 
-# ── Workspace profile-locality ──────────────────────────────────────────────
-
-def test_workspace_list_returns_data():
-    """Workspace list endpoint works after profile-local refactor."""
-    data, status = get("/api/workspaces")
-    assert status == 200
-    assert "workspaces" in data
-    assert isinstance(data["workspaces"], list)
-    assert "last" in data
+def make_session(created_list):
+    d, _ = post("/api/session/new", {})
+    sid = d["session"]["session_id"]
+    created_list.append(sid)
+    return sid, d["session"]
 
 
-def test_workspace_add_remove_roundtrip():
-    """Workspace add/remove still works with profile-local storage."""
-    import os
-    # Use a path that won't resolve differently (macOS /tmp -> /private/tmp)
-    resolved_tmp = str(pathlib.Path("/tmp").resolve())
-    # Clean slate
-    post("/api/workspaces/remove", {"path": resolved_tmp})
-    # Add
-    data, status = post("/api/workspaces/add", {"path": "/tmp", "name": "Temp"})
-    assert status == 200
-    assert any(w["path"] == resolved_tmp for w in data.get("workspaces", []))
-    # Remove
-    data, status = post("/api/workspaces/remove", {"path": resolved_tmp})
-    assert status == 200
-    assert not any(w["path"] == resolved_tmp for w in data.get("workspaces", []))
+# ── Session usage fields ─────────────────────────────────────────────────
 
-
-# ── Profile switch response fields ─────────────────────────────────────────
-
-def test_profile_switch_returns_default_model_and_workspace():
-    """switch_profile() response includes default_model and default_workspace."""
-    # Prior tests (test_chat_stream_opens_successfully) may leave a live LLM stream in
-    # STREAMS. The server-side thread keeps running until the LLM response completes.
-    # Wait up to 30 seconds for it to drain before attempting the profile switch.
-    import time
-    for _ in range(60):
-        health, _ = get("/health")
-        if health.get("active_streams", 0) == 0:
-            break
-        time.sleep(0.5)
-    data, status = post("/api/profile/switch", {"name": "default"})
-    assert status == 200, f"Profile switch returned {status}: {data}"
-    assert "active" in data
-    assert data["active"] == "default"
-    # default_workspace should always be present (may be null for model)
-    assert "default_workspace" in data
-    assert isinstance(data["default_workspace"], str)
-    assert "default_model" in data  # can be None
-
-
-def test_profile_active_endpoint():
-    """GET /api/profile/active returns name and path."""
-    data, status = get("/api/profile/active")
-    assert status == 200
-    assert "name" in data, "Response missing 'name' field"
-    assert isinstance(data["name"], str) and data["name"], "Profile name should be a non-empty string"
-    assert "path" in data
-
-
-# ── Session profile tagging ────────────────────────────────────────────────
-
-def test_new_session_has_profile_field():
-    """Sessions created after Sprint 22 should have a profile field."""
-    data, status = post("/api/session/new", {})
-    assert status == 200
-    session = data["session"]
-    assert "profile" in session
-    # Clean up
-    post("/api/session/delete", {"session_id": session["session_id"]})
-
-
-def test_sessions_list_includes_profile():
-    """Sessions created after Sprint 22 expose a profile field."""
-    # Create a session and check via the direct session endpoint
-    # (/api/sessions filters out empty Untitled sessions; use /api/session instead)
-    create_data, _ = post("/api/session/new", {})
-    sid = create_data["session"]["session_id"]
+def test_new_session_has_usage_fields():
+    """New session should include input_tokens, output_tokens, estimated_cost."""
+    created = []
     try:
-        data, status = get(f"/api/session?session_id={sid}")
+        sid, sess = make_session(created)
+        post("/api/session/rename", {"session_id": sid, "title": "Usage Test"})
+        d, status = get(f"/api/session?session_id={sid}")
         assert status == 200
-        session = data.get("session", data)
-        assert "profile" in session, f"'profile' field missing from session: {list(session.keys())}"
+        sess = d["session"]
+        assert "input_tokens" in sess, "input_tokens field missing from session"
+        assert "output_tokens" in sess, "output_tokens field missing from session"
+        assert "estimated_cost" in sess, "estimated_cost field missing from session"
+        assert sess["input_tokens"] == 0
+        assert sess["output_tokens"] == 0
     finally:
-        post("/api/session/delete", {"session_id": sid})
+        for s in created:
+            post("/api/session/delete", {"session_id": s})
 
 
-# ── Static JS analysis ─────────────────────────────────────────────────────
-
-REPO_ROOT = pathlib.Path(__file__).parent.parent.resolve()
-
-def test_sessions_js_has_profile_filter():
-    """sessions.js should filter sessions by active profile."""
-    content = (REPO_ROOT / "static" / "sessions.js").read_text()
-    assert "_showAllProfiles" in content
-    assert "profileFiltered" in content
-    assert "S.activeProfile" in content
+def test_session_compact_has_usage_fields():
+    """Session list should include usage fields in compact form."""
+    created = []
+    try:
+        sid, _ = make_session(created)
+        post("/api/session/rename", {"session_id": sid, "title": "Compact Usage"})
+        d, status = get("/api/sessions")
+        assert status == 200
+        match = [s for s in d["sessions"] if s["session_id"] == sid]
+        assert len(match) == 1
+        assert "input_tokens" in match[0], "input_tokens missing from session list"
+        assert "output_tokens" in match[0], "output_tokens missing from session list"
+        assert match[0]["input_tokens"] == 0
+        assert match[0]["output_tokens"] == 0
+    finally:
+        for s in created:
+            post("/api/session/delete", {"session_id": s})
 
 
-def test_panels_js_clears_model_on_switch():
-    """switchToProfile() must clear localStorage model key."""
-    content = (REPO_ROOT / "static" / "panels.js").read_text()
-    assert "localStorage.removeItem('hermes-webui-model')" in content
-    assert "loadWorkspaceList" in content
-    assert "renderSessionList" in content
+def test_session_usage_defaults_zero():
+    """New session usage fields should default to 0/None in creation response."""
+    created = []
+    try:
+        sid, sess = make_session(created)
+        assert "input_tokens" in sess, "input_tokens missing from new session response"
+        assert "output_tokens" in sess, "output_tokens missing from new session response"
+        assert sess["input_tokens"] == 0
+        assert sess["output_tokens"] == 0
+    finally:
+        for s in created:
+            post("/api/session/delete", {"session_id": s})
 
 
-# ── Regression: profile switch base dir bug (PR #44) ──────────────────────
+# ── Skills content linked_files ──────────────────────────────────────────
 
-def test_profile_switch_base_home_not_subdir():
-    """_DEFAULT_HERMES_HOME must always be the base ~/.hermes root, not a
-    profile subdir.  Regression: if HERMES_HOME was mutated to a profiles/
-    subdir at server startup, switch_profile() looked for
-    ~/.hermes/profiles/X/profiles/X which never exists — returning 404.
-
-    We verify the fix is present via static analysis of profiles.py.
-    The live-switch variant is in test_profile_switch_returns_default_model_and_workspace.
-    """
-    content = (REPO_ROOT / "api" / "profiles.py").read_text()
-
-    # The fix must define a resolver function that handles the profiles/ subdir case
-    assert "_resolve_base_hermes_home" in content, (
-        "profiles.py must define _resolve_base_hermes_home() to safely resolve "
-        "the base HERMES_HOME regardless of HERMES_HOME env var mutation"
-    )
-    assert "p.parent.name == 'profiles'" in content, (
-        "_resolve_base_hermes_home must detect when HERMES_HOME points to a "
-        "profiles/ subdir (e.g. ~/.hermes/profiles/webui) and walk up to base"
-    )
-    assert "p.parent.parent" in content, (
-        "_resolve_base_hermes_home must return p.parent.parent when HERMES_HOME "
-        "is a profiles/ subdir, giving back the actual ~/.hermes base"
-    )
-    # _DEFAULT_HERMES_HOME must be set from the resolver, not directly from env
-    assert "_DEFAULT_HERMES_HOME = _resolve_base_hermes_home()" in content, (
-        "_DEFAULT_HERMES_HOME must be assigned from _resolve_base_hermes_home(), "
-        "not directly from os.getenv('HERMES_HOME')"
-    )
+def test_skills_content_requires_name():
+    """GET /api/skills/content without name should return 400 (or 500 if skills module unavailable)."""
+    try:
+        d, status = get("/api/skills/content")
+        assert status in (400, 500), f"Expected 400/500 for missing name, got {status}"
+    except urllib.error.HTTPError as e:
+        assert e.code in (400, 500), f"Expected 400/500 for missing name, got {e.code}"
 
 
-def test_api_helper_returns_clean_error_message():
-    """workspace.js api() helper must parse JSON error bodies and surface
-    the human-readable 'error' field, not raw JSON like
-    {'error': 'Profile X does not exist.'}.
-
-    Regression: api() did `throw new Error(await res.text())` which made
-    showToast display 'Switch failed: {"error":"Profile X does not exist."}' --
-    JSON noise the user shouldn't see.
-    """
-    content = (REPO_ROOT / "static" / "workspace.js").read_text()
-    # Must parse the JSON error body
-    assert "JSON.parse(text)" in content, (
-        "api() must parse JSON error bodies -- raw res.text() leaks JSON to the UI"
-    )
-    # Must extract the .error field
-    assert "j.error" in content, (
-        "api() must extract j.error from parsed JSON error response"
-    )
+def test_skills_content_has_linked_files_key():
+    """GET /api/skills/content should always return a linked_files key."""
+    try:
+        d, status = get("/api/skills")
+        if not d.get("skills"):
+            return  # no skills in test env, skip
+        name = d["skills"][0]["name"]
+        d2, status2 = get(f"/api/skills/content?name={name}")
+        assert status2 == 200
+        assert "linked_files" in d2, "linked_files key missing from skills/content response"
+        # linked_files must be a dict (possibly empty), not None
+        assert isinstance(d2["linked_files"], dict), "linked_files must be a dict"
+    except urllib.error.HTTPError:
+        pass  # skills module unavailable in this env
 
 
-def test_profile_switch_resolve_base_home_logic():
-    """Static analysis: _resolve_base_hermes_home() must handle the case
-    where HERMES_HOME points to a profiles/ subdir by walking up to the base.
-    """
-    content = (REPO_ROOT / "api" / "profiles.py").read_text()
-    assert "_resolve_base_hermes_home" in content, (
-        "profiles.py must define _resolve_base_hermes_home()"
-    )
-    assert "p.parent.name == 'profiles'" in content, (
-        "_resolve_base_hermes_home must detect and unwrap profiles/ subdir paths"
-    )
-    assert "p.parent.parent" in content, (
-        "_resolve_base_hermes_home must walk up two levels from a profiles/ subdir"
-    )
+def test_skills_content_file_path_traversal_rejected():
+    """GET /api/skills/content with traversal path should be rejected."""
+    from urllib.parse import quote as _quote
+    try:
+        d, status = get("/api/skills")
+        if not d.get("skills"):
+            return  # no skills in test env, skip
+        name = d["skills"][0]["name"]
+        traversal = _quote("../../etc/passwd", safe="")
+        try:
+            d2, status2 = get(f"/api/skills/content?name={name}&file={traversal}")
+            assert status2 in (400, 404, 500), f"Path traversal should be rejected, got {status2}"
+        except urllib.error.HTTPError as e:
+            assert e.code in (400, 404, 500), f"Path traversal should be rejected, got {e.code}"
+    except urllib.error.HTTPError:
+        pass  # skills module unavailable in test env
+
+
+def test_skills_content_wildcard_name_rejected():
+    """GET /api/skills/content with glob wildcard in name should be rejected when file param present."""
+    try:
+        try:
+            d2, status2 = get("/api/skills/content?name=*&file=SKILL.md")
+            assert status2 == 400, f"Wildcard name should return 400, got {status2}"
+        except urllib.error.HTTPError as e:
+            assert e.code in (400, 404), f"Wildcard name should be rejected, got {e.code}"
+    except Exception:
+        pass
+
+
+# ── Cron create with skills ───────────────────────────────────────────────
+
+def test_cron_create_accepts_skills():
+    """POST /api/crons/create should accept and store a skills array (or 500 if cron module unavailable)."""
+    created_jobs = []
+    try:
+        body = {
+            "name": "test-sprint23-skills",
+            "schedule": "0 9 * * *",
+            "prompt": "test prompt",
+            "deliver": "local",
+            "skills": ["some-skill"]
+        }
+        d, status = post("/api/crons/create", body)
+        if status in (400, 500) and ('module' in str(d.get('error','')) or 'cron' in str(d.get('error',''))):
+            return  # cron module not available in test env
+        assert status == 200, f"Expected 200 from cron create, got {status}: {d}"
+        assert d.get("ok"), f"Cron create did not return ok: {d}"
+        job_id = d.get("job", {}).get("id") or d.get("id")
+        if job_id:
+            created_jobs.append(job_id)
+        # Verify job appears in list
+        jobs_d, _ = get("/api/crons")
+        job = next((j for j in jobs_d.get("jobs", []) if j.get("name") == "test-sprint23-skills"), None)
+        assert job is not None, "Created cron job not found in job list"
+        assert job.get("skills") == ["some-skill"] or job.get("skill") == "some-skill", \
+            f"skills not stored on job: {job}"
+    finally:
+        try:
+            for jid in created_jobs:
+                post("/api/crons/delete", {"id": jid})
+            jobs_d, _ = get("/api/crons")
+            for j in jobs_d.get("jobs", []):
+                if j.get("name") == "test-sprint23-skills":
+                    post("/api/crons/delete", {"id": j["id"]})
+        except Exception:
+            pass  # cron module may not be available
+
+
+# ── Tool call integrity ──────────────────────────────────────────────────
+
+def test_tool_calls_have_real_names():
+    """Tool calls in session JSON should not have unresolved 'tool' name."""
+    created = []
+    try:
+        sid, _ = make_session(created)
+        d, status = get(f"/api/session?session_id={sid}")
+        assert status == 200
+        for tc in d["session"].get("tool_calls", []):
+            assert tc.get("name") not in ("tool", "", None), f"Unresolved tool name: {tc}"
+    finally:
+        for s in created:
+            post("/api/session/delete", {"session_id": s})