diff --git a/bin/version.ts b/bin/version.ts
index 27e4a617..000f8ebc 100644
--- a/bin/version.ts
+++ b/bin/version.ts
@@ -1,7 +1,7 @@
-import { $ } from "bun";
+import { execSync } from "node:child_process";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
-import * as p from "../package.json";
+import p from "../package.json" assert { type: "json" };
 
 export type VersionInfo = {
   hash: string;
@@ -17,11 +17,11 @@ export async function getVersionInfo(): Promise<VersionInfo> {
   return {
     hash:
       process.env.VITE_NPA_COMMIT_HASH ??
-      (await $`git rev-parse --short HEAD`.text()).trim(),
+      execSync("git rev-parse --short HEAD").toString().trim(),
     date: process.env.VITE_NPA_VERSION_DATE ?? date,
     status:
       process.env.VITE_NPA_GIT_STATUS ??
-      (await $`git status -s`.text()).replace(/\n$/, ""),
+      execSync("git status -s").toString().replace(/\n$/, ""),
     version: process.env.VITE_NPA_VERSION ?? p.version,
     display: process.env.VITE_NPA_VERSION_STRING ?? "",
   };
diff --git a/package.json b/package.json
index 67dbd317..5ef67770 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,13 @@
   "type": "module",
   "description": "Chrome extension for Neptune's Pride players.",
   "scripts": {
-    "start": "bun esbuild.dev.ts",
-    "build": "bun esbuild.npa.ts",
+    "start": "npx tsx esbuild.dev.ts",
+    "build": "npx tsx esbuild.npa.ts",
     "docs:book": "node scripts/build-npa-book.mjs",
-    "npa": "bun esbuild.npa.ts",
-    "lint": "bunx biome check src",
-    "lint:fix": "bunx biome check --write src",
-    "format": "bunx biome format --write src tests",
+    "npa": "npx tsx esbuild.npa.ts",
+    "lint": "npx biome check src",
+    "lint:fix": "npx biome check --write src",
+    "format": "npx biome format --write src tests",
     "test": "vitest run --coverage",
     "test:watch": "vitest watch --coverage",
     "test:unit": "vitest run --coverage",
diff --git a/tests/playwright/001-battle-hud/screenshots/000-route-enemy-fleet-relative-eta.png b/tests/playwright/001-battle-hud/screenshots/000-route-enemy-fleet-relative-eta.png
index 57c2f52a..8984c3b3 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/000-route-enemy-fleet-relative-eta.png and b/tests/playwright/001-battle-hud/screenshots/000-route-enemy-fleet-relative-eta.png differ
diff --git a/tests/playwright/001-battle-hud/screenshots/001-cycle-to-clock-time.png b/tests/playwright/001-battle-hud/screenshots/001-cycle-to-clock-time.png
index f63df460..b5eab3a6 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/001-cycle-to-clock-time.png and b/tests/playwright/001-battle-hud/screenshots/001-cycle-to-clock-time.png differ
diff --git a/tests/playwright/001-battle-hud/screenshots/002-cycle-to-relative-ticks.png b/tests/playwright/001-battle-hud/screenshots/002-cycle-to-relative-ticks.png
index eed009d2..30c9fd34 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/002-cycle-to-relative-ticks.png and b/tests/playwright/001-battle-hud/screenshots/002-cycle-to-relative-ticks.png differ
diff --git a/tests/playwright/001-battle-hud/screenshots/003-cycle-to-absolute-tick-numbers.png b/tests/playwright/001-battle-hud/screenshots/003-cycle-to-absolute-tick-numbers.png
index 50049748..af080346 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/003-cycle-to-absolute-tick-numbers.png and b/tests/playwright/001-battle-hud/screenshots/003-cycle-to-absolute-tick-numbers.png differ
diff --git a/tests/playwright/001-battle-hud/screenshots/004-apply-enemy-ws-plus-one.png b/tests/playwright/001-battle-hud/screenshots/004-apply-enemy-ws-plus-one.png
index 9016debd..a61e34c4 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/004-apply-enemy-ws-plus-one.png and b/tests/playwright/001-battle-hud/screenshots/004-apply-enemy-ws-plus-one.png differ
diff --git a/tests/playwright/001-battle-hud/screenshots/005-clear-combat-handicap.png b/tests/playwright/001-battle-hud/screenshots/005-clear-combat-handicap.png
index 50049748..af080346 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/005-clear-combat-handicap.png and b/tests/playwright/001-battle-hud/screenshots/005-clear-combat-handicap.png differ
diff --git a/tests/playwright/001-battle-hud/screenshots/006-apply-my-ws-minus-one.png b/tests/playwright/001-battle-hud/screenshots/006-apply-my-ws-minus-one.png
index 0e9f1b71..b828cf40 100644
Binary files a/tests/playwright/001-battle-hud/screenshots/006-apply-my-ws-minus-one.png and b/tests/playwright/001-battle-hud/screenshots/006-apply-my-ws-minus-one.png differ
diff --git a/tests/playwright/005-empires/005-empires.spec.ts b/tests/playwright/005-empires/005-empires.spec.ts
new file mode 100644
index 00000000..d3b7f1e2
--- /dev/null
+++ b/tests/playwright/005-empires/005-empires.spec.ts
@@ -0,0 +1,180 @@
+import { expect, test } from "../fixtures";
+import { waitForAgentHooks } from "../helpers";
+import { TestStepHelper } from "../support/test-step-helper";
+
+const PLAYER_11_UID = 11;
+const PLAYER_11_ALIAS = "Eggers";
+const PLAYER_14_UID = 14;
+const PLAYER_14_ALIAS = "karppo";
+
+test.setTimeout(60000);
+
+test("documents the empires and alliance management", async ({ appPage }, testInfo) => {
+  const helper = new TestStepHelper(appPage, testInfo);
+
+  helper.setMetadata({
+    title: "Empires and Alliances Validation",
+    validationGoal: "Verify that player colours can be customized and alliances can be defined by shared colours.",
+    docsTitle: "Managing Empires and Alliances",
+    docsSummary: "NPA allows you to recolor players on the map and group them into alliances for better reporting and coordination.",
+    bookSection: "Empires",
+  });
+
+  await waitForAgentHooks(appPage);
+
+  // Ensure game data is loaded
+  await appPage.waitForFunction(() => {
+    const np = (window as any).NeptunesPride;
+    return np?.universe?.galaxy?.players && Object.keys(np.universe.galaxy.players).length > 0;
+  }, { timeout: 30000 });
+
+  // Select a star to ensure UI state is stable
+  await appPage.evaluate((starUid) => {
+    (window as any).NeptunesPride.np.trigger("show_star_uid", String(starUid));
+  }, 22); // Eggers' home star
+
+  await helper.step("initial-map", {
+    description: "Show the map with default player colors",
+    verifications: [
+      {
+        spec: "The map is visible",
+        check: async () => {
+          await expect(appPage.locator("canvas")).toBeVisible();
+        },
+      },
+    ],
+    documentation: {
+      summary: "By default, players are shown with their original game colors. This ensures that the map remains familiar while you begin your tactical planning.",
+      howToUse: ["Open the map to see the current state of the galaxy."],
+      expectedResult: ["Players are distinguished by their default colors on the map and in reports."],
+    },
+  });
+
+  await helper.step("colours-and-shapes-screen", {
+    description: "Open the Colours and Shapes configuration screen",
+    verifications: [
+      {
+        spec: "The Colours and Shapes screen is visible after pressing Ctrl+a",
+        check: async () => {
+          await appPage.evaluate(() => {
+              (window as any).Mousetrap.trigger("ctrl+a");
+          });
+          
+          await expect(appPage.locator("body")).toContainText("Alliances by:", { timeout: 15000 });
+        },
+      },
+    ],
+    documentation: {
+      summary: "Press **Ctrl+a** to open the Colours and Shapes screen. This tool is essential for clarifying the political landscape by assigning custom colors and shapes to players.",
+      howToUse: ["Press **Ctrl+a** while viewing the map."],
+      expectedResult: ["A configuration screen appears listing all players in the game, along with color swatches and shape options."],
+    },
+  });
+
+  await helper.step("recolouring-player", {
+    description: "Change Player 11 (Eggers) to red",
+    verifications: [
+      {
+        spec: "Eggers' color input is updated to red",
+        check: async () => {
+          await appPage.evaluate((alias) => {
+            const allElements = Array.from(document.querySelectorAll('*'));
+            const header = allElements.find(el => el.textContent === "NP Agent" || el.textContent === "Colours and Shapes");
+            const container = header?.parentElement;
+            if (!container) throw new Error("Container not found");
+            const playerLabel = Array.from(container.querySelectorAll('.pad12')).find(el => el.textContent === alias);
+            if (!playerLabel) throw new Error(`Label for ${alias} not found`);
+            const labelRect = playerLabel.getBoundingClientRect();
+            const inputs = Array.from(container.querySelectorAll('input'));
+            const rowInputs = inputs.filter(input => Math.abs(input.getBoundingClientRect().top - labelRect.top) < 20);
+            const colorInput = rowInputs[1];
+            colorInput.value = "#ff0000";
+            colorInput.dispatchEvent(new Event("input", { bubbles: true }));
+            colorInput.dispatchEvent(new Event("change", { bubbles: true }));
+            colorInput.focus();
+            colorInput.blur();
+          }, PLAYER_11_ALIAS);
+        },
+      },
+    ],
+    documentation: {
+      summary: "To highlight a specific player, such as a primary target, you can change their color. In this example, we've changed `Eggers` to bright red.",
+      howToUse: [
+        "Locate the player you want to recolor in the list.",
+        "Click the color hex field and type a new color (e.g., `#ff0000` for red).",
+      ],
+      expectedResult: [
+        "The player's name and territory will now be rendered in the selected color.",
+      ],
+    },
+  });
+
+  await helper.step("defining-alliances", {
+    description: "Group Player 14 (karppo) into the same alliance by color",
+    verifications: [
+      {
+        spec: "karppo's color is also set to red",
+        check: async () => {
+          await appPage.evaluate((alias) => {
+            const allElements = Array.from(document.querySelectorAll('*'));
+            const header = allElements.find(el => el.textContent === "NP Agent" || el.textContent === "Colours and Shapes");
+            const container = header?.parentElement;
+            if (!container) throw new Error("Container not found");
+            const playerLabel = Array.from(container.querySelectorAll('.pad12')).find(el => el.textContent === alias);
+            const labelRect = playerLabel?.getBoundingClientRect();
+            if (!labelRect) throw new Error(`Rect for ${alias} not found`);
+            const inputs = Array.from(container.querySelectorAll('input'));
+            const rowInputs = inputs.filter(input => Math.abs(input.getBoundingClientRect().top - labelRect.top) < 20);
+            const colorInput = rowInputs[1];
+            colorInput.value = "#ff0000";
+            colorInput.dispatchEvent(new Event("input", { bubbles: true }));
+            colorInput.dispatchEvent(new Event("change", { bubbles: true }));
+            colorInput.focus();
+            colorInput.blur();
+          }, PLAYER_14_ALIAS);
+        },
+      },
+    ],
+    documentation: {
+      summary: "By assigning the same color to multiple players, NPA treats them as an alliance in reports.",
+      howToUse: [
+        "Give two or more players the exact same color hex value.",
+      ],
+      expectedResult: [
+        "The players will share the same color on the map, visually representing their alliance.",
+      ],
+    },
+  });
+
+  await helper.step("empires-report", {
+    description: "Open the Empires report to see the grouped alliance",
+    verifications: [
+      {
+        spec: "The Empires report is visible with the expected alliance grouping",
+        check: async () => {
+          // ctrl+l populates the clipboard/state
+          await appPage.evaluate(() => {
+              (window as any).Mousetrap.trigger("ctrl+l");
+          });
+          // backtick opens the UI to show the last report
+          await appPage.keyboard.press("Backquote");
+          
+          // Wait for specific report text that indicates the NPA report screen is open
+          await expect(appPage.locator("body")).toContainText("All Surviving Empires", { timeout: 15000 });
+        },
+      },
+    ],
+    documentation: {
+      summary: "The Empires report uses your custom colors to group players. Press **Ctrl+l** to populate the report data to the clipboard, and then press **`** (backtick) to view it in the UI.",
+      howToUse: [
+        "Press **Ctrl+l** to generate the report.",
+        "Press **`** (backtick) to open the NPA report viewer.",
+      ],
+      expectedResult: [
+        "Players with the same color are listed together under an 'Alliance' header in the report.",
+      ],
+    },
+  });
+
+  helper.generateArtifacts();
+});
diff --git a/tests/playwright/005-empires/DOCS.md b/tests/playwright/005-empires/DOCS.md
new file mode 100644
index 00000000..06f07ed5
--- /dev/null
+++ b/tests/playwright/005-empires/DOCS.md
@@ -0,0 +1,65 @@
+# Managing Empires and Alliances
+
+NPA allows you to recolor players on the map and group them into alliances for better reporting and coordination.
+
+## Show the map with default player colors
+
+By default, players are shown with their original game colors. This ensures that the map remains familiar while you begin your tactical planning.
+
+![Show the map with default player colors](./screenshots/000-initial-map.png)
+
+### How to use it
+- Open the map to see the current state of the galaxy.
+
+### What to expect
+- Players are distinguished by their default colors on the map and in reports.
+
+## Open the Colours and Shapes configuration screen
+
+Press **Ctrl+a** to open the Colours and Shapes screen. This tool is essential for clarifying the political landscape by assigning custom colors and shapes to players.
+
+![Open the Colours and Shapes configuration screen](./screenshots/001-colours-and-shapes-screen.png)
+
+### How to use it
+- Press **Ctrl+a** while viewing the map.
+
+### What to expect
+- A configuration screen appears listing all players in the game, along with color swatches and shape options.
+
+## Change Player 11 (Eggers) to red
+
+To highlight a specific player, such as a primary target, you can change their color. In this example, we've changed `Eggers` to bright red.
+
+![Change Player 11 (Eggers) to red](./screenshots/002-recolouring-player.png)
+
+### How to use it
+- Locate the player you want to recolor in the list.
+- Click the color hex field and type a new color (e.g., `#ff0000` for red).
+
+### What to expect
+- The player's name and territory will now be rendered in the selected color.
+
+## Group Player 14 (karppo) into the same alliance by color
+
+By assigning the same color to multiple players, NPA treats them as an alliance in reports.
+
+![Group Player 14 (karppo) into the same alliance by color](./screenshots/003-defining-alliances.png)
+
+### How to use it
+- Give two or more players the exact same color hex value.
+
+### What to expect
+- The players will share the same color on the map, visually representing their alliance.
+
+## Open the Empires report to see the grouped alliance
+
+The Empires report uses your custom colors to group players. Press **Ctrl+l** to populate the report data to the clipboard, and then press **`** (backtick) to view it in the UI.
+
+![Open the Empires report to see the grouped alliance](./screenshots/004-empires-report.png)
+
+### How to use it
+- Press **Ctrl+l** to generate the report.
+- Press **`** (backtick) to open the NPA report viewer.
+
+### What to expect
+- Players with the same color are listed together under an 'Alliance' header in the report.
diff --git a/tests/playwright/005-empires/README.md b/tests/playwright/005-empires/README.md
new file mode 100644
index 00000000..5b5b834a
--- /dev/null
+++ b/tests/playwright/005-empires/README.md
@@ -0,0 +1,42 @@
+# Empires and Alliances Validation
+
+Verify that player colours can be customized and alliances can be defined by shared colours.
+
+Documentation target: `Empires`
+
+Companion user documentation: [DOCS.md](./DOCS.md)
+
+## Show the map with default player colors
+
+![Show the map with default player colors](./screenshots/000-initial-map.png)
+
+### Verifications
+- [x] The map is visible
+
+## Open the Colours and Shapes configuration screen
+
+![Open the Colours and Shapes configuration screen](./screenshots/001-colours-and-shapes-screen.png)
+
+### Verifications
+- [x] The Colours and Shapes screen is visible after pressing Ctrl+a
+
+## Change Player 11 (Eggers) to red
+
+![Change Player 11 (Eggers) to red](./screenshots/002-recolouring-player.png)
+
+### Verifications
+- [x] Eggers' color input is updated to red
+
+## Group Player 14 (karppo) into the same alliance by color
+
+![Group Player 14 (karppo) into the same alliance by color](./screenshots/003-defining-alliances.png)
+
+### Verifications
+- [x] karppo's color is also set to red
+
+## Open the Empires report to see the grouped alliance
+
+![Open the Empires report to see the grouped alliance](./screenshots/004-empires-report.png)
+
+### Verifications
+- [x] The Empires report is visible with the expected alliance grouping
diff --git a/tests/playwright/005-empires/screenshots/000-initial-map.png b/tests/playwright/005-empires/screenshots/000-initial-map.png
new file mode 100644
index 00000000..a29536f0
Binary files /dev/null and b/tests/playwright/005-empires/screenshots/000-initial-map.png differ
diff --git a/tests/playwright/005-empires/screenshots/001-colours-and-shapes-screen.png b/tests/playwright/005-empires/screenshots/001-colours-and-shapes-screen.png
new file mode 100644
index 00000000..903bcdcf
Binary files /dev/null and b/tests/playwright/005-empires/screenshots/001-colours-and-shapes-screen.png differ
diff --git a/tests/playwright/005-empires/screenshots/002-recolouring-player.png b/tests/playwright/005-empires/screenshots/002-recolouring-player.png
new file mode 100644
index 00000000..8af68a21
Binary files /dev/null and b/tests/playwright/005-empires/screenshots/002-recolouring-player.png differ
diff --git a/tests/playwright/005-empires/screenshots/003-defining-alliances.png b/tests/playwright/005-empires/screenshots/003-defining-alliances.png
new file mode 100644
index 00000000..da999c03
Binary files /dev/null and b/tests/playwright/005-empires/screenshots/003-defining-alliances.png differ
diff --git a/tests/playwright/005-empires/screenshots/004-empires-report.png b/tests/playwright/005-empires/screenshots/004-empires-report.png
new file mode 100644
index 00000000..e8557b39
Binary files /dev/null and b/tests/playwright/005-empires/screenshots/004-empires-report.png differ
diff --git a/tests/playwright/012-autocomplete/012-autocomplete.spec.ts b/tests/playwright/012-autocomplete/012-autocomplete.spec.ts
new file mode 100644
index 00000000..bca74841
--- /dev/null
+++ b/tests/playwright/012-autocomplete/012-autocomplete.spec.ts
@@ -0,0 +1,130 @@
+import { expect, test } from "../fixtures";
+import { waitForAgentHooks } from "../helpers";
+import { TestStepHelper } from "../support/test-step-helper";
+
+test("documents the autocomplete behavior", async ({ appPage }, testInfo) => {
+  const helper = new TestStepHelper(appPage, testInfo);
+
+  helper.setMetadata({
+    title: "Autocomplete Scenarios",
+    validationGoal: "Verify and document NPA's autocomplete triggers and cycling behavior in the game's messaging UI.",
+    docsTitle: "Autocomplete",
+    docsSummary: "Autocomplete is a powerful feature when composing messages to other players. NPA provides several triggers to help you quickly insert player names and star names into text fields.",
+    bookSection: "012-autocomplete",
+  });
+
+  await helper.step("player-id-autocomplete", {
+    description: "Autocompleting a player name by their ID",
+    verifications: [
+      {
+        spec: "Typing `[[1` and pressing `]` inserts the name of the player with ID 1.",
+        check: async () => {
+          await waitForAgentHooks(appPage);
+          
+          // Open the game's "Compose" screen
+          await appPage.evaluate(() => (window as any).NeptunesPride.crux.trigger("show_screen", "compose"));
+          
+          const textarea = appPage.locator('textarea');
+          await expect(textarea).toBeVisible();
+          await textarea.focus();
+
+          await textarea.pressSequentially("Hello [[1");
+          
+          // Pressing ] should autocomplete player 1
+          await textarea.press("]");
+          
+          // In our test data, player 1 is Gorn (who is AFK)
+          await expect(textarea).toHaveValue(/Hello \[\[Gorn.*\]\]/);
+        }
+      }
+    ],
+    documentation: {
+      summary: "You can quickly insert a player's name by their numeric ID when writing messages.",
+      howToUse: [
+        "Open the **Compose** message screen.",
+        "Type `[[` followed by the player's ID number.",
+        "Press **]** to complete the name."
+      ],
+      expectedResult: [
+        "The `[[ID]]` sequence is replaced by the player's full alias enclosed in double brackets."
+      ]
+    }
+  });
+
+  await helper.step("player-name-cycling", {
+    description: "Cycling through multiple players matching a prefix",
+    verifications: [
+      {
+        spec: "Repeatedly pressing `]` cycles through all matching player names.",
+        check: async () => {
+          const textarea = appPage.locator('textarea');
+          // Clear and reset state
+          await textarea.fill("");
+          await textarea.click(); // ensure focus and state reset
+          
+          await textarea.pressSequentially("Hello [[G");
+          
+          // Pressing ] should cycle through players starting with G
+          // Order: Gameling, Gorn (AFK), GrapeMaster, GrugGarKon, godchat
+          await textarea.press("]");
+          await expect(textarea).toHaveValue(/Hello \[\[Gameling.*\]\]/);
+          
+          await textarea.press("]");
+          await expect(textarea).toHaveValue(/Hello \[\[Gorn.*\]\]/);
+          
+          await textarea.press("]");
+          await expect(textarea).toHaveValue(/Hello \[\[GrapeMaster.*\]\]/);
+
+          await textarea.press("]");
+          await expect(textarea).toHaveValue(/Hello \[\[GrugGarKon.*\]\]/);
+
+          await textarea.press("]");
+          await expect(textarea).toHaveValue(/Hello \[\[godchat.*\]\]/);
+        }
+      }
+    ],
+    documentation: {
+      summary: "When multiple players match your search, you can cycle through them using the completion key.",
+      howToUse: [
+        "Type `[[` followed by the start of a player's name.",
+        "Press **]** repeatedly to cycle through all matching players."
+      ],
+      expectedResult: [
+        "NPA cycles through all players whose names contain the text you typed."
+      ]
+    }
+  });
+
+  await helper.step("star-name-cycling", {
+    description: "Autocompleting star names",
+    verifications: [
+      {
+        spec: "Star names are also included in the autocomplete suggestions.",
+        check: async () => {
+          const textarea = appPage.locator('textarea');
+          // Clear and reset state
+          await textarea.fill("");
+          await textarea.click();
+
+          await textarea.pressSequentially("Meet me at [[Ald");
+          
+          // Should match Aldebaran (it comes before Alderamin)
+          await textarea.press("]");
+          await expect(textarea).toHaveValue("Meet me at [[Aldebaran]]");
+        }
+      }
+    ],
+    documentation: {
+      summary: "Star names can also be autocompleted, making it easy to coordinate with allies.",
+      howToUse: [
+        "Type `[[` followed by part of a star's name.",
+        "Press **]** to complete the name."
+      ],
+      expectedResult: [
+        "The star name is inserted, correctly formatted for game links."
+      ]
+    }
+  });
+
+  helper.generateArtifacts();
+});
diff --git a/tests/playwright/012-autocomplete/DOCS.md b/tests/playwright/012-autocomplete/DOCS.md
new file mode 100644
index 00000000..628d63fa
--- /dev/null
+++ b/tests/playwright/012-autocomplete/DOCS.md
@@ -0,0 +1,43 @@
+# Autocomplete
+
+Autocomplete is a powerful feature when composing messages to other players. NPA provides several triggers to help you quickly insert player names and star names into text fields.
+
+## Autocompleting a player name by their ID
+
+You can quickly insert a player's name by their numeric ID when writing messages.
+
+![Autocompleting a player name by their ID](./screenshots/000-player-id-autocomplete.png)
+
+### How to use it
+- Open the **Compose** message screen.
+- Type `[[` followed by the player's ID number.
+- Press **]** to complete the name.
+
+### What to expect
+- The `[[ID]]` sequence is replaced by the player's full alias enclosed in double brackets.
+
+## Cycling through multiple players matching a prefix
+
+When multiple players match your search, you can cycle through them using the completion key.
+
+![Cycling through multiple players matching a prefix](./screenshots/001-player-name-cycling.png)
+
+### How to use it
+- Type `[[` followed by the start of a player's name.
+- Press **]** repeatedly to cycle through all matching players.
+
+### What to expect
+- NPA cycles through all players whose names contain the text you typed.
+
+## Autocompleting star names
+
+Star names can also be autocompleted, making it easy to coordinate with allies.
+
+![Autocompleting star names](./screenshots/002-star-name-cycling.png)
+
+### How to use it
+- Type `[[` followed by part of a star's name.
+- Press **]** to complete the name.
+
+### What to expect
+- The star name is inserted, correctly formatted for game links.
diff --git a/tests/playwright/012-autocomplete/README.md b/tests/playwright/012-autocomplete/README.md
new file mode 100644
index 00000000..bdfa5cce
--- /dev/null
+++ b/tests/playwright/012-autocomplete/README.md
@@ -0,0 +1,28 @@
+# Autocomplete Scenarios
+
+Verify and document NPA's autocomplete triggers and cycling behavior in the game's messaging UI.
+
+Documentation target: `012-autocomplete`
+
+Companion user documentation: [DOCS.md](./DOCS.md)
+
+## Autocompleting a player name by their ID
+
+![Autocompleting a player name by their ID](./screenshots/000-player-id-autocomplete.png)
+
+### Verifications
+- [x] Typing `[[1` and pressing `]` inserts the name of the player with ID 1.
+
+## Cycling through multiple players matching a prefix
+
+![Cycling through multiple players matching a prefix](./screenshots/001-player-name-cycling.png)
+
+### Verifications
+- [x] Repeatedly pressing `]` cycles through all matching player names.
+
+## Autocompleting star names
+
+![Autocompleting star names](./screenshots/002-star-name-cycling.png)
+
+### Verifications
+- [x] Star names are also included in the autocomplete suggestions.
diff --git a/tests/playwright/012-autocomplete/screenshots/000-player-id-autocomplete.png b/tests/playwright/012-autocomplete/screenshots/000-player-id-autocomplete.png
new file mode 100644
index 00000000..3d8bc297
Binary files /dev/null and b/tests/playwright/012-autocomplete/screenshots/000-player-id-autocomplete.png differ
diff --git a/tests/playwright/012-autocomplete/screenshots/001-player-name-cycling.png b/tests/playwright/012-autocomplete/screenshots/001-player-name-cycling.png
new file mode 100644
index 00000000..c8b4b7aa
Binary files /dev/null and b/tests/playwright/012-autocomplete/screenshots/001-player-name-cycling.png differ
diff --git a/tests/playwright/012-autocomplete/screenshots/002-star-name-cycling.png b/tests/playwright/012-autocomplete/screenshots/002-star-name-cycling.png
new file mode 100644
index 00000000..0fa0cfc1
Binary files /dev/null and b/tests/playwright/012-autocomplete/screenshots/002-star-name-cycling.png differ