jira-pilot 2.1.2 → 2.2.0

package/src/tui/App.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Dashboard from './screens/Dashboard.js';
+import IssueList from './screens/IssueList.js';
+import BoardList from './screens/BoardList.js';
+
+type View = 'dashboard' | 'issues' | 'boards';
+
+export default function App() {
+    const [view, setView] = useState<View>('dashboard');
+    const [activeTab, setActiveTab] = useState(0);
+    const tabs: View[] = ['dashboard', 'issues', 'boards'];
+
+    useInput((input, key) => {
+        if (key.leftArrow) {
+            setActiveTab(prev => Math.max(0, prev - 1));
+            setView(tabs[Math.max(0, activeTab - 1)]);
+        }
+        if (key.rightArrow) {
+            setActiveTab(prev => Math.min(tabs.length - 1, prev + 1));
+            setView(tabs[Math.min(tabs.length - 1, activeTab + 1)]);
+        }
+        if (input === 'q') {
+            process.exit(0);
+        }
+    });
+
+    return (
+        <Box flexDirection="column" height="100%">
+            {/* Header */}
+            <Box borderStyle="classic" borderColor="blue" paddingX={1}>
+                <Text bold color="blue">Jira Pilot</Text>
+                <Box marginLeft={2} flexDirection="column" justifyContent="center">
+                    <Text>Use <Text color="green">←/→</Text> to navigate tabs. Press <Text color="red">q</Text> to quit.</Text>
+                </Box>
+            </Box>
+
+            {/* Tabs */}
+            <Box paddingX={1} marginBottom={1}>
+                {tabs.map((tab, index) => (
+                    <Box key={tab} marginRight={2}>
+                        <Text
+                            color={activeTab === index ? 'green' : 'white'}
+                            bold={activeTab === index}
+                            underline={activeTab === index}
+                        >
+                            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                        </Text>
+                    </Box>
+                ))}
+            </Box>
+
+            {/* Content Area */}
+            <Box flexGrow={1} borderStyle="round" padding={1} borderColor="gray">
+                {view === 'dashboard' && <Dashboard />}
+                {view === 'issues' && <IssueList />}
+                {view === 'boards' && <BoardList />}
+            </Box>
+        </Box>
+    );
+}

package/src/tui/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from 'ink';
+import App from './App.js';
+
+export function startTui() {
+    console.clear();
+    render(<App />);
+}

package/src/tui/screens/BoardList.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import SpinnerOriginal from 'ink-spinner';
+const Spinner = SpinnerOriginal as any;
+import { api } from '../../services/api-service.js';
+import KanbanBoard from './KanbanBoard.js';
+
+export default function BoardList() {
+    const [loading, setLoading] = useState(true);
+    const [boards, setBoards] = useState<any[]>([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [selectedBoardId, setSelectedBoardId] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchBoards = async () => {
+            try {
+                const results = await api.agileGet('/board');
+                setBoards(results.values);
+                setLoading(false);
+            } catch (err: any) {
+                setError(err.message);
+                setLoading(false);
+            }
+        };
+        fetchBoards();
+    }, []);
+
+    useInput((input, key) => {
+        if (selectedBoardId) return;
+
+        if (key.upArrow) {
+            setSelectedIndex((prev: number) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev: number) => Math.min(boards.length - 1, prev + 1));
+        }
+        if (key.return) {
+            if (boards[selectedIndex]) {
+                setSelectedBoardId(boards[selectedIndex].id);
+            }
+        }
+    });
+
+    if (selectedBoardId) {
+        return <KanbanBoard boardId={selectedBoardId} onBack={() => setSelectedBoardId(null)} />;
+    }
+
+    if (loading) {
+        return (
+            <Box>
+                <Text color="green"><Spinner type="dots" /></Text>
+                <Text> Loading Boards...</Text>
+            </Box>
+        );
+    }
+
+    if (error) {
+        return <Text color="red">Error: {error}</Text>;
+    }
+
+    if (boards.length === 0) {
+        return <Text>No boards found.</Text>;
+    }
+
+    const windowSize = 15;
+    const halfWindow = Math.floor(windowSize / 2);
+
+    // Ensure the selected item is always visible
+    let start = 0;
+    if (selectedIndex > halfWindow) {
+        start = Math.min(selectedIndex - halfWindow, boards.length - windowSize);
+    }
+    start = Math.max(0, start);
+    const end = Math.min(boards.length, start + windowSize);
+
+    const visibleBoards = boards.slice(start, end);
+
+    return (
+        <Box flexDirection="column">
+            <Box marginBottom={1}>
+                <Text bold underline>Select a Board ({selectedIndex + 1}/{boards.length})</Text>
+            </Box>
+
+            {visibleBoards.map((board: any, index: number) => {
+                const globalIndex = start + index;
+                const isSelected = globalIndex === selectedIndex;
+
+                return (
+                    <Box key={board.id}>
+                        <Text color={isSelected ? 'green' : 'white'} bold={isSelected}>
+                            {isSelected ? '> ' : '  '}
+                        </Text>
+                        <Text color={isSelected ? 'green' : 'white'}>
+                            {board.name} ({board.type})
+                        </Text>
+                    </Box>
+                );
+            })}
+        </Box>
+    );
+}

package/src/tui/screens/Dashboard.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import SpinnerOriginal from 'ink-spinner';
+const Spinner = SpinnerOriginal as any;
+import { api } from '../../services/api-service.js';
+
+export default function Dashboard() {
+    const [loading, setLoading] = useState(true);
+    const [user, setUser] = useState<any>(null);
+    const [issueCount, setIssueCount] = useState<number>(0);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                // Fetch issue count (maxResults must be >= 1)
+                const searchResults = await api.search(
+                    `assignee = currentUser() AND resolution = Unresolved`,
+                    0,
+                    1
+                );
+                const myself = await api.get('/myself');
+
+                setUser(myself);
+                setIssueCount(searchResults.total);
+                setLoading(false);
+            } catch (err: any) {
+                // detailed error inspection
+                const msg = err.response
+                    ? `API Error ${err.response.status}: ${JSON.stringify(err.response.data)}`
+                    : err.message || JSON.stringify(err);
+                setError(msg);
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    if (loading) {
+        return (
+            <Box>
+                <Text color="green"><Spinner type="dots" /></Text>
+                <Text> Loading Dashboard...</Text>
+            </Box>
+        );
+    }
+
+    if (error) {
+        return (
+            <Box flexDirection="column" borderColor="red" borderStyle="round" padding={1}>
+                <Text color="red" bold>Error Loading Dashboard:</Text>
+                <Text color="red">{error}</Text>
+                <Box marginTop={1}>
+                    <Text color="gray">
+                        Tip: Check your internet connection and run `jira config` to verify credentials.
+                    </Text>
+                </Box>
+            </Box>
+        );
+    }
+
+    return (
+        <Box flexDirection="column">
+            <Text bold>Welcome back, {user?.displayName}!</Text>
+            <Box marginTop={1} borderStyle="single" padding={1} borderColor="yellow">
+                <Text>You have <Text bold color="red">{issueCount}</Text> unresolved issues assigned to you.</Text>
+            </Box>
+
+            <Box marginTop={1}>
+                <Text color="gray">Press ←/→ to navigate. Try the 'Issues' tab to see details.</Text>
+            </Box>
+        </Box>
+    );
+}

package/src/tui/screens/IssueDetail.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import SpinnerOriginal from 'ink-spinner';
+const Spinner = SpinnerOriginal as any;
+import { api } from '../../services/api-service.js';
+import { renderADF } from '../utils/adf-render.js';
+
+interface IssueDetailProps {
+    issueKey: string;
+    onBack: () => void;
+}
+
+export default function IssueDetail({ issueKey, onBack }: IssueDetailProps) {
+    const [loading, setLoading] = useState(true);
+    const [issue, setIssue] = useState<any>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchIssue = async () => {
+            try {
+                const results = await api.get(`/issue/${issueKey}`);
+                setIssue(results);
+                setLoading(false);
+            } catch (err: any) {
+                setError(err.message);
+                setLoading(false);
+            }
+        };
+        fetchIssue();
+    }, [issueKey]);
+
+    useInput((input, key) => {
+        if (key.escape || input === 'b') {
+            onBack();
+        }
+    });
+
+    if (loading) {
+        return (
+            <Box>
+                <Text color="green"><Spinner type="dots" /></Text>
+                <Text> Loading Issue {issueKey}...</Text>
+            </Box>
+        );
+    }
+
+    if (error) {
+        return <Text color="red">Error: {error}</Text>;
+    }
+
+    const { summary, description, status, priority, assignee, reporter, comment } = issue.fields;
+
+    return (
+        <Box flexDirection="column" padding={1} borderStyle="single">
+            <Box marginBottom={1}>
+                <Text bold color="cyan">{issue.key}: {summary}</Text>
+            </Box>
+
+            <Box flexDirection="row" marginBottom={1}>
+                <Box width="50%">
+                    <Text><Text bold>Status:</Text> {status.name}</Text>
+                    <Text><Text bold>Priority:</Text> {priority.name}</Text>
+                </Box>
+                <Box width="50%">
+                    <Text><Text bold>Assignee:</Text> {assignee ? assignee.displayName : 'Unassigned'}</Text>
+                    <Text><Text bold>Reporter:</Text> {reporter ? reporter.displayName : 'Unknown'}</Text>
+                </Box>
+            </Box>
+
+
+            <Box marginBottom={1}>
+                <Text bold underline>Description:</Text>
+                <Text>{renderADF(description) || 'No description provided.'}</Text>
+            </Box>
+
+            {comment && comment.comments && comment.comments.length > 0 && (
+                <Box flexDirection="column" marginTop={1}>
+                    <Text bold underline>Comments ({comment.total}):</Text>
+                    {comment.comments.slice(-3).map((c: any) => (
+                        <Box key={c.id} borderStyle="round" borderColor="gray" padding={1} marginTop={1}>
+                            <Text bold color="blue">{c.author.displayName}:</Text>
+                            <Text>{renderADF(c.body)}</Text>
+                        </Box>
+                    ))}
+                </Box>
+            )}
+
+            <Box marginTop={1}>
+                <Text color="gray">Press <Text bold>Esc</Text> or <Text bold>b</Text> to go back.</Text>
+            </Box>
+        </Box>
+    );
+}

package/src/tui/screens/IssueList.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import SpinnerOriginal from 'ink-spinner';
+const Spinner = SpinnerOriginal as any;
+import { api } from '../../services/api-service.js';
+import IssueDetail from './IssueDetail.js';
+
+export default function IssueList() {
+    const [loading, setLoading] = useState(true);
+    const [issues, setIssues] = useState<any[]>([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [selectedIssueKey, setSelectedIssueKey] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchIssues = async () => {
+            try {
+                // Default search: Assigned to me or reported by me, unresolved
+                const results = await api.search('assignee = currentUser() OR reporter = currentUser() AND resolution = Unresolved order by updated DESC', 0, 20);
+                setIssues(results.issues);
+                setLoading(false);
+            } catch (err: any) {
+                setError(err.message);
+                setLoading(false);
+            }
+        };
+        fetchIssues();
+    }, []);
+
+    useInput((input, key) => {
+        if (selectedIssueKey) return; // Let Detail view handle input if active
+
+        if (key.upArrow) {
+            setSelectedIndex((prev: number) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev: number) => Math.min(issues.length - 1, prev + 1));
+        }
+        if (key.return) {
+            if (issues[selectedIndex]) {
+                setSelectedIssueKey(issues[selectedIndex].key);
+            }
+        }
+    });
+
+    if (selectedIssueKey) {
+        return <IssueDetail issueKey={selectedIssueKey} onBack={() => setSelectedIssueKey(null)} />;
+    }
+
+    if (loading) {
+        return (
+            <Box>
+                <Text color="green"><Spinner type="dots" /></Text>
+                <Text> Loading Issues...</Text>
+            </Box>
+        );
+    }
+    // ... rest of the file ...
+
+    if (error) {
+        return <Text color="red">Error: {error}</Text>;
+    }
+
+    if (issues.length === 0) {
+        return <Text>No issues found.</Text>;
+    }
+
+    // Pagination/Windowing logic could go here, for now just slice a window around selected
+    const windowSize = 10;
+    const start = Math.max(0, selectedIndex - Math.floor(windowSize / 2));
+    const end = Math.min(issues.length, start + windowSize);
+    const visibleIssues = issues.slice(start, end);
+
+    return (
+        <Box flexDirection="column">
+            <Box marginBottom={1}>
+                <Text bold underline>Issue Navigator ({issues.length})</Text>
+            </Box>
+
+            {visibleIssues.map((issue: any, index: number) => {
+                const globalIndex = start + index;
+                const isSelected = globalIndex === selectedIndex;
+                const key = issue.key;
+                const summary = issue.fields.summary;
+                const status = issue.fields.status.name;
+                const priority = issue.fields.priority.name;
+
+                return (
+                    <Box key={issue.id}>
+                        <Text color={isSelected ? 'green' : 'white'} bold={isSelected}>
+                            {isSelected ? '> ' : '  '}
+                        </Text>
+                        <Box width={12}>
+                            <Text color="cyan">{key}</Text>
+                        </Box>
+                        <Box width={12}>
+                            <Text color="yellow">{status}</Text>
+                        </Box>
+                        <Box width={10}>
+                            <Text color="magenta">{priority}</Text>
+                        </Box>
+                        <Box flexGrow={1}>
+                            <Text wrap="truncate-end">{summary}</Text>
+                        </Box>
+                    </Box>
+                );
+            })}
+
+            <Box marginTop={1} borderStyle="single" borderColor="gray">
+                <Text color="gray">
+                    Selected: {issues[selectedIndex]?.key} - {issues[selectedIndex]?.fields?.summary}
+                </Text>
+            </Box>
+        </Box>
+    );
+}

package/src/tui/screens/KanbanBoard.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import SpinnerOriginal from 'ink-spinner';
+const Spinner = SpinnerOriginal as any;
+import { api } from '../../services/api-service.js';
+
+interface KanbanBoardProps {
+    boardId: string;
+    onBack: () => void;
+}
+
+export default function KanbanBoard({ boardId, onBack }: KanbanBoardProps) {
+    const [loading, setLoading] = useState(true);
+    const [columns, setColumns] = useState<any[]>([]);
+    const [issues, setIssues] = useState<Record<string, any[]>>({});
+    const [activeColumnIndex, setActiveColumnIndex] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                // parallel fetch
+                const [config, boardIssues] = await Promise.all([
+                    api.agileGet(`/board/${boardId}/configuration`),
+                    api.agileGet(`/board/${boardId}/issue`)
+                ]);
+
+                const cols = config.columnConfig.columns;
+                setColumns(cols);
+
+                // Group issues by status/column
+                // This is simplified mapping logic. Jira statuses map to columns.
+                const issuesByStatus: Record<string, any[]> = {};
+                cols.forEach((col: any) => {
+                    issuesByStatus[col.name] = [];
+                });
+
+                boardIssues.issues.forEach((issue: any) => {
+                    const statusName = issue.fields.status.name;
+                    // Find which column this status belongs to involves checking config.columnConfig.columns[i].statuses
+                    // For now, let's just try to match column name or push to 'Other'
+                    let placed = false;
+                    for (const col of cols) {
+                        // Check if status in column statuses
+                        // config.columnConfig.columns structure: { name: 'To Do', statuses: [ { id: '10000', self: '...' } ] }
+                        if (col.statuses && col.statuses.some((s: any) => s.id === issue.fields.status.id)) {
+                            if (!issuesByStatus[col.name]) issuesByStatus[col.name] = [];
+                            issuesByStatus[col.name].push(issue);
+                            placed = true;
+                            break;
+                        }
+                    }
+                    if (!placed) {
+                        // fallback: try direct name match
+                        if (issuesByStatus[statusName]) {
+                            issuesByStatus[statusName].push(issue);
+                        }
+                    }
+                });
+
+                setIssues(issuesByStatus);
+                setLoading(false);
+            } catch (err: any) {
+                setError(err.message);
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [boardId]);
+
+    useInput((input, key) => {
+        if (key.escape || input === 'b') {
+            onBack();
+        }
+        if (key.leftArrow) {
+            setActiveColumnIndex((prev: number) => Math.max(0, prev - 1));
+        }
+        if (key.rightArrow) {
+            setActiveColumnIndex((prev: number) => Math.min(columns.length - 1, prev + 1));
+        }
+    });
+
+    if (loading) {
+        return (
+            <Box>
+                <Text color="green"><Spinner type="dots" /></Text>
+                <Text> Loading Board...</Text>
+            </Box>
+        );
+    }
+
+    if (error) {
+        return <Text color="red">Error: {error}</Text>;
+    }
+
+    return (
+        <Box flexDirection="column" height="100%">
+            <Box marginBottom={1}>
+                <Text>Board View (Use ←/→ to switch columns, Esc to back)</Text>
+            </Box>
+
+            <Box flexDirection="row" flexGrow={1}>
+                {columns.map((col: any, index: number) => {
+                    const isActive = index === activeColumnIndex;
+                    const colIssues = issues[col.name] || [];
+
+                    return (
+                        <Box
+                            key={col.name}
+                            flexDirection="column"
+                            width={30}
+                            borderStyle={isActive ? 'double' : 'single'}
+                            borderColor={isActive ? 'green' : 'gray'}
+                            marginRight={1}
+                            paddingX={1}
+                        >
+                            <Box marginBottom={1} borderStyle="single" borderBottom={false} borderLeft={false} borderRight={false} borderTop={false}>
+                                <Text bold underline color={isActive ? 'green' : 'white'}>{col.name} ({colIssues.length})</Text>
+                            </Box>
+
+                            {colIssues.slice(0, 10).map((issue: any) => ( // Limit simplified list
+                                <Box key={issue.id} marginBottom={1}>
+                                    <Text color="cyan">{issue.key}</Text>
+                                    <Text wrap="truncate">{issue.fields.summary}</Text>
+                                </Box>
+                            ))}
+                        </Box>
+                    );
+                })}
+            </Box>
+        </Box>
+    );
+}

package/src/tui/utils/adf-render.ts

@@ -0,0 +1,30 @@
+
+export function renderADF(node: any): string {
+    if (!node) return '';
+    if (typeof node === 'string') return node;
+
+    // Handle text nodes
+    if (node.type === 'text') {
+        return node.text || '';
+    }
+
+    // Handle content arrays
+    if (node.content && Array.isArray(node.content)) {
+        return node.content.map(renderADF).join('');
+    }
+
+    // Handle specific block types (optional formatting)
+    switch (node.type) {
+        case 'paragraph':
+            return renderADF({ content: node.content }) + '\n';
+        case 'bulletList':
+        case 'orderedList':
+            return renderADF({ content: node.content });
+        case 'listItem':
+            return '• ' + renderADF({ content: node.content });
+        case 'hardBreak':
+            return '\n';
+        default:
+            return '';
+    }
+}

package/src/utils/api-paths.ts

@@ -0,0 +1,32 @@
+
+export const API = {
+    SEARCH: {
+        JQL: '/search/jql',
+    },
+    ISSUE: {
+        BASE: '/issue',
+        GET: (key: string) => `/issue/${key}`,
+        TRANSITIONS: (key: string) => `/issue/${key}/transitions`,
+        COMMENT: (key: string) => `/issue/${key}/comment`,
+        ASSIGNEE: (key: string) => `/issue/${key}/assignee`,
+        WORKLOG: (key: string) => `/issue/${key}/worklog`,
+        ATTACHMENTS: (key: string) => `/issue/${key}/attachments`,
+        CREATEMETA: (projectKey: string) => `/issue/createmeta/${projectKey}/issuetypes`,
+    },
+    PROJECT: {
+        SEARCH: '/project/search',
+        GET: (key: string) => `/project/${key}`,
+        COMPONENTS: (key: string) => `/project/${key}/components`,
+        VERSIONS: (key: string) => `/project/${key}/versions`,
+    },
+    USER: {
+        MYSELF: '/myself',
+        SEARCH: '/user/search',
+    },
+    PRIORITY: {
+        ALL: '/priority',
+    },
+    SERVER: {
+        INFO: '/serverInfo',
+    }
+};

package/src/utils/error-handler.ts

@@ -1,5 +1,5 @@
 import chalk from 'chalk';
-import { Ora } from 'ora';
+import { Spinner } from './spinner.js';
 
 /**
  * Standardized error handler for CLI commands.
@@ -9,7 +9,7 @@ import { Ora } from 'ora';
  * @param {Error} error - The error object
  * @param {string} [context] - Optional context (e.g., "Failed to list issues")
  */
-export function handleCommandError(spinner: Ora | null, error: any, context = 'Operation failed') {
+export function handleCommandError(spinner: Spinner | null, error: any, context = 'Operation failed') {
     // Handle user cancellation (Ctrl+C in enquirer)
     if (error === '' || (error && error.message === '')) {
         if (spinner) spinner.stop();