Prompt is too long

2025-10-22 09:06:18 +02:00
parent 8235d8d1b1
commit e646f410be
128 changed files with 9346 additions and 7090 deletions
@@ -0,0 +1,169 @@
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import type { AgentStatus } from '@server/server/acp/types';
+
+export interface ActiveProcessesProps {
+  agents: Array<{
+    id: string;
+    status: AgentStatus;
+    type: 'claude';
+    currentModeId?: string;
+    availableModes?: Array<{ id: string; name: string; description?: string | null }>;
+  }>;
+  commands: Array<{
+    id: string;
+    name: string;
+    workingDirectory: string;
+    currentCommand: string;
+    isDead: boolean;
+    exitCode: number | null;
+  }>;
+  activeProcessId: string | null;
+  activeProcessType: 'agent' | null;
+  onSelectAgent: (id: string) => void;
+  onBackToOrchestrator: () => void;
+}
+
+function getAgentStatusColor(status: AgentStatus): string {
+  switch (status) {
+    case 'initializing':
+      return '#f59e0b'; // orange
+    case 'ready':
+      return '#3b82f6'; // blue
+    case 'processing':
+      return '#fbbf24'; // yellow
+    case 'completed':
+      return '#22c55e'; // green
+    case 'failed':
+      return '#ef4444'; // red
+    case 'killed':
+      return '#9ca3af'; // gray
+    default:
+      return '#9ca3af';
+  }
+}
+
+function getModeName(modeId?: string, availableModes?: Array<{ id: string; name: string }>): string {
+  if (!modeId) return 'unknown';
+  const mode = availableModes?.find((m) => m.id === modeId);
+  return mode?.name || modeId;
+}
+
+function getModeColor(modeId?: string): string {
+  if (!modeId) return '#9ca3af'; // gray
+
+  // Color based on common mode types
+  if (modeId.includes('ask')) return '#f59e0b'; // orange - asks permission
+  if (modeId.includes('code')) return '#22c55e'; // green - writes code
+  if (modeId.includes('architect') || modeId.includes('plan')) return '#3b82f6'; // blue - plans
+
+  return '#9ca3af'; // gray - unknown
+}
+
+export function ActiveProcesses({
+  agents,
+  commands,
+  activeProcessId,
+  activeProcessType,
+  onSelectAgent,
+  onBackToOrchestrator,
+}: ActiveProcessesProps) {
+  const hasActiveProcess = activeProcessId !== null && activeProcessType !== null;
+
+  if (agents.length === 0 && commands.length === 0) {
+    return null;
+  }
+
+  return (
+    <View className="bg-zinc-900 border-b border-zinc-800">
+      {/* Header with Back button */}
+      {hasActiveProcess && (
+        <View className="px-4 py-3 border-b border-zinc-800">
+          <Pressable
+            onPress={onBackToOrchestrator}
+            className="bg-zinc-800 px-4 py-2 rounded-lg active:bg-zinc-700"
+          >
+            <Text className="text-white text-sm font-semibold text-center">
+              Back to Chat
+            </Text>
+          </Pressable>
+        </View>
+      )}
+
+      {/* Scrollable process list */}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        className="px-4 py-3"
+        contentContainerStyle={{ gap: 8 }}
+      >
+        {/* Agents */}
+        {agents.map((agent) => {
+          const modeName = getModeName(agent.currentModeId, agent.availableModes);
+          const isActive = activeProcessType === 'agent' && activeProcessId === agent.id;
+
+          return (
+            <Pressable
+              key={`agent-${agent.id}`}
+              onPress={() => onSelectAgent(agent.id)}
+              className={`flex-row items-center gap-2 px-3 py-2 rounded-lg ${
+                isActive ? 'bg-blue-600' : 'bg-zinc-800'
+              } active:opacity-70`}
+            >
+              {/* Agent icon */}
+              <View className="w-3 h-3 rounded-full bg-blue-500" />
+
+              {/* Agent ID (shortened) */}
+              <Text className="text-white text-xs font-medium">
+                {agent.id.substring(0, 8)}
+              </Text>
+
+              {/* Status indicator */}
+              <View
+                className="w-2 h-2 rounded-full"
+                style={{ backgroundColor: getAgentStatusColor(agent.status) }}
+              />
+
+              {/* Mode indicator */}
+              {agent.currentModeId && (
+                <View
+                  className="w-1.5 h-1.5 rounded-full opacity-30"
+                  style={{ backgroundColor: getModeColor(agent.currentModeId) }}
+                />
+              )}
+            </Pressable>
+          );
+        })}
+
+        {/* Commands */}
+        {commands.map((command) => {
+          const statusColor = command.isDead
+            ? command.exitCode === 0
+              ? '#22c55e'
+              : '#ef4444'
+            : '#3b82f6';
+
+          return (
+            <View
+              key={`command-${command.id}`}
+              className="flex-row items-center gap-2 px-3 py-2 rounded-lg bg-zinc-800"
+            >
+              {/* Command icon */}
+              <View className="w-3 h-3 rounded-sm bg-purple-500" />
+
+              {/* Command name */}
+              <Text className="text-white text-xs font-medium" numberOfLines={1}>
+                {command.name || command.currentCommand.substring(0, 20)}
+              </Text>
+
+              {/* Status indicator */}
+              <View
+                className="w-2 h-2 rounded-full"
+                style={{ backgroundColor: statusColor }}
+              />
+            </View>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}