@owloops/claude-powerline 1.23.4 → 1.24.0

package/plugin/bin/preview.sh

@@ -6,7 +6,50 @@ SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 readonly SCRIPT_DIR
 readonly PLUGIN_ROOT="${SCRIPT_DIR}/.."
 
-readonly SAMPLE_JSON='{"model":{"id":"claude-sonnet-4-20250514","display_name":"Sonnet 4"},"cost":{"total_cost_usd":0.42,"message_cost_usd":0.03,"duration":"15m"},"context_window":{"context_window_size":200000,"used_percentage":35,"current_usage":{"input_tokens":50000,"cache_creation_input_tokens":10000,"cache_read_input_tokens":5000}},"cwd":"/home/user/my-project","workspace":{"current_dir":"/home/user/my-project"},"session":{"session_id":"abc123"}}'
+readonly SAMPLE_JSON='{"model":{"id":"claude-sonnet-4-20250514","display_name":"Sonnet 4"},"cost":{"total_cost_usd":0.42,"message_cost_usd":0.03,"duration":"15m"},"context_window":{"context_window_size":200000,"used_percentage":35,"current_usage":{"input_tokens":50000,"cache_creation_input_tokens":10000,"cache_read_input_tokens":5000}},"cwd":"/home/user/my-project","workspace":{"current_dir":"/home/user/my-project"},"session_id":"abc123"}'
+
+setup_tui_transcript() {
+    local now_iso user_iso cwd_encoded transcript_dir
+    now_iso=$(date -u +"%Y-%m-%dT%H:%M:%S.000Z")
+    user_iso=$(date -u -d "-13 seconds" +"%Y-%m-%dT%H:%M:%S.000Z" 2>/dev/null \
+        || date -u -v-13S +"%Y-%m-%dT%H:%M:%S.000Z" 2>/dev/null \
+        || echo "${now_iso}")
+
+    # Encode the preview CWD the same way Claude Code encodes project dirs
+    # On Windows: C:\Users\foo\proj -> C--Users-foo-proj
+    # On Unix: /home/user/proj -> -home-user-proj
+    local preview_cwd
+    # Create a temp git repo so previews always show git data
+    local fake_repo
+    fake_repo="$(mktemp -d)/my-project"
+    mkdir -p "${fake_repo}"
+    git -C "${fake_repo}" init -b main --quiet 2>/dev/null
+    git -C "${fake_repo}" -c user.name="User" -c user.email="u@e.co" commit --allow-empty -m "init" --quiet 2>/dev/null
+    git -C "${fake_repo}" checkout -b feat/my-feature --quiet 2>/dev/null
+    touch "${fake_repo}/newfile.txt"
+    printf 'change\n' > "${fake_repo}/README.md"
+    git -C "${fake_repo}" add README.md 2>/dev/null
+
+    # Use native path for Node.js compatibility (Windows needs C:\... not /c/...)
+    preview_cwd="$(cd "${fake_repo}" && pwd -W 2>/dev/null || pwd)"
+    cwd_encoded="$(printf '%s' "${preview_cwd}" | sed 's|[/\\]|-|g; s|:||g')"
+    TUI_PREVIEW_CWD="${preview_cwd}"
+
+    transcript_dir="${HOME}/.claude/projects/${cwd_encoded}"
+    TUI_TRANSCRIPT="${transcript_dir}/preview-123.jsonl"
+    mkdir -p "${transcript_dir}"
+    printf '{"timestamp":"%s","type":"user","message":{"role":"user","content":[{"type":"text","text":"hello"}]}}\n' "${user_iso}" > "${TUI_TRANSCRIPT}"
+    printf '{"timestamp":"%s","type":"assistant","message":{"role":"assistant","content":[{"type":"text","text":"done"}]}}\n' "${now_iso}" >> "${TUI_TRANSCRIPT}"
+}
+
+make_tui_sample_json() {
+    local resets_5h resets_7d
+    resets_5h=$(( $(date +%s) + 15480 ))
+    resets_7d=$(( $(date +%s) + 432000 ))
+
+    printf '{"model":{"id":"claude-sonnet-4-20250514","display_name":"Sonnet 4"},"cost":{"total_cost_usd":2.85,"message_cost_usd":0.12,"total_duration_ms":16200000,"total_api_duration_ms":480000,"total_lines_added":342,"total_lines_removed":87},"context_window":{"context_window_size":200000,"used_percentage":42,"total_input_tokens":72000,"total_output_tokens":12000,"current_usage":{"input_tokens":72000,"output_tokens":12000,"cache_creation_input_tokens":15000,"cache_read_input_tokens":8000}},"rate_limits":{"five_hour":{"used_percentage":35,"resets_at":%d},"seven_day":{"used_percentage":28,"resets_at":%d}},"cwd":"%s","workspace":{"current_dir":"%s","project_dir":"%s"},"session_id":"preview-123","version":"1.0.47"}' \
+        "${resets_5h}" "${resets_7d}" "${TUI_PREVIEW_CWD}" "${TUI_PREVIEW_CWD}" "${TUI_PREVIEW_CWD}"
+}
 
 readonly PREVIEW_CONFIG='{
   "theme": "dark",
@@ -40,6 +83,7 @@ STYLE="minimal"
 CHARSET="unicode"
 COMPARE_STYLES=false
 COMPARE_THEMES=false
+COMPARE_TUI_LAYOUTS=false
 BIN=""
 TEMP_FILES=()
 
@@ -58,7 +102,8 @@ test_binary() {
 
 find_binary() {
     local npm_bin="${PLUGIN_ROOT}/../bin/claude-powerline"
-    if [[ -f "${npm_bin}" ]] && test_binary "${npm_bin}"; then
+    local dist_file="${PLUGIN_ROOT}/../dist/index.mjs"
+    if [[ -f "${npm_bin}" ]] && [[ -f "${dist_file}" ]] && test_binary "${npm_bin}"; then
         printf '%s' "${npm_bin}"
         return 0
     fi
@@ -98,14 +143,60 @@ run_preview() {
     tmp_config="$(make_temp_config "${preview_theme}" "${preview_style}" "${preview_charset}")"
 
     if [[ "${BIN}" == "npx" ]]; then
-        printf '%s' "${SAMPLE_JSON}" | npx -y @owloops/claude-powerline@latest \
+        printf '%s' "${SAMPLE_JSON}" | FORCE_COLOR=3 npx -y @owloops/claude-powerline@latest \
             --config="${tmp_config}"
     else
-        printf '%s' "${SAMPLE_JSON}" | "${BIN}" \
+        printf '%s' "${SAMPLE_JSON}" | FORCE_COLOR=3 "${BIN}" \
             --config="${tmp_config}"
     fi
 }
 
+run_preview_config() {
+    local config_file="$1"
+    local sample_data="$2"
+
+    if [[ "${BIN}" == "npx" ]]; then
+        printf '%s' "${sample_data}" | FORCE_COLOR=3 npx -y @owloops/claude-powerline@latest \
+            --config="${config_file}"
+    else
+        printf '%s' "${sample_data}" | FORCE_COLOR=3 "${BIN}" \
+            --config="${config_file}"
+    fi
+}
+
+run_compare_tui_layouts() {
+    local layouts=(compact standard full)
+    local label
+    local template_file tmp tui_json fake_repo
+
+    setup_tui_transcript
+    tui_json="$(make_tui_sample_json)"
+    fake_repo="${TUI_PREVIEW_CWD}"
+
+    for label in "${layouts[@]}"; do
+        template_file="${PLUGIN_ROOT}/templates/config-tui-${label}.json"
+        if [[ ! -f "${template_file}" ]]; then
+            printf '%s: template not found\n\n' "${label}"
+            continue
+        fi
+
+        tmp="$(mktemp)"
+        TEMP_FILES+=("${tmp}")
+        sed -e "s/replace:THEME/${THEME}/g" \
+            -e "s/replace:CHARSET/${CHARSET}/g" \
+            -e "s/\"replace:TODAY_BUDGET\"/50/g" \
+            "${template_file}" >"${tmp}"
+
+        printf '%s:\n' "${label}"
+        run_preview_config "${tmp}" "${tui_json}"
+        printf '\n\n'
+    done
+
+    # Clean up fake transcript and git repo
+    rm -f "${TUI_TRANSCRIPT}" 2>/dev/null
+    rm -rf "${fake_repo%/my-project}" 2>/dev/null
+}
+
 run_compare_styles() {
     local styles=(minimal powerline capsule tui)
     local s
@@ -175,6 +266,10 @@ parse_args() {
                 COMPARE_THEMES=true
                 shift
                 ;;
+            --compare-tui-layouts)
+                COMPARE_TUI_LAYOUTS=true
+                shift
+                ;;
             *)
                 printf 'Unknown option: %s\n' "$1" >&2
                 exit 1
@@ -197,6 +292,11 @@ main() {
         exit 0
     fi
 
+    if [[ "${COMPARE_TUI_LAYOUTS}" == "true" ]]; then
+        run_compare_tui_layouts
+        exit 0
+    fi
+
     run_preview "${THEME}" "${STYLE}" "${CHARSET}"
     printf '\n'
     exit 0

package/plugin/commands/powerline.md

@@ -152,7 +152,57 @@ Then ask:
 
 If the user chose `charset=text`, add a note that powerline and capsule use text fallback separators.
 
-**If the user chose "tui":** skip Steps 5 and 6. TUI mode is opinionated and always displays all data regardless of segment configuration. Tell the user: "TUI mode shows all available data automatically. Segment and bar style selection are not needed." Then continue to Step 7.
+**If the user chose "tui":** skip Steps 5 and 6 and continue to Step 4b for TUI layout selection.
+
+## Step 4b: TUI Layout Selection
+
+> [!NOTE]
+> This step only applies if the user chose "tui" style in Step 4. Otherwise skip to Step 5.
+
+Show a preview of all three TUI layouts using the bundled preview script.
+
+> [!IMPORTANT]
+> You MUST run the preview command below and let the terminal display the result.
+> After running, tell the user to expand the bash output if they cannot see the previews.
+
+```bash
+${CLAUDE_PLUGIN_ROOT}/bin/preview.sh --compare-tui-layouts --theme=${chosen_theme} --charset=${charset}
+```
+
+After running the command, tell the user: "The three TUI layout previews are in the bash output above. Expand it if needed."
+
+Display the three TUI layout presets:
+
+````markdown
+**Choose a TUI layout:**
+
+1. **Compact** — Git + context window only
+   Minimal footprint. Model name in the title bar. Clean and focused.
+
+2. **Standard** — Git + context + block usage with progress bars
+   Model and directory in the title bar. Good default for most users.
+
+3. **Full** — Git, context, block, session, and daily cost
+   Title bar with model and directory. Footer with weekly usage and response time.
+   Maximum information density.
+````
+
+Then ask:
+
+- **Question**: "Which TUI layout?"
+- **Header**: "TUI Layout"
+- **Options**:
+  - "Compact" -> Set `chosen_tui_layout=compact`
+  - "Standard" -> Set `chosen_tui_layout=standard`
+  - "Full" -> Set `chosen_tui_layout=full`
+
+After selection, skip Steps 5 and 6 (always skipped for TUI). If "Compact" or "Standard", also skip Step 7 (no budget needed). If "Full", continue to Step 7.
+
+### TUI preset to template mapping
+
+- `compact` -> `config-tui-compact.json`
+- `standard` -> `config-tui-standard.json`
+- `full` -> `config-tui-full.json`
 
 ## Step 5: Segment Selection
 
@@ -190,7 +240,8 @@ Each preset has a corresponding template config file in `${CLAUDE_PLUGIN_ROOT}/t
 - `essential` -> `config-essential.json`
 - `standard` -> `config-standard.json`
 - `full` -> `config-full.json`
-- `tui` (style) -> `config-tui.json`
+
+For TUI templates, see Step 4b.
 
 ## Step 6: Bar Display Style
 
@@ -227,7 +278,7 @@ Apply `chosen_bar_style` to the `displayStyle` field of context, block, and week
 ## Step 7: Budget
 
 > [!NOTE]
-> Skip this step if the user chose "Essential" preset or "tui" style. The essential template has no budget placeholder, and TUI uses defaults.
+> Skip this step if the user chose "Essential" preset, or TUI "Compact" or "Standard" layout. Only TUI "Full" layout uses a budget placeholder.
 
 Ask the user about their daily budget for cost tracking:
 
@@ -258,7 +309,9 @@ If it exists, ask:
 
 ### Build and write the config
 
-1. **Pick the template file.** If the user chose "tui" style, use `config-tui.json`. Otherwise use the preset template: `config-essential.json`, `config-standard.json`, or `config-full.json`.
+1. **Pick the template file.** Based on the user's choices:
+   - Non-TUI styles: `config-essential.json`, `config-standard.json`, or `config-full.json` (from Step 5)
+   - TUI style: `config-tui-compact.json`, `config-tui-standard.json`, or `config-tui-full.json` (from Step 4b)
 
 2. **Read the template** using the Read tool:
 
@@ -271,12 +324,12 @@ ${CLAUDE_PLUGIN_ROOT}/templates/<template-file>
    | Placeholder | Replace with |
    |-------------|-------------|
    | `replace:THEME` | The chosen theme (e.g., `tokyo-night`) |
-   | `replace:STYLE` | The chosen style (e.g., `capsule`). Not present in tui template. |
+   | `replace:STYLE` | The chosen style (e.g., `capsule`). Not present in TUI templates. |
    | `replace:CHARSET` | `unicode` or `text` |
-   | `replace:BAR_STYLE` | The chosen bar style (e.g., `blocks`). Default `text` if Step 6 was skipped. Not present in tui template. |
-   | `replace:TODAY_BUDGET` | The budget number (e.g., `50`). Not present in essential template. **Important:** replace `"replace:TODAY_BUDGET"` (including the surrounding quotes) with the bare number so the result is `"amount": 50` not `"amount": "50"`. |
+   | `replace:BAR_STYLE` | The chosen bar style (e.g., `blocks`). Default `text` if Step 6 was skipped. Not present in TUI templates. |
+   | `replace:TODAY_BUDGET` | The budget number (e.g., `50`). Only present in non-TUI standard/full and TUI full templates. **Important:** replace `"replace:TODAY_BUDGET"` (including the surrounding quotes) with the bare number so the result is `"amount": 50` not `"amount": "50"`. |
 
-1. **Handle "No budget"**: If the user chose "No budget" in Step 7, remove the entire `"amount": "replace:TODAY_BUDGET",` line (including the trailing comma) from the budget section. If Step 7 was skipped (essential preset), do not modify the budget section.
+1. **Handle "No budget"**: If the user chose "No budget" in Step 7, remove the entire `"amount": "replace:TODAY_BUDGET",` line (including the trailing comma) from the budget section. If Step 7 was skipped (essential preset, or TUI compact/standard), do not modify the budget section.
 
 1. **Write the result** to `~/.claude/claude-powerline.json` using the Write tool. Do NOT read or merge with any existing config.
 
@@ -331,3 +384,20 @@ Setup complete.
 
 Documentation: https://github.com/Owloops/claude-powerline
 ````
+
+**If the user chose TUI style**, also display:
+
+````markdown
+**Customizing your TUI grid layout:**
+
+Edit `display.tui` in `~/.claude/claude-powerline.json` to fine-tune:
+
+- **Box style** — Add `"box": "rounded"` to change borders. Presets: `rounded`, `square`, `heavy`, `double`, `dashed`, `heavy-dashed`, `mixed`, `ascii`, `invisible`
+- **Title/footer** — Edit `title.left`, `title.right`, `footer.left`, `footer.right` using `{segment.part}` tokens (e.g. `{model.icon}`, `{dir}`, `{weekly.pct}`)
+- **Grid areas** — Rearrange cells in `breakpoints[].areas`. Use `.` for empty cells, `---` for dividers. Repeat a name across adjacent cells to span columns
+- **Custom colors** — Add `colors.custom` entries with dot-notation keys (e.g. `"context.bar": { "fg": "#4a9eff" }`)
+- **Responsive breakpoints** — Add breakpoints for different terminal widths. The engine picks the largest `minWidth` that fits
+- **Column sizing** — `"auto"` (fit content), `"1fr"` (fill remaining), or a fixed number like `"20"`
+
+See the TUI Grid Layout section in the README for the full reference.
+````

package/plugin/templates/config-tui-compact.json

@@ -0,0 +1,59 @@
+{
+  "theme": "replace:THEME",
+  "display": {
+    "style": "tui",
+    "charset": "replace:CHARSET",
+    "colorCompatibility": "auto",
+    "autoWrap": true,
+    "tui": {
+      "fitContent": true,
+      "minWidth": 50,
+      "padding": { "horizontal": 2 },
+      "separator": { "column": "  " },
+      "title": {
+        "left": "{model}",
+        "right": "{dir}"
+      },
+      "breakpoints": [
+        {
+          "minWidth": 0,
+          "areas": [
+            "git.icon   git.head     .            git.working",
+            "---",
+            "context.icon  context.bar  context.pct  context.tokens"
+          ],
+          "columns": ["auto", "1fr", "auto", "auto"],
+          "align": ["left", "left", "right", "right"]
+        }
+      ]
+    },
+    "lines": [
+      {
+        "segments": {
+          "directory": { "enabled": true, "showBasename": true },
+          "git": { "enabled": true },
+          "model": { "enabled": true },
+          "context": { "enabled": true, "autocompactBuffer": 0 }
+        }
+      }
+    ]
+  },
+  "colors": {
+    "custom": {
+      "model": { "fg": "#e0d68a" },
+      "dir": { "fg": "#d2e08a" },
+      "git": { "fg": "#c3e88d" },
+      "git.working": { "fg": "#90c499" },
+      "context": { "fg": "#7ecbc8" },
+      "context.pct": { "fg": "#71b7b4" },
+      "context.tokens": { "fg": "#71b7b4" }
+    }
+  },
+  "budget": {
+    "session": { "warningThreshold": 80 }
+  },
+  "modelContextLimits": {
+    "sonnet": 1000000,
+    "opus": 200000
+  }
+}

package/plugin/templates/config-tui-full.json

@@ -0,0 +1,110 @@
+{
+  "theme": "replace:THEME",
+  "display": {
+    "style": "tui",
+    "charset": "replace:CHARSET",
+    "colorCompatibility": "auto",
+    "autoWrap": true,
+    "tui": {
+      "fitContent": true,
+      "minWidth": 60,
+      "padding": { "horizontal": 2 },
+      "separator": { "column": "  " },
+      "title": {
+        "left": "{model.icon}  {model.value}",
+        "right": "{dir}"
+      },
+      "footer": {
+        "left": "{activity.durationIcon} {activity.durationVal}  {activity.messagesIcon} {activity.messagesVal}",
+        "right": "{metrics.lastResponse}"
+      },
+      "segments": {
+        "git.info": {
+          "items": ["{branch}", "{status}", "{ahead}", "{behind}"],
+          "gap": 1
+        }
+      },
+      "breakpoints": [
+        {
+          "minWidth": 55,
+          "areas": [
+            "git.icon     git.info     git.info     .               git.working",
+            "---",
+            "context.icon  context.bar  context.bar  context.pct     context.tokens",
+            "block.icon    block.bar    block.bar    block.value     block.time",
+            "weekly.icon   weekly.bar   weekly.bar   weekly.pct      weekly.time",
+            "---",
+            "session       session       .           today           today"
+          ],
+          "columns": ["auto", "1fr", "auto", "auto", "auto"],
+          "align": ["left", "left", "right", "right", "right"]
+        },
+        {
+          "minWidth": 0,
+          "areas": [
+            "git.head",
+            "git.working",
+            "---",
+            "context",
+            "block",
+            "---",
+            "session",
+            "today"
+          ],
+          "columns": ["1fr"],
+          "align": ["left"]
+        }
+      ]
+    },
+    "lines": [
+      {
+        "segments": {
+          "directory": { "enabled": true, "style": "fish" },
+          "git": { "enabled": true, "showAheadBehind": true },
+          "model": { "enabled": true },
+          "context": { "enabled": true, "autocompactBuffer": 0 },
+          "block": { "enabled": true, "type": "tokens" },
+          "session": { "enabled": true, "type": "tokens" },
+          "today": { "enabled": true, "type": "cost" },
+          "weekly": { "enabled": true },
+          "metrics": {
+            "enabled": true,
+            "showLastResponseTime": true,
+            "showResponseTime": false,
+            "showDuration": true,
+            "showMessageCount": true
+          }
+        }
+      }
+    ]
+  },
+  "colors": {
+    "custom": {
+      "model": { "fg": "#e0d68a" },
+      "dir": { "fg": "#d2e08a" },
+      "git": { "fg": "#c3e88d" },
+      "git.working": { "fg": "#90c499" },
+      "context": { "fg": "#7ecbc8" },
+      "context.pct": { "fg": "#71b8cd" },
+      "context.tokens": { "fg": "#71b8cd" },
+      "block": { "fg": "#7dcfff" },
+      "block.value": { "fg": "#6fa6e2" },
+      "block.time": { "fg": "#6fa6e2" },
+      "weekly": { "fg": "#7aa2f7" },
+      "weekly.pct": { "fg": "#8b8ede" },
+      "weekly.time": { "fg": "#8b8ede" },
+      "session": { "fg": "#bb9af7" },
+      "today": { "fg": "#aaa0dd" },
+      "activity": { "fg": "#c0caf5" },
+      "metrics.lastResponse": { "fg": "#c0caf5" }
+    }
+  },
+  "budget": {
+    "session": { "warningThreshold": 80 },
+    "today": { "amount": "replace:TODAY_BUDGET", "warningThreshold": 80 }
+  },
+  "modelContextLimits": {
+    "sonnet": 1000000,
+    "opus": 200000
+  }
+}

package/plugin/templates/config-tui-standard.json

@@ -0,0 +1,70 @@
+{
+  "theme": "replace:THEME",
+  "display": {
+    "style": "tui",
+    "charset": "replace:CHARSET",
+    "colorCompatibility": "auto",
+    "autoWrap": true,
+    "tui": {
+      "fitContent": true,
+      "minWidth": 55,
+      "padding": { "horizontal": 2 },
+      "separator": { "column": "  " },
+      "title": {
+        "left": "{model}",
+        "right": "{dir}"
+      },
+      "segments": {
+        "git.info": {
+          "items": ["{branch}", "{status}", "{ahead}", "{behind}"],
+          "gap": 1
+        }
+      },
+      "breakpoints": [
+        {
+          "minWidth": 0,
+          "areas": [
+            "git.icon     git.info     git.info     .            git.working",
+            "---",
+            "context.icon  context.bar  context.bar  context.pct  context.tokens",
+            "block.icon    block.bar    block.bar    block.value  block.time"
+          ],
+          "columns": ["auto", "1fr", "auto", "auto", "auto"],
+          "align": ["left", "left", "right", "right", "right"]
+        }
+      ]
+    },
+    "lines": [
+      {
+        "segments": {
+          "directory": { "enabled": true, "showBasename": true },
+          "git": { "enabled": true, "showAheadBehind": true },
+          "model": { "enabled": true },
+          "context": { "enabled": true, "autocompactBuffer": 0 },
+          "block": { "enabled": true, "type": "tokens" }
+        }
+      }
+    ]
+  },
+  "colors": {
+    "custom": {
+      "model": { "fg": "#e0d68a" },
+      "dir": { "fg": "#d2e08a" },
+      "git": { "fg": "#c3e88d" },
+      "git.working": { "fg": "#90c499" },
+      "context": { "fg": "#7ecbc8" },
+      "context.pct": { "fg": "#70a4c9" },
+      "context.tokens": { "fg": "#70a4c9" },
+      "block": { "fg": "#7aa2f7" },
+      "block.value": { "fg": "#6e92de" },
+      "block.time": { "fg": "#6e92de" }
+    }
+  },
+  "budget": {
+    "session": { "warningThreshold": 80 }
+  },
+  "modelContextLimits": {
+    "sonnet": 1000000,
+    "opus": 200000
+  }
+}