fix: refresh Claude auth status after login flow (#617)

* fix: refresh Claude auth status after login flow

* fix: rely on refreshed auth status after login

---------

Co-authored-by: HolyCode User <noreply@holycode.local>

server/claude-sdk.js

@@ -285,43 +285,68 @@ function transformMessage(sdkMessage) {
   return sdkMessage;
 }
 
+function readNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
 /**
- * Extracts token usage from SDK result messages
- * @param {Object} resultMessage - SDK result message
+ * Extracts token usage from SDK messages.
+ * Prefers per-step `message.usage` (Claude message payload), then falls back
+ * to result-level usage/modelUsage for compatibility across SDK versions.
+ * @param {Object} sdkMessage - SDK stream message
  * @returns {Object|null} Token budget object or null
  */
-function extractTokenBudget(resultMessage) {
-  if (resultMessage.type !== 'result' || !resultMessage.modelUsage) {
+function extractTokenBudget(sdkMessage) {
+  if (!sdkMessage || typeof sdkMessage !== 'object') {
     return null;
   }
 
-  // Get the first model's usage data
-  const modelKey = Object.keys(resultMessage.modelUsage)[0];
-  const modelData = resultMessage.modelUsage[modelKey];
+  const messageUsage = sdkMessage.message?.usage || sdkMessage.usage;
+  if (messageUsage && typeof messageUsage === 'object') {
+    const inputTokens = readNumber(messageUsage.input_tokens ?? messageUsage.inputTokens);
+    const outputTokens = readNumber(messageUsage.output_tokens ?? messageUsage.outputTokens);
+    const totalUsed = inputTokens + outputTokens;
+    const contextWindow = parseInt(process.env.CONTEXT_WINDOW, 10) || 160000;
 
-  if (!modelData) {
+    return {
+      used: totalUsed,
+      total: contextWindow,
+      inputTokens,
+      outputTokens,
+      breakdown: {
+        input: inputTokens,
+        output: outputTokens,
+      },
+    };
+  }
+
+  if (!sdkMessage.modelUsage || typeof sdkMessage.modelUsage !== 'object') {
     return null;
   }
 
-  // Use cumulative tokens if available (tracks total for the session)
-  // Otherwise fall back to per-request tokens
-  const inputTokens = modelData.cumulativeInputTokens || modelData.inputTokens || 0;
-  const outputTokens = modelData.cumulativeOutputTokens || modelData.outputTokens || 0;
-  const cacheReadTokens = modelData.cumulativeCacheReadInputTokens || modelData.cacheReadInputTokens || 0;
-  const cacheCreationTokens = modelData.cumulativeCacheCreationInputTokens || modelData.cacheCreationInputTokens || 0;
+  // Fallback for older SDK messages with only modelUsage
+  const modelKey = Object.keys(sdkMessage.modelUsage)[0];
+  const modelData = sdkMessage.modelUsage[modelKey];
 
-  // Total used = input + output + cache tokens
-  const totalUsed = inputTokens + outputTokens + cacheReadTokens + cacheCreationTokens;
+  if (!modelData || typeof modelData !== 'object') {
+    return null;
+  }
 
-  // Use configured context window budget from environment (default 160000)
-  // This is the user's budget limit, not the model's context window
-  const contextWindow = parseInt(process.env.CONTEXT_WINDOW) || 160000;
-
-  // Token calc logged via token-budget WS event
+  const inputTokens = readNumber(modelData.cumulativeInputTokens ?? modelData.inputTokens);
+  const outputTokens = readNumber(modelData.cumulativeOutputTokens ?? modelData.outputTokens);
+  const totalUsed = inputTokens + outputTokens;
+  const contextWindow = parseInt(process.env.CONTEXT_WINDOW, 10) || 160000;
 
   return {
     used: totalUsed,
-    total: contextWindow
+    total: contextWindow,
+    inputTokens,
+    outputTokens,
+    breakdown: {
+      input: inputTokens,
+      output: outputTokens,
+    },
   };
 }
 
@@ -684,16 +709,10 @@ async function queryClaudeSDK(command, options = {}, ws) {
         ws.send(msg);
       }
 
-      // Extract and send token budget updates from result messages
-      if (message.type === 'result') {
-        const models = Object.keys(message.modelUsage || {});
-        if (models.length > 0) {
-          // Model info available in result message
-        }
-        const tokenBudgetData = extractTokenBudget(message);
-        if (tokenBudgetData) {
-          ws.send(createNormalizedMessage({ kind: 'status', text: 'token_budget', tokenBudget: tokenBudgetData, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
-        }
+      // Extract and send token budget updates from assistant/result usage payloads
+      const tokenBudgetData = extractTokenBudget(message);
+      if (tokenBudgetData) {
+        ws.send(createNormalizedMessage({ kind: 'status', text: 'token_budget', tokenBudget: tokenBudgetData, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
       }
     }
 

server/gemini-response-handler.js

@@ -1,5 +1,32 @@
 // Gemini Response Handler - JSON Stream processing
 import { sessionsService } from './modules/providers/services/sessions.service.js';
+import { createNormalizedMessage } from './shared/utils.js';
+
+function buildGeminiTokenBudget(tokens) {
+  if (!tokens || typeof tokens !== 'object') {
+    return null;
+  }
+
+  const parsedInputTokens = Number(tokens.input);
+  const parsedOutputTokens = Number(tokens.output);
+  const inputTokens = Number.isFinite(parsedInputTokens) ? parsedInputTokens : 0;
+  const outputTokens = Number.isFinite(parsedOutputTokens) ? parsedOutputTokens : 0;
+  const parsedUsed = Number(tokens.total);
+  const used = Number.isFinite(parsedUsed) ? parsedUsed : inputTokens + outputTokens;
+  if (!Number.isFinite(used) || used <= 0) {
+    return null;
+  }
+
+  return {
+    used,
+    inputTokens,
+    outputTokens,
+    breakdown: {
+      input: inputTokens,
+      output: outputTokens,
+    },
+  };
+}
 
 class GeminiResponseHandler {
   constructor(ws, options = {}) {
@@ -60,6 +87,17 @@ class GeminiResponseHandler {
     for (const msg of normalized) {
       this.ws.send(msg);
     }
+
+    const tokenBudget = buildGeminiTokenBudget(event.tokens);
+    if (tokenBudget) {
+      this.ws.send(createNormalizedMessage({
+        kind: 'status',
+        text: 'token_budget',
+        tokenBudget,
+        sessionId: sid,
+        provider: 'gemini',
+      }));
+    }
   }
 
   forceFlush() {

server/index.js

@@ -10,8 +10,9 @@ import { spawn } from 'child_process';
 import express from 'express';
 import cors from 'cors';
 import mime from 'mime-types';
+import Database from 'better-sqlite3';
 
-import { AppError, WORKSPACES_ROOT, validateWorkspacePath } from '@/shared/utils.js';
+import { AppError, WORKSPACES_ROOT, getOpenCodeDatabasePath, validateWorkspacePath } from '@/shared/utils.js';
 import { closeSessionsWatcher, initializeSessionsWatcher } from '@/modules/providers/index.js';
 import { createWebSocketServer } from '@/modules/websocket/index.js';
 
@@ -72,7 +73,7 @@ import geminiRoutes from './routes/gemini.js';
 import pluginsRoutes from './routes/plugins.js';
 import providerRoutes from './modules/providers/provider.routes.js';
 import { startEnabledPluginServers, stopAllPlugins, getPluginPort } from './utils/plugin-process-manager.js';
-import { initializeDatabase, projectsDb } from './modules/database/index.js';
+import { initializeDatabase, projectsDb, sessionsDb } from './modules/database/index.js';
 import { configureWebPush } from './services/vapid-keys.js';
 import { validateApiKey, authenticateToken, authenticateWebSocket } from './middleware/auth.js';
 import { IS_PLATFORM } from './constants/config.js';
@@ -1141,33 +1142,127 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
             return res.json({
                 used: 0,
                 total: 0,
-                breakdown: { input: 0, cacheCreation: 0, cacheRead: 0 },
+                inputTokens: 0,
+                outputTokens: 0,
+                breakdown: { input: 0, output: 0 },
                 unsupported: true,
                 message: 'Token usage tracking not available for Cursor sessions'
             });
         }
 
-        // Handle Gemini sessions - they are raw logs in our current setup
         if (provider === 'gemini') {
+            const session = sessionsDb.getSessionById(safeSessionId);
+            const sessionFilePath = session?.jsonl_path;
+            if (!sessionFilePath) {
+                return res.json({
+                    used: 0,
+                    inputTokens: 0,
+                    outputTokens: 0,
+                    breakdown: { input: 0, output: 0 },
+                    unsupported: true,
+                    message: 'Token usage tracking not available for this Gemini session'
+                });
+            }
+
+            let fileContent;
+            try {
+                fileContent = await fsPromises.readFile(sessionFilePath, 'utf8');
+            } catch (error) {
+                if (error.code === 'ENOENT') {
+                    return res.status(404).json({ error: 'Session file not found', path: sessionFilePath });
+                }
+                throw error;
+            }
+
+            const lines = fileContent.trim().split('\n');
+            let inputTokens = 0;
+            let outputTokens = 0;
+            let totalTokens = 0;
+
+            for (let i = lines.length - 1; i >= 0; i--) {
+                try {
+                    const entry = JSON.parse(lines[i]);
+                    if (!entry.tokens || typeof entry.tokens !== 'object') {
+                        continue;
+                    }
+
+                    inputTokens = Number(entry.tokens.input || 0);
+                    outputTokens = Number(entry.tokens.output || 0);
+                    totalTokens = Number(entry.tokens.total || inputTokens + outputTokens || 0);
+                    break;
+                } catch {
+                    continue;
+                }
+            }
+
             return res.json({
-                used: 0,
-                total: 0,
-                breakdown: { input: 0, cacheCreation: 0, cacheRead: 0 },
-                unsupported: true,
-                message: 'Token usage tracking not available for Gemini sessions'
+                used: totalTokens,
+                inputTokens,
+                outputTokens,
+                breakdown: {
+                    input: inputTokens,
+                    output: outputTokens
+                }
             });
         }
 
-        // OpenCode token totals are surfaced through provider history reads.
-        // This legacy endpoint only knows file-backed session formats.
         if (provider === 'opencode') {
-            return res.json({
-                used: 0,
-                total: 0,
-                breakdown: { input: 0, cacheCreation: 0, cacheRead: 0 },
-                unsupported: true,
-                message: 'Token usage tracking is available in OpenCode session history, not this legacy endpoint'
-            });
+            const dbPath = getOpenCodeDatabasePath();
+            if (!fs.existsSync(dbPath)) {
+                return res.status(404).json({ error: 'OpenCode database not found' });
+            }
+
+            const db = new Database(dbPath, { readonly: true, fileMustExist: true });
+            try {
+                const columns = db.prepare('PRAGMA table_info(session)').all();
+                const columnNames = new Set(columns.map((column) => column.name));
+                const requiredColumns = ['tokens_input', 'tokens_output', 'tokens_reasoning', 'tokens_cache_read', 'tokens_cache_write'];
+                if (!requiredColumns.every((column) => columnNames.has(column))) {
+                    return res.json({
+                        used: 0,
+                        inputTokens: 0,
+                        outputTokens: 0,
+                        breakdown: { input: 0, output: 0 },
+                        unsupported: true,
+                        message: 'Token usage tracking is not available in this OpenCode database schema'
+                    });
+                }
+
+                const row = db.prepare(`
+                    SELECT
+                        tokens_input AS inputTokens,
+                        tokens_output AS outputTokens,
+                        tokens_reasoning AS reasoningTokens,
+                        tokens_cache_read AS cacheReadTokens,
+                        tokens_cache_write AS cacheWriteTokens
+                    FROM session
+                    WHERE id = ?
+                `).get(safeSessionId);
+
+                if (!row) {
+                    return res.status(404).json({ error: 'OpenCode session not found', sessionId: safeSessionId });
+                }
+
+                const inputTokens = Number(row.inputTokens || 0) + Number(row.cacheReadTokens || 0);
+                const outputTokens = Number(row.outputTokens || 0);
+                const totalUsed = Number(row.inputTokens || 0)
+                    + outputTokens
+                    + Number(row.reasoningTokens || 0)
+                    + Number(row.cacheReadTokens || 0)
+                    + Number(row.cacheWriteTokens || 0);
+
+                return res.json({
+                    used: totalUsed,
+                    inputTokens,
+                    outputTokens,
+                    breakdown: {
+                        input: inputTokens,
+                        output: outputTokens
+                    }
+                });
+            } finally {
+                db.close();
+            }
         }
 
         // Handle Codex sessions
@@ -1210,6 +1305,8 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
                 throw error;
             }
             const lines = fileContent.trim().split('\n');
+            let inputTokens = 0;
+            let outputTokens = 0;
             let totalTokens = 0;
             let contextWindow = 200000; // Default for Codex/OpenAI
 
@@ -1222,7 +1319,9 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
                     if (entry.type === 'event_msg' && entry.payload?.type === 'token_count' && entry.payload?.info) {
                         const tokenInfo = entry.payload.info;
                         if (tokenInfo.total_token_usage) {
-                            totalTokens = tokenInfo.total_token_usage.total_tokens || 0;
+                            inputTokens = tokenInfo.total_token_usage.input_tokens || 0;
+                            outputTokens = tokenInfo.total_token_usage.output_tokens || 0;
+                            totalTokens = tokenInfo.total_token_usage.total_tokens || inputTokens + outputTokens;
                         }
                         if (tokenInfo.model_context_window) {
                             contextWindow = tokenInfo.model_context_window;
@@ -1237,7 +1336,13 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
 
             return res.json({
                 used: totalTokens,
-                total: contextWindow
+                total: contextWindow,
+                inputTokens,
+                outputTokens,
+                breakdown: {
+                    input: inputTokens,
+                    output: outputTokens
+                }
             });
         }
 
@@ -1280,8 +1385,7 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
         const parsedContextWindow = parseInt(process.env.CONTEXT_WINDOW, 10);
         const contextWindow = Number.isFinite(parsedContextWindow) ? parsedContextWindow : 160000;
         let inputTokens = 0;
-        let cacheCreationTokens = 0;
-        let cacheReadTokens = 0;
+        let outputTokens = 0;
 
         // Find the latest assistant message with usage data (scan from end)
         for (let i = lines.length - 1; i >= 0; i--) {
@@ -1294,8 +1398,7 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
 
                     // Use token counts from latest assistant message only
                     inputTokens = usage.input_tokens || 0;
-                    cacheCreationTokens = usage.cache_creation_input_tokens || 0;
-                    cacheReadTokens = usage.cache_read_input_tokens || 0;
+                    outputTokens = usage.output_tokens || 0;
 
                     break; // Stop after finding the latest assistant message
                 }
@@ -1305,16 +1408,16 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
             }
         }
 
-        // Calculate total context usage (excluding output_tokens, as per ccusage)
-        const totalUsed = inputTokens + cacheCreationTokens + cacheReadTokens;
+        const totalUsed = inputTokens + outputTokens;
 
         res.json({
             used: totalUsed,
             total: contextWindow,
+            inputTokens,
+            outputTokens,
             breakdown: {
                 input: inputTokens,
-                cacheCreation: cacheCreationTokens,
-                cacheRead: cacheReadTokens
+                output: outputTokens
             }
         });
     } catch (error) {

server/modules/providers/list/claude/claude-auth.provider.ts

@@ -16,6 +16,10 @@ type ClaudeCredentialsStatus = {
   error?: string;
 };
 
+const hasErrorCode = (error: unknown, code: string): boolean => (
+  error instanceof Error && 'code' in error && error.code === code
+);
+
 export class ClaudeProviderAuth implements IProviderAuth {
   /**
    * Checks whether the Claude Code CLI is available on this host.
@@ -77,6 +81,8 @@ export class ClaudeProviderAuth implements IProviderAuth {
    * Checks Claude credentials in the same priority order used by Claude Code.
    */
   private async checkCredentials(): Promise<ClaudeCredentialsStatus> {
+    const missingCredentialsError = 'Claude CLI is not authenticated. Run claude /login or configure ANTHROPIC_API_KEY.';
+
     if (process.env.ANTHROPIC_API_KEY?.trim()) {
       return { authenticated: true, email: 'API Key Auth', method: 'api_key' };
     }
@@ -110,15 +116,33 @@ export class ClaudeProviderAuth implements IProviderAuth {
 
         return {
           authenticated: false,
-          email,
-          method: 'credentials_file',
-          error: 'OAuth token has expired. Please re-authenticate with claude login',
+          email: null,
+          method: null,
+          error: 'Claude login has expired. Run claude /login again.',
         };
       }
 
-      return { authenticated: false, email: null, method: null };
-    } catch {
-      return { authenticated: false, email: null, method: null };
+      return {
+        authenticated: false,
+        email: null,
+        method: null,
+        error: missingCredentialsError,
+      };
+    } catch (error) {
+      let errorMessage = 'Unable to read Claude credentials. Run claude /login again.';
+
+      if (hasErrorCode(error, 'ENOENT')) {
+        errorMessage = missingCredentialsError;
+      } else if (error instanceof SyntaxError) {
+        errorMessage = 'Claude credentials are unreadable. Run claude /login again.';
+      }
+
+      return {
+        authenticated: false,
+        email: null,
+        method: null,
+        error: errorMessage,
+      };
     }
   }
 }

server/modules/providers/list/claude/claude-models.provider.ts

@@ -1,14 +1,10 @@
 import { readFile } from 'node:fs/promises';
 
-import { query, type ModelInfo, type Options } from '@anthropic-ai/claude-agent-sdk';
-
 import { sessionsDb } from '@/modules/database/index.js';
-import { resolveClaudeCodeExecutablePath } from '@/shared/claude-cli-path.js';
 import type { IProviderModels } from '@/shared/interfaces.js';
 import type {
   ProviderChangeActiveModelInput,
   ProviderCurrentActiveModel,
-  ProviderModelOption,
   ProviderModelsDefinition,
   ProviderSessionActiveModelChange,
 } from '@/shared/types.js';
@@ -19,17 +15,29 @@ import {
 
 export const CLAUDE_FALLBACK_MODELS: ProviderModelsDefinition = {
   OPTIONS: [
-    { value: 'default', label: 'Default (recommended)' },
-    { value: 'sonnet[1m]', label: 'Sonnet (1M context)' },
-    { value: 'opus', label: 'Opus' },
-    { value: 'opus[1m]', label: 'Opus (1M context)' },
-    { value: 'haiku', label: 'Haiku' },
-    { value: 'sonnet', label: 'sonnet' },
+    {
+      value: 'default',
+      label: 'Default (recommended)',
+      description: 'Use the default model (currently Opus 4.7 (1M context)) · $5/$25 per Mtok',
+    },
+    {
+      value: 'sonnet',
+      label: 'Sonnet',
+      description: 'Sonnet 4.6 · Best for everyday tasks · $3/$15 per Mtok',
+    },
+    {
+      value: 'sonnet[1m]',
+      label: 'Sonnet (1M context)',
+      description: 'Sonnet 4.6 for long sessions · $3/$15 per Mtok',
+    },
+    {
+      value: 'haiku',
+      label: 'Haiku',
+      description: 'Haiku 4.5 · Fastest for quick answers · $1/$5 per Mtok',
+    },
   ],
   DEFAULT: 'default',
 };
-
-type ClaudeModelQueryOptions = Pick<Options, 'env' | 'pathToClaudeCodeExecutable' | 'permissionMode'>;
 type ClaudeInitEvent = {
   sessionId?: string;
   session_id?: string;
@@ -49,46 +57,6 @@ const ANSI_PATTERN = new RegExp(
   'g',
 );
 
-const buildClaudeQueryOptions = (): ClaudeModelQueryOptions => ({
-  env: { ...process.env },
-  pathToClaudeCodeExecutable: resolveClaudeCodeExecutablePath(process.env.CLAUDE_CLI_PATH),
-  permissionMode: 'default',
-});
-
-const mapClaudeModel = (model: ModelInfo): ProviderModelOption => ({
-  value: model.value,
-  label: model.displayName || model.value,
-  description: model.description || undefined,
-});
-
-const buildClaudeModelsDefinition = (models: ModelInfo[]): ProviderModelsDefinition => {
-  const options: ProviderModelOption[] = [];
-  const seenValues = new Set<string>();
-
-  for (const model of models) {
-    const mappedModel = mapClaudeModel(model);
-    if (seenValues.has(mappedModel.value)) {
-      continue;
-    }
-
-    seenValues.add(mappedModel.value);
-    options.push(mappedModel);
-  }
-
-  if (options.length === 0) {
-    return CLAUDE_FALLBACK_MODELS;
-  }
-
-  const defaultValue = options.find((option) => option.value === 'default')?.value
-    ?? options[0]?.value
-    ?? CLAUDE_FALLBACK_MODELS.DEFAULT;
-
-  return {
-    OPTIONS: options,
-    DEFAULT: defaultValue,
-  };
-};
-
 const extractClaudeEventModel = (event: ClaudeInitEvent, sessionId: string): string | null => {
   const eventSessionId = event.sessionId ?? event.session_id;
   if (eventSessionId && eventSessionId !== sessionId) {
@@ -181,25 +149,18 @@ const readClaudeSessionModelFromJsonl = async (
 
 export class ClaudeProviderModels implements IProviderModels {
   async getSupportedModels(): Promise<ProviderModelsDefinition> {
-    let queryInstance: ReturnType<typeof query> | null = null;
-
-    try {
-      // The SDK exposes its runtime model catalog on the initialized query
-      // instance, so we create a lightweight query and immediately close it
-      // after reading the control-plane metadata.
-      queryInstance = query({
-        prompt: 'Get supported models',
-        options: buildClaudeQueryOptions(),
-      });
-
-      const supportedModels = await queryInstance.supportedModels();
-
-      return buildClaudeModelsDefinition(supportedModels);
-    } catch {
-      return CLAUDE_FALLBACK_MODELS;
-    } finally {
-      queryInstance?.close();
-    }
+    // claude creates a new jsonl file as a separate session for this request.
+    // As a result, it lists the workspace where this is invoked when it shouldn't.
+    //
+    // Disabled for now:
+    // const queryInstance = query({
+    //   prompt: 'Get supported models',
+    //   options: buildClaudeQueryOptions(),
+    // });
+    // const supportedModels = await queryInstance.supportedModels();
+    // queryInstance.close();
+    // return buildClaudeModelsDefinition(supportedModels);
+    return CLAUDE_FALLBACK_MODELS;
   }
 
   async getCurrentActiveModel(sessionId?: string): Promise<ProviderCurrentActiveModel> {

server/modules/providers/list/gemini/gemini-sessions.provider.ts

@@ -88,22 +88,15 @@ function buildGeminiTokenUsage(tokens: unknown): AnyRecord | undefined {
   const record = tokens as AnyRecord;
   const input = Number(record.input || 0);
   const output = Number(record.output || 0);
-  const cached = Number(record.cached || 0);
-  const thoughts = Number(record.thoughts || 0);
-  const tool = Number(record.tool || 0);
-
-  const totalFromFields = input + output + cached + thoughts + tool;
-  const total = Number(record.total || totalFromFields || 0);
+  const total = Number(record.total || input + output || 0);
 
   return {
     used: total,
-    total: total,
+    inputTokens: input,
+    outputTokens: output,
     breakdown: {
       input,
       output,
-      cached,
-      thoughts,
-      tool,
     },
   };
 }

server/modules/providers/list/opencode/opencode-sessions.provider.ts

@@ -28,9 +28,9 @@ type OpenCodeHistoryRow = {
 type OpenCodeTokenTotals = {
   inputTokens: number;
   outputTokens: number;
-  cacheReadTokens: number;
-  cacheCreationTokens: number;
   reasoningTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
 };
 
 const openOpenCodeDatabase = (): Database.Database | null => {
@@ -106,11 +106,13 @@ const buildTokenUsage = (totals: OpenCodeTokenTotals | undefined): AnyRecord | u
   }
 
   const inputTokens = totals.inputTokens;
+  const displayInputTokens = inputTokens + totals.cacheReadTokens;
   const outputTokens = totals.outputTokens;
-  const cacheReadTokens = totals.cacheReadTokens;
-  const cacheCreationTokens = totals.cacheCreationTokens;
-  const reasoningTokens = totals.reasoningTokens;
-  const used = inputTokens + outputTokens + cacheReadTokens + cacheCreationTokens + reasoningTokens;
+  const used = inputTokens
+    + outputTokens
+    + totals.reasoningTokens
+    + totals.cacheReadTokens
+    + totals.cacheWriteTokens;
 
   if (used <= 0) {
     return undefined;
@@ -118,14 +120,50 @@ const buildTokenUsage = (totals: OpenCodeTokenTotals | undefined): AnyRecord | u
 
   return {
     used,
-    total: used,
-    inputTokens,
+    inputTokens: displayInputTokens,
     outputTokens,
-    cacheReadTokens,
-    cacheCreationTokens,
+    breakdown: {
+      input: displayInputTokens,
+      output: outputTokens,
+    },
   };
 };
 
+const readOpenCodeSessionColumnTokenUsage = (
+  db: Database.Database,
+  sessionId: string,
+): AnyRecord | undefined => {
+  const columns = db.prepare('PRAGMA table_info(session)').all() as { name: string }[];
+  const columnNames = new Set(columns.map((column) => column.name));
+  const requiredColumns = ['tokens_input', 'tokens_output', 'tokens_reasoning', 'tokens_cache_read', 'tokens_cache_write'];
+  if (!requiredColumns.every((column) => columnNames.has(column))) {
+    return undefined;
+  }
+
+  const row = db.prepare(`
+    SELECT
+      tokens_input AS inputTokens,
+      tokens_output AS outputTokens,
+      tokens_reasoning AS reasoningTokens,
+      tokens_cache_read AS cacheReadTokens,
+      tokens_cache_write AS cacheWriteTokens
+    FROM session
+    WHERE id = ?
+  `).get(sessionId) as OpenCodeTokenTotals | undefined;
+
+  if (!row) {
+    return undefined;
+  }
+
+  return buildTokenUsage({
+    inputTokens: Number(row.inputTokens ?? 0),
+    outputTokens: Number(row.outputTokens ?? 0),
+    reasoningTokens: Number(row.reasoningTokens ?? 0),
+    cacheReadTokens: Number(row.cacheReadTokens ?? 0),
+    cacheWriteTokens: Number(row.cacheWriteTokens ?? 0),
+  });
+};
+
 /**
  * OpenCode stores per-message token counts on assistant `message.data` objects
  * (see MessageV2.Assistant). Older DBs also had session-level counters; this
@@ -135,13 +173,18 @@ const aggregateOpenCodeSessionTokenUsage = (
   db: Database.Database,
   sessionId: string,
 ): AnyRecord | undefined => {
+  const sessionColumnUsage = readOpenCodeSessionColumnTokenUsage(db, sessionId);
+  if (sessionColumnUsage) {
+    return sessionColumnUsage;
+  }
+
   const rows = db.prepare('SELECT data FROM message WHERE session_id = ?').all(sessionId) as { data: string }[];
 
   let inputTokens = 0;
   let outputTokens = 0;
-  let cacheReadTokens = 0;
-  let cacheCreationTokens = 0;
   let reasoningTokens = 0;
+  let cacheReadTokens = 0;
+  let cacheWriteTokens = 0;
 
   for (const row of rows) {
     const info = readJsonRecord(row.data);
@@ -159,15 +202,15 @@ const aggregateOpenCodeSessionTokenUsage = (
     reasoningTokens += Number(tokens.reasoning ?? 0);
     const cache = readObjectRecord(tokens.cache);
     cacheReadTokens += Number(cache?.read ?? 0);
-    cacheCreationTokens += Number(cache?.write ?? 0);
+    cacheWriteTokens += Number(cache?.write ?? 0);
   }
 
   return buildTokenUsage({
     inputTokens,
     outputTokens,
-    cacheReadTokens,
-    cacheCreationTokens,
     reasoningTokens,
+    cacheReadTokens,
+    cacheWriteTokens,
   });
 };
 

server/modules/providers/tests/opencode-sessions.test.ts

@@ -85,6 +85,12 @@ const createOpenCodeDatabase = async (homeDir: string, workspacePath: string): P
         path TEXT,
         agent TEXT,
         model TEXT,
+        cost REAL NOT NULL DEFAULT 0,
+        tokens_input INTEGER NOT NULL DEFAULT 0,
+        tokens_output INTEGER NOT NULL DEFAULT 0,
+        tokens_reasoning INTEGER NOT NULL DEFAULT 0,
+        tokens_cache_read INTEGER NOT NULL DEFAULT 0,
+        tokens_cache_write INTEGER NOT NULL DEFAULT 0,
         FOREIGN KEY (project_id) REFERENCES project(id) ON DELETE CASCADE
       );
 
@@ -124,9 +130,10 @@ const createOpenCodeDatabase = async (homeDir: string, workspacePath: string): P
     );
     db.prepare(`
       INSERT INTO session (
-        id, project_id, slug, directory, title, version, time_created, time_updated, time_archived
+        id, project_id, slug, directory, title, version, time_created, time_updated, time_archived,
+        tokens_input, tokens_output, tokens_reasoning, tokens_cache_read, tokens_cache_write
       )
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
     `).run(
       'open-session-1',
       'project-1',
@@ -137,6 +144,11 @@ const createOpenCodeDatabase = async (homeDir: string, workspacePath: string): P
       1_700_000_000_000,
       1_700_000_004_000,
       null,
+      10,
+      20,
+      7,
+      3,
+      2,
     );
 
     const userMessageData = JSON.stringify({
@@ -302,12 +314,13 @@ test('OpenCode sessions provider reads sqlite history and token usage', { concur
     assert.equal(history.messages[3]?.kind, 'tool_use');
     assert.deepEqual(history.messages[3]?.toolResult, { content: 'ok', isError: false });
     assert.deepEqual(history.tokenUsage, {
-      used: 35,
-      total: 35,
-      inputTokens: 10,
+      used: 42,
+      inputTokens: 13,
       outputTokens: 20,
-      cacheReadTokens: 3,
-      cacheCreationTokens: 2,
+      breakdown: {
+        input: 13,
+        output: 20,
+      },
     });
 
     const paged = await provider.fetchHistory('open-session-1', { limit: 2, offset: 0 });

server/openai-codex.js

@@ -23,6 +23,34 @@ import { createNormalizedMessage } from './shared/utils.js';
 // Track active sessions
 const activeCodexSessions = new Map();
 
+function readUsageNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function extractCodexTokenBudget(event) {
+  const info = event?.info || event?.payload?.info || event?.usage?.info;
+  const usage = info?.total_token_usage || event?.usage?.total_token_usage || event?.usage;
+  if (!usage || typeof usage !== 'object') {
+    return null;
+  }
+
+  const inputTokens = readUsageNumber(usage.input_tokens);
+  const outputTokens = readUsageNumber(usage.output_tokens);
+  const used = readUsageNumber(usage.total_tokens) || inputTokens + outputTokens;
+
+  return {
+    used,
+    total: readUsageNumber(info?.model_context_window || event?.usage?.model_context_window) || 200000,
+    inputTokens,
+    outputTokens,
+    breakdown: {
+      input: inputTokens,
+      output: outputTokens,
+    },
+  };
+}
+
 /**
  * Transform Codex SDK event to WebSocket message format
  * @param {object} event - SDK event
@@ -316,9 +344,11 @@ export async function queryCodex(command, options = {}, ws) {
       }
 
       // Extract and send token usage if available (normalized to match Claude format)
-      if (event.type === 'turn.completed' && event.usage) {
-        const totalTokens = (event.usage.input_tokens || 0) + (event.usage.output_tokens || 0);
-        sendMessage(ws, createNormalizedMessage({ kind: 'status', text: 'token_budget', tokenBudget: { used: totalTokens, total: 200000 }, sessionId: capturedSessionId || sessionId || null, provider: 'codex' }));
+      if (event.type === 'turn.completed') {
+        const tokenBudget = extractCodexTokenBudget(event);
+        if (tokenBudget) {
+          sendMessage(ws, createNormalizedMessage({ kind: 'status', text: 'token_budget', tokenBudget, sessionId: capturedSessionId || sessionId || null, provider: 'codex' }));
+        }
       }
     }
 

server/opencode-cli.js

@@ -1,12 +1,14 @@
 import { spawn } from 'child_process';
+import fsSync from 'node:fs';
 
 import crossSpawn from 'cross-spawn';
+import Database from 'better-sqlite3';
 
 import { sessionsService } from './modules/providers/services/sessions.service.js';
 import { providerAuthService } from './modules/providers/services/provider-auth.service.js';
 import { providerModelsService } from './modules/providers/services/provider-models.service.js';
 import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
-import { createNormalizedMessage } from './shared/utils.js';
+import { createNormalizedMessage, getOpenCodeDatabasePath } from './shared/utils.js';
 
 const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
 
@@ -20,6 +22,66 @@ function readOpenCodeSessionId(event) {
   return event.sessionID || event.sessionId || null;
 }
 
+function readOpenCodeTokenUsage(sessionId) {
+  const dbPath = getOpenCodeDatabasePath();
+  if (!sessionId || !fsSync.existsSync(dbPath)) {
+    return null;
+  }
+
+  let db = null;
+  try {
+    db = new Database(dbPath, { readonly: true, fileMustExist: true });
+    const columns = db.prepare('PRAGMA table_info(session)').all();
+    const columnNames = new Set(columns.map((column) => column.name));
+    const requiredColumns = ['tokens_input', 'tokens_output', 'tokens_reasoning', 'tokens_cache_read', 'tokens_cache_write'];
+    if (!requiredColumns.every((column) => columnNames.has(column))) {
+      return null;
+    }
+
+    const row = db.prepare(`
+      SELECT
+        tokens_input AS inputTokens,
+        tokens_output AS outputTokens,
+        tokens_reasoning AS reasoningTokens,
+        tokens_cache_read AS cacheReadTokens,
+        tokens_cache_write AS cacheWriteTokens
+      FROM session
+      WHERE id = ?
+    `).get(sessionId);
+
+    if (!row) {
+      return null;
+    }
+
+    const inputTokens = Number(row.inputTokens || 0) + Number(row.cacheReadTokens || 0);
+    const outputTokens = Number(row.outputTokens || 0);
+    const used = Number(row.inputTokens || 0)
+      + outputTokens
+      + Number(row.reasoningTokens || 0)
+      + Number(row.cacheReadTokens || 0)
+      + Number(row.cacheWriteTokens || 0);
+    if (used <= 0) {
+      return null;
+    }
+
+    return {
+      used,
+      inputTokens,
+      outputTokens,
+      breakdown: {
+        input: inputTokens,
+        output: outputTokens,
+      },
+    };
+  } catch {
+    return null;
+  } finally {
+    if (db) {
+      db.close();
+    }
+  }
+}
+
 async function spawnOpenCode(command, options = {}, ws) {
   return new Promise((resolve, reject) => {
     const { sessionId, projectPath, cwd, model, sessionSummary } = options;
@@ -183,6 +245,17 @@ async function spawnOpenCode(command, options = {}, ws) {
           stdoutLineBuffer = '';
         }
 
+        const tokenBudget = readOpenCodeTokenUsage(finalSessionId);
+        if (tokenBudget) {
+          ws.send(createNormalizedMessage({
+            kind: 'status',
+            text: 'token_budget',
+            tokenBudget,
+            sessionId: finalSessionId,
+            provider: 'opencode',
+          }));
+        }
+
         ws.send(createNormalizedMessage({
           kind: 'complete',
           exitCode: code,

server/routes/commands.js

@@ -174,7 +174,7 @@ const builtInCommands = [
   },
   {
     name: "/cost",
-    description: "Display token usage and cost information",
+    description: "Display token usage information",
     namespace: "builtin",
     metadata: { type: "builtin" },
   },
@@ -258,7 +258,7 @@ Custom commands can be created in:
     const catalog = (await providerModelsService.getProviderModels(provider)).models;
     const model = await resolveCommandModel(provider, catalog, context?.sessionId);
 
-    const used =
+    const reportedUsed =
       Number(
         tokenUsage.used ?? tokenUsage.totalUsed ?? tokenUsage.total_tokens ?? 0,
       ) || 0;
@@ -266,16 +266,15 @@ Custom commands can be created in:
       Number(
         tokenUsage.total ??
           tokenUsage.contextWindow ??
-          parseInt(process.env.CONTEXT_WINDOW || "160000", 10),
-      ) || 160000;
-    const percentage =
-      total > 0 ? Number(((used / total) * 100).toFixed(1)) : 0;
-
+          0,
+      ) || 0;
     const inputTokensRaw =
       Number(
         tokenUsage.inputTokens ??
           tokenUsage.input ??
+          tokenUsage.input_tokens ??
           tokenUsage.cumulativeInputTokens ??
+          tokenUsage.breakdown?.input ??
           tokenUsage.promptTokens ??
           0,
       ) || 0;
@@ -283,36 +282,14 @@ Custom commands can be created in:
       Number(
         tokenUsage.outputTokens ??
           tokenUsage.output ??
+          tokenUsage.output_tokens ??
           tokenUsage.cumulativeOutputTokens ??
+          tokenUsage.breakdown?.output ??
           tokenUsage.completionTokens ??
           0,
       ) || 0;
-    const cacheTokens =
-      Number(
-        tokenUsage.cacheReadTokens ??
-          tokenUsage.cacheCreationTokens ??
-          tokenUsage.cacheTokens ??
-          tokenUsage.cachedTokens ??
-          0,
-      ) || 0;
-
-    // If we only have total used tokens, treat them as input for display/estimation.
-    const inputTokens =
-      inputTokensRaw > 0 || outputTokens > 0 || cacheTokens > 0
-        ? inputTokensRaw + cacheTokens
-        : used;
-
-    // Rough default rates by provider (USD / 1M tokens).
-    const pricingByProvider = {
-      claude: { input: 3, output: 15 },
-      cursor: { input: 3, output: 15 },
-      codex: { input: 1.5, output: 6 },
-    };
-    const rates = pricingByProvider[provider] || pricingByProvider.claude;
-
-    const inputCost = (inputTokens / 1_000_000) * rates.input;
-    const outputCost = (outputTokens / 1_000_000) * rates.output;
-    const totalCost = inputCost + outputCost;
+    const hasTokenBreakdown = inputTokensRaw > 0 || outputTokens > 0;
+    const used = reportedUsed || inputTokensRaw + outputTokens;
 
     return {
       type: "builtin",
@@ -321,18 +298,15 @@ Custom commands can be created in:
         tokenUsage: {
           used,
           total,
-          percentage,
-        },
-        tokenBreakdown: {
-          input: inputTokens,
-          output: outputTokens,
-          cache: cacheTokens,
-        },
-        cost: {
-          input: inputCost.toFixed(4),
-          output: outputCost.toFixed(4),
-          total: totalCost.toFixed(4),
         },
+        ...(hasTokenBreakdown
+          ? {
+              tokenBreakdown: {
+                input: inputTokensRaw,
+                output: outputTokens,
+              },
+            }
+          : {}),
         provider,
         model,
       },

src/components/chat/hooks/useChatComposerState.ts

@@ -97,17 +97,10 @@ export type CostCommandData = {
   tokenUsage?: {
     used?: number;
     total?: number;
-    percentage?: number;
-  };
-  cost?: {
-    input?: string;
-    output?: string;
-    total?: string;
   };
   tokenBreakdown?: {
     input?: number;
     output?: number;
-    cache?: number;
   };
   provider?: string;
   model?: string;

src/components/chat/hooks/useChatSessionState.ts

@@ -624,19 +624,23 @@ export function useChatSessionState({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chatMessages.length, isLoadingSessionMessages, searchTarget]);
 
-  // Token usage fetch for Claude
+  // Initial token usage fetch for providers with file-backed usage data.
   useEffect(() => {
     if (!selectedProject || !selectedSession?.id) {
       setTokenBudget(null);
       return;
     }
     const sessionProvider = selectedSession.__provider || 'claude';
-    if (sessionProvider !== 'claude') return;
+    if (sessionProvider !== 'claude' && sessionProvider !== 'codex' && sessionProvider !== 'gemini' && sessionProvider !== 'opencode') {
+      setTokenBudget(null);
+      return;
+    }
 
     const fetchInitialTokenUsage = async () => {
       try {
         // Token usage endpoint is now keyed by the DB projectId.
-        const url = `/api/projects/${selectedProject.projectId}/sessions/${selectedSession.id}/token-usage`;
+        const params = new URLSearchParams({ provider: sessionProvider });
+        const url = `/api/projects/${selectedProject.projectId}/sessions/${selectedSession.id}/token-usage?${params.toString()}`;
         const response = await authenticatedFetch(url);
         if (response.ok) {
           setTokenBudget(await response.json());

src/components/chat/view/subcomponents/ChatComposer.tsx

@@ -18,7 +18,7 @@ import ClaudeStatus from './ClaudeStatus';
 import ImageAttachment from './ImageAttachment';
 import PermissionRequestsBanner from './PermissionRequestsBanner';
 import ThinkingModeSelector from './ThinkingModeSelector';
-import TokenUsagePie from './TokenUsagePie';
+import TokenUsageSummary from './TokenUsageSummary';
 import {
   PromptInput,
   PromptInputHeader,
@@ -60,7 +60,7 @@ interface ChatComposerProps {
   onModeSwitch: () => void;
   thinkingMode: string;
   setThinkingMode: Dispatch<SetStateAction<string>>;
-  tokenBudget: { used?: number; total?: number } | null;
+  tokenBudget: Record<string, unknown> | null;
   slashCommandsCount: number;
   onToggleCommandMenu: () => void;
   hasInput: boolean;
@@ -361,7 +361,7 @@ export default function ChatComposer({
               <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
             )}
 
-            <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
+            <TokenUsageSummary usage={tokenBudget} />
 
             <PromptInputButton
               tooltip={{ content: t('input.showAllCommands') }}
@@ -401,14 +401,6 @@ export default function ChatComposer({
             <PromptInputSubmit
               disabled={!input.trim() || isLoading}
               className="h-10 w-10 sm:h-10 sm:w-10"
-              onMouseDown={(event) => {
-                event.preventDefault();
-                onSubmit(event as unknown as MouseEvent<HTMLButtonElement>);
-              }}
-              onTouchStart={(event) => {
-                event.preventDefault();
-                onSubmit(event as unknown as TouchEvent<HTMLButtonElement>);
-              }}
             />
           </div>
         </PromptInputFooter>

src/components/chat/view/subcomponents/CommandResultModal.tsx

@@ -6,7 +6,6 @@ import {
   CircleHelp,
   Clipboard,
   Coins,
-  Command as CommandIcon,
   Cpu,
   Gauge,
   Package,
@@ -17,7 +16,6 @@ import {
   Timer,
   RefreshCw,
   X,
-  Zap,
 } from 'lucide-react';
 
 import { Badge, Button, Dialog, DialogContent, DialogTitle, Input } from '../../../../shared/view/ui';
@@ -84,7 +82,7 @@ const PROVIDER_LABELS: Record<string, string> = {
 
 const FALLBACK_COMMANDS: CommandEntry[] = [
   { name: '/models', description: 'Browse available models for the active provider.' },
-  { name: '/cost', description: 'Review context usage and estimated token spend.' },
+  { name: '/cost', description: 'Review token usage for the active session.' },
   { name: '/status', description: 'Inspect runtime, version, provider, and environment status.' },
   { name: '/memory', description: 'Open the project CLAUDE.md memory file.' },
   { name: '/config', description: 'Open settings and configuration.' },
@@ -99,13 +97,6 @@ const getProviderLabel = (provider: string | undefined, fallback = 'Unknown') =>
   return PROVIDER_LABELS[provider] || provider;
 };
 
-const clampPercentage = (value: number) => {
-  if (!Number.isFinite(value)) {
-    return 0;
-  }
-  return Math.max(0, Math.min(100, value));
-};
-
 const formatNumber = (value: number) => {
   if (!Number.isFinite(value)) {
     return '0';
@@ -113,11 +104,6 @@ const formatNumber = (value: number) => {
   return value.toLocaleString();
 };
 
-const formatCurrency = (value: number | string | undefined) => {
-  const numeric = Number(value ?? 0);
-  return `$${Number.isFinite(numeric) ? numeric.toFixed(4) : '0.0000'}`;
-};
-
 function MetricCard({
   label,
   value,
@@ -507,62 +493,71 @@ function ModelsContent({
 function CostContent({ data }: { data: CostCommandData }) {
   const used = Number(data.tokenUsage?.used ?? 0);
   const total = Number(data.tokenUsage?.total ?? 0);
-  const percentage = clampPercentage(Number(data.tokenUsage?.percentage ?? 0));
   const model = data.model || 'Unknown';
   const provider = getProviderLabel(data.provider, data.provider || 'Unknown');
-  const inputTokens = Number(data.tokenBreakdown?.input ?? 0);
-  const outputTokens = Number(data.tokenBreakdown?.output ?? 0);
-  const cacheTokens = Number(data.tokenBreakdown?.cache ?? 0);
-  const totalCost = Number(data.cost?.total ?? 0);
+  const hasBreakdown =
+    typeof data.tokenBreakdown?.input === 'number' ||
+    typeof data.tokenBreakdown?.output === 'number';
+  const usageRows = [
+    { label: 'Total tokens used', value: formatNumber(used), icon: Activity },
+    ...(hasBreakdown
+      ? [
+          {
+            label: 'Input tokens',
+            value: formatNumber(Number(data.tokenBreakdown?.input ?? 0)),
+            icon: TerminalSquare,
+          },
+          {
+            label: 'Output tokens',
+            value: formatNumber(Number(data.tokenBreakdown?.output ?? 0)),
+            icon: Coins,
+          },
+        ]
+      : [
+          {
+            label: 'Breakdown',
+            value: 'Unavailable',
+            icon: TerminalSquare,
+          },
+        ]),
+    ...(total > 0
+      ? [{ label: 'Context window', value: formatNumber(total), icon: Gauge }]
+      : []),
+  ];
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[18rem_1fr]">
-      <div className="rounded-3xl border border-primary/25 bg-primary/10 p-5 text-center">
-        <div
-          className="mx-auto grid h-40 w-40 place-items-center rounded-full p-2 shadow-inner"
-          style={{
-            background: `conic-gradient(hsl(var(--primary)) ${percentage * 3.6}deg, hsl(var(--muted)) 0deg)`,
-          }}
-        >
-          <div className="grid h-full w-full place-items-center rounded-full border border-border/70 bg-popover">
-            <div>
-              <p className="font-mono text-3xl font-semibold text-foreground">{percentage.toFixed(1)}%</p>
-              <p className="mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground">context</p>
+    <div className="space-y-4">
+      <div className="overflow-hidden rounded-2xl border border-border/70 bg-background/75">
+        {usageRows.map((row) => {
+          const Icon = row.icon;
+
+          return (
+            <div
+              key={row.label}
+              className="flex items-center justify-between gap-4 border-b border-border/60 px-4 py-3 last:border-b-0"
+            >
+              <div className="flex min-w-0 items-center gap-3">
+                <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl border border-primary/20 bg-primary/10 text-primary">
+                  <Icon className="h-4 w-4" />
+                </span>
+                <span className="truncate text-sm font-medium text-foreground">{row.label}</span>
+              </div>
+              <span className="shrink-0 font-mono text-sm font-semibold text-foreground">{row.value}</span>
             </div>
-          </div>
-        </div>
-        <p className="mt-4 text-sm text-muted-foreground">
-          {formatNumber(used)} of {formatNumber(total)} tokens used
-        </p>
+          );
+        })}
       </div>
 
-      <div className="space-y-3">
-        <div className="grid gap-3 sm:grid-cols-3">
-          <MetricCard label="Input" value={formatCurrency(data.cost?.input)} icon={Zap} />
-          <MetricCard label="Output" value={formatCurrency(data.cost?.output)} icon={Activity} />
-          <MetricCard label="Total" value={formatCurrency(totalCost)} icon={Coins} tone="primary" />
-        </div>
-
-        <div className="grid gap-3 sm:grid-cols-3">
-          <MetricCard label="Input tokens" value={formatNumber(inputTokens)} icon={CommandIcon} />
-          <MetricCard label="Output tokens" value={formatNumber(outputTokens)} icon={TerminalSquare} />
-          <MetricCard label="Cache tokens" value={formatNumber(cacheTokens)} icon={Package} />
-        </div>
-
-        <div className="rounded-2xl border border-border/70 bg-muted/20 p-4">
-          <div className="grid gap-3 sm:grid-cols-2">
-            <div>
-              <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Provider</p>
-              <p className="mt-1 text-sm font-semibold text-foreground">{provider}</p>
-            </div>
-            <div>
-              <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Model</p>
-              <p className="mt-1 break-all font-mono text-sm text-foreground">{model}</p>
-            </div>
+      <div className="rounded-2xl border border-border/70 bg-muted/20 p-4">
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Provider</p>
+            <p className="mt-1 text-sm font-semibold text-foreground">{provider}</p>
+          </div>
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Model</p>
+            <p className="mt-1 break-all font-mono text-sm text-foreground">{model}</p>
           </div>
-          <p className="mt-3 text-xs leading-5 text-muted-foreground">
-            Cost is an estimate based on the available token counters and default provider rates.
-          </p>
         </div>
       </div>
     </div>
@@ -636,8 +631,8 @@ export default function CommandResultModal({
     },
     cost: {
       eyebrow: 'Session telemetry',
-      title: 'Usage & Cost',
-      subtitle: 'Token budget, context pressure, and estimated spend for this session.',
+      title: 'Token Usage',
+      subtitle: 'Input, output, and total token counts for this session.',
       icon: Coins,
     },
     status: {

src/components/chat/view/subcomponents/TokenUsagePie.tsx

@@ -1,54 +0,0 @@
-type TokenUsagePieProps = {
-  used: number;
-  total: number;
-};
-
-export default function TokenUsagePie({ used, total }: TokenUsagePieProps) {
-  // Token usage visualization component
-  // Only bail out on missing values or non‐positive totals; allow used===0 to render 0%
-  if (used == null || total == null || total <= 0) return null;
-
-  const percentage = Math.min(100, (used / total) * 100);
-  const radius = 10;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - (percentage / 100) * circumference;
-
-  // Color based on usage level
-  const getColor = () => {
-    if (percentage < 50) return '#3b82f6'; // blue
-    if (percentage < 75) return '#f59e0b'; // orange
-    return '#ef4444'; // red
-  };
-
-  return (
-    <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
-      <svg width="24" height="24" viewBox="0 0 24 24" className="-rotate-90 transform">
-        {/* Background circle */}
-        <circle
-          cx="12"
-          cy="12"
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          className="text-gray-300 dark:text-gray-600"
-        />
-        {/* Progress circle */}
-        <circle
-          cx="12"
-          cy="12"
-          r={radius}
-          fill="none"
-          stroke={getColor()}
-          strokeWidth="2"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          strokeLinecap="round"
-        />
-      </svg>
-      <span title={`${used.toLocaleString()} / ${total.toLocaleString()} tokens`}>
-        {percentage.toFixed(1)}%
-      </span>
-    </div>
-  );
-}

src/components/chat/view/subcomponents/TokenUsageSummary.tsx

@@ -0,0 +1,53 @@
+import { ActivityIcon } from 'lucide-react';
+
+type TokenUsageSummaryProps = {
+  usage: Record<string, unknown> | null;
+};
+
+const formatTokenCount = (value: number) => {
+  if (!Number.isFinite(value) || value <= 0) {
+    return '0';
+  }
+
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1)}M`;
+  }
+
+  if (value >= 10_000) {
+    return `${Math.round(value / 1_000)}K`;
+  }
+
+  if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(1)}K`;
+  }
+
+  return value.toLocaleString();
+};
+
+const readUsageNumber = (value: unknown) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+export default function TokenUsageSummary({ usage }: TokenUsageSummaryProps) {
+  const breakdown =
+    usage?.breakdown && typeof usage.breakdown === 'object'
+      ? usage.breakdown as Record<string, unknown>
+      : null;
+  const inputTokens = readUsageNumber(usage?.inputTokens ?? breakdown?.input);
+  const outputTokens = readUsageNumber(usage?.outputTokens ?? breakdown?.output);
+  const usedTokens = readUsageNumber(usage?.used) || inputTokens + outputTokens;
+
+  return (
+    <div
+      className="inline-flex h-9 items-center gap-1.5 rounded-lg border border-border/70 bg-background/70 px-2 text-xs text-muted-foreground shadow-sm transition-colors hover:border-primary/25 hover:text-foreground sm:gap-2 sm:px-2.5"
+      title={`${usedTokens.toLocaleString()} tokens used`}
+    >
+      <span className="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
+        <ActivityIcon className="h-3.5 w-3.5" />
+      </span>
+      <span className="font-medium text-foreground">{formatTokenCount(usedTokens)}</span>
+      <span className="hidden text-muted-foreground/70 sm:inline">tokens</span>
+    </div>
+  );
+}

src/components/plugins/view/PluginSettingsTab.tsx

@@ -1,12 +1,93 @@
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Trash2, RefreshCw, GitBranch, Loader2, ServerCrash, ShieldAlert, ExternalLink, BookOpen, Download, BarChart3 } from 'lucide-react';
+import {
+  Activity,
+  BarChart3,
+  BookOpen,
+  Clock,
+  Download,
+  ExternalLink,
+  GitBranch,
+  Loader2,
+  RefreshCw,
+  ServerCrash,
+  ShieldAlert,
+  Terminal,
+  Trash2,
+  type LucideIcon,
+} from 'lucide-react';
+
 import { usePlugins } from '../../../contexts/PluginsContext';
 import type { Plugin } from '../../../contexts/PluginsContext';
+
 import PluginIcon from './PluginIcon';
 
 const STARTER_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-starter';
 const TERMINAL_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-terminal';
+const SCHEDULED_PROMPT_PLUGIN_URL = 'https://github.com/grostim/cloudcli-cron';
+const CLAUDE_WATCH_PLUGIN_URL = 'https://github.com/satsuki19980613/cloudcli-claude-watch';
+
+type PluginRecommendation = {
+  id: string;
+  translationKey: string;
+  repoUrl: string;
+  installedNames: string[];
+  icon: LucideIcon;
+  source: 'official' | 'unofficial';
+};
+
+const OFFICIAL_PLUGIN_RECOMMENDATIONS: PluginRecommendation[] = [
+  {
+    id: 'project-stats',
+    translationKey: 'starterPlugin',
+    repoUrl: STARTER_PLUGIN_URL,
+    installedNames: ['project-stats'],
+    icon: BarChart3,
+    source: 'official',
+  },
+  {
+    id: 'web-terminal',
+    translationKey: 'terminalPlugin',
+    repoUrl: TERMINAL_PLUGIN_URL,
+    installedNames: ['web-terminal'],
+    icon: Terminal,
+    source: 'official',
+  },
+];
+
+const UNOFFICIAL_PLUGIN_RECOMMENDATIONS: PluginRecommendation[] = [
+  {
+    id: 'cloudcli-claude-watch',
+    translationKey: 'claudeWatchPlugin',
+    repoUrl: CLAUDE_WATCH_PLUGIN_URL,
+    installedNames: ['cloudcli-claude-watch'],
+    icon: Activity,
+    source: 'unofficial',
+  },
+  {
+    id: 'workspace-scheduled-prompts',
+    translationKey: 'scheduledPromptPlugin',
+    repoUrl: SCHEDULED_PROMPT_PLUGIN_URL,
+    installedNames: ['workspace-scheduled-prompts'],
+    icon: Clock,
+    source: 'unofficial',
+  },
+];
+
+function repoSlug(repoUrl: string) {
+  return repoUrl.replace(/^https?:\/\/(www\.)?github\.com\//, '');
+}
+
+function normalizeRepoUrl(repoUrl: string | null) {
+  return repoUrl?.replace(/\.git$/, '').replace(/\/$/, '').toLowerCase() ?? null;
+}
+
+function pluginMatchesRecommendation(plugin: Plugin, recommendation: PluginRecommendation) {
+  return (
+    recommendation.installedNames.includes(plugin.name)
+    || normalizeRepoUrl(plugin.repoUrl) === normalizeRepoUrl(recommendation.repoUrl)
+  );
+}
 
 /* ─── Toggle Switch ─────────────────────────────────────────────────────── */
 function ToggleSwitch({ checked, onChange, ariaLabel }: { checked: boolean; onChange: (v: boolean) => void; ariaLabel: string }) {
@@ -208,117 +289,95 @@ function PluginCard({
   );
 }
 
-/* ─── Starter Plugin Card ───────────────────────────────────────────────── */
-function StarterPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
-  const { t } = useTranslation('settings');
-
+/* ─── Recommendation Section ────────────────────────────────────────────── */
+function RecommendationSection({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
   return (
-    <div className="relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
-      <div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
-      <div className="min-w-0 flex-1 p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-2.5">
-            <div className="h-5 w-5 flex-shrink-0 text-blue-500">
-              <BarChart3 className="h-5 w-5" />
-            </div>
-            <div className="min-w-0">
-              <div className="flex flex-wrap items-center gap-2">
-                <span className="text-sm font-semibold leading-none text-foreground">
-                  {t('pluginSettings.starterPlugin.name')}
-                </span>
-                <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
-                  {t('pluginSettings.starterPlugin.badge')}
-                </span>
-                <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
-                  {t('pluginSettings.tab')}
-                </span>
-              </div>
-              <p className="mt-1 text-sm leading-snug text-muted-foreground">
-                {t('pluginSettings.starterPlugin.description')}
-              </p>
-              <a
-                href={STARTER_PLUGIN_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
-              >
-                <GitBranch className="h-3 w-3" />
-                cloudcli-ai/cloudcli-plugin-starter
-              </a>
-            </div>
-          </div>
-          <button
-            onClick={onInstall}
-            disabled={installing}
-            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-          >
-            {installing ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <Download className="h-3.5 w-3.5" />
-            )}
-            {installing ? t('pluginSettings.installing') : t('pluginSettings.starterPlugin.install')}
-          </button>
-        </div>
+    <section className="space-y-2">
+      <div>
+        <h4 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          {title}
+        </h4>
+        <p className="mt-0.5 text-xs text-muted-foreground/70">
+          {description}
+        </p>
       </div>
-    </div>
+      <div className="space-y-2">
+        {children}
+      </div>
+    </section>
   );
 }
 
-/* ─── Terminal Plugin Card ──────────────────────────────────────────────── */
-function TerminalPluginCard({ onInstall, installing }: { onInstall: () => void; installing: boolean }) {
+/* ─── Plugin Recommendation Card ────────────────────────────────────────── */
+function PluginRecommendationCard({
+  recommendation,
+  onInstall,
+  disabled,
+  installing,
+}: {
+  recommendation: PluginRecommendation;
+  onInstall: () => void;
+  disabled: boolean;
+  installing: boolean;
+}) {
   const { t } = useTranslation('settings');
+  const Icon = recommendation.icon;
+  const isOfficial = recommendation.source === 'official';
+  const accentClass = isOfficial ? 'bg-blue-500/30' : 'bg-amber-500/40';
+  const hoverClass = isOfficial ? 'hover:border-blue-400 dark:hover:border-blue-500' : 'hover:border-amber-400 dark:hover:border-amber-500';
+  const iconClass = isOfficial ? 'text-blue-500' : 'text-amber-500';
 
   return (
-    <div className="relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500">
-      <div className="w-[3px] flex-shrink-0 bg-blue-500/30" />
+    <div className={`relative flex overflow-hidden rounded-lg border border-dashed border-border bg-card transition-all duration-200 ${hoverClass}`}>
+      <div className={`w-[3px] flex-shrink-0 ${accentClass}`} />
       <div className="min-w-0 flex-1 p-4">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2.5">
-            <div className="h-5 w-5 flex-shrink-0 text-blue-500">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
-                <rect x="3" y="3" width="18" height="18" rx="2"/>
-                <path d="M7 8l4 4-4 4"/>
-                <line x1="13" y1="16" x2="17" y2="16"/>
-              </svg>
+            <div className={`h-5 w-5 flex-shrink-0 ${iconClass}`}>
+              <Icon className="h-5 w-5" />
             </div>
             <div className="min-w-0">
               <div className="flex flex-wrap items-center gap-2">
                 <span className="text-sm font-semibold leading-none text-foreground">
-                  {t('pluginSettings.terminalPlugin.name')}
-                </span>
-                <span className="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
-                  {t('pluginSettings.terminalPlugin.badge')}
+                  {t(`pluginSettings.${recommendation.translationKey}.name`)}
                 </span>
                 <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                   {t('pluginSettings.tab')}
                 </span>
               </div>
               <p className="mt-1 text-sm leading-snug text-muted-foreground">
-                {t('pluginSettings.terminalPlugin.description')}
+                {t(`pluginSettings.${recommendation.translationKey}.description`)}
               </p>
               <a
-                href={TERMINAL_PLUGIN_URL}
+                href={recommendation.repoUrl}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground/60 transition-colors hover:text-foreground"
               >
                 <GitBranch className="h-3 w-3" />
-                cloudcli-ai/cloudcli-plugin-terminal
+                {repoSlug(recommendation.repoUrl)}
               </a>
             </div>
           </div>
           <button
             onClick={onInstall}
-            disabled={installing}
-            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            disabled={disabled}
+            className="flex flex-shrink-0 items-center gap-1.5 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50"
           >
             {installing ? (
               <Loader2 className="h-3.5 w-3.5 animate-spin" />
             ) : (
               <Download className="h-3.5 w-3.5" />
             )}
-            {installing ? t('pluginSettings.installing') : t('pluginSettings.terminalPlugin.install')}
+            {installing ? t('pluginSettings.installing') : t(`pluginSettings.${recommendation.translationKey}.install`)}
           </button>
         </div>
       </div>
@@ -334,8 +393,7 @@ export default function PluginSettingsTab() {
 
   const [gitUrl, setGitUrl] = useState('');
   const [installing, setInstalling] = useState(false);
-  const [installingStarter, setInstallingStarter] = useState(false);
-  const [installingTerminal, setInstallingTerminal] = useState(false);
+  const [installingRecommendation, setInstallingRecommendation] = useState<string | null>(null);
   const [installError, setInstallError] = useState<string | null>(null);
   const [confirmUninstall, setConfirmUninstall] = useState<string | null>(null);
   const [updatingPlugins, setUpdatingPlugins] = useState<Set<string>>(new Set());
@@ -364,24 +422,18 @@ export default function PluginSettingsTab() {
     setInstalling(false);
   };
 
-  const handleInstallStarter = async () => {
-    setInstallingStarter(true);
+  const handleInstallRecommendation = async (recommendation: PluginRecommendation) => {
+    if (installingRecommendation) return;
+    setInstallingRecommendation(recommendation.id);
     setInstallError(null);
-    const result = await installPlugin(STARTER_PLUGIN_URL);
-    if (!result.success) {
-      setInstallError(result.error || t('pluginSettings.installFailed'));
+    try {
+      const result = await installPlugin(recommendation.repoUrl);
+      if (!result.success) {
+        setInstallError(result.error || t('pluginSettings.installFailed'));
+      }
+    } finally {
+      setInstallingRecommendation(null);
     }
-    setInstallingStarter(false);
-  };
-
-  const handleInstallTerminal = async () => {
-    setInstallingTerminal(true);
-    setInstallError(null);
-    const result = await installPlugin(TERMINAL_PLUGIN_URL);
-    if (!result.success) {
-      setInstallError(result.error || t('pluginSettings.installFailed'));
-    }
-    setInstallingTerminal(false);
   };
 
   const handleUninstall = async (name: string) => {
@@ -398,8 +450,50 @@ export default function PluginSettingsTab() {
     }
   };
 
-  const hasStarterInstalled = plugins.some((p) => p.name === 'project-stats');
-  const hasTerminalInstalled = plugins.some((p) => p.name === 'web-terminal');
+  const isRecommendationInstalled = (recommendation: PluginRecommendation) => {
+    return plugins.some((plugin) => pluginMatchesRecommendation(plugin, recommendation));
+  };
+
+  const isOfficialPlugin = (plugin: Plugin) => {
+    return OFFICIAL_PLUGIN_RECOMMENDATIONS.some((recommendation) => (
+      pluginMatchesRecommendation(plugin, recommendation)
+    ));
+  };
+
+  const officialPlugins = plugins.filter(isOfficialPlugin);
+  const otherPlugins = plugins.filter((plugin) => !isOfficialPlugin(plugin));
+  const officialRecommendations = OFFICIAL_PLUGIN_RECOMMENDATIONS.filter(
+    (recommendation) => !isRecommendationInstalled(recommendation),
+  );
+  const unofficialRecommendations = UNOFFICIAL_PLUGIN_RECOMMENDATIONS.filter(
+    (recommendation) => !isRecommendationInstalled(recommendation),
+  );
+  const hasOfficialSection = officialPlugins.length > 0 || officialRecommendations.length > 0;
+  const hasOtherSection = otherPlugins.length > 0 || unofficialRecommendations.length > 0;
+
+  const renderPluginCard = (plugin: Plugin, index: number) => {
+    const handleToggle = async (enabled: boolean) => {
+      const r = await togglePlugin(plugin.name, enabled);
+      if (!r.success) {
+        setInstallError(r.error || t('pluginSettings.toggleFailed'));
+      }
+    };
+
+    return (
+      <PluginCard
+        key={plugin.name}
+        plugin={plugin}
+        index={index}
+        onToggle={(enabled) => void handleToggle(enabled)}
+        onUpdate={() => void handleUpdate(plugin.name)}
+        onUninstall={() => void handleUninstall(plugin.name)}
+        updating={updatingPlugins.has(plugin.name)}
+        confirmingUninstall={confirmUninstall === plugin.name}
+        onCancelUninstall={() => setConfirmUninstall(null)}
+        updateError={updateErrors[plugin.name] ?? null}
+      />
+    );
+  };
 
   return (
     <div className="space-y-6">
@@ -456,51 +550,49 @@ export default function PluginSettingsTab() {
         </span>
       </p>
 
-      {/* Official plugin suggestions — above the list */}
-      {!loading && (!hasStarterInstalled || !hasTerminalInstalled) && (
-        <div className="space-y-2">
-          {!hasStarterInstalled && (
-            <StarterPluginCard onInstall={handleInstallStarter} installing={installingStarter} />
-          )}
-          {!hasTerminalInstalled && (
-            <TerminalPluginCard onInstall={handleInstallTerminal} installing={installingTerminal} />
-          )}
-        </div>
-      )}
-
-      {/* Plugin List */}
+      {/* Plugin sections */}
       {loading ? (
         <div className="flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground">
           <Loader2 className="h-4 w-4 animate-spin" />
           {t('pluginSettings.scanningPlugins')}
         </div>
-      ) : plugins.length === 0 ? (
-        <p className="py-8 text-center text-sm text-muted-foreground">{t('pluginSettings.noPluginsInstalled')}</p>
       ) : (
-        <div className="space-y-2">
-          {plugins.map((plugin, index) => {
-            const handleToggle = async (enabled: boolean) => {
-              const r = await togglePlugin(plugin.name, enabled);
-              if (!r.success) {
-                setInstallError(r.error || t('pluginSettings.toggleFailed'));
-              }
-            };
+        <div className="space-y-4">
+          {hasOfficialSection && (
+            <RecommendationSection
+              title={t('pluginSettings.sections.officialTitle')}
+              description={t('pluginSettings.sections.officialDescription')}
+            >
+              {officialPlugins.map((plugin, index) => renderPluginCard(plugin, index))}
+              {officialRecommendations.map((recommendation) => (
+                <PluginRecommendationCard
+                  key={recommendation.id}
+                  recommendation={recommendation}
+                  onInstall={() => void handleInstallRecommendation(recommendation)}
+                  disabled={!!installingRecommendation}
+                  installing={installingRecommendation === recommendation.id}
+                />
+              ))}
+            </RecommendationSection>
+          )}
 
-            return (
-              <PluginCard
-                key={plugin.name}
-                plugin={plugin}
-                index={index}
-                onToggle={(enabled) => void handleToggle(enabled)}
-                onUpdate={() => void handleUpdate(plugin.name)}
-                onUninstall={() => void handleUninstall(plugin.name)}
-                updating={updatingPlugins.has(plugin.name)}
-                confirmingUninstall={confirmUninstall === plugin.name}
-                onCancelUninstall={() => setConfirmUninstall(null)}
-                updateError={updateErrors[plugin.name] ?? null}
-              />
-            );
-          })}
+          {hasOtherSection && (
+            <RecommendationSection
+              title={t('pluginSettings.sections.unofficialTitle')}
+              description={t('pluginSettings.sections.unofficialDescription')}
+            >
+              {otherPlugins.map((plugin, index) => renderPluginCard(plugin, officialPlugins.length + index))}
+              {unofficialRecommendations.map((recommendation) => (
+                <PluginRecommendationCard
+                  key={recommendation.id}
+                  recommendation={recommendation}
+                  onInstall={() => void handleInstallRecommendation(recommendation)}
+                  disabled={!!installingRecommendation}
+                  installing={installingRecommendation === recommendation.id}
+                />
+              ))}
+            </RecommendationSection>
+          )}
         </div>
       )}
 

src/components/provider-auth/hooks/useProviderAuthStatus.ts

@@ -70,34 +70,39 @@ export function useProviderAuthStatus(
     }));
   }, []);
 
-  const checkProviderAuthStatus = useCallback(async (provider: LLMProvider) => {
+  const checkProviderAuthStatus = useCallback(async (provider: LLMProvider): Promise<ProviderAuthStatus> => {
     setProviderLoading(provider);
 
     try {
       const response = await authenticatedFetch(PROVIDER_AUTH_STATUS_ENDPOINTS[provider]);
 
       if (!response.ok) {
-        setProviderStatus(provider, {
+        const status: ProviderAuthStatus = {
           authenticated: false,
           email: null,
           method: null,
           loading: false,
           error: FALLBACK_STATUS_ERROR,
-        });
-        return;
+        };
+        setProviderStatus(provider, status);
+        return status;
       }
 
       const payload = (await response.json()) as ProviderAuthStatusApiResponse;
-      setProviderStatus(provider, toProviderAuthStatus(payload.data));
+      const status = toProviderAuthStatus(payload.data);
+      setProviderStatus(provider, status);
+      return status;
     } catch (caughtError) {
       console.error(`Error checking ${provider} auth status:`, caughtError);
-      setProviderStatus(provider, {
+      const status: ProviderAuthStatus = {
         authenticated: false,
         email: null,
         method: null,
         loading: false,
         error: toErrorMessage(caughtError),
-      });
+      };
+      setProviderStatus(provider, status);
+      return status;
     }
   }, [setProviderLoading, setProviderStatus]);
 

src/components/settings/hooks/useSettingsController.ts

@@ -213,12 +213,19 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
   }, []);
 
   const handleLoginComplete = useCallback((exitCode: number) => {
-    if (exitCode !== 0 || !loginProvider) {
+    if (!loginProvider) {
       return;
     }
 
-    setSaveStatus('success');
-    void checkProviderAuthStatus(loginProvider);
+    void (async () => {
+      const authStatus = await checkProviderAuthStatus(loginProvider);
+
+      if (exitCode !== 0) {
+        console.warn(`Login process exited with code ${exitCode}; refreshing auth status before setting save status.`);
+      }
+
+      setSaveStatus(authStatus.authenticated ? 'success' : 'error');
+    })();
   }, [checkProviderAuthStatus, loginProvider]);
 
   const saveSettings = useCallback(async () => {

src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx

@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Trash2, X } from 'lucide-react';
+import { Check, ChevronDown, ChevronRight, Edit3, Star, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';
 
 import { Button } from '../../../../shared/view/ui';
@@ -131,18 +131,28 @@ export default function SidebarProjectItem({
           >
             <div className="flex items-center justify-between">
               <div className="flex min-w-0 flex-1 items-center gap-3">
-                <div
+                <button
                   className={cn(
-                    'w-8 h-8 rounded-lg flex items-center justify-center transition-colors',
-                    isExpanded ? 'bg-primary/10' : 'bg-muted',
+                    'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
+                    isStarred
+                      ? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
+                      : 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
                   )}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    toggleStarProject();
+                  }}
+                  title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
                 >
-                  {isExpanded ? (
-                    <FolderOpen className="h-4 w-4 text-primary" />
-                  ) : (
-                    <Folder className="h-4 w-4 text-muted-foreground" />
-                  )}
-                </div>
+                  <Star
+                    className={cn(
+                      'w-4 h-4 transition-colors',
+                      isStarred
+                        ? 'text-yellow-600 dark:text-yellow-400 fill-current'
+                        : 'text-gray-600 dark:text-gray-400',
+                    )}
+                  />
+                </button>
 
                 <div className="min-w-0 flex-1">
                   {isEditing ? (
@@ -212,29 +222,6 @@ export default function SidebarProjectItem({
                   </>
                 ) : (
                   <>
-                    <button
-                      className={cn(
-                        'w-8 h-8 rounded-lg flex items-center justify-center active:scale-90 transition-all duration-150 border',
-                        isStarred
-                          ? 'bg-yellow-500/10 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800'
-                          : 'bg-gray-500/10 dark:bg-gray-900/30 border-gray-200 dark:border-gray-800',
-                      )}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        toggleStarProject();
-                      }}
-                      title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
-                    >
-                      <Star
-                        className={cn(
-                          'w-4 h-4 transition-colors',
-                          isStarred
-                            ? 'text-yellow-600 dark:text-yellow-400 fill-current'
-                            : 'text-gray-600 dark:text-gray-400',
-                        )}
-                      />
-                    </button>
-
                     <button
                       className="flex h-8 w-8 items-center justify-center rounded-lg border border-red-200 bg-red-500/10 active:scale-90 dark:border-red-800 dark:bg-red-900/30"
                       onClick={(event) => {
@@ -281,11 +268,28 @@ export default function SidebarProjectItem({
           onClick={selectAndToggleProject}
         >
           <div className="flex min-w-0 flex-1 items-center gap-3">
-            {isExpanded ? (
-              <FolderOpen className="h-4 w-4 flex-shrink-0 text-primary" />
-            ) : (
-              <Folder className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-            )}
+            <div
+              className={cn(
+                'w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-all duration-200',
+                isStarred
+                  ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20'
+                  : 'opacity-40 hover:opacity-100 hover:bg-accent',
+              )}
+              onClick={(event) => {
+                event.stopPropagation();
+                toggleStarProject();
+              }}
+              title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
+            >
+              <Star
+                className={cn(
+                  'w-3 h-3 transition-colors',
+                  isStarred
+                    ? 'text-yellow-600 dark:text-yellow-400 fill-current'
+                    : 'text-muted-foreground',
+                )}
+              />
+            </div>
             <div className="min-w-0 flex-1 text-left">
               {isEditing ? (
                 <div className="space-y-1">
@@ -352,26 +356,6 @@ export default function SidebarProjectItem({
               </>
             ) : (
               <>
-                <div
-                  className={cn(
-                    'w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center rounded cursor-pointer touch:opacity-100',
-                    isStarred ? 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 opacity-100' : 'hover:bg-accent',
-                  )}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    toggleStarProject();
-                  }}
-                  title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
-                >
-                  <Star
-                    className={cn(
-                      'w-3 h-3 transition-colors',
-                      isStarred
-                        ? 'text-yellow-600 dark:text-yellow-400 fill-current'
-                        : 'text-muted-foreground',
-                    )}
-                  />
-                </div>
                 <div
                   className="touch:opacity-100 flex h-6 w-6 cursor-pointer items-center justify-center rounded opacity-0 transition-all duration-200 hover:bg-accent group-hover:opacity-100"
                   onClick={(event) => {

src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx

@@ -1,7 +1,8 @@
+import { useEffect, useRef } from 'react';
 import { Check, Edit2, Trash2, X } from 'lucide-react';
 import type { TFunction } from 'i18next';
 
-import { Badge, Button } from '../../../../shared/view/ui';
+import { Badge, Button, Tooltip } from '../../../../shared/view/ui';
 import { cn } from '../../../../lib/utils';
 import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
 import type { SessionWithProvider } from '../../types/types';
@@ -76,7 +77,28 @@ export default function SidebarSessionItem({
 }: SidebarSessionItemProps) {
   const sessionView = createSessionViewModel(session, currentTime, t);
   const isSelected = selectedSession?.id === session.id;
+  const isEditing = editingSession === session.id;
   const compactSessionAge = formatCompactSessionAge(sessionView.sessionTime, currentTime);
+  const editingContainerRef = useRef<HTMLDivElement>(null);
+
+  // The rename panel sits inside a group-hover opacity wrapper, so leaving the row
+  // would visually hide it. While editing, dismiss only when the user clicks outside
+  // the panel (matches Escape / cancel-button behaviour).
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const container = editingContainerRef.current;
+      if (container && !container.contains(event.target as Node)) {
+        onCancelEditingSession();
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    return () => document.removeEventListener('mousedown', handlePointerDown);
+  }, [isEditing, onCancelEditingSession]);
 
   // Sessions are owned by a project identified by `projectId` (DB primary key)
   // after the projectName → projectId migration.
@@ -97,7 +119,13 @@ export default function SidebarSessionItem({
     <div className="group relative">
       {sessionView.isActive && (
         <div className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform">
-          <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
+          <Tooltip content={t('tooltips.activeSessionIndicator')} position="right">
+            <div
+              role="status"
+              aria-label={t('tooltips.activeSessionIndicator')}
+              className="h-2 w-2 animate-pulse rounded-full bg-green-500"
+            />
+          </Tooltip>
         </div>
       )}
 
@@ -168,7 +196,12 @@ export default function SidebarSessionItem({
               <div className="flex items-center gap-2">
                 <div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
                 {compactSessionAge && (
-                  <span className="ml-auto flex-shrink-0 text-[11px] text-muted-foreground transition-opacity duration-200 group-hover:opacity-0">
+                  <span
+                    className={cn(
+                      'ml-auto flex-shrink-0 text-[11px] text-muted-foreground transition-opacity duration-200',
+                      isEditing ? 'opacity-0' : 'group-hover:opacity-0',
+                    )}
+                  >
                     {compactSessionAge}
                   </span>
                 )}
@@ -180,8 +213,14 @@ export default function SidebarSessionItem({
           </div>
         </Button>
 
-        <div className="absolute right-2 top-1/2 flex -translate-y-1/2 transform items-center gap-1 opacity-0 transition-all duration-200 group-hover:opacity-100">
-            {editingSession === session.id ? (
+        <div
+          ref={editingContainerRef}
+          className={cn(
+            'absolute right-2 top-1/2 flex -translate-y-1/2 transform items-center gap-1 transition-all duration-200',
+            isEditing ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+          )}
+        >
+            {isEditing ? (
               <>
                 <input
                   type="text"

src/i18n/locales/de/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "Aus Favoriten entfernen",
     "editSessionName": "Sitzungsname manuell bearbeiten",
     "deleteSession": "Diese Sitzung dauerhaft löschen",
+    "activeSessionIndicator": "Kürzlich aktive Sitzung (letzte 10 Minuten)",
     "save": "Speichern",
     "cancel": "Abbrechen",
     "clearSearch": "Suche leeren",

src/i18n/locales/en/settings.json

@@ -472,6 +472,12 @@
     "starterPluginLabel": "Starter Plugin",
     "starter": "Starter",
     "docs": "Docs",
+    "sections": {
+      "officialTitle": "Official Plugins",
+      "officialDescription": "Maintained by the CloudCLI team and ready for direct install.",
+      "unofficialTitle": "Other Plugins",
+      "unofficialDescription": "Unofficial plugins and integrations from other users. Review the source before installing."
+    },
     "starterPlugin": {
       "name": "Project Stats",
       "badge": "starter",
@@ -484,6 +490,18 @@
       "description": "Integrated terminal with full shell access directly within the interface.",
       "install": "Install"
     },
+    "scheduledPromptPlugin": {
+      "name": "Scheduled Prompts",
+      "badge": "unofficial",
+      "description": "Schedule workspace prompts, review run history, and manage recurring local tasks.",
+      "install": "Install"
+    },
+    "claudeWatchPlugin": {
+      "name": "Claude Watch",
+      "badge": "unofficial",
+      "description": "Watch long-running Claude Code sessions for hangs and expose process controls.",
+      "install": "Install"
+    },
     "morePlugins": "More",
     "enable": "Enable",
     "disable": "Disable",

src/i18n/locales/en/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "Remove from favorites",
     "editSessionName": "Manually edit session name",
     "deleteSession": "Delete this session permanently",
+    "activeSessionIndicator": "Recently active session (last 10 minutes)",
     "save": "Save",
     "cancel": "Cancel",
     "clearSearch": "Clear search",

src/i18n/locales/it/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "Rimuovi dai preferiti",
     "editSessionName": "Modifica manualmente il nome della sessione",
     "deleteSession": "Elimina questa sessione permanentemente",
+    "activeSessionIndicator": "Sessione attiva di recente (ultimi 10 minuti)",
     "save": "Salva",
     "cancel": "Annulla",
     "clearSearch": "Cancella ricerca",

src/i18n/locales/ja/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "お気に入りから削除",
     "editSessionName": "セッション名を手動で編集",
     "deleteSession": "このセッションを完全に削除",
+    "activeSessionIndicator": "最近アクティブなセッション（過去10分以内）",
     "save": "保存",
     "cancel": "キャンセル",
     "openCommandPalette": "コマンドパレットを開く"

src/i18n/locales/ko/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "즐겨찾기에서 제거",
     "editSessionName": "세션 이름 직접 편집",
     "deleteSession": "이 세션 영구 삭제",
+    "activeSessionIndicator": "최근 활성 세션 (지난 10분)",
     "save": "저장",
     "cancel": "취소",
     "openCommandPalette": "명령 팔레트 열기"

src/i18n/locales/ru/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "Удалить из избранного",
     "editSessionName": "Вручную редактировать имя сеанса",
     "deleteSession": "Удалить этот сеанс навсегда",
+    "activeSessionIndicator": "Недавно активный сеанс (последние 10 минут)",
     "save": "Сохранить",
     "cancel": "Отмена",
     "clearSearch": "Очистить поиск",

src/i18n/locales/tr/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "Favorilerden çıkar",
     "editSessionName": "Oturum adını elle düzenle",
     "deleteSession": "Bu oturumu kalıcı olarak sil",
+    "activeSessionIndicator": "Yakın zamanda etkin oturum (son 10 dakika)",
     "save": "Kaydet",
     "cancel": "İptal",
     "clearSearch": "Aramayı temizle",

src/i18n/locales/zh-CN/sidebar.json

@@ -45,6 +45,7 @@
     "removeFromFavorites": "从收藏移除",
     "editSessionName": "手动编辑会话名称",
     "deleteSession": "永久删除此会话",
+    "activeSessionIndicator": "最近活跃的会话（最近 10 分钟）",
     "save": "保存",
     "cancel": "取消",
     "clearSearch": "清除搜索",