corporateai 0.0.1

package/ui/src/pages/ApprovalDetail.tsx

@@ -0,0 +1,369 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams, useSearchParams } from "@/lib/router";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { approvalsApi } from "../api/approvals";
+import { agentsApi } from "../api/agents";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { StatusBadge } from "../components/StatusBadge";
+import { Identity } from "../components/Identity";
+import { approvalLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "../components/ApprovalPayload";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { CheckCircle2, ChevronRight, Sparkles } from "lucide-react";
+import type { ApprovalComment } from "@corporateai/shared";
+import { MarkdownBody } from "../components/MarkdownBody";
+
+export function ApprovalDetail() {
+  const { approvalId } = useParams<{ approvalId: string }>();
+  const { selectedCompanyId, setSelectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+  const [commentBody, setCommentBody] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [showRawPayload, setShowRawPayload] = useState(false);
+
+  const { data: approval, isLoading } = useQuery({
+    queryKey: queryKeys.approvals.detail(approvalId!),
+    queryFn: () => approvalsApi.get(approvalId!),
+    enabled: !!approvalId,
+  });
+  const resolvedCompanyId = approval?.companyId ?? selectedCompanyId;
+
+  const { data: comments } = useQuery({
+    queryKey: queryKeys.approvals.comments(approvalId!),
+    queryFn: () => approvalsApi.listComments(approvalId!),
+    enabled: !!approvalId,
+  });
+
+  const { data: linkedIssues } = useQuery({
+    queryKey: queryKeys.approvals.issues(approvalId!),
+    queryFn: () => approvalsApi.listIssues(approvalId!),
+    enabled: !!approvalId,
+  });
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(resolvedCompanyId ?? ""),
+    queryFn: () => agentsApi.list(resolvedCompanyId ?? ""),
+    enabled: !!resolvedCompanyId,
+  });
+
+  useEffect(() => {
+    if (!approval?.companyId || approval.companyId === selectedCompanyId) return;
+    setSelectedCompanyId(approval.companyId, { source: "route_sync" });
+  }, [approval?.companyId, selectedCompanyId, setSelectedCompanyId]);
+
+  const agentNameById = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const agent of agents ?? []) map.set(agent.id, agent.name);
+    return map;
+  }, [agents]);
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Approvals", href: "/approvals" },
+      { label: approval?.id?.slice(0, 8) ?? approvalId ?? "Approval" },
+    ]);
+  }, [setBreadcrumbs, approval, approvalId]);
+
+  const refresh = () => {
+    if (!approvalId) return;
+    queryClient.invalidateQueries({ queryKey: queryKeys.approvals.detail(approvalId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.approvals.comments(approvalId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.approvals.issues(approvalId) });
+    if (approval?.companyId) {
+      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(approval.companyId) });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.approvals.list(approval.companyId, "pending"),
+      });
+      queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(approval.companyId) });
+    }
+  };
+
+  const approveMutation = useMutation({
+    mutationFn: () => approvalsApi.approve(approvalId!),
+    onSuccess: () => {
+      setError(null);
+      refresh();
+      navigate(`/approvals/${approvalId}?resolved=approved`, { replace: true });
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Approve failed"),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: () => approvalsApi.reject(approvalId!),
+    onSuccess: () => {
+      setError(null);
+      refresh();
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Reject failed"),
+  });
+
+  const revisionMutation = useMutation({
+    mutationFn: () => approvalsApi.requestRevision(approvalId!),
+    onSuccess: () => {
+      setError(null);
+      refresh();
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Revision request failed"),
+  });
+
+  const resubmitMutation = useMutation({
+    mutationFn: () => approvalsApi.resubmit(approvalId!),
+    onSuccess: () => {
+      setError(null);
+      refresh();
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Resubmit failed"),
+  });
+
+  const addCommentMutation = useMutation({
+    mutationFn: () => approvalsApi.addComment(approvalId!, commentBody.trim()),
+    onSuccess: () => {
+      setCommentBody("");
+      setError(null);
+      refresh();
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Comment failed"),
+  });
+
+  const deleteAgentMutation = useMutation({
+    mutationFn: (agentId: string) => agentsApi.remove(agentId),
+    onSuccess: () => {
+      setError(null);
+      refresh();
+      navigate("/approvals");
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Delete failed"),
+  });
+
+  if (isLoading) return <PageSkeleton variant="detail" />;
+  if (!approval) return <p className="text-sm text-muted-foreground">Approval not found.</p>;
+
+  const payload = approval.payload as Record<string, unknown>;
+  const linkedAgentId = typeof payload.agentId === "string" ? payload.agentId : null;
+  const isActionable = approval.status === "pending" || approval.status === "revision_requested";
+  const isBudgetApproval = approval.type === "budget_override_required";
+  const TypeIcon = typeIcon[approval.type] ?? defaultTypeIcon;
+  const showApprovedBanner = searchParams.get("resolved") === "approved" && approval.status === "approved";
+  const primaryLinkedIssue = linkedIssues?.[0] ?? null;
+  const resolvedCta =
+    primaryLinkedIssue
+      ? {
+          label:
+            (linkedIssues?.length ?? 0) > 1
+              ? "Review linked issues"
+              : "Review linked issue",
+          to: `/issues/${primaryLinkedIssue.identifier ?? primaryLinkedIssue.id}`,
+        }
+      : linkedAgentId
+        ? {
+            label: "Open hired agent",
+            to: `/agents/${linkedAgentId}`,
+          }
+        : {
+            label: "Back to approvals",
+            to: "/approvals",
+          };
+
+  return (
+    <div className="space-y-6 max-w-3xl">
+      {showApprovedBanner && (
+        <div className="border border-green-300 dark:border-green-700/40 bg-green-50 dark:bg-green-900/20 rounded-lg px-4 py-3 animate-in fade-in zoom-in-95 duration-300">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex items-start gap-2">
+              <div className="relative mt-0.5">
+                <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-300" />
+                <Sparkles className="h-3 w-3 text-green-500 dark:text-green-200 absolute -right-2 -top-1 animate-pulse" />
+              </div>
+              <div>
+                <p className="text-sm text-green-800 dark:text-green-100 font-medium">Approval confirmed</p>
+                <p className="text-xs text-green-700 dark:text-green-200/90">
+                  Requesting agent was notified to review this approval and linked issues.
+                </p>
+              </div>
+            </div>
+            <Button
+              size="sm"
+              variant="outline"
+              className="border-green-400 dark:border-green-600/50 text-green-800 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-900/30"
+              onClick={() => navigate(resolvedCta.to)}
+            >
+              {resolvedCta.label}
+            </Button>
+          </div>
+        </div>
+      )}
+      <div className="border border-border rounded-lg p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TypeIcon className="h-5 w-5 text-muted-foreground shrink-0" />
+            <div>
+              <h2 className="text-lg font-semibold">{approvalLabel(approval.type, approval.payload as Record<string, unknown> | null)}</h2>
+              <p className="text-xs text-muted-foreground font-mono">{approval.id}</p>
+            </div>
+          </div>
+          <StatusBadge status={approval.status} />
+        </div>
+        <div className="text-sm space-y-1">
+          {approval.requestedByAgentId && (
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-xs">Requested by</span>
+              <Identity
+                name={agentNameById.get(approval.requestedByAgentId) ?? approval.requestedByAgentId.slice(0, 8)}
+                size="sm"
+              />
+            </div>
+          )}
+          <ApprovalPayloadRenderer type={approval.type} payload={payload} />
+          <button
+            type="button"
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mt-2"
+            onClick={() => setShowRawPayload((v) => !v)}
+          >
+            <ChevronRight className={`h-3 w-3 transition-transform ${showRawPayload ? "rotate-90" : ""}`} />
+            See full request
+          </button>
+          {showRawPayload && (
+            <pre className="text-xs bg-muted/40 rounded-md p-3 overflow-x-auto">
+              {JSON.stringify(payload, null, 2)}
+            </pre>
+          )}
+          {approval.decisionNote && (
+            <p className="text-xs text-muted-foreground">Decision note: {approval.decisionNote}</p>
+          )}
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        {linkedIssues && linkedIssues.length > 0 && (
+          <div className="pt-2 border-t border-border/60">
+            <p className="text-xs text-muted-foreground mb-1.5">Linked Issues</p>
+            <div className="space-y-1.5">
+              {linkedIssues.map((issue) => (
+                <Link
+                  key={issue.id}
+                  to={`/issues/${issue.identifier ?? issue.id}`}
+                  className="block text-xs rounded border border-border/70 px-2 py-1.5 hover:bg-accent/20"
+                >
+                  <span className="font-mono text-muted-foreground mr-2">
+                    {issue.identifier ?? issue.id.slice(0, 8)}
+                  </span>
+                  <span>{issue.title}</span>
+                </Link>
+              ))}
+            </div>
+            <p className="text-[11px] text-muted-foreground mt-2">
+              Linked issues remain open until the requesting agent follows up and closes them.
+            </p>
+          </div>
+        )}
+        <div className="flex flex-wrap items-center gap-2">
+          {isActionable && !isBudgetApproval && (
+            <>
+              <Button
+                size="sm"
+                className="bg-green-700 hover:bg-green-600 text-white"
+                onClick={() => approveMutation.mutate()}
+                disabled={approveMutation.isPending}
+              >
+                Approve
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => rejectMutation.mutate()}
+                disabled={rejectMutation.isPending}
+              >
+                Reject
+              </Button>
+            </>
+          )}
+          {isBudgetApproval && approval.status === "pending" && (
+            <p className="text-sm text-muted-foreground">
+              Resolve this budget stop from the budget controls on <Link to="/costs" className="underline underline-offset-2">/costs</Link>.
+            </p>
+          )}
+          {approval.status === "pending" && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => revisionMutation.mutate()}
+              disabled={revisionMutation.isPending}
+            >
+              Request revision
+            </Button>
+          )}
+          {approval.status === "revision_requested" && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => resubmitMutation.mutate()}
+              disabled={resubmitMutation.isPending}
+            >
+              Mark resubmitted
+            </Button>
+          )}
+          {approval.status === "rejected" && approval.type === "hire_agent" && linkedAgentId && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-destructive border-destructive/40"
+              onClick={() => {
+                if (!window.confirm("Delete this disapproved agent? This cannot be undone.")) return;
+                deleteAgentMutation.mutate(linkedAgentId);
+              }}
+              disabled={deleteAgentMutation.isPending}
+            >
+              Delete disapproved agent
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="border border-border rounded-lg p-4 space-y-3">
+        <h3 className="text-sm font-medium">Comments ({comments?.length ?? 0})</h3>
+        <div className="space-y-2">
+          {(comments ?? []).map((comment: ApprovalComment) => (
+            <div key={comment.id} className="border border-border/60 rounded-md p-3">
+              <div className="flex items-center justify-between mb-1">
+                {comment.authorAgentId ? (
+                  <Link to={`/agents/${comment.authorAgentId}`} className="hover:underline">
+                    <Identity
+                      name={agentNameById.get(comment.authorAgentId) ?? comment.authorAgentId.slice(0, 8)}
+                      size="sm"
+                    />
+                  </Link>
+                ) : (
+                  <Identity name="Board" size="sm" />
+                )}
+                <span className="text-xs text-muted-foreground">
+                  {new Date(comment.createdAt).toLocaleString()}
+                </span>
+              </div>
+              <MarkdownBody className="text-sm">{comment.body}</MarkdownBody>
+            </div>
+          ))}
+        </div>
+        <Textarea
+          value={commentBody}
+          onChange={(e) => setCommentBody(e.target.value)}
+          placeholder="Add a comment..."
+          rows={3}
+        />
+        <div className="flex justify-end">
+          <Button
+            size="sm"
+            onClick={() => addCommentMutation.mutate()}
+            disabled={!commentBody.trim() || addCommentMutation.isPending}
+          >
+            {addCommentMutation.isPending ? "Posting…" : "Post comment"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/ui/src/pages/Approvals.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "@/lib/router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { approvalsApi } from "../api/approvals";
+import { agentsApi } from "../api/agents";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { cn } from "../lib/utils";
+import { PageTabBar } from "../components/PageTabBar";
+import { Tabs } from "@/components/ui/tabs";
+import { ShieldCheck } from "lucide-react";
+import { ApprovalCard } from "../components/ApprovalCard";
+import { PageSkeleton } from "../components/PageSkeleton";
+
+type StatusFilter = "pending" | "all";
+
+export function Approvals() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const pathSegment = location.pathname.split("/").pop() ?? "pending";
+  const statusFilter: StatusFilter = pathSegment === "all" ? "all" : "pending";
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Approvals" }]);
+  }, [setBreadcrumbs]);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: queryKeys.approvals.list(selectedCompanyId!),
+    queryFn: () => approvalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: (id: string) => approvalsApi.approve(id),
+    onSuccess: (_approval, id) => {
+      setActionError(null);
+      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
+      navigate(`/approvals/${id}?resolved=approved`);
+    },
+    onError: (err) => {
+      setActionError(err instanceof Error ? err.message : "Failed to approve");
+    },
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: (id: string) => approvalsApi.reject(id),
+    onSuccess: () => {
+      setActionError(null);
+      queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
+    },
+    onError: (err) => {
+      setActionError(err instanceof Error ? err.message : "Failed to reject");
+    },
+  });
+
+  const filtered = (data ?? [])
+    .filter(
+      (a) => statusFilter === "all" || a.status === "pending" || a.status === "revision_requested",
+    )
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+  const pendingCount = (data ?? []).filter(
+    (a) => a.status === "pending" || a.status === "revision_requested",
+  ).length;
+
+  if (!selectedCompanyId) {
+    return <p className="text-sm text-muted-foreground">Select a company first.</p>;
+  }
+
+  if (isLoading) {
+    return <PageSkeleton variant="approvals" />;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Tabs value={statusFilter} onValueChange={(v) => navigate(`/approvals/${v}`)}>
+          <PageTabBar items={[
+            { value: "pending", label: <>Pending{pendingCount > 0 && (
+              <span className={cn(
+                "ml-1.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium",
+                "bg-yellow-500/20 text-yellow-500"
+              )}>
+                {pendingCount}
+              </span>
+            )}</> },
+            { value: "all", label: "All" },
+          ]} />
+        </Tabs>
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error.message}</p>}
+      {actionError && <p className="text-sm text-destructive">{actionError}</p>}
+
+      {filtered.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <ShieldCheck className="h-8 w-8 text-muted-foreground/30 mb-3" />
+          <p className="text-sm text-muted-foreground">
+            {statusFilter === "pending" ? "No pending approvals." : "No approvals yet."}
+          </p>
+        </div>
+      )}
+
+      {filtered.length > 0 && (
+        <div className="grid gap-3">
+          {filtered.map((approval) => (
+            <ApprovalCard
+              key={approval.id}
+              approval={approval}
+              requesterAgent={approval.requestedByAgentId ? (agents ?? []).find((a) => a.id === approval.requestedByAgentId) ?? null : null}
+              onApprove={() => approveMutation.mutate(approval.id)}
+              onReject={() => rejectMutation.mutate(approval.id)}
+              detailLink={`/approvals/${approval.id}`}
+              isPending={approveMutation.isPending || rejectMutation.isPending}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/pages/Auth.tsx

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useSearchParams } from "@/lib/router";
+import { authApi } from "../api/auth";
+import { queryKeys } from "../lib/queryKeys";
+import { Button } from "@/components/ui/button";
+import { AsciiArtAnimation } from "@/components/AsciiArtAnimation";
+import { Sparkles } from "lucide-react";
+
+type AuthMode = "sign_in" | "sign_up";
+
+export function AuthPage() {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [mode, setMode] = useState<AuthMode>("sign_in");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const nextPath = useMemo(() => searchParams.get("next") || "/", [searchParams]);
+  const { data: session, isLoading: isSessionLoading } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (session) {
+      navigate(nextPath, { replace: true });
+    }
+  }, [session, navigate, nextPath]);
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      if (mode === "sign_in") {
+        await authApi.signInEmail({ email: email.trim(), password });
+        return;
+      }
+      await authApi.signUpEmail({
+        name: name.trim(),
+        email: email.trim(),
+        password,
+      });
+    },
+    onSuccess: async () => {
+      setError(null);
+      await queryClient.invalidateQueries({ queryKey: queryKeys.auth.session });
+      await queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+      navigate(nextPath, { replace: true });
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : "Authentication failed");
+    },
+  });
+
+  const canSubmit =
+    email.trim().length > 0 &&
+    password.trim().length > 0 &&
+    (mode === "sign_in" || (name.trim().length > 0 && password.trim().length >= 8));
+
+  if (isSessionLoading) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center">
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 flex bg-background">
+      {/* Left half — form */}
+      <div className="w-full md:w-1/2 flex flex-col overflow-y-auto">
+        <div className="w-full max-w-md mx-auto my-auto px-8 py-12">
+          <div className="flex items-center gap-2 mb-8">
+            <Sparkles className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Corporate</span>
+          </div>
+
+          <h1 className="text-xl font-semibold">
+            {mode === "sign_in" ? "Sign in to Corporate" : "Create your Corporate account"}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {mode === "sign_in"
+              ? "Use your email and password to access this instance."
+              : "Create an account for this instance. Email confirmation is not required in v1."}
+          </p>
+
+          <form
+            className="mt-6 space-y-4"
+            method="post"
+            action={mode === "sign_up" ? "/api/auth/sign-up/email" : "/api/auth/sign-in/email"}
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (mutation.isPending) return;
+              if (!canSubmit) {
+                setError("Please fill in all required fields.");
+                return;
+              }
+              mutation.mutate();
+            }}
+          >
+            {mode === "sign_up" && (
+              <div>
+                <label htmlFor="name" className="text-xs text-muted-foreground mb-1 block">Name</label>
+                <input
+                  id="name"
+                  name="name"
+                  className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                  autoComplete="name"
+                  autoFocus
+                />
+              </div>
+            )}
+            <div>
+              <label htmlFor="email" className="text-xs text-muted-foreground mb-1 block">Email</label>
+              <input
+                id="email"
+                name="email"
+                className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                autoComplete="email"
+                autoFocus={mode === "sign_in"}
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="text-xs text-muted-foreground mb-1 block">Password</label>
+              <input
+                id="password"
+                name="password"
+                className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                autoComplete={mode === "sign_in" ? "current-password" : "new-password"}
+              />
+            </div>
+            {error && <p className="text-xs text-destructive">{error}</p>}
+            <Button
+              type="submit"
+              disabled={mutation.isPending}
+              aria-disabled={!canSubmit || mutation.isPending}
+              className={`w-full ${!canSubmit && !mutation.isPending ? "opacity-50" : ""}`}
+            >
+              {mutation.isPending
+                ? "Working…"
+                : mode === "sign_in"
+                  ? "Sign In"
+                  : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="mt-5 text-sm text-muted-foreground">
+            {mode === "sign_in" ? "Need an account?" : "Already have an account?"}{" "}
+            <button
+              type="button"
+              className="font-medium text-foreground underline underline-offset-2"
+              onClick={() => {
+                setError(null);
+                setMode(mode === "sign_in" ? "sign_up" : "sign_in");
+              }}
+            >
+              {mode === "sign_in" ? "Create one" : "Sign in"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Right half — ASCII art animation (hidden on mobile) */}
+      <div className="hidden md:block w-1/2 overflow-hidden">
+        <AsciiArtAnimation />
+      </div>
+    </div>
+  );
+}