feat: make each plugin an npm workspace built by a termix-plugin CLI

plugins/automations/src/frontend/AutomationsPanel.tsx

@@ -0,0 +1,675 @@
+import { getErrorMessage } from "@/lib/error-message.js";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  ArrowLeft,
+  Copy,
+  FlaskConical,
+  Loader2,
+  Play,
+  Plus,
+  Trash2,
+  Workflow,
+} from "lucide-react";
+import { Button } from "@/components/button";
+import { Badge } from "@/components/badge";
+import {
+  createAutomation,
+  deleteAutomation,
+  listAutomationRunSteps,
+  listAutomationRuns,
+  listAutomations,
+  runAutomation,
+  updateAutomation,
+  type AutomationRow,
+  type AutomationRunRow,
+  type AutomationRunStepRow,
+} from "./automations-api";
+import {
+  deleteNotificationChannel,
+  getNotificationChannels,
+  testNotificationChannel,
+  type NotificationChannel,
+} from "@/api/notification-channels-api";
+import { NotificationChannelDialog } from "@/sidebar/NotificationChannelDialog";
+import { getSnippets } from "@/api/snippets-api";
+import { getSSHHosts } from "@/api/ssh-host-management-api";
+import { listFleets } from "@/api/fleets-api";
+import {
+  AutomationEditor,
+  emptyDraft,
+  type AutomationDraft,
+} from "./automations/AutomationEditor";
+import {
+  EMPTY_EDITOR_OPTIONS,
+  type AutomationEditorOptions,
+} from "./automations/editor-types";
+
+type PanelTab = "automations" | "runs" | "channels";
+
+const STATUS_CLASS: Record<string, string> = {
+  success: "text-green-500",
+  failed: "text-destructive",
+  timeout: "text-destructive",
+  running: "text-foreground",
+  skipped: "text-muted-foreground",
+  cancelled: "text-muted-foreground",
+};
+
+function timeAgo(iso: string | null): string {
+  if (!iso) return "";
+  const ms = Date.now() - new Date(iso).getTime();
+  if (!Number.isFinite(ms)) return "";
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  return `${Math.floor(hr / 24)}d ago`;
+}
+
+export function AutomationsPanel({
+  active = true,
+  onEditingChange,
+}: {
+  active?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+}) {
+  const { t } = useTranslation();
+  const base = "newUi.sidebar.automations";
+
+  const [tab, setTab] = useState<PanelTab>("automations");
+  const [automations, setAutomations] = useState<AutomationRow[]>([]);
+  const [runs, setRuns] = useState<AutomationRunRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [options, setOptions] =
+    useState<AutomationEditorOptions>(EMPTY_EDITOR_OPTIONS);
+
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [draft, setDraft] = useState<AutomationDraft>(emptyDraft());
+  const [saving, setSaving] = useState(false);
+  const [webhookToken, setWebhookToken] = useState<string | null>(null);
+
+  const [expandedRun, setExpandedRun] = useState<number | null>(null);
+  const [runSteps, setRunSteps] = useState<AutomationRunStepRow[]>([]);
+
+  const [channels, setChannels] = useState<NotificationChannel[]>([]);
+  const [channelDialogOpen, setChannelDialogOpen] = useState(false);
+  const [editingChannel, setEditingChannel] =
+    useState<NotificationChannel | null>(null);
+
+  const loadAutomations = useCallback(async () => {
+    setLoading(true);
+    try {
+      setAutomations(await listAutomations());
+    } catch {
+      // A failed load leaves the previous list on screen.
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadRuns = useCallback(async () => {
+    try {
+      setRuns(await listAutomationRuns({ limit: 100 }));
+    } catch {
+      // Non-fatal.
+    }
+  }, []);
+
+  const loadOptions = useCallback(async () => {
+    const [hosts, snippets, channelsResult, fleets] = await Promise.allSettled([
+      getSSHHosts({ includeStatus: false }),
+      getSnippets(),
+      getNotificationChannels(),
+      listFleets(),
+    ]);
+
+    if (channelsResult.status === "fulfilled") {
+      setChannels(channelsResult.value);
+    }
+
+    setOptions({
+      hosts:
+        hosts.status === "fulfilled"
+          ? hosts.value.map((host) => ({
+              id: host.id,
+              name: host.name || host.ip,
+            }))
+          : [],
+      snippets:
+        snippets.status === "fulfilled"
+          ? snippets.value.map((s) => ({
+              id: s.id,
+              // SnippetRow only types its id; the rest is narrowed by callers.
+              name: typeof s.name === "string" ? s.name : `#${s.id}`,
+            }))
+          : [],
+      channels:
+        channelsResult.status === "fulfilled"
+          ? channelsResult.value.map((c) => ({ id: c.id, name: c.name }))
+          : [],
+      fleets:
+        fleets.status === "fulfilled"
+          ? fleets.value.map((f) => ({ id: f.id, name: f.name }))
+          : [],
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!active) return;
+    void loadAutomations();
+    void loadOptions();
+  }, [active, loadAutomations, loadOptions]);
+
+  useEffect(() => {
+    if (active && tab === "runs") void loadRuns();
+  }, [active, tab, loadRuns]);
+
+  // Widens the sidebar while the editor is open, and releases it again on the
+  // way out or when the user switches to another rail destination.
+  useEffect(() => {
+    if (active) onEditingChange?.(editorOpen);
+  }, [active, editorOpen, onEditingChange]);
+
+  useEffect(() => {
+    return () => onEditingChange?.(false);
+  }, [onEditingChange]);
+
+  function closeEditor() {
+    setWebhookToken(null);
+    setEditorOpen(false);
+  }
+
+  function openCreate() {
+    setEditingId(null);
+    setDraft(emptyDraft());
+    setWebhookToken(null);
+    setEditorOpen(true);
+  }
+
+  function openEdit(row: AutomationRow) {
+    setEditingId(row.id);
+    setDraft({
+      name: row.name,
+      description: row.description ?? "",
+      enabled: !!row.enabled,
+      concurrencyPolicy: row.concurrency_policy ?? "skip",
+      definition: row.definition ?? emptyDraft().definition,
+    });
+    setWebhookToken(null);
+    setEditorOpen(true);
+  }
+
+  async function save() {
+    if (!draft.name.trim()) {
+      toast.error(t(`${base}.nameRequired`));
+      return;
+    }
+
+    setSaving(true);
+    try {
+      if (editingId === null) {
+        const created = await createAutomation({
+          name: draft.name.trim(),
+          description: draft.description || null,
+          enabled: draft.enabled,
+          concurrencyPolicy: draft.concurrencyPolicy,
+          definition: draft.definition,
+        });
+        toast.success(t(`${base}.created`));
+        if (created.webhookToken) {
+          setWebhookToken(created.webhookToken);
+        } else {
+          setEditorOpen(false);
+        }
+      } else {
+        await updateAutomation(editingId, {
+          name: draft.name.trim(),
+          description: draft.description || null,
+          enabled: draft.enabled,
+          concurrencyPolicy: draft.concurrencyPolicy,
+          definition: draft.definition,
+        });
+        toast.success(t(`${base}.updated`));
+        setEditorOpen(false);
+      }
+      await loadAutomations();
+    } catch (error) {
+      toast.error(getErrorMessage(error, String(error)));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function remove(row: AutomationRow) {
+    if (!confirm(t(`${base}.deleteConfirm`))) return;
+    try {
+      await deleteAutomation(row.id);
+      toast.success(t(`${base}.deleted`));
+      await loadAutomations();
+    } catch (error) {
+      toast.error(getErrorMessage(error, String(error)));
+    }
+  }
+
+  async function run(row: AutomationRow, dryRun: boolean) {
+    try {
+      const outcome = await runAutomation(row.id, { dryRun });
+      toast.success(t(`${base}.runFinished`, { status: outcome.status }));
+      await loadAutomations();
+      if (tab === "runs") await loadRuns();
+    } catch (error) {
+      toast.error(getErrorMessage(error, String(error)));
+    }
+  }
+
+  async function testChannel(channel: NotificationChannel) {
+    try {
+      // Throws with the reason when delivery fails.
+      await testNotificationChannel(channel.id);
+      toast.success(t(`${base}.channelTestSent`));
+    } catch (error) {
+      toast.error(getErrorMessage(error, String(error)));
+    }
+  }
+
+  async function removeChannel(channel: NotificationChannel) {
+    if (!confirm(t(`${base}.deleteChannelConfirm`))) return;
+    try {
+      await deleteNotificationChannel(channel.id);
+      toast.success(t(`${base}.channelDeleted`));
+      await loadOptions();
+    } catch (error) {
+      toast.error(getErrorMessage(error, String(error)));
+    }
+  }
+
+  async function toggleRun(runId: number) {
+    if (expandedRun === runId) {
+      setExpandedRun(null);
+      return;
+    }
+    setExpandedRun(runId);
+    try {
+      setRunSteps(await listAutomationRunSteps(runId));
+    } catch {
+      setRunSteps([]);
+    }
+  }
+
+  // Editing takes over the whole panel and widens the sidebar, the same way the
+  // host manager does, rather than opening a dialog over the app.
+  if (editorOpen) {
+    const webhookUrl = webhookToken
+      ? `${window.location.origin}/automations/webhook/${webhookToken}`
+      : "";
+
+    return (
+      <div className="flex flex-col h-full min-h-0">
+        <button
+          onClick={closeEditor}
+          className="flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors border-b border-border/50 shrink-0"
+        >
+          <ArrowLeft className="size-3.5 shrink-0" />
+          <span>{t(`${base}.backToAutomations`)}</span>
+          {editingId !== null && (
+            <span
+              className="ml-auto font-semibold text-foreground truncate max-w-[200px]"
+              title={draft.name}
+            >
+              {draft.name}
+            </span>
+          )}
+        </button>
+
+        <div className="flex-1 min-h-0 overflow-y-auto p-3">
+          {webhookToken ? (
+            <div className="space-y-2">
+              <p className="text-sm">{t(`${base}.webhookTokenTitle`)}</p>
+              <p className="text-xs text-muted-foreground">
+                {t(`${base}.webhookTokenDescription`)}
+              </p>
+              <div className="flex gap-2">
+                <code className="flex-1 p-2 bg-muted text-xs break-all">
+                  {webhookUrl}
+                </code>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="rounded-none border-border shrink-0"
+                  onClick={() => {
+                    navigator.clipboard?.writeText(webhookUrl);
+                    toast.success(t(`${base}.copied`));
+                  }}
+                >
+                  <Copy size={14} />
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <AutomationEditor
+              draft={draft}
+              options={options}
+              onChange={setDraft}
+            />
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 p-3 border-t border-border shrink-0">
+          {webhookToken ? (
+            <Button
+              variant="outline"
+              className="rounded-none ml-auto h-9 px-6 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+              onClick={closeEditor}
+            >
+              {t("common.close")}
+            </Button>
+          ) : (
+            <>
+              <Button
+                variant="outline"
+                className="rounded-none border-border h-9 px-5"
+                onClick={closeEditor}
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                variant="outline"
+                className="rounded-none ml-auto h-9 px-6 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+                disabled={saving}
+                onClick={save}
+              >
+                {saving && (
+                  <Loader2 size={14} className="mr-1.5 animate-spin" />
+                )}
+                {t(`${base}.save`)}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-1 p-2 border-b border-border">
+        {(["automations", "runs", "channels"] as PanelTab[]).map((key) => (
+          <Button
+            key={key}
+            variant={tab === key ? "outline" : "ghost"}
+            size="sm"
+            className={`min-w-0 flex-shrink rounded-none h-7 px-2 text-xs ${
+              tab === key
+                ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand hover:bg-accent-brand/20 hover:text-accent-brand"
+                : ""
+            }`}
+            onClick={() => setTab(key)}
+          >
+            <span className="truncate">
+              {t(
+                `${base}.${key === "automations" ? "tabAutomations" : key === "runs" ? "tabRuns" : "tabChannels"}`,
+              )}
+            </span>
+          </Button>
+        ))}
+        <a
+          href="https://docs.termix.site/features/automations/overview"
+          target="_blank"
+          rel="noreferrer"
+          className="ml-auto shrink-0 text-[10px] text-accent-brand hover:underline"
+        >
+          {t("hosts.docsLink")}
+        </a>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2">
+        {tab === "automations" && (
+          <>
+            <Button
+              size="sm"
+              variant="outline"
+              className="rounded-none w-full mb-2 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+              onClick={openCreate}
+            >
+              <Plus size={14} className="mr-1" />
+              {t(`${base}.createAutomation`)}
+            </Button>
+
+            {loading && automations.length === 0 && (
+              <div className="flex justify-center p-4">
+                <Loader2 size={16} className="animate-spin" />
+              </div>
+            )}
+
+            {!loading && automations.length === 0 && (
+              <p className="text-xs text-muted-foreground p-2">
+                {t(`${base}.empty`)}
+              </p>
+            )}
+
+            <div className="space-y-1">
+              {automations.map((row) => (
+                <div
+                  key={row.id}
+                  className="border border-border p-2.5 hover:bg-muted/40"
+                >
+                  <div className="flex items-center gap-2">
+                    <Workflow size={14} className="shrink-0" />
+                    <button
+                      className="flex-1 text-left text-sm truncate"
+                      onClick={() => openEdit(row)}
+                    >
+                      {row.name}
+                    </button>
+                    {!row.enabled && (
+                      <Badge variant="outline" className="text-[10px]">
+                        off
+                      </Badge>
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-1 mt-1">
+                    <span className="text-[11px] text-muted-foreground flex-1 truncate">
+                      {row.definition
+                        ? t(
+                            `${base}.triggerKinds.${row.definition.trigger.kind}`,
+                          )
+                        : ""}
+                      {row.last_run_status
+                        ? ` · ${timeAgo(row.last_run_at)}`
+                        : ""}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 rounded-none"
+                      title={t(`${base}.testRun`)}
+                      onClick={() => run(row, true)}
+                    >
+                      <FlaskConical size={12} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 rounded-none"
+                      title={t(`${base}.runNow`)}
+                      onClick={() => run(row, false)}
+                    >
+                      <Play size={12} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 rounded-none"
+                      onClick={() => remove(row)}
+                    >
+                      <Trash2 size={12} />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        {tab === "runs" && (
+          <div className="space-y-1">
+            {runs.length === 0 && (
+              <p className="text-xs text-muted-foreground p-2">
+                {t(`${base}.emptyRuns`)}
+              </p>
+            )}
+            {runs.map((entry) => (
+              <div key={entry.id} className="border border-border">
+                <button
+                  className="w-full text-left p-2.5 hover:bg-muted/40"
+                  onClick={() => toggleRun(entry.id)}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm flex-1 truncate">
+                      {entry.automation_name ?? `#${entry.automation_id}`}
+                    </span>
+                    {entry.dry_run ? (
+                      <Badge variant="outline" className="text-[10px]">
+                        {t(`${base}.dryRunBadge`)}
+                      </Badge>
+                    ) : null}
+                    <span
+                      className={`text-[11px] ${STATUS_CLASS[entry.status] ?? ""}`}
+                    >
+                      {t(`${base}.statuses.${entry.status}`)}
+                    </span>
+                  </div>
+                  <div className="text-[11px] text-muted-foreground">
+                    {timeAgo(entry.started_at)}
+                    {entry.duration_ms !== null
+                      ? ` · ${Math.round(entry.duration_ms / 100) / 10}s`
+                      : ""}
+                  </div>
+                  {entry.error && (
+                    <div className="text-[11px] text-destructive truncate">
+                      {entry.error}
+                    </div>
+                  )}
+                </button>
+
+                {expandedRun === entry.id && (
+                  <div className="border-t border-border p-2 space-y-1">
+                    {runSteps.map((step) => (
+                      <div key={step.id} className="text-[11px]">
+                        <div className="flex gap-2">
+                          <span className="text-muted-foreground">
+                            {step.step_index + 1}.
+                          </span>
+                          <span className="flex-1">
+                            {t(`${base}.stepTypes.${step.step_type}`, {
+                              defaultValue: step.step_type,
+                            })}
+                          </span>
+                          <span className={STATUS_CLASS[step.status] ?? ""}>
+                            {step.status}
+                          </span>
+                        </div>
+                        {step.output && (
+                          <pre className="mt-1 p-1 bg-muted overflow-x-auto whitespace-pre-wrap break-all text-[10px]">
+                            {step.output}
+                          </pre>
+                        )}
+                        {step.error && (
+                          <div className="text-destructive">{step.error}</div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {tab === "channels" && (
+          <>
+            <Button
+              size="sm"
+              variant="outline"
+              className="rounded-none w-full mb-2 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+              onClick={() => {
+                setEditingChannel(null);
+                setChannelDialogOpen(true);
+              }}
+            >
+              <Plus size={14} className="mr-1" />
+              {t(`${base}.addChannel`)}
+            </Button>
+
+            {channels.length === 0 && (
+              <p className="text-xs text-muted-foreground p-2">
+                {t(`${base}.emptyChannels`)}
+              </p>
+            )}
+
+            <div className="space-y-1">
+              {channels.map((channel) => (
+                <div
+                  key={channel.id}
+                  className="border border-border p-2.5 hover:bg-muted/40"
+                >
+                  <div className="flex items-center gap-2">
+                    <button
+                      className="flex-1 text-left text-sm truncate"
+                      onClick={() => {
+                        setEditingChannel(channel);
+                        setChannelDialogOpen(true);
+                      }}
+                    >
+                      {channel.name}
+                    </button>
+                    <Badge variant="outline" className="text-[10px] uppercase">
+                      {channel.type}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-1 mt-1">
+                    <span className="flex-1" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 rounded-none text-[11px]"
+                      onClick={() => testChannel(channel)}
+                    >
+                      {t(`${base}.testChannel`)}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 rounded-none"
+                      onClick={() => removeChannel(channel)}
+                    >
+                      <Trash2 size={12} />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      <NotificationChannelDialog
+        open={channelDialogOpen}
+        onOpenChange={setChannelDialogOpen}
+        channel={editingChannel}
+        onSaved={() => {
+          setChannelDialogOpen(false);
+          void loadOptions();
+        }}
+      />
+    </div>
+  );
+}
+
+export default AutomationsPanel;