@allpepper/task-orchestrator-tui 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allpepper/task-orchestrator-tui",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Terminal UI for task orchestration - Kanban boards, tree views, and task management",
   "type": "module",
   "bin": {
@@ -45,7 +45,7 @@
     "prepublishOnly": "bun test"
   },
   "dependencies": {
-    "@allpepper/task-orchestrator": "^1.0.2",
+    "@allpepper/task-orchestrator": "^1.1.1",
     "@inkjs/ui": "^2.0.0",
     "ink": "^6.6.0",
     "react": "^19.2.4"

package/src/tui/components/section-list.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import type { Section } from '@allpepper/task-orchestrator';
 import { useTheme } from '../../ui/context/theme-context';
+import { MarkdownText } from '../../ui/lib/markdown';
 
 export interface SectionListProps {
   sections: Section[];
@@ -83,8 +84,8 @@ export function SectionList({
                     </Text>
                   </Box>
                 )}
-                <Box>
-                  <Text>{section.content}</Text>
+                <Box flexDirection="column">
+                  <MarkdownText>{section.content}</MarkdownText>
                 </Box>
               </Box>
             )}

package/src/tui/screens/dashboard.tsx

@@ -213,10 +213,10 @@ export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProjec
       {mode === 'delete' && selectedProject ? (
         <ConfirmDialog
           title="Delete Project"
-          message={`Delete "${selectedProject.name}"?`}
+          message={`Delete "${selectedProject.name}" and all its features/tasks?`}
           onCancel={() => setMode('idle')}
           onConfirm={() => {
-            adapter.deleteProject(selectedProject.id).then((result) => {
+            adapter.deleteProject(selectedProject.id, { cascade: true }).then((result) => {
               if (!result.success) {
                 setLocalError(result.error);
               }

package/src/tui/screens/project-view.tsx

@@ -369,10 +369,10 @@ export function ProjectView({ projectId, expandedFeatures, onExpandedFeaturesCha
           return (
             <ConfirmDialog
               title="Delete Feature"
-              message={`Delete "${feature.name}"?`}
+              message={`Delete "${feature.name}" and all its tasks?`}
               onCancel={() => setMode('idle')}
               onConfirm={() => {
-                adapter.deleteFeature(feature.id).then((result) => {
+                adapter.deleteFeature(feature.id, { cascade: true }).then((result) => {
                   if (!result.success) setLocalError(result.error);
                   refresh();
                   setMode('idle');

package/src/ui/adapters/direct.ts

@@ -112,8 +112,8 @@ export class DirectAdapter implements DataAdapter {
     return Promise.resolve(projects.updateProject(id, params));
   }
 
-  async deleteProject(id: string): Promise<Result<boolean>> {
-    return Promise.resolve(projects.deleteProject(id));
+  async deleteProject(id: string, options?: { cascade?: boolean }): Promise<Result<boolean>> {
+    return Promise.resolve(projects.deleteProject(id, options));
   }
 
   // ============================================================================
@@ -188,8 +188,8 @@ export class DirectAdapter implements DataAdapter {
     return Promise.resolve(features.updateFeature(id, params));
   }
 
-  async deleteFeature(id: string): Promise<Result<boolean>> {
-    return Promise.resolve(features.deleteFeature(id));
+  async deleteFeature(id: string, options?: { cascade?: boolean }): Promise<Result<boolean>> {
+    return Promise.resolve(features.deleteFeature(id, options));
   }
 
   // ============================================================================

package/src/ui/adapters/types.ts

@@ -102,7 +102,7 @@ export interface DataAdapter {
     }
   ): Promise<Result<Project>>;
 
-  deleteProject(id: string): Promise<Result<boolean>>;
+  deleteProject(id: string, options?: { cascade?: boolean }): Promise<Result<boolean>>;
 
   // ============================================================================
   // Features
@@ -147,7 +147,7 @@ export interface DataAdapter {
     }
   ): Promise<Result<Feature>>;
 
-  deleteFeature(id: string): Promise<Result<boolean>>;
+  deleteFeature(id: string, options?: { cascade?: boolean }): Promise<Result<boolean>>;
 
   // ============================================================================
   // Tasks

package/src/ui/lib/markdown.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { Text, Box } from 'ink';
+
+/**
+ * Detect if content looks like markdown
+ * Checks for common patterns LLMs use
+ */
+export function looksLikeMarkdown(content: string): boolean {
+  // Check for literal \n (escaped newlines that should be actual newlines)
+  if (content.includes('\\n')) return true;
+
+  // Check for markdown headers (## Header)
+  if (/^#{1,6}\s/m.test(content)) return true;
+
+  // Check for bullet points (- item or * item)
+  if (/^\s*[-*]\s/m.test(content)) return true;
+
+  // Check for inline code (`code`)
+  if (/`[^`]+`/.test(content)) return true;
+
+  // Check for bold (**text**)
+  if (/\*\*[^*]+\*\*/.test(content)) return true;
+
+  return false;
+}
+
+interface MarkdownTextProps {
+  children: string;
+}
+
+/**
+ * Render markdown content with Ink styling
+ * Handles common markdown patterns used by LLMs
+ */
+export function MarkdownText({ children }: MarkdownTextProps) {
+  if (!looksLikeMarkdown(children)) {
+    return <Text>{children}</Text>;
+  }
+
+  // First, convert literal \n to actual newlines
+  const normalized = children.replace(/\\n/g, '\n');
+
+  // Split into lines for processing
+  const lines = normalized.split('\n');
+
+  return (
+    <Box flexDirection="column">
+      {lines.map((line, lineIndex) => (
+        <MarkdownLine key={lineIndex} line={line} />
+      ))}
+    </Box>
+  );
+}
+
+interface MarkdownLineProps {
+  line: string;
+}
+
+function MarkdownLine({ line }: MarkdownLineProps) {
+  // Empty line
+  if (!line.trim()) {
+    return <Text> </Text>;
+  }
+
+  // Header (## Header)
+  const headerMatch = line.match(/^(#{1,6})\s+(.*)$/);
+  if (headerMatch) {
+    const level = headerMatch[1].length;
+    const text = headerMatch[2];
+    return (
+      <Box marginTop={level === 1 ? 1 : 0}>
+        <Text bold color={level <= 2 ? 'cyan' : undefined}>
+          {text}
+        </Text>
+      </Box>
+    );
+  }
+
+  // Bullet point (- item or * item)
+  const bulletMatch = line.match(/^(\s*)([-*])\s+(.*)$/);
+  if (bulletMatch) {
+    const indent = bulletMatch[1].length;
+    const content = bulletMatch[3];
+    return (
+      <Box marginLeft={indent}>
+        <Text>
+          <Text dimColor>• </Text>
+          <InlineMarkdown text={content} />
+        </Text>
+      </Box>
+    );
+  }
+
+  // Regular line with inline formatting
+  return (
+    <Text>
+      <InlineMarkdown text={line} />
+    </Text>
+  );
+}
+
+interface InlineMarkdownProps {
+  text: string;
+}
+
+/**
+ * Handle inline markdown: `code`, **bold**
+ */
+function InlineMarkdown({ text }: InlineMarkdownProps) {
+  const parts: React.ReactNode[] = [];
+  let remaining = text;
+  let key = 0;
+
+  while (remaining.length > 0) {
+    // Check for inline code `code`
+    const codeMatch = remaining.match(/^(.*?)`([^`]+)`(.*)$/);
+    if (codeMatch) {
+      if (codeMatch[1]) {
+        parts.push(<BoldMarkdown key={key++} text={codeMatch[1]} />);
+      }
+      parts.push(
+        <Text key={key++} color="yellow">
+          {codeMatch[2]}
+        </Text>
+      );
+      remaining = codeMatch[3];
+      continue;
+    }
+
+    // Check for bold **text**
+    const boldMatch = remaining.match(/^(.*?)\*\*([^*]+)\*\*(.*)$/);
+    if (boldMatch) {
+      if (boldMatch[1]) {
+        parts.push(<Text key={key++}>{boldMatch[1]}</Text>);
+      }
+      parts.push(
+        <Text key={key++} bold>
+          {boldMatch[2]}
+        </Text>
+      );
+      remaining = boldMatch[3];
+      continue;
+    }
+
+    // No more patterns, add remaining text
+    parts.push(<Text key={key++}>{remaining}</Text>);
+    break;
+  }
+
+  return <>{parts}</>;
+}
+
+/**
+ * Handle bold within text that might have already had code extracted
+ */
+function BoldMarkdown({ text }: { text: string }) {
+  const parts: React.ReactNode[] = [];
+  let remaining = text;
+  let key = 0;
+
+  while (remaining.length > 0) {
+    const boldMatch = remaining.match(/^(.*?)\*\*([^*]+)\*\*(.*)$/);
+    if (boldMatch) {
+      if (boldMatch[1]) {
+        parts.push(<Text key={key++}>{boldMatch[1]}</Text>);
+      }
+      parts.push(
+        <Text key={key++} bold>
+          {boldMatch[2]}
+        </Text>
+      );
+      remaining = boldMatch[3];
+      continue;
+    }
+
+    parts.push(<Text key={key++}>{remaining}</Text>);
+    break;
+  }
+
+  return <>{parts}</>;
+}