Dedicated Activity page, Accessibility deep-link button, and a dev-mode ribbon

Recent activity moves out of RunbookView into its own always-visible
page (ActivityView.tsx) -- nested inside Runbook and gated on
activity.length > 0, it was indistinguishable from "the feed doesn't
work" when nothing had fired yet. The Events.On('hotkey-activity', ...)
subscription now lives in App.tsx so it keeps collecting regardless of
which tab is open. actions is lifted to App.tsx too, passed down to
both RunbookView and ActivityView, rather than each view fetching its
own copy.

RunbookView's Accessibility-permission bindingError now shows an "Open
Accessibility Settings" button (Browser.OpenURL, not data-wml-openURL --
the button only exists post-error, well after WML's one-time mount-time
scan) pointing at a deep link verified directly on this machine (macOS
26.5.2): opens Privacy & Security -> Accessibility, not just System
Settings' default screen.

Also adds a small dev-mode ribbon (top-right, Primer Label) gated on
import.meta.env.DEV, showing "DEV · loaded HH:MM:SS". Verified
empirically which Vite env flag is actually reliable here: DEV is false
for both `vite build --mode development` and `vite build --mode
production` (both go through the build command, not serve) and only
true for a genuine `vite serve` process -- which is what task dev's
window actually renders through. Using MODE instead would have been
silently wrong.

SPEC.md records the verified Accessibility deep-link identifier and a
newly root-caused gotcha: dev builds are freshly ad-hoc code-signed on
every rebuild, so macOS treats each one as a new app and re-asks for
Accessibility permission -- not a Mill bug, but real, recurring local
dev-loop friction worth not re-debugging from scratch next time.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C7zUjYuMtgetjNaxMQPg2h

Author: alicoding

docs/SPEC.md

@@ -339,20 +339,38 @@ that environment, on something testable directly in this dev session:
   next build step.
 - **Permissions UX pattern for when this needs Accessibility access**:
   macOS supports deep-linking straight into a specific System Settings pane
-  via the `x-apple.systempreferences:` URL scheme (`open
-  "x-apple.systempreferences:com.apple.Keyboard-Settings.extension?Shortcuts"`,
-  confirmed via search) — this is the exact mechanism Hammerspoon itself
-  uses for its own "grant Accessibility permission" prompt, and Mill will
-  need the same prompt once hotkeys/simulated-paste land. Caveat: this is
-  not an official documented Apple API — it's community-reverse-engineered,
-  and identifiers have broken before across macOS System Settings rewrites
-  (confirmed: the pre-Ventura Accessibility deep-link stopped working when
-  Ventura rebuilt System Settings). Use it, but with a plain-language
-  fallback for when the link silently stops landing correctly — don't trust
-  it blindly, and verify the exact identifier against the target macOS
-  version at build time rather than assuming it still holds. `OPEN`
-  (exact identifiers, verify at implementation time) / `LOCKED` (the
-  show-current-state-and-deep-link pattern itself is worth using).
+  via the `x-apple.systempreferences:` URL scheme — this is the exact
+  mechanism Hammerspoon/Raycast/1Password all use for their own "grant
+  Accessibility permission" prompts. `RunbookView.tsx`'s Accessibility
+  error now shows an "Open Accessibility Settings" button (`Browser.OpenURL`
+  from `@wailsio/runtime`, not `data-wml-openURL` — the button only exists
+  once a bindingError fires, well after WML's one-time mount-time DOM scan,
+  so the imperative call is used instead of the declarative tag to avoid a
+  wire-up timing gap) pointing at
+  `x-apple.systempreferences:com.apple.preference.security?Privacy_Accessibility`
+  — **verified directly on this machine (macOS 26.5.2/25F84), not assumed**:
+  ran it via `open`, confirmed by the user it landed on Privacy & Security →
+  Accessibility, not just System Settings' default screen. Caveat still
+  stands: this is not an official documented Apple API — it's
+  community-reverse-engineered, and identifiers have broken before across
+  macOS System Settings rewrites (the pre-Ventura Accessibility deep-link
+  stopped working when Ventura rebuilt System Settings), so re-verify
+  against the target macOS version if this stops landing correctly after a
+  future update. `LOCKED` (identifier verified + wired up for macOS 26;
+  the show-current-state-and-deep-link pattern itself).
+- **Dev builds re-trigger the Accessibility grant on every rebuild** —
+  root-caused a real "a hotkey registered and fired cleanly, then after
+  the next `task dev` restart the identical combo failed to register at
+  all" confusion. `build/darwin/Taskfile.yml`'s dev-build task runs
+  `codesign --force --deep --sign -` (ad-hoc signing) on every single
+  build, which changes `bin/mill.dev.app`'s code identity each time —
+  macOS's TCC ties an Accessibility grant to that identity, so every dev
+  rebuild looks like a brand-new, ungranted app to TCC. Not a bug in
+  Mill's own code; a known category of friction with ad-hoc-signed local
+  dev builds. No fix implemented (a stable local signing identity would
+  need its own investigation) — noted here so it isn't re-debugged from
+  scratch next time it's hit. `LOCKED` (the root cause) / `OPEN` (whether
+  it's worth a fix, e.g. a consistent local dev signing identity).
 - **Progressive enhancement by permission, not a hard gate.** `LOCKED`
   Zero-permission floor: browsing the Runbook and running an action by
   clicking it always works, no OS permission required. Accessibility

frontend/public/style.css

@@ -114,6 +114,16 @@ body {
     .footer-time svg { width: 13px; height: 13px; }
 }
 
+/* Dev-mode ribbon: only rendered when import.meta.env.DEV is true (App.tsx),
+   so this rule is inert/unused in any real build. */
+.dev-ribbon {
+    --wails-draggable: no-drag;
+    position: fixed;
+    top: var(--base-size-8);
+    right: var(--base-size-8);
+    z-index: 2;
+}
+
 /* View switcher (Runbook / Spec) is Primer's UnderlineNav — no bespoke CSS needed. */
 nav[aria-label="Mill"] {
     --wails-draggable: no-drag;
@@ -197,7 +207,6 @@ nav[aria-label="Mill"] {
     max-height: 240px;
     overflow-y: auto;
 }
-.runbook-activity-heading { margin-top: var(--s-4); }
 .runbook-activity-row {
     padding: var(--base-size-4) 0;
     border-bottom: 1px solid var(--borderColor-muted);

frontend/src/ActivityView.tsx

@@ -0,0 +1,60 @@
+import { Heading, Label, Stack, Text } from '@primer/react'
+import { CheckCircleIcon, XCircleIcon } from '@primer/octicons-react'
+import type { HotkeyActivity } from '../bindings/github.com/alicoding/mill/models'
+import type { Action } from '../bindings/github.com/alicoding/mill/internal/domain/runbook/models'
+
+export type ActivityEntry = HotkeyActivity & { id: string; time: string }
+
+interface ActivityViewProps {
+  activity: ActivityEntry[]
+  actions: Action[] | null
+}
+
+function actionName(actions: Action[] | null, actionID: string): string {
+  return actions?.find((a) => a.ID === actionID)?.Name ?? actionID
+}
+
+// A dedicated, always-visible page rather than a section tucked inside
+// Runbook: a hotkey fires headlessly with no other UI surface (§2.2), so
+// this is the only way to see whether anything fired at all — nested
+// inside another page, it was indistinguishable from "the feed doesn't
+// work" when nothing had fired yet. Subscribed once at App.tsx (not here)
+// so it keeps collecting even while this tab isn't the active view.
+function ActivityView({ activity, actions }: ActivityViewProps) {
+  return (
+    <div className="runbook">
+      <Heading as="h1">Activity</Heading>
+      <Text as="p" className="runbook-subtitle">
+        What fired hotkeys actually did, in real time — hotkey triggers run
+        headlessly and write straight to the clipboard, with no other
+        feedback.
+      </Text>
+
+      {activity.length === 0 && (
+        <div className="runbook-empty">
+          <Text as="p">No activity yet — press a bound hotkey to see it appear here.</Text>
+        </div>
+      )}
+
+      {activity.length > 0 && (
+        <Stack direction="vertical" gap="condensed">
+          {activity.map((entry) => (
+            <Stack key={entry.id} direction="horizontal" align="center" gap="condensed" className="runbook-activity-row">
+              {entry.success ? (
+                <CheckCircleIcon size={16} fill="var(--fgColor-success)" />
+              ) : (
+                <XCircleIcon size={16} fill="var(--fgColor-danger)" />
+              )}
+              <Text size="small" className="runbook-muted">{entry.time}</Text>
+              <Label variant="secondary" size="small">{entry.binding}</Label>
+              <Text size="small">{actionName(actions, entry.actionID)}</Text>
+              <Text size="small" className="runbook-muted">— {entry.detail}</Text>
+            </Stack>
+          ))}
+        </Stack>
+      )}
+    </div>
+  )
+}
+
+export default ActivityView

frontend/src/App.tsx

@@ -1,15 +1,36 @@
 import { useState, useEffect } from 'react'
 import {Events, WML} from "@wailsio/runtime";
-import {UnderlineNav} from "@primer/react";
+import {Label, UnderlineNav} from "@primer/react";
 import SpecView from "./SpecView";
 import RunbookView from "./RunbookView";
+import ActivityView, { type ActivityEntry } from "./ActivityView";
+import { RunbookService } from "../bindings/github.com/alicoding/mill";
+import type { Action } from "../bindings/github.com/alicoding/mill/internal/domain/runbook/models";
 
 // Show the actual Wails version this project was generated against.
 const wailsVersion = "v3.0.0-beta.4";
 
+const MAX_ACTIVITY_ENTRIES = 50;
+
+// import.meta.env.DEV is Vite's own built-in flag, not something Mill
+// wires up itself: true only for a real `vite serve` process (what
+// `task dev`'s window actually renders through, per devServerURL in its
+// logs), false for every `vite build` output regardless of --mode --
+// verified directly, not assumed, since that distinction is easy to get
+// backwards. This is Mill's answer to "am I looking at a dev build,
+// and is it current" (see docs/SPEC.md's dev-build/hot-reload notes).
+const isDevBuild = import.meta.env.DEV;
+
 function App() {
-  const [view, setView] = useState<'spec' | 'runbook'>('runbook');
+  const [view, setView] = useState<'spec' | 'runbook' | 'activity'>('runbook');
   const [time, setTime] = useState<string>('Listening for Time event...');
+  const [actions, setActions] = useState<Action[] | null>(null);
+  const [activity, setActivity] = useState<ActivityEntry[]>([]);
+  // Captured once per mount. A Go-file change forces a full app reload
+  // (Go isn't hot-reloadable, unlike frontend-only edits which apply via
+  // Vite HMR without remounting) -- so this timestamp doubles as "when
+  // did the last Go rebuild actually land," not just page-load trivia.
+  const [loadedAt] = useState(() => new Date().toLocaleTimeString());
 
   useEffect(() => {
     Events.On('time', (timeValue) => {
@@ -23,18 +44,44 @@ function App() {
     WML.Reload();
   }, []);
 
+  useEffect(() => {
+    RunbookService.List().then((list) => setActions(list ?? [])).catch(console.error);
+  }, []);
+
+  // Subscribed here, not inside ActivityView/RunbookView, so a hotkey
+  // fired while on a different tab is still captured -- the whole point
+  // of this feed is answering "did anything fire at all" regardless of
+  // which page happened to be open at the time.
+  useEffect(() => {
+    return Events.On('hotkey-activity', (evt) => {
+      const entry = { ...evt.data, id: crypto.randomUUID(), time: new Date().toLocaleTimeString() };
+      setActivity((prev) => [entry, ...prev].slice(0, MAX_ACTIVITY_ENTRIES));
+    });
+  }, []);
+
   return (
     <>
+      {isDevBuild && (
+        <Label variant="severe" size="small" className="dev-ribbon">
+          DEV · loaded {loadedAt}
+        </Label>
+      )}
+
       <UnderlineNav aria-label="Mill">
         <UnderlineNav.Item aria-current={view === 'runbook' ? 'page' : undefined} onSelect={(e) => { e.preventDefault(); setView('runbook') }}>
           Runbook
         </UnderlineNav.Item>
+        <UnderlineNav.Item aria-current={view === 'activity' ? 'page' : undefined} onSelect={(e) => { e.preventDefault(); setView('activity') }}>
+          Activity
+        </UnderlineNav.Item>
         <UnderlineNav.Item aria-current={view === 'spec' ? 'page' : undefined} onSelect={(e) => { e.preventDefault(); setView('spec') }}>
           Spec
         </UnderlineNav.Item>
       </UnderlineNav>
 
-      {view === 'runbook' && <RunbookView/>}
+      {view === 'runbook' && <RunbookView actions={actions}/>}
+
+      {view === 'activity' && <ActivityView activity={activity} actions={actions}/>}
 
       {view === 'spec' && <SpecView/>}
 

frontend/src/RunbookView.tsx

@@ -1,20 +1,11 @@
 import { useEffect, useState } from 'react'
-import { Events } from '@wailsio/runtime'
+import { Browser } from '@wailsio/runtime'
 import { Button, Heading, Label, type LabelProps, SkeletonBox, Stack, Text } from '@primer/react'
-import { BeakerIcon, CheckCircleIcon, KeyIcon, MarkdownIcon, XCircleIcon } from '@primer/octicons-react'
+import { BeakerIcon, KeyIcon, MarkdownIcon } from '@primer/octicons-react'
 import { RunbookService, HotkeyService } from '../bindings/github.com/alicoding/mill'
-import type { HotkeyActivity } from '../bindings/github.com/alicoding/mill/models'
 import type { Action } from '../bindings/github.com/alicoding/mill/internal/domain/runbook/models'
 import { keyFromEventCode, modsFromEvent } from './keybinding'
 
-// A fired hotkey has no other UI surface — it runs headlessly and writes
-// straight to the clipboard (§2.2). Without this feed, a correctly firing
-// hotkey and a silently swallowed one look identical from the UI: nothing
-// visibly happens either way. Capped and in-memory only, same as the
-// bindings themselves — see SPEC.md §2.2's "Hotkey fire path is logged
-// end-to-end" entry.
-const MAX_ACTIVITY_ENTRIES = 5
-
 // Per-action leading icon. Falls back to KeyIcon for any future action not
 // listed here rather than rendering nothing.
 const ACTION_ICONS: Record<string, typeof BeakerIcon> = {
@@ -37,28 +28,35 @@ function reachTier(label: string): { text: string; variant: LabelProps['variant'
   return { text: 'Deliberately awkward', variant: 'danger' }
 }
 
-function RunbookView() {
-  const [actions, setActions] = useState<Action[] | null>(null)
+// SPEC.md §2.2's "Permissions UX pattern" — deep-link straight into the
+// exact System Settings pane instead of telling the user to go find it
+// themselves, same pattern Hammerspoon/Raycast/1Password use. Verified
+// directly against this machine's actual macOS version (26.5.2) rather
+// than assumed — these identifiers are unofficial and have broken across
+// System Settings rewrites before (see SPEC.md), so re-verify if this
+// stops landing on the right pane after a macOS update.
+const ACCESSIBILITY_SETTINGS_URL = 'x-apple.systempreferences:com.apple.preference.security?Privacy_Accessibility'
+
+function isAccessibilityError(message: string): boolean {
+  return message.includes('Accessibility')
+}
+
+interface RunbookViewProps {
+  actions: Action[] | null
+}
+
+function RunbookView({ actions }: RunbookViewProps) {
   const [runningId, setRunningId] = useState<string | null>(null)
   const [results, setResults] = useState<Record<string, string>>({})
   const [errors, setErrors] = useState<Record<string, string>>({})
   const [bindings, setBindings] = useState<Record<string, string>>({})
   const [bindingErrors, setBindingErrors] = useState<Record<string, string>>({})
   const [recordingId, setRecordingId] = useState<string | null>(null)
-  const [activity, setActivity] = useState<(HotkeyActivity & { id: string; time: string })[]>([])
 
   useEffect(() => {
-    RunbookService.List().then((list) => setActions(list ?? [])).catch(console.error)
     HotkeyService.List().then((list) => setBindings((list ?? {}) as Record<string, string>)).catch(console.error)
   }, [])
 
-  useEffect(() => {
-    return Events.On('hotkey-activity', (evt) => {
-      const entry = { ...evt.data, id: crypto.randomUUID(), time: new Date().toLocaleTimeString() }
-      setActivity((prev) => [entry, ...prev].slice(0, MAX_ACTIVITY_ENTRIES))
-    })
-  }, [])
-
   useEffect(() => {
     if (!recordingId) return
 
@@ -170,7 +168,14 @@ function RunbookView() {
                 </Stack>
 
                 {bindingErrors[action.ID] && (
-                  <Text as="p" size="small" className="runbook-error">{bindingErrors[action.ID]}</Text>
+                  <Stack direction="vertical" gap="condensed">
+                    <Text as="p" size="small" className="runbook-error">{bindingErrors[action.ID]}</Text>
+                    {isAccessibilityError(bindingErrors[action.ID]) && (
+                      <Button size="small" onClick={() => Browser.OpenURL(ACCESSIBILITY_SETTINGS_URL)}>
+                        Open Accessibility Settings
+                      </Button>
+                    )}
+                  </Stack>
                 )}
                 {errors[action.ID] && (
                   <Text as="p" size="small" className="runbook-error">{errors[action.ID]}</Text>
@@ -183,36 +188,8 @@ function RunbookView() {
           })}
         </Stack>
       )}
-
-      {activity.length > 0 && (
-        <>
-          <Heading as="h2" variant="small" className="runbook-activity-heading">Recent activity</Heading>
-          <Text as="p" size="small" className="runbook-muted runbook-subtitle">
-            What fired hotkeys actually did — hotkey triggers run headlessly with no other feedback.
-          </Text>
-          <Stack direction="vertical" gap="condensed">
-            {activity.map((entry) => (
-              <Stack key={entry.id} direction="horizontal" align="center" gap="condensed" className="runbook-activity-row">
-                {entry.success ? (
-                  <CheckCircleIcon size={16} fill="var(--fgColor-success)" />
-                ) : (
-                  <XCircleIcon size={16} fill="var(--fgColor-danger)" />
-                )}
-                <Text size="small" className="runbook-muted">{entry.time}</Text>
-                <Label variant="secondary" size="small">{entry.binding}</Label>
-                <Text size="small">{actionName(actions, entry.actionID)}</Text>
-                <Text size="small" className="runbook-muted">— {entry.detail}</Text>
-              </Stack>
-            ))}
-          </Stack>
-        </>
-      )}
     </div>
   )
 }
 
-function actionName(actions: Action[] | null, actionID: string): string {
-  return actions?.find((a) => a.ID === actionID)?.Name ?? actionID
-}
-
 export default RunbookView