@haposoft/cafekit 0.16.7 → 0.18.1

package/src/claude/skills/ui-ux-pro-max/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: cf:ui-ux-pro-max
-description: "UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples."
+description: "Searchable UI/UX lookup database for web and mobile products: 50+ visual styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, 25 chart types, Google Fonts, and React Native stack guidance. Use to pick or justify a palette, font pairing, visual style, chart type, or UX guideline for a product type. It does not build, review, or redesign screens; that is cf:ui-ux, which can consult this skill for lookups."
 user-invocable: true
-when_to_use: "Invoke to choose colors, fonts, layout, and design systems."
+when_to_use: "Invoke to look up color palettes, font pairings, product-type styles, or UX guidelines; to build or review a screen use cf:ui-ux."
 category: frontend
 keywords: [ui, ux, design-system, layout]
 metadata:
@@ -11,45 +11,13 @@ metadata:
 ---
 # UI/UX Pro Max - Design Intelligence
 
-Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
+Searchable design database for web and mobile products: 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, 25 chart types, and stack guidance for React Native only.
 
 ## When to Apply
 
-This Skill should be used when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.
+Use this skill to look something up: a palette, font pairing, or visual style for a product type, a chart type, or the UX guideline that applies to a pattern.
 
-### Must Use
-
-This Skill must be invoked in the following situations:
-
-- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
-- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
-- Choosing color schemes, typography systems, spacing standards, or layout systems
-- Reviewing UI code for user experience, accessibility, or visual consistency
-- Implementing navigation structures, animations, or responsive behavior
-- Making product-level design decisions (style, information hierarchy, brand expression)
-- Improving perceived quality, clarity, or usability of interfaces
-
-### Recommended
-
-This Skill is recommended in the following situations:
-
-- UI looks "not professional enough" but the reason is unclear
-- Receiving feedback on usability or experience
-- Pre-launch UI quality optimization
-- Aligning cross-platform design (Web / iOS / Android)
-- Building design systems or reusable component libraries
-
-### Skip
-
-This Skill is not needed in the following situations:
-
-- Pure backend logic development
-- Only involving API or database design
-- Performance optimization unrelated to the interface
-- Infrastructure or DevOps work
-- Non-visual scripts or automation tasks
-
-**Decision criteria**: If the task will change how a feature **looks, feels, moves, or is interacted with**, this Skill should be used.
+Building, reviewing, or redesigning a screen belongs to `cf:ui-ux`, which follows the project's own components and measures the page; it can call this skill when it needs a lookup. Backend, API, infrastructure, and non-visual work need neither skill.
 
 ## Rule Categories by Priority
 
@@ -313,28 +281,7 @@ Search specific domains using the CLI tool below.
 
 ## Prerequisites
 
-Check if Python is installed:
-
-```bash
-python3 --version || python --version
-```
-
-If Python is not installed, install it based on user's OS:
-
-**macOS:**
-```bash
-brew install python3
-```
-
-**Ubuntu/Debian:**
-```bash
-sudo apt update && sudo apt install python3
-```
-
-**Windows:**
-```powershell
-winget install Python.Python.3.12
-```
+Run `search.py` from the project root with `python3 .claude/skills/ui-ux-pro-max/scripts/search.py` (Windows: `python .claude\skills\ui-ux-pro-max\scripts\search.py`). It uses only the Python standard library, so no venv or extra install is needed.
 
 ---
 
@@ -362,14 +309,14 @@ Extract key information from user request:
 - **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
 - **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)
 - **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
-- **Stack**: React Native (this project's only tech stack)
+- **Stack**: the target project's stack; `--stack` guidance exists only for `react-native`
 
-### Step 2: Generate Design System (REQUIRED)
+### Step 2: Generate Design System
 
-**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+Start with `--design-system` when choosing a whole direction (style, palette, type) for a new product or page; for a single lookup go straight to Step 3:
 
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
 ```
 
 This command:
@@ -380,7 +327,7 @@ This command:
 
 **Example:**
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
 ```
 
 ### Step 2b: Persist Design System (Master + Overrides Pattern)
@@ -388,7 +335,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --d
 To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
 
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
 ```
 
 This creates:
@@ -397,7 +344,7 @@ This creates:
 
 **With page-specific override:**
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
 ```
 
 This also creates:
@@ -422,7 +369,7 @@ Now, generate the code...
 After getting the design system, use domain searches to get additional details:
 
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
 ```
 
 **When to use detailed searches:**
@@ -440,14 +387,13 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n
 | Landing structure | `landing` | `--domain landing "hero social-proof"` |
 | React Native perf | `react` | `--domain react "rerender memo list"` |
 | App interface a11y | `web` | `--domain web "accessibilityLabel touch safe-areas"` |
-| AI prompt / CSS keywords | `prompt` | `--domain prompt "minimalism"` |
 
-### Step 4: Stack Guidelines (React Native)
+### Step 4: Stack Guidelines (React Native projects only)
 
-Get React Native implementation-specific best practices:
+For a React Native project, get implementation-specific best practices:
 
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
 ```
 
 ---
@@ -468,7 +414,6 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
 | `google-fonts` | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |
 | `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
 | `web` | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
-| `prompt` | AI prompts, CSS keywords | (style name) |
 
 ### Available Stacks
 
@@ -488,10 +433,10 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
 - Style keywords: modern, minimal, content-first, dark mode
 - Stack: React Native
 
-### Step 2: Generate Design System (REQUIRED)
+### Step 2: Generate Design System
 
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
 ```
 
 **Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
@@ -500,16 +445,16 @@ python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" -
 
 ```bash
 # Get style options for a modern tool product
-python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
 
 # Get UX best practices for search interaction and loading
-python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
 ```
 
 ### Step 4: Stack Guidelines
 
 ```bash
-python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
 ```
 
 **Then:** Synthesize design system + detailed searches and implement the design.
@@ -522,10 +467,10 @@ The `--design-system` flag supports two output formats:
 
 ```bash
 # ASCII box (default) - best for terminal display
-python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
 
 # Markdown - best for documentation
-python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
 ```
 
 ---
@@ -537,7 +482,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
 - Use **multi-dimensional keywords** — combine product + industry + tone + density: `"entertainment social vibrant content-dense"` not just `"app"`
 - Try different keywords for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
 - Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about
-- Always add `--stack react-native` for implementation-specific guidance
+- Add `--stack react-native` only when the target project is React Native
 
 ### Common Sticking Points
 

package/src/claude/skills/web-testing/SKILL.md

@@ -26,15 +26,9 @@ npx @axe-core/cli https://example.com  # Accessibility
 npx lighthouse https://example.com     # Performance
 ```
 
-## Testing Strategy (Choose Your Model)
+## Testing Strategy
 
-| Model | Structure | Best For |
-|-------|-----------|----------|
-| Pyramid | Unit 70% > Integration 20% > E2E 10% | Monoliths |
-| Trophy | Integration-heavy | Modern SPAs |
-| Honeycomb | Contract-centric | Microservices |
-
-→ `./references/testing-pyramid-strategy.md`
+Choosing between pyramid, trophy, and honeycomb: `./references/testing-pyramid-strategy.md`
 
 ## Reference Documentation
 
@@ -88,15 +82,3 @@ node ./scripts/analyze-test-results.js \
   --output markdown
 ```
 Parses Playwright/Vitest/JUnit results into unified summary.
-
-## CI/CD Integration
-
-```yaml
-jobs:
-  test:
-    steps:
-      - run: npm run test:unit      # Gate 1: Fast fail
-      - run: npm run test:e2e       # Gate 2: After unit pass
-      - run: npm run test:a11y      # Accessibility
-      - run: npx lhci autorun       # Performance
-```

package/src/claude/status.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 /**
- * Custom Claude Code statusline for Node.js - Multi-line Edition
+ * Custom Claude Code statusline for Node.js - one-line default
  * Cross-platform support: Windows, macOS, Linux
  * Features: ANSI colors, tool/agent/todo tracking, context window, session timer
  * No external dependencies - uses only Node.js built-in modules
@@ -26,10 +26,6 @@ const { getGitInfo } = require('./hooks/lib/git.cjs');
 // ratio so 1M-context models are not treated as if they were 200k.
 const AUTOCOMPACT_BUFFER_RATIO = 0.225;
 
-// Usage cache freshness gate: a cache older than this hides the quota area
-// instead of rendering stale numbers.
-const USAGE_CACHE_TTL_MS = 300000;
-
 /**
  * Expand home directory to ~
  */
@@ -104,7 +100,7 @@ async function readStdin() {
  * @returns {string|null} Formatted usage string or null if unavailable
  */
 function buildUsageString(ctx) {
-  if (!ctx.sessionText || ctx.sessionText === 'N/A') return null;
+  if (!ctx.sessionText) return null;
   let str = ctx.sessionText.replace(' until reset', ' left');
   if (ctx.usagePercent != null) str += ` (${Math.round(ctx.usagePercent)}%)`;
   return str;
@@ -130,77 +126,115 @@ function buildBranchPart(ctx) {
   return branchPart;
 }
 
-function renderSessionLines(ctx) {
-  const lines = [];
-  const termWidth = getTerminalWidth();
-  const threshold = Math.floor(termWidth * 0.85);
+// Default session line: one row of single-width symbols, each value labelled by
+// its glyph so the line stays short and every number says what it measures.
+//   ◆ model (effort) ϟfast ✱thinking  ◔ context%  ⧗ 5h-quota% reset  ◷ weekly%  ⎇ branch ●changed ↑ahead ↓behind  ± +added/-removed  ⏱ session  ↻ cache-hit%
+
+/** Quarter-circle glyph that fills with the percentage. */
+function fillGlyph(percent) {
+  if (percent >= 88) return '●';
+  if (percent >= 63) return '◕';
+  if (percent >= 38) return '◑';
+  if (percent >= 13) return '◔';
+  return '○';
+}
 
-  // Build all atomic parts for flexible composition (no colors on static text)
-  const dirPart = `📁 ${ctx.currentDir}`;
-  const branchPart = buildBranchPart(ctx);
+/** Same thresholds as the context bar; plain text when colours are off. */
+function tintPercent(percent, text) {
+  if (percent >= 85) return red(text);
+  if (percent >= 70) return yellow(text);
+  return green(text);
+}
 
-  // Active plan indicator (disabled for now - code preserved)
-  // const planPart = ctx.activePlan ? `📋 ${ctx.activePlan}` : '';
-  const planPart = '';
+/** "2h 48m until reset" → "2h48m"; anything else → null. */
+function shortReset(sessionText) {
+  const match = /^(\d+)h (\d+)m/.exec(sessionText || '');
+  return match ? `${match[1]}h${match[2]}m` : null;
+}
 
-  // Combined location (dir + branch + plan)
-  let locationPart = branchPart ? `${dirPart}  ${branchPart}` : dirPart;
-  if (planPart) locationPart += `  ${planPart}`;
+/** 28147114 → "7h49m"; under an hour → "12m". */
+function formatDuration(ms) {
+  const minutes = Math.floor(ms / 60000);
+  const hours = Math.floor(minutes / 60);
+  return hours > 0 ? `${hours}h${String(minutes % 60).padStart(2, '0')}m` : `${minutes}m`;
+}
+
+/** "#80✓" approved, "#80✗" changes requested, "#80" pending, dim "#80" draft; "!80" for a GitLab MR. */
+function formatPr(pr) {
+  const label = `${pr.kind === 'mr' ? '!' : '#'}${pr.number}`;
+  if (pr.review_state === 'approved') return `${label}${green('✓')}`;
+  if (pr.review_state === 'changes_requested') return `${label}${red('✗')}`;
+  if (pr.review_state === 'draft') return dim(label);
+  return label;
+}
+
+/**
+ * Parts of the default line in display order. `drop` ranks what goes first
+ * when the terminal is too narrow (higher drops earlier); 0 never drops.
+ */
+function buildLineParts(ctx, { minimal = false } = {}) {
+  let model = `◆ ${ctx.modelName}`;
+  if (ctx.effortLevel) model += ` ${dim(`(${ctx.effortLevel})`)}`;
+  const flags = `${ctx.fastMode ? 'ϟ' : ''}${ctx.thinking ? '✱' : ''}`;
+  if (flags) model += ` ${flags}`;
+  const parts = [{ text: model, drop: 0 }];
 
-  // Build session part: 🤖 model  contextBar%  ⌛ time left (usage%)
-  let sessionPart = `🤖 ${ctx.modelName}`;
   if (ctx.contextPercent > 0) {
-    sessionPart += `  ${coloredBar(ctx.contextPercent, 12)} ${ctx.contextPercent}%`;
+    parts.push({ text: tintPercent(ctx.contextPercent, `${fillGlyph(ctx.contextPercent)} ${ctx.contextPercent}%`), drop: 0 });
   }
-  // Add usage/reset info to session part (stays on line 1 with model - Claude Code only reads line 1)
-  const usageStr = buildUsageString(ctx);
-  if (usageStr) {
-    sessionPart += `  ⌛ ${usageStr.replace(/\)$/, ' used)')}`;
-    if (ctx.weeklyText) sessionPart += `  ${ctx.weeklyText}`;
+
+  if (!minimal && ctx.usagePercent != null) {
+    const pct = Math.round(ctx.usagePercent);
+    const reset = shortReset(ctx.sessionText);
+    parts.push({ text: `⧗ ${tintPercent(pct, `${pct}%`)}${reset ? ` ${dim(reset)}` : ''}`, drop: 2 });
   }
 
-  // Build stats part (only lines changed now)
-  const statsItems = [];
-  // if (ctx.costText) statsItems.push(`💵 ${ctx.costText.replace(/(\.\d{2})\d+/, '$1')}`);
-  if (ctx.linesAdded > 0 || ctx.linesRemoved > 0) {
-    statsItems.push(`📝 ${green(`+${ctx.linesAdded}`)} ${red(`-${ctx.linesRemoved}`)}`);
+  if (!minimal && ctx.weeklyPercent != null) {
+    parts.push({ text: `◷ ${tintPercent(ctx.weeklyPercent, `${ctx.weeklyPercent}%`)}`, drop: 3 });
   }
-  const statsPart = statsItems.join('  ');
-
-  // Calculate lengths for layout decisions
-  const locationLen = visibleLength(locationPart);
-  const sessionLen = visibleLength(sessionPart);
-  const statsLen = visibleLength(statsPart);
-
-  // Layout priority: SESSION FIRST (Claude Code only reads line 1)
-  // Line 1: model + context + usage (most important for Claude Code)
-  // Line 2+: location, git, stats
-  const allOneLine = `${sessionPart}  ${locationPart}  ${statsPart}`;
-  const sessionLocation = `${sessionPart}  ${locationPart}`;
-  const sessionStats = `${sessionPart}  ${statsPart}`;
-
-  if (visibleLength(allOneLine) <= threshold && statsLen > 0) {
-    // Ultra-wide: everything on one line (session first)
-    lines.push(allOneLine);
-  } else if (visibleLength(sessionLocation) <= threshold) {
-    // Wide: session+location on line 1 | stats on line 2
-    lines.push(sessionLocation);
-    if (statsLen > 0) lines.push(statsPart);
-  } else if (sessionLen <= threshold) {
-    // Medium: session on line 1 | location on line 2 | stats on line 3
-    lines.push(sessionPart);
-    lines.push(locationPart);
-    if (statsLen > 0) lines.push(statsPart);
-  } else {
-    // Narrow: session | dir | branch | stats (each on own line)
-    lines.push(sessionPart);
-    lines.push(dirPart);
-    if (branchPart) lines.push(branchPart);
-    if (planPart) lines.push(planPart);
-    if (statsLen > 0) lines.push(statsPart);
+
+  if (ctx.gitBranch) {
+    let git = `⎇ ${ctx.gitBranch}`;
+    if (!minimal) {
+      const changed = ctx.gitUnstaged + ctx.gitStaged;
+      if (changed > 0) git += ` ${yellow(`●${changed}`)}`;
+      if (ctx.gitAhead > 0) git += ` ↑${ctx.gitAhead}`;
+      if (ctx.gitBehind > 0) git += ` ↓${ctx.gitBehind}`;
+      if (ctx.pr) git += ` ${formatPr(ctx.pr)}`;
+      if (ctx.inWorktree) git += ' ⊟';
+    }
+    parts.push({ text: git, drop: 1 });
   }
 
-  return lines;
+  if (!minimal && (ctx.linesAdded > 0 || ctx.linesRemoved > 0)) {
+    parts.push({ text: `± ${green(`+${ctx.linesAdded}`)}/${red(`-${ctx.linesRemoved}`)}`, drop: 4 });
+  }
+
+  if (!minimal && ctx.durationMs >= 60000) {
+    parts.push({ text: `⏱ ${formatDuration(ctx.durationMs)}`, drop: 5 });
+  }
+
+  if (!minimal && ctx.cacheHitRatio != null) {
+    const pct = Math.round(ctx.cacheHitRatio * 100);
+    const tinted = pct < 50 ? red(`${pct}%`) : pct < 80 ? yellow(`${pct}%`) : green(`${pct}%`);
+    parts.push({ text: `↻ ${tinted}`, drop: 6 });
+  }
+
+  return parts;
+}
+
+/** Join parts, dropping the highest-ranked ones until the line fits the terminal. */
+function fitLine(parts) {
+  const width = getTerminalWidth() - 2;
+  const kept = [...parts];
+  const join = () => kept.map((part) => part.text).join('  ');
+  while (visibleLength(join()) > width) {
+    const candidates = kept.filter((part) => part.drop > 0);
+    if (candidates.length === 0) break;
+    const victim = candidates.reduce((a, b) => (b.drop > a.drop ? b : a));
+    kept.splice(kept.indexOf(victim), 1);
+  }
+  return join();
 }
 
 /**
@@ -309,52 +343,21 @@ function renderTodosLine(transcript) {
   return `${yellow('▸')} ${display} ${dim(`(${completedCount} done, ${pendingCount} pending)`)}`;
 }
 
-/**
- * Render minimal mode - single line with emojis, no progress bar
- * Format: "🤖 opus 4.5  🔋 50%  ⏰ 2h 16m (38%)  🌿 branch  📁 ~/path"
- */
+/** minimal mode: model, context and branch only. */
 function renderMinimal(ctx) {
-  const parts = [`🤖 ${ctx.modelName}`];
-  if (ctx.contextPercent > 0) {
-    const batteryIcon = ctx.contextPercent > 70 ? red('🔋') : '🔋';
-    parts.push(`${batteryIcon} ${ctx.contextPercent}%`);
-  }
-  const usageStr = buildUsageString(ctx);
-  if (usageStr) parts.push(`⏰ ${usageStr}${ctx.weeklyText ? `  ${ctx.weeklyText}` : ''}`);
-  if (ctx.gitBranch) parts.push(`🌿 ${ctx.gitBranch}`);
-  parts.push(`📁 ${ctx.currentDir}`);
-  console.log(parts.join('  '));
+  writeStyledLines([fitLine(buildLineParts(ctx, { minimal: true }))]);
 }
 
-/**
- * Render compact mode - 2 lines: session info + location (branch + dir)
- */
+/** compact mode: the default line without the agent and todo lines. */
 function renderCompact(ctx) {
-  // Line 1: Session info (model + context + usage)
-  let line1 = `🤖 ${ctx.modelName}`;
-  if (ctx.contextPercent > 0) {
-    line1 += `  ${coloredBar(ctx.contextPercent, 12)} ${ctx.contextPercent}%`;
-  }
-  const usageStr = buildUsageString(ctx);
-  if (usageStr) line1 += `  ⌛ ${usageStr}${ctx.weeklyText ? `  ${ctx.weeklyText}` : ''}`;
-  console.log(line1.replace(/ /g, '\u00A0'));
-
-  // Line 2: Location (branch + directory)
-  let line2 = `📁 ${ctx.currentDir}`;
-  if (ctx.gitBranch) line2 += `  🌿 ${ctx.gitBranch}`;
-  console.log(line2.replace(/ /g, '\u00A0'));
+  render(ctx, true);
 }
 
 /**
- * Main render function - outputs all lines
- * Falls back to single line if multi-line fails
+ * full mode: the default line, then agent and todo lines only while they exist.
  */
 function render(ctx, singleLineMode = false) {
-  const lines = [];
-
-  // Session lines (cleaner multi-line layout)
-  const sessionLines = renderSessionLines(ctx);
-  lines.push(...sessionLines);
+  const lines = [fitLine(buildLineParts(ctx))];
 
   if (!singleLineMode) {
     // Agents lines (one per agent for clarity)
@@ -463,6 +466,8 @@ async function main() {
     currentDir = expandHome(currentDir);
 
     const modelName = data.model?.display_name || 'Claude';
+    // Live /effort value; absent when the model has no effort parameter.
+    const effortLevel = typeof data.effort?.level === 'string' ? data.effort.level : '';
 
     // Git detection using batched cache
     const rawDir = data.workspace?.current_dir || data.cwd || process.cwd();
@@ -522,55 +527,39 @@ async function main() {
       } catch {}
     }
 
-    // Session timer - read actual reset time from usage limits cache
+    // Quota text, filled from the payload's rate_limits below
     let sessionText = '';
     let weeklyText = '';
+    let weeklyPercent = null;
     const transcriptPath = data.transcript_path;
 
     // Parse transcript for tools/agents/todos
     const transcript = transcriptPath ? await parseTranscript(transcriptPath) : { tools: [], agents: [], todos: [], sessionStart: null };
 
-    // Read actual reset time and utilization from usage limits cache (written by usage-context-awareness hook)
+    // Quota windows come only from Claude Code's own rate_limits, sent for Pro/Max after
+    // the session's first API response; without it the quota segments stay hidden.
     let usagePercent = null;
-    try {
-      const usageCachePath = path.join(os.tmpdir(), 'ck-usage-limits-cache.json');
-      if (fs.existsSync(usageCachePath)) {
-        const cache = JSON.parse(fs.readFileSync(usageCachePath, 'utf8'));
-
-        // Check status flag for fallback (non-OAuth scenarios)
-        const fresh = typeof cache.timestamp === 'number'
-          && Date.now() - cache.timestamp < USAGE_CACHE_TTL_MS;
-        if (cache.status === 'unavailable') {
-          sessionText = 'N/A';
-        } else if (cache.status === 'available' && fresh) {
-          const fiveHour = cache.data?.five_hour;
-          usagePercent = fiveHour?.utilization ?? null;
-          const resetAt = fiveHour?.resets_at;
-          if (resetAt) {
-            const resetTime = new Date(resetAt);
-            const remaining = Math.floor(resetTime.getTime() / 1000) - Math.floor(Date.now() / 1000);
-            if (remaining > 0 && remaining < 18000) {
-              const rh = Math.floor(remaining / 3600);
-              const rm = Math.floor((remaining % 3600) / 60);
-              sessionText = `${rh}h ${rm}m until reset`;
-            }
-          }
-          const sevenDay = cache.data?.seven_day;
-          if (sevenDay?.utilization != null) {
-            weeklyText = `wk ${Math.round(sevenDay.utilization)}%`;
-            const wkResetAt = sevenDay.resets_at;
-            if (wkResetAt) {
-              const wkRemaining = Math.floor(new Date(wkResetAt).getTime() / 1000) - Math.floor(Date.now() / 1000);
-              if (wkRemaining > 0) {
-                const wd = Math.floor(wkRemaining / 86400);
-                const wh = Math.floor((wkRemaining % 86400) / 3600);
-                weeklyText += ` (${wd}d ${wh}h)`;
-              }
-            }
-          }
+    const applyWindows = (fiveHour, sevenDay) => {
+      if (fiveHour?.percent != null) {
+        usagePercent = fiveHour.percent;
+        const remaining = Math.floor(fiveHour.resetsAtMs / 1000) - Math.floor(Date.now() / 1000);
+        if (remaining > 0 && remaining < 18000) {
+          sessionText = `${Math.floor(remaining / 3600)}h ${Math.floor((remaining % 3600) / 60)}m until reset`;
         }
       }
-    } catch {}
+      if (sevenDay?.percent != null) {
+        weeklyPercent = Math.round(sevenDay.percent);
+        weeklyText = `wk ${weeklyPercent}%`;
+        const wkRemaining = Math.floor(sevenDay.resetsAtMs / 1000) - Math.floor(Date.now() / 1000);
+        if (wkRemaining > 0) {
+          weeklyText += ` (${Math.floor(wkRemaining / 86400)}d ${Math.floor((wkRemaining % 86400) / 3600)}h)`;
+        }
+      }
+    };
+    const fromPayload = (window) => (window && typeof window.used_percentage === 'number'
+      ? { percent: window.used_percentage, resetsAtMs: Number(window.resets_at) * 1000 }
+      : null);
+    applyWindows(fromPayload(data.rate_limits?.five_hour), fromPayload(data.rate_limits?.seven_day));
 
     // Cost and lines changed
     const billingMode = env.CLAUDE_BILLING_MODE || 'api';
@@ -580,6 +569,14 @@ async function main() {
       : null;
     const linesAdded = data.cost?.total_lines_added || 0;
     const linesRemoved = data.cost?.total_lines_removed || 0;
+    const durationMs = Number(data.cost?.total_duration_ms) || 0;
+    const cacheHitRatio = data.prompt_cache?.requests > 0 && typeof data.prompt_cache.hit_ratio === 'number'
+      ? data.prompt_cache.hit_ratio
+      : null;
+    const fastMode = data.fast_mode === true;
+    const thinking = data.thinking?.enabled === true;
+    const pr = typeof data.pr?.number === 'number' ? data.pr : null;
+    const inWorktree = Boolean(data.worktree?.name || data.workspace?.git_worktree);
 
     // Config counts
     const configs = countConfigs(rawDir);
@@ -587,6 +584,7 @@ async function main() {
     // Build render context
     const ctx = {
       modelName,
+      effortLevel,
       currentDir,
       gitBranch,
       gitUnstaged,
@@ -597,10 +595,17 @@ async function main() {
       contextPercent,
       sessionText,
       weeklyText,
+      weeklyPercent,
       usagePercent,
       costText,
       linesAdded,
       linesRemoved,
+      durationMs,
+      cacheHitRatio,
+      fastMode,
+      thinking,
+      pr,
+      inWorktree,
       configs,
       transcript
     };
@@ -636,11 +641,11 @@ async function main() {
 
   } catch (err) {
     // Fallback: output minimal single line on any error
-    console.log('📁 ' + (process.cwd() || 'unknown'));
+    console.log(`◆ ${expandHome(process.cwd() || 'unknown')}`);
   }
 }
 
 main().catch(() => {
-  console.log('📁 error');
+  console.log('◆ statusline error');
   process.exit(1);
 });