corporateai 0.0.1

package/ui/src/components/ScheduleEditor.tsx

@@ -0,0 +1,344 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+type SchedulePreset = "every_minute" | "every_hour" | "every_day" | "weekdays" | "weekly" | "monthly" | "custom";
+
+const PRESETS: { value: SchedulePreset; label: string }[] = [
+  { value: "every_minute", label: "Every minute" },
+  { value: "every_hour", label: "Every hour" },
+  { value: "every_day", label: "Every day" },
+  { value: "weekdays", label: "Weekdays" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "custom", label: "Custom (cron)" },
+];
+
+const HOURS = Array.from({ length: 24 }, (_, i) => ({
+  value: String(i),
+  label: i === 0 ? "12 AM" : i < 12 ? `${i} AM` : i === 12 ? "12 PM" : `${i - 12} PM`,
+}));
+
+const MINUTES = Array.from({ length: 12 }, (_, i) => ({
+  value: String(i * 5),
+  label: String(i * 5).padStart(2, "0"),
+}));
+
+const DAYS_OF_WEEK = [
+  { value: "1", label: "Mon" },
+  { value: "2", label: "Tue" },
+  { value: "3", label: "Wed" },
+  { value: "4", label: "Thu" },
+  { value: "5", label: "Fri" },
+  { value: "6", label: "Sat" },
+  { value: "0", label: "Sun" },
+];
+
+const DAYS_OF_MONTH = Array.from({ length: 31 }, (_, i) => ({
+  value: String(i + 1),
+  label: String(i + 1),
+}));
+
+function parseCronToPreset(cron: string): {
+  preset: SchedulePreset;
+  hour: string;
+  minute: string;
+  dayOfWeek: string;
+  dayOfMonth: string;
+} {
+  const defaults = { hour: "10", minute: "0", dayOfWeek: "1", dayOfMonth: "1" };
+
+  if (!cron || !cron.trim()) {
+    return { preset: "every_day", ...defaults };
+  }
+
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length !== 5) {
+    return { preset: "custom", ...defaults };
+  }
+
+  const [min, hr, dom, , dow] = parts;
+
+  // Every minute: "* * * * *"
+  if (min === "*" && hr === "*" && dom === "*" && dow === "*") {
+    return { preset: "every_minute", ...defaults };
+  }
+
+  // Every hour: "0 * * * *"
+  if (hr === "*" && dom === "*" && dow === "*") {
+    return { preset: "every_hour", ...defaults, minute: min === "*" ? "0" : min };
+  }
+
+  // Every day: "M H * * *"
+  if (dom === "*" && dow === "*" && hr !== "*") {
+    return { preset: "every_day", ...defaults, hour: hr, minute: min === "*" ? "0" : min };
+  }
+
+  // Weekdays: "M H * * 1-5"
+  if (dom === "*" && dow === "1-5" && hr !== "*") {
+    return { preset: "weekdays", ...defaults, hour: hr, minute: min === "*" ? "0" : min };
+  }
+
+  // Weekly: "M H * * D" (single day)
+  if (dom === "*" && /^\d$/.test(dow) && hr !== "*") {
+    return { preset: "weekly", ...defaults, hour: hr, minute: min === "*" ? "0" : min, dayOfWeek: dow };
+  }
+
+  // Monthly: "M H D * *"
+  if (/^\d{1,2}$/.test(dom) && dow === "*" && hr !== "*") {
+    return { preset: "monthly", ...defaults, hour: hr, minute: min === "*" ? "0" : min, dayOfMonth: dom };
+  }
+
+  return { preset: "custom", ...defaults };
+}
+
+function buildCron(preset: SchedulePreset, hour: string, minute: string, dayOfWeek: string, dayOfMonth: string): string {
+  switch (preset) {
+    case "every_minute":
+      return "* * * * *";
+    case "every_hour":
+      return `${minute} * * * *`;
+    case "every_day":
+      return `${minute} ${hour} * * *`;
+    case "weekdays":
+      return `${minute} ${hour} * * 1-5`;
+    case "weekly":
+      return `${minute} ${hour} * * ${dayOfWeek}`;
+    case "monthly":
+      return `${minute} ${hour} ${dayOfMonth} * *`;
+    case "custom":
+      return "";
+  }
+}
+
+function describeSchedule(cron: string): string {
+  const { preset, hour, minute, dayOfWeek, dayOfMonth } = parseCronToPreset(cron);
+  const hourLabel = HOURS.find((h) => h.value === hour)?.label ?? `${hour}`;
+  const timeStr = `${hourLabel.replace(/ (AM|PM)$/, "")}:${minute.padStart(2, "0")} ${hourLabel.match(/(AM|PM)$/)?.[0] ?? ""}`;
+
+  switch (preset) {
+    case "every_minute":
+      return "Every minute";
+    case "every_hour":
+      return `Every hour at :${minute.padStart(2, "0")}`;
+    case "every_day":
+      return `Every day at ${timeStr}`;
+    case "weekdays":
+      return `Weekdays at ${timeStr}`;
+    case "weekly": {
+      const day = DAYS_OF_WEEK.find((d) => d.value === dayOfWeek)?.label ?? dayOfWeek;
+      return `Every ${day} at ${timeStr}`;
+    }
+    case "monthly":
+      return `Monthly on the ${dayOfMonth}${ordinalSuffix(Number(dayOfMonth))} at ${timeStr}`;
+    case "custom":
+      return cron || "No schedule set";
+  }
+}
+
+function ordinalSuffix(n: number): string {
+  const s = ["th", "st", "nd", "rd"];
+  const v = n % 100;
+  return s[(v - 20) % 10] || s[v] || s[0];
+}
+
+export { describeSchedule };
+
+export function ScheduleEditor({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (cron: string) => void;
+}) {
+  const parsed = useMemo(() => parseCronToPreset(value), [value]);
+  const [preset, setPreset] = useState<SchedulePreset>(parsed.preset);
+  const [hour, setHour] = useState(parsed.hour);
+  const [minute, setMinute] = useState(parsed.minute);
+  const [dayOfWeek, setDayOfWeek] = useState(parsed.dayOfWeek);
+  const [dayOfMonth, setDayOfMonth] = useState(parsed.dayOfMonth);
+  const [customCron, setCustomCron] = useState(preset === "custom" ? value : "");
+
+  // Sync from external value changes
+  useEffect(() => {
+    const p = parseCronToPreset(value);
+    setPreset(p.preset);
+    setHour(p.hour);
+    setMinute(p.minute);
+    setDayOfWeek(p.dayOfWeek);
+    setDayOfMonth(p.dayOfMonth);
+    if (p.preset === "custom") setCustomCron(value);
+  }, [value]);
+
+  const emitChange = useCallback(
+    (p: SchedulePreset, h: string, m: string, dow: string, dom: string, custom: string) => {
+      if (p === "custom") {
+        onChange(custom);
+      } else {
+        onChange(buildCron(p, h, m, dow, dom));
+      }
+    },
+    [onChange],
+  );
+
+  const handlePresetChange = (newPreset: SchedulePreset) => {
+    setPreset(newPreset);
+    if (newPreset === "custom") {
+      setCustomCron(value);
+    } else {
+      emitChange(newPreset, hour, minute, dayOfWeek, dayOfMonth, customCron);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <Select value={preset} onValueChange={(v) => handlePresetChange(v as SchedulePreset)}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Choose frequency..." />
+        </SelectTrigger>
+        <SelectContent>
+          {PRESETS.map((p) => (
+            <SelectItem key={p.value} value={p.value}>
+              {p.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {preset === "custom" ? (
+        <div className="space-y-1.5">
+          <Input
+            value={customCron}
+            onChange={(e) => {
+              setCustomCron(e.target.value);
+              emitChange("custom", hour, minute, dayOfWeek, dayOfMonth, e.target.value);
+            }}
+            placeholder="0 10 * * *"
+            className="font-mono text-sm"
+          />
+          <p className="text-xs text-muted-foreground">
+            Five fields: minute hour day-of-month month day-of-week
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {preset !== "every_minute" && preset !== "every_hour" && (
+            <>
+              <span className="text-sm text-muted-foreground">at</span>
+              <Select
+                value={hour}
+                onValueChange={(h) => {
+                  setHour(h);
+                  emitChange(preset, h, minute, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {HOURS.map((h) => (
+                    <SelectItem key={h.value} value={h.value}>
+                      {h.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span className="text-sm text-muted-foreground">:</span>
+              <Select
+                value={minute}
+                onValueChange={(m) => {
+                  setMinute(m);
+                  emitChange(preset, hour, m, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTES.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      {m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+
+          {preset === "every_hour" && (
+            <>
+              <span className="text-sm text-muted-foreground">at minute</span>
+              <Select
+                value={minute}
+                onValueChange={(m) => {
+                  setMinute(m);
+                  emitChange(preset, hour, m, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTES.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      :{m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+
+          {preset === "weekly" && (
+            <>
+              <span className="text-sm text-muted-foreground">on</span>
+              <div className="flex gap-1">
+                {DAYS_OF_WEEK.map((d) => (
+                  <Button
+                    key={d.value}
+                    type="button"
+                    variant={dayOfWeek === d.value ? "default" : "outline"}
+                    size="sm"
+                    className="h-7 px-2 text-xs"
+                    onClick={() => {
+                      setDayOfWeek(d.value);
+                      emitChange(preset, hour, minute, d.value, dayOfMonth, customCron);
+                    }}
+                  >
+                    {d.label}
+                  </Button>
+                ))}
+              </div>
+            </>
+          )}
+
+          {preset === "monthly" && (
+            <>
+              <span className="text-sm text-muted-foreground">on day</span>
+              <Select
+                value={dayOfMonth}
+                onValueChange={(dom) => {
+                  setDayOfMonth(dom);
+                  emitChange(preset, hour, minute, dayOfWeek, dom, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {DAYS_OF_MONTH.map((d) => (
+                    <SelectItem key={d.value} value={d.value}>
+                      {d.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/components/ScrollToBottom.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from "react";
+import { ArrowDown } from "lucide-react";
+
+function resolveScrollTarget() {
+  const mainContent = document.getElementById("main-content");
+
+  if (mainContent instanceof HTMLElement) {
+    const overflowY = window.getComputedStyle(mainContent).overflowY;
+    const usesOwnScroll =
+      (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay")
+      && mainContent.scrollHeight > mainContent.clientHeight + 1;
+
+    if (usesOwnScroll) {
+      return { type: "element" as const, element: mainContent };
+    }
+  }
+
+  return { type: "window" as const };
+}
+
+function distanceFromBottom(target: ReturnType<typeof resolveScrollTarget>) {
+  if (target.type === "element") {
+    return target.element.scrollHeight - target.element.scrollTop - target.element.clientHeight;
+  }
+
+  const scroller = document.scrollingElement ?? document.documentElement;
+  return scroller.scrollHeight - window.scrollY - window.innerHeight;
+}
+
+/**
+ * Floating scroll-to-bottom button that follows the active page scroller.
+ * On desktop that is `#main-content`; on mobile it falls back to window/page scroll.
+ */
+export function ScrollToBottom() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      setVisible(distanceFromBottom(resolveScrollTarget()) > 300);
+    };
+
+    const mainContent = document.getElementById("main-content");
+
+    check();
+    mainContent?.addEventListener("scroll", check, { passive: true });
+    window.addEventListener("scroll", check, { passive: true });
+    window.addEventListener("resize", check);
+
+    return () => {
+      mainContent?.removeEventListener("scroll", check);
+      window.removeEventListener("scroll", check);
+      window.removeEventListener("resize", check);
+    };
+  }, []);
+
+  const scroll = useCallback(() => {
+    const target = resolveScrollTarget();
+
+    if (target.type === "element") {
+      target.element.scrollTo({ top: target.element.scrollHeight, behavior: "smooth" });
+      return;
+    }
+
+    const scroller = document.scrollingElement ?? document.documentElement;
+    window.scrollTo({ top: scroller.scrollHeight, behavior: "smooth" });
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={scroll}
+      className="fixed bottom-[calc(1.5rem+5rem+env(safe-area-inset-bottom))] right-6 z-40 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-background shadow-md hover:bg-accent transition-colors md:bottom-6"
+      aria-label="Scroll to bottom"
+    >
+      <ArrowDown className="h-4 w-4" />
+    </button>
+  );
+}

package/ui/src/components/Sidebar.tsx

@@ -0,0 +1,130 @@
+import {
+  Inbox,
+  CircleDot,
+  Target,
+  LayoutDashboard,
+  Building2,
+  DollarSign,
+  History,
+  Search,
+  SquarePen,
+  Network,
+  Boxes,
+  Repeat,
+  Settings,
+} from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { SidebarSection } from "./SidebarSection";
+import { SidebarNavItem } from "./SidebarNavItem";
+import { SidebarProjects } from "./SidebarProjects";
+import { SidebarAgents } from "./SidebarAgents";
+import { useDialog } from "../context/DialogContext";
+import { useCompany } from "../context/CompanyContext";
+import { heartbeatsApi } from "../api/heartbeats";
+import { queryKeys } from "../lib/queryKeys";
+import { useInboxBadge } from "../hooks/useInboxBadge";
+import { Button } from "@/components/ui/button";
+import { PluginSlotOutlet } from "@/plugins/slots";
+
+export function Sidebar() {
+  const { openNewIssue } = useDialog();
+  const { selectedCompanyId, selectedCompany } = useCompany();
+  const inboxBadge = useInboxBadge(selectedCompanyId);
+  const { data: liveRuns } = useQuery({
+    queryKey: queryKeys.liveRuns(selectedCompanyId!),
+    queryFn: () => heartbeatsApi.liveRunsForCompany(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+    refetchInterval: 10_000,
+  });
+  const liveRunCount = liveRuns?.length ?? 0;
+
+  function openSearch() {
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
+  }
+
+  const pluginContext = {
+    companyId: selectedCompanyId,
+    companyPrefix: selectedCompany?.issuePrefix ?? null,
+  };
+
+  return (
+    <aside className="w-60 h-full min-h-0 border-r border-border bg-background flex flex-col">
+      {/* Top bar: Company name (bold) + Search — aligned with top sections (no visible border) */}
+      <div className="flex items-center gap-1 px-3 h-12 shrink-0">
+        {selectedCompany?.brandColor && (
+          <div
+            className="w-4 h-4 rounded-sm shrink-0 ml-1"
+            style={{ backgroundColor: selectedCompany.brandColor }}
+          />
+        )}
+        <span className="flex-1 text-sm font-bold text-foreground truncate pl-1">
+          {selectedCompany?.name ?? "Select company"}
+        </span>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="text-muted-foreground shrink-0"
+          onClick={openSearch}
+        >
+          <Search className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 px-3 py-2">
+        <div className="flex flex-col gap-0.5">
+          {/* New Issue button aligned with nav items */}
+          <button
+            onClick={() => openNewIssue()}
+            className="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors"
+          >
+            <SquarePen className="h-4 w-4 shrink-0" />
+            <span className="truncate">New Issue</span>
+          </button>
+          <SidebarNavItem to="/dashboard" label="Dashboard" icon={LayoutDashboard} liveCount={liveRunCount} />
+          <SidebarNavItem to="/office" label="Office" icon={Building2} />
+          <SidebarNavItem
+            to="/inbox"
+            label="Inbox"
+            icon={Inbox}
+            badge={inboxBadge.inbox}
+            badgeTone={inboxBadge.failedRuns > 0 ? "danger" : "default"}
+            alert={inboxBadge.failedRuns > 0}
+          />
+          <PluginSlotOutlet
+            slotTypes={["sidebar"]}
+            context={pluginContext}
+            className="flex flex-col gap-0.5"
+            itemClassName="text-[13px] font-medium"
+            missingBehavior="placeholder"
+          />
+        </div>
+
+        <SidebarSection label="Work">
+          <SidebarNavItem to="/issues" label="Issues" icon={CircleDot} />
+          <SidebarNavItem to="/routines" label="Routines" icon={Repeat} textBadge="Beta" textBadgeTone="amber" />
+          <SidebarNavItem to="/goals" label="Goals" icon={Target} />
+        </SidebarSection>
+
+        <SidebarProjects />
+
+        <SidebarAgents />
+
+        <SidebarSection label="Company">
+          <SidebarNavItem to="/org" label="Org" icon={Network} />
+          <SidebarNavItem to="/skills" label="Skills" icon={Boxes} />
+          <SidebarNavItem to="/costs" label="Costs" icon={DollarSign} />
+          <SidebarNavItem to="/activity" label="Activity" icon={History} />
+          <SidebarNavItem to="/company/settings" label="Settings" icon={Settings} />
+        </SidebarSection>
+
+        <PluginSlotOutlet
+          slotTypes={["sidebarPanel"]}
+          context={pluginContext}
+          className="flex flex-col gap-3"
+          itemClassName="rounded-lg border border-border p-3"
+          missingBehavior="placeholder"
+        />
+      </nav>
+    </aside>
+  );
+}