Function ProjectPanel

frontend/src/components/ProjectPanel.tsx:44–456

({ projects, connected, selectedProjectId, artifactsByProject, discussionMode, onToggleDiscussion, onSelect, onResume, onPause, onRestart, onDelete, onQuickSubmit }: Props)

  const [refPapersInput, setRefPapersInput] = useState('');
  
  const [showPaths, setShowPaths] = useState(false);
  const [codebasesPath, setCodebasesPath] = useState('');
  const [datasetsPath, setDatasetsPath] = useState('');
  const [checkpointsPath, setCheckpointsPath] = useState('');
  const { t, locale } = useLocale();

  const modeInfo: Record<SubmitMode, { label: string; icon: string; placeholder: string; desc: string }> = {
    lab: {
      label: t('project.mode.lab'),
      icon: '🔬',
      placeholder: t('project.placeholder.lab'),
      desc: t('project.mode.lab_desc'),
    },
    reproduce: {
      label: t('project.mode.reproduce'),
      icon: '📄',
      placeholder: t('project.placeholder.reproduce'),
      desc: t('project.mode.reproduce_desc'),
    },
  };

  const info = modeInfo[mode];
  const [showModeHelp, setShowModeHelp] = useState(false);

  const submit = () => {
    const text = topicInput.trim();
    if (!text) return;
    const angles = mode === 'lab'
      ? anglesInput.split(/[,，、;；]/).map(s => s.trim()).filter(Boolean)
      : [];
    const paths: { codebases?: string; datasets?: string; checkpoints?: string } = {};
    if (codebasesPath.trim()) paths.codebases = codebasesPath.trim();
    if (datasetsPath.trim()) paths.datasets = datasetsPath.trim();
    if (checkpointsPath.trim()) paths.checkpoints = checkpointsPath.trim();
    onQuickSubmit(text, mode, angles, refPapersInput.trim(), paths);
    setTopicInput('');
    setAnglesInput('');
    setRefPapersInput('');
  };

  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); submit(); }
  };

  const sorted = [...projects].sort((a, b) => {
    const o: Record<string, number> = { running: 0, queued: 1, interrupted: 2, new: 3, completed: 4 };
    return (o[a.status] ?? 5) - (o[b.status] ?? 5);
  });

  const running = projects.filter(p => p.status === 'running').length;
  const interrupted = projects.filter(p => p.status === 'interrupted').length;

  const goLabel = t('project.go_submit');

  const toggleExpand = (projectId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    setExpandedId(prev => prev === projectId ? null : projectId);
  };