evOo-local/apps/web/src/pages/shell/project-overview.tsx

import { Trans, useLingui } from "@lingui/react/macro";
import type { RunActivityRow, Space } from "@rakazo/contracts";
import { projectThreads } from "@rakazo/core";
import { Button } from "@rakazo/ui-web";
import { FolderOpen, GitBranch, Pencil, Plus, Target } from "lucide-react";
import type { ReactNode } from "react";
import { useState } from "react";
import { ProjectIcon } from "../../components/project-icon";
import { useRunActivity } from "../../lib/run-activity";
import { ActivityRow } from "../ActivityList";

type Section = "needsYou" | "running" | "done";

/**
 * The coordinator's view of its project: project identity, mission goal, context badges,
 * sub-thread creation launcher, and delegated task activity.
 */
export function ProjectOverview({
  spaceId,
  space,
  coordinator,
  onOpenRun,
  onOpenNewInquiry,
  onEditProject,
}: {
  spaceId: string;
  space?: Space;
  coordinator?: { threadId: string; botId?: string };
  onOpenRun: (run: RunActivityRow) => void;
  onOpenNewInquiry?: () => void;
  onEditProject?: () => void;
}) {
  const { t } = useLingui();
  const activity = useRunActivity();
  const threads = projectThreads(activity, { spaceId, coordinator });
  // null until the user picks; "none" once they closed every group.
  const [open, setOpen] = useState<Section | "none" | null>(null);
  const sections: { id: Section; runs: RunActivityRow[]; label: ReactNode; tone: string }[] = [
    {
      id: "needsYou",
      runs: threads.needsYou,
      label: <Trans>Needs you</Trans>,
      tone: "text-warning",
    },
    {
      id: "running",
      runs: threads.running,
      label: <Trans>Running</Trans>,
      tone: "text-foreground",
    },
    { id: "done", runs: threads.done, label: <Trans>Done</Trans>, tone: "text-muted-foreground" },
  ];
  const visible = sections.filter((section) => section.runs.length > 0);
  const isProjectSpace = Boolean(space && !space.isDefault);

  // If not a project space and no runs, keep hidden
  if (!isProjectSpace && visible.length === 0) return null;

  // Waiting threads are what the user came for, so they start open.
  const shown = open ?? (threads.needsYou.length > 0 ? "needsYou" : null);
  const current = visible.find((section) => section.id === shown);

  const folderPath = space?.workspace?.path;
  const gitRemote = space?.workspace?.git?.remoteUrl;
  const goal = space?.goal;

  return (
    <div
      data-testid="project-overview"
      className="mx-auto w-full max-w-3xl px-4 pt-3 pb-2 space-y-3"
    >
      {isProjectSpace && space ? (
        <div className="rounded-xl border border-border bg-card/60 p-3.5 backdrop-blur-xs shadow-2xs space-y-3">
          <div className="flex items-center justify-between gap-3 flex-wrap">
            <div className="flex items-center gap-2.5 min-w-0">
              <ProjectIcon icon={space.icon} color={space.color} size={28} />
              <span className="font-semibold text-ui-title-sm truncate text-foreground">
                {space.name}
              </span>
              {onEditProject ? (
                <Button
                  variant="ghost"
                  size="icon-sm"
                  aria-label={t`Edit project`}
                  onClick={onEditProject}
                  className="size-7 text-muted-foreground hover:text-foreground"
                >
                  <Pencil size={14} strokeWidth={1.8} />
                </Button>
              ) : null}
            </div>

            {onOpenNewInquiry ? (
              <Button
                variant="outline"
                size="sm"
                onClick={onOpenNewInquiry}
                className="gap-1.5 text-ui-label text-foreground"
              >
                <Plus size={15} strokeWidth={2.2} />
                <Trans>New inquiry</Trans>
              </Button>
            ) : null}
          </div>

          {goal ? (
            <div className="rounded-lg border border-border/80 bg-accent/30 p-2.5 flex items-start gap-2.5">
              <Target size={16} strokeWidth={2} className="text-primary shrink-0 mt-0.5" />
              <div className="min-w-0 text-ui-body-sm text-foreground/90 whitespace-pre-wrap break-words leading-relaxed">
                {goal}
              </div>
            </div>
          ) : null}

          {folderPath || gitRemote ? (
            <div className="flex items-center gap-2 flex-wrap pt-0.5 text-ui-caption text-muted-foreground">
              {folderPath ? (
                <div
                  title={folderPath}
                  className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background/50 px-2.5 py-0.5"
                >
                  <FolderOpen size={14} strokeWidth={1.8} />
                  <span className="max-w-[200px] truncate">{folderPath}</span>
                </div>
              ) : null}
              {gitRemote ? (
                <a
                  href={gitRemote}
                  target="_blank"
                  rel="noreferrer"
                  title={gitRemote}
                  className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background/50 px-2.5 py-0.5 hover:text-foreground transition-colors"
                >
                  <GitBranch size={14} strokeWidth={1.8} />
                  <span className="max-w-[200px] truncate">
                    {gitRemote.replace(/^https?:\/\/(www\.)?github\.com\//, "")}
                  </span>
                </a>
              ) : null}
            </div>
          ) : null}
        </div>
      ) : null}

      {visible.length > 0 ? (
        <div className="space-y-1.5">
          <div className="flex flex-wrap gap-2">
            {visible.map((section) => (
              <button
                key={section.id}
                type="button"
                aria-expanded={shown === section.id}
                onClick={() => setOpen(shown === section.id ? "none" : section.id)}
                className="inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1 text-ui-body-sm hover:bg-accent aria-expanded:bg-accent cursor-pointer transition-colors"
              >
                <span className={section.tone}>{section.label}</span>
                <span className="font-semibold tabular-nums text-foreground">
                  {section.runs.length}
                </span>
              </button>
            ))}
          </div>
          {current ? (
            <div className="mt-1">
              {current.runs.map((run) => (
                <ActivityRow key={run.runId} run={run} onOpen={() => onOpenRun(run)} />
              ))}
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}