corporateai 0.0.1

package/ui/src/components/AgentIconPicker.tsx

@@ -0,0 +1,81 @@
+import { useState, useMemo } from "react";
+import {
+  type LucideIcon,
+} from "lucide-react";
+import { AGENT_ICON_NAMES, type AgentIconName } from "@corporateai/shared";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { AGENT_ICONS, getAgentIcon } from "../lib/agent-icons";
+
+const DEFAULT_ICON: AgentIconName = "bot";
+
+interface AgentIconProps {
+  icon: string | null | undefined;
+  className?: string;
+}
+
+export function AgentIcon({ icon, className }: AgentIconProps) {
+  const Icon = getAgentIcon(icon);
+  return <Icon className={className} />;
+}
+
+interface AgentIconPickerProps {
+  value: string | null | undefined;
+  onChange: (icon: string) => void;
+  children: React.ReactNode;
+}
+
+export function AgentIconPicker({ value, onChange, children }: AgentIconPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filtered = useMemo(() => {
+    const entries = AGENT_ICON_NAMES.map((name) => [name, AGENT_ICONS[name]] as const);
+    if (!search) return entries;
+    const q = search.toLowerCase();
+    return entries.filter(([name]) => name.includes(q));
+  }, [search]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-72 p-3" align="start">
+        <Input
+          placeholder="Search icons..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="mb-2 h-8 text-sm"
+          autoFocus
+        />
+        <div className="grid grid-cols-7 gap-1 max-h-48 overflow-y-auto">
+          {filtered.map(([name, Icon]) => (
+            <button
+              key={name}
+              onClick={() => {
+                onChange(name);
+                setOpen(false);
+                setSearch("");
+              }}
+              className={cn(
+                "flex items-center justify-center h-8 w-8 rounded hover:bg-accent transition-colors",
+                (value ?? DEFAULT_ICON) === name && "bg-accent ring-1 ring-primary"
+              )}
+              title={name}
+            >
+              <Icon className="h-4 w-4" />
+            </button>
+          ))}
+          {filtered.length === 0 && (
+            <p className="col-span-7 text-xs text-muted-foreground text-center py-2">No icons match</p>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+

package/ui/src/components/AgentProperties.tsx

@@ -0,0 +1,107 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@/lib/router";
+import { AGENT_ROLE_LABELS, type Agent, type AgentRuntimeState } from "@corporateai/shared";
+import { agentsApi } from "../api/agents";
+import { useCompany } from "../context/CompanyContext";
+import { queryKeys } from "../lib/queryKeys";
+import { StatusBadge } from "./StatusBadge";
+import { Identity } from "./Identity";
+import { formatDate, agentUrl } from "../lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+interface AgentPropertiesProps {
+  agent: Agent;
+  runtimeState?: AgentRuntimeState;
+}
+
+const adapterLabels: Record<string, string> = {
+  claude_local: "Claude (local)",
+  codex_local: "Codex (local)",
+  gemini_local: "Gemini CLI (local)",
+  opencode_local: "OpenCode (local)",
+  openclaw_gateway: "OpenClaw Gateway",
+  cursor: "Cursor (local)",
+  process: "Process",
+  http: "HTTP",
+};
+
+const roleLabels = AGENT_ROLE_LABELS as Record<string, string>;
+
+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>
+  );
+}
+
+export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
+  const { selectedCompanyId } = useCompany();
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && !!agent.reportsTo,
+  });
+
+  const reportsToAgent = agent.reportsTo ? agents?.find((a) => a.id === agent.reportsTo) : null;
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <PropertyRow label="Status">
+          <StatusBadge status={agent.status} />
+        </PropertyRow>
+        <PropertyRow label="Role">
+          <span className="text-sm">{roleLabels[agent.role] ?? agent.role}</span>
+        </PropertyRow>
+        {agent.title && (
+          <PropertyRow label="Title">
+            <span className="text-sm">{agent.title}</span>
+          </PropertyRow>
+        )}
+        <PropertyRow label="Adapter">
+          <span className="text-sm font-mono">{adapterLabels[agent.adapterType] ?? agent.adapterType}</span>
+        </PropertyRow>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-1">
+        {(runtimeState?.sessionDisplayId ?? runtimeState?.sessionId) && (
+          <PropertyRow label="Session">
+            <span className="text-xs font-mono">
+              {String(runtimeState.sessionDisplayId ?? runtimeState.sessionId).slice(0, 12)}...
+            </span>
+          </PropertyRow>
+        )}
+        {runtimeState?.lastError && (
+          <PropertyRow label="Last error">
+            <span className="text-xs text-red-600 dark:text-red-400 truncate max-w-[160px]">{runtimeState.lastError}</span>
+          </PropertyRow>
+        )}
+        {agent.lastHeartbeatAt && (
+          <PropertyRow label="Last Heartbeat">
+            <span className="text-sm">{formatDate(agent.lastHeartbeatAt)}</span>
+          </PropertyRow>
+        )}
+        {agent.reportsTo && (
+          <PropertyRow label="Reports To">
+            {reportsToAgent ? (
+              <Link to={agentUrl(reportsToAgent)} className="hover:underline">
+                <Identity name={reportsToAgent.name} size="sm" />
+              </Link>
+            ) : (
+              <span className="text-sm font-mono">{agent.reportsTo.slice(0, 8)}</span>
+            )}
+          </PropertyRow>
+        )}
+        <PropertyRow label="Created">
+          <span className="text-sm">{formatDate(agent.createdAt)}</span>
+        </PropertyRow>
+      </div>
+    </div>
+  );
+}
+

package/ui/src/components/ApprovalCard.tsx

@@ -0,0 +1,107 @@
+import { CheckCircle2, XCircle, Clock } from "lucide-react";
+import { Link } from "@/lib/router";
+import { Button } from "@/components/ui/button";
+import { Identity } from "./Identity";
+import { approvalLabel, typeIcon, defaultTypeIcon, ApprovalPayloadRenderer } from "./ApprovalPayload";
+import { timeAgo } from "../lib/timeAgo";
+import type { Approval, Agent } from "@corporateai/shared";
+
+function statusIcon(status: string) {
+  if (status === "approved") return <CheckCircle2 className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />;
+  if (status === "rejected") return <XCircle className="h-3.5 w-3.5 text-red-600 dark:text-red-400" />;
+  if (status === "revision_requested") return <Clock className="h-3.5 w-3.5 text-amber-600 dark:text-amber-400" />;
+  if (status === "pending") return <Clock className="h-3.5 w-3.5 text-yellow-600 dark:text-yellow-400" />;
+  return null;
+}
+
+export function ApprovalCard({
+  approval,
+  requesterAgent,
+  onApprove,
+  onReject,
+  onOpen,
+  detailLink,
+  isPending,
+}: {
+  approval: Approval;
+  requesterAgent: Agent | null;
+  onApprove: () => void;
+  onReject: () => void;
+  onOpen?: () => void;
+  detailLink?: string;
+  isPending: boolean;
+}) {
+  const Icon = typeIcon[approval.type] ?? defaultTypeIcon;
+  const label = approvalLabel(approval.type, approval.payload as Record<string, unknown> | null);
+  const showResolutionButtons =
+    approval.type !== "budget_override_required" &&
+    (approval.status === "pending" || approval.status === "revision_requested");
+
+  return (
+    <div className="border border-border rounded-lg p-4 space-y-0">
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-sm">{label}</span>
+            {requesterAgent && (
+              <span className="text-xs text-muted-foreground">
+                requested by <Identity name={requesterAgent.name} size="sm" className="inline-flex" />
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5 shrink-0">
+          {statusIcon(approval.status)}
+          <span className="text-xs text-muted-foreground capitalize">{approval.status}</span>
+          <span className="text-xs text-muted-foreground">· {timeAgo(approval.createdAt)}</span>
+        </div>
+      </div>
+
+      {/* Payload */}
+      <ApprovalPayloadRenderer type={approval.type} payload={approval.payload} />
+
+      {/* Decision note */}
+      {approval.decisionNote && (
+        <div className="mt-3 text-xs text-muted-foreground italic border-t border-border pt-2">
+          Note: {approval.decisionNote}
+        </div>
+      )}
+
+      {/* Actions */}
+      {showResolutionButtons && (
+        <div className="flex gap-2 mt-4 pt-3 border-t border-border">
+          <Button
+            size="sm"
+            className="bg-green-700 hover:bg-green-600 text-white"
+            onClick={onApprove}
+            disabled={isPending}
+          >
+            Approve
+          </Button>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={onReject}
+            disabled={isPending}
+          >
+            Reject
+          </Button>
+        </div>
+      )}
+      <div className="mt-3">
+        {detailLink ? (
+          <Button variant="ghost" size="sm" className="text-xs px-0" asChild>
+            <Link to={detailLink}>View details</Link>
+          </Button>
+        ) : (
+          <Button variant="ghost" size="sm" className="text-xs px-0" onClick={onOpen}>
+            View details
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/ui/src/components/ApprovalPayload.tsx

@@ -0,0 +1,134 @@
+import { UserPlus, Lightbulb, ShieldAlert, ShieldCheck } from "lucide-react";
+import { formatCents } from "../lib/utils";
+
+export const typeLabel: Record<string, string> = {
+  hire_agent: "Hire Agent",
+  approve_ceo_strategy: "CEO Strategy",
+  budget_override_required: "Budget Override",
+};
+
+/** Build a contextual label for an approval, e.g. "Hire Agent: Designer" */
+export function approvalLabel(type: string, payload?: Record<string, unknown> | null): string {
+  const base = typeLabel[type] ?? type;
+  if (type === "hire_agent" && payload?.name) {
+    return `${base}: ${String(payload.name)}`;
+  }
+  return base;
+}
+
+export const typeIcon: Record<string, typeof UserPlus> = {
+  hire_agent: UserPlus,
+  approve_ceo_strategy: Lightbulb,
+  budget_override_required: ShieldAlert,
+};
+
+export const defaultTypeIcon = ShieldCheck;
+
+function PayloadField({ label, value }: { label: string; value: unknown }) {
+  if (!value) return null;
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs">{label}</span>
+      <span>{String(value)}</span>
+    </div>
+  );
+}
+
+function SkillList({ values }: { values: unknown }) {
+  if (!Array.isArray(values)) return null;
+  const items = values
+    .filter((value): value is string => typeof value === "string")
+    .map((value) => value.trim())
+    .filter(Boolean);
+  if (items.length === 0) return null;
+
+  return (
+    <div className="flex items-start gap-2">
+      <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs pt-0.5">Skills</span>
+      <div className="flex flex-wrap gap-1.5">
+        {items.map((item) => (
+          <span
+            key={item}
+            className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function HireAgentPayload({ payload }: { payload: Record<string, unknown> }) {
+  return (
+    <div className="mt-3 space-y-1.5 text-sm">
+      <div className="flex items-center gap-2">
+        <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs">Name</span>
+        <span className="font-medium">{String(payload.name ?? "—")}</span>
+      </div>
+      <PayloadField label="Role" value={payload.role} />
+      <PayloadField label="Title" value={payload.title} />
+      <PayloadField label="Icon" value={payload.icon} />
+      {!!payload.capabilities && (
+        <div className="flex items-start gap-2">
+          <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs pt-0.5">Capabilities</span>
+          <span className="text-muted-foreground">{String(payload.capabilities)}</span>
+        </div>
+      )}
+      {!!payload.adapterType && (
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground w-20 sm:w-24 shrink-0 text-xs">Adapter</span>
+          <span className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
+            {String(payload.adapterType)}
+          </span>
+        </div>
+      )}
+      <SkillList values={payload.desiredSkills} />
+    </div>
+  );
+}
+
+export function CeoStrategyPayload({ payload }: { payload: Record<string, unknown> }) {
+  const plan = payload.plan ?? payload.description ?? payload.strategy ?? payload.text;
+  return (
+    <div className="mt-3 space-y-1.5 text-sm">
+      <PayloadField label="Title" value={payload.title} />
+      {!!plan && (
+        <div className="mt-2 rounded-md bg-muted/40 px-3 py-2 text-sm text-muted-foreground whitespace-pre-wrap font-mono text-xs max-h-48 overflow-y-auto">
+          {String(plan)}
+        </div>
+      )}
+      {!plan && (
+        <pre className="mt-2 rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground overflow-x-auto max-h-48">
+          {JSON.stringify(payload, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export function BudgetOverridePayload({ payload }: { payload: Record<string, unknown> }) {
+  const budgetAmount = typeof payload.budgetAmount === "number" ? payload.budgetAmount : null;
+  const observedAmount = typeof payload.observedAmount === "number" ? payload.observedAmount : null;
+  return (
+    <div className="mt-3 space-y-1.5 text-sm">
+      <PayloadField label="Scope" value={payload.scopeName ?? payload.scopeType} />
+      <PayloadField label="Window" value={payload.windowKind} />
+      <PayloadField label="Metric" value={payload.metric} />
+      {(budgetAmount !== null || observedAmount !== null) ? (
+        <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+          Limit {budgetAmount !== null ? formatCents(budgetAmount) : "—"} · Observed {observedAmount !== null ? formatCents(observedAmount) : "—"}
+        </div>
+      ) : null}
+      {!!payload.guidance && (
+        <p className="text-muted-foreground">{String(payload.guidance)}</p>
+      )}
+    </div>
+  );
+}
+
+export function ApprovalPayloadRenderer({ type, payload }: { type: string; payload: Record<string, unknown> }) {
+  if (type === "hire_agent") return <HireAgentPayload payload={payload} />;
+  if (type === "budget_override_required") return <BudgetOverridePayload payload={payload} />;
+  return <CeoStrategyPayload payload={payload} />;
+}