glad-web 1.0.20 → 1.0.21

package/lib/claude/structured-session.js

@@ -3,6 +3,9 @@ const crypto = require('crypto');
 const { normalizeEffort, normalizeModel, resolveClaudeModel } = require('./config');
 
 const PERMISSION_MODES = new Set(['default', 'acceptEdits', 'bypassPermissions', 'plan']);
+const EDIT_TOOLS = new Set(['Edit', 'MultiEdit', 'Write', 'NotebookEdit']);
+const EXIT_PLAN_TOOLS = new Set(['exit_plan_mode', 'ExitPlanMode']);
+const DENY_PERMISSION_MESSAGE = "The user doesn't want to proceed with this tool use. The tool use was rejected (eg. if it was a file edit, the new_string was NOT written to the file). STOP what you are doing and wait for the user to tell you how to proceed.";
 
 function normalizePermissionMode(value) {
   const mode = String(value || 'default');
@@ -88,10 +91,14 @@ class ClaudeStructuredSession extends EventEmitter {
     this.permissionMode = normalizePermissionMode(options.permissionMode);
     this.model = normalizeModel(options.model);
     this.effort = normalizeEffort(options.effort);
+    this.allowedTools = new Set();
+    this.allowedBashLiterals = new Set();
+    this.allowedBashPrefixes = new Set();
     this.resumeSessionId = options.resume || null;
     this.claudeSessionId = options.resume || null;
     this.activeOptionSignature = null;
     this.contextRemaining = null;
+    this.latestUsage = null;
 
     // Compatibility with existing session-scoped Git/file APIs.
     this.ptyManager = {
@@ -140,6 +147,7 @@ class ClaudeStructuredSession extends EventEmitter {
       claudeSessionId: this.claudeSessionId || null,
       resumeSessionId: this.resumeSessionId || null,
       contextRemaining: this.contextRemaining,
+      latestUsage: this.latestUsage,
       canAbort: this.status === 'thinking',
       pendingPermissionCount: this.pendingPermissions.size
     };
@@ -238,7 +246,7 @@ class ClaudeStructuredSession extends EventEmitter {
 
     if (changed) {
       if (this.query && typeof this.query.setPermissionMode === 'function') {
-        Promise.resolve(this.query.setPermissionMode(this.permissionMode)).catch(error => {
+        Promise.resolve(this.query.setPermissionMode(this.getSdkPermissionMode())).catch(error => {
           this.logger.debugInfo?.(`[claude-structured] setPermissionMode failed: ${error.message}`);
         });
       }
@@ -298,18 +306,161 @@ class ClaudeStructuredSession extends EventEmitter {
     this.abortController = null;
   }
 
-  respondPermission(id, approved) {
+  finishRunner() {
+    this.runnerStarted = false;
+    this.inputQueue?.close();
+    this.inputQueue = null;
+    this.query = null;
+    this.abortController = null;
+  }
+
+  respondPermission(id, approved, action = null) {
     const pending = this.pendingPermissions.get(id);
     if (!pending) return false;
     this.pendingPermissions.delete(id);
-    const publicRequest = { ...pending.public, status: approved ? 'approved' : 'denied' };
+    const normalizedAction = this.normalizePermissionAction(action, approved);
+    const allowedTools = this.getAllowedToolsForAction(normalizedAction, pending);
+    const nextMode = this.getPermissionModeForAction(normalizedAction);
+    if (allowedTools.length > 0) this.addAllowedTools(allowedTools);
+    if (nextMode) {
+      this.permissionMode = nextMode;
+      if (this.query && typeof this.query.setPermissionMode === 'function') {
+        Promise.resolve(this.query.setPermissionMode(this.getSdkPermissionMode())).catch(error => {
+          this.logger.debugInfo?.(`[claude-structured] setPermissionMode failed: ${error.message}`);
+        });
+      }
+    }
+    const publicRequest = {
+      ...pending.public,
+      status: approved ? 'approved' : 'denied',
+      action: normalizedAction,
+      mode: nextMode || undefined,
+      allowedTools: allowedTools.length > 0 ? allowedTools : undefined
+    };
     this.emitEvent({ type: 'permission-updated', request: publicRequest });
     pending.resolve(approved
-      ? { behavior: 'allow', toolUseID: pending.toolUseID, decisionClassification: 'user_temporary' }
-      : { behavior: 'deny', message: 'Denied by user', interrupt: true, toolUseID: pending.toolUseID, decisionClassification: 'user_reject' });
+      ? {
+          behavior: 'allow',
+          updatedInput: pending.input || {},
+          updatedPermissions: this.getPermissionUpdatesForAction(normalizedAction, pending),
+          toolUseID: pending.toolUseID,
+          decisionClassification: normalizedAction === 'allow-once' ? 'user_temporary' : 'user_permanent'
+        }
+      : { behavior: 'deny', message: DENY_PERMISSION_MESSAGE, interrupt: true, toolUseID: pending.toolUseID, decisionClassification: 'user_reject' });
+    this.emitEvent({ type: 'state', state: this.getControlState() });
     return true;
   }
 
+  normalizePermissionAction(action, approved) {
+    if (!approved) return 'deny';
+    const value = String(action || '').trim();
+    if (['allow-once', 'allow-tool', 'allow-edits', 'bypass'].includes(value)) return value;
+    return 'allow-once';
+  }
+
+  getPermissionModeForAction(action) {
+    if (action === 'allow-edits') return 'acceptEdits';
+    if (action === 'bypass') return 'bypassPermissions';
+    return null;
+  }
+
+  getSdkPermissionMode() {
+    // Claude CLI refuses --dangerously-skip-permissions under root/sudo. Glad
+    // keeps bypass as local state and auto-allows through canUseTool instead.
+    if (this.permissionMode === 'bypassPermissions') return 'default';
+    return this.permissionMode;
+  }
+
+  getAllowedToolsForAction(action, pending) {
+    if (action !== 'allow-tool') return [];
+    const toolName = pending.toolName || pending.public.toolName;
+    if (!toolName) return [];
+    if (toolName === 'Bash') {
+      const command = pending.input && typeof pending.input.command === 'string'
+        ? pending.input.command
+        : '';
+      return command ? [`Bash(${command})`] : ['Bash'];
+    }
+    return [toolName];
+  }
+
+  getPermissionUpdatesForAction(action, pending) {
+    const mode = this.getPermissionModeForAction(action);
+    const allowedTools = this.getAllowedToolsForAction(action, pending);
+    const updates = [];
+    if (allowedTools.length > 0) {
+      updates.push({
+        type: 'addRules',
+        rules: allowedTools.map(tool => this.permissionRuleFromTool(tool)),
+        behavior: 'allow',
+        destination: 'session'
+      });
+    }
+    if (mode === 'acceptEdits') {
+      updates.push({
+        type: 'addRules',
+        rules: Array.from(EDIT_TOOLS).map(toolName => ({ toolName })),
+        behavior: 'allow',
+        destination: 'session'
+      });
+    }
+    return updates.length > 0 ? updates : undefined;
+  }
+
+  permissionRuleFromTool(tool) {
+    const match = String(tool || '').match(/^Bash\(([\s\S]*)\)$/);
+    if (match) return { toolName: 'Bash', ruleContent: match[1] };
+    return { toolName: String(tool || '') };
+  }
+
+  addAllowedTools(tools) {
+    for (const tool of tools) {
+      if (tool === 'Bash') {
+        this.allowedTools.add(tool);
+      } else if (tool.startsWith('Bash(')) {
+        this.parseBashPermission(tool);
+      } else {
+        this.allowedTools.add(tool);
+      }
+    }
+  }
+
+  parseBashPermission(permission) {
+    const match = String(permission || '').match(/^Bash\(([\s\S]*)\)$/);
+    if (!match) return;
+    const command = match[1];
+    if (command.endsWith(':*')) {
+      this.allowedBashPrefixes.add(command.slice(0, -2));
+    } else {
+      this.allowedBashLiterals.add(command);
+    }
+  }
+
+  isToolAllowed(toolName, input) {
+    if (toolName === 'Bash') {
+      if (this.allowedTools.has('Bash')) return true;
+      const command = input && typeof input.command === 'string' ? input.command : '';
+      if (command && this.allowedBashLiterals.has(command)) return true;
+      for (const prefix of this.allowedBashPrefixes) {
+        if (command.startsWith(prefix)) return true;
+      }
+      return false;
+    }
+    return this.allowedTools.has(toolName);
+  }
+
+  shouldAutoAllowTool(toolName, input) {
+    if (this.isToolAllowed(toolName, input)) return true;
+    if (this.permissionMode === 'bypassPermissions' && !EXIT_PLAN_TOOLS.has(toolName)) return true;
+    if (this.permissionMode === 'acceptEdits' && EDIT_TOOLS.has(toolName)) return true;
+    if (this.permissionMode === 'plan' && !this.isDangerousTool(toolName)) return true;
+    return false;
+  }
+
+  isDangerousTool(toolName) {
+    return toolName === 'Bash' || EDIT_TOOLS.has(toolName) || EXIT_PLAN_TOOLS.has(toolName);
+  }
+
   markCompletionRead() {
     this.hasUnreadCompletion = false;
     this.completionReadInputSeq = this.inputSeq || 0;
@@ -330,7 +481,8 @@ class ClaudeStructuredSession extends EventEmitter {
       const options = {
         cwd: this.workingDir,
         resume: this.resumeSessionId || undefined,
-        permissionMode: this.permissionMode,
+        permissionMode: this.getSdkPermissionMode(),
+        allowDangerouslySkipPermissions: false,
         effort: this.effort,
         tools: { type: 'preset', preset: 'claude_code' },
         env: {
@@ -349,10 +501,12 @@ class ClaudeStructuredSession extends EventEmitter {
       for await (const message of this.query) {
         this.handleSdkMessage(message);
       }
+      this.finishRunner();
       this.setStatus('idle');
     } catch (error) {
       if (!this.running) return;
       if (this.abortRequested) {
+        this.finishRunner();
         this.setStatus('idle');
         return;
       }
@@ -375,12 +529,26 @@ class ClaudeStructuredSession extends EventEmitter {
   }
 
   requestPermission(toolName, input, options = {}) {
+    if (toolName !== 'AskUserQuestion' && this.shouldAutoAllowTool(toolName, input)) {
+      return Promise.resolve({
+        behavior: 'allow',
+        updatedInput: input || {},
+        toolUseID: options.toolUseID,
+        decisionClassification: 'user_permanent'
+      });
+    }
     const id = crypto.randomUUID();
     const request = {
       id,
       toolName,
       title: options.title || `${toolName} requires approval`,
-      reason: options.decisionReason || '',
+      displayName: options.displayName || '',
+      description: options.description || '',
+      reason: options.decisionReason || options.description || '',
+      blockedPath: options.blockedPath || null,
+      canAllowTool: Boolean(toolName && !EDIT_TOOLS.has(toolName) && !EXIT_PLAN_TOOLS.has(toolName)),
+      canAllowEdits: EDIT_TOOLS.has(toolName) || EXIT_PLAN_TOOLS.has(toolName),
+      canBypass: EXIT_PLAN_TOOLS.has(toolName),
       input,
       createdAt: Date.now(),
       status: 'pending'
@@ -390,6 +558,8 @@ class ClaudeStructuredSession extends EventEmitter {
       this.pendingPermissions.set(id, {
         public: request,
         resolve,
+        input,
+        toolName,
         toolUseID: options.toolUseID
       });
     });
@@ -412,6 +582,8 @@ class ClaudeStructuredSession extends EventEmitter {
     }
 
     if (message.type === 'assistant') {
+      const usage = message.message && message.message.usage;
+      if (usage) this.updateLatestUsageFromClaudeUsage(usage, message.message.model);
       const content = message.message && message.message.content;
       const text = textFromContent(content).trim();
       const toolBlocks = Array.isArray(content)
@@ -467,6 +639,25 @@ class ClaudeStructuredSession extends EventEmitter {
     const usage = message && (message.usage || message.total_usage || message.result && message.result.usage);
     const context = usage && (usage.context_remaining || usage.contextRemaining || usage.remaining_context || usage.remainingContext);
     this.contextRemaining = typeof context === 'number' ? context : null;
+    if (usage) this.updateLatestUsageFromClaudeUsage(usage, message.model || message.result && message.result.model);
+  }
+
+  updateLatestUsageFromClaudeUsage(usage, model = null) {
+    const inputTokens = Number(usage.input_tokens || usage.inputTokens || 0);
+    const outputTokens = Number(usage.output_tokens || usage.outputTokens || 0);
+    const cacheCreation = Number(usage.cache_creation_input_tokens || usage.cacheCreationInputTokens || 0);
+    const cacheRead = Number(usage.cache_read_input_tokens || usage.cacheReadInputTokens || 0);
+    const contextSize = inputTokens + cacheCreation + cacheRead;
+    this.latestUsage = {
+      inputTokens,
+      outputTokens,
+      cacheCreation,
+      cacheRead,
+      totalTokens: inputTokens + outputTokens + cacheCreation + cacheRead,
+      contextSize,
+      model: model || null,
+      updatedAt: Date.now()
+    };
   }
 
   summarizeToolInput(input) {

package/lib/commands/web.js

@@ -459,7 +459,7 @@ async function webCommand(options) {
           sessionManager.sendClaudeInput(sessionId, payload.text || '');
         }
         if (payload.type === 'claude-permission') {
-          sessionManager.respondClaudePermission(sessionId, payload.id, Boolean(payload.approved));
+          sessionManager.respondClaudePermission(sessionId, payload.id, Boolean(payload.approved), payload.action || null);
         }
         if (payload.type === 'claude-settings') {
           sessionManager.updateClaudeSettings(sessionId, payload.settings || {});

package/lib/session/session-manager.js

@@ -177,10 +177,10 @@ class SessionManager extends EventEmitter {
     return session.sendUserMessage(text);
   }
 
-  respondClaudePermission(id, permissionId, approved) {
+  respondClaudePermission(id, permissionId, approved, action = null) {
     const session = this.get(id);
     if (!session || session.kind !== 'claude-structured') return false;
-    return session.respondPermission(permissionId, approved);
+    return session.respondPermission(permissionId, approved, action);
   }
 
   updateClaudeSettings(id, settings) {

package/lib/web/index.html

@@ -78,6 +78,7 @@
         #terminal-container { flex: 1; min-height: 0; width: 100%; background: #000; position: relative; overflow: hidden; overflow-anchor: none; }
         #terminal { height: 100%; width: 100%; }
         #claude-chat-container { display: none; flex: 1; min-height: 0; overflow-y: auto; background: #050505; padding: 12px 12px 24px 12px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
+        .claude-context-size-badge { position: sticky; top: 0; z-index: 2; width: max-content; max-width: 100%; margin: 0 0 8px auto; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.94); border-radius: 999px; padding: 4px 9px; color: #d1d5db; font-size: 11px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,0.24); }
         .claude-message { max-width: 92%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; line-height: 1.45; font-size: 14px; }
         .claude-message.user { margin-left: auto; background: rgba(0,122,255,0.24); border: 1px solid rgba(0,122,255,0.32); color: #fff; border-radius: 12px; padding-top: 7px; padding-bottom: 7px; }
         .claude-message.assistant { max-width: 100%; background: transparent; border: 0; color: #f5f5f7; padding: 0 4px; margin: 0 0 12px 0; }
@@ -127,11 +128,12 @@
         .claude-work-group-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .claude-work-group-body { padding: 2px 8px 8px 8px; }
         .claude-permission { border-color: rgba(255,204,0,0.4); background: rgba(255,204,0,0.08); }
-        .claude-permission-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
+        .claude-permission-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
+        .claude-permission-actions .small-btn { min-height: 30px; max-width: 100%; white-space: normal; line-height: 1.2; }
         .claude-status { color: var(--text-dim); font-size: 12px; text-align: center; padding: 6px 0 0 0; }
         #claude-control-panel { display: none; padding: 0 14px 10px 14px; box-sizing: border-box; }
-        .claude-control-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
-        .claude-select, .claude-ctrl-btn { min-width: 0; height: 32px; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: rgba(255,255,255,0.08); color: #f5f5f7; font-size: 11px; font-weight: 800; letter-spacing: 0; padding: 0 8px; outline: none; box-sizing: border-box; }
+        .claude-control-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
+        .claude-select, .claude-ctrl-btn { min-width: 0; height: 32px; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: rgba(255,255,255,0.08); color: #f5f5f7; font-size: 11px; font-weight: 800; letter-spacing: 0; padding: 0 10px; outline: none; box-sizing: border-box; }
         .claude-select { appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; }
         .claude-picker-wrap { min-width: 0; position: relative; }
         .claude-picker-wrap select { display: none; }
@@ -139,11 +141,19 @@
         .claude-picker-btn.active { background: rgba(0,122,255,0.22); border-color: rgba(0,122,255,0.5); }
         #claude-picker-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.99); border-radius: 12px; max-height: min(280px, 42dvh); overflow-y: auto; box-shadow: 0 16px 36px rgba(0,0,0,0.34); }
         #claude-picker-panel.active { display: block; }
+        #claude-usage-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.99); border-radius: 12px; padding: 10px 11px; box-shadow: 0 16px 36px rgba(0,0,0,0.34); color: #f5f5f7; }
+        #claude-usage-panel.active { display: block; }
+        .claude-usage-title { color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; }
+        .claude-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+        .claude-usage-item { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); border-radius: 8px; padding: 8px; min-width: 0; }
+        .claude-usage-label { color: var(--text-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .claude-usage-value { margin-top: 4px; color: #f5f5f7; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .claude-picker-title { padding: 9px 11px 7px 11px; color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255,255,255,0.06); }
         .claude-picker-option { width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; color: #f5f5f7; padding: 10px 11px; text-align: left; cursor: pointer; box-sizing: border-box; }
         .claude-picker-option:last-child { border-bottom: 0; }
         .claude-picker-option:active, .claude-picker-option.selected { background: rgba(0,122,255,0.18); }
         .claude-picker-option-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 800; }
+        .claude-picker-option-main .selected-label { color: var(--text-dim); font-size: 11px; font-weight: 800; text-transform: uppercase; flex: 0 0 auto; }
         .claude-picker-option-value { min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d1d5db; font-size: 12px; margin-top: 3px; line-height: 1.35; }
         .claude-ctrl-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
         .claude-ctrl-btn:active, .claude-select:focus { background: rgba(255,255,255,0.14); border-color: rgba(0,122,255,0.45); }
@@ -154,6 +164,10 @@
         #claude-state-bar::-webkit-scrollbar { display: none; }
         .claude-state-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.045); border-radius: 999px; padding: 3px 8px; flex: 0 0 auto; }
         .claude-state-pill.warn { color: #ffcc00; border-color: rgba(255,204,0,0.24); background: rgba(255,204,0,0.08); }
+        .claude-state-pill.perm { margin-left: auto; }
+        .claude-state-pill.perm.acceptEdits { color: #34c759; border-color: rgba(52,199,89,0.26); background: rgba(52,199,89,0.08); }
+        .claude-state-pill.perm.bypassPermissions { color: #ff9f0a; border-color: rgba(255,159,10,0.26); background: rgba(255,159,10,0.08); }
+        .claude-state-pill.perm.plan { color: #64d2ff; border-color: rgba(100,210,255,0.26); background: rgba(100,210,255,0.08); }
         #claude-resume-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.98); border-radius: 12px; max-height: 180px; overflow-y: auto; }
         #claude-resume-panel.active { display: block; }
         .claude-resume-item { width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; color: #fff; padding: 10px 11px; cursor: pointer; box-sizing: border-box; }
@@ -275,10 +289,10 @@
                     <div class="claude-control-row">
                         <div class="claude-picker-wrap">
                             <select id="claude-permission-select" class="claude-select" title="Permission mode" onchange="updateClaudeSettingsFromControls()">
-                                <option value="default">P:Def</option>
-                                <option value="acceptEdits">P:Edit</option>
-                                <option value="plan">P:Plan</option>
-                                <option value="bypassPermissions">P:Byp</option>
+                                <option value="default">Default</option>
+                                <option value="acceptEdits">Accept edits</option>
+                                <option value="plan">Plan mode</option>
+                                <option value="bypassPermissions">Bypass</option>
                             </select>
                             <button id="claude-permission-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('permission')" title="Permission mode">P</button>
                         </div>
@@ -298,11 +312,13 @@
                             </select>
                             <button id="claude-effort-picker-btn" class="claude-select claude-picker-btn" onclick="toggleClaudePicker('effort')" title="Effort">E</button>
                         </div>
+                        <button id="claude-usage-btn" class="claude-ctrl-btn" onclick="toggleClaudeUsagePanel()" title="Usage">Usage</button>
                         <button id="claude-abort-btn" class="claude-ctrl-btn danger" onclick="abortClaudeSession()" title="Abort current Claude turn">Abort</button>
                         <button id="claude-resume-btn" class="claude-ctrl-btn primary" onclick="toggleClaudeResumePanel()" title="Choose a Claude session to resume">Resume</button>
                     </div>
                     <div id="claude-state-bar"></div>
                     <div id="claude-picker-panel"></div>
+                    <div id="claude-usage-panel"></div>
                     <div id="claude-resume-panel"></div>
                 </div>
                 <div id="timed-send-panel">
@@ -478,11 +494,14 @@
         let claudeStatus = 'idle';
         let claudeRuntimeConfig = null;
         let claudePickerOpen = null;
+        let claudeUsagePanelOpen = false;
+        const CLAUDE_CONTEXT_SIZE = 190000;
         let claudeState = {
             permissionMode: 'default',
             model: 'default',
             effort: 'medium',
             contextRemaining: null,
+            latestUsage: null,
             claudeSessionId: null,
             resumeSessionId: null,
             canAbort: false,
@@ -785,8 +804,7 @@
             document.getElementById('terminal-container').style.display = enabled ? 'none' : '';
             document.getElementById('claude-chat-container').style.display = enabled ? 'block' : 'none';
             document.getElementById('claude-control-panel').style.display = enabled ? 'block' : 'none';
-            document.getElementById('timer-btn').style.display = enabled ? 'none' : '';
-            if (enabled) closeTimedSendPanel();
+            document.getElementById('timer-btn').style.display = '';
             document.getElementById('shortcut-rail').style.display = enabled ? 'none' : '';
             document.getElementById('scroll-controls').style.display = enabled ? 'none' : '';
             document.getElementById('cmd-input').placeholder = enabled ? 'Message Claude...' : 'Type a message...';
@@ -794,12 +812,13 @@
         }
 
         function updateTerminalControlsHeight() {
+            const timedOpen = document.getElementById('timed-send-panel')?.classList.contains('active');
             if (!isClaudeSession()) {
-                document.documentElement.style.setProperty('--terminal-controls-rest-height', '108px');
+                document.documentElement.style.setProperty('--terminal-controls-rest-height', timedOpen ? '252px' : '108px');
                 return;
             }
-            const restHeight = claudeResumePanelOpen ? '308px' : (claudePickerOpen ? '322px' : '154px');
-            document.documentElement.style.setProperty('--terminal-controls-rest-height', restHeight);
+            const baseHeight = claudeResumePanelOpen ? 308 : ((claudePickerOpen || claudeUsagePanelOpen) ? 322 : 154);
+            document.documentElement.style.setProperty('--terminal-controls-rest-height', `${baseHeight + (timedOpen ? 144 : 0)}px`);
         }
 
         function shortModelLabel(value, resolved) {
@@ -817,6 +836,35 @@
             return `M:${compact || source.slice(0, 9)}`;
         }
 
+        function fullModelLabel(value, resolved, label) {
+            const source = String(value || 'default');
+            if (source === 'default') return 'Default';
+            if (source === 'env') return resolved ? `Environment (${resolved})` : 'Environment';
+            if (label && label !== value) return label;
+            return String(resolved || value || 'Model');
+        }
+
+        function permissionModeLabel(value) {
+            const labels = {
+                default: 'Default',
+                acceptEdits: 'Accept edits',
+                plan: 'Plan mode',
+                bypassPermissions: 'Bypass'
+            };
+            return labels[value] || String(value || 'Default');
+        }
+
+        function effortLabel(value) {
+            const labels = {
+                low: 'Low',
+                medium: 'Medium',
+                high: 'High',
+                xhigh: 'Extra high',
+                max: 'Max'
+            };
+            return labels[value] || String(value || 'Medium');
+        }
+
         function pickerLabelFromOption(option) {
             return option ? (option.textContent || option.value || '') : '';
         }
@@ -828,19 +876,19 @@
 
         function syncClaudePickerButtons() {
             const mappings = [
-                ['permission', 'claude-permission-select', 'claude-permission-picker-btn', 'P'],
-                ['model', 'claude-model-select', 'claude-model-picker-btn', 'M'],
-                ['effort', 'claude-effort-select', 'claude-effort-picker-btn', 'E']
+                ['permission', 'claude-permission-select', 'claude-permission-picker-btn', 'Perm'],
+                ['model', 'claude-model-select', 'claude-model-picker-btn', 'Model'],
+                ['effort', 'claude-effort-select', 'claude-effort-picker-btn', 'Effort']
             ];
-            mappings.forEach(([type, selectId, buttonId, fixedLabel]) => {
+            mappings.forEach(([type, selectId, buttonId, prefix]) => {
                 const select = document.getElementById(selectId);
                 const button = document.getElementById(buttonId);
                 if (!select || !button) return;
                 const option = select.selectedOptions && select.selectedOptions[0];
                 const label = pickerLabelFromOption(option);
                 const fullValue = pickerFullValue(option);
-                button.textContent = fixedLabel;
-                button.title = fullValue || label || fixedLabel;
+                button.textContent = prefix;
+                button.title = fullValue || label || prefix;
                 button.classList.toggle('active', claudePickerOpen === type);
             });
         }
@@ -856,6 +904,13 @@
             updateTerminalControlsHeight();
         }
 
+        function closeClaudeUsagePanel() {
+            claudeUsagePanelOpen = false;
+            const panel = document.getElementById('claude-usage-panel');
+            if (panel) panel.classList.remove('active');
+            updateTerminalControlsHeight();
+        }
+
         function pickerTitle(type) {
             if (type === 'permission') return 'Permission mode';
             if (type === 'model') return 'Model';
@@ -881,7 +936,7 @@
                 return `<button class="claude-picker-option${selected ? ' selected' : ''}" onclick="chooseClaudePickerOption('${type}', decodePathValue('${encodePathValue(option.value)}'))">
                     <div class="claude-picker-option-main">
                         <span>${escapeHtml(option.textContent || option.value)}</span>
-                        ${selected ? '<span>Selected</span>' : ''}
+                        ${selected ? '<span class="selected-label">Selected</span>' : ''}
                     </div>
                     ${full ? `<div class="claude-picker-option-value">${escapeHtml(full)}</div>` : ''}
                 </button>`;
@@ -897,6 +952,7 @@
                 return;
             }
             if (type === 'model') await refreshClaudeRuntimeConfig();
+            closeClaudeUsagePanel();
             claudeResumePanelOpen = false;
             const resumePanel = document.getElementById('claude-resume-panel');
             if (resumePanel) resumePanel.classList.remove('active');
@@ -920,9 +976,10 @@
                 const current = modelEl.value || claudeState.model || config.defaultModel || 'default';
                 modelEl.innerHTML = '';
                 config.models.forEach(item => {
-                    const option = new Option(shortModelLabel(item.value, item.resolved), item.value);
+                    const option = new Option(fullModelLabel(item.value, item.resolved, item.label), item.value);
                     option.title = item.resolved ? `${item.label}: ${item.resolved}` : item.label;
                     option.dataset.resolved = item.resolved || '';
+                    option.dataset.shortLabel = shortModelLabel(item.value, item.resolved);
                     modelEl.add(option);
                 });
                 const next = Array.from(modelEl.options).some(option => option.value === current)
@@ -977,6 +1034,8 @@
             const abortBtn = document.getElementById('claude-abort-btn');
             if (abortBtn) abortBtn.disabled = !(claudeState.canAbort || claudeStatus === 'thinking');
             renderClaudeStateBar();
+            renderClaudeUsagePanel();
+            renderClaudeChat();
         }
 
         function shortValue(value, fallback = 'N/A') {
@@ -984,26 +1043,90 @@
             return text.length > 16 ? text.slice(0, 13) + '...' : text;
         }
 
+        function formatTokenCount(value) {
+            const number = Number(value || 0);
+            if (number >= 1000000) return `${(number / 1000000).toFixed(2)}M`;
+            if (number >= 1000) return `${(number / 1000).toFixed(1)}K`;
+            return String(Math.round(number));
+        }
+
+        function formatContextK(value) {
+            return `${(Number(value || 0) / 1000).toFixed(1)}K`;
+        }
+
+        function contextRemainingPercent(usage) {
+            if (!usage || typeof usage.contextSize !== 'number') return null;
+            const used = Math.max(0, usage.contextSize);
+            return Math.max(0, Math.min(100, 100 - (used / CLAUDE_CONTEXT_SIZE) * 100));
+        }
+
+        function renderClaudeContextSizeBadge() {
+            const usage = claudeState.latestUsage;
+            if (!usage || typeof usage.contextSize !== 'number') return '';
+            return `<div class="claude-context-size-badge">Context ${escapeHtml(formatContextK(usage.contextSize))}</div>`;
+        }
+
         function renderClaudeStateBar() {
             const el = document.getElementById('claude-state-bar');
             if (!el) return;
-            const modelEl = document.getElementById('claude-model-select');
-            const modelOption = modelEl && modelEl.selectedOptions && modelEl.selectedOptions[0];
-            const modelLabel = modelOption && modelOption.dataset.resolved
-                ? modelOption.dataset.resolved
-                : (claudeState.model || 'default');
-            const context = typeof claudeState.contextRemaining === 'number'
-                ? `Ctx ${claudeState.contextRemaining}`
-                : 'Ctx N/A';
             const pending = Number(claudeState.pendingPermissionCount || claudePendingPermissions.filter(item => item.status === 'pending').length) || 0;
-            const status = claudeStatus === 'thinking' ? 'Working' : shortValue(claudeStatus || 'Idle');
-            el.innerHTML = [
-                `<span class="claude-state-pill">${escapeHtml(shortValue(claudeState.permissionMode || 'default'))}</span>`,
-                `<span class="claude-state-pill">${escapeHtml(shortValue(modelLabel))}</span>`,
-                `<span class="claude-state-pill">Eff ${escapeHtml(shortValue(claudeState.effort || 'medium'))}</span>`,
-                `<span class="claude-state-pill">${escapeHtml(context)}</span>`,
-                `<span class="claude-state-pill${pending ? ' warn' : ''}">${pending ? `${pending} approval` : escapeHtml(status)}</span>`
-            ].join('');
+            const mode = claudeState.permissionMode || 'default';
+            const parts = [];
+            if (pending) {
+                parts.push(`<span class="claude-state-pill warn">${pending} approval${pending > 1 ? 's' : ''}</span>`);
+            } else if (claudeStatus === 'thinking') {
+                parts.push('<span class="claude-state-pill">Working</span>');
+            } else if (claudeStatus && !['idle', 'stopped'].includes(claudeStatus)) {
+                parts.push(`<span class="claude-state-pill warn">${escapeHtml(shortValue(claudeStatus))}</span>`);
+            }
+            const remainingPercent = contextRemainingPercent(claudeState.latestUsage);
+            if (remainingPercent !== null && remainingPercent <= 10) {
+                parts.push(`<span class="claude-state-pill warn">${Math.round(remainingPercent)}% left</span>`);
+            }
+            if (mode !== 'default') {
+                parts.push(`<span class="claude-state-pill perm ${escapeHtml(mode)}">${escapeHtml(permissionModeLabel(mode))}</span>`);
+            }
+            el.innerHTML = parts.join('');
+            el.style.display = parts.length ? 'flex' : 'none';
+        }
+
+        function usageItem(label, value) {
+            return `<div class="claude-usage-item">
+                <div class="claude-usage-label">${escapeHtml(label)}</div>
+                <div class="claude-usage-value">${escapeHtml(value)}</div>
+            </div>`;
+        }
+
+        function renderClaudeUsagePanel() {
+            const panel = document.getElementById('claude-usage-panel');
+            if (!panel) return;
+            const usage = claudeState.latestUsage;
+            if (!usage) {
+                panel.innerHTML = '<div class="claude-usage-title">Usage</div><div class="claude-resume-meta">No usage yet.</div>';
+            } else {
+                panel.innerHTML = `<div class="claude-usage-title">Usage</div>
+                    <div class="claude-usage-grid">
+                        ${usageItem('Total', formatTokenCount(usage.totalTokens))}
+                        ${usageItem('Context', formatContextK(usage.contextSize))}
+                        ${usageItem('Input', formatTokenCount(usage.inputTokens))}
+                        ${usageItem('Output', formatTokenCount(usage.outputTokens))}
+                        ${usageItem('Cache write', formatTokenCount(usage.cacheCreation))}
+                        ${usageItem('Cache read', formatTokenCount(usage.cacheRead))}
+                    </div>`;
+            }
+            panel.classList.toggle('active', claudeUsagePanelOpen);
+        }
+
+        function toggleClaudeUsagePanel() {
+            claudeUsagePanelOpen = !claudeUsagePanelOpen;
+            if (claudeUsagePanelOpen) {
+                closeClaudePicker();
+                claudeResumePanelOpen = false;
+                const resumePanel = document.getElementById('claude-resume-panel');
+                if (resumePanel) resumePanel.classList.remove('active');
+            }
+            renderClaudeUsagePanel();
+            updateTerminalControlsHeight();
         }
 
         async function updateClaudeSettingsFromControls() {
@@ -1027,6 +1150,7 @@
         async function toggleClaudeResumePanel() {
             claudeResumePanelOpen = !claudeResumePanelOpen;
             if (claudeResumePanelOpen) closeClaudePicker();
+            if (claudeResumePanelOpen) closeClaudeUsagePanel();
             const panel = document.getElementById('claude-resume-panel');
             panel.classList.toggle('active', claudeResumePanelOpen);
             updateTerminalControlsHeight();
@@ -1360,9 +1484,41 @@
             return '';
         }
 
+        function isClaudeEditTool(name) {
+            return ['Edit', 'MultiEdit', 'Write', 'NotebookEdit'].includes(name || '');
+        }
+
+        function isClaudeExitPlanTool(name) {
+            return name === 'exit_plan_mode' || name === 'ExitPlanMode';
+        }
+
+        function claudeAllowToolLabel(req) {
+            if (req.toolName === 'Bash' && req.input && typeof req.input.command === 'string') return 'Allow command';
+            return 'Allow tool';
+        }
+
+        function renderClaudePermissionActions(req) {
+            const id = escapeHtml(req.id);
+            const toolName = req.toolName || '';
+            const parts = [
+                `<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'allow-once')">Yes</button>`
+            ];
+            if (isClaudeEditTool(toolName) || isClaudeExitPlanTool(toolName) || req.canAllowEdits) {
+                parts.push(`<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'allow-edits')">Allow edits</button>`);
+            }
+            if (isClaudeExitPlanTool(toolName) || req.canBypass) {
+                parts.push(`<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'bypass')">Allow all</button>`);
+            }
+            if (toolName && !isClaudeEditTool(toolName) && !isClaudeExitPlanTool(toolName) && req.canAllowTool !== false) {
+                parts.push(`<button class="small-btn primary" onclick="respondClaudePermission('${id}', 'allow-tool')">${escapeHtml(claudeAllowToolLabel(req))}</button>`);
+            }
+            parts.push(`<button class="small-btn danger" onclick="respondClaudePermission('${id}', 'deny')">Deny</button>`);
+            return parts.join('');
+        }
+
         function renderClaudeChat() {
             const container = document.getElementById('claude-chat-container');
-            const parts = buildClaudeDisplayItems(claudeMessages).map(renderDisplayItem);
+            const parts = [renderClaudeContextSizeBadge(), ...buildClaudeDisplayItems(claudeMessages).map(renderDisplayItem)].filter(Boolean);
             for (const req of claudePendingPermissions.filter(item => item.status === 'pending')) {
                 parts.push(`<div class="claude-tool claude-permission">
                     <div class="claude-tool-header">
@@ -1371,10 +1527,10 @@
                     </div>
                     <div class="claude-tool-body">
                         ${req.reason ? `<div>${escapeHtml(req.reason)}</div>` : ''}
+                        ${req.blockedPath ? `<div class="claude-resume-meta">${escapeHtml(req.blockedPath)}</div>` : ''}
                         ${renderToolSection('Input', req.input || {})}
                         <div class="claude-permission-actions">
-                            <button class="small-btn danger" onclick="respondClaudePermission('${req.id}', false)">Deny</button>
-                            <button class="small-btn primary" onclick="respondClaudePermission('${req.id}', true)">Allow</button>
+                            ${renderClaudePermissionActions(req)}
                         </div>
                     </div>
                 </div>`);
@@ -1411,9 +1567,17 @@
             renderClaudeChat();
         }
 
-        function respondClaudePermission(id, approved) {
+        function respondClaudePermission(id, actionOrApproved) {
             if (!currentSocket || currentSocket.readyState !== 1) return;
-            currentSocket.send(JSON.stringify({ type: 'claude-permission', id, approved }));
+            const action = typeof actionOrApproved === 'string'
+                ? actionOrApproved
+                : (actionOrApproved ? 'allow-once' : 'deny');
+            currentSocket.send(JSON.stringify({
+                type: 'claude-permission',
+                id,
+                action,
+                approved: action !== 'deny'
+            }));
         }
 
         async function createSession(toolKey, sessionName) {
@@ -1809,6 +1973,7 @@
                 model: (runtimeConfig && runtimeConfig.defaultModel) || 'default',
                 effort: (runtimeConfig && runtimeConfig.defaultEffort) || 'medium',
                 contextRemaining: null,
+                latestUsage: null,
                 claudeSessionId: null,
                 resumeSessionId: null,
                 canAbort: false,
@@ -2142,6 +2307,7 @@
             document.getElementById('timer-btn').classList.remove('active');
             editingTimedInputId = null;
             renderTimedTags();
+            updateTerminalControlsHeight();
         }
 
         function stopTimedInputTimers() {
@@ -2202,6 +2368,7 @@
             document.getElementById('timer-btn').classList.add('active');
             updateTimedSendPreview();
             renderTimedTags();
+            updateTerminalControlsHeight();
         }
 
         async function saveTimedSend() {
@@ -2250,12 +2417,19 @@
             const isOpen = panel.classList.toggle('active');
             document.getElementById('timer-btn').classList.toggle('active', isOpen);
             if (isOpen) {
+                if (isClaudeSession()) {
+                    closeClaudePicker();
+                    closeClaudeUsagePanel();
+                    claudeResumePanelOpen = false;
+                    document.getElementById('claude-resume-panel').classList.remove('active');
+                }
                 initTimedDelaySelectors();
                 resetTimedEditor({ keepInput: true });
                 updateTimedSendPreview();
                 loadTimedInputs();
             }
             else closeTimedSendPanel();
+            updateTerminalControlsHeight();
         });
         inputEl.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); performSend(); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {