@soleone/pi-tasks 0.2.1 → 0.3.0

package/package.json

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

package/src/controllers/list.ts

@@ -23,7 +23,7 @@ export interface ListControllerState {
   filtered: boolean
   allowSearch: boolean
   allowPriority: boolean
-  ctrlQ: string
+  closeKey: string
   priorities: string[]
   priorityHotkeys?: Record<string, string>
 }
@@ -83,7 +83,7 @@ const SCROLL_KEYS: Record<string, number> = {
 const SHORTCUT_DEFINITIONS: ShortcutDefinition[] = [
   {
     context: "search",
-    match: (data, state) => data === state.ctrlQ,
+    match: (data, state) => data === state.closeKey,
     intent: () => ({ type: "cancel" }),
   },
   {
@@ -174,7 +174,7 @@ const SHORTCUT_DEFINITIONS: ShortcutDefinition[] = [
   },
   {
     context: "default",
-    match: (data, state) => data === state.ctrlQ,
+    match: (data, state) => data === state.closeKey,
     intent: () => ({ type: "cancel" }),
   },
 ]

package/src/extension.ts

@@ -6,7 +6,7 @@ import { showTaskList } from "./ui/pages/list.ts"
 import { showTaskForm } from "./ui/pages/show.ts"
 import type { TaskUpdate } from "./backend/api.ts"
 
-const CTRL_Q = "\x11"
+const CTRL_X = "\x18"
 
 function parsePriorityKey(
   data: string,
@@ -212,7 +212,7 @@ export default function registerExtension(pi: ExtensionAPI) {
       mode: "edit",
       subtitle: "Edit",
       task,
-      ctrlQ: CTRL_Q,
+      closeKey: CTRL_X,
       cycleStatus: nextStatus,
       cycleTaskType: nextTaskType,
       parsePriorityKey: nextPriorityFromKey,
@@ -261,7 +261,7 @@ export default function registerExtension(pi: ExtensionAPI) {
         priority: defaultPriority(backend.priorities),
         taskType: defaultTaskType(backend.taskTypes),
       },
-      ctrlQ: CTRL_Q,
+      closeKey: CTRL_X,
       cycleStatus: nextStatus,
       cycleTaskType: nextTaskType,
       parsePriorityKey: nextPriorityFromKey,
@@ -323,7 +323,7 @@ export default function registerExtension(pi: ExtensionAPI) {
         title: pageTitle,
         subtitle: backendLabel,
         tasks,
-        ctrlQ: CTRL_Q,
+        closeKey: CTRL_X,
         priorities: backend.priorities,
         priorityHotkeys: backend.priorityHotkeys,
         cycleStatus: nextStatus,

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
@@ -18,7 +23,7 @@ export interface ListPageConfig {
   filterTerm?: string
   priorities: string[]
   priorityHotkeys?: Record<string, string>
-  ctrlQ: string
+  closeKey: string
   cycleStatus: (status: TaskStatus) => TaskStatus
   cycleTaskType: (current: string | undefined) => string
   onUpdateTask: (ref: string, update: TaskUpdate) => Promise<void>
@@ -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")
         }
@@ -289,7 +290,7 @@ export async function showTaskList(ctx: ExtensionCommandContext, config: ListPag
           filtered: !!filterTerm,
           allowPriority,
           allowSearch,
-          ctrlQ: config.ctrlQ,
+          closeKey: config.closeKey,
           priorities: config.priorities,
           priorityHotkeys: config.priorityHotkeys,
         })))
@@ -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()
@@ -381,7 +376,7 @@ export async function showTaskList(ctx: ExtensionCommandContext, config: ListPag
             filtered: !!filterTerm,
             allowSearch,
             allowPriority,
-            ctrlQ: config.ctrlQ,
+            closeKey: config.closeKey,
             priorities: config.priorities,
             priorityHotkeys: config.priorityHotkeys,
           })

package/src/ui/pages/show.ts

@@ -26,7 +26,7 @@ interface ShowTaskFormOptions {
   mode: FormMode
   subtitle: string
   task: Task
-  ctrlQ: string
+  closeKey: string
   cycleStatus: (status: TaskStatus) => TaskStatus
   cycleTaskType: (taskType: string | undefined) => string
   parsePriorityKey: (data: string) => string | null
@@ -144,7 +144,7 @@ class ReservedLineText implements Component {
 }
 
 export async function showTaskForm(ctx: ExtensionCommandContext, options: ShowTaskFormOptions): Promise<TaskFormResult> {
-  const { mode, subtitle, task, ctrlQ, cycleStatus, cycleTaskType, parsePriorityKey, priorities, priorityHotkeys, onSave } = options
+  const { mode, subtitle, task, closeKey, cycleStatus, cycleTaskType, parsePriorityKey, priorities, priorityHotkeys, onSave } = options
 
   let taskTypeValue = task.taskType
   let titleValue = task.title
@@ -397,7 +397,7 @@ export async function showTaskForm(ctx: ExtensionCommandContext, options: ShowTa
         if (saveIndicatorTimer) clearTimeout(saveIndicatorTimer)
       },
       handleInput: (data: string) => {
-        if (data === ctrlQ) {
+        if (data === closeKey) {
           done({ action: "close_list" })
           return
         }