corporateai 0.0.1

package/ui/src/components/DevRestartBanner.tsx

@@ -0,0 +1,89 @@
+import { AlertTriangle, RotateCcw, TimerReset } from "lucide-react";
+import type { DevServerHealthStatus } from "../api/health";
+
+function formatRelativeTimestamp(value: string | null): string | null {
+  if (!value) return null;
+  const timestamp = new Date(value).getTime();
+  if (Number.isNaN(timestamp)) return null;
+
+  const deltaMs = Date.now() - timestamp;
+  if (deltaMs < 60_000) return "just now";
+  const deltaMinutes = Math.round(deltaMs / 60_000);
+  if (deltaMinutes < 60) return `${deltaMinutes}m ago`;
+  const deltaHours = Math.round(deltaMinutes / 60);
+  if (deltaHours < 24) return `${deltaHours}h ago`;
+  const deltaDays = Math.round(deltaHours / 24);
+  return `${deltaDays}d ago`;
+}
+
+function describeReason(devServer: DevServerHealthStatus): string {
+  if (devServer.reason === "backend_changes_and_pending_migrations") {
+    return "backend files changed and migrations are pending";
+  }
+  if (devServer.reason === "pending_migrations") {
+    return "pending migrations need a fresh boot";
+  }
+  return "backend files changed since this server booted";
+}
+
+export function DevRestartBanner({ devServer }: { devServer?: DevServerHealthStatus }) {
+  if (!devServer?.enabled || !devServer.restartRequired) return null;
+
+  const changedAt = formatRelativeTimestamp(devServer.lastChangedAt);
+  const sample = devServer.changedPathsSample.slice(0, 3);
+
+  return (
+    <div className="border-b border-amber-300/60 bg-amber-50 text-amber-950 dark:border-amber-500/25 dark:bg-amber-500/10 dark:text-amber-100">
+      <div className="flex flex-col gap-3 px-3 py-2.5 md:flex-row md:items-center md:justify-between">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2 text-[12px] font-semibold uppercase tracking-[0.18em]">
+            <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+            <span>Restart Required</span>
+            {devServer.autoRestartEnabled ? (
+              <span className="rounded-full bg-amber-900/10 px-2 py-0.5 text-[10px] tracking-[0.14em] dark:bg-amber-100/10">
+                Auto-Restart On
+              </span>
+            ) : null}
+          </div>
+          <p className="mt-1 text-sm">
+            {describeReason(devServer)}
+            {changedAt ? ` · updated ${changedAt}` : ""}
+          </p>
+          <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-amber-900/80 dark:text-amber-100/75">
+            {sample.length > 0 ? (
+              <span>
+                Changed: {sample.join(", ")}
+                {devServer.changedPathCount > sample.length ? ` +${devServer.changedPathCount - sample.length} more` : ""}
+              </span>
+            ) : null}
+            {devServer.pendingMigrations.length > 0 ? (
+              <span>
+                Pending migrations: {devServer.pendingMigrations.slice(0, 2).join(", ")}
+                {devServer.pendingMigrations.length > 2 ? ` +${devServer.pendingMigrations.length - 2} more` : ""}
+              </span>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2 text-xs font-medium">
+          {devServer.waitingForIdle ? (
+            <div className="inline-flex items-center gap-2 rounded-full bg-amber-900/10 px-3 py-1.5 dark:bg-amber-100/10">
+              <TimerReset className="h-3.5 w-3.5" />
+              <span>Waiting for {devServer.activeRunCount} live run{devServer.activeRunCount === 1 ? "" : "s"} to finish</span>
+            </div>
+          ) : devServer.autoRestartEnabled ? (
+            <div className="inline-flex items-center gap-2 rounded-full bg-amber-900/10 px-3 py-1.5 dark:bg-amber-100/10">
+              <RotateCcw className="h-3.5 w-3.5" />
+              <span>Auto-restart will trigger when the instance is idle</span>
+            </div>
+          ) : (
+            <div className="inline-flex items-center gap-2 rounded-full bg-amber-900/10 px-3 py-1.5 dark:bg-amber-100/10">
+              <RotateCcw className="h-3.5 w-3.5" />
+              <span>Restart <code>pnpm dev:once</code> after the active work is safe to interrupt</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/src/components/EmptyState.tsx

@@ -0,0 +1,27 @@
+import { Plus } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  message: string;
+  action?: string;
+  onAction?: () => void;
+}
+
+export function EmptyState({ icon: Icon, message, action, onAction }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="bg-muted/50 p-4 mb-4">
+        <Icon className="h-10 w-10 text-muted-foreground/50" />
+      </div>
+      <p className="text-sm text-muted-foreground mb-4">{message}</p>
+      {action && onAction && (
+        <Button onClick={onAction}>
+          <Plus className="h-4 w-4 mr-1.5" />
+          {action}
+        </Button>
+      )}
+    </div>
+  );
+}

package/ui/src/components/EntityRow.tsx

@@ -0,0 +1,69 @@
+import { type ReactNode } from "react";
+import { Link } from "@/lib/router";
+import { cn } from "../lib/utils";
+
+interface EntityRowProps {
+  leading?: ReactNode;
+  identifier?: string;
+  title: string;
+  subtitle?: string;
+  trailing?: ReactNode;
+  selected?: boolean;
+  to?: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function EntityRow({
+  leading,
+  identifier,
+  title,
+  subtitle,
+  trailing,
+  selected,
+  to,
+  onClick,
+  className,
+}: EntityRowProps) {
+  const isClickable = !!(to || onClick);
+  const classes = cn(
+    "flex items-center gap-3 px-4 py-2 text-sm border-b border-border last:border-b-0 transition-colors",
+    isClickable && "cursor-pointer hover:bg-accent/50",
+    selected && "bg-accent/30",
+    className
+  );
+
+  const content = (
+    <>
+      {leading && <div className="flex items-center gap-2 shrink-0">{leading}</div>}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          {identifier && (
+            <span className="text-xs text-muted-foreground font-mono shrink-0 relative top-[1px]">
+              {identifier}
+            </span>
+          )}
+          <span className="truncate">{title}</span>
+        </div>
+        {subtitle && (
+          <p className="text-xs text-muted-foreground truncate mt-0.5">{subtitle}</p>
+        )}
+      </div>
+      {trailing && <div className="flex items-center gap-2 shrink-0">{trailing}</div>}
+    </>
+  );
+
+  if (to) {
+    return (
+      <Link to={to} className={cn(classes, "no-underline text-inherit")} onClick={onClick}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div className={classes} onClick={onClick}>
+      {content}
+    </div>
+  );
+}

package/ui/src/components/FilterBar.tsx

@@ -0,0 +1,39 @@
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+export interface FilterValue {
+  key: string;
+  label: string;
+  value: string;
+}
+
+interface FilterBarProps {
+  filters: FilterValue[];
+  onRemove: (key: string) => void;
+  onClear: () => void;
+}
+
+export function FilterBar({ filters, onRemove, onClear }: FilterBarProps) {
+  if (filters.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {filters.map((f) => (
+        <Badge key={f.key} variant="secondary" className="gap-1 pr-1">
+          <span className="text-muted-foreground">{f.label}:</span>
+          <span>{f.value}</span>
+          <button
+            className="ml-1 rounded-full hover:bg-accent p-0.5"
+            onClick={() => onRemove(f.key)}
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </Badge>
+      ))}
+      <Button variant="ghost" size="sm" className="text-xs h-6" onClick={onClear}>
+        Clear all
+      </Button>
+    </div>
+  );
+}

package/ui/src/components/FinanceBillerCard.tsx

@@ -0,0 +1,45 @@
+import type { FinanceByBiller } from "@corporateai/shared";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatCents, providerDisplayName } from "@/lib/utils";
+
+interface FinanceBillerCardProps {
+  row: FinanceByBiller;
+}
+
+export function FinanceBillerCard({ row }: FinanceBillerCardProps) {
+  return (
+    <Card>
+      <CardHeader className="px-4 pt-4 pb-1">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <CardTitle className="text-base">{providerDisplayName(row.biller)}</CardTitle>
+            <CardDescription className="mt-1 text-xs">
+              {row.eventCount} event{row.eventCount === 1 ? "" : "s"} across {row.kindCount} kind{row.kindCount === 1 ? "" : "s"}
+            </CardDescription>
+          </div>
+          <div className="text-right">
+            <div className="text-lg font-semibold tabular-nums">{formatCents(row.netCents)}</div>
+            <div className="text-[11px] uppercase tracking-[0.16em] text-muted-foreground">net</div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 px-4 pb-4 pt-3">
+        <div className="grid gap-2 text-sm sm:grid-cols-3">
+          <div className="border border-border p-3">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">debits</div>
+            <div className="mt-1 font-medium tabular-nums">{formatCents(row.debitCents)}</div>
+          </div>
+          <div className="border border-border p-3">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">credits</div>
+            <div className="mt-1 font-medium tabular-nums">{formatCents(row.creditCents)}</div>
+          </div>
+          <div className="border border-border p-3">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">estimated</div>
+            <div className="mt-1 font-medium tabular-nums">{formatCents(row.estimatedDebitCents)}</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

package/ui/src/components/FinanceKindCard.tsx

@@ -0,0 +1,44 @@
+import type { FinanceByKind } from "@corporateai/shared";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { financeEventKindDisplayName, formatCents } from "@/lib/utils";
+
+interface FinanceKindCardProps {
+  rows: FinanceByKind[];
+}
+
+export function FinanceKindCard({ rows }: FinanceKindCardProps) {
+  return (
+    <Card>
+      <CardHeader className="px-4 pt-4 pb-1">
+        <CardTitle className="text-base">Financial event mix</CardTitle>
+        <CardDescription>Account-level charges grouped by event kind.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2 px-4 pb-4 pt-3">
+        {rows.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No finance events in this period.</p>
+        ) : (
+          rows.map((row) => (
+            <div
+              key={row.eventKind}
+              className="flex items-center justify-between gap-3 border border-border px-3 py-2"
+            >
+              <div className="min-w-0">
+                <div className="truncate text-sm font-medium">{financeEventKindDisplayName(row.eventKind)}</div>
+                <div className="text-xs text-muted-foreground">
+                  {row.eventCount} event{row.eventCount === 1 ? "" : "s"} · {row.billerCount} biller{row.billerCount === 1 ? "" : "s"}
+                </div>
+              </div>
+              <div className="text-right tabular-nums">
+                <div className="text-sm font-medium">{formatCents(row.netCents)}</div>
+                <div className="text-xs text-muted-foreground">
+                  {formatCents(row.debitCents)} debits
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

package/ui/src/components/FinanceTimelineCard.tsx

@@ -0,0 +1,72 @@
+import type { FinanceEvent } from "@corporateai/shared";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  financeDirectionDisplayName,
+  financeEventKindDisplayName,
+  formatCents,
+  formatDateTime,
+  providerDisplayName,
+} from "@/lib/utils";
+
+interface FinanceTimelineCardProps {
+  rows: FinanceEvent[];
+  emptyMessage?: string;
+}
+
+export function FinanceTimelineCard({
+  rows,
+  emptyMessage = "No financial events in this period.",
+}: FinanceTimelineCardProps) {
+  return (
+    <Card>
+      <CardHeader className="px-4 pt-4 pb-1">
+        <CardTitle className="text-base">Recent financial events</CardTitle>
+        <CardDescription>Top-ups, fees, credits, commitments, and other non-request charges.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3 px-4 pb-4 pt-3">
+        {rows.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+        ) : (
+          rows.map((row) => (
+            <div
+              key={row.id}
+              className="border border-border p-3"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 space-y-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Badge variant="secondary">{financeEventKindDisplayName(row.eventKind)}</Badge>
+                    <Badge variant={row.direction === "credit" ? "outline" : "secondary"}>
+                      {financeDirectionDisplayName(row.direction)}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground">{formatDateTime(row.occurredAt)}</span>
+                  </div>
+                  <div className="text-sm font-medium">
+                    {providerDisplayName(row.biller)}
+                    {row.provider ? ` -> ${providerDisplayName(row.provider)}` : ""}
+                    {row.model ? <span className="ml-1 font-mono text-xs text-muted-foreground">{row.model}</span> : null}
+                  </div>
+                  {(row.description || row.externalInvoiceId || row.region || row.pricingTier) && (
+                    <div className="space-y-1 text-xs text-muted-foreground">
+                      {row.description ? <div>{row.description}</div> : null}
+                      {row.externalInvoiceId ? <div>invoice {row.externalInvoiceId}</div> : null}
+                      {row.region ? <div>region {row.region}</div> : null}
+                      {row.pricingTier ? <div>tier {row.pricingTier}</div> : null}
+                    </div>
+                  )}
+                </div>
+                <div className="text-right tabular-nums">
+                  <div className="text-sm font-semibold">{formatCents(row.amountCents)}</div>
+                  <div className="text-xs text-muted-foreground">{row.currency}</div>
+                  {row.estimated ? <div className="text-[11px] uppercase tracking-[0.12em] text-amber-600">estimated</div> : null}
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+

package/ui/src/components/GoalProperties.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import { Link } from "@/lib/router";
+import { useQuery } from "@tanstack/react-query";
+import type { Goal } from "@corporateai/shared";
+import { GOAL_STATUSES, GOAL_LEVELS } from "@corporateai/shared";
+import { agentsApi } from "../api/agents";
+import { goalsApi } from "../api/goals";
+import { useCompany } from "../context/CompanyContext";
+import { queryKeys } from "../lib/queryKeys";
+import { StatusBadge } from "./StatusBadge";
+import { formatDate, cn, agentUrl } from "../lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+interface GoalPropertiesProps {
+  goal: Goal;
+  onUpdate?: (data: Record<string, unknown>) => void;
+}
+
+function PropertyRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3 py-1.5">
+      <span className="text-xs text-muted-foreground shrink-0 w-20">{label}</span>
+      <div className="flex items-center gap-1.5 min-w-0">{children}</div>
+    </div>
+  );
+}
+
+function label(s: string): string {
+  return s.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function PickerButton({
+  current,
+  options,
+  onChange,
+  children,
+}: {
+  current: string;
+  options: readonly string[];
+  onChange: (value: string) => void;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button className="cursor-pointer hover:opacity-80 transition-opacity">
+          {children}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-40 p-1" align="end">
+        {options.map((opt) => (
+          <Button
+            key={opt}
+            variant="ghost"
+            size="sm"
+            className={cn("w-full justify-start text-xs", opt === current && "bg-accent")}
+            onClick={() => {
+              onChange(opt);
+              setOpen(false);
+            }}
+          >
+            {label(opt)}
+          </Button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function GoalProperties({ goal, onUpdate }: GoalPropertiesProps) {
+  const { selectedCompanyId } = useCompany();
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: allGoals } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const ownerAgent = goal.ownerAgentId
+    ? agents?.find((a) => a.id === goal.ownerAgentId)
+    : null;
+
+  const parentGoal = goal.parentId
+    ? allGoals?.find((g) => g.id === goal.parentId)
+    : null;
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <PropertyRow label="Status">
+          {onUpdate ? (
+            <PickerButton
+              current={goal.status}
+              options={GOAL_STATUSES}
+              onChange={(status) => onUpdate({ status })}
+            >
+              <StatusBadge status={goal.status} />
+            </PickerButton>
+          ) : (
+            <StatusBadge status={goal.status} />
+          )}
+        </PropertyRow>
+
+        <PropertyRow label="Level">
+          {onUpdate ? (
+            <PickerButton
+              current={goal.level}
+              options={GOAL_LEVELS}
+              onChange={(level) => onUpdate({ level })}
+            >
+              <span className="text-sm capitalize">{goal.level}</span>
+            </PickerButton>
+          ) : (
+            <span className="text-sm capitalize">{goal.level}</span>
+          )}
+        </PropertyRow>
+
+        <PropertyRow label="Owner">
+          {ownerAgent ? (
+            <Link
+              to={agentUrl(ownerAgent)}
+              className="text-sm hover:underline"
+            >
+              {ownerAgent.name}
+            </Link>
+          ) : (
+            <span className="text-sm text-muted-foreground">None</span>
+          )}
+        </PropertyRow>
+
+        {goal.parentId && (
+          <PropertyRow label="Parent Goal">
+            <Link
+              to={`/goals/${goal.parentId}`}
+              className="text-sm hover:underline"
+            >
+              {parentGoal?.title ?? goal.parentId.slice(0, 8)}
+            </Link>
+          </PropertyRow>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-1">
+        <PropertyRow label="Created">
+          <span className="text-sm">{formatDate(goal.createdAt)}</span>
+        </PropertyRow>
+        <PropertyRow label="Updated">
+          <span className="text-sm">{formatDate(goal.updatedAt)}</span>
+        </PropertyRow>
+      </div>
+    </div>
+  );
+}
+

package/ui/src/components/GoalTree.tsx

@@ -0,0 +1,118 @@
+import type { Goal } from "@corporateai/shared";
+import { Link } from "@/lib/router";
+import { StatusBadge } from "./StatusBadge";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { useState } from "react";
+
+interface GoalTreeProps {
+  goals: Goal[];
+  goalLink?: (goal: Goal) => string;
+  onSelect?: (goal: Goal) => void;
+}
+
+interface GoalNodeProps {
+  goal: Goal;
+  children: Goal[];
+  allGoals: Goal[];
+  depth: number;
+  goalLink?: (goal: Goal) => string;
+  onSelect?: (goal: Goal) => void;
+}
+
+function GoalNode({ goal, children, allGoals, depth, goalLink, onSelect }: GoalNodeProps) {
+  const [expanded, setExpanded] = useState(true);
+  const hasChildren = children.length > 0;
+  const link = goalLink?.(goal);
+
+  const inner = (
+    <>
+      {hasChildren ? (
+        <button
+          className="p-0.5"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+        >
+          <ChevronRight
+            className={cn("h-3 w-3 transition-transform", expanded && "rotate-90")}
+          />
+        </button>
+      ) : (
+        <span className="w-4" />
+      )}
+      <span className="text-xs text-muted-foreground capitalize">{goal.level}</span>
+      <span className="flex-1 truncate">{goal.title}</span>
+      <StatusBadge status={goal.status} />
+    </>
+  );
+
+  const classes = cn(
+    "flex items-center gap-2 px-3 py-1.5 text-sm transition-colors cursor-pointer hover:bg-accent/50",
+  );
+
+  return (
+    <div>
+      {link ? (
+        <Link
+          to={link}
+          className={cn(classes, "no-underline text-inherit")}
+          style={{ paddingLeft: `${depth * 16 + 12}px` }}
+        >
+          {inner}
+        </Link>
+      ) : (
+        <div
+          className={classes}
+          style={{ paddingLeft: `${depth * 16 + 12}px` }}
+          onClick={() => onSelect?.(goal)}
+        >
+          {inner}
+        </div>
+      )}
+      {hasChildren && expanded && (
+        <div>
+          {children.map((child) => (
+            <GoalNode
+              key={child.id}
+              goal={child}
+              children={allGoals.filter((g) => g.parentId === child.id)}
+              allGoals={allGoals}
+              depth={depth + 1}
+              goalLink={goalLink}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function GoalTree({ goals, goalLink, onSelect }: GoalTreeProps) {
+  const goalIds = new Set(goals.map((g) => g.id));
+  const roots = goals.filter((g) => !g.parentId || !goalIds.has(g.parentId));
+
+  if (goals.length === 0) {
+    return <p className="text-sm text-muted-foreground">No goals.</p>;
+  }
+
+  return (
+    <div className="border border-border py-1">
+      {roots.map((goal) => (
+        <GoalNode
+          key={goal.id}
+          goal={goal}
+          children={goals.filter((g) => g.parentId === goal.id)}
+          allGoals={goals}
+          depth={0}
+          goalLink={goalLink}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  );
+}
+