Address review comments: clarify decisions, add context indicator

1 files changed, 72 insertions, 1 deletions

diff --git a/plan.md b/plan.md
index ff71487..cf6ea0b 100644
--- a/plan.md
+++ b/plan.md
@@ -40,6 +40,7 @@ claude-flow/
 │       │   ├── Message.tsx           # Single message bubble
 │       │   ├── ArtifactPane.tsx      # Markdown editor for plan/research
 │       │   ├── PhaseBar.tsx          # Phase indicator + controls
+│       │   ├── ContextIndicator.tsx  # Token usage / context size display
 │       │   └── Settings.tsx          # API key, preferences
 │       ├── hooks/
 │       │   ├── useProjects.ts
@@ -1036,7 +1037,76 @@ export function PhaseBar({ session, onPhaseChange, onPermissionModeChange }: Pha
 }
 ```
 
-### 4.6 Chat (`renderer/src/components/Chat.tsx`)
+### 4.6 ContextIndicator (`renderer/src/components/ContextIndicator.tsx`)
+
+```typescript
+import React from "react";
+
+interface ContextIndicatorProps {
+  inputTokens: number;
+  outputTokens: number;
+  cacheHits?: number;
+}
+
+export function ContextIndicator({ inputTokens, outputTokens, cacheHits }: ContextIndicatorProps) {
+  const totalTokens = inputTokens + outputTokens;
+  const maxTokens = 200000; // Claude's context window
+  const usagePercent = Math.min((totalTokens / maxTokens) * 100, 100);
+
+  const getColor = () => {
+    if (usagePercent > 80) return "#ef4444"; // red
+    if (usagePercent > 50) return "#f59e0b"; // amber
+    return "#10b981"; // green
+  };
+
+  return (
+    <div className="context-indicator">
+      <div className="context-bar">
+        <div
+          className="context-fill"
+          style={{ width: `${usagePercent}%`, backgroundColor: getColor() }}
+        />
+      </div>
+      <span className="context-label">
+        {(totalTokens / 1000).toFixed(1)}k / 200k tokens
+        {cacheHits ? ` (${(cacheHits / 1000).toFixed(1)}k cached)` : ""}
+      </span>
+    </div>
+  );
+}
+```
+
+Add styles to `globals.css`:
+
+```css
+/* Context Indicator */
+.context-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+}
+
+.context-bar {
+  width: 100px;
+  height: 6px;
+  background: #333;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.context-fill {
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.context-label {
+  font-size: 12px;
+  color: #888;
+}
+```
+
+### 4.7 Chat (`renderer/src/components/Chat.tsx`)
 
 ```typescript
 import React, { useState, useEffect, useRef } from "react";
@@ -1475,6 +1545,7 @@ function ensureArtifactDir(projectPath: string) {
 - [ ] Implement `renderer/src/App.tsx`
 - [ ] Implement `renderer/src/components/Sidebar.tsx`
 - [ ] Implement `renderer/src/components/PhaseBar.tsx`
+- [ ] Implement `renderer/src/components/ContextIndicator.tsx`
 - [ ] Implement `renderer/src/components/Chat.tsx`
 - [ ] Update `renderer/src/main.tsx`