import { describe, expect, it } from 'vitest';

import builtinToolsFormSource from './components/AgentBuiltinToolsForm.vue?raw';
import inspectorSource from './components/AgentInspectorPanel.vue?raw';
import tryoutPanelSource from './components/AgentTryoutPanel.vue?raw';

describe('agent Studio responsive layout contract', () => {
  it('keeps the inspector usable at the 768px breakpoint', () => {
    expect(inspectorSource).toContain('@media (max-width: 900px)');
    expect(inspectorSource).toMatch(
      /@media \(max-width: 900px\)[\s\S]*?inset:[\s\S]*?var\(--space-4\)[\s\S]*?96px;/,
    );
  });

  it('keeps the inspector and builtin tool controls usable at 375px', () => {
    expect(inspectorSource).toMatch(
      /@media \(max-width: 480px\)[\s\S]*?inset:[\s\S]*?var\(--space-2\)[\s\S]*?96px;/,
    );
    expect(builtinToolsFormSource).toMatch(
      /@media \(max-width: 480px\)[\s\S]*?--agent-tool-approval-column: 72px;/,
    );
    expect(builtinToolsFormSource).toContain('white-space: normal;');
    expect(builtinToolsFormSource).toContain('-webkit-line-clamp: 2;');
  });

  it('supports a centered animated tryout surface without remounting it', () => {
    expect(inspectorSource).toContain('label="内置工具"');
    expect(inspectorSource).toContain(':expanded="tryoutExpanded"');
    expect(inspectorSource).toContain("'is-tryout-expanded'");
    expect(inspectorSource).toContain('--motion-duration-medium');
    expect(inspectorSource).toContain(
      '@media (prefers-reduced-motion: reduce)',
    );
    expect(tryoutPanelSource).toContain(':aria-pressed="Boolean(expanded)"');
  });

  it('keeps clear disabled throughout active output and async cleanup', () => {
    expect(tryoutPanelSource).toContain(
      ':disabled="loading || approvalLoading || clearing"',
    );
    expect(tryoutPanelSource).toContain(
      'if (loading.value || approvalLoading.value || clearing.value)',
    );
  });
});
