Chopin design audit

;","export function DesignAuditPage() {","```tsx","- [ ] **Step 5: Add a minimal labelled page and verify**","`import.meta.env.DEV`-guarded branch so a normal production build removes the route chunk.","`./design-audit/page` and render its `DesignAuditPage`. The import must be inside the","Keep the current application root unchanged for ordinary paths. On the audit path, dynamically import","- [ ] **Step 4: Add lazy route selection to `main.tsx`**","\treturn development && pathname === \"/design-audit\";","export function isDesignAuditRoute(pathname: string, development: boolean): boolean {","- [ ] **Step 3: Add the pure route predicate**","Expected: FAIL because `route.ts` does not exist.","Run: `bun test apps/web/src/design-audit/route.test.ts`","- [ ] **Step 2: Verify the test fails**","});","\t });","\t\t expect(isDesignAuditRoute(\"/design-audit/extra\", true)).toBe(false);","\t\t expect(isDesignAuditRoute(\"/design-audit\", false)).toBe(false);","\t\t expect(isDesignAuditRoute(\"/design-audit\", true)).toBe(true);","\t it(\"exists only in development at its exact path\", () => {","describe(\"design audit route\", () => {","import { isDesignAuditRoute } from \"./route\";","import { describe, expect, it } from \"bun:test\";","- [ ] **Step 1: Write the route test**","- Modify: `apps/web/src/main.tsx`","- Create: `apps/web/src/design-audit/page.tsx`","- Create: `apps/web/src/design-audit/route.test.ts`","- Create: `apps/web/src/design-audit/route.ts`","### Task 1: Development-only route","normalisation plan; naming exact remediation files before seeing the catalogue would be guesswork.","This plan builds the inspection surface. Screenshot findings will produce a separate, evidence-based","---","**Tech Stack:** React 19, TypeScript, Vite, Tailwind CSS v4, MDXEditor/Lexical, Bun tests.","**Architecture:** `apps/web` owns a lazily loaded `/design-audit` route. Small catalogue modules compose real web and editor components; pure fixture data describes coverage. A read-only static editor entry point renders authored MDX through the production dialect and widget renderers without opening a WebSocket.","**Goal:** Build a development-only page that exposes Chopin's foundations, controls, application surfaces, and authored-content components in deterministic visual states.","> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.","# Design Audit Catalogue Implementation Plan","9bf7810a","docs/superpowers/plans/2026-08-24-archived-chats-sidebar.md",{"_229":1528,"_231":232},378,[900],{"_46":40,"_48":40,"_49":47,"_50":898,"_51":901},[902,903,904,905,906,907,908,909,910,911,912,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,930,931,932,933,934,935,936,937,938,939,940,941,942,943,944,945,946,947,948,949,950,951,952,953,954,955,956,957,958,959,960,961,962,963,964,965,966,967,968,969,970,971,972,973,974,975,976,977,978,979,980,981,982,983,984,985,986,987,988,989,990,991,992,993,994,995,996,997,998,999,1000,1001,1002,1003,1004,1005,1006,1007,1008,1009,1010,1011,1012,1013,1014,1015,1016,1017,1018,1019,1020,1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032,1033,1034,1035,1036,1037,1038,1039,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096,1097,1098,1099,1100,1101,1102,1103,1104,1105,1106,1107,1108,1109,1110,1111,1112,1113,1114,1115,1116,1117,1118,1119,1120,1121,1122,1123,1124,1125,1126,1127,1128,1129,1130,1131,1132,1133,1134,1135,1136,1137,1138,1139,1140,1141,1142,1143,1144,1145,1146,1147,1148,1149,1150,1151,1152,1153,1154,1155,1156,1157,1158,1159,1160,1161,1162,1163,1164,1165,1166,1167,1168,1169,1170,1171,1172,1173,1174,1175,1176,1177,1178,1179,1180,1181,1182,1183,1184,1185,1186,1187,1188,1189,1190,1191,1192,1193,1194,1195,1196,1197,1198,1199,1200,1201,1202,1203,1204,1205,1206,1207,1208,1209,1210,1211,1212,1213,1214,1215,1216,1217,1218,1219,1220,1221,1222,1223,1224,1225,1226,1227,1228,1229,1230,1231,1232,1233,1234,1235,1236,1237,1238,1239,1240,1241,1242,1243,1244,1245,1246,1247,1248,1249,1250,1251,1252,1253,1254,1255,1256,1257,1258,1259,1260,1261,1262,1263,1264,1265,1266,1267,1268,1269,1270,1271,1272,1273,1274,1275,1276,1277,1278,1279],{"_154":39,"_155":1527},{"_154":39,"_155":161},{"_154":39,"_155":893},{"_154":39,"_155":161},{"_154":39,"_155":1526},{"_154":39,"_155":161},{"_154":39,"_155":1525},{"_154":39,"_155":1524},{"_154":39,"_155":1523},{"_154":39,"_155":1522},{"_154":39,"_155":161},{"_154":39,"_155":1521},{"_154":39,"_155":161},{"_154":39,"_155":1520},{"_154":39,"_155":161},{"_154":39,"_155":1519},{"_154":39,"_155":161},{"_154":39,"_155":1518},{"_154":39,"_155":1517},{"_154":39,"_155":1516},{"_154":39,"_155":1515},{"_154":39,"_155":1514},{"_154":39,"_155":1513},{"_154":39,"_155":1512},{"_154":39,"_155":1511},{"_154":39,"_155":1510},{"_154":39,"_155":161},{"_154":39,"_155":889},{"_154":39,"_155":161},{"_154":39,"_155":1509},{"_154":39,"_155":161},{"_154":39,"_155":750},{"_154":39,"_155":161},{"_154":39,"_155":1508},{"_154":39,"_155":1507},{"_154":39,"_155":1506},{"_154":39,"_155":1505},{"_154":39,"_155":161},{"_154":39,"_155":1341},{"_154":39,"_155":161},{"_154":39,"_155":1504},{"_154":39,"_155":1503},{"_154":39,"_155":1502},{"_154":39,"_155":1501},{"_154":39,"_155":1500},{"_154":39,"_155":1499},{"_154":39,"_155":161},{"_154":39,"_155":1498},{"_154":39,"_155":161},{"_154":39,"_155":1497},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1496},{"_154":39,"_155":1495},{"_154":39,"_155":1494},{"_154":39,"_155":1493},{"_154":39,"_155":1492},{"_154":39,"_155":1491},{"_154":39,"_155":1490},{"_154":39,"_155":1489},{"_154":39,"_155":1488},{"_154":39,"_155":1487},{"_154":39,"_155":1486},{"_154":39,"_155":1485},{"_154":39,"_155":1453},{"_154":39,"_155":1484},{"_154":39,"_155":1483},{"_154":39,"_155":1482},{"_154":39,"_155":1481},{"_154":39,"_155":1480},{"_154":39,"_155":1479},{"_154":39,"_155":1478},{"_154":39,"_155":1453},{"_154":39,"_155":1477},{"_154":39,"_155":1476},{"_154":39,"_155":1475},{"_154":39,"_155":1474},{"_154":39,"_155":1473},{"_154":39,"_155":1472},{"_154":39,"_155":1471},{"_154":39,"_155":1470},{"_154":39,"_155":1469},{"_154":39,"_155":1468},{"_154":39,"_155":1467},{"_154":39,"_155":1466},{"_154":39,"_155":1465},{"_154":39,"_155":1464},{"_154":39,"_155":1463},{"_154":39,"_155":1462},{"_154":39,"_155":1461},{"_154":39,"_155":1460},{"_154":39,"_155":1459},{"_154":39,"_155":1458},{"_154":39,"_155":1457},{"_154":39,"_155":1456},{"_154":39,"_155":1455},{"_154":39,"_155":1454},{"_154":39,"_155":1453},{"_154":39,"_155":1452},{"_154":39,"_155":1449},{"_154":39,"_155":1451},{"_154":39,"_155":1447},{"_154":39,"_155":1450},{"_154":39,"_155":1449},{"_154":39,"_155":1448},{"_154":39,"_155":1447},{"_154":39,"_155":161},{"_154":39,"_155":1446},{"_154":39,"_155":1445},{"_154":39,"_155":1444},{"_154":39,"_155":1443},{"_154":39,"_155":1442},{"_154":39,"_155":1441},{"_154":39,"_155":1440},{"_154":39,"_155":161},{"_154":39,"_155":1439},{"_154":39,"_155":1438},{"_154":39,"_155":1437},{"_154":39,"_155":1436},{"_154":39,"_155":1435},{"_154":39,"_155":1434},{"_154":39,"_155":1433},{"_154":39,"_155":1432},{"_154":39,"_155":872},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1431},{"_154":39,"_155":161},{"_154":39,"_155":1300},{"_154":39,"_155":161},{"_154":39,"_155":1290},{"_154":39,"_155":1297},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1430},{"_154":39,"_155":161},{"_154":39,"_155":1429},{"_154":39,"_155":161},{"_154":39,"_155":1428},{"_154":39,"_155":161},{"_154":39,"_155":1427},{"_154":39,"_155":1426},{"_154":39,"_155":1425},{"_154":39,"_155":1424},{"_154":39,"_155":1423},{"_154":39,"_155":1422},{"_154":39,"_155":1421},{"_154":39,"_155":1420},{"_154":39,"_155":1419},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1418},{"_154":39,"_155":161},{"_154":39,"_155":1417},{"_154":39,"_155":1416},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1415},{"_154":39,"_155":1414},{"_154":39,"_155":1413},{"_154":39,"_155":1378},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1412},{"_154":39,"_155":1411},{"_154":39,"_155":161},{"_154":39,"_155":1410},{"_154":39,"_155":1409},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1408},{"_154":39,"_155":1407},{"_154":39,"_155":1406},{"_154":39,"_155":1405},{"_154":39,"_155":1404},{"_154":39,"_155":1403},{"_154":39,"_155":1402},{"_154":39,"_155":1401},{"_154":39,"_155":1400},{"_154":39,"_155":1399},{"_154":39,"_155":1398},{"_154":39,"_155":1397},{"_154":39,"_155":1396},{"_154":39,"_155":1395},{"_154":39,"_155":1394},{"_154":39,"_155":1389},{"_154":39,"_155":1388},{"_154":39,"_155":1393},{"_154":39,"_155":1392},{"_154":39,"_155":1386},{"_154":39,"_155":1385},{"_154":39,"_155":1391},{"_154":39,"_155":1390},{"_154":39,"_155":1382},{"_154":39,"_155":1389},{"_154":39,"_155":1388},{"_154":39,"_155":1387},{"_154":39,"_155":1386},{"_154":39,"_155":1385},{"_154":39,"_155":1384},{"_154":39,"_155":1383},{"_154":39,"_155":1382},{"_154":39,"_155":1381},{"_154":39,"_155":1380},{"_154":39,"_155":1379},{"_154":39,"_155":1378},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1377},{"_154":39,"_155":1376},{"_154":39,"_155":1375},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1374},{"_154":39,"_155":1373},{"_154":39,"_155":1372},{"_154":39,"_155":1371},{"_154":39,"_155":1370},{"_154":39,"_155":1369},{"_154":39,"_155":1368},{"_154":39,"_155":1367},{"_154":39,"_155":1366},{"_154":39,"_155":1365},{"_154":39,"_155":1364},{"_154":39,"_155":1363},{"_154":39,"_155":1362},{"_154":39,"_155":1361},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1360},{"_154":39,"_155":161},{"_154":39,"_155":1359},{"_154":39,"_155":1358},{"_154":39,"_155":161},{"_154":39,"_155":272},{"_154":39,"_155":1357},{"_154":39,"_155":1353},{"_154":39,"_155":1356},{"_154":39,"_155":1355},{"_154":39,"_155":1354},{"_154":39,"_155":857},{"_154":39,"_155":161},{"_154":39,"_155":1353},{"_154":39,"_155":1352},{"_154":39,"_155":857},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1351},{"_154":39,"_155":1350},{"_154":39,"_155":161},{"_154":39,"_155":1349},{"_154":39,"_155":161},{"_154":39,"_155":1300},{"_154":39,"_155":161},{"_154":39,"_155":1290},{"_154":39,"_155":1299},{"_154":39,"_155":1298},{"_154":39,"_155":1297},{"_154":39,"_155":1296},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1348},{"_154":39,"_155":161},{"_154":39,"_155":1347},{"_154":39,"_155":161},{"_154":39,"_155":1290},{"_154":39,"_155":1346},{"_154":39,"_155":1345},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1344},{"_154":39,"_155":161},{"_154":39,"_155":750},{"_154":39,"_155":161},{"_154":39,"_155":1343},{"_154":39,"_155":1342},{"_154":39,"_155":161},{"_154":39,"_155":1341},{"_154":39,"_155":161},{"_154":39,"_155":1340},{"_154":39,"_155":1339},{"_154":39,"_155":1338},{"_154":39,"_155":161},{"_154":39,"_155":1337},{"_154":39,"_155":161},{"_154":39,"_155":1336},{"_154":39,"_155":1335},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1334},{"_154":39,"_155":1324},{"_154":39,"_155":1333},{"_154":39,"_155":1325},{"_154":39,"_155":1332},{"_154":39,"_155":1331},{"_154":39,"_155":161},{"_154":39,"_155":1330},{"_154":39,"_155":1329},{"_154":39,"_155":1328},{"_154":39,"_155":1327},{"_154":39,"_155":1326},{"_154":39,"_155":1325},{"_154":39,"_155":1324},{"_154":39,"_155":1323},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1322},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1321},{"_154":39,"_155":1320},{"_154":39,"_155":1319},{"_154":39,"_155":1318},{"_154":39,"_155":1317},{"_154":39,"_155":1316},{"_154":39,"_155":1315},{"_154":39,"_155":1314},{"_154":39,"_155":1313},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1312},{"_154":39,"_155":161},{"_154":39,"_155":1300},{"_154":39,"_155":161},{"_154":39,"_155":1290},{"_154":39,"_155":1295},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1311},{"_154":39,"_155":1310},{"_154":39,"_155":161},{"_154":39,"_155":1309},{"_154":39,"_155":161},{"_154":39,"_155":1308},{"_154":39,"_155":161},{"_154":39,"_155":860},{"_154":39,"_155":1307},{"_154":39,"_155":1306},{"_154":39,"_155":1305},{"_154":39,"_155":1304},{"_154":39,"_155":1303},{"_154":39,"_155":872},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1302},{"_154":39,"_155":161},{"_154":39,"_155":1301},{"_154":39,"_155":161},{"_154":39,"_155":1300},{"_154":39,"_155":161},{"_154":39,"_155":1290},{"_154":39,"_155":1299},{"_154":39,"_155":1298},{"_154":39,"_155":1297},{"_154":39,"_155":1296},{"_154":39,"_155":1295},{"_154":39,"_155":1294},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1293},{"_154":39,"_155":1292},{"_154":39,"_155":161},{"_154":39,"_155":1291},{"_154":39,"_155":161},{"_154":39,"_155":1290},{"_154":39,"_155":1289},{"_154":39,"_155":1288},{"_154":39,"_155":270},{"_154":39,"_155":161},{"_154":39,"_155":1287},{"_154":39,"_155":161},{"_154":39,"_155":1286},{"_154":39,"_155":1285},{"_154":39,"_155":1284},{"_154":39,"_155":1283},{"_154":39,"_155":1282},{"_154":39,"_155":1281},{"_154":39,"_155":1280}," and `bun run ci` pass.","- `bun test apps/web/src/navigation-chrome.test.ts`, `bun run types`, the targeted archive E2E test,","- The supplied archive glyph renders at 14px in inline and drawer sidebars.","- Restoring succeeds before returning to active mode; restore failure leaves archive mode intact.","- Active documents never appear in archive mode, and archive badges are absent there.","- Archive mode contains ← Back to active docs, project-grouped archived documents, then the account.","- Active mode contains New document, Search, Projects, Archived chats, then the account control.","## Final Acceptance","git commit -m \"Return restored documents to active navigation\"","git add apps/web/src/navigation-shell.tsx e2e/document-navigation.e2e.ts","```bash","- [ ] **Step 5: Commit the behavior slice**","plan.","Expected: all commands pass. Inspect `git diff` and keep formatter changes scoped to files in this","bun run ci","bun run e2e e2e/document-navigation.e2e.ts --grep \"writers can archive\"","bun run types","bun test apps/web/src/navigation-chrome.test.ts","git diff --check","bun run fix","Run:","- [ ] **Step 4: Run formatting and complete verification**","Do not switch modes before the request succeeds. This preserves retry context on restore failure.","\tsetError({ reason });","}, reason => {","\tif (action === \"restore\") setShowArchived(false);","\tacceptChannel(detail.channel);","void mutation.then(detail => {","Update the mutation success callback in `navigation-shell.tsx`:","- [ ] **Step 3: Switch to active mode only after a successful restore**","visible.","Expected: FAIL after Restore because the sidebar remains in archive mode and `Archived chats` is not","- [ ] **Step 2: Run the targeted E2E test and verify the restore transition fails**","expect(unavailable.status()).toBe(404);","let unavailable = await ana.request.get(`/api/channels/${room}`);","await expect(bo).not.toHaveURL(path);","await expect(ana).not.toHaveURL(path);","await confirmation.getByRole(\"button\", { name: \"Delete permanently\", exact: true }).click();","let confirmation = ana.getByRole(\"dialog\", { name: \"Delete document permanently?\" });","await headerAction(ana, \"Delete permanently\");","await expect(content(ana)).toHaveAttribute(\"contenteditable\", \"false\");","await headerAction(ana, \"Archive\");","Retain the permanent-delete half of the lifecycle test after those assertions:","\t.toHaveCount(0);","await expect(projects.getByRole(\"button\", { name: \"Back to active docs\", exact: false }))","await expect(projects.getByRole(\"link\", { name: title, exact: true })).toBeVisible();","await expect(projects.getByRole(\"button\", { name: \"Archived chats\", exact: true })).toBeVisible();","await expect(ana.getByText(\"Archived, read-only\", { exact: true })).toHaveCount(0);","await expect(content(bo)).toHaveAttribute(\"contenteditable\", \"true\");","await expect(content(ana)).toHaveAttribute(\"contenteditable\", \"true\");","await headerAction(ana, \"Restore\");","await expect(projects.getByRole(\"button\", { name: \"Search\", exact: true })).toHaveCount(0);","await expect(projects.getByRole(\"button\", { name: \"New document\", exact: true })).toHaveCount(0);","\t.toBeVisible();","await projects.getByRole(\"button\", { name: \"Archived chats\", exact: true }).click();","`writers can archive, restore, and permanently delete a document` with:","Replace the checkbox and archive-search assertions in","- [ ] **Step 1: Rewrite the existing archive E2E expectations for the new navigation**"," returned channel; archive and failed mutations do not change sidebar mode.","- Produces: a successful `restore` mutation calls `setShowArchived(false)` after accepting the","- Consumes: Task 1's unchanged `onShowArchivedChange(show: boolean): void` contract.","**Interfaces:**","- Test: `e2e/document-navigation.e2e.ts:339-382`","- Modify: `apps/web/src/navigation-shell.tsx:607-625`","### Task 2: Return restored documents to the active catalogue","git commit -m \"Move archived chats into sidebar section\"","git add apps/web/src/assets/figma/navigation/box-archive.svg apps/web/src/project-sidebar.tsx apps/web/src/navigation.css apps/web/src/navigation-chrome.test.ts","- [ ] **Step 7: Commit the presentation slice**","Expected: formatting changes are limited to the four Task 1 files; the test and typecheck pass.","- [ ] **Step 6: Format and run the focused checks**","`project-sidebar-primary-action` behavior.","Do not add a new font size, color, hover rule, or icon opacity rule; the button must inherit","\tflex: 0 0 auto;",".project-sidebar-footer-actions {","\tpadding: 0 8px;","\tflex-direction: column;","\tdisplay: flex;",".project-sidebar-primary-actions,","layout declarations with the new footer wrapper:","In `navigation.css`, delete `.project-sidebar-archived-toggle` and its input rule. Share the existing","- [ ] **Step 5: Match the footer to existing navigation styling**","\t: null;","\t)","\t\t","\t\t\t","\t\t\t\tArchived chats","\t\t\t\t","\t\t\t>","\t\t\t\ttype=\"button\"","\t\t\t\tonClick={() => onShowArchivedChange(true)}","\t\t\t\tclassName=\"project-sidebar-primary-action\"","\t\t\t","\t? (","let archiveFooter = !showArchived","`project-sidebar-account-wrap`:","`Project`. Define this local and render `{archiveFooter}` immediately before","Hide the Add Project button when `showArchived` is true. Pass `archiveMode={showArchived}` to every",");","\t","\t\t\t)}","\t\t\t\t","\t\t\t\t\t","\t\t\t\t\t\tSearch","\t\t\t\t\t\t","\t\t\t\t\t>","\t\t\t\t\t\ttype=\"button\"","\t\t\t\t\t\tonClick={onSearch}","\t\t\t\t\t\tclassName=\"project-sidebar-primary-action\"","\t\t\t\t\tNew document","\t\t\t\t\t\t","\t\t\t\t\t\tonClick={onNewDocument}","\t\t\t\t\t\tdisabled={!canCreateDocument || creatingNewDocument}","\t\t\t\t<>","\t\t\t: (","\t\t\t)","\t\t\t\t","\t\t\t\t\tBack to active docs","\t\t\t\t\t←","\t\t\t\t>","\t\t\t\t\ttype=\"button\"","\t\t\t\t\tonClick={() => onShowArchivedChange(false)}","\t\t\t\t\tclassName=\"project-sidebar-primary-action\"","\t\t\t\t","let primaryActions = (","`{primaryActions}` after the sidebar header:","Replace the checkbox and unconditional primary actions with a mode-specific local, then render","links, and pass `onNewResearch={archiveMode ? undefined : onNewResearch}`.","Gate the project-level create button with `!archiveMode`, omit the `Archived` badge from document","\tarchiveMode ? channel.archivedAt !== undefined : channel.archivedAt === undefined","let channels = documents.channels.filter(channel =>","let { documents, project } = entry;","mixed catalogue, and hide creation affordances:","In `project-sidebar.tsx`, import `boxArchiveIcon`. Add `archiveMode: boolean` to `Project`, filter the","- [ ] **Step 4: Implement the two sidebar bodies and archived-only filtering**",""," "," "," "," "," "," box-archive","

Drop generated design audit docs