upfynai-code 0.1.0

package/src/services/stream-consumer.ts

@@ -0,0 +1,330 @@
+import type { SDKMessage, ContentBlockToolUse, ToolResultContent } from '../types/sdk-messages';
+import { useSessionStore } from '../store/session-store';
+import { useChatStore } from '../store/chat-store';
+import { useStatuslineStore } from '../store/statusline-store';
+import { usePermissionStore } from '../store/permission-store';
+import { useCanvasStore } from '../store/canvas-store';
+
+let eventSource: EventSource | null = null;
+let messageCounter = 0;
+
+function nextId(): string {
+  return `msg-${++messageCounter}-${Date.now()}`;
+}
+
+export function connectSSE(baseUrl = '') {
+  if (eventSource) {
+    eventSource.close();
+  }
+
+  eventSource = new EventSource(`${baseUrl}/api/stream`);
+
+  eventSource.addEventListener('message', (event) => {
+    if (!event.data) return;
+
+    try {
+      const msg: SDKMessage = JSON.parse(event.data);
+      handleMessage(msg);
+    } catch {
+      // Ignore parse errors
+    }
+  });
+
+  eventSource.addEventListener('open', () => {
+    useSessionStore.getState().setConnected(true);
+  });
+
+  eventSource.addEventListener('error', () => {
+    useSessionStore.getState().setConnected(false);
+    // Auto-reconnect is handled by EventSource
+  });
+
+  return eventSource;
+}
+
+export function disconnectSSE() {
+  if (eventSource) {
+    eventSource.close();
+    eventSource = null;
+  }
+  useSessionStore.getState().setConnected(false);
+}
+
+function handleMessage(msg: SDKMessage) {
+  const chat = useChatStore.getState();
+  const session = useSessionStore.getState();
+  const statusline = useStatuslineStore.getState();
+  const permissions = usePermissionStore.getState();
+  const canvas = useCanvasStore.getState();
+
+  switch (msg.type) {
+    case 'system': {
+      if ('subtype' in msg && msg.subtype === 'init') {
+        session.setInit({
+          sessionId: msg.session_id,
+          model: msg.model,
+          cwd: msg.cwd,
+          tools: msg.tools,
+          permissionMode: msg.permissionMode,
+        });
+        statusline.updateFromInit(msg.model, msg.cwd, msg.session_id, msg.permissionMode);
+
+        // Fetch git status
+        fetchGitStatus(msg.cwd);
+
+        // Canvas: session node
+        canvas.addNode({
+          id: `session-${msg.session_id}`,
+          type: 'session',
+          label: msg.model,
+          data: { model: msg.model, cwd: msg.cwd, session_id: msg.session_id, tools: msg.tools },
+          timestamp: Date.now(),
+        });
+
+        chat.addMessage({
+          id: nextId(),
+          role: 'system',
+          content: `Connected to Claude Code (${msg.model})`,
+          timestamp: Date.now(),
+        });
+      }
+      if ('subtype' in msg && msg.subtype === 'compact_boundary') {
+        statusline.markCompaction(msg.compact_metadata.pre_tokens);
+
+        // Canvas: compaction node
+        canvas.addNode({
+          id: `compact-${Date.now()}`,
+          type: 'compaction',
+          label: 'Compaction',
+          data: { pre_tokens: msg.compact_metadata.pre_tokens, trigger: msg.compact_metadata.trigger },
+          timestamp: Date.now(),
+        });
+
+        chat.addMessage({
+          id: nextId(),
+          role: 'system',
+          content: `Context compacted (was ${Math.round(msg.compact_metadata.pre_tokens / 1000)}k tokens)`,
+          timestamp: Date.now(),
+        });
+      }
+      break;
+    }
+
+    case 'stream_event': {
+      session.setStreaming(true);
+      const evt = msg.event;
+
+      if (evt.type === 'content_block_delta' && evt.delta) {
+        if (evt.delta.type === 'text_delta' && evt.delta.text) {
+          chat.appendStreamDelta(evt.delta.text);
+        }
+      }
+
+      if (evt.type === 'content_block_start' && evt.content_block) {
+        if (evt.content_block.type === 'tool_use' && evt.content_block.name) {
+          chat.setStreamingToolName(evt.content_block.name);
+          statusline.updateSkill(evt.content_block.name);
+        }
+      }
+
+      if (evt.type === 'message_stop') {
+        session.setStreaming(false);
+      }
+      break;
+    }
+
+    case 'assistant': {
+      // Finalize any streaming text
+      chat.finalizeStreaming(msg.message.usage);
+
+      // Process content blocks
+      for (const block of msg.message.content) {
+        if (block.type === 'tool_use') {
+          const toolBlock = block as ContentBlockToolUse;
+          chat.addMessage({
+            id: nextId(),
+            role: 'tool_call',
+            content: JSON.stringify(toolBlock.input, null, 2),
+            toolName: toolBlock.name,
+            toolUseId: toolBlock.id,
+            timestamp: Date.now(),
+          });
+          statusline.updateSkill(toolBlock.name);
+
+          // Canvas: tool call node
+          canvas.addNode({
+            id: `tool-${toolBlock.id}`,
+            type: 'toolCall',
+            label: toolBlock.name,
+            data: { name: toolBlock.name, input: toolBlock.input, id: toolBlock.id },
+            timestamp: Date.now(),
+          });
+        }
+
+        // Canvas: text response for non-tool text blocks
+        const textBlocks = msg.message.content.filter(b => b.type === 'text');
+        if (textBlocks.length > 0) {
+          const fullText = textBlocks.map(b => (b as { text: string }).text).join('');
+          if (fullText.trim()) {
+            canvas.addNode({
+              id: `text-${msg.uuid}`,
+              type: 'textResponse',
+              label: 'Response',
+              data: { text: fullText },
+              timestamp: Date.now(),
+            });
+          }
+        }
+      }
+
+      // Update statusline with usage
+      if (msg.message.usage) {
+        statusline.updateFromUsage(msg.message.usage);
+      }
+      break;
+    }
+
+    case 'user': {
+      if (Array.isArray(msg.message.content)) {
+        for (const block of msg.message.content) {
+          if ((block as ToolResultContent).type === 'tool_result') {
+            const result = block as ToolResultContent;
+            chat.addMessage({
+              id: nextId(),
+              role: 'tool_result',
+              content: typeof result.content === 'string'
+                ? result.content.slice(0, 2000)
+                : JSON.stringify(result.content).slice(0, 2000),
+              toolUseId: result.tool_use_id,
+              isError: result.is_error,
+              timestamp: Date.now(),
+            });
+
+            // Canvas: tool result node
+            canvas.addNode({
+              id: `result-${result.tool_use_id}`,
+              type: 'toolResult',
+              label: 'Result',
+              data: {
+                toolName: result.tool_use_id,
+                content: typeof result.content === 'string' ? result.content.slice(0, 200) : '',
+                is_error: result.is_error,
+              },
+              timestamp: Date.now(),
+            });
+          }
+        }
+      }
+      break;
+    }
+
+    case 'result': {
+      session.setStreaming(false);
+      chat.finalizeStreaming();
+      chat.setWaiting(false);
+
+      statusline.updateFromResult({
+        cost: msg.total_cost_usd,
+        duration: msg.duration_ms,
+        numTurns: msg.num_turns,
+        usage: msg.usage,
+        modelUsage: msg.modelUsage,
+      });
+
+      if (msg.is_error && msg.errors) {
+        chat.addMessage({
+          id: nextId(),
+          role: 'system',
+          content: `Error: ${msg.errors.join(', ')}`,
+          isError: true,
+          timestamp: Date.now(),
+        });
+      }
+      break;
+    }
+
+    case 'permission_request': {
+      permissions.addRequest({
+        requestId: msg.requestId,
+        toolName: msg.toolName,
+        toolInput: msg.toolInput,
+        timestamp: Date.now(),
+      });
+      break;
+    }
+  }
+}
+
+async function fetchGitStatus(cwd: string) {
+  try {
+    const res = await fetch(`/api/git-status?cwd=${encodeURIComponent(cwd)}`);
+    if (res.ok) {
+      const data = await res.json();
+      useStatuslineStore.getState().updateGit(data);
+    }
+  } catch {
+    // Git status not available
+  }
+}
+
+export async function sendPrompt(prompt: string) {
+  const chat = useChatStore.getState();
+  const session = useSessionStore.getState();
+
+  // Add user message to chat
+  chat.addMessage({
+    id: nextId(),
+    role: 'user',
+    content: prompt,
+    timestamp: Date.now(),
+  });
+  chat.setInput('');
+  chat.setWaiting(true);
+
+  try {
+    const res = await fetch('/api/prompt', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        prompt,
+        sessionId: session.sessionId,
+        cwd: session.cwd,
+      }),
+    });
+
+    if (!res.ok) {
+      const err = await res.json();
+      chat.addMessage({
+        id: nextId(),
+        role: 'system',
+        content: `Failed to send: ${err.error || 'Unknown error'}`,
+        isError: true,
+        timestamp: Date.now(),
+      });
+      chat.setWaiting(false);
+    }
+  } catch (err: any) {
+    chat.addMessage({
+      id: nextId(),
+      role: 'system',
+      content: `Connection error: ${err.message}`,
+      isError: true,
+      timestamp: Date.now(),
+    });
+    chat.setWaiting(false);
+  }
+}
+
+export async function respondPermission(requestId: string, approved: boolean) {
+  usePermissionStore.getState().removeRequest(requestId);
+
+  try {
+    await fetch('/api/permission/respond', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ requestId, approved }),
+    });
+  } catch {
+    // Best effort
+  }
+}

package/src/statusline-core/bin/statusline.sh

@@ -0,0 +1,121 @@
+#!/usr/bin/env bash
+# skill-statusline v2.0 — Entry point
+# Delegates to modular v2 engine if installed, falls back to v1 inline
+
+STATUSLINE_DIR="${HOME}/.claude/statusline"
+
+if [ -f "${STATUSLINE_DIR}/core.sh" ]; then
+  # v2: modular engine with themes, layouts, accurate context
+  exec bash "${STATUSLINE_DIR}/core.sh"
+fi
+
+# ── v1 fallback (inline legacy script) ──
+# This runs if only statusline-command.sh was copied without the statusline/ directory
+
+input=$(cat)
+
+json_val() {
+  echo "$input" | grep -o "\"$1\"[[:space:]]*:[[:space:]]*\"[^\"]*\"" | head -1 | sed 's/.*:.*"\(.*\)"/\1/'
+}
+json_num() {
+  echo "$input" | grep -o "\"$1\"[[:space:]]*:[[:space:]]*[0-9.]*" | head -1 | sed 's/.*:[[:space:]]*//'
+}
+to_fwd() {
+  echo "$1" | tr '\\' '/' | sed 's|//\+|/|g'
+}
+rpad() {
+  local str="$1" w="$2"
+  local plain
+  plain=$(printf '%b' "$str" | sed $'s/\033\\[[0-9;]*m//g')
+  local vlen=${#plain}
+  local need=$(( w - vlen ))
+  printf '%b' "$str"
+  [ "$need" -gt 0 ] && printf "%${need}s" ""
+}
+
+RST='\033[0m'; BOLD='\033[1m'
+CYAN='\033[38;2;6;182;212m'; PURPLE='\033[38;2;168;85;247m'
+GREEN='\033[38;2;34;197;94m'; YELLOW='\033[38;2;245;158;11m'
+RED='\033[38;2;239;68;68m'; ORANGE='\033[38;2;251;146;60m'
+WHITE='\033[38;2;228;228;231m'; PINK='\033[38;2;236;72;153m'
+SEP_C='\033[38;2;55;55;62m'; DIM_BAR='\033[38;2;40;40;45m'
+
+cwd=$(json_val "current_dir")
+[ -z "$cwd" ] && cwd=$(json_val "cwd")
+if [ -z "$cwd" ]; then dir_label="~"; clean_cwd=""
+else
+  clean_cwd=$(to_fwd "$cwd")
+  dir_label=$(echo "$clean_cwd" | awk -F'/' '{if(NF>3) print $(NF-2)"/"$(NF-1)"/"$NF; else if(NF>2) print $(NF-1)"/"$NF; else print $0}')
+  [ -z "$dir_label" ] && dir_label="~"
+fi
+
+model_display=$(json_val "display_name"); model_id=$(json_val "id")
+[ -z "$model_display" ] && model_display="unknown"
+model_ver=""; [ -n "$model_id" ] && model_ver=$(echo "$model_id" | sed -n 's/.*-\([0-9]*\)-\([0-9]*\)$/\1.\2/p')
+if [ -n "$model_ver" ] && ! echo "$model_display" | grep -q '[0-9]'; then model_full="${model_display} ${model_ver}"; else model_full="$model_display"; fi
+
+pct=$(json_num "used_percentage"); [ -z "$pct" ] && pct="0"; pct=$(echo "$pct" | cut -d. -f1)
+if [ "$pct" -gt 75 ] 2>/dev/null; then CTX_CLR="$RED"
+elif [ "$pct" -gt 40 ] 2>/dev/null; then CTX_CLR="$ORANGE"
+else CTX_CLR="$WHITE"; fi
+BAR_WIDTH=40; filled=$(( pct * BAR_WIDTH / 100 )); [ "$filled" -gt "$BAR_WIDTH" ] && filled=$BAR_WIDTH
+empty=$(( BAR_WIDTH - filled )); bar_filled=""; bar_empty=""
+i=0; while [ $i -lt $filled ]; do bar_filled="${bar_filled}█"; i=$((i+1)); done
+i=0; while [ $i -lt $empty ]; do bar_empty="${bar_empty}░"; i=$((i+1)); done
+ctx_bar="${CTX_CLR}${bar_filled}${RST}${DIM_BAR}${bar_empty}${RST} ${CTX_CLR}${pct}%${RST}"
+
+branch="no-git"; gh_user=""; gh_repo=""; git_dirty=""
+if [ -n "$clean_cwd" ]; then
+  branch=$(git --no-optional-locks -C "$clean_cwd" symbolic-ref --short HEAD 2>/dev/null)
+  [ -z "$branch" ] && branch=$(git --no-optional-locks -C "$clean_cwd" rev-parse --short HEAD 2>/dev/null)
+  if [ -n "$branch" ]; then
+    remote_url=$(git --no-optional-locks -C "$clean_cwd" remote get-url origin 2>/dev/null)
+    if [ -n "$remote_url" ]; then
+      gh_user=$(echo "$remote_url" | sed 's|.*github\.com[:/]\([^/]*\)/.*|\1|'); [ "$gh_user" = "$remote_url" ] && gh_user=""
+      gh_repo=$(echo "$remote_url" | sed 's|.*/\([^/]*\)\.git$|\1|; s|.*/\([^/]*\)$|\1|'); [ "$gh_repo" = "$remote_url" ] && gh_repo=""
+    fi
+    git --no-optional-locks -C "$clean_cwd" diff --cached --quiet 2>/dev/null || git_dirty="${GREEN}+${RST}"
+    git --no-optional-locks -C "$clean_cwd" diff --quiet 2>/dev/null || git_dirty="${git_dirty}${YELLOW}~${RST}"
+  fi
+  [ -z "$branch" ] && branch="no-git"
+fi
+[ -n "$gh_repo" ] && gh_label="${gh_user}/${gh_repo}/${branch}" || gh_label="$branch"
+
+cost_raw=$(json_num "total_cost_usd")
+if [ -z "$cost_raw" ] || [ "$cost_raw" = "0" ]; then cost_label='$0.00'
+else cost_label=$(awk -v c="$cost_raw" 'BEGIN { if (c < 0.01) printf "$%.4f", c; else printf "$%.2f", c }'); fi
+
+total_in=$(json_num "total_input_tokens"); total_out=$(json_num "total_output_tokens")
+[ -z "$total_in" ] && total_in="0"; [ -z "$total_out" ] && total_out="0"
+fmt_tok() { awk -v t="$1" 'BEGIN { if (t >= 1000000) printf "%.1fM", t/1000000; else if (t >= 1000) printf "%.0fk", t/1000; else printf "%d", t }'; }
+tok_in=$(fmt_tok "$total_in"); tok_out=$(fmt_tok "$total_out")
+tok_total=$(awk -v i="$total_in" -v o="$total_out" 'BEGIN { printf "%d", i + o }')
+token_label="${tok_in} + ${tok_out} = $(fmt_tok "$tok_total")"
+
+skill_label="Idle"
+if [ -n "$clean_cwd" ]; then
+  search_path="$clean_cwd"
+  while [ -n "$search_path" ] && [ "$search_path" != "/" ]; do
+    proj_hash=$(echo "$search_path" | sed 's|^/\([a-zA-Z]\)/|\U\1--|; s|^[A-Z]:/|&|; s|:/|--|; s|/|-|g')
+    proj_dir="$HOME/.claude/projects/${proj_hash}"
+    if [ -d "$proj_dir" ]; then tpath=$(ls -t "$proj_dir"/*.jsonl 2>/dev/null | head -1); [ -n "$tpath" ] && break; fi
+    search_path=$(echo "$search_path" | sed 's|/[^/]*$||')
+  done
+  if [ -n "$tpath" ] && [ -f "$tpath" ]; then
+    recent_block=$(tail -200 "$tpath" 2>/dev/null)
+    last_tool=$(echo "$recent_block" | grep -o '"type":"tool_use","id":"[^"]*","name":"[^"]*"' | tail -1 | sed 's/.*"name":"\([^"]*\)".*/\1/')
+    if [ -n "$last_tool" ]; then
+      case "$last_tool" in
+        Task) skill_label="Agent" ;; Read) skill_label="Read" ;; Write) skill_label="Write" ;;
+        Edit) skill_label="Edit" ;; Glob) skill_label="Search(Files)" ;; Grep) skill_label="Search(Content)" ;;
+        Bash) skill_label="Terminal" ;; WebSearch) skill_label="Web Search" ;; *) skill_label="$last_tool" ;;
+      esac
+    fi
+  fi
+fi
+
+C1=38; S=$(printf '%b' "  ${SEP_C}│${RST}  ")
+printf ' '; rpad "${PINK}Skill:${RST} ${PINK}${skill_label}${RST}" "$C1"; printf '%b' "$S"; printf '%b\n' "${WHITE}GitHub:${RST} ${WHITE}${gh_label}${RST}${git_dirty}"
+printf ' '; rpad "${PURPLE}Model:${RST} ${PURPLE}${BOLD}${model_full}${RST}" "$C1"; printf '%b' "$S"; printf '%b\n' "${CYAN}Dir:${RST} ${CYAN}${dir_label}${RST}"
+printf ' '; rpad "${YELLOW}Tokens:${RST} ${YELLOW}${token_label}${RST}" "$C1"; printf '%b' "$S"; printf '%b\n' "${GREEN}Cost:${RST} ${GREEN}${cost_label}${RST}"
+printf ' '; printf '%b' "${CTX_CLR}Context:${RST} ${ctx_bar}"

package/src/statusline-core/commands/sls-config.md

@@ -0,0 +1,42 @@
+---
+description: Show or modify statusline configuration options. Examples: /sls-config, /sls-config bar_width 50
+argument-hint: "[key] [value]"
+---
+
+# Statusline Configuration
+
+View or modify statusline configuration.
+
+## Current Config
+
+```
+!cat ~/.claude/statusline-config.json 2>/dev/null || echo '{"theme":"default","layout":"standard"}'
+```
+
+## Available Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `compaction_warning_threshold` | number | 85 | Context % at which "X% left" warning appears |
+| `bar_width` | number | 40 | Width of the context progress bar in characters |
+| `cache_ttl_seconds` | number | 5 | How long git/skill cache lives before refresh |
+| `show_burn_rate` | boolean | false | Show cost-per-minute calculation |
+| `show_vim_mode` | boolean | true | Show vim mode indicator (full layout only) |
+| `show_agent_name` | boolean | true | Show active agent name (full layout only) |
+
+## Instructions
+
+If `$ARGUMENTS` has two values (key and value):
+1. Run `ccsl config set <key> <value>` in the terminal
+2. Show the result
+3. Tell them changes take effect on next statusline refresh
+
+If `$ARGUMENTS` has one value (just a key):
+1. Read `~/.claude/statusline-config.json`
+2. Show the current value of that specific option
+3. Suggest how to change it
+
+If no arguments:
+1. Run `ccsl config` in the terminal to show all current settings
+2. Show the output
+3. Tell them they can change options with `/sls-config <key> <value>`

package/src/statusline-core/commands/sls-doctor.md

@@ -0,0 +1,35 @@
+---
+description: Run statusline diagnostics — checks installation, config, performance, and identifies issues
+---
+
+# Statusline Doctor
+
+Run comprehensive diagnostics on the statusline installation.
+
+## Instructions
+
+1. Run `ccsl doctor` in the terminal
+2. Show the full output to the user
+3. If there are any issues (indicated by X or warning symbols), explain what each issue means and how to fix it
+
+## What It Checks
+
+| Check | What It Verifies |
+|-------|-----------------|
+| bash | Bash is available and its version |
+| git | Git is available (needed for GitHub field) |
+| settings.json | Has `statusLine` config pointing to the command |
+| statusline-command.sh | Entry point script exists at ~/.claude/ |
+| v2 engine | core.sh exists in ~/.claude/statusline/ |
+| Theme file | Active theme .sh file exists |
+| Layout file | Active layout .sh file exists |
+| CLAUDE.md | Agent redirect section is present (prevents built-in agent conflicts) |
+| Config | statusline-config.json is valid JSON |
+| Performance | Benchmark: <50ms excellent, <100ms good, >100ms slow |
+
+## Common Fixes
+
+- **Missing files**: Run `ccsl install` or `ccsl update`
+- **Missing CLAUDE.md section**: Run `ccsl update`
+- **Slow performance**: Normal on Windows Git Bash cold start — actual Claude Code rendering is faster
+- **Invalid config**: Delete `~/.claude/statusline-config.json` and run `ccsl install --quick`

package/src/statusline-core/commands/sls-help.md

@@ -0,0 +1,48 @@
+---
+description: Show all available statusline slash commands and CLI commands
+---
+
+# Statusline Help
+
+Show the user all available statusline commands.
+
+## Slash Commands (use inside Claude Code)
+
+| Command | Description |
+|---------|-------------|
+| `/sls-theme` | List themes |
+| `/sls-theme <name>` | Set theme (default, nord, tokyo-night, catppuccin, gruvbox) |
+| `/sls-layout` | List layouts |
+| `/sls-layout <name>` | Set layout (compact, standard, full) |
+| `/sls-preview` | Preview with current settings |
+| `/sls-preview <theme> <layout>` | Preview with overrides |
+| `/sls-config` | Show all config options |
+| `/sls-config <key> <value>` | Set a config option |
+| `/sls-doctor` | Run diagnostics |
+| `/sls-help` | This help |
+
+## CLI Commands (use in any terminal)
+
+| Command | Description |
+|---------|-------------|
+| `ccsl install` | Interactive install wizard |
+| `ccsl install --quick` | Quick install with defaults |
+| `ccsl uninstall` | Remove everything |
+| `ccsl update` | Update scripts, keep config |
+| `ccsl theme` / `ccsl theme set <name>` | List/set theme |
+| `ccsl layout` / `ccsl layout set <name>` | List/set layout |
+| `ccsl preview [--theme x] [--layout x]` | Preview rendering |
+| `ccsl config` / `ccsl config set <k> <v>` | Show/set options |
+| `ccsl doctor` | Run diagnostics |
+| `ccsl version` | Show version |
+| `ccsl help` | Show CLI help |
+
+## Quick Examples
+
+- Change to Nord theme: `/sls-theme nord`
+- Switch to full layout (6 rows): `/sls-layout full`
+- Preview Tokyo Night + compact: `/sls-preview tokyo-night compact`
+- Lower compaction warning to 80%: `/sls-config compaction_warning_threshold 80`
+- Check installation health: `/sls-doctor`
+
+Present this information clearly to the user in a formatted way.

package/src/statusline-core/commands/sls-layout.md

@@ -0,0 +1,38 @@
+---
+description: List available statusline layouts or set a layout. Examples: /sls-layout, /sls-layout full
+argument-hint: "[layout-name]"
+---
+
+# Statusline Layout
+
+Manage the statusline layout for Claude Code.
+
+## Current Config
+
+```
+!cat ~/.claude/statusline-config.json 2>/dev/null || echo '{"theme":"default","layout":"standard"}'
+```
+
+## Available Layouts
+
+| Layout | Rows | What It Shows |
+|--------|------|---------------|
+| `compact` | 2 | Model, Dir, Context%, Cost — minimal footprint |
+| `standard` | 4 | Skill, Model, GitHub, Dir, Tokens, Cost, Context bar — balanced |
+| `full` | 6 | Everything: adds Session tokens, Duration, Lines, Cache, Vim mode, Agent name |
+
+## Instructions
+
+If `$ARGUMENTS` is provided (a layout name):
+1. Run `ccsl layout set $ARGUMENTS` in the terminal
+2. Show the result to the user
+3. Tell them to restart Claude Code or start a new conversation for the layout to take effect
+
+If no arguments provided:
+1. Run `ccsl layout` in the terminal to list layouts with the current selection highlighted
+2. Show the output to the user
+3. Tell them they can set a layout with `/sls-layout <name>` or `ccsl layout set <name>`
+
+**Valid layout names:** compact, standard, full
+
+If the user provides an invalid layout name, show them the valid options above.

package/src/statusline-core/commands/sls-preview.md

@@ -0,0 +1,34 @@
+---
+description: Preview the statusline with sample data. Optionally specify theme/layout overrides. Examples: /sls-preview, /sls-preview nord full
+argument-hint: "[theme] [layout]"
+---
+
+# Statusline Preview
+
+Preview the statusline rendering with sample data.
+
+## Current Config
+
+```
+!cat ~/.claude/statusline-config.json 2>/dev/null || echo '{"theme":"default","layout":"standard"}'
+```
+
+## Instructions
+
+Parse `$ARGUMENTS` for optional theme and layout overrides. Arguments can be in any order — detect which is a theme and which is a layout.
+
+**Valid themes:** default, nord, tokyo-night, catppuccin, gruvbox
+**Valid layouts:** compact, standard, full
+
+Build the ccsl preview command:
+- No arguments: run `ccsl preview`
+- Theme only: run `ccsl preview --theme <name>`
+- Layout only: run `ccsl preview --layout <name>`
+- Both: run `ccsl preview --theme <name> --layout <name>`
+
+Run the command in the terminal and show the output to the user.
+
+After showing the preview, remind the user:
+- To apply a theme: `/sls-theme <name>` or `ccsl theme set <name>`
+- To apply a layout: `/sls-layout <name>` or `ccsl layout set <name>`
+- Changes take effect on Claude Code restart