eleven / messenger Public

Command panels: slash commands can open a transient, interactive results surface (#497)

* web: command panels — a transient results surface a slash command can open

A command can now answer with a PANEL: a temporary, interactive surface in
the chat you typed in — above the composer by default, or pinned above the
feed with position: "top" — alongside the existing private reply. It's the
/gif-picker shape: run a command, get tappable results in place, tap one and
the panel acts on the composer (insert text, stage attachments) and
dismisses itself. The user can always dismiss it too (its ✕, or Escape), and
opening another replaces it. Panels are client-only chrome: never sent,
never folded, gone when dismissed or when the pane closes.

- apps.js: ctx.panel(spec) / ctx.closePanel() in command + mention handlers,
  the injectable host (setCommandPanelHost), and the panel chrome CSS.
  ctx.panel returns false when the thread has no chat surface, so commands
  can fall back to ctx.reply.
- chat.js: the host — builds the panel in the pane skeleton, routes
  open/close per thread, wires Escape into the existing layer-peeling order,
  and hands renders a handle: close / refresh / insertText (caret-aware;
  forwarded as composerInsert to native shells in embed mode) / attachFiles
  (the same staging path the attach button uses).
- apps/emoji.js: the reference app — /emoji [search] opens a picker panel
  from the curated shortcode set; tapping an emoji inserts it and closes.
- Docs: authoring guide section + ctx table rows in apps/README.md; the
  command-doctrine bullet in CLAUDE.md now names panels as a sanctioned
  in-place response.
- Tests: searchEmoji + panel plumbing in test/apps.test.mjs; verified live
  in Chromium via the verify-skill recipe (12 assertions: open, grid, tap
  inserts + closes, Escape, ✕, no-match reply fallback).

Co-Authored-By: Claude <noreply@anthropic.com>

* mac: command panels — the native composer runs mini-app commands through a per-thread webview

The Mac feed renders chat natively, so it had no JS engine for mini-app
slash commands — /emoji (and future panel commands) just posted as literal
text. This gives every native thread a hidden COMMAND HOST: the same embed
page the app-thread webviews load, seeded with mode:"command", which is the
real web command engine bound to that thread. The shell forwards an
allowlisted slash command to it; a private reply comes back as an inline
notice, and a panel reveals the webview above the composer — the webview IS
the panel, drawn by the same web code the browser uses.

Web (the command-host embed mode):
- shell.js installCommandHost: window.lchatNative.runCommand/dismissPanel;
  posts {commandHostReady}, {panel: {title, height} | null}, {panelHeight},
  {notice}; height measured via scrollHeight so it works while the webview
  is still hidden (0-tall).
- apps.js setCommandPanelObserver/notifyCommandPanel — fired by the host's
  controller for every show/dismiss (command, ✕, Escape, app close), the one
  reliable visibility signal.
- style.css body.command-host: everything but .cmd-panel collapses; the
  panel body scrolls within whatever frame the shell grants.

Mac:
- CommandPanelWebView.swift: CommandHost (webview + "lchat" relay + a boot
  queue so the first command never races the page load), CommandHostCache
  (LRU, AppWebViewCache's shape), and the NSViewRepresentable panel.
- NativeFeedView: WebPanelCommands-owned drafts forward to the host and
  clear; the panel sits in-flow above the banners, sized by the page's
  measure (capped 340pt); Escape peels the panel before reply/edit;
  {composerInsert} appends to the draft (an /emoji tap); {notice} reuses the
  routeNotice inline slot; a "/" draft pre-warms the host. The typeahead now
  lists the command-host verbs.
- LChatCore WebPanelCommands: the forwarding allowlist (only commands that
  act in the current thread — the embed holds a single thread's key), with
  tests.

Verified: the mode:"command" page driven in Chromium with a stubbed webkit
bridge (13 assertions: ready post, collapse-to-panel, panel/height posts,
composerInsert + auto-dismiss on tap, dismissPanel, notice fallback); npm
test + go test green; LChatMac scheme builds; LChatCore 143 tests pass.
iOS follows in a separate change (its chat webview already renders panels;
it needs the composerInsert handler and Escape wiring).

Co-Authored-By: Claude <noreply@anthropic.com>

* web: /gif — Giphy search in a command panel, posted as an encrypted attachment

/gif [search] opens a command panel of Giphy results (in-panel refine box,
trending on a bare /gif); tapping one posts the GIF into the chat as an
ordinary encrypted image message from you — tap = send, like Slack's /giphy,
so the same flow works in the native shells' command-host webview where
there's no web composer to stage into.

The trust model (documented in CLAUDE.md next to unfurl's exception): all
Giphy traffic is CLIENT-side — the lchat server never sees the search, the
pick, or the bytes. The app itself never fetches (invariant #7 holds): the
host provides a scoped doorway, hostBridge.gif { search, bytes, upload } in
shell.js — bytes() accepts only https *.giphy.com URLs, upload() encrypts to
the thread key WITHOUT the image re-encode path so animation survives, and
the CSP widens connect-src to exactly https://*.giphy.com. The Giphy API key
is a public client identifier (an instance setting is a fine follow-up).

pickRendition (downsized → fixed_height → original, size-capped with the
byte fetch re-checking real length) and gifItems are pure + unit-tested.
WebPanelCommands gains /gif so the Mac forwards it and lists it in the
typeahead.

Verified live in Chromium against real Giphy, twice: the browser chat page
(11 assertions — tiles render under the new CSP, refine works, tap posts a
blob:-decrypted image message, panel dismisses, composer stays empty) and
the mode:"command" embed page the Mac webview loads (5 assertions — panel
posts, tap posts the message over the page's own socket, {panel: null}
follows). npm test + go test green.

Co-Authored-By: Claude <noreply@anthropic.com>

* tools: lchat-dev-mac — seed the native Mac app with the dev server's space

The Mac app's only product entry is "Sign in with Eleven" (the home vault),
which can't know about a local dev instance — and the join page's "Open in
the app" deep link (elevenmessenger://add) is deliberately unhandled
(joining lives on the web; a native join flow comes later), silently, with
no logging. So click-testing a branch build against tools/lchat-dev-up.mjs
had no way in.

This script does what the vault would: mints + claims a fresh add-device
token for the seeded "you" account (admin API + the same InviteCrypto
derivation the clients use) and writes a SavedInstance +  rail entry into
the app's stores, via InstancesStore's legacy file-read fallback. The file
carries the dev identity's private key in the clear — exactly why the app
never WRITES it — acceptable only for this throwaway localhost identity;
the header says so loudly. Re-run after the app's keychain adopts (and
deletes) the file.

Co-Authored-By: Claude <noreply@anthropic.com>

* mac: fix the panel deadlock in detached webviews; log the command chain

The command-host page is detached from the native view hierarchy until the
shell reveals it — and WebKit suspends requestAnimationFrame in unparented
webviews, so installCommandHost's rAF-deferred {panel} post never fired: the
panel couldn't announce itself, so the shell never attached the webview, so
rendering never resumed. (The Chromium contract drives ran in a visible tab,
which is why they passed.) The measure never needed a frame — scrollHeight
forces layout synchronously — so post immediately; the late re-measure keeps
riding a timer, which detached webviews do run.

Also instrument the whole chain with os.Logger (subsystem
com.elevenmessenger.mac, category "commands"): forward decision, page
load/fail, readiness + queue flush, every post (panel/insert/notice), eval
errors, and the page's own {error} — a silent drop anywhere in this chain is
now visible in `log stream`.

Co-Authored-By: Claude <noreply@anthropic.com>

* dev: ignore the dev server's db + blob store (unswept by tools/lchat-dev-up)

Three encrypted upload blobs from a local dev run slipped into the previous
commit via git add -A — remove them and ignore .lchat-dev.db* and
.lchat-dev-blobs/ alongside the already-ignored dev config.

Co-Authored-By: Claude <noreply@anthropic.com>

* gif: rendition-fallback on post + visible status; surface page errors natively

A native click-test post died silently: the picked rendition's download
failed (or busted the size cap), the catch put its message BELOW the result
grid — out of view in the height-capped panel — and the "Sending…" overlay
was all anyone saw. Server-side forensics showed the click never reached
upload; a headless WKWebView harness against the same seed then posted
fine, pinning the failure to the single-rendition fetch, not the machinery.

- gif.js: posting walks renditionCandidates (downsized → fixed_height →
  original, metadata-oversize dropped, deduped) so one bad URL falls back
  instead of failing the send; the status line moves ABOVE the grid where a
  scrolled panel can't hide it; the failure path logs which step died.
- shell.js: the gif doorway logs each step's failure + gets fetch timeouts;
  command-host pages forward window errors, unhandled rejections, and
  console.error as {error} posts — CommandHost writes them to the unified
  log, so a page-side death is now visible in `log show`.
- Mac: the chain logs move .info → .notice — info is memory-only in the
  unified log, which is why the first forensic `log show` came back empty.

Co-Authored-By: Claude <noreply@anthropic.com>

* web+mac: panels ease open/shut; apps opt out with animate: false

A panel now eases up into place on open and rolls down on dismissal — ✕,
Escape, and the app's own panel.close()/ctx.closePanel all take the same
path — honouring the OS reduce-motion setting, with the spec's
`animate: false` choosing instant instead. The command-host embed skips the
in-page ease (the panel IS the page there); the animate flag rides the
{panel} post and the Mac shell eases its frame reveal/collapse natively, so
there's exactly one animation on every surface.

A replace-while-animating starts clean (inline styles reset on show), a
second Escape mid-roll-up is a no-op, and a new panel opening during a
close wins over the stale teardown (captured-spec check).

Co-Authored-By: Claude <noreply@anthropic.com>

* mac: reveal the panel by height, not insertion — kills the fade + size jump

The panel webview now mounts PERMANENTLY at height 0 once the thread's
command host exists, and the reveal animates only the frame height. Three
birds: inserting the view on open was what produced SwiftUI's default
opacity fade (a height ease can't happen across an insertion); a mounted
webview always has the pane's true width, so the page's first height
measure is right and the post-reveal correction disappears; and rendering
callbacks stay live. What correction remains (fonts/images landing) now
eases instead of snapping. Hidden, the frame is 0 with hit-testing and
accessibility off.

docs: the authoring guide's command-panels section now demonstrates the
generic shape — panel buttons dispatching typed events via ctx.emit, the
host-doorway rule for privileged work (gif's pattern), the native
WebPanelCommands step (+ shipping checklist item), and the animate flag.

Co-Authored-By: Claude <noreply@anthropic.com>

* web+mac: a subtle top border + shadow lifts the panel off the feed

The web .cmd-panel keeps its hairline and gains a soft shadow cast toward
the feed (upward for the composer placement, downward for position:"top",
via the theme's --shadow so it follows light/dark). The command-host page
stays chromeless — on the Mac the native frame is the panel's chrome: a
rounded hairline stroke + shadow on the webview, both fading with
visibility so the parked 0-height frame leaves no ghost line above the
composer. iOS inherits the web styling through its embedded feed.

Co-Authored-By: Claude <noreply@anthropic.com>

* test: fix the panel-guards call count the animate assertion shifted

The animate-passthrough open added a third host call; the close assertions
still expected two. Caught by the gif-animation agent running the suite on
this base branch (and missed here by misreading a grep count as clean).

Co-Authored-By: Claude <noreply@anthropic.com>

* web: move the gif app out of the defaults — apps-disabled/ is the install-it-yourself shelf

/gif is no longer a built-in: gif.js moves to web/static/apps-disabled/, a
sibling folder shell.js never imports, kept as the reference for the
INSTALLABLE app paths — paste its source into the Admin console's custom
apps and it runs for every member with full privileges (its "../apps.js"
import resolves identically from /static/apps-custom/, which is why the
folder is a sibling, not a child). The host-side pieces an installed copy
needs — hostBridge.gif and the *.giphy.com CSP entry — stay in the client.
Member-app (sandboxed) uploads deliberately can't run it: no network, no
host doorways, no panel plumbing in the cage. See apps-disabled/README.md.

WebPanelCommands drops /gif (the native typeahead shouldn't advertise a
command that only exists where an admin installed the app — dynamic
forwarding for installed panel commands is an open follow-up), and the
/gif changelog entry goes with it (not a default feature anymore).

Co-Authored-By: Claude <noreply@anthropic.com>

* GIFs animate in the feed; click to pause/resume (web + native Mac) (#506)

* web: click a GIF to pause/resume it in the feed

Animated GIFs already play in the web feed; the click now belongs to a
play/pause toggle instead of the lightbox (the message menu keeps the other
actions). Pausing swaps the img src for a canvas-rendered still of the first
frame; resuming restores the blob URL. prefers-reduced-motion starts GIFs
frozen. Non-GIF images keep the zoom-in lightbox click.

Co-Authored-By: Claude <noreply@anthropic.com>

* mac: animated GIFs play in the native feed; click toggles pause

BlobImageLoader's NSImage(data:) already keeps every GIF frame, so the Mac
feed now hosts image/gif attachments (with >1 frame) in an NSImageView with
animates on, behind a click-through hitTest so the SwiftUI tap toggle,
right-click menu and drag-out keep working. Click = play/pause, matching the
web; stills (and single-frame GIFs) keep the lightbox click. Reduced motion
(NSWorkspace) starts GIFs paused. iOS native-beta feed keeps stills for now —
the default iOS feed is the embedded web page, which the web change covers.

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

* web: gif back as a default (bring-your-own key); command panels reach member apps

Two halves:

/gif returns to the default set, reworked to ask for the member's OWN free
Giphy API key on first launch instead of shipping a hard-coded one: the
panel shows a key form (link to developers.giphy.com) until a key is saved,
hostBridge.gif stores it in this device's localStorage (a public client
identifier, never sent to the lchat server), search answers "key"/"auth"
reason strings so the form reappears exactly when the key is the problem,
and a footer "API key…" link changes it later. WebPanelCommands lists /gif
again and the changelog entry returns with the new wording.

Member apps get the command-panel plumbing — the declarative form, since a
render closure can't cross the sandbox bridge: a command calls
ctx.panel({ title, data }) and the app declares a top-level
panel(data, el, panelCtx) hook. The host mounts a FRESH /app-sandbox frame
inside the real panel (same opaque-origin, no-network cage; header + ✕ stay
host-drawn), inits it with { panel: { data } }, and the frame runs the hook
with panelCtx = ctx + { close, insertText }. Everything crossing is
validated JSON: sanitizePanelSpec (clamped title, whitelisted
position/animate, 64 KB data cap — field-wise, so unset options don't trip
the whole-object cleaner), emits ride the existing sanitize + rate limit,
inserts and size reports are clamped, panel frames' state reports are
ignored (the app-thread's own frame stays the single writer), and a panel
can only open while one of the app's commands is live (resolved by command
seq — "a response, not an ambush" holds for member apps too). The trusted
world gains the same declarative form (panelSpecFor), so one file runs
identically compiled-in or pasted into App Studio.

apps-disabled/mood.js is that file: /mood opens a five-button feeling panel;
a tap emits mood.set and closes. Verified end-to-end in Chromium: deployed
through App Studio's real path, /mood typed in a chat, the button clicked
INSIDE the sandboxed panel frame, the panel dismissed over the bridge, and
exactly one encrypted event landed in the app-thread. Docs: a Command
panels section in building-member-apps.md, the trust-model addendum in
member-apps.md, and the declarative form in the authoring guide.

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>