fix(pipelines): show the actual sandbox scope restriction (#2527)

Co-authored-by: dadachann <185672915+dadachann@users.noreply.github.com>
2026-09-16 14:57:15 +00:00 · 2026-09-11 14:42:38 +08:00
parent ff6ad6adc2
commit 1ea9cd3f6f
8 changed files with 623 additions and 65 deletions
@@ -0,0 +1,232 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import { expect, test, type Page } from '@playwright/test';
+import { installLangBotApiMocks } from './fixtures/langbot-api';
+
+// UI fixtures only: real app/components, intercepted APIs, no production Box.
+// Load the shipped metadata rather than reproducing its tooltip conditions.
+const requireFromTest = createRequire(__filename);
+const { load } = createRequire(requireFromTest.resolve('eslint'))(
+  'js-yaml',
+) as {
+  load: (source: string) => unknown;
+};
+const aiMetadata = load(
+  readFileSync(
+    resolve(
+      __dirname,
+      '../../../src/langbot/templates/metadata/pipeline/ai.yaml',
+    ),
+    'utf8',
+  ),
+);
+const unavailableHint = '沙箱未启用，请启用 Box 并确认连接正常后再修改作用域。';
+const forcedHint = '已强制使用全局沙箱，无法修改作用域。';
+
+interface BoxState {
+  enabled: boolean;
+  available: boolean;
+}
+
+async function openPipeline(page: Page, box: BoxState, forced = '') {
+  await installLangBotApiMocks(page, {
+    authenticated: true,
+    storage: { langbot_language: 'zh-Hans' },
+  });
+  await page.route('**/api/v1/system/info', (route) =>
+    route.fulfill({
+      json: {
+        code: 0,
+        data: {
+          debug: false,
+          version: 'sandbox-scope-ui-fixture',
+          edition: 'community',
+          cloud_service_url: 'https://space.langbot.app',
+          enable_marketplace: true,
+          allow_modify_login_info: true,
+          disable_models_service: false,
+          limitation: {
+            max_bots: -1,
+            max_pipelines: -1,
+            max_extensions: -1,
+            force_box_session_id_template: forced,
+          },
+          outbound_ips: [],
+          wizard_status: 'completed',
+          wizard_progress: null,
+        },
+      },
+    }),
+  );
+  await page.route('**/api/v1/box/status', (route) =>
+    route.fulfill({
+      json: {
+        code: 0,
+        data: {
+          ...box,
+          profile: 'UI fixture only',
+          recent_error_count: 0,
+          active_sessions: 0,
+          managed_processes: 0,
+          session_ttl_sec: 3600,
+          backend: { name: 'ui-fixture', available: box.available },
+        },
+      },
+    }),
+  );
+  await page.route(/\/api\/v1\/tools(?:\?.*)?$/, (route) =>
+    route.fulfill({ json: { code: 0, data: { tools: [] } } }),
+  );
+  await page.route('**/api/v1/pipelines/_/metadata', (route) =>
+    route.fulfill({ json: { code: 0, data: { configs: [aiMetadata] } } }),
+  );
+  await page.route('**/api/v1/pipelines/sandbox-scope-fixture', (route) =>
+    route.fulfill({
+      json: {
+        code: 0,
+        data: {
+          pipeline: {
+            uuid: 'sandbox-scope-fixture',
+            name: 'Sandbox scope — UI fixture only',
+            description: '',
+            emoji: '⚙️',
+            is_default: false,
+            config: {
+              ai: {
+                runner: { runner: 'local-agent' },
+                'local-agent': {
+                  'box-session-id-template': '{launcher_type}_{launcher_id}',
+                },
+              },
+              trigger: {},
+              safety: {},
+              output: {},
+            },
+          },
+        },
+      },
+    }),
+  );
+  await page.goto('/home/pipelines?id=sandbox-scope-fixture');
+  await page.getByRole('button', { name: 'AI 能力', exact: true }).click();
+  // DynamicForm gates this control through its wrapper's pointer-events,
+  // and its label targets that wrapper rather than the nested select.
+  const scope = page
+    .locator('[data-slot="form-item"]')
+    .filter({ has: page.getByText('沙箱作用域', { exact: true }) })
+    .getByRole('combobox');
+  await expect(scope).toBeVisible();
+  return scope;
+}
+
+async function expectWarning(page: Page, hint: string) {
+  const warning = page.getByRole('button', { name: hint, exact: true });
+  await expect(warning).toBeVisible();
+  await warning.hover();
+  await expect(page.getByRole('tooltip')).toHaveText(hint);
+}
+
+async function expectNoWarning(page: Page) {
+  await expect(page.getByRole('button', { name: unavailableHint })).toHaveCount(
+    0,
+  );
+  await expect(page.getByRole('button', { name: forcedHint })).toHaveCount(0);
+  await expect(page.getByRole('tooltip')).toHaveCount(0);
+}
+
+test.describe('sandbox scope disabled reason (UI fixtures only)', () => {
+  for (const scenario of [
+    { name: 'Box disabled', enabled: false, available: false, forced: '' },
+    { name: 'Box disconnected', enabled: true, available: false, forced: '' },
+    {
+      name: 'unavailable Box takes precedence over forced global',
+      enabled: true,
+      available: false,
+      forced: '{global}',
+    },
+  ]) {
+    test(scenario.name, async ({ page }) => {
+      const scope = await openPipeline(page, scenario, scenario.forced);
+      await expect(scope).toHaveCSS('pointer-events', 'none');
+      await expectWarning(page, unavailableHint);
+      await expect(page.getByRole('tooltip')).not.toContainText('强制');
+      await expect(page.getByRole('button', { name: forcedHint })).toHaveCount(
+        0,
+      );
+    });
+  }
+
+  for (const forced of ['{global}', ' {global} ']) {
+    test(`available Box with forced global explains the deployment restriction (${JSON.stringify(forced)})`, async ({
+      page,
+    }) => {
+      const scope = await openPipeline(
+        page,
+        { enabled: true, available: true },
+        forced,
+      );
+      await expect(scope).toHaveCSS('pointer-events', 'none');
+      await expect(scope).toHaveText('全局（所有人共享）');
+      await expectWarning(page, forcedHint);
+      await expect(
+        page.getByRole('button', { name: unavailableHint }),
+      ).toHaveCount(0);
+    });
+  }
+
+  for (const forced of ['', '   ']) {
+    test(`available and unforced Box is editable without a disabled warning (${JSON.stringify(forced)})`, async ({
+      page,
+    }) => {
+      const scope = await openPipeline(
+        page,
+        { enabled: true, available: true },
+        forced,
+      );
+      await expect(scope).toHaveCSS('pointer-events', 'auto');
+      await expect(scope).toHaveText('每个会话（推荐）');
+      await expectNoWarning(page);
+      await scope.click();
+      await page
+        .getByRole('option', { name: '全局（所有人共享）', exact: true })
+        .click();
+      await expect(scope).toHaveText('全局（所有人共享）');
+      await expectNoWarning(page);
+    });
+  }
+
+  for (const forced of ['', '{global}']) {
+    test(`Box status polls update the warning without remounting (${forced || 'unforced'})`, async ({
+      page,
+    }) => {
+      await page.clock.install();
+      const box = { enabled: true, available: false };
+      const scope = await openPipeline(page, box, forced);
+      await expect(scope).toHaveCSS('pointer-events', 'none');
+      await expectWarning(page, unavailableHint);
+      await page.mouse.move(0, 0);
+
+      const recovered = page.waitForResponse('**/api/v1/box/status');
+      box.available = true;
+      await page.clock.fastForward(31_000);
+      await recovered;
+      if (forced) {
+        await expect(scope).toHaveCSS('pointer-events', 'none');
+        await expectWarning(page, forcedHint);
+      } else {
+        await expect(scope).toHaveCSS('pointer-events', 'auto');
+        await expectNoWarning(page);
+      }
+      await page.mouse.move(0, 0);
+
+      const disconnected = page.waitForResponse('**/api/v1/box/status');
+      box.available = false;
+      await page.clock.fastForward(31_000);
+      await disconnected;
+      await expect(scope).toHaveCSS('pointer-events', 'none');
+      await expectWarning(page, unavailableHint);
+      await expect(page.getByRole('tooltip')).not.toContainText('强制');
+    });
+  }
+});
@@ -0,0 +1,252 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import test from 'node:test';
+import ts from 'typescript';
+
+const require = createRequire(import.meta.url);
+const { load } = createRequire(require.resolve('eslint'))('js-yaml');
+const metadata = load(
+  fs.readFileSync(
+    new URL(
+      '../../../src/langbot/templates/metadata/pipeline/ai.yaml',
+      import.meta.url,
+    ),
+    'utf8',
+  ),
+);
+const scope = metadata.stages
+  .find((stage) => stage.name === 'local-agent')
+  .config.find((item) => item.name === 'box-session-id-template');
+const unavailable = '沙箱未启用，请启用 Box 并确认连接正常后再修改作用域。';
+const globalForced = '已强制使用全局沙箱，无法修改作用域。';
+const customForced = '已强制使用固定沙箱作用域，无法修改作用域。';
+
+function loadSource(relativePath) {
+  const filename = new URL(`../../src/${relativePath}`, import.meta.url);
+  assert.ok(fs.existsSync(filename), `Missing policy module: ${relativePath}`);
+  const compiled = ts.transpileModule(fs.readFileSync(filename, 'utf8'), {
+    compilerOptions: { module: ts.ModuleKind.CommonJS },
+  }).outputText;
+  const loaded = { exports: {} };
+  new Function('require', 'module', 'exports', compiled)(
+    (name) => {
+      if (name === '@/app/infra/entities/form/dynamic')
+        return loadSource('app/infra/entities/form/dynamic.ts');
+      throw new Error(`Unexpected runtime import: ${name}`);
+    },
+    loaded,
+    loaded.exports,
+  );
+  return loaded.exports;
+}
+
+function policies() {
+  return {
+    ...loadSource('app/home/components/dynamic-form/DynamicFormConditions.ts'),
+    ...loadSource(
+      'app/home/pipelines/components/pipeline-form/BoxScopeContext.ts',
+    ),
+  };
+}
+
+function scopeState(available, forcedTemplate) {
+  const { getBoxScopeContext, resolveDisabledState } = policies();
+  return resolveDisabledState(
+    scope,
+    {},
+    undefined,
+    getBoxScopeContext(available, forcedTemplate),
+  );
+}
+
+test('sandbox default tooltip explains only unavailability', () => {
+  assert.equal(scope.disabled_tooltip.zh_Hans, unavailable);
+});
+
+for (const [name, available, template, expected] of [
+  ['Box disabled', false, '', unavailable],
+  ['Box disconnected', false, undefined, unavailable],
+  [
+    'unavailable takes precedence over forced global',
+    false,
+    '{global}',
+    unavailable,
+  ],
+  [
+    'unavailable takes precedence over forced custom',
+    false,
+    '{pipeline_id}',
+    unavailable,
+  ],
+  ['available forced global', true, '{global}', globalForced],
+  ['available padded forced global', true, ' {global} ', globalForced],
+  ['available whitespace-only editable', true, '   ', undefined],
+  ['available forced custom', true, '{pipeline_id}', customForced],
+  ['available forced literal', true, 'tenant-sandbox', customForced],
+  ['available editable', true, '', undefined],
+  ['available without limitation', true, undefined, undefined],
+]) {
+  test(name, () => {
+    const state = scopeState(available, template);
+    assert.equal(state.isDisabledByCondition, expected !== undefined);
+    assert.equal(state.disabledTooltip?.zh_Hans, expected);
+  });
+}
+
+test('reason follows availability and forced-scope transitions without mutating metadata', () => {
+  const snapshot = structuredClone(scope);
+  for (const [available, template, expected] of [
+    [false, '{global}', unavailable],
+    [true, '{global}', globalForced],
+    [true, '{pipeline_id}', customForced],
+    [true, '', undefined],
+    [false, '', unavailable],
+    [true, '', undefined],
+  ]) {
+    assert.equal(
+      scopeState(available, template).disabledTooltip?.zh_Hans,
+      expected,
+    );
+  }
+  assert.deepEqual(scope, snapshot);
+});
+
+test('all sandbox reason variants preserve the eight metadata locales', () => {
+  const locales = [
+    'en_US',
+    'zh_Hans',
+    'zh_Hant',
+    'ja_JP',
+    'vi_VN',
+    'th_TH',
+    'es_ES',
+    'ru_RU',
+  ].sort();
+  assert.equal(scope.disabled_tooltip_overrides?.length, 2);
+  const messages = [
+    scope.disabled_tooltip,
+    ...scope.disabled_tooltip_overrides.map((entry) => entry.tooltip),
+  ];
+  for (const message of messages) {
+    assert.deepEqual(Object.keys(message).sort(), locales);
+    for (const locale of locales) assert.ok(message[locale].trim(), locale);
+  }
+  for (const locale of locales) {
+    assert.equal(
+      new Set(messages.map((message) => message[locale])).size,
+      3,
+      locale,
+    );
+    assert.equal(
+      scopeState(false, '{global}').disabledTooltip[locale],
+      messages[0][locale],
+    );
+    assert.equal(
+      scopeState(true, '{global}').disabledTooltip[locale],
+      messages[1][locale],
+    );
+    assert.equal(
+      scopeState(true, '{pipeline_id}').disabledTooltip[locale],
+      messages[2][locale],
+    );
+  }
+});
+
+test('ordinary static disabled tooltip remains compatible', () => {
+  const { resolveDisabledState } = policies();
+  const tooltip = { en_US: 'Read only' };
+  const config = {
+    disable_if: { field: 'locked', operator: 'eq', value: true },
+    disabled_tooltip: tooltip,
+  };
+  assert.deepEqual(resolveDisabledState(config, { locked: true }), {
+    isDisabledByCondition: true,
+    disabledTooltip: tooltip,
+  });
+  assert.deepEqual(resolveDisabledState(config, { locked: false }), {
+    isDisabledByCondition: false,
+    disabledTooltip: undefined,
+  });
+  assert.equal(
+    resolveDisabledState({ disabled_tooltip: tooltip }, {}).disabledTooltip,
+    undefined,
+  );
+  assert.equal(
+    resolveDisabledState({ disable_if: config.disable_if }, { locked: true })
+      .disabledTooltip,
+    undefined,
+  );
+});
+
+test('conditional overrides reuse eq, neq, in and live/external/system resolution', () => {
+  const { matchesFormCondition, resolveDisabledState } = policies();
+  const watched = { mode: 'live', empty: null, '__system.locked': false };
+  const external = { mode: 'external', fallback: 3, empty: 'external' };
+  const system = { locked: true };
+  for (const [condition, expected] of [
+    [{ field: 'mode', operator: 'eq', value: 'live' }, true],
+    [{ field: 'mode', operator: 'eq', value: 'external' }, false],
+    [{ field: 'fallback', operator: 'neq', value: 4 }, true],
+    [{ field: 'fallback', operator: 'in', value: [2, 3] }, true],
+    [{ field: 'fallback', operator: 'in', value: '3' }, false],
+    [{ field: 'fallback', operator: 'eq', value: '3' }, false],
+    [{ field: 'empty', operator: 'eq', value: null }, true],
+    [{ field: '__system.locked', operator: 'eq', value: true }, true],
+    [{ field: 'absent', operator: 'eq', value: true }, false],
+  ])
+    assert.equal(
+      matchesFormCondition(condition, watched, external, system),
+      expected,
+    );
+  const config = {
+    disable_if: { field: '__system.locked', operator: 'eq', value: true },
+    disabled_tooltip: { en_US: 'Default' },
+    disabled_tooltip_overrides: [
+      {
+        when: { field: 'mode', operator: 'eq', value: 'external' },
+        tooltip: { en_US: 'Wrong' },
+      },
+      {
+        when: { field: 'fallback', operator: 'in', value: [3] },
+        tooltip: { en_US: 'First match' },
+      },
+      {
+        when: { field: 'mode', operator: 'neq', value: 'external' },
+        tooltip: { en_US: 'Later match' },
+      },
+    ],
+  };
+  assert.equal(
+    resolveDisabledState(config, watched, external, system).disabledTooltip
+      .en_US,
+    'First match',
+  );
+  assert.equal(
+    resolveDisabledState(config, {}, {}, system).disabledTooltip.en_US,
+    'Later match',
+  );
+  assert.equal(
+    resolveDisabledState(config, watched, external, { locked: false })
+      .disabledTooltip,
+    undefined,
+  );
+  assert.equal(
+    resolveDisabledState(
+      { ...config, disabled_tooltip_overrides: [] },
+      watched,
+      external,
+      system,
+    ).disabledTooltip.en_US,
+    'Default',
+  );
+  const unmatched = {
+    ...config,
+    disabled_tooltip_overrides: [config.disabled_tooltip_overrides[0]],
+  };
+  assert.equal(
+    resolveDisabledState(unmatched, watched, external, system).disabledTooltip
+      .en_US,
+    'Default',
+  );
+});