From 525f01f03b61afea5d553024073e50b1c3ea6b30 Mon Sep 17 00:00:00 2001 From: soryu Date: Mon, 27 Apr 2026 17:22:24 +0100 Subject: feat: soryu-co/soryu - makima: Add context menu and goal auto-update integration --- frontend/package-lock.json | 394 ++++++++++++++++++++- frontend/package.json | 9 + .../src/components/document/AutoSavePlugin.tsx | 140 ++++++++ frontend/src/components/document/ContextMenu.css | 79 +++++ frontend/src/components/document/ContextMenu.tsx | 98 +++++ .../src/components/document/DocumentEditor.css | 246 +++++++++++++ .../src/components/document/DocumentEditor.tsx | 219 ++++++++++++ .../src/components/document/DocumentLayout.tsx | 195 ++++++++++ frontend/src/components/document/EditorTheme.ts | 30 ++ frontend/src/components/document/Toast.css | 100 ++++++ frontend/src/components/document/Toast.tsx | 97 +++++ frontend/src/services/directiveApi.ts | 117 ++++++ frontend/tsconfig.tsbuildinfo | 2 +- 13 files changed, 1717 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/document/AutoSavePlugin.tsx create mode 100644 frontend/src/components/document/ContextMenu.css create mode 100644 frontend/src/components/document/ContextMenu.tsx create mode 100644 frontend/src/components/document/DocumentEditor.css create mode 100644 frontend/src/components/document/DocumentEditor.tsx create mode 100644 frontend/src/components/document/DocumentLayout.tsx create mode 100644 frontend/src/components/document/EditorTheme.ts create mode 100644 frontend/src/components/document/Toast.css create mode 100644 frontend/src/components/document/Toast.tsx create mode 100644 frontend/src/services/directiveApi.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 230ed07..4c4bcbc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,8 +8,17 @@ "name": "pc98-vn", "version": "0.0.1", "dependencies": { + "@lexical/html": "^0.44.0", + "@lexical/link": "^0.44.0", + "@lexical/list": "^0.44.0", + "@lexical/markdown": "^0.44.0", + "@lexical/react": "^0.44.0", + "@lexical/rich-text": "^0.44.0", + "@lexical/selection": "^0.44.0", + "@lexical/utils": "^0.44.0", "@nanostores/react": "^1.0.0", "@types/three": "^0.180.0", + "lexical": "^0.44.0", "nanostores": "^1.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -66,7 +75,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz", "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", "dev": true, - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -675,6 +683,54 @@ "node": ">=12" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz", + "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==", + "dependencies": { + "@floating-ui/utils": "^0.2.11" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz", + "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==", + "dependencies": { + "@floating-ui/core": "^1.7.5", + "@floating-ui/utils": "^0.2.11" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.27.19", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.19.tgz", + "integrity": "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==", + "dependencies": { + "@floating-ui/react-dom": "^2.1.8", + "@floating-ui/utils": "^0.2.11", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz", + "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==", + "dependencies": { + "@floating-ui/dom": "^1.7.6" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.11", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz", + "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==" + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -710,6 +766,255 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lexical/clipboard": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.44.0.tgz", + "integrity": "sha512-nfmNIs7uENqlDI7cm2E4I1Yp8mDJGMhEQIrIV2rNWnL1oeHVXQ7yuYdyoPdcY1zuj/9nvkYBQYUEh0QiGwpETA==", + "dependencies": { + "@lexical/extension": "0.44.0", + "@lexical/html": "0.44.0", + "@lexical/list": "0.44.0", + "@lexical/selection": "0.44.0", + "@lexical/utils": "0.44.0", + "@types/trusted-types": "^2.0.7", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/code-core": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/code-core/-/code-core-0.44.0.tgz", + "integrity": "sha512-m57JyXTIvW1tsqw/Vuogk8jqWCZZIeFQbWybRc46ytR8ReDgzPRODpN8+dacIIeRH5yC5UC3lAa743mtdNkxqg==", + "dependencies": { + "@lexical/extension": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/devtools-core": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/devtools-core/-/devtools-core-0.44.0.tgz", + "integrity": "sha512-X3uNG3P1vOsdzmEcy+7m9DxAcIVtVUZnvskmLqqLs6VluVVwH9xy7h1bPsvlDKvj1Nj73tWJ3TW0qXQWDTo5tw==", + "dependencies": { + "@lexical/html": "0.44.0", + "@lexical/link": "0.44.0", + "@lexical/mark": "0.44.0", + "@lexical/table": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + }, + "peerDependencies": { + "react": ">=17.x", + "react-dom": ">=17.x" + } + }, + "node_modules/@lexical/dragon": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.44.0.tgz", + "integrity": "sha512-RhlsjVDket9k1+YFEkDE0/7Qyrh2BI0vxBMzrWwPJTXX/4YFanYN9su8RSabkIukBBJ3QiNOOoC8FKK4Lkr4qg==", + "dependencies": { + "@lexical/extension": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/extension": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/extension/-/extension-0.44.0.tgz", + "integrity": "sha512-BsYtoc+0EU0pqcOpf/lIUDU6LQVO6zX2AawZoUWJzT3Wzfov23qsqZWvl2WGM9dnRTN5iISJL3Fl53bQVxiXxw==", + "dependencies": { + "@lexical/utils": "0.44.0", + "@preact/signals-core": "^1.14.1", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/hashtag": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.44.0.tgz", + "integrity": "sha512-0WATahDSqYKVTudQv3KpFbLeCpmrCpRptPFbjxOMckAX2MRpYlrExlqKfgfpri5BSQPtG49EPSGeNfSx/Faavw==", + "dependencies": { + "@lexical/text": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/history": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/history/-/history-0.44.0.tgz", + "integrity": "sha512-RGXcbFTgYL1GIWaReBI26mNSsJTfiA9EAtDY4LBeZ14NrIQhYNokKgNiOxq5Bn8xXrl2+mawQEqoMfgpWp/5YA==", + "dependencies": { + "@lexical/extension": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/html": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.44.0.tgz", + "integrity": "sha512-5X6eGsgwtqPxABsuShUxF7ZfyB/U4GwSEyeonvwH1Vc/5Q2uQVjlB+FAYd+MNwWMHMh4d4+yZ3l70AtIuhr5eg==", + "dependencies": { + "@lexical/extension": "0.44.0", + "@lexical/selection": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/link": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/link/-/link-0.44.0.tgz", + "integrity": "sha512-uvEqEol/mLEzGVQd8Rok9I48RgYPKokM/nsclI9nYcEdccVOM2Nri4ntoRwodhbccFLtjMPl8OBldwXbfc77tQ==", + "dependencies": { + "@lexical/extension": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/list": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.44.0.tgz", + "integrity": "sha512-ZTCWxDz1okPrC9FBXi1yV3W5fbQQeMUlFIcSVF9HibcVPmCsPa900IxthuiQbGiTycUyXDTOB3IUYRtlJNtpjw==", + "dependencies": { + "@lexical/extension": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/mark": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/mark/-/mark-0.44.0.tgz", + "integrity": "sha512-bWMowllwe6BcgYMAkrsZx6Z+CX/72qCQpFKhlkR4ael92yOWSBkz68xp1wxxkSnQX9zoI1gYTeWBofVsSDKcsQ==", + "dependencies": { + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/markdown": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/markdown/-/markdown-0.44.0.tgz", + "integrity": "sha512-DwlXdp85pYMo3exDF6W3iz8plpuP+RQ4Me4Iljm7O5aPDp0SSrIoZxyX4zS668mVAoz5HHj1Ka0kQkft8mq26Q==", + "dependencies": { + "@lexical/code-core": "0.44.0", + "@lexical/link": "0.44.0", + "@lexical/list": "0.44.0", + "@lexical/rich-text": "0.44.0", + "@lexical/text": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/overflow": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.44.0.tgz", + "integrity": "sha512-5GYaYjSxn27pqHRfU+tQ2STF10wgJvI+MUnwTnUFSzy3dko1b+oV94K/Yx0TuEewPbwDibfoFA8CwqUvOLHAyw==", + "dependencies": { + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/plain-text": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.44.0.tgz", + "integrity": "sha512-bIV4Lljk0x70zFhkZIwzSPK5q3m9FpDisjGm2/3Q/chb+5BW3Tv8QJmqnpCiSO6S2KXO7gfSy81ZfkQ1dcd4EQ==", + "dependencies": { + "@lexical/clipboard": "0.44.0", + "@lexical/dragon": "0.44.0", + "@lexical/selection": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/react": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/react/-/react-0.44.0.tgz", + "integrity": "sha512-p/NQd/fMh3pXb1XqegE2ruvWDcUmfB12OidQ9nwtMtj5VfcUjQu2I+trUhgGRIADxSYxMWmw+8PPj5YSf4m5oA==", + "dependencies": { + "@floating-ui/react": "^0.27.16", + "@lexical/devtools-core": "0.44.0", + "@lexical/dragon": "0.44.0", + "@lexical/extension": "0.44.0", + "@lexical/hashtag": "0.44.0", + "@lexical/history": "0.44.0", + "@lexical/link": "0.44.0", + "@lexical/list": "0.44.0", + "@lexical/mark": "0.44.0", + "@lexical/markdown": "0.44.0", + "@lexical/overflow": "0.44.0", + "@lexical/plain-text": "0.44.0", + "@lexical/rich-text": "0.44.0", + "@lexical/table": "0.44.0", + "@lexical/text": "0.44.0", + "@lexical/utils": "0.44.0", + "@lexical/yjs": "0.44.0", + "lexical": "0.44.0", + "react-error-boundary": "^6.0.0" + }, + "peerDependencies": { + "react": ">=17.x", + "react-dom": ">=17.x", + "yjs": ">=13.5.22" + }, + "peerDependenciesMeta": { + "yjs": { + "optional": true + } + } + }, + "node_modules/@lexical/rich-text": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.44.0.tgz", + "integrity": "sha512-IIdrutK5GY47ITjPlZB7KzUi9dBDwygsyFOwolnrYSL7m6TtGhAqrYiFg/YNOTT/nBzK3KQeCJRbnxpjJAVZtQ==", + "dependencies": { + "@lexical/clipboard": "0.44.0", + "@lexical/dragon": "0.44.0", + "@lexical/selection": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/selection": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.44.0.tgz", + "integrity": "sha512-AEyeZJFFr5YRLeqVR+X0QAW19c4Fk4MFAQu52z2gxAyDGTj9xwVJxjfepVpfUp4P9K+sPtJ/yaqfMXH506ksSQ==", + "dependencies": { + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/table": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.44.0.tgz", + "integrity": "sha512-5Uq0O/fBCxcZp9y17fXUONY7dU9lVo/mB5JHy23laIiKzBKP5IzzTLMU9ikZTppIXbMNxYXd+R2pmy7PYTLyvw==", + "dependencies": { + "@lexical/clipboard": "0.44.0", + "@lexical/extension": "0.44.0", + "@lexical/utils": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/text": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/text/-/text-0.44.0.tgz", + "integrity": "sha512-1XJD8ZbwaXljTl8k4+jjiopdhnYZm26IJw9Gv8+cIThVC0b6B3JZ/WxH97BMDcSloKvWHFkGiPztxRwNwA29Rw==", + "dependencies": { + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/utils": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.44.0.tgz", + "integrity": "sha512-/D2ptztNevfBJgtkj4uaiYBeRcvSy+1mQj6pNYaCFZIoPJIwl6H5fXwWAvpvr11vcQKP9DEEoXR+V4qkMOA+EA==", + "dependencies": { + "@lexical/selection": "0.44.0", + "lexical": "0.44.0" + } + }, + "node_modules/@lexical/yjs": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.44.0.tgz", + "integrity": "sha512-b3QTub9J/3LuwSSdooynb6GbMHBRyBT4xUbXzXqNPbDHgYe6CDrqf/uJIHRihIjAhOnPaHYqo9XUzitl++N1DQ==", + "dependencies": { + "@lexical/selection": "0.44.0", + "lexical": "0.44.0" + }, + "peerDependencies": { + "yjs": ">=13.5.22" + } + }, "node_modules/@nanostores/react": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@nanostores/react/-/react-1.0.0.tgz", @@ -728,6 +1033,15 @@ "react": ">=18.0.0" } }, + "node_modules/@preact/signals-core": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.14.1.tgz", + "integrity": "sha512-vxPpfXqrwUe9lpjqfYNjAF/0RF/eFGeLgdJzdmIIZjpOnTmGmAB4BjWone562mJGMRP4frU6iZ6ei3PDsu52Ng==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/@remix-run/router": { "version": "1.23.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz", @@ -1060,7 +1374,6 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz", "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==", "dev": true, - "peer": true, "dependencies": { "undici-types": "~7.10.0" } @@ -1076,7 +1389,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz", "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==", "dev": true, - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1110,6 +1422,11 @@ "meshoptimizer": "~0.22.0" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/webxr": { "version": "0.5.23", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.23.tgz", @@ -1159,7 +1476,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001737", "electron-to-chromium": "^1.5.211", @@ -1303,6 +1619,16 @@ "node": ">=6.9.0" } }, + "node_modules/isomorphic.js": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz", + "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==", + "peer": true, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -1332,6 +1658,32 @@ "node": ">=6" } }, + "node_modules/lexical": { + "version": "0.44.0", + "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.44.0.tgz", + "integrity": "sha512-ReDUjRlFgkGoPWzvdjr7s16PUVpHATN+2NH2NiZs+PLlISTaIFFgKil2P467oP3Vg+XgmpDsUgmWZsFJTztYjg==" + }, + "node_modules/lib0": { + "version": "0.2.117", + "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz", + "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==", + "peer": true, + "dependencies": { + "isomorphic.js": "^0.2.4" + }, + "bin": { + "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js", + "0gentesthtml": "bin/gentesthtml.js", + "0serve": "bin/0serve.js" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + } + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -1391,7 +1743,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "engines": { "node": "^20.0.0 || >=22.0.0" } @@ -1440,7 +1791,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -1452,7 +1802,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -1461,6 +1810,14 @@ "react": "^18.3.1" } }, + "node_modules/react-error-boundary": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.1.1.tgz", + "integrity": "sha512-BrYwPOdXi5mqkk5lw+Uvt0ThHx32rCt3BkukS4X23A2AIWDPSGX6iaWTc0y9TU/mHDA/6qOSGel+B2ERkOvD1w==", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -1567,6 +1924,11 @@ "node": ">=0.10.0" } }, + "node_modules/tabbable": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz", + "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==" + }, "node_modules/three": { "version": "0.180.0", "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz", @@ -1626,7 +1988,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz", "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==", "dev": true, - "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", @@ -1686,6 +2047,23 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true + }, + "node_modules/yjs": { + "version": "13.6.30", + "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.30.tgz", + "integrity": "sha512-vv/9h42eCMC81ZHDFswuu/MKzkl/vyq1BhaNGfHyOonwlG4CJbQF4oiBBJPvfdeCt/PlVDWh7Nov9D34YY09uQ==", + "peer": true, + "dependencies": { + "lib0": "^0.2.99" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=8.0.0" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + } } } } diff --git a/frontend/package.json b/frontend/package.json index 197c3d8..230a982 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,8 +9,17 @@ "preview": "vite preview" }, "dependencies": { + "@lexical/html": "^0.44.0", + "@lexical/link": "^0.44.0", + "@lexical/list": "^0.44.0", + "@lexical/markdown": "^0.44.0", + "@lexical/react": "^0.44.0", + "@lexical/rich-text": "^0.44.0", + "@lexical/selection": "^0.44.0", + "@lexical/utils": "^0.44.0", "@nanostores/react": "^1.0.0", "@types/three": "^0.180.0", + "lexical": "^0.44.0", "nanostores": "^1.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/frontend/src/components/document/AutoSavePlugin.tsx b/frontend/src/components/document/AutoSavePlugin.tsx new file mode 100644 index 0000000..d3d0eb5 --- /dev/null +++ b/frontend/src/components/document/AutoSavePlugin.tsx @@ -0,0 +1,140 @@ +import { useEffect, useRef, useState, useCallback } from 'react'; +import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; +import { UNDO_COMMAND } from 'lexical'; + +const COUNTDOWN_DURATION_MS = 3000; +const TICK_INTERVAL_MS = 50; + +interface AutoSavePluginProps { + onAutoSave: (content: string) => void; + getContent: () => string; + enabled?: boolean; +} + +export default function AutoSavePlugin({ + onAutoSave, + getContent, + enabled = true, +}: AutoSavePluginProps) { + const [editor] = useLexicalComposerContext(); + const [countdown, setCountdown] = useState(null); + const timerRef = useRef | null>(null); + const startTimeRef = useRef(0); + const pendingContentRef = useRef(''); + const lastSavedContentRef = useRef(''); + + const clearTimer = useCallback(() => { + if (timerRef.current !== null) { + clearInterval(timerRef.current); + timerRef.current = null; + } + setCountdown(null); + }, []); + + const cancelCountdown = useCallback(() => { + clearTimer(); + }, [clearTimer]); + + const startCountdown = useCallback( + (content: string) => { + pendingContentRef.current = content; + clearTimer(); + + startTimeRef.current = Date.now(); + setCountdown(COUNTDOWN_DURATION_MS); + + timerRef.current = setInterval(() => { + const elapsed = Date.now() - startTimeRef.current; + const remaining = COUNTDOWN_DURATION_MS - elapsed; + + if (remaining <= 0) { + clearTimer(); + lastSavedContentRef.current = pendingContentRef.current; + onAutoSave(pendingContentRef.current); + } else { + setCountdown(remaining); + } + }, TICK_INTERVAL_MS); + }, + [clearTimer, onAutoSave] + ); + + // Listen for editor updates (content changes) + useEffect(() => { + if (!enabled) return; + + const unregister = editor.registerUpdateListener(({ editorState, dirtyElements, dirtyLeaves }) => { + // Only trigger on actual content changes + if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return; + + const content = getContent(); + if (content !== lastSavedContentRef.current) { + startCountdown(content); + } + }); + + return unregister; + }, [editor, enabled, getContent, startCountdown]); + + // Listen for undo command to cancel countdown + useEffect(() => { + const unregister = editor.registerCommand( + UNDO_COMMAND, + () => { + cancelCountdown(); + return false; // Don't prevent the undo from executing + }, + 1 // COMMAND_PRIORITY_LOW + ); + + return unregister; + }, [editor, cancelCountdown]); + + // Listen for Escape key to cancel countdown + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape' && countdown !== null) { + e.preventDefault(); + cancelCountdown(); + } + }; + + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); + }, [countdown, cancelCountdown]); + + // Cleanup on unmount + useEffect(() => { + return () => { + if (timerRef.current !== null) { + clearInterval(timerRef.current); + } + }; + }, []); + + if (countdown === null) return null; + + const progressPercent = (countdown / COUNTDOWN_DURATION_MS) * 100; + const secondsLeft = Math.ceil(countdown / 1000); + + return ( +
+ + Saving in {secondsLeft}s... Esc to cancel + +
+
+
+ +
+ ); +} diff --git a/frontend/src/components/document/ContextMenu.css b/frontend/src/components/document/ContextMenu.css new file mode 100644 index 0000000..4eed119 --- /dev/null +++ b/frontend/src/components/document/ContextMenu.css @@ -0,0 +1,79 @@ +/* ============================================ + Custom Context Menu + ============================================ */ + +.ctx-menu { + position: fixed; + z-index: 10000; + min-width: 200px; + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 10px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); + padding: 4px 0; + animation: ctxFadeIn 0.12s ease-out; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +/* Menu item */ +.ctx-menu-item { + display: flex; + align-items: center; + gap: 0.6rem; + width: 100%; + padding: 0.5rem 0.85rem; + border: none; + background: none; + cursor: pointer; + font-size: 0.875rem; + color: #1f2937; + text-align: left; + border-radius: 0; + transition: background 0.1s ease; +} + +.ctx-menu-item:hover:not(:disabled) { + background: #f3f4f6; +} + +.ctx-menu-item:active:not(:disabled) { + background: #e5e7eb; +} + +/* Disabled state */ +.ctx-menu-item-disabled, +.ctx-menu-item:disabled { + color: #9ca3af; + cursor: not-allowed; +} + +/* Icon */ +.ctx-menu-icon { + font-size: 1rem; + width: 1.25rem; + text-align: center; + flex-shrink: 0; +} + +.ctx-menu-label { + flex: 1; +} + +/* Divider */ +.ctx-menu-divider { + height: 1px; + background: #e5e7eb; + margin: 4px 0; +} + +/* Animation */ +@keyframes ctxFadeIn { + from { + opacity: 0; + transform: scale(0.96); + } + to { + opacity: 1; + transform: scale(1); + } +} diff --git a/frontend/src/components/document/ContextMenu.tsx b/frontend/src/components/document/ContextMenu.tsx new file mode 100644 index 0000000..5aed940 --- /dev/null +++ b/frontend/src/components/document/ContextMenu.tsx @@ -0,0 +1,98 @@ +import { useCallback, useEffect, useRef } from 'react'; +import './ContextMenu.css'; + +export interface ContextMenuAction { + label: string; + icon: string; + disabled?: boolean; + onClick: () => void; +} + +export interface ContextMenuProps { + x: number; + y: number; + actions: ContextMenuAction[]; + dividerAfter?: number[]; + onClose: () => void; +} + +export default function ContextMenu({ + x, + y, + actions, + dividerAfter = [], + onClose, +}: ContextMenuProps) { + const menuRef = useRef(null); + + // Adjust position so menu stays within viewport + const adjustedPosition = useCallback(() => { + const el = menuRef.current; + if (!el) return { left: x, top: y }; + const rect = el.getBoundingClientRect(); + const left = x + rect.width > window.innerWidth ? x - rect.width : x; + const top = y + rect.height > window.innerHeight ? y - rect.height : y; + return { left: Math.max(0, left), top: Math.max(0, top) }; + }, [x, y]); + + // Close on click outside + useEffect(() => { + const handler = (e: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(e.target as Node)) { + onClose(); + } + }; + // Use capture so we catch clicks before any other handler + document.addEventListener('mousedown', handler, true); + return () => document.removeEventListener('mousedown', handler, true); + }, [onClose]); + + // Close on Escape + useEffect(() => { + const handler = (e: KeyboardEvent) => { + if (e.key === 'Escape') onClose(); + }; + document.addEventListener('keydown', handler); + return () => document.removeEventListener('keydown', handler); + }, [onClose]); + + // After mount, adjust position + useEffect(() => { + const el = menuRef.current; + if (!el) return; + const pos = adjustedPosition(); + el.style.left = `${pos.left}px`; + el.style.top = `${pos.top}px`; + }, [adjustedPosition]); + + const dividerSet = new Set(dividerAfter); + + return ( +
+ {actions.map((action, i) => ( +
+ + {dividerSet.has(i) &&
} +
+ ))} +
+ ); +} diff --git a/frontend/src/components/document/DocumentEditor.css b/frontend/src/components/document/DocumentEditor.css new file mode 100644 index 0000000..0be1151 --- /dev/null +++ b/frontend/src/components/document/DocumentEditor.css @@ -0,0 +1,246 @@ +/* ============================================ + Document Editor - Clean, modern document UI + ============================================ */ + +.document-editor-container { + max-width: 800px; + margin: 0 auto; + padding: 2rem 1rem; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + position: relative; +} + +/* ---- Lexical Root ---- */ +.doc-editor-root { + outline: none; + min-height: 400px; + padding: 1rem 0; + color: #1a1a2e; + line-height: 1.7; + font-size: 16px; +} + +/* ---- Headings ---- */ +.doc-editor-h1 { + font-size: 2.25rem; + font-weight: 700; + color: #0f0f23; + margin: 0 0 0.25rem 0; + padding: 0; + line-height: 1.3; + letter-spacing: -0.02em; + border: none; +} + +.doc-editor-h2 { + font-size: 1.5rem; + font-weight: 600; + color: #1a1a2e; + margin: 1.5rem 0 0.5rem 0; + line-height: 1.4; +} + +.doc-editor-h3 { + font-size: 1.2rem; + font-weight: 600; + color: #2a2a4a; + margin: 1.25rem 0 0.4rem 0; + line-height: 1.4; +} + +/* ---- Paragraphs ---- */ +.doc-editor-paragraph { + margin: 0.4rem 0; + padding: 0; + color: #374151; + line-height: 1.7; +} + +/* ---- Text Formatting ---- */ +.doc-editor-text-bold { + font-weight: 700; +} + +.doc-editor-text-italic { + font-style: italic; +} + +.doc-editor-text-underline { + text-decoration: underline; +} + +.doc-editor-text-strikethrough { + text-decoration: line-through; +} + +.doc-editor-text-code { + background: #f3f4f6; + border-radius: 3px; + padding: 0.15em 0.35em; + font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace; + font-size: 0.9em; + color: #e11d48; +} + +/* ---- Lists ---- */ +.doc-editor-list-ul { + padding-left: 1.5rem; + margin: 0.5rem 0; + list-style-type: disc; +} + +.doc-editor-list-ol { + padding-left: 1.5rem; + margin: 0.5rem 0; + list-style-type: decimal; +} + +.doc-editor-listitem { + margin: 0.25rem 0; + color: #374151; +} + +.doc-editor-nested-listitem { + list-style-type: circle; +} + +/* ---- Links ---- */ +.doc-editor-link { + color: #2563eb; + text-decoration: underline; + cursor: pointer; +} + +.doc-editor-link:hover { + color: #1d4ed8; +} + +/* ---- Placeholder ---- */ +.doc-editor-placeholder { + color: #9ca3af; + position: absolute; + top: 1rem; + left: 0; + pointer-events: none; + font-size: 16px; + user-select: none; +} + +/* ---- Content Editable wrapper ---- */ +.doc-editor-input { + position: relative; +} + +.doc-editor-content-editable { + outline: none; + position: relative; +} + +/* ---- Divider between title and body ---- */ +.doc-editor-title-divider { + height: 1px; + background: #e5e7eb; + margin: 0.5rem 0 1rem 0; + border: none; +} + +/* ============================================ + Auto-Save Countdown Bar + ============================================ */ + +.autosave-bar { + position: sticky; + bottom: 0; + left: 0; + right: 0; + z-index: 50; + background: #fefce8; + border-top: 1px solid #fde68a; + padding: 0.5rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + font-size: 0.85rem; + color: #92400e; + transition: opacity 0.2s ease; +} + +.autosave-bar-hidden { + opacity: 0; + pointer-events: none; + height: 0; + padding: 0; + overflow: hidden; +} + +.autosave-bar-text { + display: flex; + align-items: center; + gap: 0.5rem; + white-space: nowrap; +} + +.autosave-bar-text kbd { + background: #fef3c7; + border: 1px solid #fde68a; + border-radius: 3px; + padding: 0.1em 0.4em; + font-size: 0.8em; + font-family: inherit; +} + +.autosave-bar-progress-track { + flex: 1; + height: 4px; + background: #fde68a; + border-radius: 2px; + overflow: hidden; + min-width: 80px; +} + +.autosave-bar-progress-fill { + height: 100%; + background: #f59e0b; + border-radius: 2px; + transition: width 0.1s linear; +} + +.autosave-bar-cancel { + background: none; + border: 1px solid #d97706; + border-radius: 4px; + color: #92400e; + padding: 0.2rem 0.6rem; + cursor: pointer; + font-size: 0.8rem; + white-space: nowrap; + transition: background 0.15s ease; +} + +.autosave-bar-cancel:hover { + background: #fef3c7; +} + +/* ============================================ + Responsive + ============================================ */ + +@media (max-width: 640px) { + .document-editor-container { + padding: 1rem 0.75rem; + } + + .doc-editor-h1 { + font-size: 1.75rem; + } + + .doc-editor-root { + font-size: 15px; + } + + .autosave-bar { + font-size: 0.78rem; + padding: 0.4rem 0.75rem; + } +} diff --git a/frontend/src/components/document/DocumentEditor.tsx b/frontend/src/components/document/DocumentEditor.tsx new file mode 100644 index 0000000..ea69816 --- /dev/null +++ b/frontend/src/components/document/DocumentEditor.tsx @@ -0,0 +1,219 @@ +import { useCallback, useRef, useState } from 'react'; +import { LexicalComposer } from '@lexical/react/LexicalComposer'; +import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'; +import { ContentEditable } from '@lexical/react/LexicalContentEditable'; +import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'; +import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'; +import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'; +import { HeadingNode } from '@lexical/rich-text'; +import { ListNode, ListItemNode } from '@lexical/list'; +import { LinkNode } from '@lexical/link'; +import { + $getRoot, + $createParagraphNode, + $createTextNode, + type EditorState, + type LexicalEditor, +} from 'lexical'; +import { $createHeadingNode } from '@lexical/rich-text'; + +import editorTheme from './EditorTheme'; +import AutoSavePlugin from './AutoSavePlugin'; +import ContextMenu, { type ContextMenuAction } from './ContextMenu'; +import './DocumentEditor.css'; + +interface DocumentEditorProps { + directiveId: string; + title: string; + goal: string; + status: string; + prBranch?: string | null; + onGoalChange?: (newGoal: string) => void; + onTitleChange?: (newTitle: string) => void; + onCleanup?: () => void; + onCreatePr?: () => void; + onPlanOrders?: () => void; + onTogglePause?: () => void; + readOnly?: boolean; +} + +function buildInitialEditorState(title: string, goal: string) { + return () => { + const root = $getRoot(); + + // Title as H1 + const heading = $createHeadingNode('h1'); + heading.append($createTextNode(title)); + root.append(heading); + + // Goal as paragraph(s), split by newlines + const lines = goal.split('\n'); + for (const line of lines) { + const paragraph = $createParagraphNode(); + if (line.trim()) { + paragraph.append($createTextNode(line)); + } + root.append(paragraph); + } + }; +} + +function onError(error: Error) { + console.error('[DocumentEditor] Lexical error:', error); +} + +export default function DocumentEditor({ + directiveId, + title, + goal, + status, + prBranch, + onGoalChange, + onTitleChange, + onCleanup, + onCreatePr, + onPlanOrders, + onTogglePause, + readOnly = false, +}: DocumentEditorProps) { + const editorRef = useRef(null); + const latestGoalRef = useRef(goal); + const latestTitleRef = useRef(title); + + // Context menu state + const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number } | null>(null); + + const initialConfig = { + namespace: `DocumentEditor-${directiveId}`, + theme: editorTheme, + editorState: buildInitialEditorState(title, goal), + nodes: [HeadingNode, ListNode, ListItemNode, LinkNode], + onError, + editable: !readOnly, + }; + + const handleChange = useCallback( + (_editorState: EditorState, editor: LexicalEditor) => { + editorRef.current = editor; + + editor.getEditorState().read(() => { + const root = $getRoot(); + const children = root.getChildren(); + + let newTitle = ''; + const goalLines: string[] = []; + + for (let i = 0; i < children.length; i++) { + const child = children[i]; + const text = child.getTextContent(); + + if (i === 0 && child.getType() === 'heading') { + newTitle = text; + } else { + goalLines.push(text); + } + } + + const newGoal = goalLines.join('\n'); + + if (newTitle !== latestTitleRef.current) { + latestTitleRef.current = newTitle; + onTitleChange?.(newTitle); + } + + if (newGoal !== latestGoalRef.current) { + latestGoalRef.current = newGoal; + onGoalChange?.(newGoal); + } + }); + }, + [onGoalChange, onTitleChange] + ); + + const getContent = useCallback(() => { + return latestGoalRef.current; + }, []); + + const handleAutoSave = useCallback( + (content: string) => { + onGoalChange?.(content); + }, + [onGoalChange] + ); + + // Context menu handler + const handleContextMenu = useCallback( + (e: React.MouseEvent) => { + e.preventDefault(); + setCtxMenu({ x: e.clientX, y: e.clientY }); + }, + [] + ); + + const closeCtxMenu = useCallback(() => setCtxMenu(null), []); + + const isPaused = status === 'paused'; + const isIdle = status === 'idle'; + + const ctxActions: ContextMenuAction[] = [ + { + label: 'Clean Up', + icon: '\uD83E\uDDF9', // broom + disabled: !isIdle, + onClick: () => onCleanup?.(), + }, + { + label: 'Update PR', + icon: '\uD83D\uDD00', // shuffle + disabled: !prBranch, + onClick: () => onCreatePr?.(), + }, + { + label: 'Plan Orders', + icon: '\uD83D\uDCCB', // clipboard + onClick: () => onPlanOrders?.(), + }, + { + label: isPaused ? 'Resume Directive' : 'Pause Directive', + icon: isPaused ? '\u25B6' : '\u23F8', + onClick: () => onTogglePause?.(), + }, + ]; + + return ( +
+ +
+ + } + placeholder={ +
Start writing...
+ } + ErrorBoundary={LexicalErrorBoundary} + /> +
+ + + {!readOnly && ( + + )} + + + {ctxMenu && ( + + )} +
+ ); +} diff --git a/frontend/src/components/document/DocumentLayout.tsx b/frontend/src/components/document/DocumentLayout.tsx new file mode 100644 index 0000000..52c4ada --- /dev/null +++ b/frontend/src/components/document/DocumentLayout.tsx @@ -0,0 +1,195 @@ +import { useCallback, useEffect, useRef, useState } from 'react'; +import DocumentEditor from './DocumentEditor'; +import { ToastProvider, useToast } from './Toast'; +import { + type Directive, + type DirectiveStep, + getDirective, + getDirectiveSteps, + updateGoal, + updateDirective, + cleanupDirective, + createPr, + pickUpOrders, + pauseDirective, + startDirective, +} from '../../services/directiveApi'; + +interface DocumentLayoutProps { + directiveId: string; +} + +// Inner component that can use the toast context +function DocumentLayoutInner({ directiveId }: DocumentLayoutProps) { + const { addToast } = useToast(); + + const [directive, setDirective] = useState(null); + const [steps, setSteps] = useState([]); + const [loading, setLoading] = useState(true); + const pollRef = useRef | null>(null); + + // -- Fetch directive + steps ----------------------------------------------- + + const fetchDirective = useCallback(async () => { + try { + const d = await getDirective(directiveId); + setDirective(d); + } catch (e) { + addToast(`Failed to load directive: ${(e as Error).message}`, 'error'); + } + }, [directiveId, addToast]); + + const fetchSteps = useCallback(async () => { + try { + const s = await getDirectiveSteps(directiveId); + setSteps(s); + } catch { + // Silently fail for step polling + } + }, [directiveId]); + + // Initial load + useEffect(() => { + let cancelled = false; + (async () => { + setLoading(true); + await Promise.all([fetchDirective(), fetchSteps()]); + if (!cancelled) setLoading(false); + })(); + return () => { cancelled = true; }; + }, [fetchDirective, fetchSteps]); + + // -- Step polling (after goal update triggers supervisor) ------------------- + + const startStepPolling = useCallback(() => { + // Clear any existing poll + if (pollRef.current) clearInterval(pollRef.current); + pollRef.current = setInterval(async () => { + await fetchSteps(); + }, 3000); + // Stop after 60 seconds + setTimeout(() => { + if (pollRef.current) { + clearInterval(pollRef.current); + pollRef.current = null; + } + }, 60000); + }, [fetchSteps]); + + useEffect(() => { + return () => { + if (pollRef.current) clearInterval(pollRef.current); + }; + }, []); + + // -- Callbacks for DocumentEditor ------------------------------------------ + + const handleGoalChange = useCallback( + async (newGoal: string) => { + try { + const updated = await updateGoal(directiveId, newGoal); + setDirective(updated); + addToast('Goal saved', 'success'); + // Start polling for new steps (supervisor will process) + startStepPolling(); + } catch (e) { + addToast(`Failed to save goal: ${(e as Error).message}`, 'error'); + } + }, + [directiveId, addToast, startStepPolling] + ); + + const handleTitleChange = useCallback( + async (newTitle: string) => { + if (!directive) return; + try { + const updated = await updateDirective(directiveId, { + title: newTitle, + version: directive.version, + }); + setDirective(updated); + } catch (e) { + addToast(`Failed to update title: ${(e as Error).message}`, 'error'); + } + }, + [directiveId, directive, addToast] + ); + + const handleCleanup = useCallback(async () => { + try { + await cleanupDirective(directiveId); + addToast('Cleanup task spawned', 'success'); + startStepPolling(); + } catch (e) { + addToast(`Cleanup failed: ${(e as Error).message}`, 'error'); + } + }, [directiveId, addToast, startStepPolling]); + + const handleCreatePr = useCallback(async () => { + try { + await createPr(directiveId); + addToast('PR update triggered', 'success'); + } catch (e) { + addToast(`PR update failed: ${(e as Error).message}`, 'error'); + } + }, [directiveId, addToast]); + + const handlePlanOrders = useCallback(async () => { + try { + await pickUpOrders(directiveId); + addToast('Planning orders...', 'info'); + startStepPolling(); + } catch (e) { + addToast(`Plan orders failed: ${(e as Error).message}`, 'error'); + } + }, [directiveId, addToast, startStepPolling]); + + const handleTogglePause = useCallback(async () => { + if (!directive) return; + try { + if (directive.status === 'paused') { + const result = await startDirective(directiveId); + setDirective(result.directive); + setSteps(result.steps); + addToast('Directive resumed', 'success'); + } else { + const updated = await pauseDirective(directiveId); + setDirective(updated); + addToast('Directive paused', 'info'); + } + } catch (e) { + addToast(`Failed to toggle pause: ${(e as Error).message}`, 'error'); + } + }, [directiveId, directive, addToast]); + + // -- Render ---------------------------------------------------------------- + + if (loading || !directive) { + return
Loading...
; + } + + return ( + + ); +} + +// Wrapper that provides toast context +export default function DocumentLayout({ directiveId }: DocumentLayoutProps) { + return ( + + + + ); +} diff --git a/frontend/src/components/document/EditorTheme.ts b/frontend/src/components/document/EditorTheme.ts new file mode 100644 index 0000000..5b336ad --- /dev/null +++ b/frontend/src/components/document/EditorTheme.ts @@ -0,0 +1,30 @@ +import type { EditorThemeClasses } from 'lexical'; + +const editorTheme: EditorThemeClasses = { + root: 'doc-editor-root', + paragraph: 'doc-editor-paragraph', + heading: { + h1: 'doc-editor-h1', + h2: 'doc-editor-h2', + h3: 'doc-editor-h3', + }, + text: { + bold: 'doc-editor-text-bold', + italic: 'doc-editor-text-italic', + underline: 'doc-editor-text-underline', + strikethrough: 'doc-editor-text-strikethrough', + code: 'doc-editor-text-code', + }, + list: { + ul: 'doc-editor-list-ul', + ol: 'doc-editor-list-ol', + listitem: 'doc-editor-listitem', + nested: { + listitem: 'doc-editor-nested-listitem', + }, + }, + link: 'doc-editor-link', + placeholder: 'doc-editor-placeholder', +}; + +export default editorTheme; diff --git a/frontend/src/components/document/Toast.css b/frontend/src/components/document/Toast.css new file mode 100644 index 0000000..e97304c --- /dev/null +++ b/frontend/src/components/document/Toast.css @@ -0,0 +1,100 @@ +/* ============================================ + Toast Notifications + ============================================ */ + +.toast-container { + position: fixed; + bottom: 1.5rem; + right: 1.5rem; + z-index: 9999; + display: flex; + flex-direction: column-reverse; + gap: 0.5rem; + pointer-events: none; +} + +.toast-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.65rem 1rem; + border-radius: 8px; + font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); + pointer-events: auto; + max-width: 360px; + backdrop-filter: blur(6px); +} + +/* Types */ +.toast-success { + background: #ecfdf5; + color: #065f46; + border: 1px solid #a7f3d0; +} + +.toast-error { + background: #fef2f2; + color: #991b1b; + border: 1px solid #fecaca; +} + +.toast-info { + background: #eff6ff; + color: #1e40af; + border: 1px solid #bfdbfe; +} + +/* Icon */ +.toast-icon { + flex-shrink: 0; + font-size: 1rem; + line-height: 1; +} + +.toast-message { + line-height: 1.4; +} + +/* Animations */ +.toast-enter { + animation: toastSlideIn 0.25s ease-out forwards; +} + +.toast-exit { + animation: toastSlideOut 0.3s ease-in forwards; +} + +@keyframes toastSlideIn { + from { + opacity: 0; + transform: translateY(8px) scale(0.96); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes toastSlideOut { + from { + opacity: 1; + transform: translateY(0) scale(1); + } + to { + opacity: 0; + transform: translateY(8px) scale(0.96); + } +} + +@media (max-width: 640px) { + .toast-container { + right: 0.75rem; + bottom: 0.75rem; + } + .toast-item { + max-width: calc(100vw - 1.5rem); + font-size: 0.8rem; + } +} diff --git a/frontend/src/components/document/Toast.tsx b/frontend/src/components/document/Toast.tsx new file mode 100644 index 0000000..653db8f --- /dev/null +++ b/frontend/src/components/document/Toast.tsx @@ -0,0 +1,97 @@ +import { + createContext, + useCallback, + useContext, + useEffect, + useRef, + useState, + type ReactNode, +} from 'react'; +import './Toast.css'; + +// -- Types ------------------------------------------------------------------- + +export type ToastType = 'success' | 'error' | 'info'; + +interface ToastItem { + id: number; + message: string; + type: ToastType; +} + +interface ToastContextValue { + addToast: (message: string, type?: ToastType) => void; +} + +// -- Context ----------------------------------------------------------------- + +const ToastContext = createContext(null); + +export function useToast(): ToastContextValue { + const ctx = useContext(ToastContext); + if (!ctx) throw new Error('useToast must be used within a ToastProvider'); + return ctx; +} + +// -- Provider ---------------------------------------------------------------- + +const DISMISS_MS = 3000; + +export function ToastProvider({ children }: { children: ReactNode }) { + const [toasts, setToasts] = useState([]); + const nextId = useRef(0); + + const addToast = useCallback((message: string, type: ToastType = 'info') => { + const id = nextId.current++; + setToasts((prev) => [...prev, { id, message, type }]); + }, []); + + const removeToast = useCallback((id: number) => { + setToasts((prev) => prev.filter((t) => t.id !== id)); + }, []); + + return ( + + {children} +
+ {toasts.map((t) => ( + + ))} +
+ + ); +} + +// -- Single toast ------------------------------------------------------------ + +function ToastItem({ + toast, + onDismiss, +}: { + toast: ToastItem; + onDismiss: (id: number) => void; +}) { + const [exiting, setExiting] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => setExiting(true), DISMISS_MS - 300); + const remove = setTimeout(() => onDismiss(toast.id), DISMISS_MS); + return () => { + clearTimeout(timer); + clearTimeout(remove); + }; + }, [toast.id, onDismiss]); + + const icon = + toast.type === 'success' ? '\u2713' : toast.type === 'error' ? '\u2717' : '\u2139'; + + return ( +
+ {icon} + {toast.message} +
+ ); +} diff --git a/frontend/src/services/directiveApi.ts b/frontend/src/services/directiveApi.ts new file mode 100644 index 0000000..71d77dd --- /dev/null +++ b/frontend/src/services/directiveApi.ts @@ -0,0 +1,117 @@ +// API service for directive CRUD and actions. + +const BASE = '/api/v1/directives'; + +function headers(): HeadersInit { + return { + 'Content-Type': 'application/json', + }; +} + +async function handleResponse(res: Response): Promise { + if (!res.ok) { + const body = await res.json().catch(() => ({ message: res.statusText })); + throw new Error(body.message ?? body.error ?? `Request failed (${res.status})`); + } + return res.json() as Promise; +} + +// -- Types ------------------------------------------------------------------- + +export interface Directive { + id: string; + title: string; + goal: string; + status: string; + pr_branch?: string | null; + version: number; + created_at: string; + updated_at: string; +} + +export interface DirectiveStep { + id: string; + directive_id: string; + title: string; + description?: string | null; + status: string; + sort_order: number; +} + +export interface DirectiveWithSteps { + directive: Directive; + steps: DirectiveStep[]; +} + +// -- Endpoints --------------------------------------------------------------- + +export async function getDirective(id: string): Promise { + const res = await fetch(`${BASE}/${id}`, { headers: headers() }); + return handleResponse(res); +} + +export async function updateDirective( + id: string, + body: { title?: string; goal?: string; version: number }, +): Promise { + const res = await fetch(`${BASE}/${id}`, { + method: 'PUT', + headers: headers(), + body: JSON.stringify(body), + }); + return handleResponse(res); +} + +export async function updateGoal(id: string, goal: string): Promise { + const res = await fetch(`${BASE}/${id}/goal`, { + method: 'PUT', + headers: headers(), + body: JSON.stringify({ goal }), + }); + return handleResponse(res); +} + +export async function getDirectiveSteps(id: string): Promise { + const res = await fetch(`${BASE}/${id}/steps`, { headers: headers() }); + return handleResponse(res); +} + +export async function cleanupDirective(id: string): Promise { + const res = await fetch(`${BASE}/${id}/cleanup`, { + method: 'POST', + headers: headers(), + }); + return handleResponse(res); +} + +export async function createPr(id: string): Promise { + const res = await fetch(`${BASE}/${id}/create-pr`, { + method: 'POST', + headers: headers(), + }); + return handleResponse(res); +} + +export async function pickUpOrders(id: string): Promise { + const res = await fetch(`${BASE}/${id}/pick-up-orders`, { + method: 'POST', + headers: headers(), + }); + return handleResponse(res); +} + +export async function pauseDirective(id: string): Promise { + const res = await fetch(`${BASE}/${id}/pause`, { + method: 'POST', + headers: headers(), + }); + return handleResponse(res); +} + +export async function startDirective(id: string): Promise { + const res = await fetch(`${BASE}/${id}/start`, { + method: 'POST', + headers: headers(), + }); + return handleResponse(res); +} diff --git a/frontend/tsconfig.tsbuildinfo b/frontend/tsconfig.tsbuildinfo index 79408dc..9a49e49 100644 --- a/frontend/tsconfig.tsbuildinfo +++ b/frontend/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/types.ts","./src/components/bottombar.tsx","./src/components/choicemenu.tsx","./src/components/cityscapebackground.tsx","./src/components/configmodal.tsx","./src/components/contractdetail.tsx","./src/components/contractlist.tsx","./src/components/dialoguebox.tsx","./src/components/filedetail.tsx","./src/components/heartlogo.tsx","./src/components/landingpage.tsx","./src/components/loadingscreen.tsx","./src/components/origamidragonlogo.tsx","./src/components/topbar.tsx","./src/components/vnapp.tsx","./src/components/vninterface.tsx","./src/components/vnviewport.tsx","./src/services/ws.ts","./src/stores/index.ts"],"version":"5.9.2"} \ No newline at end of file +{"root":["./src/app.tsx","./src/main.tsx","./src/types.ts","./src/components/bottombar.tsx","./src/components/choicemenu.tsx","./src/components/cityscapebackground.tsx","./src/components/configmodal.tsx","./src/components/contractdetail.tsx","./src/components/contractlist.tsx","./src/components/daemondetail.tsx","./src/components/daemonlist.tsx","./src/components/dialoguebox.tsx","./src/components/filedetail.tsx","./src/components/heartlogo.tsx","./src/components/landingpage.tsx","./src/components/loadingscreen.tsx","./src/components/origamidragonlogo.tsx","./src/components/topbar.tsx","./src/components/vnapp.tsx","./src/components/vninterface.tsx","./src/components/vnviewport.tsx","./src/components/document/autosaveplugin.tsx","./src/components/document/contextmenu.tsx","./src/components/document/documenteditor.tsx","./src/components/document/documentlayout.tsx","./src/components/document/editortheme.ts","./src/components/document/toast.tsx","./src/services/directiveapi.ts","./src/services/ws.ts","./src/stores/index.ts"],"version":"5.9.2"} \ No newline at end of file -- cgit v1.2.3