@soleone/pi-tasks 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleone/pi-tasks",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Task management extension for the pi coding agent",
   "type": "module",
   "license": "MIT",

package/src/ui/components/select-list-with-columns.ts

@@ -0,0 +1,153 @@
+import { Key, matchesKey, truncateToWidth, type Component, type SelectItem, type SelectListTheme } from "@mariozechner/pi-tui"
+
+// Local variant of pi-tui SelectList with configurable value/description column layout.
+
+const normalizeToSingleLine = (text: string): string => text.replace(/[\r\n]+/g, " ").trim()
+
+export interface SelectListColumnLayout {
+  valueMaxWidth?: number
+  valueColumnWidth?: number
+  minDescriptionWidth?: number
+  minWidthForDescription?: number
+}
+
+interface ResolvedSelectListColumnLayout {
+  valueMaxWidth: number
+  valueColumnWidth: number
+  minDescriptionWidth: number
+  minWidthForDescription: number
+}
+
+const DEFAULT_COLUMN_LAYOUT: ResolvedSelectListColumnLayout = {
+  valueMaxWidth: 30,
+  valueColumnWidth: 32,
+  minDescriptionWidth: 10,
+  minWidthForDescription: 40,
+}
+
+export class SelectListWithColumns implements Component {
+  private items: SelectItem[] = []
+  private filteredItems: SelectItem[] = []
+  private selectedIndex = 0
+  private maxVisible = 5
+  private theme: SelectListTheme
+  private layout: ResolvedSelectListColumnLayout
+
+  public onSelect?: (item: SelectItem) => void
+  public onCancel?: () => void
+  public onSelectionChange?: (item: SelectItem) => void
+
+  constructor(items: SelectItem[], maxVisible: number, theme: SelectListTheme, layout: SelectListColumnLayout = {}) {
+    this.items = items
+    this.filteredItems = items
+    this.maxVisible = maxVisible
+    this.theme = theme
+    this.layout = {
+      ...DEFAULT_COLUMN_LAYOUT,
+      ...layout,
+    }
+  }
+
+  setSelectedIndex(index: number): void {
+    this.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1))
+  }
+
+  invalidate(): void {
+    // No cached state.
+  }
+
+  render(width: number): string[] {
+    const lines: string[] = []
+
+    if (this.filteredItems.length === 0) {
+      lines.push(this.theme.noMatch("  No matching commands"))
+      return lines
+    }
+
+    const startIndex = Math.max(
+      0,
+      Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible),
+    )
+    const endIndex = Math.min(startIndex + this.maxVisible, this.filteredItems.length)
+
+    for (let i = startIndex; i < endIndex; i++) {
+      const item = this.filteredItems[i]
+      if (!item) continue
+
+      const isSelected = i === this.selectedIndex
+      const descriptionSingleLine = item.description ? normalizeToSingleLine(item.description) : undefined
+      const displayValue = item.label || item.value
+      const prefix = isSelected ? "→ " : "  "
+
+      if (!descriptionSingleLine || width <= this.layout.minWidthForDescription) {
+        lines.push(this.renderValueOnlyLine(prefix, displayValue, width, isSelected))
+        continue
+      }
+
+      const maxValueWidth = Math.min(this.layout.valueMaxWidth, width - prefix.length - 4)
+      const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "")
+      const spacing = " ".repeat(Math.max(1, this.layout.valueColumnWidth - truncatedValue.length))
+      const descriptionStart = prefix.length + truncatedValue.length + spacing.length
+      const descriptionWidth = width - descriptionStart - 2
+
+      if (descriptionWidth <= this.layout.minDescriptionWidth) {
+        lines.push(this.renderValueOnlyLine(prefix, displayValue, width, isSelected))
+        continue
+      }
+
+      const truncatedDesc = truncateToWidth(descriptionSingleLine, descriptionWidth, "")
+      if (isSelected) {
+        lines.push(this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`))
+      } else {
+        lines.push(`${prefix}${truncatedValue}${this.theme.description(spacing + truncatedDesc)}`)
+      }
+    }
+
+    if (startIndex > 0 || endIndex < this.filteredItems.length) {
+      const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`
+      lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")))
+    }
+
+    return lines
+  }
+
+  handleInput(keyData: string): void {
+    if (matchesKey(keyData, Key.up)) {
+      this.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1
+      this.notifySelectionChange()
+      return
+    }
+
+    if (matchesKey(keyData, Key.down)) {
+      this.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1
+      this.notifySelectionChange()
+      return
+    }
+
+    if (matchesKey(keyData, Key.enter)) {
+      const selectedItem = this.filteredItems[this.selectedIndex]
+      if (selectedItem && this.onSelect) this.onSelect(selectedItem)
+      return
+    }
+
+    if (matchesKey(keyData, Key.escape) || keyData === "\u0003") {
+      if (this.onCancel) this.onCancel()
+    }
+  }
+
+  getSelectedItem(): SelectItem | null {
+    const item = this.filteredItems[this.selectedIndex]
+    return item || null
+  }
+
+  private renderValueOnlyLine(prefix: string, displayValue: string, width: number, isSelected: boolean): string {
+    const maxWidth = width - prefix.length - 2
+    const line = `${prefix}${truncateToWidth(displayValue, maxWidth, "")}`
+    return isSelected ? this.theme.selectedText(line) : line
+  }
+
+  private notifySelectionChange(): void {
+    const selectedItem = this.filteredItems[this.selectedIndex]
+    if (selectedItem && this.onSelectionChange) this.onSelectionChange(selectedItem)
+  }
+}

package/src/ui/pages/list.ts

@@ -1,13 +1,18 @@
 import { DynamicBorder, type ExtensionCommandContext } from "@mariozechner/pi-coding-agent"
-import { Container, SelectList, Spacer, Text, truncateToWidth } from "@mariozechner/pi-tui"
+import { Container, Spacer, Text, truncateToWidth } from "@mariozechner/pi-tui"
 import { toKebabCase, type Task, type TaskStatus } from "../../models/task.ts"
 import type { TaskUpdate } from "../../backend/api.ts"
 import { DESCRIPTION_PART_SEPARATOR, buildListRowModel, decodeDescription, stripAnsi } from "../../models/list-item.ts"
 import { buildListPrimaryHelpText, buildListSecondaryHelpText, resolveListIntent } from "../../controllers/list.ts"
 import { KEYBOARD_HELP_PADDING_X, formatKeyboardHelp } from "../components/keyboard-help.ts"
 import { MinHeightContainer } from "../components/min-height.ts"
+import { SelectListWithColumns } from "../components/select-list-with-columns.ts"
 
 const LIST_PAGE_CONTENT_MIN_HEIGHT = 20
+const TASK_LIST_ROW_LAYOUT = {
+  valueMaxWidth: 60,
+  valueColumnWidth: 62,
+}
 
 export interface ListPageConfig {
   title: string
@@ -134,14 +139,16 @@ export async function showTaskList(ctx: ExtensionCommandContext, config: ListPag
         })
       }
 
-      let items = getItems()
-      let selectList = new SelectList(items, Math.min(items.length, 10), {
+      const selectListTheme = {
         selectedPrefix: (t: string) => theme.fg("accent", t),
         selectedText: (t: string) => applyAccentWithAnsi(t),
         description: (t: string) => styleDescription(t),
         scrollInfo: (t: string) => theme.fg("dim", t),
         noMatch: (t: string) => theme.fg("warning", t),
-      })
+      }
+
+      let items = getItems()
+      let selectList = new SelectListWithColumns(items, Math.min(items.length, 10), selectListTheme, TASK_LIST_ROW_LAYOUT)
 
       if (rememberedSelectedRef) {
         const rememberedIndex = items.findIndex(i => i.value === rememberedSelectedRef)
@@ -165,13 +172,7 @@ export async function showTaskList(ctx: ExtensionCommandContext, config: ListPag
       selectList.onCancel = () => {
         if (filterTerm) {
           filterTerm = ""
-          items = getItems()
-          selectList = new SelectList(items, Math.min(items.length, 10), selectList.theme)
-          selectList.onSelectionChange = selectList.onSelectionChange
-          selectList.onSelect = selectList.onSelect
-          selectList.onCancel = selectList.onCancel
-          container.invalidate()
-          tui.requestRender()
+          rebuildAndRender()
         } else {
           done("cancel")
         }
@@ -325,13 +326,7 @@ export async function showTaskList(ctx: ExtensionCommandContext, config: ListPag
         items = getItems()
         const prevSelected = selectList.getSelectedItem()
 
-        selectList = new SelectList(items, Math.min(items.length, 10), {
-          selectedPrefix: (t: string) => theme.fg("accent", t),
-          selectedText: (t: string) => applyAccentWithAnsi(t),
-          description: (t: string) => styleDescription(t),
-          scrollInfo: (t: string) => theme.fg("dim", t),
-          noMatch: (t: string) => theme.fg("warning", t),
-        })
+        selectList = new SelectListWithColumns(items, Math.min(items.length, 10), selectListTheme, TASK_LIST_ROW_LAYOUT)
 
         selectList.onSelectionChange = () => {
           const selected = selectList.getSelectedItem()