@1agh/maude 0.56.0 → 0.57.0

package/apps/studio/client/app.jsx

@@ -21,6 +21,11 @@ import { GRID_KEYWORD_UNITS, parseTrackList, serializeTrackList } from '../grid-
 // canvas-cursors.ts above.
 import { PAPER_PRESETS, resolvePrintArtboard } from '../print/units.ts';
 import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
+// The single "what is the hub link doing" rule, shared with the cloud rail's
+// connect note so the two surfaces can never disagree. Pure data + strings —
+// same "pull only pure logic into the client bundle" shape as the imports
+// above (a type-only SyncStatusSnapshot import that Bun erases).
+import { syncPresentation } from '../sync/presentation.ts';
 import { canvasUrl } from './canvas-url.js';
 import { TreeRowMenu, useRowMenu } from './tree-row-menu.jsx';
 import { useTreeDrag } from './use-tree-drag.js';
@@ -77,6 +82,7 @@ const Lu = ({ as: C, size = 14 }) => <C size={size} strokeWidth={1.75} style={{
 import { PhotoKnobs } from './photo-knobs.jsx';
 import {
   appIsFirstRun,
+  invoke,
   isNativeApp,
   onMenuReportBug,
   onUpdateReady,
@@ -203,14 +209,30 @@ const MDCC_VERSION = typeof __MDCC_VERSION__ !== 'undefined' ? __MDCC_VERSION__
 // handleAssistantAttention below (identical support/permission check +
 // try/catch, only the title/body differ). The in-app badge stays the
 // reliable signal if this silently fails for any reason.
+//
+// feature-acp-turn-notifications Task 6 — under Tauri, route through the
+// native `send_notification` command (notify.rs) instead of the Web `Notification` API.
+// This is the SAME native notifier the shell's cross-project poller uses for
+// every OTHER project, so the visible project now goes through the identical
+// OS-level path rather than a webview API whose behavior inside WKWebView was
+// never empirically confirmed (see Task 1's finding in the plan). Falls back
+// to the Web API on any failure — an older desktop build without the command,
+// or a plain browser tab — so the signal degrades rather than disappearing.
 function notifyDesktop(title, body) {
-  try {
-    if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
-      new Notification(title, { body });
+  const webFallback = () => {
+    try {
+      if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
+        new Notification(title, { body });
+      }
+    } catch {
+      /* best-effort — the in-app badge is the reliable signal */
     }
-  } catch {
-    /* best-effort — the in-app badge is the reliable signal */
+  };
+  if (isNativeApp()) {
+    invoke('send_notification', { title, body }).catch(webFallback);
+    return;
   }
+  webFallback();
 }
 
 function readInitialTheme() {
@@ -2473,6 +2495,9 @@ function Sidebar({
   onMoveCanvas,
   onNewFolder,
   onDeleteFolder,
+  // Passed through to CloudBar only — the live `sync:status` payload that makes
+  // the connect note follow the link instead of freezing at attach time.
+  syncStatus,
 }) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
@@ -2846,7 +2871,7 @@ function Sidebar({
           Absent rather than disabled, because unlike the agent chat there is
           nothing here to explain — the capability is not missing, it is
           already satisfied. */}
-      {cloud === null ? <CloudBar /> : null}
+      {cloud === null ? <CloudBar syncStatus={syncStatus} /> : null}
       {/* Phase 28 (E3) — GitHub identity as a compact avatar docked at the BOTTOM:
           sign in, connected account + New/Pull/Share, sign out. Self-contained
           (owns its device-code + CreateProject dialogs). Renders nothing in browser. */}
@@ -4537,6 +4562,7 @@ function StatusBar({
   onToggleTheme,
   onClearSelected,
   syncStatus,
+  syncProject,
   changesCount = 0,
   unpushed = 0,
   changesOpen = false,
@@ -4559,32 +4585,21 @@ function StatusBar({
   // shapes: solo `{linked:false}` (hide), DDR-060 `{notSyncable,tsxCount,reason}`
   // (linked but 0 syncable), or the connection-state machine `{state,queuedOps,
   // flash,…}` (the common linked case the old notSyncable-only guard never
-  // showed — the "hub sync se neukazuje" bug). Map each to a label + dot tone.
+  // showed — the "hub sync se neukazuje" bug).
+  //
+  // The mapping used to live here, and it referenced `docs` ZERO times: it read
+  // `state` alone, so a link whose every document the hub had refused still
+  // showed a green dot and the word "synced". `syncPresentation` is now the one
+  // rule, shared with the cloud rail's connect note, so the two surfaces cannot
+  // give a person different answers about the same payload.
   const syncSlot = (() => {
-    if (!syncStatus || syncStatus.linked === false) return null;
-    if (syncStatus.notSyncable) {
-      return {
-        online: false,
-        label: `0 syncable${syncStatus.tsxCount > 0 ? ` · ${syncStatus.tsxCount} tsx` : ''}`,
-        title: syncStatus.reason || 'Linked to a hub, but no canvases are syncable.',
-      };
-    }
-    const q = syncStatus.queuedOps ?? 0;
-    const synced = syncStatus.state === 'online' || syncStatus.flash === 'synced';
-    if (synced) {
-      return {
-        online: true,
-        label: q > 0 ? `${q} ↑` : 'synced',
-        title: q > 0 ? `${q} edit(s) queued to push` : 'All changes synced to the hub',
-      };
-    }
+    const p = syncPresentation(syncStatus, { project: syncProject });
+    if (!p) return null;
+    const detail = p.names.length ? ` (${p.names.join(', ')})` : '';
     return {
-      online: false,
-      label: `${q} ↑`,
-      title:
-        syncStatus.state === 'connecting'
-          ? 'Connecting to the hub…'
-          : 'Offline — edits queued, will sync when the hub reconnects',
+      online: p.online,
+      label: p.label,
+      title: `${p.title}${detail}${p.next ? ` — ${p.next}` : ''}`,
     };
   })();
 
@@ -14087,6 +14102,7 @@ function App() {
           remoteSync={remoteSync}
           onGetLatest={gitGetLatest}
           canvasKinds={cfg?.canvasKinds}
+          syncStatus={syncStatus}
         />
       );
     if (id === 'changes')
@@ -15147,6 +15163,7 @@ function App() {
           onToggleTheme={toggleTheme}
           onClearSelected={clearSelected}
           syncStatus={syncStatus}
+          syncProject={cfg?.cloud?.projectName || project}
           changesCount={unsavedCount}
           unpushed={gitStatus?.unpushed || 0}
           changesOpen={changesOpen}

package/apps/studio/client/panels/ChatPanel.jsx

@@ -1855,6 +1855,11 @@ export default function ChatPanel({
   const connsRef = useRef(new Map()); // chatId → connection
   const busyRef = useRef(new Map()); // chatId → busy (aggregated for the menubar)
   const hydratedRef = useRef(new Map()); // chatId → initial messages
+  // chatId → the transcript LINE the hydration above covered (the
+  // `X-Maude-Chat-Seq` response header). Handed to the connection's `attach`
+  // so the server replays only what the client missed — Addendum Task 8's
+  // re-attach seam. Absent/0 for a chat that was never hydrated (a new chat).
+  const hydratedSeqRef = useRef(new Map());
   const [openChatIds, setOpenChatIds] = useState([]);
   const [activeChatId, setActiveChatId] = useState(null);
   const [busyChats, setBusyChats] = useState({}); // reactive: chatId → busy (for the dot)
@@ -1872,6 +1877,13 @@ export default function ChatPanel({
       const existing = connsRef.current.get(chatId);
       if (existing) return existing;
       const conn = createAcpConnection();
+      // Addendum Task 8 — bind BEFORE anything can open the socket. The `attach`
+      // frame goes out from `onopen` and is what subscribes this socket to the
+      // chat's server-side bridge (which now outlives its socket, so it may
+      // already be mid-turn from before a reload). `hydratedSeqRef` holds the
+      // transcript line the history fetch covered, so the server replays exactly
+      // the gap — no duplicated tail, no hole.
+      conn.bindChat(chatId, hydratedSeqRef.current.get(chatId) || 0);
       connsRef.current.set(chatId, conn);
       // Agent-generated title (session_info_update — fires at turn-end, so a
       // fresh chat shows the client's "New chat" heuristic until the first
@@ -1949,7 +1961,12 @@ export default function ChatPanel({
         return;
       }
       fetch(`/_api/acp/chat?id=${encodeURIComponent(id)}`)
-        .then((r) => r.json())
+        .then(async (r) => {
+          // Capture the seam marker alongside the body — see hydratedSeqRef.
+          const seq = Number(r.headers.get('X-Maude-Chat-Seq') || 0);
+          hydratedSeqRef.current.set(id, Number.isFinite(seq) ? seq : 0);
+          return r.json();
+        })
         .then((msgs) => openChat(id, toThreadMessages(msgs)))
         .catch(() => {});
     },
@@ -1965,6 +1982,7 @@ export default function ChatPanel({
       connsRef.current.delete(id);
       busyRef.current.delete(id);
       hydratedRef.current.delete(id);
+      hydratedSeqRef.current.delete(id);
       setBusyChats((prev) => {
         const next = { ...prev };
         delete next[id];

package/apps/studio/client/panels/CloudBar.jsx

@@ -14,6 +14,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
+import { safeName, syncPresentation } from '../../sync/presentation.ts';
 import { invoke, isNativeApp, listen, openCloudUrl } from '../github.js';
 
 const api = async (path, init) => {
@@ -261,24 +262,56 @@ export function localIdentityHint({
  * Returns `{ text, title }` — `text` is the rail's one line, `title` the full
  * sentence on hover (the rail truncates).
  */
-export function connectOutcomeNote(project, sync) {
-  const name = project || 'the workspace';
+export function connectOutcomeNote(project, sync, live) {
+  // The project name and `sync.detail` both originate at the hub, and the
+  // fallback path below puts them in trusted app chrome uncapped — including a
+  // `title=` tooltip, where a newline renders. `safeName` strips control and
+  // bidi-override characters, collapses whitespace and bounds the length; the
+  // live path already went through it inside `syncPresentation`.
+  const name = safeName(project, 'the workspace');
+
+  // The LIVE payload wins whenever there is one.
+  //
+  // `sync` is the attach response, and it reports an intention: the supervisor
+  // answers `{ syncing: true }` as soon as `runtime.start()` did not throw and
+  // one local canvas qualified — before a socket, before a token was accepted,
+  // before a byte moved. Rendered once and never updated, it was the whole of
+  // the reported complaint ("vyskočí modal, pak vidím jen syncing canvases, ale
+  // reálně se nic nestane"). `live` comes off the `sync:status` bus that is
+  // already wired to this app, so the same sentence now MOVES: connecting →
+  // syncing 40/75 → synced. That motion is the feedback that was missing.
+  //
+  // Same rule as the status bar (`syncPresentation`), deliberately — the old
+  // hover text told the person to go look at that slot for the real answer,
+  // which only worked as long as the two agreed, and they did not.
+  if (live) {
+    const p = syncPresentation(live, { project: name });
+    if (p) {
+      const detail = p.names.length ? ` (${p.names.join(', ')})` : '';
+      return {
+        text: p.title,
+        title: `${p.title}${detail}${p.next ? ` — ${p.next}` : ''}`,
+      };
+    }
+  }
+
   if (sync?.syncing) {
     const n = sync.canvases ?? 0;
     return {
-      text: `Syncing with ${name} — ${n} canvas${n === 1 ? '' : 'es'}.`,
-      title: `This project’s canvases now sync with the ${name} workspace. Live status is in the “hub sync” slot in the status bar.`,
+      text: `Connecting to ${name} — ${n} canvas${n === 1 ? '' : 'es'}…`,
+      title: `Opening ${n} canvas${n === 1 ? '' : 'es'} against the ${name} workspace. This line updates as they settle.`,
     };
   }
   if (sync?.reason === 'nothing-syncable') {
     return {
       text: `Connected to ${name} — nothing to sync yet.`,
-      title: sync.detail || 'No canvases in this project are syncable yet.',
+      title: safeName(sync.detail, 'No canvases in this project are syncable yet.'),
     };
   }
+  const detail = safeName(sync?.detail, 'restart Maude to start syncing.');
   return {
-    text: `Connected to ${name} — ${sync?.detail ?? 'restart Maude to start syncing.'}`,
-    title: sync?.detail || 'Restart Maude to start syncing.',
+    text: `Connected to ${name} — ${detail}`,
+    title: detail,
   };
 }
 
@@ -336,14 +369,21 @@ function Icon({ name, size = 15 }) {
   );
 }
 
-export default function CloudBar() {
+export default function CloudBar({ syncStatus }) {
   const [state, setState] = useState('loading'); // loading | out | in
   const [email, setEmail] = useState(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const [device, setDevice] = useState(null); // { userCode, verificationUrl, deviceCode }
   const [projects, setProjects] = useState(null);
   const [busy, setBusy] = useState('');
-  const [note, setNote] = useState(null); // { text, title } — connectOutcomeNote
+  // What the last Connect attached, NOT the sentence it produced.
+  //
+  // This used to hold the rendered `{ text, title }`, which is why the note was
+  // frozen: a string computed once at the moment the dialog closed could only
+  // ever describe that moment. Keeping the INPUTS and deriving the sentence on
+  // every render is the whole liveness mechanism — `syncStatus` arrives on the
+  // already-wired `sync:status` bus, so no polling and no second fetch.
+  const [connected, setConnected] = useState(null); // { project, sync }
   const [error, setError] = useState('');
   const [copied, setCopied] = useState(false);
   const [copiedLink, setCopiedLink] = useState(false);
@@ -356,6 +396,15 @@ export default function CloudBar() {
   const railRef = useRef(null);
   const pollRef = useRef(null);
 
+  // Derived, not stored — so the sentence follows the link instead of freezing
+  // at the instant the confirm dialog closed. `syncStatus` is the live payload
+  // App already receives; when it is absent (older server, first render) the
+  // attach response is still the fallback and the note degrades to what it
+  // said before, never to nothing.
+  const note = connected
+    ? connectOutcomeNote(connected.project, connected.sync, syncStatus)
+    : null;
+
   useEffect(() => {
     api('/_api/cloud/status')
       .then((r) => {
@@ -426,7 +475,7 @@ export default function CloudBar() {
     setBusy('');
     setPending(null);
     if (r.ok && r.json?.ok) {
-      setNote(connectOutcomeNote(r.json.project ?? pending.project, r.json.sync));
+      setConnected({ project: r.json.project ?? pending.project, sync: r.json.sync });
     } else {
       setError(r.json?.error || 'The workspace could not be connected.');
     }
@@ -503,7 +552,7 @@ export default function CloudBar() {
 
   async function connect(projectId) {
     setBusy(projectId);
-    setNote(null);
+    setConnected(null);
     setError('');
     const r = await api('/_api/cloud/attach', {
       method: 'POST',
@@ -512,7 +561,7 @@ export default function CloudBar() {
     });
     setBusy('');
     if (r.ok && r.json?.ok) {
-      setNote(connectOutcomeNote(r.json.project ?? projectId, r.json.sync));
+      setConnected({ project: r.json.project ?? projectId, sync: r.json.sync });
     } else {
       setError(r.json?.error || 'The workspace could not be connected.');
     }
@@ -705,8 +754,18 @@ export default function CloudBar() {
             <span className="gi-rail-login">{email ?? 'Maude Cloud'}</span>
             <span className="gi-rail-caret"><Icon name="chevron-up" size={13} /></span>
           </button>
+          {/* A live region: the sentence now CHANGES as the link settles, and a
+              screen-reader user has to hear that transition rather than only
+              whatever text happened to be there when they last tabbed past.
+              `polite` — it is progress, never an interruption. */}
           {note && (
-            <span className="gi-rail-hint" title={note.title} data-testid="cloud-connect-note">
+            <span
+              className="gi-rail-hint"
+              title={note.title}
+              role="status"
+              aria-live="polite"
+              data-testid="cloud-connect-note"
+            >
               {note.text}
             </span>
           )}

package/apps/studio/client/panels/PermissionPrompt.jsx

@@ -54,10 +54,102 @@ export function pickDefaultReject(options) {
   return list.find((o) => o?.kind === 'reject_once' || o?.kind === 'reject_always') ?? null;
 }
 
+// feature-acp-write-path-scope Task 4 — the out-of-project write case.
+//
+// `scope` is attached by the SERVER (bridge.ts `classifyWrite` → index.ts's
+// `permission-request` frame) and only ever for a write tool the path gate
+// refused to auto-approve. Everything this renders comes from that payload: the
+// paths are the bridge's REALPATH-RESOLVED absolutes, never `toolCall.rawInput`,
+// because the model's own string is what makes the write look harmless
+// (`docs/../../../.zshenv` reads as a docs edit). Same lesson as the deep-link
+// modal's truncated project name.
+//
+// Exported pure so the copy is unit-testable without rendering (mirrors
+// pickDefaultAllow's rationale — the affordance IS the security control here).
+// SECURITY (security-auditor F3) — the resolved path is REAL filesystem data,
+// but its non-existent tail is whatever the model asked to create, so it is
+// attacker-influenced text rendered in the one card whose entire job is to be
+// read accurately. React escapes markup; it does NOT neutralize bidi overrides
+// or C0 controls, so `~/safe/‮gnp.esriv/…` can be made to READ as a
+// harmless path while resolving somewhere else entirely.
+//
+// Stripped at RENDER time rather than in the frame: the frame should carry the
+// true path (it is also an audit record), and only the display needs to be
+// unspoofable. Replaced with U+FFFD rather than deleted so a tampered path is
+// visibly odd instead of silently shorter.
+// Written as \u escapes, never literal characters (security-auditor F3 nit) —
+// the same reasoning applied to the tests: a literal RLO in this source would
+// reorder THIS FILE in every editor and code-review diff that renders it.
+//   \p{Cc}          C0/C1 controls (newline, CR, NUL — hide a whole segment)
+//   202A-202E,2066-2069  bidi embeddings/overrides/isolates (visual reversal)
+//   200E,200F,061C  LRM/RLM/ALM — directional marks, same class of trick
+//   200B-200D,FEFF  zero-width space/non-joiner/joiner/BOM (invisible splits)
+//   00AD            soft hyphen (invisible, but may render as a break)
+const UNSAFE_DISPLAY =
+  /[\p{Cc}\u202A-\u202E\u2066-\u2069\u200E\u200F\u061C\u200B-\u200D\uFEFF\u00AD]/gu;
+export function sanitizePathForDisplay(p) {
+  return String(p).replace(UNSAFE_DISPLAY, '�');
+}
+
+export function describeOutOfProject(scope) {
+  if (!scope || scope.outOfProjectWrite !== true) return null;
+  const paths = Array.isArray(scope.resolvedPaths)
+    ? scope.resolvedPaths.filter(Boolean).map(sanitizePathForDisplay)
+    : [];
+  const lead =
+    scope.reason === 'no-target'
+      ? 'Claude asked to write a file but did not say which one.'
+      : scope.reason === 'disagreement'
+        ? 'Claude named two different files for one write.'
+        : // `in-project-denied` is INSIDE the project — saying "outside" would be
+          // a plain lie, and the reason it's being asked about is different in
+          // kind: not "where is this going" but "this file runs".
+          scope.reason === 'in-project-denied'
+          ? 'This file is part of how your project RUNS, not part of its design.'
+          : paths.length > 1
+            ? 'Claude wants to write files outside this project.'
+            : 'Claude wants to write a file outside this project.';
+  return {
+    lead,
+    paths,
+    scopeRoot: typeof scope.scopeRoot === 'string' ? sanitizePathForDisplay(scope.scopeRoot) : '',
+    // Decision D — the server already stripped every `allow_always` option, so
+    // there is no "always allow" to explain away. Say so, rather than leaving
+    // the user wondering where the usual option went.
+    note: 'This is allowed once, for this request only.',
+    /** Inside the project, but denied for an execution reason — the copy above
+     *  must not claim "outside". */
+    inProjectDenied: scope.reason === 'in-project-denied',
+  };
+}
+
+// Decision D is enforced SERVER-side (bridge.ts filters `allow_always` out of
+// the offered set, and validates a response against that same filtered set).
+// This is a second, client-side pass purely so a stale/racing frame can never
+// paint a button that the server would reject anyway — belt-and-braces, not the
+// control itself.
+function visibleOptions(options, outOfProject) {
+  const list = Array.isArray(options) ? options : [];
+  return outOfProject ? list.filter((o) => o?.kind !== 'allow_always') : list;
+}
+
 export default function PermissionPrompt({ request, onRespond, queueLength = 1 }) {
   const cardRef = useRef(null);
-  const { toolCall, options } = request;
+  const { toolCall } = request;
   const target = toolTarget(toolCall);
+  const outOfProject = describeOutOfProject(request.scope);
+  const options = visibleOptions(request.options, !!outOfProject);
+  // See the header comment in the JSX below for why an out-of-project write
+  // gets a substituted headline + target instead of the adapter's own.
+  const headline =
+    request.scope?.reason === 'in-project-denied'
+      ? 'Write to a file that runs'
+      : 'Write outside this project';
+  const headerTarget = outOfProject
+    ? outOfProject.paths.length === 1
+      ? String(outOfProject.paths[0]).split('/').pop()
+      : null
+    : target;
 
   const firstAllow = pickDefaultAllow(options);
   const firstReject = pickDefaultReject(options);
@@ -81,16 +173,33 @@ export default function PermissionPrompt({ request, onRespond, queueLength = 1 }
 
   return (
     <div
-      className="chat-perm"
+      className={'chat-perm' + (outOfProject ? ' chat-perm--outside' : '')}
       role="alertdialog"
-      aria-label="Permission request"
+      aria-label={
+        outOfProject
+          ? outOfProject.inProjectDenied
+            ? 'Permission request — file that runs code'
+            : 'Permission request — file outside this project'
+          : 'Permission request'
+      }
       tabIndex={-1}
       ref={cardRef}
       data-testid="chat-permission-prompt"
     >
       <div className="chat-perm-hd">
-        <b title={toolCall?.title || 'Tool call'}>{toolCall?.title || 'Tool call'}</b>
-        {target ? <span className="chat-tool-path">{target}</span> : null}
+        {/* SECURITY (feature-acp-write-path-scope Task 4) — for an out-of-project
+            write the header must NOT echo `toolCall.title`/`rawInput`. Both are
+            built from the model's own path string, and the adapter passes it
+            through verbatim (see acp/write-scope.ts's measured contract), so the
+            title of a write to `~/.zshenv` reads literally "Write
+            docs/../../../.zshenv" — a docs edit, to any human skimming the
+            header. The card's whole job is to be read; a truthful body under a
+            misleading headline is worse than no headline. Substitute a fixed
+            label + the RESOLVED basename, and let the body carry the full path. */}
+        <b title={outOfProject ? headline : toolCall?.title || 'Tool call'}>
+          {outOfProject ? headline : toolCall?.title || 'Tool call'}
+        </b>
+        {headerTarget ? <span className="chat-tool-path">{headerTarget}</span> : null}
         {/* SECURITY (ethical-hacker finding) — a growing backlog was
             invisible (always "1 of 1"), which is what manufactures the
             reflexive-Enter-mashing precondition the wrong-default bug
@@ -101,7 +210,38 @@ export default function PermissionPrompt({ request, onRespond, queueLength = 1 }
           </span>
         ) : null}
       </div>
-      <p className="chat-perm-body">Claude wants permission to continue. Choose an option:</p>
+      {outOfProject ? (
+        <div className="chat-perm-outside" data-testid="chat-perm-outside">
+          <p className="chat-perm-body">{outOfProject.lead}</p>
+          {outOfProject.paths.length > 0 ? (
+            <ul className="chat-perm-paths" data-testid="chat-perm-paths">
+              {outOfProject.paths.map((p) => (
+                <li key={p} className="chat-perm-path">
+                  {p}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          {outOfProject.scopeRoot ? (
+            <p className="chat-perm-scope">
+              {outOfProject.inProjectDenied ? (
+                <>
+                  Git hooks and Claude settings can execute code later, so Maude asks even
+                  though they live inside this project.
+                </>
+              ) : (
+                <>
+                  This project is <span className="chat-perm-root">{outOfProject.scopeRoot}</span>.
+                  Edits inside it never ask.
+                </>
+              )}
+            </p>
+          ) : null}
+          <p className="chat-perm-note">{outOfProject.note}</p>
+        </div>
+      ) : (
+        <p className="chat-perm-body">Claude wants permission to continue. Choose an option:</p>
+      )}
       <div className="chat-perm-actions">
         {options.map((o) => (
           <button