Function ActivityPanel

web/src/App.tsx:2121–2168

(props: {
  className?: string;
  mode: ContextPanelMode;
  processSteps: ProcessStep[];
  modelLogs: ModelCallLogRecord[];
  onSetMode: (mode: ContextPanelMode) => void;
  onRefreshModelLogs: () => void;
  onClearModelLogs: () => void;
})

}

function ActivityPanel(props: {
  className?: string;
  mode: ContextPanelMode;
  processSteps: ProcessStep[];
  modelLogs: ModelCallLogRecord[];
  onSetMode: (mode: ContextPanelMode) => void;
  onRefreshModelLogs: () => void;
  onClearModelLogs: () => void;
}) {
  const { t } = useI18n();
  return (
    <aside className={cn("flex min-h-0 flex-col bg-background", props.className)}>
      <div className="border-b border-border p-4">
        <div className="min-w-0">
          <h2 className="truncate text-sm font-semibold">{contextPanelModeLabel(props.mode, t)}</h2>
          <p className="mt-1 truncate text-xs text-muted-foreground">{t("搜索链路与模型原始调用", "Search trace and raw model calls")}</p>
        </div>
        <div className="mt-3 grid grid-cols-2 rounded-md border border-border p-1">
          {(["process", "logs"] as ContextPanelMode[]).map((mode) => (
            <button
              key={mode}
              type="button"
              className={cn(
                "rounded px-2 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
                props.mode === mode && "bg-accent text-foreground"
              )}
              onClick={() => props.onSetMode(mode)}
            >
              {contextPanelModeLabel(mode, t)}
            </button>
          ))}
        </div>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto p-4 scrollbar-thin">
        {props.mode === "logs" ? (
          <RawLogsPanel
            logs={props.modelLogs}
            onRefresh={props.onRefreshModelLogs}
            onClear={props.onClearModelLogs}
          />
        ) : (
          <ProcessPanel steps={props.processSteps} />
        )}
      </div>
    </aside>
  );
}

function ProcessPanel({ steps }: { steps: ProcessStep[] }) {
  const { t } = useI18n();