corporateai 0.0.1

package/ui/src/components/CompanyPatternIcon.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "../lib/utils";
+
+const BAYER_4X4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5],
+] as const;
+
+interface CompanyPatternIconProps {
+  companyName: string;
+  logoUrl?: string | null;
+  brandColor?: string | null;
+  className?: string;
+}
+
+function hashString(value: string): number {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function mulberry32(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t ^= t + Math.imul(t ^ (t >>> 7), 61 | t);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  const hue = ((h % 360) + 360) % 360;
+  const sat = Math.max(0, Math.min(100, s)) / 100;
+  const light = Math.max(0, Math.min(100, l)) / 100;
+
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = light - c / 2;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (hue < 60) {
+    r = c;
+    g = x;
+  } else if (hue < 120) {
+    r = x;
+    g = c;
+  } else if (hue < 180) {
+    g = c;
+    b = x;
+  } else if (hue < 240) {
+    g = x;
+    b = c;
+  } else if (hue < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+
+  return [
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255),
+  ];
+}
+
+function hexToHue(hex: string): number {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  if (d === 0) return 0;
+  let h = 0;
+  if (max === r) h = ((g - b) / d) % 6;
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return ((h * 60) + 360) % 360;
+}
+
+function makeCompanyPatternDataUrl(seed: string, brandColor?: string | null, logicalSize = 22, cellSize = 2): string {
+  if (typeof document === "undefined") return "";
+
+  const canvas = document.createElement("canvas");
+  canvas.width = logicalSize * cellSize;
+  canvas.height = logicalSize * cellSize;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const rand = mulberry32(hashString(seed));
+
+  const hue = brandColor ? hexToHue(brandColor) : Math.floor(rand() * 360);
+  const [offR, offG, offB] = hslToRgb(
+    hue,
+    54 + Math.floor(rand() * 14),
+    36 + Math.floor(rand() * 12),
+  );
+  const [onR, onG, onB] = hslToRgb(
+    hue + (rand() > 0.5 ? 10 : -10),
+    86 + Math.floor(rand() * 10),
+    82 + Math.floor(rand() * 10),
+  );
+
+  const center = (logicalSize - 1) / 2;
+  const half = Math.max(center, 1);
+  const gradientAngle = rand() * Math.PI * 2;
+  const gradientDirX = Math.cos(gradientAngle);
+  const gradientDirY = Math.sin(gradientAngle);
+  const maxProjection = Math.abs(gradientDirX * half) + Math.abs(gradientDirY * half);
+  const diagonalFrequency = 0.34 + rand() * 0.12;
+  const antiDiagonalFrequency = 0.33 + rand() * 0.12;
+  const diagonalPhase = rand() * Math.PI * 2;
+  const antiDiagonalPhase = rand() * Math.PI * 2;
+
+  ctx.fillStyle = `rgb(${offR} ${offG} ${offB})`;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  ctx.fillStyle = `rgb(${onR} ${onG} ${onB})`;
+  const dotRadius = cellSize * 0.46;
+
+  for (let y = 0; y < logicalSize; y++) {
+    const dy = y - center;
+
+    for (let x = 0; x < logicalSize; x++) {
+      const dx = x - center;
+
+      // Side-to-side signal where visible gradient is produced by dither density.
+      const projection = dx * gradientDirX + dy * gradientDirY;
+      const gradient = (projection / maxProjection + 1) * 0.5;
+      const diagonal = Math.sin((dx + dy) * diagonalFrequency + diagonalPhase) * 0.5 + 0.5;
+      const antiDiagonal = Math.sin((dx - dy) * antiDiagonalFrequency + antiDiagonalPhase) * 0.5 + 0.5;
+      const hatch = diagonal * 0.5 + antiDiagonal * 0.5;
+      const signal = Math.max(0, Math.min(1, gradient + (hatch - 0.5) * 0.22));
+
+      // Canonical 16-level ordered dither: level 0..15 compared to Bayer 4x4 threshold index.
+      const level = Math.max(0, Math.min(15, Math.floor(signal * 16)));
+      const thresholdIndex = BAYER_4X4[y & 3]![x & 3]!;
+      if (level <= thresholdIndex) continue;
+
+      const cx = x * cellSize + cellSize / 2;
+      const cy = y * cellSize + cellSize / 2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, dotRadius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+
+  return canvas.toDataURL("image/png");
+}
+
+export function CompanyPatternIcon({
+  companyName,
+  logoUrl,
+  brandColor,
+  className,
+}: CompanyPatternIconProps) {
+  const initial = companyName.trim().charAt(0).toUpperCase() || "?";
+  const [imageError, setImageError] = useState(false);
+  const logo = !imageError && typeof logoUrl === "string" && logoUrl.trim().length > 0 ? logoUrl : null;
+  useEffect(() => {
+    setImageError(false);
+  }, [logoUrl]);
+  const patternDataUrl = useMemo(
+    () => makeCompanyPatternDataUrl(companyName.trim().toLowerCase(), brandColor),
+    [companyName, brandColor],
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative flex items-center justify-center w-11 h-11 text-base font-semibold text-white overflow-hidden",
+        className,
+      )}
+    >
+      {logo ? (
+        <img
+          src={logo}
+          alt={`${companyName} logo`}
+          onError={() => setImageError(true)}
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      ) : patternDataUrl ? (
+        <img
+          src={patternDataUrl}
+          alt=""
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full"
+          style={{ imageRendering: "pixelated" }}
+        />
+      ) : (
+        <div className="absolute inset-0 bg-muted" />
+      )}
+      {!logo && (
+        <span className="relative z-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.65)]">
+          {initial}
+        </span>
+      )}
+    </div>
+  );
+}

package/ui/src/components/CompanyRail.tsx

@@ -0,0 +1,329 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Paperclip, Plus } from "lucide-react";
+import { useQueries } from "@tanstack/react-query";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { cn } from "../lib/utils";
+import { queryKeys } from "../lib/queryKeys";
+import { sidebarBadgesApi } from "../api/sidebarBadges";
+import { heartbeatsApi } from "../api/heartbeats";
+import { useLocation, useNavigate } from "@/lib/router";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { Company } from "@corporateai/shared";
+import { CompanyPatternIcon } from "./CompanyPatternIcon";
+
+const ORDER_STORAGE_KEY = "paperclip.companyOrder";
+
+function getStoredOrder(): string[] {
+  try {
+    const raw = localStorage.getItem(ORDER_STORAGE_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch { /* ignore */ }
+  return [];
+}
+
+function saveOrder(ids: string[]) {
+  localStorage.setItem(ORDER_STORAGE_KEY, JSON.stringify(ids));
+}
+
+/** Sort companies by stored order, appending any new ones at the end. */
+function sortByStoredOrder(companies: Company[]): Company[] {
+  const order = getStoredOrder();
+  if (order.length === 0) return companies;
+
+  const byId = new Map(companies.map((c) => [c.id, c]));
+  const sorted: Company[] = [];
+
+  for (const id of order) {
+    const c = byId.get(id);
+    if (c) {
+      sorted.push(c);
+      byId.delete(id);
+    }
+  }
+  // Append any companies not in stored order
+  for (const c of byId.values()) {
+    sorted.push(c);
+  }
+  return sorted;
+}
+
+function SortableCompanyItem({
+  company,
+  isSelected,
+  hasLiveAgents,
+  hasUnreadInbox,
+  onSelect,
+}: {
+  company: Company;
+  isSelected: boolean;
+  hasLiveAgents: boolean;
+  hasUnreadInbox: boolean;
+  onSelect: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: company.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
+    opacity: isDragging ? 0.8 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners} className="overflow-visible">
+      <Tooltip delayDuration={300}>
+        <TooltipTrigger asChild>
+          <a
+            href={`/${company.issuePrefix}/dashboard`}
+            onClick={(e) => {
+              e.preventDefault();
+              onSelect();
+            }}
+            className="relative flex items-center justify-center group overflow-visible"
+          >
+            {/* Selection indicator pill */}
+            <div
+              className={cn(
+                "absolute left-[-14px] w-1 rounded-r-full bg-foreground transition-[height] duration-150",
+                isSelected
+                  ? "h-5"
+                  : "h-0 group-hover:h-2"
+              )}
+            />
+            <div
+              className={cn("relative overflow-visible transition-transform duration-150", isDragging && "scale-105")}
+            >
+              <CompanyPatternIcon
+                companyName={company.name}
+                logoUrl={company.logoUrl}
+                brandColor={company.brandColor}
+                className={cn(
+                  isSelected
+                    ? "rounded-[14px]"
+                    : "rounded-[22px] group-hover:rounded-[14px]",
+                  isDragging && "shadow-lg",
+                )}
+              />
+              {hasLiveAgents && (
+                <span className="pointer-events-none absolute -right-0.5 -top-0.5 z-10">
+                  <span className="relative flex h-2.5 w-2.5">
+                    <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-blue-400 opacity-80" />
+                    <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-500 ring-2 ring-background" />
+                  </span>
+                </span>
+              )}
+              {hasUnreadInbox && (
+                <span className="pointer-events-none absolute -bottom-0.5 -right-0.5 z-10 h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-background" />
+              )}
+            </div>
+          </a>
+        </TooltipTrigger>
+        <TooltipContent side="right" sideOffset={8}>
+          <p>{company.name}</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+export function CompanyRail() {
+  const { companies, selectedCompanyId, setSelectedCompanyId } = useCompany();
+  const { openOnboarding } = useDialog();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isInstanceRoute = location.pathname.startsWith("/instance/");
+  const highlightedCompanyId = isInstanceRoute ? null : selectedCompanyId;
+  const sidebarCompanies = useMemo(
+    () => companies.filter((company) => company.status !== "archived"),
+    [companies],
+  );
+  const companyIds = useMemo(() => sidebarCompanies.map((company) => company.id), [sidebarCompanies]);
+
+  const liveRunsQueries = useQueries({
+    queries: companyIds.map((companyId) => ({
+      queryKey: queryKeys.liveRuns(companyId),
+      queryFn: () => heartbeatsApi.liveRunsForCompany(companyId),
+      refetchInterval: 10_000,
+    })),
+  });
+  const sidebarBadgeQueries = useQueries({
+    queries: companyIds.map((companyId) => ({
+      queryKey: queryKeys.sidebarBadges(companyId),
+      queryFn: () => sidebarBadgesApi.get(companyId),
+      refetchInterval: 15_000,
+    })),
+  });
+  const hasLiveAgentsByCompanyId = useMemo(() => {
+    const result = new Map<string, boolean>();
+    companyIds.forEach((companyId, index) => {
+      result.set(companyId, (liveRunsQueries[index]?.data?.length ?? 0) > 0);
+    });
+    return result;
+  }, [companyIds, liveRunsQueries]);
+  const hasUnreadInboxByCompanyId = useMemo(() => {
+    const result = new Map<string, boolean>();
+    companyIds.forEach((companyId, index) => {
+      result.set(companyId, (sidebarBadgeQueries[index]?.data?.inbox ?? 0) > 0);
+    });
+    return result;
+  }, [companyIds, sidebarBadgeQueries]);
+
+  // Maintain sorted order in local state, synced from companies + localStorage
+  const [orderedIds, setOrderedIds] = useState<string[]>(() =>
+    sortByStoredOrder(sidebarCompanies).map((c) => c.id)
+  );
+
+  // Re-sync orderedIds from localStorage whenever companies changes.
+  // Handles initial data load (companies starts as [] before query resolves)
+  // and subsequent refetches triggered by live updates.
+  useEffect(() => {
+    if (sidebarCompanies.length === 0) {
+      setOrderedIds([]);
+      return;
+    }
+    setOrderedIds(sortByStoredOrder(sidebarCompanies).map((c) => c.id));
+  }, [sidebarCompanies]);
+
+  // Sync order across tabs via the native storage event
+  useEffect(() => {
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key !== ORDER_STORAGE_KEY) return;
+      try {
+        const ids: string[] = e.newValue ? JSON.parse(e.newValue) : [];
+        setOrderedIds(ids);
+      } catch { /* ignore malformed data */ }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, []);
+
+  // Re-derive when companies change (new company added/removed)
+  const orderedCompanies = useMemo(() => {
+    const byId = new Map(sidebarCompanies.map((c) => [c.id, c]));
+    const result: Company[] = [];
+    for (const id of orderedIds) {
+      const c = byId.get(id);
+      if (c) {
+        result.push(c);
+        byId.delete(id);
+      }
+    }
+    // Append any new companies not yet in our order
+    for (const c of byId.values()) {
+      result.push(c);
+    }
+    return result;
+  }, [sidebarCompanies, orderedIds]);
+
+  // Require 8px of movement before starting a drag to avoid interfering with clicks
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    })
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+
+      const ids = orderedCompanies.map((c) => c.id);
+      const oldIndex = ids.indexOf(active.id as string);
+      const newIndex = ids.indexOf(over.id as string);
+      if (oldIndex === -1 || newIndex === -1) return;
+
+      const newIds = arrayMove(ids, oldIndex, newIndex);
+      setOrderedIds(newIds);
+      saveOrder(newIds);
+    },
+    [orderedCompanies]
+  );
+
+  return (
+    <div className="flex flex-col items-center w-[72px] shrink-0 h-full bg-background border-r border-border">
+      {/* Paperclip icon - aligned with top sections (implied line, no visible border) */}
+      <div className="flex items-center justify-center h-12 w-full shrink-0">
+        <Paperclip className="h-5 w-5 text-foreground" />
+      </div>
+
+      {/* Company list */}
+      <div className="flex-1 flex flex-col items-center gap-2 py-3 w-full overflow-y-auto overflow-x-hidden scrollbar-none">
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={orderedCompanies.map((c) => c.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {orderedCompanies.map((company) => (
+              <SortableCompanyItem
+                key={company.id}
+                company={company}
+                isSelected={company.id === highlightedCompanyId}
+                hasLiveAgents={hasLiveAgentsByCompanyId.get(company.id) ?? false}
+                hasUnreadInbox={hasUnreadInboxByCompanyId.get(company.id) ?? false}
+                onSelect={() => {
+                  setSelectedCompanyId(company.id);
+                  if (isInstanceRoute) {
+                    navigate(`/${company.issuePrefix}/dashboard`);
+                  }
+                }}
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </div>
+
+      {/* Separator before add button */}
+      <div className="w-8 h-px bg-border mx-auto shrink-0" />
+
+      {/* Add company button */}
+      <div className="flex items-center justify-center py-2 shrink-0">
+        <Tooltip delayDuration={300}>
+          <TooltipTrigger asChild>
+            <button
+              onClick={() => openOnboarding()}
+              className="flex items-center justify-center w-11 h-11 rounded-[22px] hover:rounded-[14px] border-2 border-dashed border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground transition-[border-color,color,border-radius] duration-150"
+              aria-label="Add company"
+            >
+              <Plus className="h-5 w-5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>
+            <p>Add company</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+

package/ui/src/components/CompanySwitcher.tsx

@@ -0,0 +1,81 @@
+import { ChevronsUpDown, Plus, Settings } from "lucide-react";
+import { Link } from "@/lib/router";
+import { useCompany } from "../context/CompanyContext";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+
+function statusDotColor(status?: string): string {
+  switch (status) {
+    case "active":
+      return "bg-green-400";
+    case "paused":
+      return "bg-yellow-400";
+    case "archived":
+      return "bg-neutral-400";
+    default:
+      return "bg-green-400";
+  }
+}
+
+export function CompanySwitcher() {
+  const { companies, selectedCompany, setSelectedCompanyId } = useCompany();
+  const sidebarCompanies = companies.filter((company) => company.status !== "archived");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="w-full justify-between px-2 py-1.5 h-auto text-left"
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {selectedCompany && (
+              <span className={`h-2 w-2 rounded-full shrink-0 ${statusDotColor(selectedCompany.status)}`} />
+            )}
+            <span className="text-sm font-medium truncate">
+              {selectedCompany?.name ?? "Select company"}
+            </span>
+          </div>
+          <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[220px]">
+        <DropdownMenuLabel>Companies</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {sidebarCompanies.map((company) => (
+          <DropdownMenuItem
+            key={company.id}
+            onClick={() => setSelectedCompanyId(company.id)}
+            className={company.id === selectedCompany?.id ? "bg-accent" : ""}
+          >
+            <span className={`h-2 w-2 rounded-full shrink-0 mr-2 ${statusDotColor(company.status)}`} />
+            <span className="truncate">{company.name}</span>
+          </DropdownMenuItem>
+        ))}
+        {sidebarCompanies.length === 0 && (
+          <DropdownMenuItem disabled>No companies</DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link to="/company/settings" className="no-underline text-inherit">
+            <Settings className="h-4 w-4 mr-2" />
+            Company Settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link to="/companies" className="no-underline text-inherit">
+            <Plus className="h-4 w-4 mr-2" />
+            Manage Companies
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/ui/src/components/CopyText.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface CopyTextProps {
+  text: string;
+  /** What to display. Defaults to `text`. */
+  children?: React.ReactNode;
+  className?: string;
+  /** Tooltip message shown after copying. Default: "Copied!" */
+  copiedLabel?: string;
+}
+
+export function CopyText({ text, children, className, copiedLabel = "Copied!" }: CopyTextProps) {
+  const [visible, setVisible] = useState(false);
+  const [label, setLabel] = useState(copiedLabel);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleClick = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setLabel(copiedLabel);
+    } catch {
+      setLabel("Copy failed");
+    }
+    clearTimeout(timerRef.current);
+    setVisible(true);
+    timerRef.current = setTimeout(() => setVisible(false), 1500);
+  }, [copiedLabel, text]);
+
+  return (
+    <span className="relative inline-flex">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={cn(
+          "cursor-copy hover:text-foreground transition-colors",
+          className,
+        )}
+        onClick={handleClick}
+      >
+        {children ?? text}
+      </button>
+      <span
+        role="status"
+        aria-live="polite"
+        className={cn(
+          "pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-1.5 rounded-md bg-foreground text-background px-2 py-1 text-xs whitespace-nowrap transition-opacity duration-300",
+          visible ? "opacity-100" : "opacity-0",
+        )}
+      >
+        {label}
+      </span>
+    </span>
+  );
+}