cli-jaw 2.17.62 → 2.17.63

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

@@ -25,6 +25,10 @@ import {
     PageLoading,
     PageOffline,
     usePageSnapshot,
+    SettingsActions,
+    SettingsKeyValue,
+    SettingsNote,
+    StatusBadge,
 } from './page-shell';
 import { expandPatch } from './path-utils';
 import type { MessengerChannel } from './components/ChannelEnablementControl';
@@ -314,24 +318,35 @@ export default function ChannelsSlack({ port, client, dirty, registerSave, manag
         >
             <fieldset disabled={resetting || setupOpen} className="settings-slack-fields">
             <SettingsSection
-                title="Channels"
-                hint="Choose which channels receive inbound chat. Outbound send can still work on any configured channel."
+                title="Status"
+                hint="Live transport state for this channel."
             >
-                <ChannelEnablementControl
-                    pageChannel="slack"
-                    snapshot={state.kind === 'ready' ? state.data : {}}
-                    enabledChannels={enabledChannels}
-                    homeChannel={homeChannel}
-                    setEnabledChannels={setEnabledChannels}
-                    setHomeChannel={setHomeChannel}
-                    dirty={dirty}
-                    idPrefix="sl-channel"
+                <SettingsKeyValue
+                    items={[
+                        {
+                            label: 'Slack',
+                            value: enabled ? (
+                                <StatusBadge tone="ok">Enabled</StatusBadge>
+                            ) : (
+                                <StatusBadge tone="neutral">Disabled</StatusBadge>
+                            ),
+                        },
+                        ...(outboundOnly
+                            ? [{
+                                label: 'Mode',
+                                value: <StatusBadge tone="warn">Outbound only</StatusBadge>,
+                            }]
+                            : []),
+                        ...(environmentManaged
+                            ? [{ label: 'Managed by', value: environmentVariables.join(', '), mono: true }]
+                            : []),
+                    ]}
                 />
                 <TransportStatusChips key={healthRevision} client={client} channel="slack" />
             </SettingsSection>
 
             <SettingsSection
-                title="Slack"
+                title="Credentials"
                 hint={slackHint}
             >
                 <ToggleField
@@ -425,11 +440,22 @@ export default function ChannelsSlack({ port, client, dirty, registerSave, manag
                     onChange={next => { setAttachPort(next); setEntry('slack.attachPort', {
                         value: next.trim(), original: original.attachPort ?? '', valid: true,
                     }); }} />
-                <button type="button" disabled={environmentManaged || resetting || setupOpen}
-                    data-onboard-channel="slack" onClick={openSetup}>{t('onboarding.open')}</button>
-                <button type="button" disabled={environmentManaged || resetting || setupOpen}
-                    onClick={() => void resetConnection()}>{t('settings.slack.resetConnection')}</button>
-                {actionError && <p role="alert">{actionError}</p>}
+            </SettingsSection>
+
+            <SettingsSection
+                title="Routing"
+                hint="Choose which channels receive inbound chat and how replies are delivered. Outbound send can still work on any configured channel."
+            >
+                <ChannelEnablementControl
+                    pageChannel="slack"
+                    snapshot={state.kind === 'ready' ? state.data : {}}
+                    enabledChannels={enabledChannels}
+                    homeChannel={homeChannel}
+                    setEnabledChannels={setEnabledChannels}
+                    setHomeChannel={setHomeChannel}
+                    dirty={dirty}
+                    idPrefix="sl-channel"
+                />
                 <ToggleField
                     id="sl-mentionOnly"
                     label="Mention only"
@@ -497,6 +523,22 @@ export default function ChannelsSlack({ port, client, dirty, registerSave, manag
                 />
             </SettingsSection>
             </fieldset>
+            <SettingsSection
+                title="Actions"
+                hint="Guided setup validates credentials with the issuer before saving."
+            >
+                <SettingsActions>
+                    <button type="button" className="settings-action settings-action-danger"
+                        disabled={environmentManaged || resetting || setupOpen}
+                        onClick={() => void resetConnection()}>{t('settings.slack.resetConnection')}</button>
+                    <button type="button" className="settings-action"
+                        disabled={environmentManaged || resetting || setupOpen}
+                        data-onboard-channel="slack" onClick={openSetup}>{t('onboarding.open')}</button>
+                </SettingsActions>
+                {actionError && (
+                    <SettingsNote tone="error" role="alert">{actionError}</SettingsNote>
+                )}
+            </SettingsSection>
             {setupOpen && <SlackSetup key={port} client={client} t={t}
                 initialDraft={{ botToken, appToken }} returnFocus={setupTriggerRef.current} onBeforeSave={captureSetupSave} onClose={closeSetup} />}
         </form>

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

@@ -18,6 +18,9 @@ import {
     PageLoading,
     PageOffline,
     usePageSnapshot,
+    SettingsActions,
+    SettingsKeyValue,
+    StatusBadge,
 } from './page-shell';
 import { expandPatch } from './path-utils';
 import { slackText } from './components/SlackSetup';
@@ -213,25 +216,37 @@ export default function ChannelsTelegram({ port, client, dirty, registerSave, ma
         >
             <fieldset disabled={setupOpen} className="settings-slack-fields">
             <SettingsSection
-                title="Channels"
-                hint="Choose which channels receive inbound chat. Outbound send can still work on any configured channel."
+                title="Status"
+                hint="Live transport state plus a token/connectivity probe for this channel."
             >
-                <ChannelEnablementControl
-                    pageChannel="telegram"
-                    snapshot={state.kind === 'ready' ? state.data : {}}
-                    enabledChannels={enabledChannels}
-                    homeChannel={homeChannel}
-                    setEnabledChannels={setEnabledChannels}
-                    setHomeChannel={setHomeChannel}
-                    dirty={dirty}
-                    idPrefix="tg-channel"
+                <SettingsKeyValue
+                    items={[
+                        {
+                            label: 'Telegram',
+                            value: enabled ? (
+                                <StatusBadge tone="ok">Enabled</StatusBadge>
+                            ) : (
+                                <StatusBadge tone="neutral">Disabled</StatusBadge>
+                            ),
+                        },
+                        ...(environmentManaged
+                            ? [{ label: 'Managed by', value: environmentVariables.join(', '), mono: true }]
+                            : []),
+                    ]}
                 />
                 <TransportStatusChips client={client} channel="telegram" />
+                <HealthBadge
+                    client={client}
+                    label="Telegram"
+                    endpoint="/api/telegram/probe"
+                    method="POST"
+                    interpret={interpretTelegramProbe}
+                />
             </SettingsSection>
 
-            <SettingsSection title="Telegram" hint={environmentManaged
+            <SettingsSection title="Credentials" hint={environmentManaged
                 ? t('settings.telegram.managedByEnvironment', { variables: environmentVariables.join(', ') })
-                : 'Bot token, allow-list, and forwarding rules.'}>
+                : 'Bot token and the allow-list for inbound chats.'}>
                 <ToggleField
                     id="tg-enabled"
                     label="Telegram enabled"
@@ -284,6 +299,22 @@ export default function ChannelsTelegram({ port, client, dirty, registerSave, ma
                         });
                     }}
                 />
+            </SettingsSection>
+
+            <SettingsSection
+                title="Routing"
+                hint="Choose which channels receive inbound chat and how replies are delivered. Outbound send can still work on any configured channel."
+            >
+                <ChannelEnablementControl
+                    pageChannel="telegram"
+                    snapshot={state.kind === 'ready' ? state.data : {}}
+                    enabledChannels={enabledChannels}
+                    homeChannel={homeChannel}
+                    setEnabledChannels={setEnabledChannels}
+                    setHomeChannel={setHomeChannel}
+                    dirty={dirty}
+                    idPrefix="tg-channel"
+                />
                 <ToggleField
                     id="tg-forwardAll"
                     label="Forward all responses"
@@ -311,22 +342,16 @@ export default function ChannelsTelegram({ port, client, dirty, registerSave, ma
                     }}
                 />
             </SettingsSection>
-
+            </fieldset>
             <SettingsSection
-                title="Health"
-                hint="Probe the bot to confirm token + connectivity. 404 means the instance hasn't shipped the probe endpoint yet."
+                title="Actions"
+                hint="Guided setup validates credentials with the issuer before saving."
             >
-                <HealthBadge
-                    client={client}
-                    label="Telegram"
-                    endpoint="/api/telegram/probe"
-                    method="POST"
-                    interpret={interpretTelegramProbe}
-                />
+                <SettingsActions>
+                    <ChannelSetupEntry channel="telegram" client={client} dirty={dirty} disabled={environmentManaged}
+                        open={setupOpen} onOpenChange={setSetupOpen} onSaved={async () => setData(await client.get<TelegramSnapshot>('/api/settings'))} />
+                </SettingsActions>
             </SettingsSection>
-            </fieldset>
-            <ChannelSetupEntry channel="telegram" client={client} dirty={dirty} disabled={environmentManaged}
-                open={setupOpen} onOpenChange={setSetupOpen} onSaved={async () => setData(await client.get<TelegramSnapshot>('/api/settings'))} />
         </form>
     );
 }

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

@@ -7,6 +7,7 @@ import { isPresentationMode, presentationMode, type PresentationMode } from '../
 import { describeError } from '../components/error-normalize';
 import {
     SettingsSection,
+    SettingsNote,
     PageError,
     PageLoading,
     PageOffline,
@@ -151,11 +152,11 @@ export default function Display({ port, client, dirty, registerSave }: SettingsP
                 });
             }}
         >
-            {saveError ? <PageError message={saveError} /> : null}
             <SettingsSection
                 title="Conversation display"
                 hint="Changes conversation display only. Runtime and permissions stay unchanged."
             >
+                {saveError ? <SettingsNote tone="error" role="alert">{saveError}</SettingsNote> : null}
                 <SelectField
                     disabled={saving}
                     id="display-presentation-mode"

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

@@ -5,7 +5,7 @@
 
 import type { SettingsPageProps } from '../types';
 import { useEffect } from 'react';
-import { SettingsSection } from './page-shell';
+import { SettingsSection, SettingsNote } from './page-shell';
 
 export {
     EMPLOYEE_KEYS,
@@ -32,10 +32,10 @@ export default function Employees({ registerSave }: SettingsPageProps) {
                 title="Employees"
                 hint="Runtime employees are now managed from the Agent page."
             >
-                <p className="settings-section-hint">
+                <SettingsNote>
                     Open Runtime / Agent to edit dispatchable employees, static employee model
                     overrides, and database-backed employees in one place.
-                </p>
+                </SettingsNote>
             </SettingsSection>
         </form>
     );