dsh-code 1.0.3 → 1.0.4

package/src/render/status.ts

@@ -126,37 +126,31 @@ export const STATUS_ITEM_SEPARATOR = ' · '
 export const STATUS_CYCLE_HINT = ' (shift+tab to cycle)'
 
 /**
- * Interior columns of the segmented context bar (content-type segments plus
- * the free tail whose right edge carries the usage readout). The layout
- * starts every bar at this width so the drop ladder can pre-measure the
- * group, then shrinks the bar inside a tighter budget before dropping it
- * (see CONTEXT_MIN_WIDTH) rather than asking the layout for more room.
+ * Interior columns of the context bar. The layout starts every bar at this
+ * width so the drop ladder can pre-measure the group, then degrades the
+ * readout and shrinks the bar inside a tighter budget before dropping the
+ * group (see CONTEXT_MIN_WIDTH) rather than asking the layout for more room.
  */
 export const CONTEXT_BAR_WIDTH = 24
 /** Occupancy at which the usage readout flips from brand blue to amber. */
 const CONTEXT_WARN_PERCENT = 90
-/** Free-tail floor in columns: wide enough for the bare percent readout, so
- * the warning stays visible even at 100%+ occupancy. */
-const CONTEXT_MIN_FREE = 5
 /**
- * Narrowest bar width the drop ladder tries before giving up on the context
- * group: the bar shrinks inside its own budget first (a few columns still
- * show the bare percent readout) and only then drops as a whole.
+ * Narrowest bar width the drop ladder keeps before dropping the whole
+ * context group: the bar shrinks to this floor first (the absolute readout
+ * survives), and only past it does the readout degrade and the group go.
  */
 const CONTEXT_MIN_WIDTH = 5
 
 /**
- * Render context occupancy as ONE stepless bar: a solid DeepSeek-blue fill
- * run, a dim dotted free track, and the usage readout riding the track's
- * right edge (`12.3K/1.0M 25%`, shrinking to the bare percent as the track
- * narrows). No per-content-type segmentation. Column split is deterministic:
- * the free share is `Math.round(free/window*width)` clamped to at least
- * CONTEXT_MIN_FREE columns and at most the full width; the fill takes every
- * remaining column, so a given occupancy always renders the identical bar.
- * The readout flips to amber once occupancy reaches the warning threshold.
- * @param usedTokens - reported used tokens (drives the readout and percent).
+ * Render context occupancy as ONE stepless proportional bar: a solid
+ * DeepSeek-blue fill run tracking the occupancy and a dim dotted free
+ * track for the rest. Nothing else lives inside the bar — the usage
+ * readout rides outside it (see contextGroupSpans) — so the geometry
+ * always reads as the true remaining share. A given occupancy always
+ * renders the identical bar.
+ * @param usedTokens - reported used tokens.
  * @param contextWindow - route capacity.
- * @param width - total bar interior columns.
+ * @param width - total bar columns.
  * @returns tone-split spans for the footer to paint.
  */
 export function contextBar(
@@ -166,27 +160,42 @@ export function contextBar(
 ): readonly StatusSpan[] {
   if (width <= 0 || contextWindow <= 0) return []
   const used = Math.max(0, usedTokens)
-  const percent = Math.round(used / contextWindow * 100)
-  const warning = percent >= CONTEXT_WARN_PERCENT
-  const readoutTone: StatusTone = warning ? 'warn' : 'value'
-
-  const freeShare = Math.round(Math.max(0, contextWindow - used) / contextWindow * width)
-  const freeColumns = Math.min(width, Math.max(freeShare, CONTEXT_MIN_FREE))
-  const usedColumns = Math.max(0, width - freeColumns)
+  const fill = Math.min(width, Math.max(0, Math.round(used / contextWindow * width)))
+  const spans: StatusSpan[] = []
+  if (fill > 0) spans.push({ text: '█'.repeat(fill), tone: 'ctxFill' })
+  const free = width - fill
+  if (free > 0) spans.push({ text: '░'.repeat(free), tone: 'label' })
+  return spans
+}
 
-  const total = `${formatTokens(used)}/${formatTokens(contextWindow)}`
-  const percentText = `${percent}%`
-  const readout = freeColumns >= visibleColumns(`${total} ${percentText}`)
-    ? `${total} ${percentText}`
-    : freeColumns >= visibleColumns(percentText)
-      ? percentText
-      : ''
+/** How much usage detail the context group's readout carries. */
+export type ContextReadoutMode = 'full' | 'percent' | 'none'
 
-  const spans: StatusSpan[] = []
-  if (usedColumns > 0) spans.push({ text: '█'.repeat(usedColumns), tone: 'ctxFill' })
-  const pad = freeColumns - visibleColumns(readout)
-  if (pad > 0) spans.push({ text: '░'.repeat(pad), tone: 'label' })
-  if (readout !== '') spans.push({ text: readout, tone: readoutTone })
+/**
+ * Compose the context group: the proportional bar plus the usage readout
+ * OUTSIDE the bar, so the dotted track keeps its proportional meaning no
+ * matter how wide the readout is. `full` reads `12.3K/1.0M 25%`; `percent`
+ * drops the absolute pair; `none` is the bare bar. The readout turns amber
+ * once occupancy reaches the warning threshold.
+ */
+export function contextGroupSpans(
+  usedTokens: number,
+  contextWindow: number,
+  barWidth: number,
+  readout: ContextReadoutMode,
+): readonly StatusSpan[] {
+  const spans: StatusSpan[] = [{ text: 'context ', tone: 'label' }]
+  spans.push(...contextBar(usedTokens, contextWindow, barWidth))
+  if (readout === 'none' || barWidth <= 0 || contextWindow <= 0) return spans
+  const used = Math.max(0, usedTokens)
+  const percent = Math.round(used / contextWindow * 100)
+  const text = readout === 'full'
+    ? `${formatTokens(used)}/${formatTokens(contextWindow)} ${percent}%`
+    : `${percent}%`
+  spans.push(
+    { text: ' ', tone: 'label' },
+    { text, tone: percent >= CONTEXT_WARN_PERCENT ? 'warn' : 'value' },
+  )
   return spans
 }
 
@@ -459,17 +468,13 @@ function buildCandidates(
       id: 'cache',
     })
   }
-  // Context occupancy as a segmented bar: per-content-type runs colored by
-  // their own blue shade with a right-aligned usage readout. The used total
-  // is the most recent reported prompt size against the advertised route
-  // capacity (the same figures the old bracket bar showed).
+  // Context occupancy as a purely proportional bar with the usage readout
+  // riding outside it: the used total is the most recent reported prompt
+  // size against the advertised route capacity.
   if (stats.contextWindow > 0 && stats.lastPromptTokens > 0 && enabled.has('context')) {
     left.push({
       group: {
-        spans: [
-          { text: 'context ', tone: 'label' },
-          ...contextBar(stats.lastPromptTokens, stats.contextWindow, contextWidth),
-        ],
+        spans: contextGroupSpans(stats.lastPromptTokens, stats.contextWindow, contextWidth, 'full'),
       },
       rank: RANK_CONTEXT,
       id: 'context',
@@ -569,19 +574,18 @@ export function layoutStatusBar(
   const leftKept = [...orderedLeft]
   const rightKept = [...orderedRight]
 
-  // Context shrink state: the bar starts at its full budget and is rebuilt at
-  // ever narrower widths before the drop ladder is allowed to discard it.
+  // Context degradation state: the readout drops its absolute pair first,
+  // then the bar shrinks inside its own budget, and only then is the whole
+  // group removed — the proportional meter outlives the auxiliary numbers.
   // Rebuilding replaces the group's spans in place so width() re-measures it.
+  let contextReadout: ContextReadoutMode = 'full'
   let contextWidth = maxContextWidth
   const rebuildContext = (): void => {
     const index = leftKept.findIndex(entry => entry.id === 'context')
     if (index < 0) return
     leftKept[index] = {
       group: {
-        spans: [
-          { text: 'context ', tone: 'label' },
-          ...contextBar(stats.lastPromptTokens, stats.contextWindow, contextWidth),
-        ],
+        spans: contextGroupSpans(stats.lastPromptTokens, stats.contextWindow, contextWidth, contextReadout),
       },
       rank: RANK_CONTEXT,
       id: 'context',
@@ -599,23 +603,24 @@ export function layoutStatusBar(
   }
 
   while (width() > budget) {
-    // Context is the lowest-priority visual group. Shrink or remove it before
-    // sacrificing the permission badge or its Shift+Tab affordance.
-    // Shrink the context bar instead of dropping it: reserve everything else
-    // and hand the deficit to the bar, clamped to CONTEXT_MIN_WIDTH. The
-    // fixed label ('context ') and the bar's own readout keep shrinking to
-    // the bare percent, so a tight terminal keeps context visible longer.
-    if (leftKept.some(entry => entry.id === 'context') && contextWidth > CONTEXT_MIN_WIDTH) {
-      const overflow = width() - budget
-      contextWidth = Math.max(CONTEXT_MIN_WIDTH, contextWidth - overflow)
-      rebuildContext()
-      continue
-    }
-    const contextIndex = leftKept.findIndex(entry => entry.id === 'context')
-    if (contextIndex >= 0) {
-      // Once the meter reaches its minimum useful width, remove the whole
-      // group before touching the permission badge or its keyboard hint.
-      leftKept.splice(contextIndex, 1)
+    // Context is the lowest-priority visual group: the bar shrinks inside
+    // its own budget first (the absolute readout survives), then the
+    // readout degrades to the bare percent, and only then does the whole
+    // group go — before the permission badge or its Shift+Tab affordance
+    // is touched.
+    if (leftKept.some(entry => entry.id === 'context')) {
+      if (contextWidth > CONTEXT_MIN_WIDTH) {
+        const overflow = width() - budget
+        contextWidth = Math.max(CONTEXT_MIN_WIDTH, contextWidth - overflow)
+        rebuildContext()
+        continue
+      }
+      if (contextReadout === 'full') {
+        contextReadout = 'percent'
+        rebuildContext()
+        continue
+      }
+      leftKept.splice(leftKept.findIndex(entry => entry.id === 'context'), 1)
       continue
     }
     if (hint && rightKept.length > 0 && leftKept.length > 0) {

package/src/render/text.ts

@@ -145,8 +145,14 @@ export function displayTail(text: string, columns: number, rows: number): Displa
     used += width
     lastCluster = cluster
   }
-  if (current !== '' || (wrapped.length > 0 && text.endsWith('\n'))) flush()
-
+  // A trailing newline means one deliberate empty caret row, but that row
+  // must never evict real content or fake a truncation marker: flush the
+  // content first, decide truncation on content alone, then append the blank
+  // row only when the whole tail still fits the budget.
+  const trailingBlank = current === '' && wrapped.length > 0 && text.endsWith('\n')
+  if (current !== '') flush()
   const truncated = wrapped.length > rowLimit
-  return { text: (truncated ? wrapped.slice(-rowLimit) : wrapped).join('\n'), truncated }
+  const kept = truncated ? wrapped.slice(-rowLimit) : wrapped
+  const keptRows = trailingBlank && kept.length < rowLimit ? [...kept, ''] : kept
+  return { text: keptRows.join('\n'), truncated }
 }

package/src/skills.ts

@@ -61,35 +61,48 @@ function toRows(skills: readonly SkillSummary[]): readonly SkillRow[] {
  * @param ctx - context carrying the `skills` service (optional).
  * @returns the view the completion menu subscribes to.
  */
-export function watchSkills(ctx: Context): SkillsWatch {
+export function watchSkills(ctx: Context, fallbackCwd?: string): SkillsWatch {
   const skills = ctx.get('skills')
   let agent: Agent | undefined
   let rows: readonly SkillRow[] = []
   let error: string | undefined
+  // The agent whose workspace the current rows were last successfully read
+  // from: a failure for an agent that never loaded must clear the rows, not
+  // keep another workspace's catalog answerable in this session.
+  let loadedFor: Agent | undefined
   const listeners = new Set<() => void>()
 
   const reload = (): void => {
     const target = agent
     if (skills === undefined || target === undefined) return
     Promise.resolve().then(() => skills.list({
-      cwd: target.session.header.cwd,
+      cwd: target.session.header.cwd ?? fallbackCwd,
       scope: target,
     })).then((summaries: readonly SkillSummary[]) => {
       // A retarget landed while this catalog was loading: the rows belong to
       // another agent's workspace and must never overwrite the current view.
       if (agent !== target) return
       const next = toRows(summaries)
-      const unchanged = next.length === rows.length && next.every((row, index) => row.name === rows[index]?.name)
+      // Description and invocation-flag edits must surface too: a name-only
+      // comparison silently dropped those change notifications.
+      const unchanged = next.length === rows.length && next.every((row, index) =>
+        row.name === rows[index]?.name
+        && row.description === rows[index]?.description
+        && row.modelInvocable === rows[index]?.modelInvocable)
       rows = next
+      loadedFor = target
       const recovered = error !== undefined
       error = undefined
       if (unchanged && !recovered) return
       for (const listener of listeners) listener()
     }).catch((cause: unknown) => {
       if (agent !== target) return
-      // Discovery failure keeps the last good rows; the next skills/change
-      // notification is the retry surface (mirrors the web directory).
-      rows = [...rows]
+      // Discovery failure keeps the last good rows for the SAME agent (the
+      // next skills/change notification is the retry surface, mirroring the
+      // web directory); an agent that never loaded starts from empty rows —
+      // stale rows from a previous workspace must not keep completing here.
+      if (loadedFor !== target) rows = []
+      else rows = [...rows]
       error = cause instanceof Error ? cause.message : String(cause)
       for (const listener of listeners) listener()
     })

package/src/theme-panel.ts

@@ -1,72 +1,79 @@
-/**
- * The `/theme` picker (the Codex `/theme` contract): one bounded list over
- * the three color themes — dark, light, and auto (terminal-sensed; auto
- * falls back to dark until OSC-11 detection lands). Enter applies the row
- * and the runner persists it; Esc closes without changing the theme.
- *
- * @module @deepseek-ai/dsh-tui/theme-panel
- */
-
-import { createElement, useState, type ReactElement } from 'react'
-import { Box, Text, useInput, useStdout } from 'ink'
-import { panelViewport } from './render/inspector.ts'
-import { truncateColumns } from './render/text.ts'
-import { getPalette, inkColor, type ThemeName } from './theme.ts'
-
-/** The three theme rows in canonical order (the /theme selection surface). */
-const THEME_ROWS: readonly { id: ThemeName; label: string; description: string }[] = [
-  { id: 'dark', label: 'dark', description: 'DeepSeek dark palette (default)' },
-  { id: 'light', label: 'light', description: 'light palette for bright terminals' },
-  { id: 'auto', label: 'auto', description: 'follow the terminal; dark until detection lands' },
-]
-
-/**
- * The /theme list: one row per theme, the current one marked with ●, the
- * focused one with ›. Enter applies the focused theme (the runner persists
- * it), Esc/q closes without changing anything. Colors read the ACTIVE
- * palette, so the panel itself adapts to a light theme once applied.
- */
-export function ThemePanel({ current, select, close }: {
-  /** Theme name in force (the requested name; 'auto' included). */
-  current: ThemeName
-  /** Accept one theme name: applied immediately and persisted by the runner. */
-  select(name: ThemeName): void
-  /** Close without changing the theme. */
-  close(): void
-}): ReactElement {
-  const [cursor, setCursor] = useState(() => {
-    const index = THEME_ROWS.findIndex(theme => theme.id === current)
-    return index < 0 ? 0 : index
-  })
-  const stdout = useStdout().stdout
-  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
-  useInput((input, key) => {
-    if (key.escape || input === 'q') return close()
-    if (key.upArrow) return setCursor(value => (value + THEME_ROWS.length - 1) % THEME_ROWS.length)
-    if (key.downArrow) return setCursor(value => (value + 1) % THEME_ROWS.length)
-    if (key.return) return select(THEME_ROWS[cursor]!.id)
-  })
-  if (viewport.maxHeight === 0) return createElement(Box, { display: 'none' })
-  if (viewport.compact) {
-    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/theme · esc close', viewport.contentColumns))
-  }
-  return createElement(
-    Box,
-    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
-    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns('/theme — color palette', viewport.contentColumns)),
-    ...THEME_ROWS.map((theme, index) => {
-      const selected = index === cursor
-      const active = theme.id === current
-      return createElement(
-        Text,
-        {
-          key: theme.id,
-          color: selected ? inkColor(getPalette().brandBright) : undefined,
-          wrap: 'truncate-end',
-        },
-        truncateColumns(`${selected ? '› ' : '  '}${active ? '● ' : '○ '}${theme.label}${active ? ' · current' : ''} · ${theme.description}`, viewport.contentColumns),
-      )
-    }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns('↑↓ choose · enter apply · esc/q close', viewport.contentColumns)),
-  )
-}
+/**
+ * The `/theme` picker (the Codex `/theme` contract): one bounded list over
+ * the three color themes — dark, light, and auto (terminal-sensed; auto
+ * falls back to dark until OSC-11 detection lands). Enter applies the row
+ * and the runner persists it; Esc closes without changing the theme.
+ *
+ * @module @deepseek-ai/dsh-tui/theme-panel
+ */
+
+import { createElement, useState, type ReactElement } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import { clampScroll, panelViewport } from './render/inspector.ts'
+import { truncateColumns } from './render/text.ts'
+import { getPalette, inkColor, type ThemeName } from './theme.ts'
+
+/** The three theme rows in canonical order (the /theme selection surface). */
+const THEME_ROWS: readonly { id: ThemeName; label: string; description: string }[] = [
+  { id: 'dark', label: 'dark', description: 'DeepSeek dark palette (default)' },
+  { id: 'light', label: 'light', description: 'light palette for bright terminals' },
+  { id: 'auto', label: 'auto', description: 'follow the terminal; dark until detection lands' },
+]
+
+/**
+ * The /theme list: one row per theme, the current one marked with ●, the
+ * focused one with ›. Enter applies the focused theme (the runner persists
+ * it), Esc/q closes without changing anything. Colors read the ACTIVE
+ * palette, so the panel itself adapts to a light theme once applied.
+ */
+export function ThemePanel({ current, select, close }: {
+  /** Theme name in force (the requested name; 'auto' included). */
+  current: ThemeName
+  /** Accept one theme name: applied immediately and persisted by the runner. */
+  select(name: ThemeName): void
+  /** Close without changing the theme. */
+  close(): void
+}): ReactElement {
+  const [cursor, setCursor] = useState(() => {
+    const index = THEME_ROWS.findIndex(theme => theme.id === current)
+    return index < 0 ? 0 : index
+  })
+  const stdout = useStdout().stdout
+  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  useInput((input, key) => {
+    if (key.escape || input === 'q') return close()
+    if (key.upArrow) return setCursor(value => (value + THEME_ROWS.length - 1) % THEME_ROWS.length)
+    if (key.downArrow) return setCursor(value => (value + 1) % THEME_ROWS.length)
+    if (key.return) return select(THEME_ROWS[cursor]!.id)
+  })
+  if (viewport.maxHeight === 0 || viewport.compact) {
+    return createElement(Text, { wrap: 'truncate-end' }, truncateColumns('/theme · esc close', viewport.contentColumns))
+  }
+  // The theme rows share the panel's body budget like every other panel: an
+  // unsliced three-row list reached terminal-height equality on short
+  // terminals, where Ink rewrites the whole Static region every frame.
+  // Reveal-cursor slicing keeps the focused row visible instead.
+  const rowBudget = Math.max(1, viewport.bodyRows)
+  const first = clampScroll(cursor, THEME_ROWS.length, rowBudget)
+  const visibleThemes = THEME_ROWS.slice(first, first + rowBudget)
+  const hiddenThemes = THEME_ROWS.length - visibleThemes.length
+  return createElement(
+    Box,
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(getPalette().dim), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(getPalette().brandBright), wrap: 'truncate-end' }, truncateColumns('/theme — color palette', viewport.contentColumns)),
+    ...visibleThemes.map((theme, index) => {
+      const selected = first + index === cursor
+      const active = theme.id === current
+      return createElement(
+        Text,
+        {
+          key: theme.id,
+          color: selected ? inkColor(getPalette().brandBright) : undefined,
+          wrap: 'truncate-end',
+        },
+        truncateColumns(`${selected ? '› ' : '  '}${active ? '● ' : '○ '}${theme.label}${active ? ' · current' : ''} · ${theme.description}`, viewport.contentColumns),
+      )
+    }),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(`↑↓ choose · enter apply · esc/q close${hiddenThemes > 0 ? ` · +${hiddenThemes} more` : ''}`, viewport.contentColumns)),
+  )
+}