Function WorkThreadView

packages/web/src/components/WorkThreadView.tsx:12–50

({ id, onBack, onOpenSession }: Props)

}

export function WorkThreadView({ id, onBack, onOpenSession }: Props) {
  const [thread, setThread] = useState<WorkThread | null>(null);
  const [projectName, setProjectName] = useState<string | undefined>();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    Promise.all([api.getThread(id), api.listProjects()])
      .then(([result, projects]) => {
        const project = projects.items.find((item) => item.id === result.thread.projectProfileId);
        setThread(result.thread);
        setProjectName(project?.name ?? (project ? projectLabel(project.projectKey) : undefined));
        setError(null);
      })
      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
  }, [id]);

  if (error)
    return (
      <div className="work-body">
        <div className="error">Failed to load: {error}</div>
      </div>
    );
  if (!thread) return <div className="empty">Loading...</div>;

  return (
    <>
      <div className="work-header">
        <button className="back-btn" onClick={onBack}>
          Back
        </button>
        <div className="work-heading">
          <div className="work-title">{thread.provisionalTitle}</div>
          <div className="work-sub">{thread.lifecycle}</div>
        </div>
      </div>
      <ThreadDetails thread={thread} projectName={projectName} onOpenSession={onOpenSession} />
    </>
  );
}