@hartvig/developer-control-center 0.8.2

package/src/ui/command-list.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ProkomCommand } from '../config/types.js';
+import { TaskState } from '../status/types.js';
+import { Panel } from './panel.js';
+
+export interface MenuGroup {
+  id: string;
+  label: string;
+  count: number;
+}
+
+export interface ProfileOption {
+  kind: 'profile';
+  id: string;
+  label: string;
+  profile?: string;
+  active: boolean;
+}
+
+export type MenuItem = ProkomCommand | MenuGroup | ProfileOption;
+
+interface CommandListProps {
+  items: MenuItem[];
+  selectedIndex: number;
+  multiSelected?: Set<string>;
+  selCount?: number;
+  breadcrumb?: string;
+  tasks?: ReadonlyMap<string, TaskState>;
+  width: number;
+  focused?: boolean;
+  menuRows: number;
+}
+
+function isGroup(item: MenuItem): item is MenuGroup {
+  return 'count' in item;
+}
+
+function isProfileOption(item: MenuItem): item is ProfileOption {
+  return 'kind' in item && item.kind === 'profile';
+}
+
+export const CommandList: React.FC<CommandListProps> = ({
+  items,
+  selectedIndex,
+  multiSelected,
+  selCount,
+  breadcrumb,
+  tasks,
+  width,
+  focused = false,
+  menuRows,
+}) => {
+  const contentRows = menuRows;
+  const panelHeight = menuRows + 2;
+  const total = items.length;
+  const noCommands = total === 0;
+
+  const half = Math.floor(contentRows / 2);
+  let start = Math.max(0, selectedIndex - half);
+  start = Math.min(start, Math.max(0, total - contentRows));
+  const visible = items.slice(start, start + contentRows);
+  const hiddenAbove = start;
+  const hiddenBelow = total - (start + visible.length);
+  const padRows = Math.max(0, contentRows - visible.length - (noCommands ? 1 : 0));
+
+  function getLabel(item: ProkomCommand): string {
+    if (!item.toggle) return item.label;
+    const task = tasks?.get(item.id);
+    return task?.status === 'running' ? `Stop ${item.label}` : `Start ${item.label}`;
+  }
+
+  return (
+    <Panel
+      title="Commands"
+      titleColor={focused ? 'cyan' : 'white'}
+      borderColor={focused ? 'cyan' : 'white'}
+      height={panelHeight}
+      width={width}
+      hiddenAbove={hiddenAbove}
+      hiddenBelow={hiddenBelow}
+      titleExtraWidth={(selCount && selCount > 0 ? ` (${selCount} selected)`.length : 0) + (breadcrumb ? ` ${breadcrumb}`.length : 0)}
+      titleExtra={(
+        <>
+          {selCount && selCount > 0 ? (
+            <Text color="green"> ({selCount} selected)</Text>
+          ) : null}
+          {breadcrumb ? (
+            <Text color="gray"> {breadcrumb}</Text>
+          ) : null}
+        </>
+      )}
+    >
+      {total === 0 && (
+        <Box paddingLeft={1}>
+          <Text color="gray">No commands configured</Text>
+        </Box>
+      )}
+      {visible.map((item, i) => {
+        const actualIndex = start + i;
+        const isCursor = actualIndex === selectedIndex;
+        const cursor = isCursor ? '❯' : ' ';
+
+        if (isProfileOption(item)) {
+          return (
+            <Box key={item.id} paddingLeft={1}>
+              <Text color={isCursor ? 'green' : item.active ? 'cyan' : undefined}>
+                {cursor} {item.active ? '●' : '○'} {item.label}
+              </Text>
+            </Box>
+          );
+        }
+
+        if (!isGroup(item)) {
+          const checked = multiSelected?.has(item.id);
+          const sel = checked ? '\u2713' : ' ';
+          const prefix = `${cursor}[${sel}]`;
+          return (
+            <Box key={item.id} paddingLeft={1}>
+              <Text color={isCursor ? 'green' : undefined}>
+                {prefix} {getLabel(item)}
+                {item.cwd ? (
+                  <Text color={isCursor ? 'green' : 'gray'}>
+                    {' ['}{item.cwd}{']'}
+                  </Text>
+                ) : null}
+                {item.parallel ? (
+                  <Text color="yellow"> [parallel]</Text>
+                ) : null}
+                {item.pipelineSteps ? (
+                  <Text color="cyan"> [pipeline]</Text>
+                ) : null}
+                {item.parallelSteps ? (
+                  <Text color="yellow"> [parallel {item.parallelSteps.length}]</Text>
+                ) : null}
+                {item.watch ? (
+                  <Text color="magenta"> [watch]</Text>
+                ) : null}
+              </Text>
+            </Box>
+          );
+        }
+
+        const group = item as MenuGroup;
+        return (
+          <Box key={group.id} paddingLeft={1}>
+            <Text color={isCursor ? 'green' : 'yellow'}>
+              {cursor}  <Text bold>▶ {group.label}</Text>
+              {' '}
+              <Text color={isCursor ? 'green' : 'gray'}>
+                ({group.count})
+              </Text>
+            </Text>
+          </Box>
+        );
+      })}
+
+      {Array.from({ length: padRows }).map((_, i) => (
+        <Box key={`pad-${i}`} height={1}><Text> </Text></Box>
+      ))}
+    </Panel>
+  );
+};

package/src/ui/index.tsx

@@ -0,0 +1,10 @@
+import { render } from 'ink';
+import React from 'react';
+import { App } from './app.js';
+import { Runtime } from '../core/index.js';
+import { ProkomConfig } from '../config/index.js';
+
+export function startUI(config: ProkomConfig, runtime: Runtime) {
+  const { waitUntilExit } = render(<App config={config} runtime={runtime} />);
+  return waitUntilExit();
+}

package/src/ui/metrics-panel.tsx

@@ -0,0 +1,234 @@
+import fs from 'fs';
+import path from 'path';
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { TaskState, TaskStatus } from '../status/types.js';
+import { Panel } from './panel.js';
+
+interface MetricsPanelProps {
+  tasks: Map<string, TaskState>;
+  menuRows: number;
+  width: number;
+}
+const METRICS_FILE = path.join(process.cwd(), '.developer-control-center', 'metrics.json');
+
+interface MetricsState {
+  projectRunning: boolean;
+  activeTasks: number;
+  latestTest?: {
+    label: string;
+    status: TaskStatus;
+    time?: number;
+  };
+  latestBuild?: {
+    status: TaskStatus;
+    time?: number;
+  };
+  lastGitPush?: {
+    label: string;
+    time?: number;
+  };
+  packageVersion: string;
+}
+
+const INITIAL_METRICS: MetricsState = {
+  projectRunning: false,
+  activeTasks: 0,
+  packageVersion: loadPackageVersion(),
+};
+
+function loadPackageVersion(): string {
+  try {
+    const packageJson = JSON.parse(
+      fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'),
+    ) as { version?: string };
+    return packageJson.version ?? '-';
+  } catch {
+    return '-';
+  }
+}
+
+function loadMetrics(): MetricsState {
+  try {
+    const persisted = JSON.parse(fs.readFileSync(METRICS_FILE, 'utf-8')) as MetricsState;
+    return {
+      ...INITIAL_METRICS,
+      latestTest: persisted.latestTest,
+      latestBuild: persisted.latestBuild,
+      lastGitPush: persisted.lastGitPush,
+    };
+  } catch {
+    return INITIAL_METRICS;
+  }
+}
+
+function isBumpTask(task: TaskState): boolean {
+  return task.id === 'bump-version';
+}
+
+function saveMetrics(metrics: MetricsState): void {
+  try {
+    fs.mkdirSync(path.dirname(METRICS_FILE), { recursive: true });
+    fs.writeFileSync(METRICS_FILE, JSON.stringify(metrics), 'utf-8');
+  } catch {
+    // Metrics are useful but non-critical.
+  }
+}
+
+function isTestTask(task: TaskState): boolean {
+  const name = `${task.id} ${task.label}`.toLowerCase();
+  return name.includes('test');
+}
+
+function isBuildTask(task: TaskState): boolean {
+  const name = `${task.id} ${task.label}`.toLowerCase();
+  return name.includes('build');
+}
+
+function isSuccessfulGitPushTask(task: TaskState): boolean {
+  const name = `${task.id} ${task.label}`.toLowerCase();
+  return name.includes('push') && task.status === 'success';
+}
+
+function formatTimestamp(time?: number): string | null {
+  if (!time) return null;
+  const date = new Date(time);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+function formatSince(time?: number): string | null {
+  if (!time) return null;
+  const seconds = Math.max(0, Math.floor((Date.now() - time) / 1000));
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  return `${Math.floor(minutes / 60)}h ago`;
+}
+
+export const MetricsPanel: React.FC<MetricsPanelProps> = ({ tasks, menuRows, width }) => {
+  const [metrics, setMetrics] = useState<MetricsState>(loadMetrics);
+  const latestTestTime = formatSince(metrics.latestTest?.time);
+  const latestBuildTime = formatSince(metrics.latestBuild?.time);
+  const lastGitPushTime = formatTimestamp(metrics.lastGitPush?.time);
+
+  useEffect(() => {
+    setMetrics((previous) => {
+      const entries = Array.from(tasks.values());
+
+      const hasBumpCompleted = entries.some(
+        (t) => isBumpTask(t) && (t.status === 'success' || t.status === 'failure'),
+      );
+
+      const running = entries.filter((t) => t.status === 'running');
+
+      const latestTest = entries
+        .filter(isTestTask)
+        .sort((a, b) => (b.endTime ?? b.startTime ?? 0) - (a.endTime ?? a.startTime ?? 0))[0];
+
+      const latestBuild = entries
+        .filter(isBuildTask)
+        .sort((a, b) => (b.endTime ?? b.startTime ?? 0) - (a.endTime ?? a.startTime ?? 0))[0];
+
+      const latestPush = entries
+        .filter(isSuccessfulGitPushTask)
+        .sort((a, b) => (b.endTime ?? b.startTime ?? 0) - (a.endTime ?? a.startTime ?? 0))[0];
+
+      const next: MetricsState = {
+        projectRunning: running.length > 0,
+        activeTasks: running.length,
+        packageVersion: hasBumpCompleted ? loadPackageVersion() : previous.packageVersion,
+        latestTest: latestTest?.label && latestTest?.status
+          ? {
+              label: latestTest.label,
+              status: latestTest.status,
+              time: latestTest.endTime ?? latestTest.startTime,
+            }
+          : previous.latestTest,
+        latestBuild: latestBuild?.status
+          ? {
+              status: latestBuild.status,
+              time: latestBuild.endTime ?? latestBuild.startTime,
+            }
+          : previous.latestBuild,
+        lastGitPush: latestPush?.label
+          ? {
+              label: latestPush.label,
+              time: latestPush.endTime ?? latestPush.startTime,
+            }
+          : previous.lastGitPush,
+      };
+
+      saveMetrics(next);
+      return next;
+    });
+  }, [tasks]);
+
+  return (
+    <Panel title="Status" width={width} height={menuRows + 2}>
+      <Box paddingLeft={1}>
+        <Text color={metrics.projectRunning ? 'yellow' : 'gray'}>
+          Project: {metrics.projectRunning ? 'running' : 'idle'}
+        </Text>
+      </Box>
+
+      <Box paddingLeft={1}>
+        <Text color="gray">
+          Active: {metrics.activeTasks}
+        </Text>
+      </Box>
+
+      <Box paddingLeft={1}>
+        <Text color="gray">
+          Version: {metrics.packageVersion}
+        </Text>
+      </Box>
+
+      <Box paddingLeft={1}>
+        <Text color="gray">{'\u2500'.repeat(Math.max(0, width - 4))}</Text>
+      </Box>
+
+      <Box paddingLeft={1}>
+        {!metrics.latestTest ? (
+          <Text color="gray">Tests: no run</Text>
+        ) : (
+          <Text color={metrics.latestTest.status === 'success' ? 'green' :
+                       metrics.latestTest.status === 'failure' ? 'red' :
+                       metrics.latestTest.status === 'running' ? 'yellow' : 'gray'}
+          >
+            Tests: {metrics.latestTest.status === 'success' ? 'passed' :
+                    metrics.latestTest.status === 'failure' ? 'failed' :
+                    metrics.latestTest.status === 'running' ? 'running' : 'idle'}
+            {latestTestTime ? <Text color="gray"> - {latestTestTime}</Text> : null}
+          </Text>
+        )}
+      </Box>
+
+      <Box paddingLeft={1}>
+        {!metrics.latestBuild ? (
+          <Text color="gray">Build: no run</Text>
+        ) : (
+          <Text color={metrics.latestBuild.status === 'success' ? 'green' :
+                       metrics.latestBuild.status === 'failure' ? 'red' :
+                       metrics.latestBuild.status === 'running' ? 'yellow' : 'gray'}
+          >
+            Build: {metrics.latestBuild.status === 'success' ? 'passed' :
+                    metrics.latestBuild.status === 'failure' ? 'failed' :
+                    metrics.latestBuild.status === 'running' ? 'running' : 'idle'}
+            {latestBuildTime ? <Text color="gray"> - {latestBuildTime}</Text> : null}
+          </Text>
+        )}
+      </Box>
+
+      <Box paddingLeft={1}>
+        <Text color="gray" wrap="truncate-end">
+          Push: {lastGitPushTime ?? '-'}
+        </Text>
+      </Box>
+    </Panel>
+  );
+};

package/src/ui/panel.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode } from 'react';
+import { Box, Text } from 'ink';
+
+interface PanelProps {
+  title: string;
+  titleColor?: string;
+  borderColor?: string;
+  titleExtra?: ReactNode;
+  titleExtraWidth?: number;
+  hiddenAbove?: number;
+  hiddenBelow?: number;
+  children: ReactNode;
+  height: number;
+  width: number;
+}
+
+export const Panel: React.FC<PanelProps> = ({
+  title,
+  titleColor = 'cyan',
+  borderColor = 'white',
+  titleExtra,
+  titleExtraWidth = 0,
+  hiddenAbove,
+  hiddenBelow,
+  children,
+  height,
+  width,
+}) => {
+  const contentHeight = Math.max(0, height - 2);
+  const innerWidth = Math.max(0, width - 2);
+
+  const showAbove = hiddenAbove != null && hiddenAbove > 0;
+  const showBelow = hiddenBelow != null && hiddenBelow > 0;
+  const aboveText = showAbove ? `↑${hiddenAbove} more` : '';
+  const belowText = showBelow ? `↓${hiddenBelow} more` : '';
+  const aboveLen = showAbove ? aboveText.length + 1 : 0;
+  const belowLen = showBelow ? belowText.length + 1 : 0;
+
+  const topFillWidth = Math.max(0, width - title.length - titleExtraWidth - aboveLen - 5);
+  const bottomFillWidth = Math.max(0, width - belowLen - 2);
+
+  return (
+    <Box flexDirection="column" height={height} width={width}>
+      <Box width={width}>
+        <Text color={borderColor}>╭─ </Text>
+        <Text color={titleColor}>{title}</Text>
+        {titleExtra}
+        <Text color={borderColor}> </Text>
+        <Text color={borderColor}>{'─'.repeat(topFillWidth)}</Text>
+        {aboveText ? <Text color="gray">{aboveText}</Text> : null}
+        <Text color={borderColor}>{aboveText ? '─' : ''}╮</Text>
+      </Box>
+      <Box height={contentHeight} width={width}>
+        <Box flexDirection="column" width={1}>
+          {Array.from({ length: contentHeight }).map((_, index) => (
+            <Text key={`left-${index}`} color={borderColor}>│</Text>
+          ))}
+        </Box>
+        <Box flexDirection="column" width={innerWidth} height={contentHeight} overflow="hidden">
+          {children}
+        </Box>
+        <Box flexDirection="column" width={1}>
+          {Array.from({ length: contentHeight }).map((_, index) => (
+            <Text key={`right-${index}`} color={borderColor}>│</Text>
+          ))}
+        </Box>
+      </Box>
+      <Box width={width}>
+        <Text color={borderColor}>╰</Text>
+        <Text color={borderColor}>{'─'.repeat(bottomFillWidth)}</Text>
+        {belowText ? <Text color="gray">{belowText}</Text> : null}
+        <Text color={borderColor}>{belowText ? '─' : ''}╯</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/ui/status-panel.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ProkomCommand } from '../config/types.js';
+import { TaskState } from '../status/types.js';
+import { Panel } from './panel.js';
+
+function sanitizeOutput(text: string): string {
+  return text
+    .replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, '')
+    .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '')
+    .replace(/\r\n/g, '\n')
+    .replace(/\r/g, '\n');
+}
+
+interface StatusPanelProps {
+  tasks: Map<string, TaskState>;
+  scrollOffsets: Map<string, number>;
+  focusedPane: 'commands' | 'status';
+  confirmingCommand?: ProkomCommand | null;
+  inputCommand?: ProkomCommand | null;
+  inputValue?: string;
+  width: number;
+  menuRows: number;
+}
+const TASK_HEADER_ROWS = 1;
+
+const STATUS_STYLE: Record<TaskState['status'], { icon: string; color: string; label: string }> = {
+  idle:    { icon: '\u25CB', color: 'gray',   label: 'IDLE' },
+  running: { icon: '\u25CF', color: 'yellow', label: 'RUNNING' },
+  success: { icon: '\u2713', color: 'green',  label: 'PASS' },
+  failure: { icon: '\u2717', color: 'red',    label: 'FAIL' },
+};
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const m = Math.floor(ms / 60000);
+  const s = Math.floor((ms % 60000) / 1000);
+  return `${m}m${s}s`;
+}
+
+export const StatusPanel: React.FC<StatusPanelProps> = ({
+  tasks,
+  scrollOffsets,
+  focusedPane,
+  confirmingCommand,
+  inputCommand,
+  inputValue = '',
+  width,
+  menuRows,
+}) => {
+  const contentRows = menuRows;
+  const promptRows = confirmingCommand ? 1 : inputCommand ? 3 : 0;
+  const outputRows = contentRows - TASK_HEADER_ROWS - promptRows;
+  const entries = Array.from(tasks.values()).sort(
+    (a, b) => (b.startTime || 0) - (a.startTime || 0),
+  );
+
+  const isFocused = focusedPane === 'status';
+  const statusColor = isFocused ? 'cyan' : 'white';
+  const task = entries[0];
+  const cleaned = task?.output ? sanitizeOutput(task.output) : '';
+  const lines = cleaned ? cleaned.split('\n') : [];
+  const offset = task ? (scrollOffsets.get(task.id) ?? 0) : 0;
+  const endLine = Math.max(0, lines.length - offset);
+  const startLine = Math.max(0, endLine - outputRows);
+  const showLines = lines.slice(startLine, endLine);
+  const hiddenAbove = startLine;
+  const hiddenBelow = offset;
+  const titleExtraWidth = hiddenAbove > 0 ? `  ↑ ${hiddenAbove} above`.length : 0;
+
+  return (
+    <Panel
+      title="Output"
+      titleColor={isFocused ? 'cyan' : 'white'}
+      borderColor={statusColor}
+      width={width}
+      height={menuRows + 2}
+      hiddenAbove={hiddenAbove}
+      hiddenBelow={hiddenBelow}
+      titleExtraWidth={titleExtraWidth}
+      titleExtra={hiddenAbove > 0 ? (
+        <Text color="gray">  ↑ {hiddenAbove} above</Text>
+      ) : null}
+    >
+
+      {confirmingCommand ? (
+        <Box paddingLeft={2}>
+          <Text color="yellow">⚠ Run </Text>
+          <Text bold color="cyan">{confirmingCommand.label}</Text>
+          <Text color="yellow">?</Text>
+          <Text color="gray">  Enter/Y to confirm, Esc/N to cancel</Text>
+        </Box>
+      ) : null}
+
+      {inputCommand ? (
+        <Box flexDirection="column" paddingLeft={2}>
+          <Box>
+            <Text color="cyan">{inputCommand.input?.message ?? 'Input:'}</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text wrap="truncate-end">
+              <Text>{inputValue}</Text>
+              <Text color="gray">{inputValue ? '█' : (inputCommand.input?.placeholder ?? '')}</Text>
+            </Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text color="gray">Enter to confirm, Esc to cancel</Text>
+          </Box>
+        </Box>
+      ) : null}
+
+      {!task && !confirmingCommand && !inputCommand && (
+        <Box paddingLeft={2}>
+          <Text color="gray">No tasks yet</Text>
+        </Box>
+      )}
+
+      {task ? (() => {
+        const style = STATUS_STYLE[task.status];
+        const duration = task.startTime
+          ? formatDuration((task.endTime ?? Date.now()) - task.startTime)
+          : null;
+
+        return (
+          <Box key={task.id} flexDirection="column">
+            <Box paddingLeft={1}>
+              <Text color={style.color}>
+                {style.icon} {task.label}
+              </Text>
+              <Text color={style.color}>
+                {' ['}{style.label}{']'}
+              </Text>
+              {duration ? (
+                <Text color="gray"> ({duration})</Text>
+              ) : null}
+              {task.exitCode !== undefined && task.exitCode !== 0 ? (
+                <Text color="red"> exit {task.exitCode}</Text>
+              ) : null}
+              {task.watchMode && (
+                <Text color="magenta"> [WATCH]</Text>
+              )}
+            </Box>
+            {task.output ? (
+              <Box paddingLeft={2} flexDirection="column">
+                <Box paddingLeft={1} flexDirection="column">
+                  {showLines.map((line, index) => (
+                    <Text key={`${startLine + index}-${line}`} wrap="truncate-end">
+                      {line || ' '}
+                    </Text>
+                  ))}
+                </Box>
+              </Box>
+            ) : null}
+          </Box>
+        );
+      })() : null}
+    </Panel>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "types": ["node"],
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "rootDir": "src",
+    "composite": false
+  },
+  "include": ["src"]
+}

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.test.ts'],
+    globals: true,
+  },
+});