fix(ui): keep permission dock buttons in view on long requests - #33563

import { chromium } from "@playwright/test";
import { spawn } from "node:child_process";

const appPort = 4444;
const apiPort = 4096;
const directory = "/tmp/perm-verify-project";
const projectID = "proj_perm_verify";
const sessionID = "ses_perm_verify";

const encodePath = (value) =>
  Buffer.from(value)
    .toString("base64")
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=/g, "");

const json = (route, body, headers = {}) =>
  route.fulfill({
    status: 200,
    contentType: "application/json",
    headers: {
      "access-control-allow-origin": "*",
      "access-control-expose-headers": "x-next-cursor",
      ...headers,
    },
    body: JSON.stringify(body ?? null),
  });

const project = {
  id: projectID,
  worktree: directory,
  vcs: "git",
  name: "perm-verify",
  time: { created: 1700000000000, updated: 1700000000000 },
  sandboxes: [],
};

const provider = {
  all: [
    {
      id: "opencode",
      name: "OpenCode",
      models: {
        "claude-opus-4-6": {
          id: "claude-opus-4-6",
          name: "Claude Opus 4.6",
          limit: { context: 200_000 },
        },
      },
    },
  ],
  connected: ["opencode"],
  default: { providerID: "opencode", modelID: "claude-opus-4-6" },
};

const sessions = [
  {
    id: sessionID,
    slug: "perm-verify",
    projectID,
    directory,
    title: "Permission dock verification",
    version: "dev",
    time: { created: 1700000000000, updated: 1700000000000 },
  },
];

const longPatterns = Array.from(
  { length: 40 },
  (_, index) => `pattern-${index}-${"long-permission-pattern-".repeat(16)}.txt`
);

const permissionRequest = {
  id: "per_perm_verify_0001",
  sessionID,
  permission: "bash",
  patterns: longPatterns,
  metadata: {},
  always: [],
  tool: { messageID: "msg_assistant_0001", callID: "call_0001" },
};

const messages = [
  {
    info: {
      id: "msg_user_0001",
      sessionID,
      role: "user",
      time: { created: 1700000000000 },
      summary: { diffs: [] },
      agent: "build",
      model: {
        providerID: "opencode",
        modelID: "claude-opus-4-6",
        variant: "max",
      },
    },
    parts: [
      {
        id: "prt_user_text_0001",
        sessionID,
        messageID: "msg_user_0001",
        type: "text",
        text: "Run the command that needs permission.",
      },
    ],
  },
  {
    info: {
      id: "msg_assistant_0001",
      sessionID,
      role: "assistant",
      time: { created: 1700000001000, completed: 1700000008000 },
      parentID: "msg_user_0001",
      modelID: "claude-opus-4-6",
      providerID: "opencode",
      mode: "build",
      agent: "build",
      path: { cwd: directory, root: directory },
      cost: 0.01,
      tokens: {
        input: 100,
        output: 200,
        reasoning: 0,
        cache: { read: 0, write: 0 },
      },
      variant: "max",
      finish: "stop",
    },
    parts: [
      {
        id: "prt_tool_bash_0001",
        sessionID,
        messageID: "msg_assistant_0001",
        type: "tool",
        callID: "call_0001",
        tool: "bash",
        state: {
          status: "completed",
          input: { command: "bun typecheck" },
          output: "ok",
          title: "bun typecheck",
          metadata: {},
          time: { start: 1700000001000, end: 1700000001400 },
        },
      },
    ],
  },
];

const app = spawn(
  "bun",
  ["dev", "--", "--host", "0.0.0.0", "--port", String(appPort)],
  {
    cwd: process.cwd(),
    stdio: "inherit",
    env: {
      ...process.env,
      VITE_OPENCODE_SERVER_HOST: "127.0.0.1",
      VITE_OPENCODE_SERVER_PORT: String(apiPort),
    },
  }
);

const waitForApp = async () => {
  for (let attempt = 0; attempt < 120; attempt++) {
    try {
      const response = await fetch(`http://127.0.0.1:${appPort}`);
      if (response.ok) return;
    } catch {}
    await new Promise((resolve) => setTimeout(resolve, 500));
  }
  throw new Error(`Timed out waiting for app on :${appPort}`);
};

try {
  await waitForApp();

  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1200, height: 762 },
  });

  await context.addInitScript(
    ({ directory }) => {
      localStorage.setItem(
        "settings.v3",
        JSON.stringify({
          general: {
            editToolPartsExpanded: true,
            shellToolPartsExpanded: true,
          },
        })
      );
      localStorage.setItem(
        "opencode.global.dat:server",
        JSON.stringify({
          projects: { local: [{ worktree: directory, expanded: true }] },
          lastProject: { local: directory },
        })
      );
    },
    { directory }
  );

  await context.route("**/*", async (route) => {
    const url = new URL(route.request().url());
    if (url.port !== String(apiPort)) return route.fallback();

    const emptyList = new Set([
      "/skill",
      "/command",
      "/lsp",
      "/formatter",
      "/question",
      "/vcs/status",
      "/vcs/diff",
    ]);
    const emptyObject = new Set([
      "/global/config",
      "/config",
      "/provider/auth",
      "/mcp",
      "/session/status",
    ]);
    if (url.pathname === "/global/event" || url.pathname === "/event")
      return json(route, null);
    if (url.pathname === "/global/health")
      return json(route, { healthy: true });
    if (emptyObject.has(url.pathname)) return json(route, {});
    if (emptyList.has(url.pathname)) return json(route, []);

    const staticRoutes = {
      "/provider": provider,
      "/path": {
        state: directory,
        config: directory,
        worktree: directory,
        directory,
        home: "/tmp",
      },
      "/project": [project],
      "/project/current": project,
      "/agent": [{ name: "build", mode: "primary" }],
      "/vcs": { branch: "main", default_branch: "main" },
      "/session": sessions,
      "/permission": [permissionRequest],
    };
    if (url.pathname in staticRoutes)
      return json(route, staticRoutes[url.pathname]);

    const sessionMatch = url.pathname.match(/^\/session\/([^/]+)$/);
    if (sessionMatch)
      return json(
        route,
        sessions.find((session) => session.id === sessionMatch[1]) ?? {}
      );
    if (/^\/session\/[^/]+\/(children|todo|diff)$/.test(url.pathname))
      return json(route, []);
    if (/^\/session\/[^/]+\/message$/.test(url.pathname))
      return json(route, messages);

    return json(route, {});
  });

  const page = await context.newPage();
  await page.goto(
    `http://127.0.0.1:${appPort}/${encodePath(directory)}/session/${sessionID}`
  );
  await page.waitForSelector(
    '[data-component="dock-prompt"][data-kind="permission"]'
  );

  await new Promise((resolve) => process.stdin.once("data", resolve));
  await browser.close();
} finally {
  app.kill("SIGTERM");
}