corporateai 0.0.1

package/ui/src/lib/router.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import * as RouterDom from "react-router-dom";
+import type { NavigateOptions, To } from "react-router-dom";
+import { useCompany } from "@/context/CompanyContext";
+import {
+  applyCompanyPrefix,
+  extractCompanyPrefixFromPath,
+  normalizeCompanyPrefix,
+} from "@/lib/company-routes";
+
+function resolveTo(to: To, companyPrefix: string | null): To {
+  if (typeof to === "string") {
+    return applyCompanyPrefix(to, companyPrefix);
+  }
+
+  if (to.pathname && to.pathname.startsWith("/")) {
+    const pathname = applyCompanyPrefix(to.pathname, companyPrefix);
+    if (pathname !== to.pathname) {
+      return { ...to, pathname };
+    }
+  }
+
+  return to;
+}
+
+function useActiveCompanyPrefix(): string | null {
+  const { selectedCompany } = useCompany();
+  const params = RouterDom.useParams<{ companyPrefix?: string }>();
+  const location = RouterDom.useLocation();
+
+  if (params.companyPrefix) {
+    return normalizeCompanyPrefix(params.companyPrefix);
+  }
+
+  const pathPrefix = extractCompanyPrefixFromPath(location.pathname);
+  if (pathPrefix) return pathPrefix;
+
+  return selectedCompany ? normalizeCompanyPrefix(selectedCompany.issuePrefix) : null;
+}
+
+export * from "react-router-dom";
+
+export const Link = React.forwardRef<HTMLAnchorElement, React.ComponentProps<typeof RouterDom.Link>>(
+  function CompanyLink({ to, ...props }, ref) {
+    const companyPrefix = useActiveCompanyPrefix();
+    return <RouterDom.Link ref={ref} to={resolveTo(to, companyPrefix)} {...props} />;
+  },
+);
+
+export const NavLink = React.forwardRef<HTMLAnchorElement, React.ComponentProps<typeof RouterDom.NavLink>>(
+  function CompanyNavLink({ to, ...props }, ref) {
+    const companyPrefix = useActiveCompanyPrefix();
+    return <RouterDom.NavLink ref={ref} to={resolveTo(to, companyPrefix)} {...props} />;
+  },
+);
+
+export function Navigate({ to, ...props }: React.ComponentProps<typeof RouterDom.Navigate>) {
+  const companyPrefix = useActiveCompanyPrefix();
+  return <RouterDom.Navigate to={resolveTo(to, companyPrefix)} {...props} />;
+}
+
+export function useNavigate(): ReturnType<typeof RouterDom.useNavigate> {
+  const navigate = RouterDom.useNavigate();
+  const companyPrefix = useActiveCompanyPrefix();
+
+  return React.useCallback(
+    ((to: To | number, options?: NavigateOptions) => {
+      if (typeof to === "number") {
+        navigate(to);
+        return;
+      }
+      navigate(resolveTo(to, companyPrefix), options);
+    }) as ReturnType<typeof RouterDom.useNavigate>,
+    [navigate, companyPrefix],
+  );
+}

package/ui/src/lib/routine-trigger-patch.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import type { RoutineTrigger } from "@corporateai/shared";
+import { buildRoutineTriggerPatch } from "./routine-trigger-patch";
+
+function makeScheduleTrigger(overrides: Partial<RoutineTrigger> = {}): RoutineTrigger {
+  return {
+    id: "trigger-1",
+    companyId: "company-1",
+    routineId: "routine-1",
+    kind: "schedule",
+    label: "Daily",
+    enabled: true,
+    cronExpression: "0 10 * * *",
+    timezone: "UTC",
+    nextRunAt: null,
+    lastFiredAt: null,
+    publicId: null,
+    secretId: null,
+    signingMode: null,
+    replayWindowSec: null,
+    lastRotatedAt: null,
+    lastResult: null,
+    createdByAgentId: null,
+    createdByUserId: null,
+    updatedByAgentId: null,
+    updatedByUserId: null,
+    createdAt: new Date("2026-03-20T00:00:00.000Z"),
+    updatedAt: new Date("2026-03-20T00:00:00.000Z"),
+    ...overrides,
+  };
+}
+
+describe("buildRoutineTriggerPatch", () => {
+  it("preserves an existing schedule trigger timezone when saving edits", () => {
+    const patch = buildRoutineTriggerPatch(
+      makeScheduleTrigger({ timezone: "UTC" }),
+      {
+        label: "Daily label edit",
+        cronExpression: "0 10 * * *",
+        signingMode: "bearer",
+        replayWindowSec: "300",
+      },
+      "America/Chicago",
+    );
+
+    expect(patch).toEqual({
+      label: "Daily label edit",
+      cronExpression: "0 10 * * *",
+      timezone: "UTC",
+    });
+  });
+
+  it("falls back to the local timezone when a schedule trigger has none", () => {
+    const patch = buildRoutineTriggerPatch(
+      makeScheduleTrigger({ timezone: null }),
+      {
+        label: "",
+        cronExpression: "15 9 * * 1-5",
+        signingMode: "bearer",
+        replayWindowSec: "300",
+      },
+      "America/Chicago",
+    );
+
+    expect(patch).toEqual({
+      label: null,
+      cronExpression: "15 9 * * 1-5",
+      timezone: "America/Chicago",
+    });
+  });
+});
+

package/ui/src/lib/routine-trigger-patch.ts

@@ -0,0 +1,31 @@
+import type { RoutineTrigger } from "@corporateai/shared";
+
+export type RoutineTriggerEditorDraft = {
+  label: string;
+  cronExpression: string;
+  signingMode: string;
+  replayWindowSec: string;
+};
+
+export function buildRoutineTriggerPatch(
+  trigger: RoutineTrigger,
+  draft: RoutineTriggerEditorDraft,
+  fallbackTimezone: string,
+) {
+  const patch: Record<string, unknown> = {
+    label: draft.label.trim() || null,
+  };
+
+  if (trigger.kind === "schedule") {
+    patch.cronExpression = draft.cronExpression.trim();
+    patch.timezone = trigger.timezone ?? fallbackTimezone;
+  }
+
+  if (trigger.kind === "webhook") {
+    patch.signingMode = draft.signingMode;
+    patch.replayWindowSec = Number(draft.replayWindowSec || "300");
+  }
+
+  return patch;
+}
+

package/ui/src/lib/status-colors.ts

@@ -0,0 +1,108 @@
+/**
+ * Canonical status & priority color definitions.
+ *
+ * Every component that renders a status indicator (StatusIcon, StatusBadge,
+ * agent status dots, etc.) should import from here so colors stay consistent.
+ */
+
+// ---------------------------------------------------------------------------
+// Issue status colors
+// ---------------------------------------------------------------------------
+
+/** StatusIcon circle: text + border classes */
+export const issueStatusIcon: Record<string, string> = {
+  backlog: "text-muted-foreground border-muted-foreground",
+  todo: "text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-400",
+  in_progress: "text-yellow-600 border-yellow-600 dark:text-yellow-400 dark:border-yellow-400",
+  in_review: "text-violet-600 border-violet-600 dark:text-violet-400 dark:border-violet-400",
+  done: "text-green-600 border-green-600 dark:text-green-400 dark:border-green-400",
+  cancelled: "text-neutral-500 border-neutral-500",
+  blocked: "text-red-600 border-red-600 dark:text-red-400 dark:border-red-400",
+};
+
+export const issueStatusIconDefault = "text-muted-foreground border-muted-foreground";
+
+/** Text-only color for issue statuses (dropdowns, labels) */
+export const issueStatusText: Record<string, string> = {
+  backlog: "text-muted-foreground",
+  todo: "text-blue-600 dark:text-blue-400",
+  in_progress: "text-yellow-600 dark:text-yellow-400",
+  in_review: "text-violet-600 dark:text-violet-400",
+  done: "text-green-600 dark:text-green-400",
+  cancelled: "text-neutral-500",
+  blocked: "text-red-600 dark:text-red-400",
+};
+
+export const issueStatusTextDefault = "text-muted-foreground";
+
+// ---------------------------------------------------------------------------
+// Badge colors — used by StatusBadge for all entity types
+// ---------------------------------------------------------------------------
+
+export const statusBadge: Record<string, string> = {
+  // Agent statuses
+  active: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+  running: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300",
+  paused: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300",
+  idle: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300",
+  archived: "bg-muted text-muted-foreground",
+
+  // Goal statuses
+  planned: "bg-muted text-muted-foreground",
+  achieved: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+  completed: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+
+  // Run statuses
+  failed: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+  timed_out: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300",
+  succeeded: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+  error: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+  terminated: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+  pending: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300",
+
+  // Approval statuses
+  pending_approval: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+  revision_requested: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+  approved: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+  rejected: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+
+  // Issue statuses — consistent hues with issueStatusIcon above
+  backlog: "bg-muted text-muted-foreground",
+  todo: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300",
+  in_progress: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300",
+  in_review: "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300",
+  blocked: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+  done: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+  cancelled: "bg-muted text-muted-foreground",
+};
+
+export const statusBadgeDefault = "bg-muted text-muted-foreground";
+
+// ---------------------------------------------------------------------------
+// Agent status dot — solid background for small indicator dots
+// ---------------------------------------------------------------------------
+
+export const agentStatusDot: Record<string, string> = {
+  running: "bg-cyan-400 animate-pulse",
+  active: "bg-green-400",
+  paused: "bg-yellow-400",
+  idle: "bg-yellow-400",
+  pending_approval: "bg-amber-400",
+  error: "bg-red-400",
+  archived: "bg-neutral-400",
+};
+
+export const agentStatusDotDefault = "bg-neutral-400";
+
+// ---------------------------------------------------------------------------
+// Priority colors
+// ---------------------------------------------------------------------------
+
+export const priorityColor: Record<string, string> = {
+  critical: "text-red-600 dark:text-red-400",
+  high: "text-orange-600 dark:text-orange-400",
+  medium: "text-yellow-600 dark:text-yellow-400",
+  low: "text-blue-600 dark:text-blue-400",
+};
+
+export const priorityColorDefault = "text-yellow-600 dark:text-yellow-400";

package/ui/src/lib/timeAgo.ts

@@ -0,0 +1,31 @@
+const MINUTE = 60;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+
+export function timeAgo(date: Date | string): string {
+  const now = Date.now();
+  const then = new Date(date).getTime();
+  const seconds = Math.round((now - then) / 1000);
+
+  if (seconds < MINUTE) return "just now";
+  if (seconds < HOUR) {
+    const m = Math.floor(seconds / MINUTE);
+    return `${m}m ago`;
+  }
+  if (seconds < DAY) {
+    const h = Math.floor(seconds / HOUR);
+    return `${h}h ago`;
+  }
+  if (seconds < WEEK) {
+    const d = Math.floor(seconds / DAY);
+    return `${d}d ago`;
+  }
+  if (seconds < MONTH) {
+    const w = Math.floor(seconds / WEEK);
+    return `${w}w ago`;
+  }
+  const mo = Math.floor(seconds / MONTH);
+  return `${mo}mo ago`;
+}

package/ui/src/lib/utils.ts

@@ -0,0 +1,168 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { deriveAgentUrlKey, deriveProjectUrlKey } from "@corporateai/shared";
+import type { BillingType, FinanceDirection, FinanceEventKind } from "@corporateai/shared";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatCents(cents: number): string {
+  return `$${(cents / 100).toFixed(2)}`;
+}
+
+export function formatDate(date: Date | string): string {
+  return new Date(date).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatDateTime(date: Date | string): string {
+  return new Date(date).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function relativeTime(date: Date | string): string {
+  const now = Date.now();
+  const then = new Date(date).getTime();
+  const diffSec = Math.round((now - then) / 1000);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.round(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.round(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.round(diffHr / 24);
+  if (diffDay < 30) return `${diffDay}d ago`;
+  return formatDate(date);
+}
+
+export function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(n);
+}
+
+/** Map a raw provider slug to a display-friendly name. */
+export function providerDisplayName(provider: string): string {
+  const map: Record<string, string> = {
+    anthropic: "Anthropic",
+    openai: "OpenAI",
+    openrouter: "OpenRouter",
+    chatgpt: "ChatGPT",
+    google: "Google",
+    cursor: "Cursor",
+    jetbrains: "JetBrains AI",
+  };
+  return map[provider.toLowerCase()] ?? provider;
+}
+
+export function billingTypeDisplayName(billingType: BillingType): string {
+  const map: Record<BillingType, string> = {
+    metered_api: "Metered API",
+    subscription_included: "Subscription",
+    subscription_overage: "Subscription overage",
+    credits: "Credits",
+    fixed: "Fixed",
+    unknown: "Unknown",
+  };
+  return map[billingType];
+}
+
+export function quotaSourceDisplayName(source: string): string {
+  const map: Record<string, string> = {
+    "anthropic-oauth": "Anthropic OAuth",
+    "claude-cli": "Claude CLI",
+    "codex-rpc": "Codex app server",
+    "codex-wham": "ChatGPT WHAM",
+  };
+  return map[source] ?? source;
+}
+
+function coerceBillingType(value: unknown): BillingType | null {
+  if (
+    value === "metered_api" ||
+    value === "subscription_included" ||
+    value === "subscription_overage" ||
+    value === "credits" ||
+    value === "fixed" ||
+    value === "unknown"
+  ) {
+    return value;
+  }
+  return null;
+}
+
+function readRunCostUsd(payload: Record<string, unknown> | null): number {
+  if (!payload) return 0;
+  for (const key of ["costUsd", "cost_usd", "total_cost_usd"] as const) {
+    const value = payload[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+  }
+  return 0;
+}
+
+export function visibleRunCostUsd(
+  usage: Record<string, unknown> | null,
+  result: Record<string, unknown> | null = null,
+): number {
+  const billingType = coerceBillingType(usage?.billingType) ?? coerceBillingType(result?.billingType);
+  if (billingType === "subscription_included") return 0;
+  return readRunCostUsd(usage) || readRunCostUsd(result);
+}
+
+export function financeEventKindDisplayName(eventKind: FinanceEventKind): string {
+  const map: Record<FinanceEventKind, string> = {
+    inference_charge: "Inference charge",
+    platform_fee: "Platform fee",
+    credit_purchase: "Credit purchase",
+    credit_refund: "Credit refund",
+    credit_expiry: "Credit expiry",
+    byok_fee: "BYOK fee",
+    gateway_overhead: "Gateway overhead",
+    log_storage_charge: "Log storage",
+    logpush_charge: "Logpush",
+    provisioned_capacity_charge: "Provisioned capacity",
+    training_charge: "Training",
+    custom_model_import_charge: "Custom model import",
+    custom_model_storage_charge: "Custom model storage",
+    manual_adjustment: "Manual adjustment",
+  };
+  return map[eventKind];
+}
+
+export function financeDirectionDisplayName(direction: FinanceDirection): string {
+  return direction === "credit" ? "Credit" : "Debit";
+}
+
+/** Build an issue URL using the human-readable identifier when available. */
+export function issueUrl(issue: { id: string; identifier?: string | null }): string {
+  return `/issues/${issue.identifier ?? issue.id}`;
+}
+
+/** Build an agent route URL using the short URL key when available. */
+export function agentRouteRef(agent: { id: string; urlKey?: string | null; name?: string | null }): string {
+  return agent.urlKey ?? deriveAgentUrlKey(agent.name, agent.id);
+}
+
+/** Build an agent URL using the short URL key when available. */
+export function agentUrl(agent: { id: string; urlKey?: string | null; name?: string | null }): string {
+  return `/agents/${agentRouteRef(agent)}`;
+}
+
+/** Build a project route reference using the short URL key when available. */
+export function projectRouteRef(project: { id: string; urlKey?: string | null; name?: string | null }): string {
+  return project.urlKey ?? deriveProjectUrlKey(project.name, project.id);
+}
+
+/** Build a project URL using the short URL key when available. */
+export function projectUrl(project: { id: string; urlKey?: string | null; name?: string | null }): string {
+  return `/projects/${projectRouteRef(project)}`;
+}
+

package/ui/src/lib/worktree-branding.ts

@@ -0,0 +1,65 @@
+export type WorktreeUiBranding = {
+  enabled: true;
+  name: string;
+  color: string;
+  textColor: string;
+};
+
+function readMetaContent(name: string): string | null {
+  if (typeof document === "undefined") return null;
+  const element = document.querySelector(`meta[name="${name}"]`);
+  const content = element?.getAttribute("content")?.trim();
+  return content ? content : null;
+}
+
+function normalizeHexColor(value: string | null): string | null {
+  if (!value) return null;
+  const hex = value.startsWith("#") ? value.slice(1) : value;
+  if (/^[0-9a-fA-F]{3}$/.test(hex)) {
+    return `#${hex.split("").map((char) => `${char}${char}`).join("").toLowerCase()}`;
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(hex)) {
+    return `#${hex.toLowerCase()}`;
+  }
+  return null;
+}
+
+function hexToRgb(color: string): { r: number; g: number; b: number } {
+  const normalized = normalizeHexColor(color) ?? "#000000";
+  return {
+    r: Number.parseInt(normalized.slice(1, 3), 16),
+    g: Number.parseInt(normalized.slice(3, 5), 16),
+    b: Number.parseInt(normalized.slice(5, 7), 16),
+  };
+}
+
+function relativeLuminanceChannel(value: number): number {
+  const normalized = value / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+function pickReadableTextColor(background: string): string {
+  const { r, g, b } = hexToRgb(background);
+  const luminance =
+    (0.2126 * relativeLuminanceChannel(r)) +
+    (0.7152 * relativeLuminanceChannel(g)) +
+    (0.0722 * relativeLuminanceChannel(b));
+  const whiteContrast = 1.05 / (luminance + 0.05);
+  const blackContrast = (luminance + 0.05) / 0.05;
+  return whiteContrast >= blackContrast ? "#f8fafc" : "#111827";
+}
+
+export function getWorktreeUiBranding(): WorktreeUiBranding | null {
+  if (readMetaContent("paperclip-worktree-enabled") !== "true") return null;
+
+  const name = readMetaContent("paperclip-worktree-name");
+  const color = normalizeHexColor(readMetaContent("paperclip-worktree-color"));
+  if (!name || !color) return null;
+
+  return {
+    enabled: true,
+    name,
+    color,
+    textColor: normalizeHexColor(readMetaContent("paperclip-worktree-text-color")) ?? pickReadableTextColor(color),
+  };
+}