cli-jaw 2.17.62 → 2.17.63

package/public/manager/src/settings/pages/components/HeartbeatJobRow.tsx

@@ -5,9 +5,16 @@
 // array. Conditionally renders the schedule-body field based on
 // `schedule.kind` to avoid stale `cron` strings hanging around when
 // the user toggles to `every`, and vice versa.
+//
+// Layout follows the shared row language used by MCP servers and memory
+// entries: a `settings-card-actions` header (name + enabled/kind badges +
+// Remove) then the standard `.settings-field` rows. The component returns a
+// fragment so the header lands as a direct child of
+// `.settings-section-body` and picks up the standard item divider.
 
 import { useId } from 'react';
 import { TextField, ToggleField, SelectField } from '../../fields';
+import { StatusBadge } from '../page-shell';
 
 export type HbScheduleEvery = {
     kind: 'every';
@@ -56,15 +63,37 @@ export function HeartbeatJobRow({
     const idBase = useId();
     const kind = job.schedule.kind;
     const tz = job.schedule.timeZone ?? '';
+    const title = job.name || `Job ${index + 1}`;
 
     return (
-        <fieldset
-            className="settings-heartbeat-job"
+        <div
+            className="settings-card-group"
+            role="group"
             aria-label={`Heartbeat job ${index + 1}${job.name ? ` (${job.name})` : ''}`}
         >
-            <legend className="settings-heartbeat-job-legend">
-                {job.name || `Job ${index + 1}`}
-            </legend>
+            <div className="settings-card-actions">
+                <div className="settings-card-actions-status">
+                    <strong>{title}</strong>{' '}
+                    {job.enabled ? (
+                        <StatusBadge tone="ok">Enabled</StatusBadge>
+                    ) : (
+                        <StatusBadge tone="neutral">Disabled</StatusBadge>
+                    )}{' '}
+                    <StatusBadge tone="neutral">
+                        {kind === 'every' ? 'interval' : 'cron'}
+                    </StatusBadge>
+                </div>
+                <div className="settings-card-actions-buttons">
+                    <button
+                        type="button"
+                        className="settings-action settings-action-danger"
+                        onClick={onRemove}
+                        aria-label={`Remove heartbeat job ${title}`}
+                    >
+                        Remove job
+                    </button>
+                </div>
+            </div>
 
             <ToggleField
                 id={`${idBase}-enabled`}
@@ -184,16 +213,6 @@ export function HeartbeatJobRow({
                     onChange={(event) => onChange({ prompt: event.target.value })}
                 />
             </label>
-
-            <div className="settings-heartbeat-job-footer">
-                <button
-                    type="button"
-                    className="settings-action settings-action-discard"
-                    onClick={onRemove}
-                >
-                    Remove job
-                </button>
-            </div>
-        </fieldset>
+        </div>
     );
 }

package/public/manager/src/settings/pages/components/HeartbeatJobsSection.tsx

@@ -8,7 +8,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import type { DirtyStore, SettingsClient } from '../../types';
-import { PageError, PageOffline } from '../page-shell';
+import { PageError, PageOffline, SettingsActions, SettingsNote } from '../page-shell';
 import { HeartbeatJobRow, type HbJob } from './HeartbeatJobRow';
 import {
     jobScheduleBodyError,
@@ -77,7 +77,7 @@ export function HeartbeatJobsSection({ port, client, dirty, snapshot }: Props) {
     }, [client, dirty, jobs]);
 
     if (snapshot.kind === 'loading') {
-        return <p className="settings-section-hint">Loading jobs…</p>;
+        return <SettingsNote>Loading jobs…</SettingsNote>;
     }
     if (snapshot.kind === 'offline') return <PageOffline port={port} />;
     if (snapshot.kind === 'error') return <PageError message={snapshot.message} />;
@@ -98,11 +98,11 @@ export function HeartbeatJobsSection({ port, client, dirty, snapshot }: Props) {
     return (
         <>
             {jobs.length === 0 ? (
-                <p className="settings-section-hint">
+                <SettingsNote>
                     No jobs configured. Add one below.
-                </p>
+                </SettingsNote>
             ) : (
-                <div className="settings-heartbeat-jobs-list">
+                <>
                     {jobs.map((job, idx) => (
                         <HeartbeatJobRow
                             key={job.id}
@@ -113,12 +113,12 @@ export function HeartbeatJobsSection({ port, client, dirty, snapshot }: Props) {
                             onRemove={() => removeJob(idx)}
                         />
                     ))}
-                </div>
+                </>
             )}
-            <div className="settings-heartbeat-jobs-footer">
+            <SettingsActions>
                 <button
                     type="button"
-                    className="settings-action settings-action-discard"
+                    className="settings-action"
                     onClick={addJob}
                 >
                     + Add job
@@ -131,11 +131,11 @@ export function HeartbeatJobsSection({ port, client, dirty, snapshot }: Props) {
                 >
                     {saving ? 'Saving…' : 'Apply jobs'}
                 </button>
-            </div>
+            </SettingsActions>
             {error ? (
-                <p className="settings-field-error" role="alert">
+                <SettingsNote tone="error" role="alert">
                     {error}
-                </p>
+                </SettingsNote>
             ) : null}
         </>
     );

package/public/manager/src/settings/pages/components/HeartbeatMarkdownSection.tsx

@@ -6,7 +6,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import type { DirtyStore, SettingsClient } from '../../types';
-import { PageError, PageOffline } from '../page-shell';
+import { PageError, PageOffline, SettingsActions, SettingsNote } from '../page-shell';
 import type { SnapshotState } from '../page-shell';
 
 type Props = {
@@ -54,7 +54,7 @@ export function HeartbeatMarkdownSection({ port, client, dirty, snapshot }: Prop
     }, [client, dirty, content]);
 
     if (snapshot.kind === 'loading') {
-        return <p className="settings-section-hint">Loading template…</p>;
+        return <SettingsNote>Loading template…</SettingsNote>;
     }
     if (snapshot.kind === 'offline') return <PageOffline port={port} />;
     if (snapshot.kind === 'error') return <PageError message={snapshot.message} />;
@@ -71,10 +71,10 @@ export function HeartbeatMarkdownSection({ port, client, dirty, snapshot }: Prop
                     spellCheck={false}
                     value={content}
                     onChange={(event) => setContent(event.target.value)}
-                    style={{ fontFamily: 'ui-monospace, monospace' }}
+                    style={{ fontFamily: 'var(--font-mono, ui-monospace, monospace)' }}
                 />
             </label>
-            <div className="settings-heartbeat-md-footer">
+            <SettingsActions>
                 <button
                     type="button"
                     className="settings-action settings-action-save"
@@ -83,11 +83,11 @@ export function HeartbeatMarkdownSection({ port, client, dirty, snapshot }: Prop
                 >
                     {saving ? 'Saving…' : 'Save template'}
                 </button>
-            </div>
+            </SettingsActions>
             {error ? (
-                <p className="settings-field-error" role="alert">
+                <SettingsNote tone="error" role="alert">
                     {error}
-                </p>
+                </SettingsNote>
             ) : null}
         </>
     );

package/public/manager/src/settings/pages/components/InlineWarn.tsx

@@ -10,16 +10,11 @@ type Props = {
 };
 
 export function InlineWarn({ children, tone = 'warn', role = 'note' }: Props) {
-    const className = `settings-inline-warn settings-inline-warn-${tone}`;
-    if (role === 'alert') {
-        return (
-            <p className={className} role="alert">
-                {children}
-            </p>
-        );
-    }
+    const className = tone === 'warn'
+        ? 'settings-card-note settings-card-note-warn'
+        : 'settings-card-note settings-card-note-muted';
     return (
-        <p className={className} role="note">
+        <p className={className} role={role}>
             {children}
         </p>
     );

package/public/manager/src/settings/pages/components/McpServerCard.tsx

@@ -1,3 +1,8 @@
+// Single MCP server editor. Renders as shared card-body rows — a
+// `settings-card-actions` header (name + transport badge + remove) followed
+// by the standard `.settings-field` divided rows — so server entries read
+// like every other settings row instead of a bespoke card.
+
 import type { McpServer } from '../mcp-helpers';
 import {
     formatArgsText,
@@ -6,6 +11,7 @@ import {
     parseEnvText,
     getServerTag,
 } from '../mcp-helpers';
+import { StatusBadge } from '../page-shell';
 
 type Props = {
     name: string;
@@ -32,39 +38,45 @@ export function McpServerCard({
     const isRemote = tag === 'remote';
 
     return (
-        <article className="mcp-server-card" aria-label={`MCP server ${name || '(unnamed)'}`}>
-            <header className="mcp-server-card-header">
-                <label className="settings-field settings-field-text" htmlFor={`${id}-name`}>
-                    <span className="settings-field-label">Server name</span>
-                    <input
-                        id={`${id}-name`}
-                        type="text"
-                        value={name}
-                        spellCheck={false}
-                        placeholder="my-server"
-                        aria-invalid={Boolean(nameError)}
-                        onChange={(event) => onRename(event.target.value)}
-                    />
-                    {nameError ? (
-                        <span className="settings-field-error" role="alert">
-                            {nameError}
-                        </span>
-                    ) : null}
-                </label>
-                <div className="mcp-server-card-actions">
-                    {tag ? (
-                        <span className="mcp-server-tag" data-tag={tag}>[{tag}]</span>
-                    ) : null}
+        <>
+            <div
+                className="settings-card-actions"
+                role="group"
+                aria-label={`MCP server ${name || '(unnamed)'}`}
+            >
+                <div className="settings-card-actions-status">
+                    <strong>{name || '(unnamed)'}</strong>
+                    {tag ? <StatusBadge tone="neutral">{tag}</StatusBadge> : null}
+                </div>
+                <div className="settings-card-actions-buttons">
                     <button
                         type="button"
-                        className="settings-action settings-action-discard"
+                        className="settings-action settings-action-danger"
                         onClick={onRemove}
                         aria-label={`Remove ${name || 'server'}`}
                     >
                         Remove
                     </button>
                 </div>
-            </header>
+            </div>
+
+            <label className="settings-field settings-field-text" htmlFor={`${id}-name`}>
+                <span className="settings-field-label">Server name</span>
+                <input
+                    id={`${id}-name`}
+                    type="text"
+                    value={name}
+                    spellCheck={false}
+                    placeholder="my-server"
+                    aria-invalid={Boolean(nameError)}
+                    onChange={(event) => onRename(event.target.value)}
+                />
+                {nameError ? (
+                    <span className="settings-field-error" role="alert">
+                        {nameError}
+                    </span>
+                ) : null}
+            </label>
 
             {isRemote ? (
                 <>
@@ -142,6 +154,7 @@ export function McpServerCard({
             )}
 
             <label className="settings-field settings-field-toggle" htmlFor={`${id}-autostart`}>
+                <span className="settings-field-label">Autostart</span>
                 <input
                     id={`${id}-autostart`}
                     type="checkbox"
@@ -150,8 +163,7 @@ export function McpServerCard({
                         onChange({ ...server, autostart: event.target.checked })
                     }
                 />
-                <span className="settings-field-label">Autostart</span>
             </label>
-        </article>
+        </>
     );
 }

package/public/manager/src/settings/pages/components/MemoryRow.tsx

@@ -1,12 +1,15 @@
-// Phase 6 — single row in the Memory browse table.
+// Phase 6 — single row in the Memory browse list.
 //
-// Pure presentational. Clicking the row opens a read-only modal with
-// the full value. The modal is owned by the parent Memory page so
-// only one is mounted at a time and Esc/backdrop dismissal lives in
-// one place.
+// Pure presentational, rendered on the shared `settings-card-actions` row so
+// memory entries read like the other entity rows (MCP servers, heartbeat
+// jobs): key + source badge + length + preview on the left, Open on the
+// right. Clicking opens a read-only modal with the full value — the modal is
+// owned by the parent Memory page so only one is mounted at a time and
+// Esc/backdrop dismissal lives in one place.
 
 import type { MemoryEntry } from './memory-helpers';
 import { previewValue } from './memory-helpers';
+import { StatusBadge } from '../page-shell';
 
 type Props = {
     row: MemoryEntry;
@@ -15,22 +18,24 @@ type Props = {
 
 export function MemoryRow({ row, onOpen }: Props) {
     return (
-        <tr className="settings-memory-row">
-            <td className="settings-memory-key">
+        <div className="settings-card-actions">
+            <div className="settings-card-actions-status">
+                <strong><code>{row.key}</code></strong>{' '}
+                <StatusBadge tone="neutral">{row.source}</StatusBadge>{' '}
+                <span className="settings-field-hint">
+                    {row.value.length} chars · {previewValue(row.value)}
+                </span>
+            </div>
+            <div className="settings-card-actions-buttons">
                 <button
                     type="button"
-                    className="settings-memory-link"
+                    className="settings-action"
                     onClick={() => onOpen(row)}
                     aria-label={`Open memory entry ${row.key}`}
                 >
-                    {row.key}
+                    Open
                 </button>
-            </td>
-            <td className="settings-memory-source">{row.source}</td>
-            <td className="settings-memory-length">{row.value.length}</td>
-            <td className="settings-memory-preview" title={row.value}>
-                {previewValue(row.value)}
-            </td>
-        </tr>
+            </div>
+        </div>
     );
 }

package/public/manager/src/settings/pages/components/PerCliRow.tsx

@@ -3,6 +3,7 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import type { ComponentProps } from 'react';
 import { TextField, SelectField, ToggleField } from '../../fields';
+import { SettingsToolbar } from '../page-shell';
 import type { SettingsClient } from '../../types';
 import type { DirtyEntry, DirtyStore } from '../../types';
 import { coerceEffortForModel, effortChoicesForModel } from './agent/agent-meta';
@@ -57,137 +58,137 @@ export function PerCliRow({ cli, meta, original, value, setValue, setEntry, dirt
 
     return (
         <div className="settings-percli-row" data-cli={cli}>
-            <h3 className="settings-percli-title">{meta.label}</h3>
+            <SettingsToolbar>
+                <strong className="settings-percli-title">{meta.label}</strong>
+            </SettingsToolbar>
             <div className={`settings-percli-grid${isPi ? ' settings-percli-grid--pi' : ''}`}>
-                {isPi && piProfileOptions(pi, provider).length ? (
-                    <SelectField
-                        id={`percli-${cli}-provider`}
-                        label="Provider"
-                        disabled={disabled}
-                        value={provider}
-                        options={piProfileOptions(pi, provider).map((p) => ({ value: p, label: p }))}
-                        onChange={(next) => {
-                            if (blocked.current) return;
-                            const nextModels = piModelOptions(pi, next);
-                            const nextModel = nextModels.includes(value.model || '') ? (value.model || '') : (nextModels[0] || '');
-                            setValue({ ...value, provider: next, model: nextModel });
-                            setEntry(`perCli.${cli}.provider`, entryFor(next, original.provider ?? 'progrok'));
-                            setEntry(`perCli.${cli}.model`, entryFor(nextModel, original.model ?? ''));
-                        }}
-                    />
-                ) : hasProviders ? (
+            {isPi && piProfileOptions(pi, provider).length ? (
+                <SelectField
+                    id={`percli-${cli}-provider`}
+                    label="Provider"
+                    disabled={disabled}
+                    value={provider}
+                    options={piProfileOptions(pi, provider).map((p) => ({ value: p, label: p }))}
+                    onChange={(next) => {
+                        if (blocked.current) return;
+                        const nextModels = piModelOptions(pi, next);
+                        const nextModel = nextModels.includes(value.model || '') ? (value.model || '') : (nextModels[0] || '');
+                        setValue({ ...value, provider: next, model: nextModel });
+                        setEntry(`perCli.${cli}.provider`, entryFor(next, original.provider ?? 'progrok'));
+                        setEntry(`perCli.${cli}.model`, entryFor(nextModel, original.model ?? ''));
+                    }}
+                />
+            ) : hasProviders ? (
+                <SelectField
+                    id={`percli-${cli}-provider`}
+                    label="Provider"
+                    disabled={disabled}
+                    value={provider}
+                    options={(meta.providers ?? []).map((p) => ({ value: p, label: p }))}
+                    onChange={(next) => {
+                        if (blocked.current) return;
+                        const nextModels = meta.modelsByProvider?.[next] ?? [];
+                        const nextEfforts = meta.effortsByProvider?.[next] ?? [];
+                        const nextModel = nextModels.includes(value.model || '') ? (value.model || '') : (nextModels[0] || '');
+                        // Resolve against the NEW provider+model pair: the same
+                        // model id can allow different efforts per provider.
+                        const nextEffort = coerceEffortForModel(meta, nextModel, value.effort ?? '', nextEfforts, next);
+                        setValue({ ...value, provider: next, model: nextModel, effort: nextEffort });
+                        setEntry(`perCli.${cli}.provider`, entryFor(next, original.provider ?? meta.defaultProvider ?? 'claude'));
+                        setEntry(`perCli.${cli}.model`, entryFor(nextModel, original.model ?? ''));
+                        setEntry(`perCli.${cli}.effort`, entryFor(nextEffort, original.effort ?? ''));
+                    }}
+                />
+            ) : null}
+            {isPi && modelOptions.length > 0 ? (
+                <SelectField
+                    id={`percli-${cli}-model`}
+                    label="Model"
+                    disabled={disabled}
+                    value={value.model ?? modelOptions[0] ?? ''}
+                    options={modelOptions.map((m) => ({ value: m, label: m }))}
+                    onChange={(next) => {
+                        if (blocked.current) return;
+                        const nextEffort = coerceEffortForModel(meta, next, value.effort ?? '', providerEfforts, hasProviders ? provider : undefined);
+                        setValue({ ...value, model: next, effort: nextEffort });
+                        setEntry(`perCli.${cli}.model`, entryFor(next, original.model ?? ''));
+                        if (nextEffort !== (value.effort ?? '')) {
+                            setEntry(`perCli.${cli}.effort`, entryFor(nextEffort, original.effort ?? ''));
+                        }
+                    }}
+                />
+            ) : (
+                <TextField
+                    id={`percli-${cli}-model`}
+                    label="Model"
+                    disabled={disabled}
+                    value={value.model ?? ''}
+                    onChange={(next) => {
+                        if (blocked.current) return;
+                        setValue({ ...value, model: next });
+                        setEntry(`perCli.${cli}.model`, entryFor(next, original.model ?? ''));
+                    }}
+                    placeholder={modelOptions[0] ?? 'model id'}
+                />
+            )}
+            {meta.modelNote ? (
+                <p className="settings-percli-note">{meta.modelNote}</p>
+            ) : null}
+            {modelOptions.length > 0 ? (
+                <datalist id={modelDatalistId}>
+                    {modelOptions.map((m) => (
+                        <option key={m} value={m} />
+                    ))}
+                </datalist>
+            ) : null}
+            {effortOptions.length > 0 ? (
+                <div className="settings-percli-effort">
                     <SelectField
-                        id={`percli-${cli}-provider`}
-                        label="Provider"
+                        id={`percli-${cli}-effort`}
+                        label="Effort"
                         disabled={disabled}
-                        value={provider}
-                        options={(meta.providers ?? []).map((p) => ({ value: p, label: p }))}
+                        value={value.effort ?? ''}
+                        options={[
+                            { value: '', label: '(default)' },
+                            ...effortOptions.map((e) => ({ value: e, label: e })),
+                        ]}
                         onChange={(next) => {
                             if (blocked.current) return;
-                            const nextModels = meta.modelsByProvider?.[next] ?? [];
-                            const nextEfforts = meta.effortsByProvider?.[next] ?? [];
-                            const nextModel = nextModels.includes(value.model || '') ? (value.model || '') : (nextModels[0] || '');
-                            // Resolve against the NEW provider+model pair: the same
-                            // model id can allow different efforts per provider.
-                            const nextEffort = coerceEffortForModel(meta, nextModel, value.effort ?? '', nextEfforts, next);
-                            setValue({ ...value, provider: next, model: nextModel, effort: nextEffort });
-                            setEntry(`perCli.${cli}.provider`, entryFor(next, original.provider ?? meta.defaultProvider ?? 'claude'));
-                            setEntry(`perCli.${cli}.model`, entryFor(nextModel, original.model ?? ''));
-                            setEntry(`perCli.${cli}.effort`, entryFor(nextEffort, original.effort ?? ''));
+                            setValue({ ...value, effort: next });
+                            setEntry(`perCli.${cli}.effort`, entryFor(next, original.effort ?? ''));
                         }}
                     />
-                ) : null}
-                <div className="settings-percli-model">
-                    {isPi && modelOptions.length > 0 ? (
-                        <SelectField
-                            id={`percli-${cli}-model`}
-                            label="Model"
-                            disabled={disabled}
-                            value={value.model ?? modelOptions[0] ?? ''}
-                            options={modelOptions.map((m) => ({ value: m, label: m }))}
-                            onChange={(next) => {
-                                if (blocked.current) return;
-                                const nextEffort = coerceEffortForModel(meta, next, value.effort ?? '', providerEfforts, hasProviders ? provider : undefined);
-                                setValue({ ...value, model: next, effort: nextEffort });
-                                setEntry(`perCli.${cli}.model`, entryFor(next, original.model ?? ''));
-                                if (nextEffort !== (value.effort ?? '')) {
-                                    setEntry(`perCli.${cli}.effort`, entryFor(nextEffort, original.effort ?? ''));
-                                }
-                            }}
-                        />
-                    ) : (
-                        <TextField
-                            id={`percli-${cli}-model`}
-                            label="Model"
-                            disabled={disabled}
-                            value={value.model ?? ''}
-                            onChange={(next) => {
-                                if (blocked.current) return;
-                                setValue({ ...value, model: next });
-                                setEntry(`perCli.${cli}.model`, entryFor(next, original.model ?? ''));
-                            }}
-                            placeholder={modelOptions[0] ?? 'model id'}
-                        />
-                    )}
-                    {meta.modelNote ? (
-                        <p className="settings-percli-note">{meta.modelNote}</p>
-                    ) : null}
-                    {modelOptions.length > 0 ? (
-                        <datalist id={modelDatalistId}>
-                            {modelOptions.map((m) => (
-                                <option key={m} value={m} />
-                            ))}
-                        </datalist>
+                    {meta.effortNote ? (
+                        <p className="settings-percli-note">{meta.effortNote}</p>
                     ) : null}
                 </div>
-                {effortOptions.length > 0 ? (
-                    <div className="settings-percli-effort">
-                        <SelectField
-                            id={`percli-${cli}-effort`}
-                            label="Effort"
-                            disabled={disabled}
-                            value={value.effort ?? ''}
-                            options={[
-                                { value: '', label: '(default)' },
-                                ...effortOptions.map((e) => ({ value: e, label: e })),
-                            ]}
-                            onChange={(next) => {
-                                if (blocked.current) return;
-                                setValue({ ...value, effort: next });
-                                setEntry(`perCli.${cli}.effort`, entryFor(next, original.effort ?? ''));
-                            }}
-                        />
-                        {meta.effortNote ? (
-                            <p className="settings-percli-note">{meta.effortNote}</p>
-                        ) : null}
-                    </div>
-                ) : meta.effortNote ? (
-                    <p className="settings-percli-note settings-percli-note--effort">{meta.effortNote}</p>
-                ) : null}
-                {hasRuntimeTransportChoice(cli) ? (
-                    <RuntimeTransportField cli={cli} original={original.transport} dirty={dirty} disabled={disabled} setEntry={setEntry} />
-                ) : null}
-                <ToggleField
-                    id={`percli-${cli}-fastmode`}
-                    label="Fast mode"
+            ) : meta.effortNote ? (
+                <p className="settings-percli-note settings-percli-note--effort">{meta.effortNote}</p>
+            ) : null}
+            {hasRuntimeTransportChoice(cli) ? (
+                <RuntimeTransportField cli={cli} original={original.transport} dirty={dirty} disabled={disabled} setEntry={setEntry} />
+            ) : null}
+            <ToggleField
+                id={`percli-${cli}-fastmode`}
+                label="Fast mode"
+                disabled={disabled}
+                value={Boolean(value.fastMode)}
+                onChange={(next) => {
+                    if (blocked.current) return;
+                    setValue({ ...value, fastMode: next });
+                    setEntry(`perCli.${cli}.fastMode`, entryFor(next, Boolean(original.fastMode)));
+                }}
+            />
+            {isPi && client ? (
+                <button
+                    type="button"
+                    className="settings-action settings-percli-settings"
                     disabled={disabled}
-                    value={Boolean(value.fastMode)}
-                    onChange={(next) => {
-                        if (blocked.current) return;
-                        setValue({ ...value, fastMode: next });
-                        setEntry(`perCli.${cli}.fastMode`, entryFor(next, Boolean(original.fastMode)));
-                    }}
-                />
-                {isPi && client ? (
-                    <button
-                        type="button"
-                        className="settings-action"
-                        disabled={disabled}
-                        onClick={() => { if (!blocked.current) setPiDialogOpen(true); }}
-                    >
-                        Settings
-                    </button>
-                ) : null}
+                    onClick={() => { if (!blocked.current) setPiDialogOpen(true); }}
+                >
+                    Settings
+                </button>
+            ) : null}
             </div>
             {isPi && client && piDialogOpen ? (
                 <div inert={disabled} aria-busy={disabled}>