cli-jaw 2.17.62 → 2.17.63

package/public/manager/src/settings/pages/Mcp.tsx

@@ -5,10 +5,13 @@ import {
     PageError,
     PageLoading,
     PageOffline,
+    SettingsActions,
+    SettingsNote,
     SettingsSection,
+    SettingsToolbar,
+    StatusBadge,
     usePageSnapshot,
 } from './page-shell';
-import { InlineWarn } from './components/InlineWarn';
 import { McpServerCard } from './components/McpServerCard';
 import {
     countInstallBundleCandidates,
@@ -337,46 +340,44 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                 title="MCP servers"
                 hint="Edit each server's command/args/env. Save writes back to mcp.json; Sync pushes the saved config to all CLIs."
             >
-                <div className="mcp-servers-list">
-                    {order.length === 0 && (
-                        <p className="settings-section-hint">
-                            No servers configured. Add one or run <code>Reset to defaults</code>.
-                        </p>
-                    )}
-                    {order.map((name) => {
-                        const srv = draft.servers[name] ?? makeEmptyServer();
-                        const lower = name.toLowerCase();
-                        const isDupe = duplicates.has(lower);
-                        const validation = validateServer(name, srv);
-                        const error = isDupe
-                            ? 'Duplicate server name (case-insensitive).'
-                            : validation.kind === 'invalid'
-                                ? validation.reason
-                                : null;
-                        return (
-                            <McpServerCard
-                                key={name}
-                                name={name}
-                                server={srv}
-                                onRename={(next) => onRenameServer(name, next)}
-                                onChange={(next) => onChangeServer(name, next)}
-                                onRemove={() => onRemoveServer(name)}
-                                nameError={error}
-                            />
-                        );
-                    })}
-                </div>
+                {order.length === 0 && (
+                    <SettingsNote>
+                        No servers configured. Add one or run <code>Reset to defaults</code>.
+                    </SettingsNote>
+                )}
+                {order.map((name) => {
+                    const srv = draft.servers[name] ?? makeEmptyServer();
+                    const lower = name.toLowerCase();
+                    const isDupe = duplicates.has(lower);
+                    const validation = validateServer(name, srv);
+                    const error = isDupe
+                        ? 'Duplicate server name (case-insensitive).'
+                        : validation.kind === 'invalid'
+                            ? validation.reason
+                            : null;
+                    return (
+                        <McpServerCard
+                            key={name}
+                            name={name}
+                            server={srv}
+                            onRename={(next) => onRenameServer(name, next)}
+                            onChange={(next) => onChangeServer(name, next)}
+                            onRemove={() => onRemoveServer(name)}
+                            nameError={error}
+                        />
+                    );
+                })}
                 {hasDupes && (
-                    <InlineWarn role="alert">
+                    <SettingsNote tone="error" role="alert">
                         Duplicate server name{dupeNames.length === 1 ? '' : 's'}: {dupeNames.join(', ')}.
                         Saving is blocked until names are unique.
-                    </InlineWarn>
+                    </SettingsNote>
                 )}
                 {hasFieldErrors && !hasDupes && (
-                    <InlineWarn role="alert">
+                    <SettingsNote tone="error" role="alert">
                         Some servers have errors (missing command/URL or invalid name).
                         Saving is blocked until they are fixed.
-                    </InlineWarn>
+                    </SettingsNote>
                 )}
             </SettingsSection>
 
@@ -384,7 +385,15 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                 title="Actions"
                 hint="These act on the saved config. Save edits first if you want them included."
             >
-                <div className="mcp-action-buttons">
+                <SettingsActions
+                    status={
+                        actionState.kind === 'pending' ? (
+                            <span role="status">{actionState.label}…</span>
+                        ) : actionState.kind === 'success' ? (
+                            <span role="status">{actionState.message}</span>
+                        ) : undefined
+                    }
+                >
                     <button
                         type="button"
                         className="settings-action"
@@ -410,7 +419,7 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     </button>
                     <button
                         type="button"
-                        className="settings-action settings-action-discard"
+                        className="settings-action settings-action-danger"
                         disabled={actionState.kind === 'pending'}
                         onClick={() => {
                             if (
@@ -424,15 +433,9 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     >
                         Reset to defaults
                     </button>
-                </div>
-                {actionState.kind === 'pending' && (
-                    <p className="settings-section-hint" role="status">{actionState.label}…</p>
-                )}
-                {actionState.kind === 'success' && (
-                    <p className="settings-section-hint" role="status">{actionState.message}</p>
-                )}
+                </SettingsActions>
                 {actionState.kind === 'error' && (
-                    <InlineWarn role="alert">{actionState.message}</InlineWarn>
+                    <SettingsNote tone="error" role="alert">{actionState.message}</SettingsNote>
                 )}
             </SettingsSection>
 
@@ -458,183 +461,200 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     />
                 )}
                 {!isValid && (
-                    <p className="settings-section-hint">
+                    <SettingsNote>
                         Save is disabled while validation errors are present.
-                    </p>
+                    </SettingsNote>
                 )}
             </SettingsSection>
 
             {modalOpen && (
-                <div className="mcp-modal-backdrop" onClick={closeModal}>
+                <div
+                    className="settings-memory-modal settings-pi-modal"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-label="MCP Server Management"
+                    onClick={closeModal}
+                >
                     <div
-                        className="mcp-modal"
-                        role="dialog"
-                        aria-modal="true"
-                        aria-label="MCP Server Management"
+                        className="settings-memory-modal-card"
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <div className="mcp-modal-tabs">
+                        <header className="settings-memory-modal-header">
+                            <h3>MCP servers</h3>
                             <button
                                 type="button"
-                                className={`mcp-modal-tab${modalTab === 'active' ? ' is-active' : ''}`}
+                                className="settings-action"
+                                onClick={closeModal}
+                            >
+                                Close
+                            </button>
+                        </header>
+
+                        <SettingsToolbar>
+                            <button
+                                type="button"
+                                aria-pressed={modalTab === 'active'}
+                                className="settings-action"
                                 onClick={() => setModalTab('active')}
                             >
                                 Active Servers
                             </button>
                             <button
                                 type="button"
-                                className={`mcp-modal-tab${modalTab === 'add' ? ' is-active' : ''}`}
+                                aria-pressed={modalTab === 'add'}
+                                className="settings-action"
                                 onClick={() => { setModalTab('add'); resetAddForm(); }}
                             >
                                 Add New
                             </button>
-                        </div>
-
-                        <div className="mcp-modal-body">
-                            {modalTab === 'active' && (
-                                <div className="mcp-active-list">
-                                    {Object.keys(original.servers).length === 0 && (
-                                        <p className="settings-section-hint">No active MCP servers.</p>
-                                    )}
-                                    {Object.entries(original.servers).map(([name, srv]) => {
-                                        const tag = getServerTag(srv);
-                                        return (
-                                            <div key={name} className="mcp-active-row">
-                                                <span className="mcp-active-name">{name}</span>
-                                                <span className="mcp-active-detail">
-                                                    {srv.url || [srv.command, ...(srv.args || [])].filter(Boolean).join(' ')}
-                                                </span>
-                                                {tag && <span className="mcp-server-tag" data-tag={tag}>[{tag}]</span>}
-                                                <button
-                                                    type="button"
-                                                    className="settings-action settings-action-discard mcp-active-remove"
-                                                    onClick={() => void handleRemoveFromModal(name)}
-                                                >
-                                                    Remove
-                                                </button>
-                                            </div>
-                                        );
-                                    })}
-                                </div>
-                            )}
-
-                            {modalTab === 'add' && (
-                                <div className="mcp-add-form">
-                                    <div className="mcp-add-subtabs">
-                                        <button
-                                            type="button"
-                                            className={`mcp-modal-tab${addSubTab === 'local' ? ' is-active' : ''}`}
-                                            onClick={() => setAddSubTab('local')}
-                                        >
-                                            Local
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className={`mcp-modal-tab${addSubTab === 'remote' ? ' is-active' : ''}`}
-                                            onClick={() => setAddSubTab('remote')}
-                                        >
-                                            Remote
-                                        </button>
-                                    </div>
-
-                                    <label className="settings-field settings-field-text">
-                                        <span className="settings-field-label">Name</span>
-                                        <input
-                                            type="text"
-                                            value={addName}
-                                            placeholder="my-server"
-                                            spellCheck={false}
-                                            onChange={(e) => setAddName(e.target.value)}
-                                        />
-                                    </label>
-
-                                    {addSubTab === 'local' ? (
-                                        <>
-                                            <label className="settings-field settings-field-text">
-                                                <span className="settings-field-label">Command</span>
-                                                <input
-                                                    type="text"
-                                                    value={addCommand}
-                                                    placeholder="npx"
-                                                    spellCheck={false}
-                                                    onChange={(e) => setAddCommand(e.target.value)}
-                                                />
-                                            </label>
-                                            <label className="settings-field settings-field-text">
-                                                <span className="settings-field-label">Args (one per line)</span>
-                                                <textarea
-                                                    value={addArgs}
-                                                    rows={3}
-                                                    spellCheck={false}
-                                                    placeholder="-y&#10;@upstash/context7-mcp"
-                                                    onChange={(e) => setAddArgs(e.target.value)}
-                                                />
-                                            </label>
-                                            <label className="settings-field settings-field-text">
-                                                <span className="settings-field-label">Env (KEY=value per line)</span>
-                                                <textarea
-                                                    value={addEnv}
-                                                    rows={2}
-                                                    spellCheck={false}
-                                                    onChange={(e) => setAddEnv(e.target.value)}
-                                                />
-                                            </label>
-                                        </>
-                                    ) : (
-                                        <>
-                                            <label className="settings-field settings-field-text">
-                                                <span className="settings-field-label">URL</span>
-                                                <input
-                                                    type="text"
-                                                    value={addUrl}
-                                                    placeholder="https://mcp.example.com/sse"
-                                                    spellCheck={false}
-                                                    onChange={(e) => setAddUrl(e.target.value)}
-                                                />
-                                            </label>
-                                            <label className="settings-field settings-field-text">
-                                                <span className="settings-field-label">Headers (KEY=value per line)</span>
-                                                <textarea
-                                                    value={addHeaders}
-                                                    rows={2}
-                                                    spellCheck={false}
-                                                    onChange={(e) => setAddHeaders(e.target.value)}
-                                                />
-                                            </label>
-                                        </>
-                                    )}
-
-                                    {addError && <InlineWarn role="alert">{addError}</InlineWarn>}
-
-                                    <div className="mcp-add-actions">
-                                        <button
-                                            type="button"
-                                            className="settings-action"
-                                            onClick={closeModal}
-                                        >
-                                            Cancel
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className="settings-action"
-                                            disabled={addPending}
-                                            onClick={() => void handleAddAndSync()}
+                        </SettingsToolbar>
+
+                        {modalTab === 'active' && (
+                            <>
+                                {Object.keys(original.servers).length === 0 && (
+                                    <SettingsNote>No active MCP servers.</SettingsNote>
+                                )}
+                                {Object.entries(original.servers).map(([name, srv]) => {
+                                    const tag = getServerTag(srv);
+                                    return (
+                                        <SettingsActions
+                                            key={name}
+                                            status={
+                                                <>
+                                                    <strong>{name}</strong>{' '}
+                                                    <code>
+                                                        {srv.url || [srv.command, ...(srv.args || [])].filter(Boolean).join(' ')}
+                                                    </code>{' '}
+                                                    {tag ? <StatusBadge tone="neutral">{tag}</StatusBadge> : null}
+                                                </>
+                                            }
                                         >
-                                            {addPending ? 'Adding…' : 'Add & Sync'}
-                                        </button>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-
-                        <button
-                            type="button"
-                            className="mcp-modal-close"
-                            aria-label="Close"
-                            onClick={closeModal}
-                        >
-                            &times;
-                        </button>
+                                            <button
+                                                type="button"
+                                                className="settings-action settings-action-danger"
+                                                onClick={() => void handleRemoveFromModal(name)}
+                                            >
+                                                Remove
+                                            </button>
+                                        </SettingsActions>
+                                    );
+                                })}
+                            </>
+                        )}
+
+                        {modalTab === 'add' && (
+                            <>
+                                <SettingsToolbar>
+                                    <button
+                                        type="button"
+                                        role="tab"
+                                        aria-selected={addSubTab === 'local'}
+                                        className={`settings-action${addSubTab === 'local' ? ' settings-action-save' : ''}`}
+                                        onClick={() => setAddSubTab('local')}
+                                    >
+                                        Local
+                                    </button>
+                                    <button
+                                        type="button"
+                                        role="tab"
+                                        aria-selected={addSubTab === 'remote'}
+                                        className={`settings-action${addSubTab === 'remote' ? ' settings-action-save' : ''}`}
+                                        onClick={() => setAddSubTab('remote')}
+                                    >
+                                        Remote
+                                    </button>
+                                </SettingsToolbar>
+
+                                <label className="settings-field settings-field-text">
+                                    <span className="settings-field-label">Name</span>
+                                    <input
+                                        type="text"
+                                        value={addName}
+                                        placeholder="my-server"
+                                        spellCheck={false}
+                                        onChange={(e) => setAddName(e.target.value)}
+                                    />
+                                </label>
+
+                                {addSubTab === 'local' ? (
+                                    <>
+                                        <label className="settings-field settings-field-text">
+                                            <span className="settings-field-label">Command</span>
+                                            <input
+                                                type="text"
+                                                value={addCommand}
+                                                placeholder="npx"
+                                                spellCheck={false}
+                                                onChange={(e) => setAddCommand(e.target.value)}
+                                            />
+                                        </label>
+                                        <label className="settings-field settings-field-text">
+                                            <span className="settings-field-label">Args (one per line)</span>
+                                            <textarea
+                                                value={addArgs}
+                                                rows={3}
+                                                spellCheck={false}
+                                                placeholder="-y&#10;@upstash/context7-mcp"
+                                                onChange={(e) => setAddArgs(e.target.value)}
+                                            />
+                                        </label>
+                                        <label className="settings-field settings-field-text">
+                                            <span className="settings-field-label">Env (KEY=value per line)</span>
+                                            <textarea
+                                                value={addEnv}
+                                                rows={2}
+                                                spellCheck={false}
+                                                onChange={(e) => setAddEnv(e.target.value)}
+                                            />
+                                        </label>
+                                    </>
+                                ) : (
+                                    <>
+                                        <label className="settings-field settings-field-text">
+                                            <span className="settings-field-label">URL</span>
+                                            <input
+                                                type="text"
+                                                value={addUrl}
+                                                placeholder="https://mcp.example.com/sse"
+                                                spellCheck={false}
+                                                onChange={(e) => setAddUrl(e.target.value)}
+                                            />
+                                        </label>
+                                        <label className="settings-field settings-field-text">
+                                            <span className="settings-field-label">Headers (KEY=value per line)</span>
+                                            <textarea
+                                                value={addHeaders}
+                                                rows={2}
+                                                spellCheck={false}
+                                                onChange={(e) => setAddHeaders(e.target.value)}
+                                            />
+                                        </label>
+                                    </>
+                                )}
+
+                                {addError && (
+                                    <SettingsNote tone="error" role="alert">{addError}</SettingsNote>
+                                )}
+
+                                <SettingsActions>
+                                    <button
+                                        type="button"
+                                        className="settings-action"
+                                        onClick={closeModal}
+                                    >
+                                        Cancel
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="settings-action settings-action-save"
+                                        disabled={addPending}
+                                        onClick={() => void handleAddAndSync()}
+                                    >
+                                        {addPending ? 'Adding…' : 'Add & Sync'}
+                                    </button>
+                                </SettingsActions>
+                            </>
+                        )}
                     </div>
                 </div>
             )}

package/public/manager/src/settings/pages/Memory.tsx

@@ -16,6 +16,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { SettingsPageProps, DirtyEntry } from '../types';
 import { NumberField, SelectField, ToggleField } from '../fields';
 import {
+    SettingsActions,
+    SettingsNote,
     SettingsSection,
     PageError,
     PageLoading,
@@ -335,55 +337,42 @@ export default function Memory({ port, client, dirty, registerSave }: SettingsPa
                 hint={`Read-only browse of the key/value memory table (${MEMORY_PAGE_SIZE}/page).`}
             >
                 {memorySnap.state.kind === 'loading' ? (
-                    <p className="settings-section-hint">Loading entries…</p>
+                    <SettingsNote>Loading entries…</SettingsNote>
                 ) : memorySnap.state.kind === 'offline' ? (
                     <PageOffline port={port} />
                 ) : memorySnap.state.kind === 'error' ? (
                     <PageError message={memorySnap.state.message} />
                 ) : allRows.length === 0 ? (
-                    <p className="settings-section-hint">No memory entries yet.</p>
+                    <SettingsNote>No memory entries yet.</SettingsNote>
                 ) : (
                     <>
-                        <table className="settings-memory-table">
-                            <thead>
-                                <tr>
-                                    <th scope="col">Key</th>
-                                    <th scope="col">Source</th>
-                                    <th scope="col">Length</th>
-                                    <th scope="col">Preview</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {slice.map((row) => (
-                                    <MemoryRow
-                                        key={row.key}
-                                        row={row}
-                                        onOpen={setOpenEntry}
-                                    />
-                                ))}
-                            </tbody>
-                        </table>
-                        <div className="settings-memory-pagination">
+                        {slice.map((row) => (
+                            <MemoryRow
+                                key={row.key}
+                                row={row}
+                                onOpen={setOpenEntry}
+                            />
+                        ))}
+                        <SettingsActions
+                            status={<span>Page {page + 1} / {pageCount}</span>}
+                        >
                             <button
                                 type="button"
-                                className="settings-action settings-action-discard"
+                                className="settings-action"
                                 disabled={page === 0}
                                 onClick={() => setPage((p) => Math.max(0, p - 1))}
                             >
                                 Prev
                             </button>
-                            <span className="settings-memory-pageinfo">
-                                Page {page + 1} / {pageCount}
-                            </span>
                             <button
                                 type="button"
-                                className="settings-action settings-action-discard"
+                                className="settings-action"
                                 disabled={!hasMore}
                                 onClick={() => setPage((p) => p + 1)}
                             >
                                 Next
                             </button>
-                        </div>
+                        </SettingsActions>
                     </>
                 )}
             </SettingsSection>
@@ -392,7 +381,13 @@ export default function Memory({ port, client, dirty, registerSave }: SettingsPa
                 title="Actions"
                 hint="Flush runs async — the browse list refreshes when it finishes."
             >
-                <div className="settings-memory-actions">
+                <SettingsActions
+                    status={
+                        actionState.notice ? (
+                            <span role="status">{actionState.notice}</span>
+                        ) : undefined
+                    }
+                >
                     <button
                         type="button"
                         className="settings-action settings-action-save"
@@ -411,28 +406,23 @@ export default function Memory({ port, client, dirty, registerSave }: SettingsPa
                     </button>
                     <button
                         type="button"
-                        className="settings-action settings-action-discard"
+                        className="settings-action"
                         disabled={memorySnap.state.kind !== 'ready'}
                         onClick={onExport}
                     >
                         Export memory
                     </button>
-                </div>
-                {actionState.notice ? (
-                    <p className="settings-section-hint" role="status">
-                        {actionState.notice}
-                    </p>
-                ) : null}
+                </SettingsActions>
                 {actionState.error ? (
-                    <p className="settings-field-error" role="alert">
+                    <SettingsNote tone="error" role="alert">
                         {actionState.error}
-                    </p>
+                    </SettingsNote>
                 ) : null}
             </SettingsSection>
 
             {openEntry ? (
                 <div
-                    className="settings-memory-modal"
+                    className="settings-memory-modal settings-pi-modal"
                     role="dialog"
                     aria-modal="true"
                     aria-label={`Memory entry ${openEntry.key}`}
@@ -445,14 +435,18 @@ export default function Memory({ port, client, dirty, registerSave }: SettingsPa
                             <h3>{openEntry.key}</h3>
                             <button
                                 type="button"
-                                className="settings-action settings-action-discard"
+                                className="settings-action"
                                 onClick={() => setOpenEntry(null)}
                                 aria-label="Close memory entry"
                             >
                                 Close
                             </button>
                         </header>
-                        <pre className="settings-memory-modal-body">{openEntry.value}</pre>
+                        <pre
+                            className="settings-memory-modal-body"
+                        >
+                            {openEntry.value}
+                        </pre>
                     </div>
                 </div>
             ) : null}