beaver_project/app-instance/frontend/components/chat-workbench/ProcessLane.tsx

'use client';

import { AlertCircle, Bot, BrainCircuit, Loader2, ServerCog, Square } from 'lucide-react';

import type { ProcessEvent, ProcessRun } from '@/types';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ScrollArea } from '@/components/ui/scroll-area';
import { appActorTypeLabel, appEventKindLabel, appStatusLabel } from '@/lib/i18n/common';
import { pickAppText } from '@/lib/i18n/core';
import { useAppI18n } from '@/lib/i18n/provider';
import { cn } from '@/lib/utils';

function statusTone(status: string) {
  if (status === 'done') return 'border-[#B7C2B5] bg-[#E3E8E2] text-[#657162]';
  if (status === 'error') return 'border-[#B8AEA8] bg-[#E7E2DE] text-[#342E2B]';
  if (status === 'cancelled') return 'border-[#D8D2CE] bg-[#ECE8E5] text-[#6A5E58]';
  if (status === 'waiting') return 'border-[#B8AEA8] bg-[#E7E2DE] text-[#5F5550]';
  return 'border-[#BCC4CE] bg-[#E4E7EB] text-[#697281]';
}

function actorIcon(run: ProcessRun) {
  if (run.actor_type === 'mcp') return <ServerCog className="w-4 h-4" />;
  if (run.actor_type === 'system') return <BrainCircuit className="w-4 h-4" />;
  return <Bot className="w-4 h-4" />;
}

export function ProcessLane({
  runs,
  events,
  selectedRunId,
  onSelectRun,
  onCancelRun,
}: {
  runs: ProcessRun[];
  events: ProcessEvent[];
  selectedRunId: string | null;
  onSelectRun: (runId: string) => void;
  onCancelRun: (runId: string) => void;
}) {
  const { locale } = useAppI18n();
  const sortedRuns = [...runs].sort((a, b) => {
    const at = new Date(a.started_at).getTime();
    const bt = new Date(b.started_at).getTime();
    return bt - at;
  });

  if (sortedRuns.length === 0) {
    return null;
  }

  return (
    <div className="h-full flex flex-col bg-card/60 border-l border-border">
      <div className="px-4 py-3 border-b border-border flex items-center justify-between">
        <div>
          <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">{pickAppText(locale, '执行过程', 'Execution')}</h2>
          <p className="text-xs text-muted-foreground mt-1">{pickAppText(locale, '智能体、A2A、MCP 的实时过程', 'Live process stream for agents, A2A, and MCP')}</p>
        </div>
        <Badge variant="outline" className="text-xs">
          {pickAppText(locale, `${sortedRuns.length} 个任务`, `${sortedRuns.length} tasks`)}
        </Badge>
      </div>
      <ScrollArea className="flex-1 px-4 py-4">
        <div className="space-y-3">
          {sortedRuns.map((run) => {
            const runEvents = events
              .filter((event) => event.run_id === run.run_id)
              .slice(-5)
              .reverse();
            const isSelected = run.run_id === selectedRunId;
            const canCancel =
              !run.parent_run_id &&
              run.actor_type !== 'mcp' &&
              (run.status === 'running' || run.status === 'waiting');
            return (
              <Card
                key={run.run_id}
                className={cn(
                  'cursor-pointer transition-colors border-border/80 hover:border-primary/40',
                  isSelected && 'border-primary bg-primary/5'
                )}
                onClick={() => onSelectRun(run.run_id)}
              >
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2 flex-wrap">
                        <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
                          {actorIcon(run)}
                        </div>
                        <div className="min-w-0">
                          <CardTitle className="text-sm leading-none truncate">{run.actor_name}</CardTitle>
                          <p className="text-xs text-muted-foreground mt-1 truncate">{run.title}</p>
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 shrink-0">
                      <Badge variant="outline" className={cn('text-[10px] border', statusTone(run.status))}>
                        {appStatusLabel(run.status, locale)}
                      </Badge>
                      {canCancel && (
                        <Button
                          variant="outline"
                          size="sm"
                          className="h-7 px-2"
                          onClick={(event) => {
                            event.stopPropagation();
                            onCancelRun(run.run_id);
                          }}
                        >
                          <Square className="w-3.5 h-3.5 mr-1" />
                          {pickAppText(locale, '取消', 'Cancel')}
                        </Button>
                      )}
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="pt-0 space-y-2">
                  <div className="flex items-center gap-2 text-[11px] text-muted-foreground flex-wrap">
                    <span>{appActorTypeLabel(run.actor_type, locale)}</span>
                    {run.source && <span>{run.source}</span>}
                    {run.parent_run_id && <span>{pickAppText(locale, '子任务', 'Subtask')}</span>}
                  </div>
                  {run.summary && (
                    <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground whitespace-pre-wrap line-clamp-3">
                      {run.summary}
                    </div>
                  )}
                  <SkillMetadata metadata={run.metadata} />
                  <div className="space-y-1.5">
                    {runEvents.length === 0 && run.status === 'running' && (
                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <Loader2 className="w-3.5 h-3.5 animate-spin" />
                        {pickAppText(locale, '等待首个事件...', 'Waiting for the first event...')}
                      </div>
                    )}
                    {runEvents.map((event) => (
                      <div key={event.event_id} className="text-xs rounded-md border border-border/50 bg-background/60 px-3 py-2">
                        <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
                          <span>{appEventKindLabel(event.kind, locale)}</span>
                          {event.status && <span>{appStatusLabel(event.status, locale)}</span>}
                        </div>
                        <div className="text-foreground/90 whitespace-pre-wrap break-words">
                          {event.text || pickAppText(locale, '结构化更新', 'Structured update')}
                        </div>
                      </div>
                    ))}
                    {run.status === 'error' && (
                      <div className="flex items-center gap-2 text-xs text-[#5F5550]">
                        <AlertCircle className="w-3.5 h-3.5" />
                        {pickAppText(locale, '此任务执行失败。', 'This task failed.')}
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </ScrollArea>
    </div>
  );
}

function SkillMetadata({ metadata }: { metadata?: Record<string, unknown> }) {
  const rawSelected = metadata?.selected_skill_names;
  const rawEphemeral = metadata?.ephemeral_skill_names;
  const selected = Array.isArray(rawSelected) ? rawSelected.map(String).filter(Boolean) : [];
  const ephemeral = Array.isArray(rawEphemeral) ? rawEphemeral.map(String).filter(Boolean) : [];
  const guidanceId = typeof metadata?.ephemeral_guidance_id === 'string' ? metadata.ephemeral_guidance_id : '';
  if (selected.length === 0 && ephemeral.length === 0 && !guidanceId) {
    return null;
  }
  return (
    <div className="flex flex-wrap gap-1.5 text-[11px]">
      {selected.map((name) => (
        <Badge key={`skill:${name}`} variant="secondary" className="text-[10px]">
          skill:{name}
        </Badge>
      ))}
      {ephemeral.map((name) => (
        <Badge key={`ephemeral:${name}`} variant="outline" className="text-[10px]">
          ephemeral:{name}
        </Badge>
      ))}
      {guidanceId && (
        <Badge variant="outline" className="text-[10px]">
          guidance:{guidanceId.slice(0, 8)}
        </Badge>
      )}
    </div>
  );
}