corporateai 0.0.1

package/ui/src/pages/BoardClaim.tsx

@@ -0,0 +1,125 @@
+import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useParams, useSearchParams } from "@/lib/router";
+import { accessApi } from "../api/access";
+import { authApi } from "../api/auth";
+import { queryKeys } from "../lib/queryKeys";
+import { Button } from "@/components/ui/button";
+
+export function BoardClaimPage() {
+  const queryClient = useQueryClient();
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  const token = (params.token ?? "").trim();
+  const code = (searchParams.get("code") ?? "").trim();
+  const currentPath = useMemo(
+    () => `/board-claim/${encodeURIComponent(token)}${code ? `?code=${encodeURIComponent(code)}` : ""}`,
+    [token, code],
+  );
+
+  const sessionQuery = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+    retry: false,
+  });
+  const statusQuery = useQuery({
+    queryKey: ["board-claim", token, code],
+    queryFn: () => accessApi.getBoardClaimStatus(token, code),
+    enabled: token.length > 0 && code.length > 0,
+    retry: false,
+  });
+
+  const claimMutation = useMutation({
+    mutationFn: () => accessApi.claimBoard(token, code),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: queryKeys.auth.session });
+      await queryClient.invalidateQueries({ queryKey: queryKeys.health });
+      await queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+      await queryClient.invalidateQueries({ queryKey: queryKeys.companies.stats });
+      await statusQuery.refetch();
+    },
+  });
+
+  if (!token || !code) {
+    return <div className="mx-auto max-w-xl py-10 text-sm text-destructive">Invalid board claim URL.</div>;
+  }
+
+  if (statusQuery.isLoading || sessionQuery.isLoading) {
+    return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading claim challenge...</div>;
+  }
+
+  if (statusQuery.error) {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-lg font-semibold">Claim challenge unavailable</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {statusQuery.error instanceof Error ? statusQuery.error.message : "Challenge is invalid or expired."}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const status = statusQuery.data;
+  if (!status) {
+    return <div className="mx-auto max-w-xl py-10 text-sm text-destructive">Claim challenge unavailable.</div>;
+  }
+
+  if (status.status === "claimed") {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-lg font-semibold">Board ownership claimed</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            This instance is now linked to your authenticated user.
+          </p>
+          <Button asChild className="mt-4">
+            <Link to="/">Open board</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!sessionQuery.data) {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-lg font-semibold">Sign in required</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in or create an account, then return to this page to claim Board ownership.
+          </p>
+          <Button asChild className="mt-4">
+            <Link to={`/auth?next=${encodeURIComponent(currentPath)}`}>Sign in / Create account</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-xl py-10">
+      <div className="rounded-lg border border-border bg-card p-6">
+        <h1 className="text-xl font-semibold">Claim Board ownership</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          This will promote your user to instance admin and migrate company ownership access from local trusted mode.
+        </p>
+
+        {claimMutation.error && (
+          <p className="mt-3 text-sm text-destructive">
+            {claimMutation.error instanceof Error ? claimMutation.error.message : "Failed to claim board ownership"}
+          </p>
+        )}
+
+        <Button
+          className="mt-5"
+          onClick={() => claimMutation.mutate()}
+          disabled={claimMutation.isPending}
+        >
+          {claimMutation.isPending ? "Claiming…" : "Claim ownership"}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/CliAuth.tsx

@@ -0,0 +1,184 @@
+import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useParams, useSearchParams } from "@/lib/router";
+import { Button } from "@/components/ui/button";
+import { accessApi } from "../api/access";
+import { authApi } from "../api/auth";
+import { queryKeys } from "../lib/queryKeys";
+
+export function CliAuthPage() {
+  const queryClient = useQueryClient();
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  const challengeId = (params.id ?? "").trim();
+  const token = (searchParams.get("token") ?? "").trim();
+  const currentPath = useMemo(
+    () => `/cli-auth/${encodeURIComponent(challengeId)}${token ? `?token=${encodeURIComponent(token)}` : ""}`,
+    [challengeId, token],
+  );
+
+  const sessionQuery = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+    retry: false,
+  });
+  const challengeQuery = useQuery({
+    queryKey: ["cli-auth-challenge", challengeId, token],
+    queryFn: () => accessApi.getCliAuthChallenge(challengeId, token),
+    enabled: challengeId.length > 0 && token.length > 0,
+    retry: false,
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: () => accessApi.approveCliAuthChallenge(challengeId, token),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: queryKeys.auth.session });
+      await challengeQuery.refetch();
+    },
+  });
+
+  const cancelMutation = useMutation({
+    mutationFn: () => accessApi.cancelCliAuthChallenge(challengeId, token),
+    onSuccess: async () => {
+      await challengeQuery.refetch();
+    },
+  });
+
+  if (!challengeId || !token) {
+    return <div className="mx-auto max-w-xl py-10 text-sm text-destructive">Invalid CLI auth URL.</div>;
+  }
+
+  if (sessionQuery.isLoading || challengeQuery.isLoading) {
+    return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading CLI auth challenge...</div>;
+  }
+
+  if (challengeQuery.error) {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-lg font-semibold">CLI auth challenge unavailable</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {challengeQuery.error instanceof Error ? challengeQuery.error.message : "Challenge is invalid or expired."}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const challenge = challengeQuery.data;
+  if (!challenge) {
+    return <div className="mx-auto max-w-xl py-10 text-sm text-destructive">CLI auth challenge unavailable.</div>;
+  }
+
+  if (challenge.status === "approved") {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-xl font-semibold">CLI access approved</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            The Corporate CLI can now finish authentication on the requesting machine.
+          </p>
+          <p className="mt-4 text-sm text-muted-foreground">
+            Command: <span className="font-mono text-foreground">{challenge.command}</span>
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (challenge.status === "cancelled" || challenge.status === "expired") {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-xl font-semibold">
+            {challenge.status === "expired" ? "CLI auth challenge expired" : "CLI auth challenge cancelled"}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Start the CLI auth flow again from your terminal to generate a new approval request.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (challenge.requiresSignIn || !sessionQuery.data) {
+    return (
+      <div className="mx-auto max-w-xl py-10">
+        <div className="rounded-lg border border-border bg-card p-6">
+          <h1 className="text-xl font-semibold">Sign in required</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in or create an account, then return to this page to approve the CLI access request.
+          </p>
+          <Button asChild className="mt-4">
+            <Link to={`/auth?next=${encodeURIComponent(currentPath)}`}>Sign in / Create account</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-xl py-10">
+      <div className="rounded-lg border border-border bg-card p-6">
+        <h1 className="text-xl font-semibold">Approve Corporate CLI access</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          A local Corporate CLI process is requesting board access to this instance.
+        </p>
+
+        <div className="mt-5 space-y-3 text-sm">
+          <div>
+            <div className="text-muted-foreground">Command</div>
+            <div className="font-mono text-foreground">{challenge.command}</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground">Client</div>
+            <div className="text-foreground">{challenge.clientName ?? "corporateai cli"}</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground">Requested access</div>
+            <div className="text-foreground">
+              {challenge.requestedAccess === "instance_admin_required" ? "Instance admin" : "Board"}
+            </div>
+          </div>
+          {challenge.requestedCompanyName && (
+            <div>
+              <div className="text-muted-foreground">Requested company</div>
+              <div className="text-foreground">{challenge.requestedCompanyName}</div>
+            </div>
+          )}
+        </div>
+
+        {(approveMutation.error || cancelMutation.error) && (
+          <p className="mt-4 text-sm text-destructive">
+            {(approveMutation.error ?? cancelMutation.error) instanceof Error
+              ? ((approveMutation.error ?? cancelMutation.error) as Error).message
+              : "Failed to update CLI auth challenge"}
+          </p>
+        )}
+
+        {!challenge.canApprove && (
+          <p className="mt-4 text-sm text-destructive">
+            This challenge requires instance-admin access. Sign in with an instance admin account to approve it.
+          </p>
+        )}
+
+        <div className="mt-5 flex gap-3">
+          <Button
+            onClick={() => approveMutation.mutate()}
+            disabled={!challenge.canApprove || approveMutation.isPending || cancelMutation.isPending}
+          >
+            {approveMutation.isPending ? "Approving..." : "Approve CLI access"}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => cancelMutation.mutate()}
+            disabled={approveMutation.isPending || cancelMutation.isPending}
+          >
+            {cancelMutation.isPending ? "Cancelling..." : "Cancel"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/Companies.tsx

@@ -0,0 +1,297 @@
+import { useState, useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { companiesApi } from "../api/companies";
+import { queryKeys } from "../lib/queryKeys";
+import { formatCents, relativeTime } from "../lib/utils";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Pencil,
+  Check,
+  X,
+  Plus,
+  MoreHorizontal,
+  Trash2,
+  Users,
+  CircleDot,
+  DollarSign,
+  Calendar,
+} from "lucide-react";
+
+export function Companies() {
+  const {
+    companies,
+    selectedCompanyId,
+    setSelectedCompanyId,
+    loading,
+    error,
+  } = useCompany();
+  const { openOnboarding } = useDialog();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const queryClient = useQueryClient();
+
+  const { data: stats } = useQuery({
+    queryKey: queryKeys.companies.stats,
+    queryFn: () => companiesApi.stats(),
+  });
+
+  // Inline edit state
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const editMutation = useMutation({
+    mutationFn: ({ id, newName }: { id: string; newName: string }) =>
+      companiesApi.update(id, { name: newName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+      setEditingId(null);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => companiesApi.remove(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.stats });
+      setConfirmDeleteId(null);
+    },
+  });
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Companies" }]);
+  }, [setBreadcrumbs]);
+
+  function startEdit(companyId: string, currentName: string) {
+    setEditingId(companyId);
+    setEditName(currentName);
+  }
+
+  function saveEdit() {
+    if (!editingId || !editName.trim()) return;
+    editMutation.mutate({ id: editingId, newName: editName.trim() });
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+    setEditName("");
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-end">
+        <Button size="sm" onClick={() => openOnboarding()}>
+          <Plus className="h-3.5 w-3.5 mr-1.5" />
+          New Company
+        </Button>
+      </div>
+
+      <div className="h-6">
+        {loading && <p className="text-sm text-muted-foreground">Loading companies...</p>}
+        {error && <p className="text-sm text-destructive">{error.message}</p>}
+      </div>
+
+      <div className="grid gap-4">
+        {companies.map((company) => {
+          const selected = company.id === selectedCompanyId;
+          const isEditing = editingId === company.id;
+          const isConfirmingDelete = confirmDeleteId === company.id;
+          const companyStats = stats?.[company.id];
+          const agentCount = companyStats?.agentCount ?? 0;
+          const issueCount = companyStats?.issueCount ?? 0;
+          const budgetPct =
+            company.budgetMonthlyCents > 0
+              ? Math.round(
+                  (company.spentMonthlyCents / company.budgetMonthlyCents) * 100,
+                )
+              : 0;
+
+          return (
+            <div
+              key={company.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => setSelectedCompanyId(company.id)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setSelectedCompanyId(company.id);
+                }
+              }}
+              className={`group text-left bg-card border rounded-lg p-5 transition-colors cursor-pointer ${
+                selected
+                  ? "border-primary ring-1 ring-primary"
+                  : "border-border hover:border-muted-foreground/30"
+              }`}
+            >
+              {/* Header row: name + menu */}
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  {isEditing ? (
+                    <div
+                      className="flex items-center gap-2"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Input
+                        value={editName}
+                        onChange={(e) => setEditName(e.target.value)}
+                        className="h-7 text-sm"
+                        autoFocus
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") saveEdit();
+                          if (e.key === "Escape") cancelEdit();
+                        }}
+                      />
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        onClick={saveEdit}
+                        disabled={editMutation.isPending}
+                      >
+                        <Check className="h-3.5 w-3.5 text-green-500" />
+                      </Button>
+                      <Button variant="ghost" size="icon-xs" onClick={cancelEdit}>
+                        <X className="h-3.5 w-3.5 text-muted-foreground" />
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-semibold text-base">{company.name}</h3>
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${
+                          company.status === "active"
+                            ? "bg-green-500/10 text-green-600 dark:text-green-400"
+                            : company.status === "paused"
+                              ? "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400"
+                              : "bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        {company.status}
+                      </span>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        className="text-muted-foreground opacity-0 group-hover:opacity-100"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          startEdit(company.id, company.name);
+                        }}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  )}
+                  {company.description && !isEditing && (
+                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                      {company.description}
+                    </p>
+                  )}
+                </div>
+
+                {/* Three-dot menu */}
+                <div onClick={(e) => e.stopPropagation()}>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        className="text-muted-foreground opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => startEdit(company.id, company.name)}
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                        Rename
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        variant="destructive"
+                        onClick={() => setConfirmDeleteId(company.id)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Delete Company
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              {/* Stats row */}
+              <div className="flex items-center gap-3 sm:gap-5 mt-4 text-sm text-muted-foreground flex-wrap">
+                <div className="flex items-center gap-1.5">
+                  <Users className="h-3.5 w-3.5" />
+                  <span>
+                    {agentCount} {agentCount === 1 ? "agent" : "agents"}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <CircleDot className="h-3.5 w-3.5" />
+                  <span>
+                    {issueCount} {issueCount === 1 ? "issue" : "issues"}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5 tabular-nums">
+                  <DollarSign className="h-3.5 w-3.5" />
+                  <span>
+                    {formatCents(company.spentMonthlyCents)}
+                    {company.budgetMonthlyCents > 0
+                      ? <> / {formatCents(company.budgetMonthlyCents)} <span className="text-xs">({budgetPct}%)</span></>
+                      : <span className="text-xs ml-1">Unlimited budget</span>}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5 ml-auto">
+                  <Calendar className="h-3.5 w-3.5" />
+                  <span>Created {relativeTime(company.createdAt)}</span>
+                </div>
+              </div>
+
+              {/* Delete confirmation */}
+              {isConfirmingDelete && (
+                <div
+                  className="mt-4 flex items-center justify-between bg-destructive/5 border border-destructive/20 rounded-md px-4 py-3"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <p className="text-sm text-destructive font-medium">
+                    Delete this company and all its data? This cannot be undone.
+                  </p>
+                  <div className="flex items-center gap-2 ml-4 shrink-0">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setConfirmDeleteId(null)}
+                      disabled={deleteMutation.isPending}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => deleteMutation.mutate(company.id)}
+                      disabled={deleteMutation.isPending}
+                    >
+                      {deleteMutation.isPending ? "Deleting…" : "Delete"}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}