cli-jaw 2.2.11 → 2.2.13

package/public/index.html

@@ -468,8 +468,12 @@
             <div id="channelTelegramSettings" class="settings-group">
                 <h4 class="section-title-row">
                     <span><span data-provider="telegram"></span> Telegram</span>
-                    <button class="help-trigger" type="button" data-help-topic="telegram"
-                        data-i18n-aria="help.telegram.aria" aria-label="Telegram 도움말">?</button>
+                    <span class="section-title-actions">
+                        <button class="perm-btn onboard-trigger" type="button" data-onboard-channel="telegram"
+                            data-i18n="onboarding.open">설정 마법사</button>
+                        <button class="help-trigger" type="button" data-help-topic="telegram"
+                            data-i18n-aria="help.telegram.aria" aria-label="Telegram 도움말">?</button>
+                    </span>
                 </h4>
                 <div class="settings-row">
                     <label data-i18n="label.enabled">활성화</label>
@@ -507,8 +511,12 @@
             <div id="channelDiscordSettings" class="settings-group" style="display:none">
                 <h4 class="section-title-row">
                     <span><span data-provider="discord"></span> Discord</span>
-                    <button class="help-trigger" type="button" data-help-topic="discord"
-                        data-i18n-aria="help.discord.aria" aria-label="Discord 도움말">?</button>
+                    <span class="section-title-actions">
+                        <button class="perm-btn onboard-trigger" type="button" data-onboard-channel="discord"
+                            data-i18n="onboarding.open">설정 마법사</button>
+                        <button class="help-trigger" type="button" data-help-topic="discord"
+                            data-i18n-aria="help.discord.aria" aria-label="Discord 도움말">?</button>
+                    </span>
                 </h4>
                 <div class="settings-row">
                     <label data-i18n="label.enabled">활성화</label>
@@ -556,8 +564,12 @@
             <div id="channelSlackSettings" class="settings-group" style="display:none">
                 <h4 class="section-title-row">
                     <span><span data-provider="slack"></span> Slack</span>
-                    <button class="help-trigger" type="button" data-help-topic="slack"
-                        data-i18n-aria="help.slack.aria" aria-label="Slack 도움말">?</button>
+                    <span class="section-title-actions">
+                        <button class="perm-btn onboard-trigger" type="button" data-onboard-channel="slack"
+                            data-i18n="onboarding.open">설정 마법사</button>
+                        <button class="help-trigger" type="button" data-help-topic="slack"
+                            data-i18n-aria="help.slack.aria" aria-label="Slack 도움말">?</button>
+                    </span>
                 </h4>
                 <div class="settings-row">
                     <label data-i18n="label.enabled">활성화</label>
@@ -566,50 +578,81 @@
                         <button id="slOn" class="perm-btn" data-i18n="btn.on">켬</button>
                     </div>
                 </div>
-                <div class="settings-row sub-row">
-                    <label>Bot Token</label>
-                    <input type="password" id="slBotToken" placeholder="xoxb-..." class="input-sm">
-                </div>
-                <div class="settings-row sub-row">
-                    <label>App Token</label>
-                    <input type="password" id="slAppToken" placeholder="xapp-... (Socket Mode)" class="input-sm">
-                </div>
-                <div class="settings-row sub-row">
-                    <label>Team ID</label>
-                    <input type="text" id="slTeamId" placeholder="T... (선택)" class="input-sm">
-                </div>
-                <div class="settings-row sub-row">
-                    <label>Channel IDs</label>
-                    <input type="text" id="slChannelIds" placeholder="콤마 구분 (비워두면 전체 허용)" class="input-sm">
-                </div>
-                <div class="settings-row sub-row">
-                    <label data-i18n="label.mentionOnly">Mention Only</label>
-                    <div>
-                        <button id="slMentionOff" class="perm-btn" data-i18n="btn.off">끔</button>
-                        <button id="slMentionOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                <div class="slack-setup-card">
+                    <div class="slack-setup-step">
+                        <span class="slack-step-num">1</span>
+                        <div class="slack-step-body">
+                            <div class="slack-step-title" data-i18n="settings.slack.guide.step1Title">Slack 앱 만들기</div>
+                            <div class="slack-step-desc" data-i18n="settings.slack.guide.step1Desc">Create an App → From an app manifest → 워크스페이스 선택 → 붙여넣기</div>
+                            <div class="slack-step-actions">
+                                <button id="slack-copy-manifest" class="perm-btn" type="button" data-i18n="settings.slack.guide.copyManifest">매니페스트 복사</button>
+                                <button id="slack-open-apps" class="perm-btn" type="button" data-i18n="settings.slack.guide.openApps">앱 페이지 열기</button>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                <div class="settings-row sub-row">
-                    <label>Reply in Thread</label>
-                    <div>
-                        <button id="slThreadOff" class="perm-btn" data-i18n="btn.off">끔</button>
-                        <button id="slThreadOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                    <div class="slack-setup-step">
+                        <span class="slack-step-num">2</span>
+                        <div class="slack-step-body">
+                            <div class="slack-step-title" data-i18n="settings.slack.guide.step2Title">봇 토큰 붙여넣기</div>
+                            <div class="slack-step-desc" data-i18n="settings.slack.guide.step2Desc">앱 설정 → OAuth &amp; Permissions → Install to Workspace → Bot User OAuth Token 복사</div>
+                            <input type="password" id="slBotToken" placeholder="xoxb-..." class="input-sm">
+                            <div class="slack-field-error" id="slack-bot-token-error" style="display:none" data-i18n="settings.slack.guide.botTokenError">xoxb-로 시작하는 봇 토큰이어야 합니다</div>
+                        </div>
                     </div>
-                </div>
-                <div class="settings-row sub-row">
-                    <label data-i18n="label.forwardAll">자동 전송</label>
-                    <div>
-                        <button id="slForwardOff" class="perm-btn" data-i18n="btn.off">끔</button>
-                        <button id="slForwardOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                    <div class="slack-setup-step">
+                        <span class="slack-step-num">3</span>
+                        <div class="slack-step-body">
+                            <div class="slack-step-title" data-i18n="settings.slack.guide.step3Title">수신용 앱 토큰 (선택)</div>
+                            <div class="slack-step-desc" data-i18n="settings.slack.guide.step3Location">앱 설정 → Basic Information → App-Level Tokens → Generate Token (connections:write)</div>
+                            <input type="password" id="slAppToken" placeholder="xapp-... (Socket Mode)" class="input-sm">
+                            <div class="slack-field-error" id="slack-app-token-error" style="display:none" data-i18n="settings.slack.guide.appTokenError">xapp-로 시작하는 앱 레벨 토큰이어야 합니다</div>
+                            <div class="slack-step-desc" data-i18n="settings.slack.guide.step3Desc">비워두면 전송 전용(outbound-only)으로 동작합니다</div>
+                        </div>
                     </div>
                 </div>
-                <div class="settings-row sub-row">
-                    <label>Allow Bots</label>
-                    <div>
-                        <button id="slAllowBotsOff" class="perm-btn active" data-i18n="btn.off">끔</button>
-                        <button id="slAllowBotsOn" class="perm-btn" data-i18n="btn.on">켬</button>
+                <details class="slack-advanced">
+                    <summary data-i18n="settings.slack.advanced">고급 설정</summary>
+                    <div class="settings-row sub-row">
+                        <label>Team ID</label>
+                        <input type="text" id="slTeamId" placeholder="T... (검증 시 자동 입력)" class="input-sm">
                     </div>
-                </div>
+                    <div class="settings-row sub-row">
+                        <label>Channel IDs</label>
+                        <input type="text" id="slChannelIds" placeholder="콤마 구분 (비워두면 전체 허용)" class="input-sm">
+                    </div>
+                    <div class="settings-row sub-row">
+                        <label data-i18n="settings.slack.attachPort">연결 인스턴스 포트</label>
+                        <input type="text" id="slAttachPort" placeholder="3457 (이 포트의 인스턴스만 연결)" class="input-sm">
+                    </div>
+                    <div class="settings-row sub-row">
+                        <label data-i18n="label.mentionOnly">Mention Only</label>
+                        <div>
+                            <button id="slMentionOff" class="perm-btn" data-i18n="btn.off">끔</button>
+                            <button id="slMentionOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                        </div>
+                    </div>
+                    <div class="settings-row sub-row">
+                        <label>Reply in Thread</label>
+                        <div>
+                            <button id="slThreadOff" class="perm-btn" data-i18n="btn.off">끔</button>
+                            <button id="slThreadOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                        </div>
+                    </div>
+                    <div class="settings-row sub-row">
+                        <label data-i18n="label.forwardAll">자동 전송</label>
+                        <div>
+                            <button id="slForwardOff" class="perm-btn" data-i18n="btn.off">끔</button>
+                            <button id="slForwardOn" class="perm-btn active" data-i18n="btn.on">켬</button>
+                        </div>
+                    </div>
+                    <div class="settings-row sub-row">
+                        <label>Allow Bots</label>
+                        <div>
+                            <button id="slAllowBotsOff" class="perm-btn active" data-i18n="btn.off">끔</button>
+                            <button id="slAllowBotsOn" class="perm-btn" data-i18n="btn.on">켬</button>
+                        </div>
+                    </div>
+                </details>
             </div>
 
             <!-- MCP Servers -->

package/public/js/constants.ts

@@ -9,6 +9,20 @@ export interface CliEntry {
     providers?: string[];
     modelsByProvider?: Record<string, string[]>;
     effortsByProvider?: Record<string, string[]>;
+    /**
+     * Per-model reasoning-effort sets from a live opencodex catalog. An entry
+     * that exists but is EMPTY means the model takes no effort at all, so it
+     * must not fall back to `efforts`.
+     */
+    effortsByModel?: Record<string, string[]>;
+    defaultEffortByModel?: Record<string, string>;
+    /**
+     * Provider-scoped per-model efforts for provider-split runtimes (`ai-e`).
+     * A flat map would collide on ids shared across providers.
+     */
+    effortsByModelByProvider?: Record<string, Record<string, string[]>>;
+    defaultEffortByModelByProvider?: Record<string, Record<string, string>>;
+    modelSource?: string;
     effortNote?: string;
     modelNote?: string;
 }
@@ -257,6 +271,42 @@ function normalizeRegistry(input: Record<string, unknown>): CliRegistry {
                     .map(([provider, efforts]) => [provider, [...efforts]])
             );
         }
+        if (v['effortsByModel'] && typeof v['effortsByModel'] === 'object') {
+            normalized.effortsByModel = Object.fromEntries(
+                Object.entries(v['effortsByModel'] as Record<string, unknown>)
+                    .filter((entry): entry is [string, string[]] => Array.isArray(entry[1]))
+                    .map(([model, efforts]) => [model, efforts.filter((e): e is string => typeof e === 'string')])
+            );
+        }
+        if (v['defaultEffortByModel'] && typeof v['defaultEffortByModel'] === 'object') {
+            normalized.defaultEffortByModel = Object.fromEntries(
+                Object.entries(v['defaultEffortByModel'] as Record<string, unknown>)
+                    .filter((entry): entry is [string, string] => typeof entry[1] === 'string')
+            );
+        }
+        if (typeof v['modelSource'] === 'string') normalized.modelSource = v['modelSource'];
+        if (v['effortsByModelByProvider'] && typeof v['effortsByModelByProvider'] === 'object') {
+            normalized.effortsByModelByProvider = Object.fromEntries(
+                Object.entries(v['effortsByModelByProvider'] as Record<string, unknown>)
+                    .filter((entry): entry is [string, Record<string, unknown>] =>
+                        Boolean(entry[1]) && typeof entry[1] === 'object' && !Array.isArray(entry[1]))
+                    .map(([provider, byModel]) => [provider, Object.fromEntries(
+                        Object.entries(byModel)
+                            .filter((e): e is [string, string[]] => Array.isArray(e[1]))
+                            .map(([model, efforts]) => [model, efforts.filter((x): x is string => typeof x === 'string')])
+                    )])
+            );
+        }
+        if (v['defaultEffortByModelByProvider'] && typeof v['defaultEffortByModelByProvider'] === 'object') {
+            normalized.defaultEffortByModelByProvider = Object.fromEntries(
+                Object.entries(v['defaultEffortByModelByProvider'] as Record<string, unknown>)
+                    .filter((entry): entry is [string, Record<string, unknown>] =>
+                        Boolean(entry[1]) && typeof entry[1] === 'object' && !Array.isArray(entry[1]))
+                    .map(([provider, byModel]) => [provider, Object.fromEntries(
+                        Object.entries(byModel).filter((e): e is [string, string] => typeof e[1] === 'string')
+                    )])
+            );
+        }
         out[key] = normalized;
     }
     return out;

package/public/js/features/channel-onboarding-flow.ts

@@ -0,0 +1,197 @@
+// ── Channel onboarding flow: pure state machine ──
+// Four steps for every channel (안내 → 입력 → 검증 → 저장), so the popup can
+// show "2/4" honestly and refuse to advance until THAT step's own contract is
+// satisfied. Kept DOM-free and import-free so every gate below is unit-tested
+// without a browser — the UI module owns rendering only.
+//
+// Draft values live here and survive step movement in both directions: a user
+// who goes back to fix a typo must not lose the token they already pasted.
+
+export type OnboardChannel = 'telegram' | 'discord' | 'slack';
+
+export type FieldDef = {
+    /** Payload key sent to the validate route and the settings patch. */
+    key: string;
+    /** Matching input id in the settings section, for value mirroring. */
+    settingsId: string;
+    secret: boolean;
+    optional?: boolean;
+    /** Required prefix, when the provider namespaces its tokens. */
+    prefix?: string;
+    /** Illustrative shape shown as the input placeholder — never a real value. */
+    example: string;
+};
+
+export const CHANNEL_FIELDS: Record<OnboardChannel, readonly FieldDef[]> = {
+    telegram: [
+        { key: 'botToken', settingsId: 'tgToken', secret: true, example: '8123456789:AAH...' },
+    ],
+    discord: [
+        { key: 'botToken', settingsId: 'dcToken', secret: true, example: 'MTIzNDU2Nzg5...' },
+        { key: 'guildId', settingsId: 'dcGuildId', secret: false, example: '123456789012345678' },
+    ],
+    slack: [
+        { key: 'botToken', settingsId: 'slBotToken', secret: true, prefix: 'xoxb-', example: 'xoxb-1234-5678-abcd...' },
+        { key: 'appToken', settingsId: 'slAppToken', secret: true, optional: true, prefix: 'xapp-', example: 'xapp-1-A01...' },
+    ],
+};
+
+/** Where each channel issues its credentials — the step-1 primary action. */
+export const ISSUER_URLS: Record<OnboardChannel, string> = {
+    telegram: 'https://t.me/BotFather',
+    discord: 'https://discord.com/developers/applications',
+    slack: 'https://api.slack.com/apps',
+};
+
+export const TOTAL_STEPS = 4;
+/** 1 = 안내, 2 = 자격 증명 입력, 3 = 연결 검증, 4 = 저장 완료. */
+export type StepIndex = 1 | 2 | 3 | 4;
+
+export type Draft = Record<string, string>;
+
+export type FlowState = {
+    channel: OnboardChannel;
+    step: StepIndex;
+    draft: Draft;
+    /** Set once step 3 passes; cleared whenever a credential changes. */
+    validatedIdentity: string | null;
+    validatedTeamId: string;
+    /** i18n key suffix for the blocking reason, or null when the step is clear. */
+    error: string | null;
+    /** Scopes the provider reported as missing, shown with the error. */
+    missingScopes: string[];
+    saved: boolean;
+};
+
+export function createFlow(channel: OnboardChannel, draft: Draft = {}): FlowState {
+    return {
+        channel,
+        step: 1,
+        draft: { ...draft },
+        validatedIdentity: null,
+        validatedTeamId: '',
+        error: null,
+        missingScopes: [],
+        saved: false,
+    };
+}
+
+export function fieldsFor(channel: OnboardChannel): readonly FieldDef[] {
+    return CHANNEL_FIELDS[channel];
+}
+
+/**
+ * Local (offline) contract for the credential step: required fields present
+ * and prefixes correct. This runs BEFORE the network call so a swapped paste
+ * costs zero requests, and it is the same rule the CLI wizard enforces.
+ */
+export function checkCredentials(channel: OnboardChannel, draft: Draft): string | null {
+    for (const field of fieldsFor(channel)) {
+        const value = (draft[field.key] || '').trim();
+        if (!value) {
+            if (field.optional) continue;
+            return field.key === 'guildId' ? 'guild_required' : 'token_required';
+        }
+        if (field.prefix && !value.startsWith(field.prefix)) {
+            return field.key === 'appToken' ? 'app_prefix' : 'bot_prefix';
+        }
+    }
+    return null;
+}
+
+/** Why the given step cannot be left yet, or null when it may advance. */
+export function blockerForStep(state: FlowState): string | null {
+    if (state.step === 1) return null;
+    if (state.step === 2) return checkCredentials(state.channel, state.draft);
+    if (state.step === 3) return state.validatedIdentity ? null : 'validation_required';
+    return null;
+}
+
+export function canAdvance(state: FlowState): boolean {
+    return state.step < TOTAL_STEPS && blockerForStep(state) === null;
+}
+
+/** Move forward one step, or record why it is blocked. Never skips a gate. */
+export function advance(state: FlowState): FlowState {
+    if (state.step >= TOTAL_STEPS) return state;
+    const blocker = blockerForStep(state);
+    if (blocker) return { ...state, error: blocker };
+    return { ...state, step: (state.step + 1) as StepIndex, error: null };
+}
+
+/** Move back one step. Draft and validation results are preserved. */
+export function goBack(state: FlowState): FlowState {
+    if (state.step <= 1) return state;
+    return { ...state, step: (state.step - 1) as StepIndex, error: null };
+}
+
+/**
+ * Record a credential edit. Any change invalidates a previous validation:
+ * otherwise a user could validate a good token, paste a bad one, and still
+ * reach the save step on the stale pass.
+ */
+export function setField(state: FlowState, key: string, value: string): FlowState {
+    if ((state.draft[key] ?? '') === value) return state;
+    return {
+        ...state,
+        draft: { ...state.draft, [key]: value },
+        validatedIdentity: null,
+        validatedTeamId: '',
+        error: null,
+        missingScopes: [],
+    };
+}
+
+export function applyValidation(
+    state: FlowState,
+    result: { ok?: boolean; identity?: string; teamId?: string; error?: string; missing?: string[] },
+): FlowState {
+    if (result?.ok) {
+        return {
+            ...state,
+            validatedIdentity: result.identity || 'ok',
+            validatedTeamId: result.teamId || '',
+            error: null,
+            missingScopes: [],
+        };
+    }
+    return {
+        ...state,
+        validatedIdentity: null,
+        validatedTeamId: '',
+        error: result?.error || 'network',
+        missingScopes: Array.isArray(result?.missing) ? result.missing : [],
+    };
+}
+
+export function markSaved(state: FlowState): FlowState {
+    return { ...state, saved: true, step: TOTAL_STEPS, error: null };
+}
+
+/** Payload for POST /api/channels/validate. */
+export function validationPayload(state: FlowState): Record<string, string> {
+    const payload: Record<string, string> = { channel: state.channel };
+    for (const field of fieldsFor(state.channel)) {
+        payload[field.key] = (state.draft[field.key] || '').trim();
+    }
+    return payload;
+}
+
+/** Settings patch for PUT /api/settings, shaped per channel. */
+export function settingsPatch(state: FlowState): Record<string, unknown> {
+    const value = (key: string): string => (state.draft[key] || '').trim();
+    if (state.channel === 'telegram') {
+        return { telegram: { enabled: true, token: value('botToken') } };
+    }
+    if (state.channel === 'discord') {
+        return { discord: { enabled: true, token: value('botToken'), guildId: value('guildId') } };
+    }
+    return {
+        slack: {
+            enabled: true,
+            botToken: value('botToken'),
+            appToken: value('appToken'),
+            ...(state.validatedTeamId ? { teamId: state.validatedTeamId } : {}),
+        },
+    };
+}