zopu-code/apps/web/src/components/projects/project-workspace-page.tsx

import type { Doc, Id } from "@code/backend/convex/_generated/dataModel";
import { Button } from "@code/ui/components/button";
import { Input } from "@code/ui/components/input";
import { Textarea } from "@code/ui/components/textarea";
import {
  Bot,
  ExternalLink,
  FileText,
  GitFork,
  GitPullRequest,
  Play,
  Plus,
} from "lucide-react";

import UserMenu from "@/components/user-menu";
import { useProjectWorkspace } from "@/hooks/use-project-workspace";

const statusStyle: Record<Doc<"projectIssues">["status"], string> = {
  completed:
    "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
  failed:
    "border-destructive/40 bg-destructive/10 text-destructive",
  "needs-input":
    "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
  open: "border-border bg-muted/40 text-muted-foreground",
  queued: "border-blue-500/40 bg-blue-500/10 text-blue-700 dark:text-blue-300",
  working:
    "border-blue-500/40 bg-blue-500/10 text-blue-700 dark:text-blue-300",
};

interface RepositoryFormProps {
  readonly busy: boolean;
  readonly onChange: (value: string) => void;
  readonly onSubmit: () => void;
  readonly value: string;
}

const RepositoryForm = ({
  busy,
  onChange,
  onSubmit,
  value,
}: RepositoryFormProps) => (
  <form
    className="space-y-2 border-b p-3"
    onSubmit={(event) => {
      event.preventDefault();
      onSubmit();
    }}
  >
    <div className="space-y-1">
      <label className="text-xs font-medium" htmlFor="git-repository">
        Public Git repository
      </label>
      <p className="text-xs text-muted-foreground">
        Import with a public HTTP(S) Git URL.
      </p>
    </div>
    <Input
      id="git-repository"
      onChange={(event) => onChange(event.target.value)}
      placeholder="https://github.com/owner/repo"
      required
      value={value}
    />
    <Button className="w-full" disabled={busy} type="submit">
      <GitFork data-icon="inline-start" />
      {busy ? "Importing" : "Import repository"}
    </Button>
  </form>
);

interface ProjectListProps {
  readonly projects: readonly {
    readonly id: string;
    readonly name: string;
    readonly sources: readonly {
      readonly host: string;
      readonly repositoryPath: string;
      readonly url: string;
    }[];
  }[] | undefined;
  readonly selectedId: Id<"projects"> | null;
  readonly onSelect: (projectId: Id<"projects">) => void;
}

const ProjectList = ({ projects, selectedId, onSelect }: ProjectListProps) => {
  const renderContent = () => {
    if (projects === undefined) {
      return (
        <p className="p-3 text-xs text-muted-foreground">Loading projects...</p>
      );
    }
    if (projects.length === 0) {
      return (
        <p className="p-3 text-xs leading-relaxed text-muted-foreground">
          Import a repository to create its project artifacts and issue queue.
        </p>
      );
    }
    return (
      <div className="grid gap-1">
        {projects.map((project) => (
          <button
            className={`w-full border px-3 py-2 text-left transition-colors ${
              selectedId === project.id
                ? "border-foreground/30 bg-muted"
                : "border-transparent hover:bg-muted/60"
            }`}
            key={project.id}
            onClick={() => onSelect(project.id as Id<"projects">)}
            type="button"
          >
            <span className="block truncate text-sm font-medium">
              {project.name}
            </span>
            <span className="block truncate text-xs text-muted-foreground">
              {project.sources[0]?.host}
              {project.sources[0]?.repositoryPath}
            </span>
          </button>
        ))}
      </div>
    );
  };

  return (
    <nav
      aria-label="Connected projects"
      className="min-h-0 flex-1 overflow-y-auto p-2"
    >
      {renderContent()}
    </nav>
  );
};

interface ArtifactGridProps {
  readonly artifacts: readonly Doc<"projectArtifacts">[] | undefined;
}

const ArtifactGrid = ({ artifacts }: ArtifactGridProps) => (
  <section aria-labelledby="artifact-heading" className="space-y-3">
    <h2 id="artifact-heading" className="text-sm font-semibold">
      Project artifacts
    </h2>
    {artifacts === undefined ? (
      <p className="text-xs text-muted-foreground">Loading artifacts...</p>
    ) : artifacts.length === 0 ? (
      <p className="text-xs text-muted-foreground">No artifacts yet.</p>
    ) : (
      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
        {artifacts.map((artifact) => (
          <div
            className="border p-3"
            key={artifact._id}
          >
            <FileText className="mb-2 size-4 text-muted-foreground" />
            <p className="truncate text-xs font-medium">{artifact.path}</p>
            <p className="text-[10px] text-muted-foreground">
              rev {artifact.revision}
            </p>
          </div>
        ))}
      </div>
    )}
  </section>
);

interface IssueComposerProps {
  readonly body: string;
  readonly busy: boolean;
  readonly onBodyChange: (value: string) => void;
  readonly onSubmit: () => void;
  readonly onTitleChange: (value: string) => void;
  readonly title: string;
}

const IssueComposer = ({
  body,
  busy,
  onBodyChange,
  onSubmit,
  onTitleChange,
  title,
}: IssueComposerProps) => (
  <form
    className="space-y-3"
    onSubmit={(event) => {
      event.preventDefault();
      onSubmit();
    }}
  >
    <h2 className="text-sm font-semibold">New issue</h2>
    <Input
      onChange={(event) => onTitleChange(event.target.value)}
      placeholder="Issue title"
      required
      value={title}
    />
    <Textarea
      onChange={(event) => onBodyChange(event.target.value)}
      placeholder="Describe the issue..."
      required
      rows={4}
      value={body}
    />
    <Button className="w-full" disabled={busy} type="submit">
      <Plus data-icon="inline-start" />
      {busy ? "Creating" : "Create issue"}
    </Button>
  </form>
);

interface IssueListProps {
  readonly issues: readonly Doc<"projectIssues">[] | undefined;
  readonly pendingAction: string | null;
  readonly onStart: (
    issueId: Id<"projectIssues">,
    issueNumber: number,
    title: string
  ) => void;
}

const IssueList = ({ issues, pendingAction, onStart }: IssueListProps) => {
  if (issues === undefined) {
    return (
      <p className="text-xs text-muted-foreground">Loading issues...</p>
    );
  }
  if (issues.length === 0) {
    return (
      <p className="text-xs text-muted-foreground">
        No issues yet. Create one to start agent work.
      </p>
    );
  }
  return (
    <div className="space-y-2">
      <h2 className="text-sm font-semibold">Issues</h2>
      {issues.map((issue) => (
        <div className="border p-3" key={issue._id}>
          <div className="flex items-center justify-between gap-2">
            <span className="text-sm font-medium">
              #{issue.number} · {issue.title}
            </span>
            <span
              className={`rounded border px-2 py-0.5 text-[10px] font-medium ${statusStyle[issue.status]}`}
            >
              {issue.status}
            </span>
          </div>
          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
            {issue.body}
          </p>
          {(issue.status === "open" || issue.status === "failed") && (
            <Button
              className="mt-2"
              disabled={pendingAction === `issue:${issue._id}`}
              onClick={() => onStart(issue._id, issue.number, issue.title)}
              size="sm"
              variant="outline"
            >
              <Play data-icon="inline-start" />
              {pendingAction === `issue:${issue._id}` ? "Starting" : "Start"}
            </Button>
          )}
        </div>
      ))}
    </div>
  );
};

export const ProjectWorkspacePage = () => {
  const workspace = useProjectWorkspace();
  const handleRepositoryChange = workspace.setRepository;
  const handleRepositorySubmit = workspace.connectRepository;
  const handleProjectSelect = workspace.setSelectedProjectId;
  const handleIssueBodyChange = workspace.setIssueBody;
  const handleIssueSubmit = workspace.raiseIssue;
  const handleIssueTitleChange = workspace.setIssueTitle;
  const handleIssueStart = workspace.startIssue;
  const projectSource = workspace.selectedProject?.sources[0];

  return (
    <main className="min-h-svh bg-background text-foreground">
      <header className="border-b">
        <div className="mx-auto flex max-w-[1400px] items-center justify-between px-4 py-3 md:px-6">
          <div className="flex items-center gap-3">
            <div className="grid size-8 place-items-center border bg-muted">
              <Bot className="size-4" />
            </div>
            <div>
              <p className="text-sm font-semibold">Project manager</p>
              <p className="text-xs text-muted-foreground">
                Git · Flue · AgentOS
              </p>
            </div>
          </div>
          <UserMenu />
        </div>
      </header>

      <div className="mx-auto grid min-h-[calc(100svh-57px)] max-w-[1400px] md:grid-cols-[260px_1fr]">
        <aside className="flex min-h-0 flex-col border-b md:border-r md:border-b-0">
          <RepositoryForm
            busy={workspace.pendingAction === "connect"}
            onChange={handleRepositoryChange}
            onSubmit={handleRepositorySubmit}
            value={workspace.repository}
          />
          <ProjectList
            onSelect={handleProjectSelect}
            projects={workspace.projects}
            selectedId={workspace.selectedProjectId}
          />
        </aside>

        <div className="min-w-0 p-4 md:p-6 lg:p-8">
          {workspace.error ? (
            <div className="mb-4 border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
              {workspace.error}
            </div>
          ) : null}

          {workspace.selectedProject ? (
            <div className="grid gap-8">
              <div className="flex flex-col gap-3 border-b pb-5 sm:flex-row sm:items-end sm:justify-between">
                <div>
                  <p className="text-xs text-muted-foreground">
                    Connected repository
                  </p>
                  <h1 className="text-2xl font-semibold tracking-tight">
                    {workspace.selectedProject.name}
                  </h1>
                  <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
                    {projectSource?.host}/{projectSource?.repositoryPath}
                  </p>
                </div>
                <Button
                  onClick={() =>
                    window.open(
                      projectSource?.url,
                      "_blank",
                      "noopener,noreferrer"
                    )
                  }
                  type="button"
                  variant="outline"
                >
                  <ExternalLink data-icon="inline-start" />
                  Open repository
                </Button>
              </div>

              <ArtifactGrid artifacts={workspace.artifacts} />

              <div className="grid items-start gap-5 lg:grid-cols-[minmax(280px,380px)_1fr]">
                <IssueComposer
                  body={workspace.issueBody}
                  busy={workspace.pendingAction === "issue"}
                  onBodyChange={handleIssueBodyChange}
                  onSubmit={handleIssueSubmit}
                  onTitleChange={handleIssueTitleChange}
                  title={workspace.issueTitle}
                />
                <IssueList
                  issues={workspace.issues}
                  onStart={handleIssueStart}
                  pendingAction={workspace.pendingAction}
                />
              </div>
            </div>
          ) : (
            <div className="grid min-h-[60svh] place-items-center text-center">
              <div className="max-w-sm space-y-2">
                <GitFork className="mx-auto size-7 text-muted-foreground" />
                <h1 className="text-xl font-semibold">
                  Import your first repository
                </h1>
                <p className="text-sm text-muted-foreground">
                  Zopu creates the project artifact set and opens an issue queue
                  for agent work.
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </main>
  );
};