corporateai 0.0.1

package/ui/src/components/ActiveAgentsPanel.tsx

@@ -0,0 +1,157 @@
+import { useMemo } from "react";
+import { Link } from "@/lib/router";
+import { useQuery } from "@tanstack/react-query";
+import type { Issue } from "@corporateai/shared";
+import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
+import { issuesApi } from "../api/issues";
+import type { TranscriptEntry } from "../adapters";
+import { queryKeys } from "../lib/queryKeys";
+import { cn, relativeTime } from "../lib/utils";
+import { ExternalLink } from "lucide-react";
+import { Identity } from "./Identity";
+import { RunTranscriptView } from "./transcript/RunTranscriptView";
+import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
+
+const MIN_DASHBOARD_RUNS = 4;
+
+function isRunActive(run: LiveRunForIssue): boolean {
+  return run.status === "queued" || run.status === "running";
+}
+
+interface ActiveAgentsPanelProps {
+  companyId: string;
+}
+
+export function ActiveAgentsPanel({ companyId }: ActiveAgentsPanelProps) {
+  const { data: liveRuns } = useQuery({
+    queryKey: [...queryKeys.liveRuns(companyId), "dashboard"],
+    queryFn: () => heartbeatsApi.liveRunsForCompany(companyId, MIN_DASHBOARD_RUNS),
+  });
+
+  const runs = liveRuns ?? [];
+  const { data: issues } = useQuery({
+    queryKey: queryKeys.issues.list(companyId),
+    queryFn: () => issuesApi.list(companyId),
+    enabled: runs.length > 0,
+  });
+
+  const issueById = useMemo(() => {
+    const map = new Map<string, Issue>();
+    for (const issue of issues ?? []) {
+      map.set(issue.id, issue);
+    }
+    return map;
+  }, [issues]);
+
+  const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({
+    runs,
+    companyId,
+    maxChunksPerRun: 120,
+  });
+
+  return (
+    <div>
+      <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+        Agents
+      </h3>
+      {runs.length === 0 ? (
+        <div className="rounded-xl border border-border p-4">
+          <p className="text-sm text-muted-foreground">No recent agent runs.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-4">
+          {runs.map((run) => (
+            <AgentRunCard
+              key={run.id}
+              run={run}
+              issue={run.issueId ? issueById.get(run.issueId) : undefined}
+              transcript={transcriptByRun.get(run.id) ?? []}
+              hasOutput={hasOutputForRun(run.id)}
+              isActive={isRunActive(run)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AgentRunCard({
+  run,
+  issue,
+  transcript,
+  hasOutput,
+  isActive,
+}: {
+  run: LiveRunForIssue;
+  issue?: Issue;
+  transcript: TranscriptEntry[];
+  hasOutput: boolean;
+  isActive: boolean;
+}) {
+  return (
+    <div className={cn(
+      "flex h-[320px] flex-col overflow-hidden rounded-xl border shadow-sm",
+      isActive
+        ? "border-cyan-500/25 bg-cyan-500/[0.04] shadow-[0_16px_40px_rgba(6,182,212,0.08)]"
+        : "border-border bg-background/70",
+    )}>
+      <div className="border-b border-border/60 px-3 py-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              {isActive ? (
+                <span className="relative flex h-2.5 w-2.5 shrink-0">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-cyan-400 opacity-70" />
+                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-cyan-500" />
+                </span>
+              ) : (
+                <span className="inline-flex h-2.5 w-2.5 rounded-full bg-muted-foreground/35" />
+              )}
+              <Identity name={run.agentName} size="sm" className="[&>span:last-child]:!text-[11px]" />
+            </div>
+            <div className="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
+              <span>{isActive ? "Live now" : run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}</span>
+            </div>
+          </div>
+
+          <Link
+            to={`/agents/${run.agentId}/runs/${run.id}`}
+            className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ExternalLink className="h-2.5 w-2.5" />
+          </Link>
+        </div>
+
+        {run.issueId && (
+          <div className="mt-3 rounded-lg border border-border/60 bg-background/60 px-2.5 py-2 text-xs">
+            <Link
+              to={`/issues/${issue?.identifier ?? run.issueId}`}
+              className={cn(
+                "line-clamp-2 hover:underline",
+                isActive ? "text-cyan-700 dark:text-cyan-300" : "text-muted-foreground hover:text-foreground",
+              )}
+              title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
+            >
+              {issue?.identifier ?? run.issueId.slice(0, 8)}
+              {issue?.title ? ` - ${issue.title}` : ""}
+            </Link>
+          </div>
+        )}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        <RunTranscriptView
+          entries={transcript}
+          density="compact"
+          limit={5}
+          streaming={isActive}
+          collapseStdout
+          thinkingClassName="!text-[10px] !leading-4"
+          emptyMessage={hasOutput ? "Waiting for transcript parsing..." : isActive ? "Waiting for output..." : "No transcript captured."}
+        />
+      </div>
+    </div>
+  );
+}
+

package/ui/src/components/ActivityCharts.tsx

@@ -0,0 +1,264 @@
+import type { HeartbeatRun } from "@corporateai/shared";
+
+/* ---- Utilities ---- */
+
+export function getLast14Days(): string[] {
+  return Array.from({ length: 14 }, (_, i) => {
+    const d = new Date();
+    d.setDate(d.getDate() - (13 - i));
+    return d.toISOString().slice(0, 10);
+  });
+}
+
+function formatDayLabel(dateStr: string): string {
+  const d = new Date(dateStr + "T12:00:00");
+  return `${d.getMonth() + 1}/${d.getDate()}`;
+}
+
+/* ---- Sub-components ---- */
+
+function DateLabels({ days }: { days: string[] }) {
+  return (
+    <div className="flex gap-[3px] mt-1.5">
+      {days.map((day, i) => (
+        <div key={day} className="flex-1 text-center">
+          {(i === 0 || i === 6 || i === 13) ? (
+            <span className="text-[9px] text-muted-foreground tabular-nums">{formatDayLabel(day)}</span>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ChartLegend({ items }: { items: { color: string; label: string }[] }) {
+  return (
+    <div className="flex flex-wrap gap-x-2.5 gap-y-0.5 mt-2">
+      {items.map(item => (
+        <span key={item.label} className="flex items-center gap-1 text-[9px] text-muted-foreground">
+          <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
+          {item.label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function ChartCard({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
+  return (
+    <div className="border border-border rounded-lg p-4 space-y-3">
+      <div>
+        <h3 className="text-xs font-medium text-muted-foreground">{title}</h3>
+        {subtitle && <span className="text-[10px] text-muted-foreground/60">{subtitle}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/* ---- Chart Components ---- */
+
+export function RunActivityChart({ runs }: { runs: HeartbeatRun[] }) {
+  const days = getLast14Days();
+
+  const grouped = new Map<string, { succeeded: number; failed: number; other: number }>();
+  for (const day of days) grouped.set(day, { succeeded: 0, failed: 0, other: 0 });
+  for (const run of runs) {
+    const day = new Date(run.createdAt).toISOString().slice(0, 10);
+    const entry = grouped.get(day);
+    if (!entry) continue;
+    if (run.status === "succeeded") entry.succeeded++;
+    else if (run.status === "failed" || run.status === "timed_out") entry.failed++;
+    else entry.other++;
+  }
+
+  const maxValue = Math.max(...Array.from(grouped.values()).map(v => v.succeeded + v.failed + v.other), 1);
+  const hasData = Array.from(grouped.values()).some(v => v.succeeded + v.failed + v.other > 0);
+
+  if (!hasData) return <p className="text-xs text-muted-foreground">No runs yet</p>;
+
+  return (
+    <div>
+      <div className="flex items-end gap-[3px] h-20">
+        {days.map(day => {
+          const entry = grouped.get(day)!;
+          const total = entry.succeeded + entry.failed + entry.other;
+          const heightPct = (total / maxValue) * 100;
+          return (
+            <div key={day} className="flex-1 h-full flex flex-col justify-end" title={`${day}: ${total} runs`}>
+              {total > 0 ? (
+                <div className="flex flex-col-reverse gap-px overflow-hidden" style={{ height: `${heightPct}%`, minHeight: 2 }}>
+                  {entry.succeeded > 0 && <div className="bg-emerald-500" style={{ flex: entry.succeeded }} />}
+                  {entry.failed > 0 && <div className="bg-red-500" style={{ flex: entry.failed }} />}
+                  {entry.other > 0 && <div className="bg-neutral-500" style={{ flex: entry.other }} />}
+                </div>
+              ) : (
+                <div className="bg-muted/30 rounded-sm" style={{ height: 2 }} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <DateLabels days={days} />
+    </div>
+  );
+}
+
+const priorityColors: Record<string, string> = {
+  critical: "#ef4444",
+  high: "#f97316",
+  medium: "#eab308",
+  low: "#6b7280",
+};
+
+const priorityOrder = ["critical", "high", "medium", "low"] as const;
+
+export function PriorityChart({ issues }: { issues: { priority: string; createdAt: Date }[] }) {
+  const days = getLast14Days();
+  const grouped = new Map<string, Record<string, number>>();
+  for (const day of days) grouped.set(day, { critical: 0, high: 0, medium: 0, low: 0 });
+  for (const issue of issues) {
+    const day = new Date(issue.createdAt).toISOString().slice(0, 10);
+    const entry = grouped.get(day);
+    if (!entry) continue;
+    if (issue.priority in entry) entry[issue.priority]++;
+  }
+
+  const maxValue = Math.max(...Array.from(grouped.values()).map(v => Object.values(v).reduce((a, b) => a + b, 0)), 1);
+  const hasData = Array.from(grouped.values()).some(v => Object.values(v).reduce((a, b) => a + b, 0) > 0);
+
+  if (!hasData) return <p className="text-xs text-muted-foreground">No issues</p>;
+
+  return (
+    <div>
+      <div className="flex items-end gap-[3px] h-20">
+        {days.map(day => {
+          const entry = grouped.get(day)!;
+          const total = Object.values(entry).reduce((a, b) => a + b, 0);
+          const heightPct = (total / maxValue) * 100;
+          return (
+            <div key={day} className="flex-1 h-full flex flex-col justify-end" title={`${day}: ${total} issues`}>
+              {total > 0 ? (
+                <div className="flex flex-col-reverse gap-px overflow-hidden" style={{ height: `${heightPct}%`, minHeight: 2 }}>
+                  {priorityOrder.map(p => entry[p] > 0 ? (
+                    <div key={p} style={{ flex: entry[p], backgroundColor: priorityColors[p] }} />
+                  ) : null)}
+                </div>
+              ) : (
+                <div className="bg-muted/30 rounded-sm" style={{ height: 2 }} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <DateLabels days={days} />
+      <ChartLegend items={priorityOrder.map(p => ({ color: priorityColors[p], label: p.charAt(0).toUpperCase() + p.slice(1) }))} />
+    </div>
+  );
+}
+
+const statusColors: Record<string, string> = {
+  todo: "#3b82f6",
+  in_progress: "#8b5cf6",
+  in_review: "#a855f7",
+  done: "#10b981",
+  blocked: "#ef4444",
+  cancelled: "#6b7280",
+  backlog: "#64748b",
+};
+
+const statusLabels: Record<string, string> = {
+  todo: "To Do",
+  in_progress: "In Progress",
+  in_review: "In Review",
+  done: "Done",
+  blocked: "Blocked",
+  cancelled: "Cancelled",
+  backlog: "Backlog",
+};
+
+export function IssueStatusChart({ issues }: { issues: { status: string; createdAt: Date }[] }) {
+  const days = getLast14Days();
+  const allStatuses = new Set<string>();
+  const grouped = new Map<string, Record<string, number>>();
+  for (const day of days) grouped.set(day, {});
+  for (const issue of issues) {
+    const day = new Date(issue.createdAt).toISOString().slice(0, 10);
+    const entry = grouped.get(day);
+    if (!entry) continue;
+    entry[issue.status] = (entry[issue.status] ?? 0) + 1;
+    allStatuses.add(issue.status);
+  }
+
+  const statusOrder = ["todo", "in_progress", "in_review", "done", "blocked", "cancelled", "backlog"].filter(s => allStatuses.has(s));
+  const maxValue = Math.max(...Array.from(grouped.values()).map(v => Object.values(v).reduce((a, b) => a + b, 0)), 1);
+  const hasData = allStatuses.size > 0;
+
+  if (!hasData) return <p className="text-xs text-muted-foreground">No issues</p>;
+
+  return (
+    <div>
+      <div className="flex items-end gap-[3px] h-20">
+        {days.map(day => {
+          const entry = grouped.get(day)!;
+          const total = Object.values(entry).reduce((a, b) => a + b, 0);
+          const heightPct = (total / maxValue) * 100;
+          return (
+            <div key={day} className="flex-1 h-full flex flex-col justify-end" title={`${day}: ${total} issues`}>
+              {total > 0 ? (
+                <div className="flex flex-col-reverse gap-px overflow-hidden" style={{ height: `${heightPct}%`, minHeight: 2 }}>
+                  {statusOrder.map(s => (entry[s] ?? 0) > 0 ? (
+                    <div key={s} style={{ flex: entry[s], backgroundColor: statusColors[s] ?? "#6b7280" }} />
+                  ) : null)}
+                </div>
+              ) : (
+                <div className="bg-muted/30 rounded-sm" style={{ height: 2 }} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <DateLabels days={days} />
+      <ChartLegend items={statusOrder.map(s => ({ color: statusColors[s] ?? "#6b7280", label: statusLabels[s] ?? s }))} />
+    </div>
+  );
+}
+
+export function SuccessRateChart({ runs }: { runs: HeartbeatRun[] }) {
+  const days = getLast14Days();
+  const grouped = new Map<string, { succeeded: number; total: number }>();
+  for (const day of days) grouped.set(day, { succeeded: 0, total: 0 });
+  for (const run of runs) {
+    const day = new Date(run.createdAt).toISOString().slice(0, 10);
+    const entry = grouped.get(day);
+    if (!entry) continue;
+    entry.total++;
+    if (run.status === "succeeded") entry.succeeded++;
+  }
+
+  const hasData = Array.from(grouped.values()).some(v => v.total > 0);
+  if (!hasData) return <p className="text-xs text-muted-foreground">No runs yet</p>;
+
+  return (
+    <div>
+      <div className="flex items-end gap-[3px] h-20">
+        {days.map(day => {
+          const entry = grouped.get(day)!;
+          const rate = entry.total > 0 ? entry.succeeded / entry.total : 0;
+          const color = entry.total === 0 ? undefined : rate >= 0.8 ? "#10b981" : rate >= 0.5 ? "#eab308" : "#ef4444";
+          return (
+            <div key={day} className="flex-1 h-full flex flex-col justify-end" title={`${day}: ${entry.total > 0 ? Math.round(rate * 100) : 0}% (${entry.succeeded}/${entry.total})`}>
+              {entry.total > 0 ? (
+                <div style={{ height: `${rate * 100}%`, minHeight: 2, backgroundColor: color }} />
+              ) : (
+                <div className="bg-muted/30 rounded-sm" style={{ height: 2 }} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <DateLabels days={days} />
+    </div>
+  );
+}
+

package/ui/src/components/ActivityRow.tsx

@@ -0,0 +1,147 @@
+import { Link } from "@/lib/router";
+import { Identity } from "./Identity";
+import { timeAgo } from "../lib/timeAgo";
+import { cn } from "../lib/utils";
+import { deriveProjectUrlKey, type ActivityEvent, type Agent } from "@corporateai/shared";
+
+const ACTION_VERBS: Record<string, string> = {
+  "issue.created": "created",
+  "issue.updated": "updated",
+  "issue.checked_out": "checked out",
+  "issue.released": "released",
+  "issue.comment_added": "commented on",
+  "issue.attachment_added": "attached file to",
+  "issue.attachment_removed": "removed attachment from",
+  "issue.document_created": "created document for",
+  "issue.document_updated": "updated document on",
+  "issue.document_deleted": "deleted document from",
+  "issue.commented": "commented on",
+  "issue.deleted": "deleted",
+  "agent.created": "created",
+  "agent.updated": "updated",
+  "agent.paused": "paused",
+  "agent.resumed": "resumed",
+  "agent.terminated": "terminated",
+  "agent.key_created": "created API key for",
+  "agent.budget_updated": "updated budget for",
+  "agent.runtime_session_reset": "reset session for",
+  "heartbeat.invoked": "invoked heartbeat for",
+  "heartbeat.cancelled": "cancelled heartbeat for",
+  "approval.created": "requested approval",
+  "approval.approved": "approved",
+  "approval.rejected": "rejected",
+  "project.created": "created",
+  "project.updated": "updated",
+  "project.deleted": "deleted",
+  "goal.created": "created",
+  "goal.updated": "updated",
+  "goal.deleted": "deleted",
+  "cost.reported": "reported cost for",
+  "cost.recorded": "recorded cost for",
+  "company.created": "created company",
+  "company.updated": "updated company",
+  "company.archived": "archived",
+  "company.budget_updated": "updated budget for",
+};
+
+function humanizeValue(value: unknown): string {
+  if (typeof value !== "string") return String(value ?? "none");
+  return value.replace(/_/g, " ");
+}
+
+function formatVerb(action: string, details?: Record<string, unknown> | null): string {
+  if (action === "issue.updated" && details) {
+    const previous = (details._previous ?? {}) as Record<string, unknown>;
+    if (details.status !== undefined) {
+      const from = previous.status;
+      return from
+        ? `changed status from ${humanizeValue(from)} to ${humanizeValue(details.status)} on`
+        : `changed status to ${humanizeValue(details.status)} on`;
+    }
+    if (details.priority !== undefined) {
+      const from = previous.priority;
+      return from
+        ? `changed priority from ${humanizeValue(from)} to ${humanizeValue(details.priority)} on`
+        : `changed priority to ${humanizeValue(details.priority)} on`;
+    }
+  }
+  return ACTION_VERBS[action] ?? action.replace(/[._]/g, " ");
+}
+
+function entityLink(entityType: string, entityId: string, name?: string | null): string | null {
+  switch (entityType) {
+    case "issue": return `/issues/${name ?? entityId}`;
+    case "agent": return `/agents/${entityId}`;
+    case "project": return `/projects/${deriveProjectUrlKey(name, entityId)}`;
+    case "goal": return `/goals/${entityId}`;
+    case "approval": return `/approvals/${entityId}`;
+    default: return null;
+  }
+}
+
+interface ActivityRowProps {
+  event: ActivityEvent;
+  agentMap: Map<string, Agent>;
+  entityNameMap: Map<string, string>;
+  entityTitleMap?: Map<string, string>;
+  className?: string;
+}
+
+export function ActivityRow({ event, agentMap, entityNameMap, entityTitleMap, className }: ActivityRowProps) {
+  const verb = formatVerb(event.action, event.details);
+
+  const isHeartbeatEvent = event.entityType === "heartbeat_run";
+  const heartbeatAgentId = isHeartbeatEvent
+    ? (event.details as Record<string, unknown> | null)?.agentId as string | undefined
+    : undefined;
+
+  const name = isHeartbeatEvent
+    ? (heartbeatAgentId ? entityNameMap.get(`agent:${heartbeatAgentId}`) : null)
+    : entityNameMap.get(`${event.entityType}:${event.entityId}`);
+
+  const entityTitle = entityTitleMap?.get(`${event.entityType}:${event.entityId}`);
+
+  const link = isHeartbeatEvent && heartbeatAgentId
+    ? `/agents/${heartbeatAgentId}/runs/${event.entityId}`
+    : entityLink(event.entityType, event.entityId, name);
+
+  const actor = event.actorType === "agent" ? agentMap.get(event.actorId) : null;
+  const actorName = actor?.name ?? (event.actorType === "system" ? "System" : event.actorType === "user" ? "Board" : event.actorId || "Unknown");
+
+  const inner = (
+    <div className="flex gap-3">
+      <p className="flex-1 min-w-0 truncate">
+        <Identity
+          name={actorName}
+          size="xs"
+          className="align-baseline"
+        />
+        <span className="text-muted-foreground ml-1">{verb} </span>
+        {name && <span className="font-medium">{name}</span>}
+        {entityTitle && <span className="text-muted-foreground ml-1">— {entityTitle}</span>}
+      </p>
+      <span className="text-xs text-muted-foreground shrink-0 pt-0.5">{timeAgo(event.createdAt)}</span>
+    </div>
+  );
+
+  const classes = cn(
+    "px-4 py-2 text-sm",
+    link && "cursor-pointer hover:bg-accent/50 transition-colors",
+    className,
+  );
+
+  if (link) {
+    return (
+      <Link to={link} className={cn(classes, "no-underline text-inherit block")}>
+        {inner}
+      </Link>
+    );
+  }
+
+  return (
+    <div className={classes}>
+      {inner}
+    </div>
+  );
+}
+

package/ui/src/components/AgentActionButtons.tsx

@@ -0,0 +1,51 @@
+import { Pause, Play } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function RunButton({
+  onClick,
+  disabled,
+  label = "Run now",
+  size = "sm",
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+  label?: string;
+  size?: "sm" | "default";
+}) {
+  return (
+    <Button variant="outline" size={size} onClick={onClick} disabled={disabled}>
+      <Play className="h-3.5 w-3.5 sm:mr-1" />
+      <span className="hidden sm:inline">{label}</span>
+    </Button>
+  );
+}
+
+export function PauseResumeButton({
+  isPaused,
+  onPause,
+  onResume,
+  disabled,
+  size = "sm",
+}: {
+  isPaused: boolean;
+  onPause: () => void;
+  onResume: () => void;
+  disabled?: boolean;
+  size?: "sm" | "default";
+}) {
+  if (isPaused) {
+    return (
+      <Button variant="outline" size={size} onClick={onResume} disabled={disabled}>
+        <Play className="h-3.5 w-3.5 sm:mr-1" />
+        <span className="hidden sm:inline">Resume</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant="outline" size={size} onClick={onPause} disabled={disabled}>
+      <Pause className="h-3.5 w-3.5 sm:mr-1" />
+      <span className="hidden sm:inline">Pause</span>
+    </Button>
+  );
+}