aegiscode 3.1.8 → 3.1.10

package/src/ui/components/layout/ChatStatusBar.tsx

@@ -0,0 +1,90 @@
+/**
+ * ChatStatusBar — Claude Code style minimal status bar
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useShallow } from 'zustand/react/shallow';
+import { themeManager } from '../../themes/index.js';
+import { useClawdStore } from '../../../store/index.js';
+
+interface ChatStatusBarProps {
+  model?: string;
+  /** True when `model` was picked by the auto-router rather than /model */
+  modelIsAuto?: boolean;
+  isVisible?: boolean;
+  isScrolledUp?: boolean;
+  renderLatency?: number;
+  routerEnabled?: boolean;
+  onToggleRouter?: () => void;
+}
+
+function formatTokens(count: number): string {
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
+  return String(count);
+}
+
+export const ChatStatusBar: React.FC<ChatStatusBarProps> = React.memo(({
+  model,
+  modelIsAuto = false,
+  isVisible = true,
+  isScrolledUp = false,
+  renderLatency = 0,
+  routerEnabled = false,
+  onToggleRouter,
+}) => {
+  const theme = themeManager.getTheme();
+  const displayModel = model;
+
+  const { messageCount, queuedCommands } = useClawdStore(
+    useShallow((state) => ({
+      messageCount:     state.session.messages.length,
+      queuedCommands:   state.command.pendingCommands.length,
+    }))
+  );
+
+  if (!isVisible) return null;
+
+  const items: string[] = [];
+
+  if (displayModel) {
+    const truncated = displayModel.length > 24 ? displayModel.slice(0, 24) + '…' : displayModel;
+    items.push(modelIsAuto ? `${truncated} (auto)` : truncated);
+  }
+
+  if (renderLatency > 50) {
+    items.push(`lag: ${renderLatency}ms`);
+  }
+
+  if (messageCount !== undefined) {
+    items.push(`${messageCount} msgs`);
+  }
+
+  if (isScrolledUp) {
+    items.push('↑ scrolled');
+  }
+
+  if (queuedCommands > 0) {
+    items.push(`queue: ${queuedCommands}`);
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <Box flexDirection="row" paddingX={0} marginTop={0}>
+      <Text color={theme.colors.text.muted} dimColor>
+        {items.join(' · ')}
+        <Text> · </Text>
+        <Text color={routerEnabled ? theme.colors.success : theme.colors.text.muted} bold={routerEnabled}>
+          R:{routerEnabled ? 'ON' : 'OFF'}
+        </Text>
+        <Text dimColor> alt+r</Text>
+      </Text>
+    </Box>
+  );
+});
+
+ChatStatusBar.displayName = 'ChatStatusBar';
+
+export default ChatStatusBar;

package/src/ui/components/layout/ContextBar.tsx

@@ -0,0 +1,79 @@
+/**
+ * ContextBar — shows current workflow phase with step progress
+ * Inspired by VSCode / Claude Code context bars
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { themeManager } from '../../themes/index.js';
+import type { WorkflowState } from '../../../store/types.js';
+
+const PHASE_COLORS: Record<string, string> = {
+  building:   '#22c55e', // green
+  refactoring:'#f59e0b', // amber
+  debugging:  '#ef4444', // red
+  testing:    '#3b82f6', // blue
+  planning:   '#7c6fd4', // purple
+};
+
+function getPhaseColor(phase: string): string {
+  const key = phase.toLowerCase().trim();
+  for (const [k, v] of Object.entries(PHASE_COLORS)) {
+    if (key.includes(k) || k.includes(key)) return v;
+  }
+  return themeManager.getTheme().colors.primary;
+}
+
+interface ContextBarProps {
+  workflow: WorkflowState;
+}
+
+export const ContextBar: React.FC<ContextBarProps> = React.memo(({ workflow }) => {
+  const theme = themeManager.getTheme();
+
+  if (!workflow.visible) return null;
+
+  const phaseColor = getPhaseColor(workflow.phase);
+  const indicator = `● ${workflow.phase} ${workflow.target}`;
+  const progress = `${workflow.currentStepIndex}/${workflow.totalSteps}`;
+
+  // Step indicators: ● active  ◉ done  ○ pending
+  const stepIndicators = workflow.steps.map((s, i) => {
+    const dot = s.status === 'active' ? '◉' : s.status === 'done' ? '●' : '○';
+    const color = s.status === 'active' ? phaseColor
+                : s.status === 'done' ? theme.colors.success
+                : theme.colors.text.muted;
+    return (
+      <Text key={i} color={color}>
+        {dot} {s.label}
+        {i < workflow.steps.length - 1 && (
+          <Text color={theme.colors.text.muted}> · </Text>
+        )}
+      </Text>
+    );
+  });
+
+  // Separator line
+  const sepColor = theme.colors.border.light;
+
+  return (
+    <Box flexDirection="column" marginTop={0} marginBottom={0}>
+      <Box>
+        <Text color={sepColor}>─</Text>
+        <Text> </Text>
+        <Text color={phaseColor} bold>{indicator}</Text>
+        <Text color={theme.colors.text.muted}> · {progress}</Text>
+      </Box>
+      <Box marginLeft={1}>
+        {stepIndicators}
+      </Box>
+      <Box>
+        <Text color={sepColor}>─</Text>
+      </Box>
+    </Box>
+  );
+});
+
+ContextBar.displayName = 'ContextBar';
+
+export default ContextBar;

package/src/ui/components/layout/MessageArea.tsx

@@ -0,0 +1,96 @@
+/**
+ * MessageArea - 消息列表区域
+ * 
+ * 
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { MessageRenderer } from '../markdown/MessageRenderer.js';
+import { useTerminalWidth } from '../../hooks/index.js';
+import { themeManager } from '../../themes/index.js';
+
+/**
+ * UI 消息类型
+ */
+export interface UIMessage {
+  role: 'user' | 'assistant' | 'system' | 'tool';
+  content: string;
+  timestamp?: number;
+  metadata?: {
+    model?: string;
+    tokenUsage?: { input: number; output: number };
+  };
+}
+
+interface MessageAreaProps {
+  /** 消息列表 */
+  messages: UIMessage[];
+  /** 最大显示消息数 */
+  maxMessages?: number;
+  /** 是否显示时间戳 */
+  showTimestamp?: boolean;
+}
+
+/**
+ * 
+ */
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+/**
+ * 
+ */
+export const MessageArea: React.FC<MessageAreaProps> = ({
+  messages,
+  maxMessages = 50,
+  showTimestamp = false,
+}) => {
+  const terminalWidth = useTerminalWidth();
+  const theme = themeManager.getTheme();
+
+  // 限制显示的消息数
+  const displayMessages = messages.slice(-maxMessages);
+
+  if (displayMessages.length === 0) {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Text color={theme.colors.text.muted} dimColor>
+          No messages yet. Start a conversation!
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {displayMessages.map((message, index) => (
+        <Box key={index} flexDirection="column" marginBottom={1}>
+          {/* 时间戳 */}
+          {showTimestamp && message.timestamp && (
+            <Box marginBottom={0}>
+              <Text color={theme.colors.text.muted} dimColor>
+                {formatTimestamp(message.timestamp)}
+              </Text>
+            </Box>
+          )}
+          
+          {/* 消息内容 */}
+          <MessageRenderer
+            content={message.content}
+            role={message.role}
+            terminalWidth={terminalWidth - 2}
+            showPrefix={true}
+          />
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default MessageArea;