@chrysb/alphaclaw 0.7.2-beta.1 → 0.7.2-beta.3

package/lib/public/js/components/cron-tab/cron-run-history-panel.js

@@ -60,7 +60,9 @@ const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
           : hasRunTitle
             ? html`
                 <span class="inline-flex items-center gap-2 min-w-0">
-                  <span class="truncate text-xs text-gray-300">${runTitle}</span>
+                  <span class="truncate text-xs text-gray-300"
+                    >${runTitle}</span
+                  >
                   <span class="text-xs text-gray-500 shrink-0">
                     ${formatRowTimestamp(runEntry.ts, variant)}
                   </span>
@@ -68,19 +70,26 @@ const renderEntrySummaryRow = ({ runEntry = {}, variant = "overview" }) => {
               `
             : html`
                 <span class="truncate text-xs text-gray-300">
-                  ${runEntry.jobId} - ${formatRowTimestamp(runEntry.ts, variant)}
+                  ${runEntry.jobId} -
+                  ${formatRowTimestamp(runEntry.ts, variant)}
                 </span>
               `}
       </span>
       <span class="inline-flex items-center gap-3 shrink-0 text-xs">
         <span class=${runStatusClassName(runStatus)}>${runStatus}</span>
-        <span class="text-gray-400">${formatDurationCompactMs(runEntry.durationMs)}</span>
+        <span class="text-gray-400"
+          >${formatDurationCompactMs(runEntry.durationMs)}</span
+        >
         <span class="text-gray-400">${formatTokenCount(runTokens)} tk</span>
         ${isDetail
-          ? html`<span class="text-gray-500">${runDeliveryLabel(runEntry)}</span>`
+          ? html`<span class="text-gray-500"
+              >${runDeliveryLabel(runEntry)}</span
+            >`
           : html`
               <span class="text-gray-500">
-                ${runEstimatedCost == null ? "—" : `~${formatCost(runEstimatedCost)}`}
+                ${runEstimatedCost == null
+                  ? "—"
+                  : `~${formatCost(runEstimatedCost)}`}
               </span>
             `}
       </span>
@@ -102,7 +111,8 @@ const getCollapsedGroupAggregates = (entries = []) =>
   );
 const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
   const entries = Array.isArray(row?.entries) ? row.entries : [];
-  const { totalTokens, totalCost, hasAnyCost } = getCollapsedGroupAggregates(entries);
+  const { totalTokens, totalCost, hasAnyCost } =
+    getCollapsedGroupAggregates(entries);
   const timeRangeLabel = `${formatOverviewTimestamp(row.oldestTs)} - ${formatOverviewTimestamp(row.newestTs)}`;
   return html`
     <details
@@ -117,21 +127,25 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
               <span class="truncate text-xs text-gray-300">
                 ${row.jobName} - ${formatTokenCount(row.count)} runs
               </span>
-              <span class="text-xs text-gray-500 shrink-0">${timeRangeLabel}</span>
+              <span class="text-xs text-gray-500 shrink-0"
+                >${timeRangeLabel}</span
+              >
             </span>
           </span>
           <span class="inline-flex items-center gap-3 shrink-0 text-xs">
-            <span class="text-gray-400">${formatTokenCount(totalTokens)} tk</span>
+            <span class="text-gray-400"
+              >${formatTokenCount(totalTokens)} tk</span
+            >
             <span class="text-gray-500">
               ${hasAnyCost ? `~${formatCost(totalCost)}` : "—"}
             </span>
           </span>
         </div>
       </summary>
-      <div class="ac-history-body space-y-2 text-xs">
+      <div class="border-t border-border pb-2 text-xs">
         ${entries.length > 0
           ? html`
-              <div class="ac-history-list">
+              <div class="ac-history-list ac-history-list-tight">
                 ${entries.map((runEntry, entryIndex) =>
                   renderEntryRow({
                     row: {
@@ -142,6 +156,8 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
                     variant: "overview",
                     onSelectJob,
                     showOpenJobButton: false,
+                    itemClassName:
+                      "ac-history-item ac-history-item-flat border-b border-border rounded-none",
                   }),
                 )}
               </div>
@@ -149,7 +165,7 @@ const renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {
           : null}
         ${row?.jobId
           ? html`
-              <div>
+              <div class="px-2.5 pt-2 pb-0.5">
                 <button
                   type="button"
                   class="text-xs px-2 py-1 rounded border border-border text-gray-400 hover:text-gray-200"
@@ -170,6 +186,7 @@ const renderEntryRow = ({
   variant = "overview",
   onSelectJob = () => {},
   showOpenJobButton = false,
+  itemClassName = "ac-history-item",
 }) => {
   const runEntry = row?.entry || row || {};
   const runUsage = runEntry?.usage || {};
@@ -184,7 +201,7 @@ const renderEntryRow = ({
   return html`
     <details
       key=${`entry:${rowIndex}:${runEntry.ts}:${runEntry.jobId || ""}`}
-      class="ac-history-item"
+      class=${itemClassName}
     >
       <summary class="ac-history-summary">
         <div class="inline-flex items-center gap-2 min-w-0 w-full">

package/lib/public/js/components/cron-tab/cron-runs-trend-card.js

@@ -1,8 +1,14 @@
 import { h } from "https://esm.sh/preact";
 import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
+import { formatChartBucketLabel } from "../../lib/format.js";
 import { SegmentedControl } from "../segmented-control.js";
-import { formatCost, getCronRunEstimatedCost } from "./cron-helpers.js";
+import {
+  formatCost,
+  formatTokenCount,
+  getCronRunEstimatedCost,
+  getCronRunTotalTokens,
+} from "./cron-helpers.js";
 
 const html = htm.bind(h);
 
@@ -15,6 +21,14 @@ const kRanges = [
   { label: "7d", value: kRange7d },
   { label: "30d", value: kRange30d },
 ];
+const kMetricOutcomes = "outcomes";
+const kMetricTokens = "tokens";
+const kMetricCost = "cost";
+const kMetricOptions = [
+  { label: "outcomes", value: kMetricOutcomes },
+  { label: "tokens", value: kMetricTokens },
+  { label: "cost", value: kMetricCost },
+];
 
 const startOfLocalDayMs = (valueMs) => {
   const dateValue = new Date(valueMs);
@@ -34,9 +48,7 @@ const getBucketConfig = (range = kRange7d) => {
       bucketCount: 24,
       bucketMs: 60 * 60 * 1000,
       formatLabel: (valueMs) =>
-        new Date(valueMs).toLocaleTimeString([], {
-          hour: "numeric",
-        }),
+        formatChartBucketLabel(valueMs, { range: kRange24h, valueType: "epoch-ms" }),
       showLabel: (_, index, total) => index % 3 === 0 || index === total - 1,
       alignToLocalDay: false,
     };
@@ -45,7 +57,8 @@ const getBucketConfig = (range = kRange7d) => {
     return {
       bucketCount: 30,
       bucketMs: 24 * 60 * 60 * 1000,
-      formatLabel: (valueMs) => new Date(valueMs).toLocaleDateString([], { month: "numeric", day: "numeric" }),
+      formatLabel: (valueMs) =>
+        formatChartBucketLabel(valueMs, { range: kRange30d, valueType: "epoch-ms" }),
       showLabel: (_, index, total) => index % 5 === 0 || index === total - 1,
       alignToLocalDay: true,
     };
@@ -53,12 +66,8 @@ const getBucketConfig = (range = kRange7d) => {
   return {
     bucketCount: 7,
     bucketMs: 24 * 60 * 60 * 1000,
-    formatLabel: (valueMs) =>
-      new Date(valueMs).toLocaleDateString([], {
-        weekday: "short",
-        month: "numeric",
-        day: "numeric",
-      }),
+      formatLabel: (valueMs) =>
+        formatChartBucketLabel(valueMs, { range: kRange7d, valueType: "epoch-ms" }),
     showLabel: () => true,
     alignToLocalDay: true,
   };
@@ -86,6 +95,7 @@ const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRan
       ok: 0,
       error: 0,
       skipped: 0,
+      totalTokens: 0,
       totalCost: 0,
       costCount: 0,
     };
@@ -110,6 +120,7 @@ const buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRan
       if (!Number.isFinite(Number(bucketIndex))) return;
       if (bucketIndex < 0 || bucketIndex >= config.bucketCount) return;
       points[bucketIndex][status] += 1;
+      points[bucketIndex].totalTokens += getCronRunTotalTokens(entry);
       const estimatedCost = getCronRunEstimatedCost(entry);
       if (estimatedCost != null) {
         points[bucketIndex].totalCost += estimatedCost;
@@ -142,6 +153,7 @@ export const CronRunsTrendCard = ({
 }) => {
   const chartCanvasRef = useRef(null);
   const chartInstanceRef = useRef(null);
+  const [metric, setMetric] = useState(kMetricOutcomes);
   const [range, setRange] = useState(
     initialRange === kRange30d
       ? kRange30d
@@ -176,48 +188,74 @@ export const CronRunsTrendCard = ({
     const fullAlpha = "0.86";
     const isDimmed = (index) => selectedPointIndex >= 0 && selectedPointIndex !== index;
     const labels = trend.points.map((point) => (point.showLabel ? point.label : ""));
+    if (metric === kMetricOutcomes) {
+      return {
+        labels,
+        datasets: [
+          {
+            label: "ok",
+            data: trend.points.map((point) => Number(point.ok || 0)),
+            stack: "outcomes",
+            backgroundColor: trend.points.map((_, index) =>
+              `rgba(34,255,170,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+            borderColor: trend.points.map((_, index) =>
+              `rgba(34,255,170,${isDimmed(index) ? "0.35" : "1"})`),
+            borderWidth: 1,
+            borderRadius: 0,
+            borderSkipped: false,
+          },
+          {
+            label: "error",
+            data: trend.points.map((point) => Number(point.error || 0)),
+            stack: "outcomes",
+            backgroundColor: trend.points.map((_, index) =>
+              `rgba(255,74,138,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+            borderColor: trend.points.map((_, index) =>
+              `rgba(255,74,138,${isDimmed(index) ? "0.35" : "1"})`),
+            borderWidth: 1,
+            borderRadius: 0,
+            borderSkipped: false,
+          },
+          {
+            label: "skipped",
+            data: trend.points.map((point) => Number(point.skipped || 0)),
+            stack: "outcomes",
+            backgroundColor: trend.points.map((_, index) =>
+              `rgba(255,214,64,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+            borderColor: trend.points.map((_, index) =>
+              `rgba(255,214,64,${isDimmed(index) ? "0.35" : "1"})`),
+            borderWidth: 1,
+            borderRadius: 0,
+            borderSkipped: false,
+          },
+        ],
+      };
+    }
+    const datasetLabel = metric === kMetricTokens ? "tokens" : "cost";
     return {
       labels,
       datasets: [
         {
-          label: "ok",
-          data: trend.points.map((point) => Number(point.ok || 0)),
-          stack: "outcomes",
-          backgroundColor: trend.points.map((_, index) =>
-            `rgba(34,255,170,${isDimmed(index) ? dimAlpha : fullAlpha})`),
-          borderColor: trend.points.map((_, index) =>
-            `rgba(34,255,170,${isDimmed(index) ? "0.35" : "1"})`),
-          borderWidth: 1,
-          borderRadius: 0,
-          borderSkipped: false,
-        },
-        {
-          label: "error",
-          data: trend.points.map((point) => Number(point.error || 0)),
-          stack: "outcomes",
-          backgroundColor: trend.points.map((_, index) =>
-            `rgba(255,74,138,${isDimmed(index) ? dimAlpha : fullAlpha})`),
-          borderColor: trend.points.map((_, index) =>
-            `rgba(255,74,138,${isDimmed(index) ? "0.35" : "1"})`),
-          borderWidth: 1,
-          borderRadius: 0,
-          borderSkipped: false,
-        },
-        {
-          label: "skipped",
-          data: trend.points.map((point) => Number(point.skipped || 0)),
-          stack: "outcomes",
+          label: datasetLabel,
+          data: trend.points.map((point) =>
+            metric === kMetricTokens
+              ? Number(point.totalTokens || 0)
+              : Number(point.totalCost || 0)),
           backgroundColor: trend.points.map((_, index) =>
-            `rgba(255,214,64,${isDimmed(index) ? dimAlpha : fullAlpha})`),
+            metric === kMetricTokens
+              ? `rgba(34,211,238,${isDimmed(index) ? dimAlpha : "0.72"})`
+              : `rgba(167,139,250,${isDimmed(index) ? dimAlpha : "0.72"})`),
           borderColor: trend.points.map((_, index) =>
-            `rgba(255,214,64,${isDimmed(index) ? "0.35" : "1"})`),
+            metric === kMetricTokens
+              ? `rgba(34,211,238,${isDimmed(index) ? "0.35" : "1"})`
+              : `rgba(167,139,250,${isDimmed(index) ? "0.35" : "1"})`),
           borderWidth: 1,
           borderRadius: 0,
           borderSkipped: false,
         },
       ],
     };
-  }, [selectedPointIndex, trend.points]);
+  }, [metric, selectedPointIndex, trend.points]);
 
   useEffect(() => {
     const canvas = chartCanvasRef.current;
@@ -266,7 +304,7 @@ export const CronRunsTrendCard = ({
         },
         scales: {
           x: {
-            stacked: true,
+            stacked: metric === kMetricOutcomes,
             grid: { color: "rgba(148,163,184,0.08)" },
             ticks: {
               color: "rgba(156,163,175,1)",
@@ -275,12 +313,16 @@ export const CronRunsTrendCard = ({
             },
           },
           y: {
-            stacked: true,
+            stacked: metric === kMetricOutcomes,
             beginAtZero: true,
             grid: { color: "rgba(148,163,184,0.12)" },
             ticks: {
-              precision: 0,
+              precision: metric === kMetricCost ? undefined : 0,
               color: "rgba(156,163,175,1)",
+              callback: (value) =>
+                metric === kMetricCost
+                  ? formatCost(Number(value || 0))
+                  : formatTokenCount(Number(value || 0)),
             },
           },
         },
@@ -296,14 +338,21 @@ export const CronRunsTrendCard = ({
           tooltip: {
             callbacks: {
               title: (items) => String(items?.[0]?.label || ""),
-              label: (context) => `${context.dataset.label}: ${Number(context.parsed.y || 0)}`,
+              label: (context) => {
+                const value = Number(context.parsed.y || 0);
+                if (metric === kMetricCost) {
+                  return `${context.dataset.label}: ${formatCost(value)}`;
+                }
+                return `${context.dataset.label}: ${formatTokenCount(value)}`;
+              },
               footer: (items) => {
                 const index = Number(items?.[0]?.dataIndex);
                 const point = trend.points[index];
                 if (!point) return "";
                 const costLabel =
                   point.costCount > 0 ? `~${formatCost(point.totalCost)}` : "—";
-                return `total: ${point.total}\ncost: ${costLabel}`;
+                const tokensLabel = formatTokenCount(point.totalTokens || 0);
+                return `runs: ${point.total}\ntokens: ${tokensLabel}\ncost: ${costLabel}`;
               },
             },
           },
@@ -316,17 +365,24 @@ export const CronRunsTrendCard = ({
         chartInstanceRef.current = null;
       }
     };
-  }, [chartData, onBucketFilterChange, range, selectedBucketKey, trend.points]);
+  }, [chartData, metric, onBucketFilterChange, range, selectedBucketKey, trend.points]);
 
   return html`
     <section class="bg-surface border border-border rounded-xl p-4 space-y-3">
       <div class="flex items-center justify-between gap-2">
-        <h3 class="card-label cron-calendar-title">Run Outcomes</h3>
-        <${SegmentedControl}
-          options=${kRanges}
-          value=${range}
-          onChange=${setRange}
-        />
+        <h3 class="card-label cron-calendar-title">Trends</h3>
+        <div class="flex items-center gap-2">
+          <${SegmentedControl}
+            options=${kMetricOptions}
+            value=${metric}
+            onChange=${setMetric}
+          />
+          <${SegmentedControl}
+            options=${kRanges}
+            value=${range}
+            onChange=${setRange}
+          />
+        </div>
       </div>
       <div class="h-40">
         <canvas ref=${chartCanvasRef}></canvas>

package/lib/public/js/components/cron-tab/index.js

@@ -176,6 +176,7 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
                     <${CronJobDetail}
                       job=${state.selectedJob}
                       runEntries=${state.runEntries}
+                      filteredRunEntries=${state.filteredRunEntries}
                       runTotal=${state.runTotal}
                       runHasMore=${state.runHasMore}
                       loadingMoreRuns=${state.loadingMoreRuns}
@@ -187,8 +188,13 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
                       onToggleEnabled=${actions.setSelectedJobEnabled}
                       togglingJobEnabled=${state.togglingJobEnabled}
                       usage=${state.usage}
+                      jobTrends=${state.jobTrends}
+                      jobTrendRange=${state.jobTrendRange}
+                      selectedJobTrendBucketFilter=${state.selectedJobTrendBucketFilter}
                       usageDays=${state.usageDays}
                       onSetUsageDays=${actions.setUsageDays}
+                      onSetJobTrendRange=${actions.setJobTrendRange}
+                      onSetSelectedJobTrendBucketFilter=${actions.setSelectedJobTrendBucketFilter}
                       promptValue=${state.promptValue}
                       savedPromptValue=${state.savedPromptValue}
                       onChangePrompt=${actions.setPromptValue}

package/lib/public/js/components/cron-tab/use-cron-tab.js

@@ -11,6 +11,7 @@ import {
   fetchCronBulkRuns,
   fetchCronBulkUsage,
   fetchCronJobRuns,
+  fetchCronJobTrends,
   fetchCronJobs,
   fetchCronJobUsage,
   fetchCronStatus,
@@ -30,6 +31,9 @@ const kListPanelWidthUiSettingKey = "cronListPanelWidthPx";
 const kRunsPageSize = 25;
 const kCalendarUsageDays = 30;
 const kCalendarPastDays = 30;
+const kTrendRange24h = "24h";
+const kTrendRange7d = "7d";
+const kTrendRange30d = "30d";
 const kRoutingDefaults = {
   sessionTarget: "main",
   wakeMode: "now",
@@ -79,6 +83,8 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
   const [togglingJobEnabled, setTogglingJobEnabled] = useState(false);
   const [routingDraft, setRoutingDraft] = useState(kRoutingDefaults);
   const [usageDays, setUsageDays] = useState(30);
+  const [jobTrendRange, setJobTrendRange] = useState(kTrendRange7d);
+  const [selectedJobTrendBucketFilter, setSelectedJobTrendBucketFilter] = useState(null);
   const {
     sessions: deliverySessions,
     loading: loadingDeliverySessions,
@@ -122,6 +128,14 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     60000,
     { enabled: !!selectedJobId },
   );
+  const trendsPoll = usePolling(
+    () => {
+      if (!selectedJobId) return Promise.resolve({ ok: true, trends: null });
+      return fetchCronJobTrends(selectedJobId, { range: jobTrendRange });
+    },
+    60000,
+    { enabled: !!selectedJobId },
+  );
   const bulkUsagePoll = usePolling(
     () => fetchCronBulkUsage({ days: kCalendarUsageDays }),
     60000,
@@ -201,6 +215,29 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     if (!selectedJobId) return;
     usagePoll.refresh();
   }, [selectedJobId, usageDays]);
+  useEffect(() => {
+    if (!selectedJobId) return;
+    setSelectedJobTrendBucketFilter(null);
+    trendsPoll.refresh();
+  }, [jobTrendRange, selectedJobId]);
+  const filteredRunEntries = useMemo(() => {
+    const entries = Array.isArray(runEntries) ? runEntries : [];
+    const filterValue = selectedJobTrendBucketFilter;
+    if (!filterValue) return entries;
+    const startMs = Number(filterValue?.startMs || 0);
+    const endMs = Number(filterValue?.endMs || 0);
+    if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs <= startMs) {
+      return entries;
+    }
+    return entries.filter((entry) => {
+      const timestampMs = Number(entry?.ts || 0);
+      return (
+        Number.isFinite(timestampMs) &&
+        timestampMs >= startMs &&
+        timestampMs < endMs
+      );
+    });
+  }, [runEntries, selectedJobTrendBucketFilter]);
 
   const resizeListPanelWithClientX = useCallback((clientX) => {
     const listPanelElement = listPanelRef.current;
@@ -257,6 +294,7 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     statusPoll.refresh();
     runsPoll.refresh();
     usagePoll.refresh();
+    trendsPoll.refresh();
     bulkUsagePoll.refresh();
     bulkRunsPoll.refresh();
   }, [
@@ -265,6 +303,7 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     jobsPoll.refresh,
     runsPoll.refresh,
     statusPoll.refresh,
+    trendsPoll.refresh,
     usagePoll.refresh,
   ]);
 
@@ -417,6 +456,7 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
       listPanelWidthPx,
       isResizingListPanel,
       runEntries,
+      filteredRunEntries,
       runHasMore,
       runNextOffset,
       runTotal,
@@ -424,8 +464,17 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
       runsError: runsPoll.error,
       loadingMoreRuns,
       usage: usagePoll.data?.usage || null,
+      jobTrends: trendsPoll.data?.trends || null,
       usageError: usagePoll.error,
+      trendsError: trendsPoll.error,
       usageDays,
+      jobTrendRange:
+        jobTrendRange === kTrendRange30d
+          ? kTrendRange30d
+          : jobTrendRange === kTrendRange24h
+            ? kTrendRange24h
+            : kTrendRange7d,
+      selectedJobTrendBucketFilter,
       bulkUsageByJobId: bulkUsagePoll.data?.usage?.byJobId || {},
       bulkUsageError: bulkUsagePoll.error,
       bulkRunsByJobId: bulkRunsPoll.data?.runs?.byJobId || {},
@@ -444,6 +493,8 @@ export const useCronTab = ({ jobId = "", onSetLocation = () => {} } = {}) => {
     actions: {
       setRunStatusFilter,
       setUsageDays,
+      setJobTrendRange,
+      setSelectedJobTrendBucketFilter,
       setPromptValue,
       saveChanges,
       refreshAll,

package/lib/public/js/components/icons.js

@@ -450,3 +450,14 @@ export const FullscreenLineIcon = ({ className = "" }) => html`
     <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" />
   </svg>
 `;
+
+export const ComputerLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z" />
+  </svg>
+`;

package/lib/public/js/components/nodes-tab/browser-attach/index.js

@@ -0,0 +1,85 @@
+import { h } from "https://esm.sh/preact";
+import { useMemo } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { marked } from "https://esm.sh/marked";
+
+const html = htm.bind(h);
+
+const kReleaseNotesUrl =
+  "https://github.com/openclaw/openclaw/releases/tag/v2026.3.13";
+const kSetupInstructionsMarkdown = `Release reference: [OpenClaw 2026.3.13](${kReleaseNotesUrl})
+
+## Requirements
+
+- OpenClaw 2026.3.13+
+- Chrome 144+
+- Node.js installed on the Mac node so \`npx\` is available
+
+## Setup
+
+### 1) Enable remote debugging in Chrome
+
+Open \`chrome://inspect/#remote-debugging\` and turn it on. Do **not** launch Chrome with \`--remote-debugging-port\`.
+
+### 2) Configure the node
+
+In \`~/.openclaw/openclaw.json\` on the Mac node:
+
+\`\`\`json
+{
+  "browser": {
+    "defaultProfile": "user"
+  }
+}
+\`\`\`
+
+The built-in \`user\` profile uses live Chrome attach. You do not need a custom \`existing-session\` profile.
+
+### 3) Approve Chrome consent
+
+On first connect, Chrome prompts for DevTools MCP access. Click **Allow**.
+
+## Troubleshooting
+
+| Problem | Fix |
+| --- | --- |
+| Browser proxy times out (20s) | Restart Chrome cleanly and run the check again. |
+| Config validation error on existing-session | Do not define a custom existing-session profile. Use \`defaultProfile: "user"\`. |
+| EADDRINUSE on port 9222 | Quit Chrome launched with \`--remote-debugging-port\` and relaunch normally. |
+| Consent dialog appears but attach hangs | Quit Chrome, relaunch, and approve the dialog again. |
+| \`npx chrome-devtools-mcp\` not found | Install Node.js on the Mac node so \`npx\` exists in PATH. |`;
+
+export const BrowserAttachCard = () => {
+  const setupInstructionsHtml = useMemo(
+    () =>
+      marked.parse(kSetupInstructionsMarkdown, {
+        gfm: true,
+        breaks: true,
+      }),
+    [],
+  );
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+      <div class="space-y-1">
+        <h3 class="font-semibold text-sm">Live Chrome Attach (Mac Node)</h3>
+        <p class="text-xs text-gray-500">
+          Connect your agent to real Chrome sessions (logged-in tabs, cookies,
+          and all) using the built-in <code>user</code> profile.
+        </p>
+      </div>
+
+      <details class="rounded-lg border border-border bg-black/20 px-3 py-2.5">
+        <summary
+          class="cursor-pointer text-xs text-gray-300 hover:text-gray-200"
+        >
+          Setup instructions
+        </summary>
+        <div
+          class="pt-3 file-viewer-preview release-notes-preview text-xs leading-5"
+          dangerouslySetInnerHTML=${{ __html: setupInstructionsHtml }}
+        ></div>
+      </details>
+    </div>
+  `;
+};