@agent-native/dispatch 0.30.5 → 0.31.1

package/src/routes/pages/automations.tsx

@@ -5,17 +5,19 @@ import {
   IconFileSearch,
   IconListDetails,
   IconPlus,
+  IconSearch,
   IconSettingsAutomation,
 } from "@tabler/icons-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router";
 import { toast } from "sonner";
 
-import { AutomationRunHistoryDialog } from "../../components/automation-run-history-dialog";
+import { AutomationDetailsPanel } from "../../components/automation-details-panel";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
 import {
   Popover,
   PopoverContent,
@@ -188,6 +190,7 @@ function CreateAutomationButton() {
 
 export default function AutomationsRoute() {
   const [view, setView] = useState<"dispatch" | "all">("dispatch");
+  const [query, setQuery] = useState("");
   const [detailsTarget, setDetailsTarget] =
     useState<DispatchAutomationItem | null>(null);
   const automationsQuery = useAutomations();
@@ -204,6 +207,25 @@ export default function AutomationsRoute() {
     () => sortAutomations(visibleAutomations),
     [visibleAutomations],
   );
+  const filtered = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return ordered;
+    return ordered.filter((item) =>
+      [
+        item.name,
+        item.event,
+        item.schedule,
+        item.scheduleDescription,
+        item.body,
+        item.model,
+        item.domain,
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase()
+        .includes(normalized),
+    );
+  }, [ordered, query]);
   const enabledCount = visibleAutomations.filter((item) => item.enabled).length;
   const errorCount = visibleAutomations.filter(
     (item) =>
@@ -216,6 +238,18 @@ export default function AutomationsRoute() {
       : null
     : null;
 
+  useEffect(() => {
+    if (!detailsTarget) return;
+    const current = filtered.find(
+      (item) => automationIdentity(item) === automationIdentity(detailsTarget),
+    );
+    if (current) {
+      if (current !== detailsTarget) setDetailsTarget(current);
+    } else {
+      setDetailsTarget(null);
+    }
+  }, [detailsTarget, filtered]);
+
   return (
     <DispatchShell
       title="Automations"
@@ -223,12 +257,28 @@ export default function AutomationsRoute() {
     >
       <section className="flex flex-col gap-4">
         <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground">
-            <IconSettingsAutomation size={16} className="shrink-0" />
-            <span>
-              {enabledCount} enabled
-              {errorCount > 0 ? ` · ${errorCount} errors` : ""}
-            </span>
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-3">
+            <div className="relative w-full max-w-sm">
+              <IconSearch
+                size={15}
+                aria-hidden="true"
+                className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+              />
+              <Input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search automations"
+                aria-label="Search automations"
+                className="h-8 pl-8 text-xs"
+              />
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <IconSettingsAutomation size={16} className="shrink-0" />
+              <span>
+                {enabledCount} enabled
+                {errorCount > 0 ? ` · ${errorCount} errors` : ""}
+              </span>
+            </div>
           </div>
           <div className="flex flex-wrap items-center justify-end gap-2">
             <Select
@@ -252,61 +302,75 @@ export default function AutomationsRoute() {
           </div>
         </div>
 
-        <div className="divide-y rounded-lg bg-card">
-          {automationsQuery.isLoading && ordered.length === 0 ? (
-            Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="px-4 py-3">
-                <Skeleton className="h-4 w-40" />
-                <Skeleton className="mt-2 h-3 w-28" />
-              </div>
-            ))
-          ) : ordered.length > 0 ? (
-            ordered.map((item) => {
-              const status = automationStatus(item);
-              const canUpdate = item.canUpdate !== false;
-              const isToggling =
-                pendingToggleIdentity === automationIdentity(item);
-              return (
-                <div
-                  key={item.id}
-                  className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-4 py-3"
-                >
-                  <div className="min-w-0">
-                    <div className="flex min-w-0 items-center gap-2">
-                      <StatusDot tone={status.tone} />
-                      <span className="truncate text-sm font-medium text-foreground">
-                        {item.name}
-                      </span>
-                    </div>
-                    <div className="mt-1 truncate text-xs text-muted-foreground">
-                      {automationTarget(item)}
-                    </div>
-                    <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
-                      <span>Last {automationLastRun(item)}</span>
-                      <span>Next {automationNextRun(item)}</span>
-                      <span>{automationScopeLabel(item)}</span>
-                      {item.lastCheck ? (
-                        <span>Checked {automationLastCheck(item)}</span>
+        <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(24rem,32rem)]">
+          <div className="min-w-0 divide-y rounded-lg bg-card">
+            {automationsQuery.isLoading && ordered.length === 0 ? (
+              Array.from({ length: 4 }).map((_, index) => (
+                <div key={index} className="px-4 py-3">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="mt-2 h-3 w-28" />
+                </div>
+              ))
+            ) : filtered.length > 0 ? (
+              filtered.map((item) => {
+                const status = automationStatus(item);
+                const canUpdate = item.canUpdate !== false;
+                const isToggling =
+                  pendingToggleIdentity === automationIdentity(item);
+                const isSelected =
+                  detailsTarget !== null &&
+                  automationIdentity(detailsTarget) ===
+                    automationIdentity(item);
+                return (
+                  <div
+                    key={item.id}
+                    className={cn(
+                      "grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-4 py-3 transition-colors",
+                      isSelected && "bg-accent/40",
+                    )}
+                  >
+                    <div className="min-w-0">
+                      <button
+                        type="button"
+                        className="w-full min-w-0 cursor-pointer text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+                        aria-pressed={isSelected}
+                        onClick={() => setDetailsTarget(item)}
+                      >
+                        <div className="flex min-w-0 items-center gap-2">
+                          <StatusDot tone={status.tone} />
+                          <span className="truncate text-sm font-medium text-foreground">
+                            {item.name}
+                          </span>
+                        </div>
+                        <div className="mt-1 truncate text-xs text-muted-foreground">
+                          {automationTarget(item)}
+                        </div>
+                        <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
+                          <span>Last {automationLastRun(item)}</span>
+                          <span>Next {automationNextRun(item)}</span>
+                          <span>{automationScopeLabel(item)}</span>
+                          {item.lastCheck ? (
+                            <span>Checked {automationLastCheck(item)}</span>
+                          ) : null}
+                        </div>
+                      </button>
+                      {item.lastError ? (
+                        <div className="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-xs text-destructive">
+                          <span className="min-w-0 break-words">
+                            {item.lastError}
+                          </span>
+                          <Link
+                            to={automationTroubleshootPath(item)}
+                            className="inline-flex shrink-0 items-center gap-1 font-medium text-foreground underline-offset-4 hover:underline"
+                            aria-label={`Troubleshoot ${item.name} in Thread Debug`}
+                          >
+                            <IconFileSearch size={13} aria-hidden="true" />
+                            Troubleshoot in Thread Debug
+                          </Link>
+                        </div>
                       ) : null}
                     </div>
-                    {item.lastError ? (
-                      <div className="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-xs text-destructive">
-                        <span className="min-w-0 break-words">
-                          {item.lastError}
-                        </span>
-                        <Link
-                          to={automationTroubleshootPath(item)}
-                          className="inline-flex shrink-0 items-center gap-1 font-medium text-foreground underline-offset-4 hover:underline"
-                          aria-label={`Troubleshoot ${item.name} in Thread Debug`}
-                        >
-                          <IconFileSearch size={13} aria-hidden="true" />
-                          Troubleshoot in Thread Debug
-                        </Link>
-                      </div>
-                    ) : null}
-                  </div>
-                  <div className="flex flex-col items-end gap-2">
-                    <div className="flex items-center gap-2">
+                    <div className="flex flex-col items-end gap-2">
                       <Badge
                         variant={
                           status.tone === "danger" ? "destructive" : "outline"
@@ -315,49 +379,65 @@ export default function AutomationsRoute() {
                       >
                         {status.label}
                       </Badge>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 px-2 text-xs"
-                        onClick={() => setDetailsTarget(item)}
-                      >
-                        <IconListDetails size={14} />
-                        Details
-                      </Button>
+                      <Switch
+                        checked={!!item.enabled}
+                        disabled={!canUpdate || isToggling}
+                        aria-label={`${item.enabled ? "Disable" : "Enable"} automation ${item.name}`}
+                        onCheckedChange={(checked) =>
+                          toggleAutomation.mutate({
+                            owner: item.owner,
+                            path: item.path,
+                            enabled: checked,
+                          })
+                        }
+                      />
                     </div>
-                    <Switch
-                      checked={!!item.enabled}
-                      disabled={!canUpdate || isToggling}
-                      aria-label={`${item.enabled ? "Disable" : "Enable"} automation ${item.name}`}
-                      onCheckedChange={(checked) =>
-                        toggleAutomation.mutate({
-                          owner: item.owner,
-                          path: item.path,
-                          enabled: checked,
-                        })
-                      }
-                    />
                   </div>
-                </div>
-              );
-            })
+                );
+              })
+            ) : (
+              <div className="px-4 py-10 text-center text-sm text-muted-foreground">
+                {query
+                  ? "No matching automations."
+                  : view === "all"
+                    ? "No automations yet. Create one here, or ask Dispatch to set up a scheduled or event-triggered job."
+                    : "No Dispatch automations yet. Switch to All apps to inspect workspace automations."}
+              </div>
+            )}
+          </div>
+
+          {detailsTarget ? (
+            <AutomationDetailsPanel
+              automation={detailsTarget}
+              isToggling={
+                pendingToggleIdentity === automationIdentity(detailsTarget)
+              }
+              onToggle={() =>
+                toggleAutomation.mutate({
+                  owner: detailsTarget.owner,
+                  path: detailsTarget.path,
+                  enabled: !detailsTarget.enabled,
+                })
+              }
+            />
           ) : (
-            <div className="px-4 py-10 text-center text-sm text-muted-foreground">
-              {view === "all"
-                ? "No automations yet. Create one here, or ask Dispatch to set up a scheduled or event-triggered job."
-                : "No Dispatch automations yet. Switch to All apps to inspect workspace automations."}
+            <div className="flex min-h-[34rem] flex-col items-center justify-center rounded-lg border border-dashed bg-card p-6 text-center">
+              <IconListDetails
+                size={24}
+                strokeWidth={1.6}
+                className="text-muted-foreground"
+              />
+              <p className="mt-3 text-sm font-medium text-foreground">
+                Select an automation
+              </p>
+              <p className="mt-1 max-w-xs text-sm text-muted-foreground">
+                Inspect its prompt, configuration, capabilities, and run
+                history.
+              </p>
             </div>
           )}
         </div>
       </section>
-      <AutomationRunHistoryDialog
-        automation={detailsTarget}
-        open={detailsTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setDetailsTarget(null);
-        }}
-      />
     </DispatchShell>
   );
 }