corporateai 0.0.1

package/ui/src/components/SidebarAgents.tsx

@@ -0,0 +1,146 @@
+import { useMemo, useState } from "react";
+import { NavLink, useLocation } from "@/lib/router";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight, Plus } from "lucide-react";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { useSidebar } from "../context/SidebarContext";
+import { agentsApi } from "../api/agents";
+import { authApi } from "../api/auth";
+import { heartbeatsApi } from "../api/heartbeats";
+import { queryKeys } from "../lib/queryKeys";
+import { cn, agentRouteRef, agentUrl } from "../lib/utils";
+import { useAgentOrder } from "../hooks/useAgentOrder";
+import { AgentIcon } from "./AgentIconPicker";
+import { BudgetSidebarMarker } from "./BudgetSidebarMarker";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import type { Agent } from "@corporateai/shared";
+export function SidebarAgents() {
+  const [open, setOpen] = useState(true);
+  const { selectedCompanyId } = useCompany();
+  const { openNewAgent } = useDialog();
+  const { isMobile, setSidebarOpen } = useSidebar();
+  const location = useLocation();
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+  const { data: session } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+  });
+
+  const { data: liveRuns } = useQuery({
+    queryKey: queryKeys.liveRuns(selectedCompanyId!),
+    queryFn: () => heartbeatsApi.liveRunsForCompany(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+    refetchInterval: 10_000,
+  });
+
+  const liveCountByAgent = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const run of liveRuns ?? []) {
+      counts.set(run.agentId, (counts.get(run.agentId) ?? 0) + 1);
+    }
+    return counts;
+  }, [liveRuns]);
+
+  const visibleAgents = useMemo(() => {
+    const filtered = (agents ?? []).filter(
+      (a: Agent) => a.status !== "terminated"
+    );
+    return filtered;
+  }, [agents]);
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+  const { orderedAgents } = useAgentOrder({
+    agents: visibleAgents,
+    companyId: selectedCompanyId,
+    userId: currentUserId,
+  });
+
+  const agentMatch = location.pathname.match(/^\/(?:[^/]+\/)?agents\/([^/]+)(?:\/([^/]+))?/);
+  const activeAgentId = agentMatch?.[1] ?? null;
+  const activeTab = agentMatch?.[2] ?? null;
+
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="group">
+        <div className="flex items-center px-3 py-1.5">
+          <CollapsibleTrigger className="flex items-center gap-1 flex-1 min-w-0">
+            <ChevronRight
+              className={cn(
+                "h-3 w-3 text-muted-foreground/60 transition-transform opacity-0 group-hover:opacity-100",
+                open && "rotate-90"
+              )}
+            />
+            <span className="text-[10px] font-medium uppercase tracking-widest font-mono text-muted-foreground/60">
+              Agents
+            </span>
+          </CollapsibleTrigger>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              openNewAgent();
+            }}
+            className="flex items-center justify-center h-4 w-4 rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
+            aria-label="New agent"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+
+      <CollapsibleContent>
+        <div className="flex flex-col gap-0.5 mt-0.5">
+          {orderedAgents.map((agent: Agent) => {
+            const runCount = liveCountByAgent.get(agent.id) ?? 0;
+            return (
+              <NavLink
+                key={agent.id}
+                to={activeTab ? `${agentUrl(agent)}/${activeTab}` : agentUrl(agent)}
+                onClick={() => {
+                  if (isMobile) setSidebarOpen(false);
+                }}
+                className={cn(
+                  "flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
+                  activeAgentId === agentRouteRef(agent)
+                    ? "bg-accent text-foreground"
+                    : "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
+                )}
+              >
+                <AgentIcon icon={agent.icon} className="shrink-0 h-3.5 w-3.5 text-muted-foreground" />
+                <span className="flex-1 truncate">{agent.name}</span>
+                {(agent.pauseReason === "budget" || runCount > 0) && (
+                  <span className="ml-auto flex items-center gap-1.5 shrink-0">
+                    {agent.pauseReason === "budget" ? (
+                      <BudgetSidebarMarker title="Agent paused by budget" />
+                    ) : null}
+                    {runCount > 0 ? (
+                      <span className="relative flex h-2 w-2">
+                        <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
+                        <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+                      </span>
+                    ) : null}
+                    {runCount > 0 ? (
+                      <span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
+                        {runCount} live
+                      </span>
+                    ) : null}
+                  </span>
+                )}
+              </NavLink>
+            );
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+

package/ui/src/components/SidebarNavItem.tsx

@@ -0,0 +1,92 @@
+import { NavLink } from "@/lib/router";
+import { cn } from "../lib/utils";
+import { useSidebar } from "../context/SidebarContext";
+import type { LucideIcon } from "lucide-react";
+
+interface SidebarNavItemProps {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  end?: boolean;
+  className?: string;
+  badge?: number;
+  badgeTone?: "default" | "danger";
+  textBadge?: string;
+  textBadgeTone?: "default" | "amber";
+  alert?: boolean;
+  liveCount?: number;
+}
+
+export function SidebarNavItem({
+  to,
+  label,
+  icon: Icon,
+  end,
+  className,
+  badge,
+  badgeTone = "default",
+  textBadge,
+  textBadgeTone = "default",
+  alert = false,
+  liveCount,
+}: SidebarNavItemProps) {
+  const { isMobile, setSidebarOpen } = useSidebar();
+
+  return (
+    <NavLink
+      to={to}
+      end={end}
+      onClick={() => { if (isMobile) setSidebarOpen(false); }}
+      className={({ isActive }) =>
+        cn(
+          "flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors",
+          isActive
+            ? "bg-accent text-foreground"
+            : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+          className,
+        )
+      }
+    >
+      <span className="relative shrink-0">
+        <Icon className="h-4 w-4" />
+        {alert && (
+          <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-red-500 shadow-[0_0_0_2px_hsl(var(--background))]" />
+        )}
+      </span>
+      <span className="flex-1 truncate">{label}</span>
+      {textBadge && (
+        <span
+          className={cn(
+            "ml-auto rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none",
+            textBadgeTone === "amber"
+              ? "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400"
+              : "bg-muted text-muted-foreground",
+          )}
+        >
+          {textBadge}
+        </span>
+      )}
+      {liveCount != null && liveCount > 0 && (
+        <span className="ml-auto flex items-center gap-1.5">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+          </span>
+          <span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">{liveCount} live</span>
+        </span>
+      )}
+      {badge != null && badge > 0 && (
+        <span
+          className={cn(
+            "ml-auto rounded-full px-1.5 py-0.5 text-xs leading-none",
+            badgeTone === "danger"
+              ? "bg-red-600/90 text-red-50"
+              : "bg-primary text-primary-foreground",
+          )}
+        >
+          {badge}
+        </span>
+      )}
+    </NavLink>
+  );
+}

package/ui/src/components/SidebarProjects.tsx

@@ -0,0 +1,234 @@
+import { useCallback, useMemo, useState } from "react";
+import { NavLink, useLocation } from "@/lib/router";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight, Plus } from "lucide-react";
+import {
+  DndContext,
+  PointerSensor,
+  closestCenter,
+  type DragEndEvent,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useCompany } from "../context/CompanyContext";
+import { useDialog } from "../context/DialogContext";
+import { useSidebar } from "../context/SidebarContext";
+import { authApi } from "../api/auth";
+import { projectsApi } from "../api/projects";
+import { queryKeys } from "../lib/queryKeys";
+import { cn, projectRouteRef } from "../lib/utils";
+import { useProjectOrder } from "../hooks/useProjectOrder";
+import { BudgetSidebarMarker } from "./BudgetSidebarMarker";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { PluginSlotMount, usePluginSlots } from "@/plugins/slots";
+import type { Project } from "@corporateai/shared";
+
+type ProjectSidebarSlot = ReturnType<typeof usePluginSlots>["slots"][number];
+
+function SortableProjectItem({
+  activeProjectRef,
+  companyId,
+  companyPrefix,
+  isMobile,
+  project,
+  projectSidebarSlots,
+  setSidebarOpen,
+}: {
+  activeProjectRef: string | null;
+  companyId: string | null;
+  companyPrefix: string | null;
+  isMobile: boolean;
+  project: Project;
+  projectSidebarSlots: ProjectSidebarSlot[];
+  setSidebarOpen: (open: boolean) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: project.id });
+
+  const routeRef = projectRouteRef(project);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isDragging ? 10 : undefined,
+      }}
+      className={cn(isDragging && "opacity-80")}
+      {...attributes}
+      {...listeners}
+    >
+      <div className="flex flex-col gap-0.5">
+        <NavLink
+          to={`/projects/${routeRef}/issues`}
+          onClick={() => {
+            if (isMobile) setSidebarOpen(false);
+          }}
+          className={cn(
+            "flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
+            activeProjectRef === routeRef || activeProjectRef === project.id
+              ? "bg-accent text-foreground"
+              : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+          )}
+        >
+          <span
+            className="shrink-0 h-3.5 w-3.5 rounded-sm"
+            style={{ backgroundColor: project.color ?? "#6366f1" }}
+          />
+          <span className="flex-1 truncate">{project.name}</span>
+          {project.pauseReason === "budget" ? <BudgetSidebarMarker title="Project paused by budget" /> : null}
+        </NavLink>
+        {projectSidebarSlots.length > 0 && (
+          <div className="ml-5 flex flex-col gap-0.5">
+            {projectSidebarSlots.map((slot) => (
+              <PluginSlotMount
+                key={`${project.id}:${slot.pluginKey}:${slot.id}`}
+                slot={slot}
+                context={{
+                  companyId,
+                  companyPrefix,
+                  projectId: project.id,
+                  projectRef: routeRef,
+                  entityId: project.id,
+                  entityType: "project",
+                }}
+                missingBehavior="placeholder"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function SidebarProjects() {
+  const [open, setOpen] = useState(true);
+  const { selectedCompany, selectedCompanyId } = useCompany();
+  const { openNewProject } = useDialog();
+  const { isMobile, setSidebarOpen } = useSidebar();
+  const location = useLocation();
+
+  const { data: projects } = useQuery({
+    queryKey: queryKeys.projects.list(selectedCompanyId!),
+    queryFn: () => projectsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+  const { data: session } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+  });
+  const { slots: projectSidebarSlots } = usePluginSlots({
+    slotTypes: ["projectSidebarItem"],
+    entityType: "project",
+    companyId: selectedCompanyId,
+    enabled: !!selectedCompanyId,
+  });
+
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+
+  const visibleProjects = useMemo(
+    () => (projects ?? []).filter((project: Project) => !project.archivedAt),
+    [projects],
+  );
+  const { orderedProjects, persistOrder } = useProjectOrder({
+    projects: visibleProjects,
+    companyId: selectedCompanyId,
+    userId: currentUserId,
+  });
+
+  const projectMatch = location.pathname.match(/^\/(?:[^/]+\/)?projects\/([^/]+)/);
+  const activeProjectRef = projectMatch?.[1] ?? null;
+  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 = orderedProjects.map((project) => project.id);
+      const oldIndex = ids.indexOf(active.id as string);
+      const newIndex = ids.indexOf(over.id as string);
+      if (oldIndex === -1 || newIndex === -1) return;
+
+      persistOrder(arrayMove(ids, oldIndex, newIndex));
+    },
+    [orderedProjects, persistOrder],
+  );
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="group">
+        <div className="flex items-center px-3 py-1.5">
+          <CollapsibleTrigger className="flex items-center gap-1 flex-1 min-w-0">
+            <ChevronRight
+              className={cn(
+                "h-3 w-3 text-muted-foreground/60 transition-transform opacity-0 group-hover:opacity-100",
+                open && "rotate-90"
+              )}
+            />
+            <span className="text-[10px] font-medium uppercase tracking-widest font-mono text-muted-foreground/60">
+              Projects
+            </span>
+          </CollapsibleTrigger>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              openNewProject();
+            }}
+            className="flex items-center justify-center h-4 w-4 rounded text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-colors"
+            aria-label="New project"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+
+      <CollapsibleContent>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={orderedProjects.map((project) => project.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="flex flex-col gap-0.5 mt-0.5">
+              {orderedProjects.map((project: Project) => (
+                <SortableProjectItem
+                  key={project.id}
+                  activeProjectRef={activeProjectRef}
+                  companyId={selectedCompanyId}
+                  companyPrefix={selectedCompany?.issuePrefix ?? null}
+                  isMobile={isMobile}
+                  project={project}
+                  projectSidebarSlots={projectSidebarSlots}
+                  setSidebarOpen={setSidebarOpen}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+

package/ui/src/components/SidebarSection.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+interface SidebarSectionProps {
+  label: string;
+  children: ReactNode;
+}
+
+export function SidebarSection({ label, children }: SidebarSectionProps) {
+  return (
+    <div>
+      <div className="px-3 py-1.5 text-[10px] font-medium uppercase tracking-widest font-mono text-muted-foreground/60">
+        {label}
+      </div>
+      <div className="flex flex-col gap-0.5 mt-0.5">{children}</div>
+    </div>
+  );
+}

package/ui/src/components/StatusBadge.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../lib/utils";
+import { statusBadge, statusBadgeDefault } from "../lib/status-colors";
+
+export function StatusBadge({ status }: { status: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap shrink-0",
+        statusBadge[status] ?? statusBadgeDefault
+      )}
+    >
+      {status.replace("_", " ")}
+    </span>
+  );
+}

package/ui/src/components/StatusIcon.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { issueStatusIcon, issueStatusIconDefault } from "../lib/status-colors";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+const allStatuses = ["backlog", "todo", "in_progress", "in_review", "done", "cancelled", "blocked"];
+
+function statusLabel(status: string): string {
+  return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+interface StatusIconProps {
+  status: string;
+  onChange?: (status: string) => void;
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function StatusIcon({ status, onChange, className, showLabel }: StatusIconProps) {
+  const [open, setOpen] = useState(false);
+  const colorClass = issueStatusIcon[status] ?? issueStatusIconDefault;
+  const isDone = status === "done";
+
+  const circle = (
+    <span
+      className={cn(
+        "relative inline-flex h-4 w-4 rounded-full border-2 shrink-0",
+        colorClass,
+        onChange && !showLabel && "cursor-pointer",
+        className
+      )}
+    >
+      {isDone && (
+        <span className="absolute inset-0 m-auto h-2 w-2 rounded-full bg-current" />
+      )}
+    </span>
+  );
+
+  if (!onChange) return showLabel ? <span className="inline-flex items-center gap-1.5">{circle}<span className="text-sm">{statusLabel(status)}</span></span> : circle;
+
+  const trigger = showLabel ? (
+    <button className="inline-flex items-center gap-1.5 cursor-pointer hover:bg-accent/50 rounded px-1 -mx-1 py-0.5 transition-colors">
+      {circle}
+      <span className="text-sm">{statusLabel(status)}</span>
+    </button>
+  ) : circle;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent className="w-40 p-1" align="start">
+        {allStatuses.map((s) => (
+          <Button
+            key={s}
+            variant="ghost"
+            size="sm"
+            className={cn("w-full justify-start gap-2 text-xs", s === status && "bg-accent")}
+            onClick={() => {
+              onChange(s);
+              setOpen(false);
+            }}
+          >
+            <StatusIcon status={s} />
+            {statusLabel(s)}
+          </Button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}