feat: add optimistic locking for bttask and error classification

Version column in tasks table with WHERE id=? AND version=? guard.
Conflict detection in TaskBoardTab. error-classifier.ts: 6 error types
with actionable messages and retry logic. UsageMeter.svelte.

v2/src/lib/adapters/bttask-bridge.ts

@@ -16,6 +16,7 @@ export interface Task {
   sortOrder: number;
   createdAt: string;
   updatedAt: string;
+  version: number;
 }
 
 export interface TaskComment {
@@ -34,8 +35,9 @@ export async function getTaskComments(taskId: string): Promise<TaskComment[]> {
   return invoke<TaskComment[]>('bttask_comments', { taskId });
 }
 
-export async function updateTaskStatus(taskId: string, status: string): Promise<void> {
-  return invoke('bttask_update_status', { taskId, status });
+/** Update task status with optimistic locking. Returns the new version number. */
+export async function updateTaskStatus(taskId: string, status: string, version: number): Promise<number> {
+  return invoke<number>('bttask_update_status', { taskId, status, version });
 }
 
 export async function addTaskComment(taskId: string, agentId: AgentId, content: string): Promise<string> {

v2/src/lib/components/Agent/AgentPane.svelte

@@ -16,6 +16,8 @@
   import type { SessionAnchor } from '../../types/anchors';
 
   import AgentTree from './AgentTree.svelte';
+  import UsageMeter from './UsageMeter.svelte';
+  import { notify } from '../../stores/notifications.svelte';
   import { getHighlighter, highlightCode, escapeHtml } from '../../utils/highlight';
   import type {
     TextContent,
@@ -373,6 +375,35 @@
     if (totalTokens === 0) return 0;
     return Math.min(100, Math.round((totalTokens / DEFAULT_CONTEXT_LIMIT) * 100));
   });
+
+  // Context meter color class based on thresholds
+  let contextColorClass = $derived.by(() => {
+    if (contextPercent >= 90) return 'context-critical';
+    if (contextPercent >= 75) return 'context-high';
+    if (contextPercent >= 50) return 'context-medium';
+    return '';
+  });
+
+  // Session burn rate ($/hr)
+  let burnRatePerHr = $derived.by(() => {
+    if (!session || session.durationMs <= 0 || session.costUsd <= 0) return 0;
+    return (session.costUsd / session.durationMs) * 3_600_000;
+  });
+
+  // 90% context warning (fire once per session)
+  let contextWarningFired = $state(false);
+  $effect(() => {
+    if (contextPercent >= 90 && !contextWarningFired && session?.status === 'running') {
+      contextWarningFired = true;
+      notify('warning', `Context usage at ${contextPercent}% — approaching model limit`);
+    }
+  });
+  // Reset warning tracker when session changes
+  $effect(() => {
+    if (session?.id) {
+      contextWarningFired = false;
+    }
+  });
 </script>
 
 <div class="agent-pane" data-testid="agent-pane" data-agent-status={session?.status ?? 'idle'}>
@@ -538,12 +569,17 @@
         <div class="running-indicator">
           <span class="pulse"></span>
           <span>Running...</span>
-          {#if contextPercent > 0}
-            <span class="context-meter" title="Context window usage">
-              <span class="context-fill" class:context-streaming={isRunning} style="width: {contextPercent}%"></span>
+          {#if capabilities.supportsCost && (session.inputTokens > 0 || session.outputTokens > 0)}
+            <UsageMeter inputTokens={session.inputTokens} outputTokens={session.outputTokens} contextLimit={DEFAULT_CONTEXT_LIMIT} />
+          {:else if contextPercent > 0}
+            <span class="context-meter {contextColorClass}" title="Context window usage">
+              <span class="context-fill context-streaming" style="width: {contextPercent}%"></span>
               <span class="context-label">{contextPercent}%</span>
             </span>
           {/if}
+          {#if burnRatePerHr > 0}
+            <span class="burn-rate" title="Current session burn rate">${burnRatePerHr.toFixed(2)}/hr</span>
+          {/if}
           {#if !autoScroll}
             <button class="scroll-btn" onclick={() => { autoScroll = true; scrollContainer?.querySelector('#message-end')?.scrollIntoView({ behavior: 'instant' as ScrollBehavior }); }}>↓ Bottom</button>
           {/if}
@@ -555,14 +591,17 @@
           {#if totalCost && totalCost.costUsd > session.costUsd}
             <span class="total-cost">(total: ${totalCost.costUsd.toFixed(4)})</span>
           {/if}
-          <span class="cost-detail">{session.inputTokens + session.outputTokens} tok</span>
-          <span class="cost-detail">{(session.durationMs / 1000).toFixed(1)}s</span>
-          {#if contextPercent > 0}
-            <span class="context-meter" title="Context window usage">
-              <span class="context-fill" style="width: {contextPercent}%"></span>
-              <span class="context-label">{contextPercent}%</span>
-            </span>
+          {#if capabilities.supportsCost}
+            <span class="cost-detail token-in" title="Input tokens">{session.inputTokens.toLocaleString()} in</span>
+            <span class="cost-detail token-out" title="Output tokens">{session.outputTokens.toLocaleString()} out</span>
+          {:else}
+            <span class="cost-detail">{session.inputTokens + session.outputTokens} tok</span>
           {/if}
+          <span class="cost-detail">{(session.durationMs / 1000).toFixed(1)}s</span>
+          {#if burnRatePerHr > 0}
+            <span class="burn-rate" title="Session average burn rate">${burnRatePerHr.toFixed(2)}/hr</span>
+          {/if}
+          <UsageMeter inputTokens={session.inputTokens} outputTokens={session.outputTokens} contextLimit={DEFAULT_CONTEXT_LIMIT} />
           {#if !autoScroll}
             <button class="scroll-btn" onclick={() => { autoScroll = true; scrollContainer?.querySelector('#message-end')?.scrollIntoView({ behavior: 'instant' as ScrollBehavior }); }}>↓ Bottom</button>
           {/if}
@@ -1333,6 +1372,21 @@
   .total-cost { color: var(--ctp-overlay1); font-size: 0.6875rem; }
   .error-bar { color: var(--ctp-red); }
 
+  .burn-rate {
+    font-size: 0.625rem;
+    font-family: var(--term-font-family, monospace);
+    color: var(--ctp-peach);
+    white-space: nowrap;
+  }
+
+  .token-in { color: var(--ctp-blue); }
+  .token-out { color: var(--ctp-green); }
+
+  /* Context meter threshold colors */
+  .context-medium .context-fill { background: var(--ctp-yellow); }
+  .context-high .context-fill { background: var(--ctp-peach); }
+  .context-critical .context-fill { background: var(--ctp-red); }
+
   /* === Session controls === */
   .session-controls {
     display: flex;

v2/src/lib/components/Agent/UsageMeter.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  interface Props {
+    inputTokens: number;
+    outputTokens: number;
+    contextLimit?: number;
+  }
+
+  let { inputTokens, outputTokens, contextLimit = 200_000 }: Props = $props();
+
+  let totalTokens = $derived(inputTokens + outputTokens);
+  let pct = $derived(contextLimit > 0 ? Math.min((totalTokens / contextLimit) * 100, 100) : 0);
+
+  let thresholdClass = $derived.by(() => {
+    if (pct >= 90) return 'critical';
+    if (pct >= 75) return 'high';
+    if (pct >= 50) return 'medium';
+    return 'low';
+  });
+
+  function formatTokens(n: number): string {
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+    return String(n);
+  }
+
+  let showTooltip = $state(false);
+</script>
+
+{#if totalTokens > 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="usage-meter"
+    class:critical={thresholdClass === 'critical'}
+    class:high={thresholdClass === 'high'}
+    class:medium={thresholdClass === 'medium'}
+    class:low={thresholdClass === 'low'}
+    onmouseenter={() => showTooltip = true}
+    onmouseleave={() => showTooltip = false}
+  >
+    <div class="meter-track">
+      <div class="meter-fill" style="width: {pct}%"></div>
+    </div>
+    <span class="meter-label">{formatTokens(totalTokens)}</span>
+
+    {#if showTooltip}
+      <div class="meter-tooltip">
+        <div class="tooltip-row">
+          <span class="tooltip-key">Input</span>
+          <span class="tooltip-val">{formatTokens(inputTokens)}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-key">Output</span>
+          <span class="tooltip-val">{formatTokens(outputTokens)}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-key">Total</span>
+          <span class="tooltip-val">{formatTokens(totalTokens)}</span>
+        </div>
+        <div class="tooltip-divider"></div>
+        <div class="tooltip-row">
+          <span class="tooltip-key">Limit</span>
+          <span class="tooltip-val">{formatTokens(contextLimit)}</span>
+        </div>
+        <div class="tooltip-row">
+          <span class="tooltip-key">Used</span>
+          <span class="tooltip-val">{pct.toFixed(1)}%</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .usage-meter {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    position: relative;
+  }
+
+  .meter-track {
+    width: 3rem;
+    height: 0.375rem;
+    background: var(--ctp-surface0);
+    border-radius: 0.1875rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .meter-fill {
+    height: 100%;
+    border-radius: 0.1875rem;
+    transition: width 0.3s ease, background 0.3s ease;
+  }
+
+  .low .meter-fill { background: var(--ctp-green); }
+  .medium .meter-fill { background: var(--ctp-yellow); }
+  .high .meter-fill { background: var(--ctp-peach); }
+  .critical .meter-fill { background: var(--ctp-red); }
+
+  .meter-label {
+    font-size: 0.625rem;
+    font-family: var(--term-font-family, monospace);
+    color: var(--ctp-overlay1);
+    white-space: nowrap;
+  }
+
+  .meter-tooltip {
+    position: absolute;
+    bottom: calc(100% + 0.375rem);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--ctp-surface0);
+    border: 1px solid var(--ctp-surface1);
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    min-width: 7.5rem;
+    z-index: 100;
+    box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--ctp-crust) 40%, transparent);
+  }
+
+  .tooltip-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.0625rem 0;
+  }
+
+  .tooltip-key {
+    font-size: 0.625rem;
+    color: var(--ctp-overlay0);
+  }
+
+  .tooltip-val {
+    font-size: 0.625rem;
+    font-family: var(--term-font-family, monospace);
+    color: var(--ctp-text);
+  }
+
+  .tooltip-divider {
+    height: 1px;
+    background: var(--ctp-surface1);
+    margin: 0.1875rem 0;
+  }
+</style>

v2/src/lib/components/Workspace/ContextTab.svelte

@@ -262,6 +262,31 @@
     return `${m}m ${s % 60}s`;
   }
 
+  // --- Cost analytics ---
+  let avgCostPerTurn = $derived(
+    session && session.numTurns > 0
+      ? totalCost.costUsd / session.numTurns
+      : 0
+  );
+
+  let tokenEfficiency = $derived(
+    totalCost.inputTokens > 0
+      ? totalCost.outputTokens / totalCost.inputTokens
+      : 0
+  );
+
+  let burnRatePerHr = $derived.by(() => {
+    if (!session || session.durationMs <= 0 || totalCost.costUsd <= 0) return 0;
+    return (totalCost.costUsd / session.durationMs) * 3_600_000;
+  });
+
+  // Cost projection: estimate total cost if context fills to 100%
+  let costProjection = $derived.by(() => {
+    const usedPct = totalCost.inputTokens / CONTEXT_WINDOW;
+    if (usedPct <= 0) return 0;
+    return totalCost.costUsd / usedPct;
+  });
+
   function opColor(op: string): string {
     switch (op) {
       case 'read': return 'var(--ctp-blue)';
@@ -689,6 +714,39 @@
       {/if}
     </div>
 
+    <!-- Cost Analytics -->
+    {#if totalCost.costUsd > 0}
+      <div class="cost-analytics-section">
+        <div class="section-header">
+          <span class="section-title">Cost Analytics</span>
+        </div>
+        <div class="cost-grid">
+          <div class="cost-cell">
+            <span class="cost-cell-value">{formatCost(totalCost.costUsd)}</span>
+            <span class="cost-cell-label">Total Cost</span>
+          </div>
+          <div class="cost-cell">
+            <span class="cost-cell-value">{formatCost(avgCostPerTurn)}</span>
+            <span class="cost-cell-label">Avg / Turn</span>
+          </div>
+          <div class="cost-cell">
+            <span class="cost-cell-value">{tokenEfficiency.toFixed(2)}</span>
+            <span class="cost-cell-label">Out/In Ratio</span>
+          </div>
+          <div class="cost-cell">
+            <span class="cost-cell-value">${burnRatePerHr.toFixed(2)}/hr</span>
+            <span class="cost-cell-label">Burn Rate</span>
+          </div>
+          {#if costProjection > 0}
+            <div class="cost-cell projection">
+              <span class="cost-cell-value">{formatCost(costProjection)}</span>
+              <span class="cost-cell-label">Est. Full Context</span>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
     <!-- Context Meter -->
     <div class="meter-section">
       <div class="meter-header">
@@ -1139,6 +1197,52 @@
   .compaction-pill .stat-value { color: var(--ctp-yellow); }
   .compaction-pill .stat-label { color: var(--ctp-yellow); opacity: 0.7; }
 
+  /* Cost Analytics */
+  .cost-analytics-section {
+    padding: 0.375rem 0.625rem;
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .cost-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
+    gap: 0.375rem;
+    margin-top: 0.25rem;
+  }
+
+  .cost-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.375rem 0.25rem;
+    background: var(--ctp-surface0);
+    border-radius: 0.25rem;
+  }
+
+  .cost-cell-value {
+    font-size: 0.75rem;
+    font-weight: 700;
+    font-family: var(--term-font-family, monospace);
+    color: var(--ctp-text);
+  }
+
+  .cost-cell-label {
+    font-size: 0.55rem;
+    color: var(--ctp-overlay0);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: 0.125rem;
+  }
+
+  .cost-cell.projection {
+    background: color-mix(in srgb, var(--ctp-peach) 10%, var(--ctp-surface0));
+  }
+
+  .cost-cell.projection .cost-cell-value {
+    color: var(--ctp-peach);
+  }
+
   /* Context meter */
   .meter-section {
     padding: 0.5rem 0.625rem;

v2/src/lib/components/Workspace/TaskBoardTab.svelte

@@ -84,10 +84,18 @@
 
   async function handleStatusChange(taskId: string, newStatus: string) {
     try {
-      await updateTaskStatus(taskId, newStatus);
+      const task = tasks.find(t => t.id === taskId);
+      const version = task?.version ?? 1;
+      await updateTaskStatus(taskId, newStatus, version);
       await loadTasks();
-    } catch (e) {
-      console.warn('Failed to update task status:', e);
+    } catch (e: any) {
+      const msg = e?.message ?? String(e);
+      if (msg.includes('version conflict')) {
+        console.warn('Version conflict on task update, reloading:', msg);
+        await loadTasks();
+      } else {
+        console.warn('Failed to update task status:', e);
+      }
     }
   }
 

v2/src/lib/utils/error-classifier.test.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest';
+import { classifyError, type ApiErrorType } from './error-classifier';
+
+describe('classifyError', () => {
+  // --- Rate limit ---
+  it('classifies "rate_limit_error" as rate_limit', () => {
+    const result = classifyError('rate_limit_error: Too many requests');
+    expect(result.type).toBe('rate_limit');
+    expect(result.retryable).toBe(true);
+    expect(result.retryDelaySec).toBeGreaterThan(0);
+  });
+
+  it('classifies "429" as rate_limit', () => {
+    const result = classifyError('HTTP 429 Too Many Requests');
+    expect(result.type).toBe('rate_limit');
+  });
+
+  it('classifies "too many requests" as rate_limit', () => {
+    const result = classifyError('Error: too many requests, please slow down');
+    expect(result.type).toBe('rate_limit');
+  });
+
+  it('classifies "throttled" as rate_limit', () => {
+    const result = classifyError('Request throttled by API');
+    expect(result.type).toBe('rate_limit');
+  });
+
+  // --- Auth ---
+  it('classifies "invalid_api_key" as auth', () => {
+    const result = classifyError('invalid_api_key: The provided API key is invalid');
+    expect(result.type).toBe('auth');
+    expect(result.retryable).toBe(false);
+  });
+
+  it('classifies "401" as auth', () => {
+    const result = classifyError('HTTP 401 Unauthorized');
+    expect(result.type).toBe('auth');
+  });
+
+  it('classifies "authentication failed" as auth', () => {
+    const result = classifyError('Authentication failed for this request');
+    expect(result.type).toBe('auth');
+  });
+
+  // --- Quota ---
+  it('classifies "insufficient_quota" as quota', () => {
+    const result = classifyError('insufficient_quota: You have exceeded your usage limit');
+    expect(result.type).toBe('quota');
+    expect(result.retryable).toBe(false);
+  });
+
+  it('classifies "billing" as quota', () => {
+    const result = classifyError('Error: billing issue with your account');
+    expect(result.type).toBe('quota');
+  });
+
+  it('classifies "credit" as quota', () => {
+    const result = classifyError('No remaining credit on your account');
+    expect(result.type).toBe('quota');
+  });
+
+  // --- Overloaded ---
+  it('classifies "overloaded" as overloaded', () => {
+    const result = classifyError('The API is temporarily overloaded');
+    expect(result.type).toBe('overloaded');
+    expect(result.retryable).toBe(true);
+  });
+
+  it('classifies "503" as overloaded', () => {
+    const result = classifyError('HTTP 503 Service Unavailable');
+    expect(result.type).toBe('overloaded');
+  });
+
+  // --- Network ---
+  it('classifies "ECONNREFUSED" as network', () => {
+    const result = classifyError('connect ECONNREFUSED 127.0.0.1:443');
+    expect(result.type).toBe('network');
+    expect(result.retryable).toBe(true);
+  });
+
+  it('classifies "ETIMEDOUT" as network', () => {
+    const result = classifyError('connect ETIMEDOUT');
+    expect(result.type).toBe('network');
+  });
+
+  it('classifies "fetch failed" as network', () => {
+    const result = classifyError('TypeError: fetch failed');
+    expect(result.type).toBe('network');
+  });
+
+  // --- Unknown ---
+  it('classifies unrecognized errors as unknown', () => {
+    const result = classifyError('Something weird happened');
+    expect(result.type).toBe('unknown');
+    expect(result.retryable).toBe(false);
+    expect(result.message).toBe('Something weird happened');
+  });
+
+  it('preserves original message for unknown errors', () => {
+    const msg = 'Internal server error: null pointer';
+    const result = classifyError(msg);
+    expect(result.message).toBe(msg);
+  });
+
+  // --- Message quality ---
+  it('provides actionable messages for rate_limit', () => {
+    const result = classifyError('rate_limit_error');
+    expect(result.message).toContain('Rate limited');
+  });
+
+  it('provides actionable messages for auth', () => {
+    const result = classifyError('invalid_api_key');
+    expect(result.message).toContain('Settings');
+  });
+
+  it('provides actionable messages for quota', () => {
+    const result = classifyError('insufficient_quota');
+    expect(result.message).toContain('billing');
+  });
+});

v2/src/lib/utils/error-classifier.ts

@@ -0,0 +1,121 @@
+// Error classifier — categorizes API errors for actionable user messaging
+
+export type ApiErrorType =
+  | 'rate_limit'
+  | 'auth'
+  | 'quota'
+  | 'overloaded'
+  | 'network'
+  | 'unknown';
+
+export interface ClassifiedError {
+  type: ApiErrorType;
+  message: string;
+  retryable: boolean;
+  /** Suggested retry delay in seconds (0 = no retry) */
+  retryDelaySec: number;
+}
+
+const RATE_LIMIT_PATTERNS = [
+  /rate.?limit/i,
+  /429/,
+  /too many requests/i,
+  /rate_limit_error/i,
+  /throttl/i,
+];
+
+const AUTH_PATTERNS = [
+  /401/,
+  /invalid.?api.?key/i,
+  /authentication/i,
+  /unauthorized/i,
+  /invalid.?x-api-key/i,
+  /api_key/i,
+];
+
+const QUOTA_PATTERNS = [
+  /insufficient.?quota/i,
+  /billing/i,
+  /payment/i,
+  /exceeded.*quota/i,
+  /credit/i,
+  /usage.?limit/i,
+];
+
+const OVERLOADED_PATTERNS = [
+  /overloaded/i,
+  /503/,
+  /service.?unavailable/i,
+  /capacity/i,
+  /busy/i,
+];
+
+const NETWORK_PATTERNS = [
+  /ECONNREFUSED/,
+  /ECONNRESET/,
+  /ETIMEDOUT/,
+  /network/i,
+  /fetch.?failed/i,
+  /dns/i,
+];
+
+function matchesAny(text: string, patterns: RegExp[]): boolean {
+  return patterns.some(p => p.test(text));
+}
+
+/**
+ * Classify an error message into an actionable category.
+ */
+export function classifyError(errorMessage: string): ClassifiedError {
+  if (matchesAny(errorMessage, RATE_LIMIT_PATTERNS)) {
+    return {
+      type: 'rate_limit',
+      message: 'Rate limited. The API will auto-retry shortly.',
+      retryable: true,
+      retryDelaySec: 30,
+    };
+  }
+
+  if (matchesAny(errorMessage, AUTH_PATTERNS)) {
+    return {
+      type: 'auth',
+      message: 'API key invalid or expired. Check Settings.',
+      retryable: false,
+      retryDelaySec: 0,
+    };
+  }
+
+  if (matchesAny(errorMessage, QUOTA_PATTERNS)) {
+    return {
+      type: 'quota',
+      message: 'API quota exceeded. Check your billing.',
+      retryable: false,
+      retryDelaySec: 0,
+    };
+  }
+
+  if (matchesAny(errorMessage, OVERLOADED_PATTERNS)) {
+    return {
+      type: 'overloaded',
+      message: 'API overloaded. Retrying shortly...',
+      retryable: true,
+      retryDelaySec: 15,
+    };
+  }
+
+  if (matchesAny(errorMessage, NETWORK_PATTERNS)) {
+    return {
+      type: 'network',
+      message: 'Network error. Check your connection.',
+      retryable: true,
+      retryDelaySec: 5,
+    };
+  }
+
+  return {
+    type: 'unknown',
+    message: errorMessage,
+    retryable: false,
+    retryDelaySec: 0,
+  };
+}