@agent-native/dispatch 0.24.0 → 0.24.2

package/src/routes/pages/audit.tsx

@@ -2,6 +2,7 @@ import { useActionQuery } from "@agent-native/core/client/hooks";
 
 import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
+import { Skeleton } from "../../components/ui/skeleton";
 
 export function meta() {
   return [{ title: "Audit — Dispatch" }];
@@ -16,30 +17,49 @@ export default function AuditRoute() {
       title="Audit"
       description="Change history for routes, settings, and approvals."
     >
-      <section className="rounded-2xl bg-card p-5">
+      <section className="overflow-hidden rounded-lg bg-card">
         {query.isError ? (
           <ActionQueryError
             error={query.error}
             onRetry={() => void query.refetch()}
           />
+        ) : query.isLoading ? (
+          <div>
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div
+                key={index}
+                className="grid gap-2 border-b px-4 py-3 last:border-b-0 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
+              >
+                <div>
+                  <Skeleton className="h-4 w-2/3 max-w-sm" />
+                  <Skeleton className="mt-2 h-3 w-1/2 max-w-xs" />
+                </div>
+                <Skeleton className="h-3 w-28" />
+              </div>
+            ))}
+          </div>
         ) : (
-          <div className="space-y-3">
+          <div>
             {(data || []).map((event: any) => (
               <div
                 key={event.id}
-                className="rounded-xl border bg-muted/30 px-4 py-3"
+                className="grid gap-1 border-b px-4 py-3 last:border-b-0 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
               >
-                <div className="text-sm font-medium text-foreground">
-                  {event.summary}
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-medium text-foreground">
+                    {event.summary}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {event.actor} · {event.action}
+                  </div>
                 </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  {event.actor} · {event.action} ·{" "}
+                <div className="text-xs text-muted-foreground sm:text-right">
                   {new Date(event.createdAt).toLocaleString()}
                 </div>
               </div>
             ))}
             {(data?.length || 0) === 0 && (
-              <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+              <div className="px-4 py-10 text-center text-sm text-muted-foreground">
                 No audit entries yet.
               </div>
             )}

package/src/routes/pages/dreams.tsx

@@ -4,11 +4,8 @@ import {
 } from "@agent-native/core/client/hooks";
 import {
   IconAlertTriangle,
-  IconBrain,
   IconCalendarTime,
   IconCheck,
-  IconCircleDashed,
-  IconClock,
   IconDatabase,
   IconFileDiff,
   IconPlayerPlay,
@@ -548,32 +545,6 @@ function ProposalSkeleton() {
   );
 }
 
-function StatTile({
-  label,
-  value,
-  icon: Icon,
-}: {
-  label: string;
-  value: string | number;
-  icon: typeof IconBrain;
-}) {
-  return (
-    <div className="rounded-lg bg-card px-3 py-2.5">
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0 flex-1">
-          <div className="truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-            {label}
-          </div>
-          <div className="mt-1 text-xl font-semibold tabular-nums text-foreground">
-            {value}
-          </div>
-        </div>
-        <Icon size={18} className="shrink-0 text-muted-foreground" />
-      </div>
-    </div>
-  );
-}
-
 function DreamSettingsSheet({
   open,
   onOpenChange,
@@ -1358,10 +1329,6 @@ export default function DreamsRoute() {
   const evidenceItems: DreamEvidence[] = detail?.evidence ?? [];
   const selectedSourceHealth: DreamSourceHealth[] =
     selectedDream?.sourceHealth ?? [];
-  const pendingProposalCount = proposals.filter(
-    (proposal) =>
-      String(proposal.status || "pending").toLowerCase() === "pending",
-  ).length;
   const appliedProposalCount = proposals.filter(
     (proposal) => String(proposal.status || "").toLowerCase() === "applied",
   ).length;
@@ -1428,32 +1395,10 @@ export default function DreamsRoute() {
       description="Review agent runs, propose memory improvements, and apply evidence-backed learning changes."
     >
       <div className="space-y-4">
-        <div className="flex flex-col gap-3">
-          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
-            <StatTile
-              label="Dream passes"
-              value={dreams.length}
-              icon={IconBrain}
-            />
-            <StatTile
-              label="Pending proposals"
-              value={pendingProposalCount}
-              icon={IconCircleDashed}
-            />
-            <StatTile
-              label="Candidate runs"
-              value={candidates.length}
-              icon={IconClock}
-            />
-            <StatTile
-              label="Inspected threads"
-              value={selectedDream ? dreamInspectedCount(selectedDream) : 0}
-              icon={IconCheck}
-            />
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b pb-3">
+          <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
             {dreamSettings ? (
-              <Badge variant="outline" className="h-9 max-w-full truncate px-3">
+              <Badge variant="outline" className="max-w-full truncate">
                 {dreamSettings.enabled ? "Enabled" : "Paused"} ·{" "}
                 {dreamSettings.allSources
                   ? "All sources"
@@ -1461,6 +1406,11 @@ export default function DreamsRoute() {
                 · {dreamSettings.schedule}
               </Badge>
             ) : null}
+            <span className="text-xs text-muted-foreground">
+              {dreams.length} passes · {candidates.length} candidate runs
+            </span>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
             <DreamSettingsSheet
               open={settingsOpen}
               onOpenChange={handleSettingsOpenChange}
@@ -1519,8 +1469,8 @@ export default function DreamsRoute() {
           </div>
         </div>
 
-        <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-[280px_minmax(0,1fr)_380px]">
-          <section className="rounded-lg bg-card">
+        <div className="grid gap-4 lg:grid-cols-[280px_minmax(0,1fr)]">
+          <section className="min-w-0 rounded-lg bg-card">
             <div className="border-b px-4 py-3">
               <div className="text-sm font-semibold text-foreground">
                 Recent passes
@@ -1770,92 +1720,92 @@ export default function DreamsRoute() {
               ) : null}
             </div>
           </section>
+        </div>
 
-          <section className="rounded-lg bg-card">
-            <div className="border-b px-4 py-3">
-              <div>
-                <div className="text-sm font-semibold text-foreground">
-                  Candidate runs
-                </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  Grounded signals ready for review.
-                </div>
+        <section className="min-w-0 rounded-lg bg-card">
+          <div className="border-b px-4 py-3">
+            <div>
+              <div className="text-sm font-semibold text-foreground">
+                Candidate runs
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                Grounded signals ready for review.
               </div>
             </div>
-            <div className="max-h-[720px] overflow-auto p-3">
-              <QueryState
-                error={candidatesQuery.error}
-                label="Could not load candidates"
-              />
-              {candidatesQuery.isLoading ? <DreamListSkeleton /> : null}
-              {!candidatesQuery.isLoading &&
-              !candidatesQuery.error &&
-              candidateSourceHealth.length > 0 ? (
-                <div className="mb-3">
-                  <SourceHealthPanel sources={candidateSourceHealth} />
-                </div>
-              ) : null}
-              {!candidatesQuery.isLoading && !candidatesQuery.error ? (
-                candidates.length > 0 ? (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>Run</TableHead>
-                        <TableHead>Signals</TableHead>
-                        <TableHead className="w-20 text-right">Score</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {candidates.map((candidate) => {
-                        const id = candidateId(candidate);
-                        const signals = candidateSignals(candidate);
-                        return (
-                          <TableRow key={id}>
-                            <TableCell className="min-w-0 py-3">
-                              <div className="max-w-[230px] truncate text-sm font-medium text-foreground">
-                                {candidateLabel(candidate)}
-                              </div>
-                              <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-                                {candidate.thread?.id ??
-                                  candidate.threadId ??
-                                  candidate.runId ??
-                                  id}
-                              </div>
-                              <div className="mt-1 text-[11px] text-muted-foreground">
-                                {candidateOwner(candidate)} ·{" "}
-                                {compactDate(candidateUpdatedAt(candidate))}
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3">
-                              <div className="mt-1 flex flex-wrap gap-1">
-                                <Badge variant="outline">
-                                  {candidateStatus(candidate)}
+          </div>
+          <div className="max-h-[720px] overflow-auto p-3">
+            <QueryState
+              error={candidatesQuery.error}
+              label="Could not load candidates"
+            />
+            {candidatesQuery.isLoading ? <DreamListSkeleton /> : null}
+            {!candidatesQuery.isLoading &&
+            !candidatesQuery.error &&
+            candidateSourceHealth.length > 0 ? (
+              <div className="mb-3">
+                <SourceHealthPanel sources={candidateSourceHealth} />
+              </div>
+            ) : null}
+            {!candidatesQuery.isLoading && !candidatesQuery.error ? (
+              candidates.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Run</TableHead>
+                      <TableHead>Signals</TableHead>
+                      <TableHead className="w-20 text-right">Score</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {candidates.map((candidate) => {
+                      const id = candidateId(candidate);
+                      const signals = candidateSignals(candidate);
+                      return (
+                        <TableRow key={id}>
+                          <TableCell className="min-w-0 py-3">
+                            <div className="max-w-[230px] truncate text-sm font-medium text-foreground">
+                              {candidateLabel(candidate)}
+                            </div>
+                            <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
+                              {candidate.thread?.id ??
+                                candidate.threadId ??
+                                candidate.runId ??
+                                id}
+                            </div>
+                            <div className="mt-1 text-[11px] text-muted-foreground">
+                              {candidateOwner(candidate)} ·{" "}
+                              {compactDate(candidateUpdatedAt(candidate))}
+                            </div>
+                          </TableCell>
+                          <TableCell className="py-3">
+                            <div className="mt-1 flex flex-wrap gap-1">
+                              <Badge variant="outline">
+                                {candidateStatus(candidate)}
+                              </Badge>
+                              {signals.slice(0, 2).map((signal) => (
+                                <Badge key={signal} variant="secondary">
+                                  {signal}
                                 </Badge>
-                                {signals.slice(0, 2).map((signal) => (
-                                  <Badge key={signal} variant="secondary">
-                                    {signal}
-                                  </Badge>
-                                ))}
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3 text-right text-sm tabular-nums text-muted-foreground">
-                              {candidate.score ?? "n/a"}
-                            </TableCell>
-                          </TableRow>
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                ) : (
-                  <EmptyPanel
-                    title="No candidates"
-                    description="No recent runs matched the dream candidate heuristics."
-                  />
-                )
-              ) : null}
-            </div>
-          </section>
-        </div>
+                              ))}
+                            </div>
+                          </TableCell>
+                          <TableCell className="py-3 text-right text-sm tabular-nums text-muted-foreground">
+                            {candidate.score ?? "n/a"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              ) : (
+                <EmptyPanel
+                  title="No candidates"
+                  description="No recent runs matched the dream candidate heuristics."
+                />
+              )
+            ) : null}
+          </div>
+        </section>
       </div>
     </DispatchShell>
   );