@guildai/cli 0.10.0 → 0.12.0

package/dist/components/AgentInstallPrompt.js

@@ -1,97 +0,0 @@
-// Copyright 2026 Guild.ai
-// SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import chalk from 'chalk';
-// Brand color for Guild
-const brand = (text) => chalk.hex('#F97316')(text);
-/**
- * AgentInstallPrompt - Interactive prompt for agent installation requests
- *
- * Shows agent info and prompts user to approve or decline installation.
- */
-export function AgentInstallPrompt({ event, onApprove, onDecline, onComplete, }) {
-    const [state, setState] = useState('waiting');
-    const [errorMessage, setErrorMessage] = useState('');
-    useInput((input, key) => {
-        if (state !== 'waiting')
-            return;
-        const lowerInput = input.toLowerCase();
-        if (lowerInput === 'y' || key.return) {
-            // Approve
-            setState('approving');
-            onApprove()
-                .then(() => {
-                setState('approved');
-                setTimeout(onComplete, 500);
-            })
-                .catch((err) => {
-                setState('error');
-                setErrorMessage(err.message);
-                setTimeout(onComplete, 2000);
-            });
-        }
-        else if (lowerInput === 'n' || key.escape) {
-            // Decline
-            setState('declining');
-            onDecline()
-                .then(() => {
-                setState('declined');
-                setTimeout(onComplete, 500);
-            })
-                .catch((err) => {
-                setState('error');
-                setErrorMessage(err.message);
-                setTimeout(onComplete, 2000);
-            });
-        }
-    });
-    const agent = event.requested_agent;
-    // Render based on state
-    if (state === 'approved') {
-        return (React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { color: "green" },
-                " Agent \"",
-                agent.name,
-                "\" has been installed")));
-    }
-    if (state === 'declined') {
-        return (React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { dimColor: true }, " Agent installation skipped")));
-    }
-    if (state === 'error') {
-        return (React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { color: "red" },
-                " Error: ",
-                errorMessage)));
-    }
-    if (state === 'approving') {
-        return (React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { dimColor: true }, " Installing agent...")));
-    }
-    if (state === 'declining') {
-        return (React.createElement(Box, { marginY: 1 },
-            React.createElement(Text, { dimColor: true }, " Skipping...")));
-    }
-    // Waiting state - show prompt
-    return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 2, paddingY: 1 },
-            React.createElement(Text, { bold: true, color: "yellow" }, "Agent Installation Request"),
-            React.createElement(Text, null, " "),
-            React.createElement(Text, null, "The assistant found an agent that could help with your request:"),
-            React.createElement(Text, null, " "),
-            React.createElement(Box, { paddingLeft: 2, flexDirection: "column" },
-                React.createElement(Text, null,
-                    React.createElement(Text, { bold: true }, "Name:"),
-                    " ",
-                    brand(agent.name)),
-                React.createElement(Text, null,
-                    React.createElement(Text, { bold: true }, "Description:"),
-                    " ",
-                    agent.description)),
-            React.createElement(Text, null, " "),
-            React.createElement(Text, null,
-                "Install this agent? ",
-                React.createElement(Text, { dimColor: true }, "[Y/n]")))));
-}
-//# sourceMappingURL=AgentInstallPrompt.js.map

package/dist/components/SplashAnimation.js

@@ -1,321 +0,0 @@
-// Copyright 2026 Guild.ai
-// SPDX-License-Identifier: Apache-2.0
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Box, Text, useStdout, useInput } from 'ink';
-import chalk from 'chalk';
-import { getRandomMessage, LOADING_TIMINGS } from '../lib/loading-messages.js';
-import { renderLottieFrameToBraille, } from '../lib/lottie-serverside.js';
-import * as fs from 'fs';
-import * as path from 'path';
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-// Frame rate tuning
-const FRAME_INTERVAL = 33; // ~30fps
-const FADE_INTERVAL = 16; // ~60fps
-// Star/particle characters with varying brightness
-const STAR_CHARS = ['·', '✦', '✧', '⋆', '∗', '˖'];
-// Guild orange palette (matching www TetrisBlocksBackground)
-const GUILD_ORANGE_COLORS = [
-    { r: 255, g: 85, b: 0 }, // #FF5500 - Primary
-    { r: 255, g: 132, b: 64 }, // #FF8440
-    { r: 255, g: 179, b: 128 }, // #FFB380
-    { r: 255, g: 204, b: 170 }, // #FFCCAA
-];
-/**
- * Animated full-screen splash animation for Guild CLI
- * Features:
- * - SVG logo rendered to braille with fade-in effect
- * - Particle/starfield background with twinkling
- * - Rotating loading messages
- * - Full screen centered layout
- */
-export function SplashAnimation({ status, onComplete, onEscapePress, version, isFinalizing = false, }) {
-    const { stdout } = useStdout();
-    // Track terminal size with resize handler
-    const [terminalSize, setTerminalSize] = useState({
-        width: stdout?.columns || 80,
-        height: stdout?.rows || 24,
-    });
-    useEffect(() => {
-        const handleResize = () => {
-            setTerminalSize({
-                width: process.stdout.columns || 80,
-                height: process.stdout.rows || 24,
-            });
-        };
-        process.stdout.on('resize', handleResize);
-        return () => {
-            process.stdout.off('resize', handleResize);
-        };
-    }, []);
-    const width = terminalSize.width;
-    const height = terminalSize.height;
-    // All hooks must be called before any conditional returns
-    const [tick, setTick] = useState(0);
-    const [message, setMessage] = useState(getRandomMessage());
-    const [messageOpacity, setMessageOpacity] = useState(0);
-    const [particles, setParticles] = useState([]);
-    const [currentFrame, setCurrentFrame] = useState(0);
-    const [animationData, setAnimationData] = useState(null);
-    const [totalFrames, setTotalFrames] = useState(0);
-    const [renderedFrame, setRenderedFrame] = useState(null);
-    const lastRenderedFrame = useRef(-1); // Track which frame was rendered (ref to avoid state churn)
-    const renderingFrame = useRef(-1); // Track which frame is currently being rendered
-    const lastDimensions = useRef({ width: 0, height: 0 }); // Track dimensions for resize detection
-    const startTime = useRef(Date.now());
-    const messageStartTime = useRef(Date.now());
-    // Reset frame rendering when terminal dimensions change (for resize support)
-    useEffect(() => {
-        if (lastDimensions.current.width !== width ||
-            lastDimensions.current.height !== height) {
-            lastDimensions.current = { width, height };
-            // Force re-render of current frame at new dimensions
-            lastRenderedFrame.current = -1;
-            renderingFrame.current = -1;
-            setRenderedFrame(null);
-        }
-    }, [width, height]);
-    // Handle Esc key or Ctrl-C to exit splash screen early
-    useInput((input, key) => {
-        if (key.escape && onEscapePress) {
-            onEscapePress();
-        }
-        // Ctrl-C should exit the CLI entirely
-        if (input === 'c' && key.ctrl) {
-            process.exit(0);
-        }
-    });
-    // Calculate logo dimensions - use full terminal space
-    const logoWidthChars = width;
-    const logoHeightChars = height;
-    const centerX = 0;
-    const centerY = 0;
-    // Load Lottie animation data (for real-time rendering)
-    useEffect(() => {
-        const possiblePaths = [
-            path.resolve(__dirname, '../assets/logo-animation.json'),
-            path.resolve(__dirname, '../../src/assets/logo-animation.json'),
-        ];
-        let loadedData = null;
-        for (const animPath of possiblePaths) {
-            if (fs.existsSync(animPath)) {
-                const content = fs.readFileSync(animPath, 'utf-8');
-                loadedData = JSON.parse(content);
-                break;
-            }
-        }
-        if (loadedData) {
-            setAnimationData(loadedData);
-            setTotalFrames(Math.floor(loadedData.op || 0));
-            // Reset start time so animation begins from frame 0 after loading
-            startTime.current = Date.now();
-        }
-    }, []);
-    // Update current frame - sequential for intro, time-based after
-    useEffect(() => {
-        if (totalFrames === 0)
-            return;
-        const maxFrame = Math.floor(totalFrames * 0.9);
-        // For first 45 frames (1.5 sec of intro), use sequential advancement
-        // This ensures the intro animation plays smoothly without skipping
-        // After that, allow time-based advancement to catch up if needed
-        const introFrames = 45;
-        const useSequential = lastRenderedFrame.current < introFrames;
-        let targetFrame;
-        if (useSequential) {
-            // Sequential: advance as soon as previous frame has rendered
-            if (lastRenderedFrame.current >= currentFrame) {
-                targetFrame = currentFrame + 1;
-            }
-            else {
-                targetFrame = currentFrame; // Hold until render completes
-            }
-        }
-        else {
-            // Time-based: follow the clock after intro
-            const elapsed = Date.now() - startTime.current;
-            const fps = 30;
-            const frameNumber = Math.floor((elapsed / 1000) * fps);
-            targetFrame = Math.min(frameNumber, lastRenderedFrame.current + 1);
-        }
-        targetFrame = Math.min(targetFrame, maxFrame);
-        if (targetFrame >= maxFrame) {
-            // Animation complete
-            setCurrentFrame(maxFrame);
-            if (onComplete) {
-                onComplete();
-            }
-        }
-        else if (targetFrame !== currentFrame) {
-            setCurrentFrame(targetFrame);
-        }
-    }, [tick, totalFrames, onComplete, currentFrame]);
-    // Render the current frame asynchronously
-    useEffect(() => {
-        if (!animationData || currentFrame >= totalFrames)
-            return;
-        // Don't re-render a frame we've already rendered or are currently rendering
-        if (currentFrame <= lastRenderedFrame.current ||
-            currentFrame === renderingFrame.current) {
-            return;
-        }
-        // Mark this frame as being rendered
-        const frameToRender = currentFrame;
-        renderingFrame.current = frameToRender;
-        let cancelled = false;
-        renderLottieFrameToBraille(animationData, frameToRender, logoWidthChars, logoHeightChars)
-            .then((lines) => {
-            if (!cancelled && frameToRender > lastRenderedFrame.current) {
-                setRenderedFrame(lines);
-                lastRenderedFrame.current = frameToRender;
-            }
-        })
-            .catch((error) => {
-            console.error('Error rendering Lottie frame:', error);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [animationData, currentFrame, totalFrames, logoWidthChars, logoHeightChars]);
-    // Initialize particles for starfield background
-    useEffect(() => {
-        const newParticles = [];
-        const particleCount = Math.floor((width * height) / 100);
-        for (let i = 0; i < particleCount; i++) {
-            newParticles.push({
-                x: Math.random() * width,
-                y: Math.random() * height,
-                char: STAR_CHARS[Math.floor(Math.random() * STAR_CHARS.length)],
-                opacity: 0.1 + Math.random() * 0.4,
-                twinkleSpeed: 0.5 + Math.random() * 1.5,
-                twinklePhase: Math.random() * Math.PI * 2,
-                colorIndex: Math.floor(Math.random() * GUILD_ORANGE_COLORS.length),
-            });
-        }
-        setParticles(newParticles);
-    }, [width, height]);
-    // Animation loop for particle updates
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setTick((t) => t + 1);
-        }, FRAME_INTERVAL);
-        return () => clearInterval(interval);
-    }, []);
-    // Animate loading message opacity (fade in/out)
-    useEffect(() => {
-        // Start with fade in
-        messageStartTime.current = Date.now();
-        const interval = setInterval(() => {
-            const elapsed = Date.now() - messageStartTime.current;
-            const cycleTime = LOADING_TIMINGS.messageRotation;
-            const fadeTime = LOADING_TIMINGS.messageFade;
-            const position = elapsed % cycleTime;
-            if (position < fadeTime) {
-                // Fade in
-                setMessageOpacity(position / fadeTime);
-            }
-            else if (position < cycleTime - fadeTime) {
-                // Hold at full opacity
-                setMessageOpacity(1);
-            }
-            else {
-                // Fade out
-                const fadeOutProgress = (position - (cycleTime - fadeTime)) / fadeTime;
-                setMessageOpacity(1 - fadeOutProgress);
-            }
-        }, FADE_INTERVAL);
-        return () => clearInterval(interval);
-    }, []);
-    // Rotate loading messages
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setMessage(getRandomMessage());
-            messageStartTime.current = Date.now();
-            setMessageOpacity(0);
-        }, LOADING_TIMINGS.messageRotation);
-        return () => clearInterval(interval);
-    }, []);
-    // Render particles with twinkling effect
-    const renderParticles = useCallback(() => {
-        const chars = Array(height)
-            .fill(null)
-            .map(() => Array(width).fill(' '));
-        particles.forEach((p) => {
-            const x = Math.floor(p.x);
-            const y = Math.floor(p.y);
-            if (x >= 0 && x < width && y >= 0 && y < height) {
-                // Twinkle effect
-                const twinkle = Math.sin(tick * 0.1 * p.twinkleSpeed + p.twinklePhase) * 0.5 + 0.5;
-                const brightness = p.opacity * (0.3 + twinkle * 0.7);
-                // Edge fade (vignette effect)
-                const distFromCenterX = Math.abs(x - width / 2) / (width / 2);
-                const distFromCenterY = Math.abs(y - height / 2) / (height / 2);
-                const distFromCenter = Math.sqrt(distFromCenterX * distFromCenterX + distFromCenterY * distFromCenterY);
-                const edgeFade = Math.max(0, 1 - distFromCenter * 0.8);
-                const finalBrightness = brightness * edgeFade;
-                if (finalBrightness > 0.1) {
-                    // Use Guild orange colors instead of grayscale
-                    const color = GUILD_ORANGE_COLORS[p.colorIndex];
-                    const r = Math.floor(color.r * finalBrightness);
-                    const g = Math.floor(color.g * finalBrightness);
-                    const b = Math.floor(color.b * finalBrightness);
-                    chars[y][x] = chalk.rgb(r, g, b)(p.char);
-                }
-            }
-        });
-        return chars;
-    }, [particles, tick, width, height]);
-    // Render the Lottie frame (uses pre-rendered frame from state)
-    const renderLogo = useCallback((chars) => {
-        // Don't render until we have a rendered frame
-        if (!renderedFrame)
-            return;
-        renderedFrame.forEach((line, row) => {
-            const y = centerY + row;
-            if (y >= 0 && y < height) {
-                [...line].forEach((char, col) => {
-                    const x = centerX + col;
-                    if (x >= 0 && x < width && char !== '⠀') {
-                        // Use default terminal text color for compatibility with all themes
-                        chars[y][x] = char;
-                    }
-                });
-            }
-        });
-    }, [centerX, centerY, width, height, renderedFrame]);
-    // Build the frame
-    const chars = renderParticles();
-    renderLogo(chars);
-    // Convert to lines
-    const lines = chars.map((row) => row.join(''));
-    // Message positions
-    // Rotating messages: below logo (about 75% down the screen)
-    // Status ticker: near the bottom
-    const loadingMessageY = Math.floor(height * 0.68);
-    const statusY = height - 2;
-    // Apply opacity for fade effect
-    // Use a range that works on both light and dark terminals
-    const applyOpacity = (text, opacity) => {
-        // Map opacity 0-1 to grayscale range 150-255 for better visibility on dark backgrounds
-        const minBrightness = 150;
-        const maxBrightness = 255;
-        const gray = Math.floor(minBrightness + opacity * (maxBrightness - minBrightness));
-        return chalk.rgb(gray, gray, gray)(text);
-    };
-    // When finalizing, show final frame with version text (no status line)
-    if (isFinalizing) {
-        const versionText = version ? `Guild CLI v${version}` : 'Guild CLI';
-        return (React.createElement(Box, { flexDirection: "column", width: width, height: height },
-            lines.map((line, i) => (React.createElement(Text, { key: i }, line))),
-            React.createElement(Box, { position: "absolute", marginTop: loadingMessageY, width: width, justifyContent: "center" },
-                React.createElement(Text, null, chalk.bold(versionText)))));
-    }
-    return (React.createElement(Box, { flexDirection: "column", width: width, height: height },
-        lines.map((line, i) => (React.createElement(Text, { key: i }, line))),
-        React.createElement(Box, { position: "absolute", marginTop: statusY, width: width, justifyContent: "center" },
-            React.createElement(Text, null, chalk.dim(status))),
-        React.createElement(Box, { position: "absolute", marginTop: loadingMessageY, width: width, justifyContent: "center" },
-            React.createElement(Text, null, applyOpacity(message, messageOpacity)))));
-}
-//# sourceMappingURL=SplashAnimation.js.map

package/dist/components/TaskView.js

@@ -1,268 +0,0 @@
-// Copyright 2026 Guild.ai
-// SPDX-License-Identifier: Apache-2.0
-import React, { useState, useEffect } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { getTaskDisplayName, isFilteredTaskName, } from '../lib/session-events.js';
-// Status colors (matching web: bg-status-* Tailwind classes)
-const STATUS_COLORS = {
-    CREATED: '#6b7280', // gray (pending)
-    STARTED: '#6b7280', // gray (pending)
-    RUNNING: '#3b82f6', // blue (info)
-    WAITING: '#b8860b', // dark goldenrod (readable on light and dark terminals)
-    DONE: '#22c55e', // green (success)
-    ERROR: '#ef4444', // red (error)
-    INTERRUPTED: '#b8860b', // dark goldenrod (warning)
-};
-// Status icons (for completed/static states)
-const STATUS_ICONS = {
-    CREATED: '○',
-    STARTED: '○',
-    RUNNING: '●',
-    WAITING: '◐',
-    DONE: '✓',
-    ERROR: '✗',
-    INTERRUPTED: '⊘',
-};
-// Animation frames for running tasks (alternates between empty and filled)
-const RUNNING_ANIMATION_FRAMES = ['○', '●'];
-const RUNNING_ANIMATION_INTERVAL_MS = 1000; // Toggle every 1s
-// Show this many completed tasks before collapsing the rest
-const VISIBLE_COMPLETED_COUNT = 5;
-/**
- * Get status color for a task
- */
-export function getStatusColor(status) {
-    return STATUS_COLORS[status] || STATUS_COLORS.CREATED;
-}
-/**
- * Get status icon for a task
- */
-export function getStatusIcon(status) {
-    return STATUS_ICONS[status] || STATUS_ICONS.CREATED;
-}
-/**
- * Check if a task status is "active" (not completed)
- */
-function isActiveStatus(status) {
-    return (status === 'CREATED' ||
-        status === 'STARTED' ||
-        status === 'RUNNING' ||
-        status === 'WAITING');
-}
-/**
- * Check if a task is completed (done or error)
- */
-function isCompletedStatus(status) {
-    return status === 'DONE' || status === 'ERROR';
-}
-/**
- * Format task duration in compact form
- * For completed tasks: duration from created_at to updated_at
- * For active tasks: elapsed time since created_at
- * Returns empty string for very short durations (<5s)
- */
-function formatTaskDuration(task) {
-    const createdAt = new Date(task.created_at);
-    const endTime = isActiveStatus(task.status) ? new Date() : new Date(task.updated_at);
-    const diffMs = endTime.getTime() - createdAt.getTime();
-    const diffSec = Math.floor(diffMs / 1000);
-    const diffMin = Math.floor(diffSec / 60);
-    const diffHr = Math.floor(diffMin / 60);
-    if (diffSec < 5)
-        return '';
-    if (diffSec < 60)
-        return `${diffSec}s`;
-    if (diffMin < 60)
-        return `${diffMin}m`;
-    if (diffHr < 24)
-        return `${diffHr}h`;
-    return createdAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-}
-/**
- * Calculate depth for each task based on parent chain
- * Returns a Map of task ID -> depth (0 for root tasks)
- */
-function calculateTaskDepths(tasks) {
-    const depthMap = new Map();
-    const taskMap = new Map(tasks.map((t) => [t.id, t]));
-    function getDepth(taskId) {
-        if (depthMap.has(taskId))
-            return depthMap.get(taskId) ?? 0;
-        const task = taskMap.get(taskId);
-        const parentId = task?.parent_task?.id;
-        if (!parentId) {
-            depthMap.set(taskId, 0);
-            return 0;
-        }
-        const parentDepth = getDepth(parentId);
-        const depth = parentDepth + 1;
-        depthMap.set(taskId, depth);
-        return depth;
-    }
-    tasks.forEach((t) => getDepth(t.id));
-    return depthMap;
-}
-/**
- * TaskView - Hierarchical task tree display (matching web SessionDetailsSidebar)
- *
- * Shows tasks in a tree format with colored status dots:
- *   ● assistant                              19s
- *   └ ✓ coding                               15s
- *
- * Features:
- * - Tree prefixes (└) for child tasks
- * - Colored status dots (gray=pending, blue=running, yellow=waiting, green=done, red=error)
- * - Animated icons for running tasks (alternates between ○ and ●)
- * - Duration display (elapsed for active, final for completed)
- * - Collapsible completed tasks (Ctrl+O to expand/collapse)
- */
-export function TaskView({ tasks }) {
-    // Animation state for running tasks
-    const [animationFrame, setAnimationFrame] = useState(0);
-    // Expanded state for completed tasks
-    const [expanded, setExpanded] = useState(false);
-    // Handle Ctrl+O to toggle expand/collapse
-    useInput((input, key) => {
-        if (input === 'o' && key.ctrl) {
-            setExpanded((e) => !e);
-        }
-    });
-    // Check if we have any running tasks that need animation
-    const hasRunningTasks = tasks.some((t) => t.status === 'RUNNING' || t.status === 'STARTED');
-    // Animate running task icons
-    useEffect(() => {
-        if (!hasRunningTasks)
-            return;
-        const interval = setInterval(() => {
-            setAnimationFrame((f) => (f + 1) % RUNNING_ANIMATION_FRAMES.length);
-        }, RUNNING_ANIMATION_INTERVAL_MS);
-        return () => clearInterval(interval);
-    }, [hasRunningTasks]);
-    if (tasks.length === 0)
-        return null;
-    // Filter out internal tasks (ui_prompt, etc.)
-    const filteredTasks = tasks.filter((task) => {
-        const name = getTaskDisplayName(task);
-        return !isFilteredTaskName(name);
-    });
-    if (filteredTasks.length === 0)
-        return null;
-    // Sort by created_at (chronological order like web)
-    const sortedTasks = [...filteredTasks].sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
-    // Calculate depth for each task
-    const depthMap = calculateTaskDepths(sortedTasks);
-    // Build display items (collapsing completed tasks when not expanded)
-    const displayItems = [];
-    if (expanded) {
-        // Show all tasks when expanded
-        sortedTasks.forEach((task) => {
-            displayItems.push({ type: 'task', task, depth: depthMap.get(task.id) || 0 });
-        });
-    }
-    else {
-        // Group tasks by parent and collapse completed ones
-        const tasksByParent = new Map();
-        sortedTasks.forEach((task) => {
-            const parentId = task.parent_task?.id || null;
-            if (!tasksByParent.has(parentId)) {
-                tasksByParent.set(parentId, []);
-            }
-            tasksByParent.get(parentId)?.push(task);
-        });
-        // Process root tasks first, then children
-        const processedIds = new Set();
-        const processTasksAtLevel = (parentId) => {
-            const tasksAtLevel = tasksByParent.get(parentId) || [];
-            // Separate active and completed tasks
-            const activeTasks = tasksAtLevel.filter((t) => !isCompletedStatus(t.status));
-            const completedTasks = tasksAtLevel.filter((t) => isCompletedStatus(t.status));
-            // Always show active tasks
-            activeTasks.forEach((task) => {
-                if (!processedIds.has(task.id)) {
-                    processedIds.add(task.id);
-                    displayItems.push({ type: 'task', task, depth: depthMap.get(task.id) || 0 });
-                    // Process children of this task
-                    processTasksAtLevel(task.id);
-                }
-            });
-            // For completed tasks: show first N, then collapse the rest
-            const visibleCompleted = completedTasks.slice(0, VISIBLE_COMPLETED_COUNT);
-            const hiddenCompleted = completedTasks.slice(VISIBLE_COMPLETED_COUNT);
-            // Show visible completed tasks
-            visibleCompleted.forEach((task) => {
-                if (!processedIds.has(task.id)) {
-                    processedIds.add(task.id);
-                    displayItems.push({
-                        type: 'task',
-                        task,
-                        depth: depthMap.get(task.id) || 0,
-                    });
-                    // Process children of this task
-                    processTasksAtLevel(task.id);
-                }
-            });
-            // Show collapsed summary for hidden tasks
-            if (hiddenCompleted.length > 0) {
-                const depth = hiddenCompleted[0] ? depthMap.get(hiddenCompleted[0].id) || 0 : 1;
-                displayItems.push({ type: 'collapsed', count: hiddenCompleted.length, depth });
-                hiddenCompleted.forEach((t) => processedIds.add(t.id));
-            }
-        };
-        processTasksAtLevel(null);
-    }
-    // Count total collapsed tasks for the hint
-    const totalCompletedTasks = sortedTasks.filter((t) => isCompletedStatus(t.status)).length;
-    const hasCollapsedTasks = totalCompletedTasks > VISIBLE_COMPLETED_COUNT;
-    return (React.createElement(Box, { flexDirection: "column" },
-        displayItems.map((item, index) => {
-            if (item.type === 'collapsed') {
-                const indent = '  '.repeat(item.depth);
-                const treeChar = item.depth > 0 ? '└ ' : '';
-                return (React.createElement(Box, { key: `collapsed-${index}` },
-                    React.createElement(Text, { dimColor: true },
-                        indent,
-                        treeChar,
-                        "\u2026 +",
-                        item.count,
-                        " more",
-                        ' '),
-                    React.createElement(Text, { dimColor: true }, "(ctrl+o to expand)")));
-            }
-            const task = item.task;
-            const name = getTaskDisplayName(task);
-            const status = task.status;
-            const statusColor = STATUS_COLORS[status] || STATUS_COLORS.CREATED;
-            const depth = item.depth;
-            const duration = formatTaskDuration(task);
-            // Animate running/started tasks, static icon for others
-            const icon = status === 'RUNNING' || status === 'STARTED'
-                ? RUNNING_ANIMATION_FRAMES[animationFrame]
-                : STATUS_ICONS[status];
-            // Tree structure: indent based on depth, show └ for children
-            const indent = '  '.repeat(depth);
-            const treeChar = depth > 0 ? '└ ' : '';
-            // Hide duration for root tasks (depth 0) - they run for entire session
-            const showDuration = depth > 0 && duration;
-            return (React.createElement(Box, { key: task.id },
-                React.createElement(Text, { dimColor: true },
-                    indent,
-                    treeChar),
-                React.createElement(Text, { color: statusColor }, icon),
-                React.createElement(Text, null,
-                    " ",
-                    name),
-                showDuration && React.createElement(Text, { dimColor: true },
-                    " (",
-                    duration,
-                    ")")));
-        }),
-        expanded && hasCollapsedTasks && (React.createElement(Box, null,
-            React.createElement(Text, { dimColor: true }, " (ctrl+o to collapse)")))));
-}
-/**
- * Check if any task is active (not completed)
- */
-export function hasActiveTasks(tasks) {
-    return tasks.some((t) => isActiveStatus(t.status));
-}
-//# sourceMappingURL=TaskView.js.map