From f656e14ef752cff1ea1eb15afa38a467edefc61d Mon Sep 17 00:00:00 2001 From: willchen96 Date: Sun, 17 May 2026 01:57:19 +0800 Subject: [PATCH 01/21] docs: add security reporting guidance --- CONTRIBUTING.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 04be698..5fbd2ed 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,6 +20,12 @@ Thanks for helping improve Mike. Please keep contributions small, focused, and e - why - testing +## Security + +Do not open a public issue for security vulnerabilities. Use [GitHub's private vulnerability reporting](https://github.com/willchen96/mike/security/advisories/new) instead. + +We will aim to respond promptly and coordinate a disclosure timeline with you. + ## Local Development Backend: From a5fe6d6e04fc9bd8fbef5a0058f7a8d38e27148a Mon Sep 17 00:00:00 2001 From: willchen96 Date: Sat, 4 Jul 2026 23:24:31 +0800 Subject: [PATCH 02/21] Sync workflow, asst extra input, excel + ppt support and modal updates --- CONTRIBUTING.md | 13 + backend/bun.lock | 120 +- .../20260613_05_workflows_overview_rpc.sql | 25 +- .../20260625_01_workflow_metadata.sql | 120 + ...29_01_workflow_open_source_submissions.sql | 39 + backend/package-lock.json | 14 +- backend/package.json | 2 + backend/schema.sql | 59 +- backend/src/lib/builtinWorkflows.ts | 76 - backend/src/lib/chat/citations.ts | 310 ++ backend/src/lib/chat/contextBuilders.ts | 583 +++ backend/src/lib/chat/index.ts | 8 + backend/src/lib/chat/prompts.ts | 82 + backend/src/lib/chat/streaming.ts | 553 ++ .../tools}/courtlistenerTools.ts | 0 backend/src/lib/chat/tools/documentOps.ts | 1813 +++++++ backend/src/lib/chat/tools/toolDispatcher.ts | 1896 +++++++ backend/src/lib/chat/tools/toolSchemas.ts | 471 ++ backend/src/lib/chat/types.ts | 153 + backend/src/lib/chatTools.ts | 4590 ----------------- backend/src/lib/documentTypes.ts | 60 + backend/src/lib/llm/tools.ts | 120 +- backend/src/lib/officeText.ts | 53 + backend/src/lib/spreadsheet.ts | 100 + backend/src/lib/systemWorkflows.ts | 1596 ++++++ backend/src/lib/userDataCleanup.ts | 4 + backend/src/lib/userDataExport.ts | 7 + backend/src/middleware/auth.ts | 14 + backend/src/routes/chat.ts | 105 +- backend/src/routes/documents.ts | 72 +- backend/src/routes/downloads.ts | 12 +- backend/src/routes/projectChat.ts | 111 +- backend/src/routes/projects.ts | 117 +- backend/src/routes/tabular.ts | 119 +- backend/src/routes/user.ts | 17 + backend/src/routes/workflows.ts | 439 +- frontend/package-lock.json | 171 +- frontend/package.json | 6 + .../src/app/(pages)/account/api-keys/page.tsx | 2 +- .../app/(pages)/account/connectors/page.tsx | 170 +- frontend/src/app/(pages)/account/page.tsx | 6 +- .../app/(pages)/account/privacy-data/page.tsx | 4 +- .../src/app/(pages)/account/security/page.tsx | 14 +- .../[id]/assistant/chat/[chatId]/page.tsx | 97 +- .../projects/[id]/tabular-reviews/page.tsx | 53 +- .../src/app/(pages)/tabular-reviews/page.tsx | 167 +- .../app/components/assistant/AddDocButton.tsx | 2 +- .../components/assistant/AskInputPopup.tsx | 730 +++ .../components/assistant/AssistantMessage.tsx | 1816 +------ .../assistant/AssistantSidePanel.tsx | 8 +- .../app/components/assistant/CaseLawPanel.tsx | 12 +- .../app/components/assistant/ChatInput.tsx | 20 +- .../src/app/components/assistant/ChatView.tsx | 180 +- .../src/app/components/assistant/EditCard.tsx | 32 +- .../assistant/SelectAssistantProjectModal.tsx | 18 +- .../app/components/assistant/UserMessage.tsx | 28 +- .../modals/credits-exhausted-modal.tsx | 81 - .../components/modals/delete-chats-modal.tsx | 97 - .../components/modals/simple-link-dialog.tsx | 90 - .../components/projects/DocumentSidePanel.tsx | 38 +- .../components/projects/NewProjectModal.tsx | 292 +- .../projects/ProjectAssistantTable.tsx | 59 +- .../projects/ProjectDetailsModal.tsx | 169 +- .../projects/ProjectDocumentsView.tsx | 18 +- .../components/projects/ProjectExplorer.tsx | 9 +- .../components/projects/ProjectPageParts.tsx | 44 +- .../projects/ProjectReviewsTable.tsx | 103 +- .../components/projects/ProjectWorkspace.tsx | 20 +- .../components/projects/ProjectsOverview.tsx | 268 +- .../components/shared/AddDocumentsModal.tsx | 316 -- .../components/shared/AddProjectDocsModal.tsx | 261 - .../components/shared/ApiKeyMissingModal.tsx | 45 - .../src/app/components/shared/AppSidebar.tsx | 2 +- .../app/components/shared/ConfirmPopup.tsx | 117 - .../src/app/components/shared/DocPanel.tsx | 559 -- .../src/app/components/shared/DocView.tsx | 601 --- .../app/components/shared/DocViewModal.tsx | 101 - .../app/components/shared/DocumentCard.tsx | 87 - .../src/app/components/shared/DocxView.tsx | 505 -- .../app/components/shared/EmailPillInput.tsx | 117 - .../app/components/shared/FileDirectory.tsx | 517 +- .../app/components/shared/FileTypeIcon.tsx | 49 + .../app/components/shared/MfaLoginGate.tsx | 2 +- .../shared/MfaVerificationPopup.tsx | 294 -- frontend/src/app/components/shared/Modal.tsx | 208 - .../app/components/shared/OwnerOnlyModal.tsx | 57 - .../src/app/components/shared/PeopleModal.tsx | 362 -- .../components/shared/PreResponseWrapper.tsx | 74 - .../app/components/shared/ProjectPicker.tsx | 91 - .../app/components/shared/RelevantQuotes.tsx | 297 -- .../app/components/shared/RenameableTitle.tsx | 91 - .../src/app/components/shared/RowActions.tsx | 15 +- .../app/components/shared/SidebarChatItem.tsx | 4 +- .../app/components/shared/TablePrimitive.tsx | 32 +- .../shared/UploadNewVersionModal.tsx | 123 - .../app/components/shared/WarningPopup.tsx | 117 - .../components/shared/highlightDocxQuote.ts | 130 - .../app/components/shared/highlightQuote.ts | 124 - frontend/src/app/components/shared/types.ts | 181 +- .../app/components/shared/useDirectoryData.ts | 14 +- .../app/components/tabular/AddColumnModal.tsx | 13 +- .../app/components/tabular/AddNewTRModal.tsx | 488 -- .../app/components/tabular/TRChatPanel.tsx | 16 +- .../app/components/tabular/TRSidePanel.tsx | 10 +- .../src/app/components/tabular/TRTable.tsx | 160 +- .../components/tabular/TabularReviewView.tsx | 80 +- .../components/tabular/prompt-generator.ts | 60 - .../workflows/DisplayWorkflowModal.tsx | 577 --- .../components/workflows/NewWorkflowModal.tsx | 555 +- .../workflows/ShareWorkflowModal.tsx | 156 - .../workflows/WFColumnViewModal.tsx | 20 +- .../workflows/WFEditColumnModal.tsx | 17 +- .../workflows/WorkflowDetailPage.tsx | 329 +- .../workflows/WorkflowDetailsModal.tsx | 190 - .../app/components/workflows/WorkflowList.tsx | 247 +- .../workflows/WorkflowPickerContent.tsx | 186 +- .../workflows/WorkflowPickerModal.tsx | 59 +- .../workflows/WorkflowPromptEditor.tsx | 6 + .../components/workflows/builtinWorkflows.ts | 1246 ----- .../src/app/components/workflows/practices.ts | 2 +- frontend/src/app/error.tsx | 10 +- frontend/src/app/global-error.tsx | 32 +- frontend/src/app/globals.css | 66 +- frontend/src/app/hooks/useAssistantChat.ts | 379 +- frontend/src/app/hooks/useDocumentVersions.ts | 98 - frontend/src/app/hooks/useFetchSingleDoc.ts | 20 +- .../src/app/lib/documentUploadValidation.ts | 16 +- frontend/src/app/lib/mikeApi.ts | 84 +- frontend/src/app/verify-mfa/page.tsx | 2 +- frontend/src/components/ui/badge.tsx | 46 - frontend/src/components/ui/pill-button.tsx | 50 + .../src/components/ui/text-search-widget.tsx | 94 - frontend/src/lib/auth.ts | 54 - frontend/src/lib/fileConverter.ts | 65 - frontend/src/lib/label.ts | 28 - frontend/src/lib/slug.ts | 57 - frontend/src/lib/types.ts | 81 - frontend/src/scripts/convert-courts-to-ts.js | 89 - frontend/src/types/luckyexcel.d.ts | 30 + scripts/build-workflows.js | 300 ++ 140 files changed, 13508 insertions(+), 16700 deletions(-) create mode 100644 backend/migrations/20260625_01_workflow_metadata.sql create mode 100644 backend/migrations/20260629_01_workflow_open_source_submissions.sql delete mode 100644 backend/src/lib/builtinWorkflows.ts create mode 100644 backend/src/lib/chat/citations.ts create mode 100644 backend/src/lib/chat/contextBuilders.ts create mode 100644 backend/src/lib/chat/index.ts create mode 100644 backend/src/lib/chat/prompts.ts create mode 100644 backend/src/lib/chat/streaming.ts rename backend/src/lib/{legalSourcesTools => chat/tools}/courtlistenerTools.ts (100%) create mode 100644 backend/src/lib/chat/tools/documentOps.ts create mode 100644 backend/src/lib/chat/tools/toolDispatcher.ts create mode 100644 backend/src/lib/chat/tools/toolSchemas.ts create mode 100644 backend/src/lib/chat/types.ts delete mode 100644 backend/src/lib/chatTools.ts create mode 100644 backend/src/lib/documentTypes.ts create mode 100644 backend/src/lib/officeText.ts create mode 100644 backend/src/lib/spreadsheet.ts create mode 100644 backend/src/lib/systemWorkflows.ts create mode 100644 frontend/src/app/components/assistant/AskInputPopup.tsx delete mode 100644 frontend/src/app/components/modals/credits-exhausted-modal.tsx delete mode 100644 frontend/src/app/components/modals/delete-chats-modal.tsx delete mode 100644 frontend/src/app/components/modals/simple-link-dialog.tsx delete mode 100644 frontend/src/app/components/shared/AddDocumentsModal.tsx delete mode 100644 frontend/src/app/components/shared/AddProjectDocsModal.tsx delete mode 100644 frontend/src/app/components/shared/ApiKeyMissingModal.tsx delete mode 100644 frontend/src/app/components/shared/ConfirmPopup.tsx delete mode 100644 frontend/src/app/components/shared/DocPanel.tsx delete mode 100644 frontend/src/app/components/shared/DocView.tsx delete mode 100644 frontend/src/app/components/shared/DocViewModal.tsx delete mode 100644 frontend/src/app/components/shared/DocumentCard.tsx delete mode 100644 frontend/src/app/components/shared/DocxView.tsx delete mode 100644 frontend/src/app/components/shared/EmailPillInput.tsx create mode 100644 frontend/src/app/components/shared/FileTypeIcon.tsx delete mode 100644 frontend/src/app/components/shared/MfaVerificationPopup.tsx delete mode 100644 frontend/src/app/components/shared/Modal.tsx delete mode 100644 frontend/src/app/components/shared/OwnerOnlyModal.tsx delete mode 100644 frontend/src/app/components/shared/PeopleModal.tsx delete mode 100644 frontend/src/app/components/shared/PreResponseWrapper.tsx delete mode 100644 frontend/src/app/components/shared/ProjectPicker.tsx delete mode 100644 frontend/src/app/components/shared/RelevantQuotes.tsx delete mode 100644 frontend/src/app/components/shared/RenameableTitle.tsx delete mode 100644 frontend/src/app/components/shared/UploadNewVersionModal.tsx delete mode 100644 frontend/src/app/components/shared/WarningPopup.tsx delete mode 100644 frontend/src/app/components/shared/highlightDocxQuote.ts delete mode 100644 frontend/src/app/components/shared/highlightQuote.ts delete mode 100644 frontend/src/app/components/tabular/AddNewTRModal.tsx delete mode 100644 frontend/src/app/components/tabular/prompt-generator.ts delete mode 100644 frontend/src/app/components/workflows/DisplayWorkflowModal.tsx delete mode 100644 frontend/src/app/components/workflows/ShareWorkflowModal.tsx delete mode 100644 frontend/src/app/components/workflows/WorkflowDetailsModal.tsx delete mode 100644 frontend/src/app/components/workflows/builtinWorkflows.ts delete mode 100644 frontend/src/app/hooks/useDocumentVersions.ts delete mode 100644 frontend/src/components/ui/badge.tsx create mode 100644 frontend/src/components/ui/pill-button.tsx delete mode 100644 frontend/src/components/ui/text-search-widget.tsx delete mode 100644 frontend/src/lib/auth.ts delete mode 100644 frontend/src/lib/fileConverter.ts delete mode 100644 frontend/src/lib/label.ts delete mode 100644 frontend/src/lib/slug.ts delete mode 100644 frontend/src/lib/types.ts delete mode 100644 frontend/src/scripts/convert-courts-to-ts.js create mode 100644 frontend/src/types/luckyexcel.d.ts create mode 100644 scripts/build-workflows.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5fbd2ed..3ab6e1c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,6 +20,19 @@ Thanks for helping improve Mike. Please keep contributions small, focused, and e - why - testing +## System Workflows + +System workflows live in `workflows/`. Update `metadata.json` for structured +metadata like author, language, version, practice area, or jurisdictions, +update `SKILL.md` for workflow instructions, and use `table-config.json` for +tabular review columns. + +After changing system workflows, regenerate the app files: + +```bash +node scripts/build-workflows.js +``` + ## Security Do not open a public issue for security vulnerabilities. Use [GitHub's private vulnerability reporting](https://github.com/willchen96/mike/security/advisories/new) instead. diff --git a/backend/bun.lock b/backend/bun.lock index 90061e1..50c811c 100644 --- a/backend/bun.lock +++ b/backend/bun.lock @@ -9,6 +9,7 @@ "@aws-sdk/client-s3": "^3.787.0", "@aws-sdk/s3-request-presigner": "^3.787.0", "@google/genai": "^1.50.1", + "@modelcontextprotocol/sdk": "^1.29.0", "@supabase/supabase-js": "^2.49.4", "cors": "^2.8.5", "docx": "^9.5.0", @@ -24,6 +25,7 @@ "multer": "^1.4.5-lts.2", "pdfjs-dist": "^4.10.38", "resend": "^4.5.1", + "zod": "^3.25.76", }, "devDependencies": { "@types/cors": "^2.8.17", @@ -179,6 +181,10 @@ "@google/genai": ["@google/genai@1.50.1", "", { "dependencies": { "google-auth-library": "^10.3.0", "p-retry": "^4.6.2", "protobufjs": "^7.5.4", "ws": "^8.18.0" }, "peerDependencies": { "@modelcontextprotocol/sdk": "^1.25.2" }, "optionalPeers": ["@modelcontextprotocol/sdk"] }, "sha512-YbkX7H9+1Pt8wOt7DDREy8XSoiL6fRDzZQRyaVBarFf8MR3zHGqVdvM4cLbDXqPhxqvegZShgfxb8kw9C7YhAQ=="], + "@hono/node-server": ["@hono/node-server@1.19.14", "", { "peerDependencies": { "hono": "^4" } }, "sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw=="], + + "@modelcontextprotocol/sdk": ["@modelcontextprotocol/sdk@1.29.0", "", { "dependencies": { "@hono/node-server": "^1.19.9", "ajv": "^8.17.1", "ajv-formats": "^3.0.1", "content-type": "^1.0.5", "cors": "^2.8.5", "cross-spawn": "^7.0.5", "eventsource": "^3.0.2", "eventsource-parser": "^3.0.0", "express": "^5.2.1", "express-rate-limit": "^8.2.1", "hono": "^4.11.4", "jose": "^6.1.3", "json-schema-typed": "^8.0.2", "pkce-challenge": "^5.0.0", "raw-body": "^3.0.0", "zod": "^3.25 || ^4.0", "zod-to-json-schema": "^3.25.1" }, "peerDependencies": { "@cfworker/json-schema": "^4.1.1" }, "optionalPeers": ["@cfworker/json-schema"] }, "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ=="], + "@napi-rs/canvas": ["@napi-rs/canvas@0.1.97", "", { "optionalDependencies": { "@napi-rs/canvas-android-arm64": "0.1.97", "@napi-rs/canvas-darwin-arm64": "0.1.97", "@napi-rs/canvas-darwin-x64": "0.1.97", "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.97", "@napi-rs/canvas-linux-arm64-gnu": "0.1.97", "@napi-rs/canvas-linux-arm64-musl": "0.1.97", "@napi-rs/canvas-linux-riscv64-gnu": "0.1.97", "@napi-rs/canvas-linux-x64-gnu": "0.1.97", "@napi-rs/canvas-linux-x64-musl": "0.1.97", "@napi-rs/canvas-win32-arm64-msvc": "0.1.97", "@napi-rs/canvas-win32-x64-msvc": "0.1.97" } }, "sha512-8cFniXvrIEnVwuNSRCW9wirRZbHvrD3JVujdS2P5n5xiJZNZMOZcfOvJ1pb66c7jXMKHHglJEDVJGbm8XWFcXQ=="], "@napi-rs/canvas-android-arm64": ["@napi-rs/canvas-android-arm64@0.1.97", "", { "os": "android", "cpu": "arm64" }, "sha512-V1c/WVw+NzH8vk7ZK/O8/nyBSCQimU8sfMsB/9qeSvdkGKNU7+mxy/bIF0gTgeBFmHpj30S4E9WHMSrxXGQuVQ=="], @@ -379,6 +385,10 @@ "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="], + "ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="], + + "ajv-formats": ["ajv-formats@3.0.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ=="], + "append-field": ["append-field@1.0.0", "", {}, "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="], "argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="], @@ -423,6 +433,8 @@ "cors": ["cors@2.8.6", "", { "dependencies": { "object-assign": "^4", "vary": "^1" } }, "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw=="], + "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], + "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="], "debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="], @@ -471,16 +483,22 @@ "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="], + "eventsource": ["eventsource@3.0.7", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="], + + "eventsource-parser": ["eventsource-parser@3.1.0", "", {}, "sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg=="], + "express": ["express@4.22.1", "", { "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", "body-parser": "~1.20.3", "content-disposition": "~0.5.4", "content-type": "~1.0.4", "cookie": "~0.7.1", "cookie-signature": "~1.0.6", "debug": "2.6.9", "depd": "2.0.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", "finalhandler": "~1.3.1", "fresh": "~0.5.2", "http-errors": "~2.0.0", "merge-descriptors": "1.0.3", "methods": "~1.1.2", "on-finished": "~2.4.1", "parseurl": "~1.3.3", "path-to-regexp": "~0.1.12", "proxy-addr": "~2.0.7", "qs": "~6.14.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", "send": "~0.19.0", "serve-static": "~1.16.2", "setprototypeof": "1.2.0", "statuses": "~2.0.1", "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" } }, "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g=="], "express-rate-limit": ["express-rate-limit@8.5.1", "", { "dependencies": { "ip-address": "^10.2.0" }, "peerDependencies": { "express": ">= 4.11" } }, "sha512-5O6KYmyJEpuPJV5hNTXKbAHWRqrzyu+OI3vUnSd2kXFubIVpG7ezpgxQy76Zo5GQZtrQBg86hF+CM/NX+cioiQ=="], "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="], - "fast-deep-equal": ["fast-deep-equal@2.0.1", "", {}, "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w=="], + "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="], "fast-diff": ["fast-diff@1.3.0", "", {}, "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="], + "fast-uri": ["fast-uri@3.1.2", "", {}, "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ=="], + "fast-xml-builder": ["fast-xml-builder@1.1.5", "", { "dependencies": { "path-expression-matcher": "^1.1.3" } }, "sha512-4TJn/8FKLeslLAH3dnohXqE3QSoxkhvaMzepOIZytwJXZO69Bfz0HBdDHzOTOon6G59Zrk6VQ2bEiv1t61rfkA=="], "fast-xml-parser": ["fast-xml-parser@5.7.2", "", { "dependencies": { "@nodable/entities": "^2.1.0", "fast-xml-builder": "^1.1.5", "path-expression-matcher": "^1.5.0", "strnum": "^2.2.3" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-P7oW7tLbYnhOLQk/Gv7cZgzgMPP/XN03K02/Jy6Y/NHzyIAIpxuZIM/YqAkfiXFPxA2CTm7NtCijK9EDu09u2w=="], @@ -523,6 +541,8 @@ "helmet": ["helmet@8.1.0", "", {}, "sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg=="], + "hono": ["hono@4.12.25", "", {}, "sha512-2NFaIyNVgJmBs/ecmtGzlmluTFs5cHEWGTdu0t1HBwYzoGXOL5nUQBRMXsXWla5i4KkG//QMzVP88m1+I3fdAQ=="], + "html-to-text": ["html-to-text@9.0.5", "", { "dependencies": { "@selderee/plugin-htmlparser2": "^0.11.0", "deepmerge": "^4.3.1", "dom-serializer": "^2.0.0", "htmlparser2": "^8.0.2", "selderee": "^0.11.0" } }, "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg=="], "htmlparser2": ["htmlparser2@8.0.2", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1", "entities": "^4.4.0" } }, "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA=="], @@ -533,7 +553,7 @@ "iceberg-js": ["iceberg-js@0.8.1", "", {}, "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA=="], - "iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="], + "iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="], "immediate": ["immediate@3.0.6", "", {}, "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="], @@ -543,12 +563,22 @@ "ipaddr.js": ["ipaddr.js@1.9.1", "", {}, "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="], + "is-promise": ["is-promise@4.0.0", "", {}, "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="], + "isarray": ["isarray@1.0.0", "", {}, "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="], + "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], + + "jose": ["jose@6.2.3", "", {}, "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw=="], + "json-bigint": ["json-bigint@1.0.0", "", { "dependencies": { "bignumber.js": "^9.0.0" } }, "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ=="], "json-schema-to-ts": ["json-schema-to-ts@3.1.1", "", { "dependencies": { "@babel/runtime": "^7.18.3", "ts-algebra": "^2.0.0" } }, "sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g=="], + "json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="], + + "json-schema-typed": ["json-schema-typed@8.0.2", "", {}, "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA=="], + "jszip": ["jszip@3.10.1", "", { "dependencies": { "lie": "~3.3.0", "pako": "~1.0.2", "readable-stream": "~2.3.6", "setimmediate": "^1.0.5" } }, "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g=="], "jwa": ["jwa@2.0.1", "", { "dependencies": { "buffer-equal-constant-time": "^1.0.1", "ecdsa-sig-formatter": "1.0.11", "safe-buffer": "^5.0.1" } }, "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg=="], @@ -577,9 +607,9 @@ "mime": ["mime@1.6.0", "", { "bin": "cli.js" }, "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="], - "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="], + "mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="], - "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="], + "mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="], "minimalistic-assert": ["minimalistic-assert@1.0.1", "", {}, "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="], @@ -605,6 +635,8 @@ "on-finished": ["on-finished@2.4.1", "", { "dependencies": { "ee-first": "1.1.1" } }, "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg=="], + "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="], + "option": ["option@0.2.4", "", {}, "sha512-pkEqbDyl8ou5cpq+VsnQbe/WlEy5qS7xPzMS1U55OCG9KPvwFD46zDbxQIj3egJSFc3D+XhYOPUzz49zQAVy7A=="], "p-retry": ["p-retry@4.6.2", "", { "dependencies": { "@types/retry": "0.12.0", "retry": "^0.13.1" } }, "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ=="], @@ -619,12 +651,16 @@ "path-is-absolute": ["path-is-absolute@1.0.1", "", {}, "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="], + "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="], + "path-to-regexp": ["path-to-regexp@0.1.13", "", {}, "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA=="], "pdfjs-dist": ["pdfjs-dist@4.10.38", "", { "optionalDependencies": { "@napi-rs/canvas": "^0.1.65" } }, "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ=="], "peberminta": ["peberminta@0.9.0", "", {}, "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ=="], + "pkce-challenge": ["pkce-challenge@5.0.1", "", {}, "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ=="], + "prettier": ["prettier@3.8.1", "", { "bin": "bin/prettier.cjs" }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="], "process-nextick-args": ["process-nextick-args@2.0.1", "", {}, "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="], @@ -637,7 +673,7 @@ "range-parser": ["range-parser@1.2.1", "", {}, "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="], - "raw-body": ["raw-body@2.5.3", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.4.24", "unpipe": "~1.0.0" } }, "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA=="], + "raw-body": ["raw-body@3.0.2", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.7.0", "unpipe": "~1.0.0" } }, "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA=="], "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="], @@ -647,12 +683,16 @@ "readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="], + "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="], + "resend": ["resend@4.8.0", "", { "dependencies": { "@react-email/render": "1.1.2" } }, "sha512-R8eBOFQDO6dzRTDmaMEdpqrkmgSjPpVXt4nGfWsZdYOet0kqra0xgbvTES6HmCriZEXbmGk3e0DiGIaLFTFSHA=="], "resolve-pkg-maps": ["resolve-pkg-maps@1.0.0", "", {}, "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw=="], "retry": ["retry@0.13.1", "", {}, "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="], + "router": ["router@2.2.0", "", { "dependencies": { "debug": "^4.4.0", "depd": "^2.0.0", "is-promise": "^4.0.0", "parseurl": "^1.3.3", "path-to-regexp": "^8.0.0" } }, "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ=="], + "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="], "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="], @@ -671,6 +711,10 @@ "setprototypeof": ["setprototypeof@1.2.0", "", {}, "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="], + "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="], + + "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="], + "side-channel": ["side-channel@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3", "side-channel-list": "^1.0.0", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" } }, "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw=="], "side-channel-list": ["side-channel-list@1.0.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3" } }, "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA=="], @@ -719,6 +763,10 @@ "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="], + "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="], + + "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="], + "ws": ["ws@8.20.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA=="], "xml": ["xml@1.0.1", "", {}, "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="], @@ -729,6 +777,10 @@ "xtend": ["xtend@4.0.2", "", {}, "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="], + "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="], + + "zod-to-json-schema": ["zod-to-json-schema@3.25.2", "", { "peerDependencies": { "zod": "^3.25.28 || ^4" } }, "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA=="], + "@aws-crypto/sha1-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="], "@aws-crypto/sha256-browser/@smithy/util-utf8": ["@smithy/util-utf8@2.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="], @@ -737,20 +789,36 @@ "@aws-sdk/xml-builder/fast-xml-parser": ["fast-xml-parser@5.5.8", "", { "dependencies": { "fast-xml-builder": "^1.1.4", "path-expression-matcher": "^1.2.0", "strnum": "^2.2.0" }, "bin": { "fxparser": "src/cli/cli.js" } }, "sha512-Z7Fh2nVQSb2d+poDViM063ix2ZGt9jmY1nWhPfHBOK2Hgnb/OW3P4Et3P/81SEej0J7QbWtJqxO05h8QYfK7LQ=="], + "@modelcontextprotocol/sdk/express": ["express@5.2.1", "", { "dependencies": { "accepts": "^2.0.0", "body-parser": "^2.2.1", "content-disposition": "^1.0.0", "content-type": "^1.0.5", "cookie": "^0.7.1", "cookie-signature": "^1.2.1", "debug": "^4.4.0", "depd": "^2.0.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "finalhandler": "^2.1.0", "fresh": "^2.0.0", "http-errors": "^2.0.0", "merge-descriptors": "^2.0.0", "mime-types": "^3.0.0", "on-finished": "^2.4.1", "once": "^1.4.0", "parseurl": "^1.3.3", "proxy-addr": "^2.0.7", "qs": "^6.14.0", "range-parser": "^1.2.1", "router": "^2.2.0", "send": "^1.1.0", "serve-static": "^2.2.0", "statuses": "^2.0.1", "type-is": "^2.0.1", "vary": "^1.1.2" } }, "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw=="], + "@types/serve-static/@types/send": ["@types/send@0.17.6", "", { "dependencies": { "@types/mime": "^1", "@types/node": "*" } }, "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og=="], + "accepts/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="], + + "body-parser/iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="], + + "body-parser/raw-body": ["raw-body@2.5.3", "", { "dependencies": { "bytes": "~3.1.2", "http-errors": "~2.0.1", "iconv-lite": "~0.4.24", "unpipe": "~1.0.0" } }, "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA=="], + "docx/@types/node": ["@types/node@25.5.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg=="], "https-proxy-agent/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], "protobufjs/@types/node": ["@types/node@25.5.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg=="], + "react-promise-suspense/fast-deep-equal": ["fast-deep-equal@2.0.1", "", {}, "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w=="], + "readable-stream/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="], + "router/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], + + "router/path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="], + "send/ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], "string_decoder/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="], + "type-is/mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="], + "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="], "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="], @@ -761,16 +829,58 @@ "@aws-sdk/xml-builder/fast-xml-parser/path-expression-matcher": ["path-expression-matcher@1.4.0", "", {}, "sha512-s4DQMxIdhj3jLFWd9LxHOplj4p9yQ4ffMGowFf3cpEgrrJjEhN0V5nxw4Ye1EViAGDoL4/1AeO6qHpqYPOzE4Q=="], + "@modelcontextprotocol/sdk/express/accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="], + + "@modelcontextprotocol/sdk/express/body-parser": ["body-parser@2.3.0", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^2.0.0", "debug": "^4.4.3", "http-errors": "^2.0.1", "iconv-lite": "^0.7.2", "on-finished": "^2.4.1", "qs": "^6.15.2", "raw-body": "^3.0.2", "type-is": "^2.1.0" } }, "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw=="], + + "@modelcontextprotocol/sdk/express/content-disposition": ["content-disposition@1.1.0", "", {}, "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g=="], + + "@modelcontextprotocol/sdk/express/cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="], + + "@modelcontextprotocol/sdk/express/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="], + + "@modelcontextprotocol/sdk/express/finalhandler": ["finalhandler@2.1.1", "", { "dependencies": { "debug": "^4.4.0", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "on-finished": "^2.4.1", "parseurl": "^1.3.3", "statuses": "^2.0.1" } }, "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA=="], + + "@modelcontextprotocol/sdk/express/fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="], + + "@modelcontextprotocol/sdk/express/merge-descriptors": ["merge-descriptors@2.0.0", "", {}, "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g=="], + + "@modelcontextprotocol/sdk/express/send": ["send@1.2.1", "", { "dependencies": { "debug": "^4.4.3", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "fresh": "^2.0.0", "http-errors": "^2.0.1", "mime-types": "^3.0.2", "ms": "^2.1.3", "on-finished": "^2.4.1", "range-parser": "^1.2.1", "statuses": "^2.0.2" } }, "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ=="], + + "@modelcontextprotocol/sdk/express/serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="], + + "@modelcontextprotocol/sdk/express/type-is": ["type-is@2.1.0", "", { "dependencies": { "content-type": "^2.0.0", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA=="], + + "accepts/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="], + "docx/@types/node/undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="], "https-proxy-agent/debug/ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], "protobufjs/@types/node/undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="], + "router/debug/ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], + + "type-is/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="], + "@aws-crypto/sha1-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="], "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="], "@aws-crypto/util/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="], + + "@modelcontextprotocol/sdk/express/accepts/negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="], + + "@modelcontextprotocol/sdk/express/body-parser/content-type": ["content-type@2.0.0", "", {}, "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ=="], + + "@modelcontextprotocol/sdk/express/body-parser/qs": ["qs@6.15.2", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw=="], + + "@modelcontextprotocol/sdk/express/debug/ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], + + "@modelcontextprotocol/sdk/express/send/ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], + + "@modelcontextprotocol/sdk/express/type-is/content-type": ["content-type@2.0.0", "", {}, "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ=="], + + "@modelcontextprotocol/sdk/express/type-is/media-typer": ["media-typer@1.1.0", "", {}, "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw=="], } } diff --git a/backend/migrations/20260613_05_workflows_overview_rpc.sql b/backend/migrations/20260613_05_workflows_overview_rpc.sql index d20a5bf..f7b7c77 100644 --- a/backend/migrations/20260613_05_workflows_overview_rpc.sql +++ b/backend/migrations/20260613_05_workflows_overview_rpc.sql @@ -27,19 +27,34 @@ stable as $$ with owned as ( select - w.*, + w.id, + w.user_id::text as user_id, + w.title, + w.type, + w.prompt_md, + w.columns_config, + w.practice, + false as is_system, + w.created_at, true as allow_edit, true as is_owner, null::text as shared_by_name, 0 as sort_bucket from public.workflows w - where w.user_id = p_user_id - and w.is_system = false + where w.user_id::text = p_user_id and (p_type is null or w.type = p_type) ), shared as ( select - w.*, + w.id, + w.user_id::text as user_id, + w.title, + w.type, + w.prompt_md, + w.columns_config, + w.practice, + false as is_system, + w.created_at, ws.allow_edit, false as is_owner, nullif(trim(up.display_name), '') as shared_by_name, @@ -48,7 +63,7 @@ as $$ join public.workflows w on w.id = ws.workflow_id left join public.user_profiles up - on up.user_id::text = ws.shared_by_user_id + on up.user_id::text = ws.shared_by_user_id::text where lower(ws.shared_with_email) = lower(coalesce(p_user_email, '')) and (p_type is null or w.type = p_type) ), diff --git a/backend/migrations/20260625_01_workflow_metadata.sql b/backend/migrations/20260625_01_workflow_metadata.sql new file mode 100644 index 0000000..3391c6b --- /dev/null +++ b/backend/migrations/20260625_01_workflow_metadata.sql @@ -0,0 +1,120 @@ +-- Migration date: 2026-06-25 + +-- Custom workflow metadata fields and workflow overview read model. System +-- workflow versions remain generated from the repository metadata and are not +-- stored on user workflow rows. + +drop function if exists public.get_workflows_overview(text, text, text); + +alter table public.workflows + drop column if exists author, + drop column if exists category, + drop column if exists is_system, + add column if not exists language text default 'English', + add column if not exists jurisdictions text[] default array['General']::text[]; + +alter table public.workflows + alter column language set default 'English', + alter column practice set default 'General Transactions', + alter column jurisdictions set default array['General']::text[]; + +update public.workflows +set + language = coalesce(nullif(trim(language), ''), 'English'), + practice = coalesce(nullif(trim(practice), ''), 'General Transactions'), + jurisdictions = coalesce(jurisdictions, array['General']::text[]) +where user_id is not null; + +create or replace function public.get_workflows_overview( + p_user_id text, + p_user_email text default null, + p_type text default null +) +returns table ( + id uuid, + user_id text, + title text, + type text, + prompt_md text, + columns_config jsonb, + language text, + practice text, + jurisdictions text[], + is_system boolean, + created_at timestamptz, + allow_edit boolean, + is_owner boolean, + shared_by_name text +) +language sql +stable +as $$ + with owned as ( + select + w.id, + w.user_id::text as user_id, + w.title, + w.type, + w.prompt_md, + w.columns_config, + w.language, + w.practice, + w.jurisdictions, + false as is_system, + w.created_at, + true as allow_edit, + true as is_owner, + null::text as shared_by_name, + 0 as sort_bucket + from public.workflows w + where w.user_id::text = p_user_id + and (p_type is null or w.type = p_type) + ), + shared as ( + select + w.id, + w.user_id::text as user_id, + w.title, + w.type, + w.prompt_md, + w.columns_config, + w.language, + w.practice, + w.jurisdictions, + false as is_system, + w.created_at, + ws.allow_edit, + false as is_owner, + nullif(trim(up.display_name), '') as shared_by_name, + 1 as sort_bucket + from public.workflow_shares ws + join public.workflows w + on w.id = ws.workflow_id + left join public.user_profiles up + on up.user_id::text = ws.shared_by_user_id::text + where lower(ws.shared_with_email) = lower(coalesce(p_user_email, '')) + and (p_type is null or w.type = p_type) + ), + visible_workflows as ( + select * from owned + union all + select * from shared + ) + select + vw.id, + vw.user_id, + vw.title, + vw.type, + vw.prompt_md, + vw.columns_config, + vw.language, + vw.practice, + vw.jurisdictions, + vw.is_system, + vw.created_at, + vw.allow_edit, + vw.is_owner, + vw.shared_by_name + from visible_workflows vw + order by vw.sort_bucket asc, vw.created_at desc; +$$; diff --git a/backend/migrations/20260629_01_workflow_open_source_submissions.sql b/backend/migrations/20260629_01_workflow_open_source_submissions.sql new file mode 100644 index 0000000..5cf1f99 --- /dev/null +++ b/backend/migrations/20260629_01_workflow_open_source_submissions.sql @@ -0,0 +1,39 @@ +-- Migration date: 2026-06-29 + +-- Review queue for user-submitted workflows that may later be published to the +-- open-source workflow repository. The backend writes with the service role. + +create table if not exists public.workflow_open_source_submissions ( + id uuid primary key default gen_random_uuid(), + workflow_id uuid not null references public.workflows(id) on delete cascade, + submitted_by_user_id text not null, + submitter_email text, + submitter_name text, + contributor_mode text not null default 'anonymous', + status text not null default 'pending', + snapshot jsonb not null, + submitted_at timestamptz not null default now(), + updated_at timestamptz not null default now(), + reviewed_at timestamptz, + reviewed_by_user_id text, + review_notes text, + constraint workflow_open_source_submissions_status_check + check (status in ('pending', 'approved', 'rejected')), + constraint workflow_open_source_submissions_contributor_mode_check + check (contributor_mode in ('named', 'anonymous')) +); + +create unique index if not exists idx_workflow_open_source_submissions_pending + on public.workflow_open_source_submissions(workflow_id, submitted_by_user_id) + where status = 'pending'; + +create index if not exists idx_workflow_open_source_submissions_reviewer_queue + on public.workflow_open_source_submissions(status, submitted_at desc); + +create index if not exists idx_workflow_open_source_submissions_submitter + on public.workflow_open_source_submissions(submitted_by_user_id, submitted_at desc); + +alter table public.workflow_open_source_submissions enable row level security; + +revoke all privileges on table public.workflow_open_source_submissions + from anon, authenticated; diff --git a/backend/package-lock.json b/backend/package-lock.json index ead4e3b..c7597a9 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "mike-backend", "version": "1.0.0", - "license": "AGPL-3.0-only", "dependencies": { "@anthropic-ai/sdk": "^0.90.0", "@aws-sdk/client-s3": "^3.787.0", @@ -29,6 +28,7 @@ "multer": "^1.4.5-lts.2", "pdfjs-dist": "^4.10.38", "resend": "^4.5.1", + "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", "zod": "^3.25.76" }, "devDependencies": { @@ -5473,6 +5473,18 @@ } } }, + "node_modules/xlsx": { + "version": "0.20.3", + "resolved": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", + "integrity": "sha512-oLDq3jw7AcLqKWH2AhCpVTZl8mf6X2YReP+Neh0SJUzV/BdZYjth94tG5toiMB1PPrYtxOCfaoUCkvtuH+3AJA==", + "license": "Apache-2.0", + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/xml": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz", diff --git a/backend/package.json b/backend/package.json index fb7a18b..5ef2f07 100644 --- a/backend/package.json +++ b/backend/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "dev": "tsx watch src/index.ts", + "prebuild": "node ../scripts/build-workflows.js", "build": "tsc", "start": "node dist/index.js" }, @@ -28,6 +29,7 @@ "multer": "^1.4.5-lts.2", "pdfjs-dist": "^4.10.38", "resend": "^4.5.1", + "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", "zod": "^3.25.76" }, "devDependencies": { diff --git a/backend/schema.sql b/backend/schema.sql index 9dec314..5e48fa5 100644 --- a/backend/schema.sql +++ b/backend/schema.sql @@ -12,6 +12,7 @@ create extension if not exists "pgcrypto"; create table if not exists public.user_profiles ( id uuid primary key default gen_random_uuid(), user_id uuid not null unique references auth.users(id) on delete cascade, + email text, display_name text, organisation text, tier text not null default 'Free', @@ -29,6 +30,13 @@ create table if not exists public.user_profiles ( create index if not exists idx_user_profiles_user on public.user_profiles(user_id); +create unique index if not exists user_profiles_email_lower_unique + on public.user_profiles (lower(email)) + where email is not null and btrim(email) <> ''; + +create index if not exists idx_user_profiles_email + on public.user_profiles(email); + create or replace function public.handle_new_user() returns trigger language plpgsql @@ -36,9 +44,11 @@ security definer set search_path = public as $$ begin - insert into public.user_profiles (user_id) - values (new.id) - on conflict (user_id) do nothing; + insert into public.user_profiles (user_id, email) + values (new.id, lower(new.email)) + on conflict (user_id) do update + set email = excluded.email, + updated_at = now(); return new; exception when others then -- Never block signup if the profile insert fails. @@ -186,6 +196,7 @@ create table if not exists public.projects ( user_id text not null, name text not null, cm_number text, + practice text, visibility text not null default 'private', shared_with jsonb not null default '[]'::jsonb, created_at timestamptz not null default now(), @@ -323,8 +334,9 @@ create table if not exists public.workflows ( type text not null, prompt_md text, columns_config jsonb, - practice text, - is_system boolean not null default false, + language text default 'English', + practice text default 'General Transactions', + jurisdictions text[] default array['General']::text[], created_at timestamptz not null default now() ); @@ -371,7 +383,9 @@ returns table ( type text, prompt_md text, columns_config jsonb, + language text, practice text, + jurisdictions text[], is_system boolean, created_at timestamptz, allow_edit boolean, @@ -383,19 +397,38 @@ stable as $$ with owned as ( select - w.*, + w.id, + w.user_id::text as user_id, + w.title, + w.type, + w.prompt_md, + w.columns_config, + w.language, + w.practice, + w.jurisdictions, + false as is_system, + w.created_at, true as allow_edit, true as is_owner, null::text as shared_by_name, 0 as sort_bucket from public.workflows w - where w.user_id = p_user_id - and w.is_system = false + where w.user_id::text = p_user_id and (p_type is null or w.type = p_type) ), shared as ( select - w.*, + w.id, + w.user_id::text as user_id, + w.title, + w.type, + w.prompt_md, + w.columns_config, + w.language, + w.practice, + w.jurisdictions, + false as is_system, + w.created_at, ws.allow_edit, false as is_owner, nullif(trim(up.display_name), '') as shared_by_name, @@ -404,7 +437,7 @@ as $$ join public.workflows w on w.id = ws.workflow_id left join public.user_profiles up - on up.user_id::text = ws.shared_by_user_id + on up.user_id::text = ws.shared_by_user_id::text where lower(ws.shared_with_email) = lower(coalesce(p_user_email, '')) and (p_type is null or w.type = p_type) ), @@ -420,7 +453,9 @@ as $$ vw.type, vw.prompt_md, vw.columns_config, + vw.language, vw.practice, + vw.jurisdictions, vw.is_system, vw.created_at, vw.allow_edit, @@ -489,7 +524,7 @@ create table if not exists public.chat_messages ( role text not null, content jsonb, files jsonb, - annotations jsonb, + citations jsonb, created_at timestamptz not null default now() ); @@ -549,6 +584,7 @@ returns table ( user_id text, name text, cm_number text, + practice text, shared_with jsonb, created_at timestamptz, updated_at timestamptz, @@ -595,6 +631,7 @@ as $$ vp.user_id, vp.name, vp.cm_number, + vp.practice, vp.shared_with, vp.created_at, vp.updated_at, diff --git a/backend/src/lib/builtinWorkflows.ts b/backend/src/lib/builtinWorkflows.ts deleted file mode 100644 index 7154d77..0000000 --- a/backend/src/lib/builtinWorkflows.ts +++ /dev/null @@ -1,76 +0,0 @@ -export const BUILTIN_WORKFLOWS: { id: string; title: string; prompt_md: string }[] = [ - { - id: "builtin-cp-checklist", - title: "Generate CP Checklist", - prompt_md: - "## Generate Conditions Precedent Checklist\n\n" + - "Review the uploaded credit agreement or financing document and generate a comprehensive " + - "Conditions Precedent (CP) checklist.\n\n" + - "You MUST use the generate_docx tool to produce the checklist as a downloadable Word document. " + - "You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. " + - "Do not display the checklist inline — generate the .docx file and provide the download link.\n\n" + - "Structure the document as follows:\n" + - "- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n" + - "- Under each category heading, include a table with exactly these four columns in this order:\n" + - " 1. Index — sequential number within the category (1, 2, 3…)\n" + - " 2. Clause Number — the clause or schedule reference from the agreement\n" + - " 3. Clause — a concise description of the condition precedent\n" + - " 4. Status — leave blank (empty string) for the user to fill in\n\n" + - "Use the table field in the section object (not content) for each category's rows.\n\n" + - "Before finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status).", - }, - { - id: "builtin-credit-summary", - title: "Credit Agreement Summary", - prompt_md: - "## Credit Agreement Summary\n\n" + - "Review the uploaded credit agreement and produce a comprehensive legal summary covering the following topics. " + - "For each section, identify the key provisions, quote the relevant clause or schedule references, and flag any unusual, onerous, or non-market terms.\n\n" + - "1. **Lenders** — All lenders or members of the lender syndicate, including their full legal name and role (e.g. mandated lead arranger, original lender, agent bank)\n" + - "2. **Borrowers** — All borrowers, including their full legal name and jurisdiction of incorporation\n" + - "3. **Guarantors** — All guarantors, including their full legal name and the scope of their guarantee obligation\n" + - "4. **Other Parties** — Any other material parties (e.g. facility agent, security agent, hedge counterparties, issuing bank) and their roles\n" + - "5. **Date of Agreement** — Date of the credit agreement\n" + - "6. **Facilities** — Each facility available (e.g. Revolving Credit Facility, Term Loan A, Term Loan B, Term Loan C), the facility type, tranche name, and any key structural features\n" + - "7. **Amount** — Total committed amount across all facilities, the currency, and breakdown by tranche if applicable\n" + - "8. **Purpose** — Stated purpose for which borrowings may be used and any restrictions on use of proceeds\n" + - "9. **Interest** — Applicable reference rate (e.g. SOFR, EURIBOR, base rate), the margin, any margin ratchet mechanism, and how interest periods are structured\n" + - "10. **Commitment Fee** — Commitment or utilisation fees, the applicable rate, how they are calculated, and the basis (e.g. undrawn commitment, average utilisation)\n" + - "11. **Repayment Schedule** — Repayment profile for each facility, whether by scheduled instalments or bullet repayment, and the repayment dates and amounts\n" + - "12. **Maturity** — Final maturity date for each facility\n" + - "13. **Security** — Each class of security granted or required (e.g. share pledges, fixed and floating charges, real estate mortgages, account pledges) and the assets or entities over which security is taken\n" + - "14. **Guarantees** — Guarantee obligations, the guarantors, the scope of the guarantee, and any limitations (e.g. up-stream guarantee limitations, guarantor coverage test)\n" + - "15. **Financial Covenants** — Each financial covenant, the metric (e.g. leverage ratio, interest cover, cashflow cover), the applicable test, testing frequency, and any equity cure rights\n" + - "16. **Events of Default** — Each event of default, noting any grace periods, materiality thresholds, or cross-default provisions\n" + - "17. **Assignment** — Restrictions or permissions on assignment or transfer (e.g. white/blacklists, borrower consent for lender transfers; restrictions on borrower assignment)\n" + - "18. **Change of Control** — What constitutes a change of control, what obligations it triggers (e.g. mandatory prepayment, cancellation, lender consent), and any cure period\n" + - "19. **Prepayment Fee** — Any prepayment fees, make-whole premiums, or soft-call protections, the applicable fee, the period during which it applies, and any exceptions (e.g. prepayment from insurance proceeds or asset disposals)\n" + - "20. **Governing Law** — Governing law of the agreement\n" + - "21. **Dispute Resolution** — Whether disputes go to litigation or arbitration, the chosen forum or seat, and any submission to jurisdiction provisions\n\n" + - "Deliver the summary inline in your chat response — do NOT call generate_docx. Only produce a downloadable Word document if the user explicitly asks for one.", - }, - { - id: "builtin-sha-summary", - title: "Shareholder Agreement Summary", - prompt_md: - "## Shareholder Agreement Summary\n\n" + - "Review the uploaded shareholder agreement and produce a comprehensive legal summary covering the following topics. " + - "For each section, identify the key provisions, quote the relevant clause references, and flag any unusual, onerous, or market-standard deviations.\n\n" + - "1. **Parties & Shareholdings** — Full legal names, roles, share classes held, and percentage interests (on a fully diluted basis if stated)\n" + - "2. **Share Classes & Rights** — For each class: voting rights, dividend rights, liquidation preference, conversion or redemption features\n" + - "3. **Board Composition & Governance** — Board size, director appointment rights (and the shareholding thresholds required to maintain them), quorum, and casting vote\n" + - "4. **Reserved Matters** — Decisions requiring a special majority, unanimity, or a specific shareholder's consent; note the threshold and whose consent is required for each\n" + - "5. **Pre-emption on New Shares** — Who holds pre-emption rights, procedure, timeline, and any carve-outs (e.g. employee option schemes)\n" + - "6. **Transfer Restrictions** — Lock-up periods, prohibited transfers, permitted transfers (e.g. to affiliates), and any board or shareholder approval requirements\n" + - "7. **Right of First Refusal / Pre-emption on Transfer** — Trigger, procedure, pricing mechanics, and any exceptions\n" + - "8. **Drag-Along Rights** — Who holds the right, threshold to trigger, conditions (e.g. minimum price, independent valuation), and minority protections\n" + - "9. **Tag-Along Rights** — Who holds the right, triggering threshold, exercise procedure, and price terms\n" + - "10. **Anti-Dilution Protections** — Type (full ratchet, weighted average), trigger events, calculation mechanics, and exceptions\n" + - "11. **Dividend Policy** — Any obligation or target to pay dividends, preferential dividend rights, and restrictions on distributions\n" + - "12. **Exit & Liquidity** — Agreed exit routes (trade sale, IPO, drag sale), timelines, and liquidation preferences on exit\n" + - "13. **Deadlock** — Deadlock definition, escalation and resolution mechanisms (e.g. Russian roulette, put/call options), and consequences if unresolved\n" + - "14. **Non-Compete & Non-Solicitation** — Who is bound, scope of activities and geography, duration, and carve-outs\n" + - "15. **Governing Law & Dispute Resolution** — Applicable law, forum, arbitration or litigation, and any mandatory escalation steps\n\n" + - "Generate the summary as a downloadable Word document.", - }, -]; diff --git a/backend/src/lib/chat/citations.ts b/backend/src/lib/chat/citations.ts new file mode 100644 index 0000000..cd7fb0a --- /dev/null +++ b/backend/src/lib/chat/citations.ts @@ -0,0 +1,310 @@ +import { type DocIndex, resolveDoc } from "./types"; + +// --------------------------------------------------------------------------- +// Internal citation parse types +// --------------------------------------------------------------------------- + +type DocumentQuote = { + page: number | string; + quote: string; + // Spreadsheet sources are located by cell instead of page: `sheet` is the + // worksheet name and `cell` is an A1 address or range (e.g. "B7" or "B7:C9"). + sheet?: string; + cell?: string; +}; + +type ParsedDocumentCitation = { + kind: "document"; + ref: number; + doc_id: string; + page: number | string; + quote: string; + sheet?: string; + cell?: string; + quotes: DocumentQuote[]; +}; + +type ParsedCaseCitation = { + kind: "case"; + ref: number; + cluster_id: number; + quotes: { + opinionId: number | null; + type: string | null; + author: string | null; + quote: string; + }[]; +}; + +type ParsedCitation = ParsedDocumentCitation | ParsedCaseCitation; + +function normalizeCitation(raw: unknown): ParsedCitation | null { + if (!raw || typeof raw !== "object") return null; + const c = raw as Record; + const markerRef = + typeof c.marker === "string" + ? Number(c.marker.match(/^\[(\d+)\]$/)?.[1]) + : NaN; + const ref = + typeof c.ref === "number" + ? c.ref + : Number.isFinite(markerRef) + ? markerRef + : null; + if (typeof ref !== "number") return null; + const quote = typeof c.quote === "string" ? c.quote : c.text; + + const rawClusterId = + typeof c.cluster_id === "number" + ? c.cluster_id + : typeof c.clusterId === "number" + ? c.clusterId + : typeof c.cluster_id === "string" + ? Number.parseInt(c.cluster_id, 10) + : typeof c.clusterId === "string" + ? Number.parseInt(c.clusterId, 10) + : NaN; + if (Number.isFinite(rawClusterId) && rawClusterId > 0) { + const quotes = normalizeCaseCitationQuotes(c); + if (!quotes.length) { + if (typeof quote !== "string" || !quote) return null; + quotes.push({ opinionId: null, type: null, author: null, quote }); + } + return { kind: "case", ref, cluster_id: Math.floor(rawClusterId), quotes }; + } + + if (typeof c.doc_id !== "string") return null; + const quotes = normalizeDocumentCitationQuotes(c); + if (!quotes.length) { + if (typeof quote !== "string" || !quote) return null; + quotes.push({ + page: normalizeCitationPage(c.page), + quote, + ...normalizeCellLocator(c), + }); + } + return { + kind: "document", + ref, + doc_id: c.doc_id, + page: quotes[0].page, + quote: quotes[0].quote, + sheet: quotes[0].sheet, + cell: quotes[0].cell, + quotes, + }; +} + +/** Pull an optional spreadsheet `{sheet, cell}` locator off a raw object. */ +function normalizeCellLocator( + c: Record, +): { sheet?: string; cell?: string } { + const out: { sheet?: string; cell?: string } = {}; + if (typeof c.sheet === "string" && c.sheet.trim()) out.sheet = c.sheet.trim(); + if (typeof c.cell === "string" && c.cell.trim()) out.cell = c.cell.trim(); + return out; +} + +function normalizeCitationPage(value: unknown): number | string { + if (typeof value === "number") { + return value; + } else if (typeof value === "string" && /^\d+\s*-\s*\d+$/.test(value)) { + return value; + } else { + const n = parseInt(String(value ?? ""), 10); + if (!Number.isFinite(n)) return 1; + return n; + } +} + +function normalizeDocumentCitationQuotes( + c: Record, +): DocumentQuote[] { + if (!Array.isArray(c.quotes)) return []; + return c.quotes + .slice(0, 3) + .map((raw): DocumentQuote | null => { + if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null; + const row = raw as Record; + const text = typeof row.quote === "string" ? row.quote : row.text; + if (typeof text !== "string" || !text.trim()) return null; + // Fall back to the top-level sheet/cell so a citation can set them once. + return { + page: normalizeCitationPage(row.page ?? c.page), + quote: text, + ...normalizeCellLocator({ + sheet: row.sheet ?? c.sheet, + cell: row.cell ?? c.cell, + }), + }; + }) + .filter((quote): quote is DocumentQuote => !!quote); +} + +function normalizeCaseCitationQuotes(c: Record) { + if (!Array.isArray(c.quotes)) return []; + return c.quotes + .slice(0, 3) + .map((raw) => { + if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null; + const row = raw as Record; + const text = typeof row.quote === "string" ? row.quote : row.text; + if (typeof text !== "string" || !text.trim()) return null; + const opinionId = + typeof row.opinion_id === "number" && Number.isFinite(row.opinion_id) + ? Math.floor(row.opinion_id) + : typeof row.opinionId === "number" && Number.isFinite(row.opinionId) + ? Math.floor(row.opinionId) + : null; + return { + opinionId, + type: typeof row.type === "string" ? row.type : null, + author: typeof row.author === "string" ? row.author : null, + quote: text, + }; + }) + .filter( + (quote): quote is { + opinionId: number | null; + type: string | null; + author: string | null; + quote: string; + } => !!quote, + ); +} + +// --------------------------------------------------------------------------- +// Citation block constants and parsers +// --------------------------------------------------------------------------- + +export const CITATIONS_BLOCK_RE = /\s*([\s\S]*?)\s*<\/CITATIONS>/; +export const CITATIONS_OPEN_TAG = ""; +export const CITATIONS_CLOSE_TAG = ""; + +type CitationParseDiagnostics = { + hasBlock: boolean; + rawLength: number; + error: string | null; +}; + +export function parseCitationsWithDiagnostics(text: string): { + citations: ParsedCitation[]; + diagnostics: CitationParseDiagnostics; +} { + const match = text.match(CITATIONS_BLOCK_RE); + if (!match) { + return { citations: [], diagnostics: { hasBlock: false, rawLength: 0, error: null } }; + } + const raw = match[1] ?? ""; + try { + const parsed = JSON.parse(raw); + if (!Array.isArray(parsed)) { + return { + citations: [], + diagnostics: { hasBlock: true, rawLength: raw.length, error: "CITATIONS block JSON was not an array." }, + }; + } + return { + citations: parsed.map(normalizeCitation).filter((c): c is ParsedCitation => c !== null), + diagnostics: { hasBlock: true, rawLength: raw.length, error: null }, + }; + } catch (error) { + return { + citations: [], + diagnostics: { + hasBlock: true, + rawLength: raw.length, + error: error instanceof Error ? error.message : String(error), + }, + }; + } +} + +export function parseCitations(text: string): ParsedCitation[] { + return parseCitationsWithDiagnostics(text).citations; +} + +export function parsePartialCitationObjects(text: string): ParsedCitation[] { + const beforeClose = text.split(CITATIONS_CLOSE_TAG)[0] ?? text; + const arrayStart = beforeClose.indexOf("["); + if (arrayStart < 0) return []; + + const parsed: ParsedCitation[] = []; + let inString = false; + let escaped = false; + let depth = 0; + let objectStart = -1; + + for (let i = arrayStart + 1; i < beforeClose.length; i += 1) { + const char = beforeClose[i]; + if (escaped) { escaped = false; continue; } + if (char === "\\") { escaped = inString; continue; } + if (char === '"') { inString = !inString; continue; } + if (inString) continue; + if (char === "{") { + if (depth === 0) objectStart = i; + depth += 1; + } else if (char === "}") { + if (depth === 0) continue; + depth -= 1; + if (depth === 0 && objectStart >= 0) { + try { + const raw = JSON.parse(beforeClose.slice(objectStart, i + 1)); + const citation = normalizeCitation(raw); + if (citation) parsed.push(citation); + } catch { /* ignore incomplete/malformed partial object */ } + objectStart = -1; + } + } else if (char === "]" && depth === 0) { + break; + } + } + return parsed; +} + +type CasesByClusterId = Map; + +export function createCitation( + citation: ParsedCitation, + docIndex: DocIndex, + casesByClusterId?: CasesByClusterId, +) { + if (citation.kind === "case") { + const caseRecord = casesByClusterId?.get(citation.cluster_id); + return { + type: "citation_data", + kind: "case", + ref: citation.ref, + cluster_id: citation.cluster_id, + case_name: caseRecord?.caseName ?? null, + citation: caseRecord?.citations[0] ?? null, + url: caseRecord?.url ?? null, + pdfUrl: caseRecord?.pdfUrl ?? null, + dateFiled: caseRecord?.dateFiled ?? null, + quotes: citation.quotes, + }; + } + + const docInfo = resolveDoc(citation.doc_id, docIndex); + return { + type: "citation_data", + kind: "document", + ref: citation.ref, + doc_id: citation.doc_id, + document_id: docInfo?.document_id, + version_id: docInfo?.version_id ?? null, + version_number: docInfo?.version_number ?? null, + filename: docInfo?.filename ?? citation.doc_id, + page: citation.page, + quote: citation.quote, + sheet: citation.sheet, + cell: citation.cell, + quotes: citation.quotes, + }; +} diff --git a/backend/src/lib/chat/contextBuilders.ts b/backend/src/lib/chat/contextBuilders.ts new file mode 100644 index 0000000..c1794fa --- /dev/null +++ b/backend/src/lib/chat/contextBuilders.ts @@ -0,0 +1,583 @@ +import { createServerSupabase } from "../supabase"; +import { + attachActiveVersionPaths, +} from "../documentVersions"; +import { + type DocStore, + type DocIndex, + type WorkflowStore, + type ChatMessage, + type AskInputsResponseRequest, + type AskInputResponseItem, + devLog, +} from "./types"; +import { buildSystemPrompt } from "./prompts"; +import { parseCitations, createCitation } from "./citations"; +import type { AssistantEvent } from "./streaming"; + + +export async function enrichWithPriorEvents( + messages: ChatMessage[], + chatId: string | null | undefined, + db: ReturnType, + docIndex: DocIndex, +): Promise { + if (!chatId) return messages; + const { data: rows } = await db + .from("chat_messages") + .select("content, created_at") + .eq("chat_id", chatId) + .eq("role", "assistant") + .order("created_at", { ascending: false }) + .limit(1); + + const lastRow = rows?.[0] as { content?: unknown } | undefined; + const content = lastRow?.content; + if (!Array.isArray(content)) return messages; + + const slugByDocumentId = new Map(); + for (const [slug, info] of Object.entries(docIndex)) { + if (info.document_id) slugByDocumentId.set(info.document_id, slug); + } + const refFor = (documentId: unknown, filename: unknown) => { + const slug = + typeof documentId === "string" + ? slugByDocumentId.get(documentId) + : undefined; + return slug ? `${slug} ("${filename}")` : `"${filename}"`; + }; + + const lines: string[] = []; + for (const ev of content as Record[]) { + if (ev?.type === "doc_created") { + lines.push(`- generated_document → ${refFor(ev.document_id, ev.filename)}`); + } else if (ev?.type === "doc_edited") { + lines.push(`- edit_document → ${refFor(ev.document_id, ev.filename)}`); + } else if (ev?.type === "doc_read") { + lines.push(`- read_document → ${refFor(ev.document_id, ev.filename)}`); + } else if (ev?.type === "doc_replicated") { + // The model needs to know what each copy resolved to so it + // can call edit_document / read_document on them. Emit one + // line per copy, all attributed back to the same source. + const srcLabel = + typeof ev.filename === "string" ? `"${ev.filename}"` : ""; + const copies = Array.isArray(ev.copies) + ? (ev.copies as { + new_filename?: unknown; + document_id?: unknown; + }[]) + : []; + for (const c of copies) { + const ref = refFor(c.document_id, c.new_filename); + lines.push( + srcLabel + ? `- replicate_document → ${ref} (copy of ${srcLabel})` + : `- replicate_document → ${ref}`, + ); + } + } else if (ev?.type === "workflow_applied") { + lines.push(`- applied workflow: "${ev.title}"`); + } else if (ev?.type === "ask_inputs") { + const count = Array.isArray(ev.items) ? ev.items.length : 0; + lines.push(`- asked user for ${count} input${count === 1 ? "" : "s"}`); + } else if (ev?.type === "ask_inputs_response") { + const responses = Array.isArray(ev.responses) ? ev.responses : []; + for (const response of responses) { + if (!response || typeof response !== "object") continue; + const row = response as Record; + if (row.skipped) { + lines.push("- user skipped an input"); + } else if (row.kind === "choice" && typeof row.answer === "string") { + lines.push(`- user answered: "${row.answer}"`); + } else if ( + row.kind === "documents" && + Array.isArray(row.filenames) + ) { + lines.push( + `- user attached documents: ${row.filenames.join(", ") || "none"}`, + ); + } + } + } + } + if (lines.length === 0) return messages; + const summary = `\n\n[Tool activity in your previous turn]\n${lines.join("\n")}`; + + // Find the index of the last assistant message and attach the + // summary there only. + let lastAssistantIdx = -1; + for (let i = messages.length - 1; i >= 0; i--) { + if (messages[i].role === "assistant") { + lastAssistantIdx = i; + break; + } + } + if (lastAssistantIdx < 0) return messages; + const enriched = messages.slice(); + const target = enriched[lastAssistantIdx]; + enriched[lastAssistantIdx] = { + ...target, + content: (target.content ?? "") + summary, + }; + return enriched; +} + +export function buildMessages( + messages: ChatMessage[], + docAvailability: { + doc_id: string; + filename: string; + folder_path?: string; + }[], + systemPromptExtra?: string, + docIndex?: DocIndex, + includeResearchTools = true, +) { + const formatted: unknown[] = []; + let systemContent = buildSystemPrompt(includeResearchTools); + + if (systemPromptExtra) { + systemContent += `\n\n${systemPromptExtra.trim()}`; + } + + if (docAvailability.length) { + systemContent += "\n\n---\nAVAILABLE DOCUMENTS:\n"; + for (const doc of docAvailability) { + const label = doc.folder_path + ? `${doc.folder_path} / ${doc.filename}` + : doc.filename; + systemContent += `- ${doc.doc_id}: ${label}\n`; + } + systemContent += + "\nYou do NOT retain document content between conversation turns. You MUST call read_document (or fetch_documents) once at the start of every response that involves a document's content, even if you have read it in a previous turn. Within the same response, do not call read_document or fetch_documents again for a document/version that has already been read; use the prior tool result, find_in_document for targeted checks, or proceed to the next required tool. Failure to read once per turn will result in hallucinated or stale content.\n---\n"; + } + formatted.push({ role: "system", content: systemContent }); + + // Map document_id (UUID) → current-turn doc_id slug, so when we + // inline a user attachment we hand the model the same handle it + // would use to call read_document / fetch_documents. + const slugByDocumentId = new Map(); + if (docIndex) { + for (const [slug, info] of Object.entries(docIndex)) { + if (info.document_id) slugByDocumentId.set(info.document_id, slug); + } + } + + for (const msg of messages) { + let content = msg.content ?? ""; + if (msg.role === "user" && msg.workflow) { + content = `[Workflow: ${msg.workflow.title} (id: ${msg.workflow.id})]\n\n${content}`; + } + if (msg.role === "user" && msg.files?.length) { + const lines = msg.files.map((f) => { + const slug = f.document_id + ? slugByDocumentId.get(f.document_id) + : undefined; + return slug ? `- ${slug}: ${f.filename}` : `- ${f.filename}`; + }); + content = `[The user attached the following document(s) to this message:\n${lines.join("\n")}]\n\n${content}`; + } + formatted.push({ role: msg.role, content }); + } + return formatted; +} + +export function extractCitations( + fullText: string, + docIndex: DocIndex, + _events?: ({ type: string } & Record[]) | unknown[], +): unknown[] { + return parseCitations(fullText).map((c) => + createCitation(c, docIndex), + ); +} + +export function stripTransientAssistantEvents(events: AssistantEvent[]) { + return events.filter((event) => event.type !== "case_opinions"); +} + +function cleanAskInputResponseId(value: unknown) { + const id = typeof value === "string" ? value.trim() : ""; + return id.slice(0, 80); +} + +export function parseAskInputsResponsePayload( + value: unknown, +): AskInputsResponseRequest | null { + if (!value || typeof value !== "object" || Array.isArray(value)) return null; + const row = value as Record; + const rawResponses = Array.isArray(row.responses) ? row.responses : []; + const responses = rawResponses + .map((item): AskInputResponseItem | null => { + if (!item || typeof item !== "object" || Array.isArray(item)) return null; + const current = item as Record; + const id = cleanAskInputResponseId(current.id); + const kind = current.kind; + const skipped = current.skipped === true; + if (!id || (kind !== "choice" && kind !== "documents")) return null; + if (kind === "choice") { + const question = + typeof current.question === "string" + ? current.question.trim().slice(0, 500) + : ""; + const answer = + typeof current.answer === "string" + ? current.answer.trim().slice(0, 1000) + : ""; + if (!question || (!answer && !skipped)) return null; + return { + id, + kind, + question, + ...(answer ? { answer } : {}), + ...(skipped ? { skipped: true } : {}), + }; + } + const rawFilenames = Array.isArray(current.filenames) + ? current.filenames + : []; + const filenames = rawFilenames + .filter((f): f is string => typeof f === "string") + .map((f) => f.trim()) + .filter(Boolean) + .slice(0, 50); + return { + id, + kind, + filenames, + ...(skipped ? { skipped: true } : {}), + }; + }) + .filter((item): item is AskInputResponseItem => !!item) + .slice(0, 20); + return responses.length > 0 ? { responses } : null; +} + +export async function appendAskInputsResponseToLastAssistantMessage( + db: ReturnType, + chatId: string, + response: AskInputsResponseRequest, +) { + await appendAssistantEventsToLastAssistantMessage(db, chatId, [ + { + type: "ask_inputs_response" as const, + responses: response.responses, + }, + ]); +} + +export async function appendAssistantEventsToLastAssistantMessage( + db: ReturnType, + chatId: string, + events: AssistantEvent[], + citations?: unknown[], +) { + if (events.length === 0 && (!citations || citations.length === 0)) { + return; + } + const { data: rows, error: selectError } = await db + .from("chat_messages") + .select("id, content, citations") + .eq("chat_id", chatId) + .eq("role", "assistant") + .order("created_at", { ascending: false }) + .limit(1); + if (selectError || !rows?.[0]) { + if (selectError) { + console.error( + "[assistant-events] failed to load assistant message", + selectError, + ); + } + return; + } + + const row = rows[0] as { + id: string; + content: unknown; + citations?: unknown; + }; + const existing = Array.isArray(row.content) + ? row.content + : []; + const next = [...existing, ...events]; + const existingCitations = Array.isArray(row.citations) + ? row.citations + : []; + const nextCitations = + citations && citations.length > 0 + ? [...existingCitations, ...citations] + : existingCitations; + const { error: updateError } = await db + .from("chat_messages") + .update({ + content: next.length ? next : null, + citations: nextCitations.length ? nextCitations : null, + }) + .eq("id", row.id); + if (updateError) { + console.error( + "[assistant-events] failed to update assistant message", + updateError, + ); + } +} + +export function appendCancelledAssistantEvent(events: AssistantEvent[]) { + return [...events, { type: "content" as const, text: "Cancelled by user." }]; +} + +export function buildCancelledAssistantMessage(args: { + fullText: string; + events: AssistantEvent[]; + buildCitations: (fullText: string, events: AssistantEvent[]) => unknown[]; +}) { + const events = appendCancelledAssistantEvent( + stripTransientAssistantEvents(args.events), + ); + return { + events, + citations: args.buildCitations(args.fullText, events), + }; +} + +// --------------------------------------------------------------------------- +// Document context builder (from message file attachments) +// --------------------------------------------------------------------------- + +export async function buildDocContext( + messages: ChatMessage[], + userId: string, + db: ReturnType, + chatId?: string | null, +): Promise<{ docIndex: DocIndex; docStore: DocStore }> { + const docIndex: DocIndex = {}; + const docStore: DocStore = new Map(); + + const documentIds = new Set(); + for (const m of messages) { + for (const f of m.files ?? []) { + if (f.document_id) documentIds.add(f.document_id); + } + } + + // Also pull in document_ids from prior assistant events in this chat — + // generated docs (generate_docx) and tracked-change edits (edit_document) + // aren't attached to user messages as files, so they only live in the + // assistant's `doc_created` / `doc_edited` events. Without this sweep + // the model loses access to generated docs after the turn that created + // them, and can't call edit_document / read_document on them. + if (chatId) { + const { data: rows } = await db + .from("chat_messages") + .select("content") + .eq("chat_id", chatId) + .eq("role", "assistant"); + for (const row of rows ?? []) { + const content = (row as { content?: unknown }).content; + if (!Array.isArray(content)) continue; + for (const ev of content as Record[]) { + if ( + (ev?.type === "doc_created" || ev?.type === "doc_edited") && + typeof ev.document_id === "string" + ) { + documentIds.add(ev.document_id); + } + } + } + } + + const ids = [...documentIds]; + if (ids.length > 0) { + const { data: docs } = await db + .from("documents") + .select("id, current_version_id, status") + .in("id", ids) + .eq("user_id", userId) + .eq("status", "ready"); + + const docList = (docs ?? []) as unknown as { + id: string; + filename?: string | null; + file_type?: string | null; + current_version_id?: string | null; + active_version_number?: number | null; + storage_path?: string | null; + }[]; + await attachActiveVersionPaths(db, docList); + for (let i = 0; i < docList.length; i++) { + const doc = docList[i]; + if (!doc.storage_path) continue; + const docLabel = `doc-${i}`; + const filename = doc.filename?.trim() || "Untitled document"; + docIndex[docLabel] = { + document_id: doc.id, + filename, + version_id: doc.current_version_id ?? null, + version_number: doc.active_version_number ?? null, + }; + docStore.set(docLabel, { + storage_path: doc.storage_path, + file_type: doc.file_type ?? "", + filename, + }); + } + } + + devLog( + "[buildDocContext] available docs:", + Object.entries(docIndex).map(([label, info]) => ({ + label, + filename: info.filename, + document_id: info.document_id, + })), + ); + return { docIndex, docStore }; +} + +export async function buildProjectDocContext( + projectId: string, + _userId: string, + db: ReturnType, +): Promise<{ + docIndex: DocIndex; + docStore: DocStore; + folderPaths: Map; +}> { + const docIndex: DocIndex = {}; + const docStore: DocStore = new Map(); + + const [{ data: docs }, { data: folders }] = await Promise.all([ + db + .from("documents") + .select("id, current_version_id, status, folder_id") + .eq("project_id", projectId) + .eq("status", "ready") + .order("created_at", { ascending: true }), + db + .from("project_subfolders") + .select("id, name, parent_folder_id") + .eq("project_id", projectId), + ]); + const docList = (docs ?? []) as unknown as { + id: string; + filename?: string | null; + file_type?: string | null; + current_version_id?: string | null; + active_version_number?: number | null; + folder_id?: string | null; + storage_path?: string | null; + }[]; + await attachActiveVersionPaths(db, docList); + + // Build folder id → full path map + const folderMap = new Map< + string, + { name: string; parent_folder_id: string | null } + >(); + for (const f of folders ?? []) + folderMap.set(f.id, { + name: f.name, + parent_folder_id: f.parent_folder_id, + }); + + function resolvePath(folderId: string | null): string { + if (!folderId) return ""; + const parts: string[] = []; + let cur: string | null = folderId; + while (cur) { + const f = folderMap.get(cur); + if (!f) break; + parts.unshift(f.name); + cur = f.parent_folder_id; + } + return parts.join(" / "); + } + + const folderPaths = new Map(); // doc label → folder path + + for (let i = 0; i < docList.length; i++) { + const doc = docList[i]; + if (!doc.storage_path) continue; + const docLabel = `doc-${i}`; + const filename = doc.filename?.trim() || "Untitled document"; + docIndex[docLabel] = { + document_id: doc.id, + filename, + version_id: doc.current_version_id ?? null, + version_number: doc.active_version_number ?? null, + }; + docStore.set(docLabel, { + storage_path: doc.storage_path, + file_type: doc.file_type ?? "", + filename, + }); + const path = resolvePath(doc.folder_id ?? null); + if (path) folderPaths.set(docLabel, path); + } + + devLog( + "[buildProjectDocContext] available docs:", + Object.entries(docIndex).map(([label, info]) => ({ + label, + filename: info.filename, + document_id: info.document_id, + folder: folderPaths.get(label) ?? null, + })), + ); + return { docIndex, docStore, folderPaths }; +} + +export async function buildWorkflowStore( + userId: string, + userEmail: string | null | undefined, + db: ReturnType, +): Promise { + const { SYSTEM_ASSISTANT_WORKFLOWS } = await import("../systemWorkflows"); + const store: WorkflowStore = new Map(); + const normalizedUserEmail = (userEmail ?? "").trim().toLowerCase(); + + // Seed system workflows first. + for (const wf of SYSTEM_ASSISTANT_WORKFLOWS) { + store.set(wf.id, { title: wf.title, prompt_md: wf.prompt_md }); + } + + // Then overlay user-owned assistant workflows. + const { data: workflows } = await db + .from("workflows") + .select("id, title, prompt_md") + .eq("user_id", userId) + .eq("type", "assistant"); + for (const wf of workflows ?? []) { + if (wf.prompt_md) { + store.set(wf.id, { title: wf.title, prompt_md: wf.prompt_md }); + } + } + + // Shared assistant workflows must also be readable by workflow tools. + if (normalizedUserEmail) { + const { data: shares } = await db + .from("workflow_shares") + .select("workflow_id") + .eq("shared_with_email", normalizedUserEmail); + const sharedIds = [ + ...new Set((shares ?? []).map((share) => share.workflow_id)), + ]; + if (sharedIds.length > 0) { + const { data: sharedWorkflows } = await db + .from("workflows") + .select("id, title, prompt_md") + .in("id", sharedIds) + .eq("type", "assistant"); + for (const wf of sharedWorkflows ?? []) { + if (wf.prompt_md) { + store.set(wf.id, { + title: wf.title, + prompt_md: wf.prompt_md, + }); + } + } + } + } + return store; +} diff --git a/backend/src/lib/chat/index.ts b/backend/src/lib/chat/index.ts new file mode 100644 index 0000000..081c627 --- /dev/null +++ b/backend/src/lib/chat/index.ts @@ -0,0 +1,8 @@ +export * from "./types"; +export * from "./prompts"; +export * from "./tools/toolSchemas"; +export * from "./citations"; +export * from "./tools/documentOps"; +export * from "./tools/toolDispatcher"; +export * from "./streaming"; +export * from "./contextBuilders"; diff --git a/backend/src/lib/chat/prompts.ts b/backend/src/lib/chat/prompts.ts new file mode 100644 index 0000000..ddbec34 --- /dev/null +++ b/backend/src/lib/chat/prompts.ts @@ -0,0 +1,82 @@ +import { COURTLISTENER_SYSTEM_PROMPT } from "./tools/courtlistenerTools"; + +const SYSTEM_PROMPT_BEFORE_RESEARCH = `You are Mike, an AI legal assistant for lawyers and legal professionals. Help analyze documents, answer legal questions, and draft legal documents. + +CORE RULES: +- Be precise, professional, and evidence-aware. +- Do not fabricate document content. +- Use at most 10 tool-use rounds per response. Batch independent tool calls and leave room for the final answer. +- Read each relevant document/version at most once per response. After read_document or fetch_documents returns a document's full text, do not call either tool again for that same document/version in the same response; use the prior result, call find_in_document for targeted checks, or proceed to the next required tool. +- If the user selects a workflow with [Workflow: (id: <id>)], immediately call read_workflow with that id and follow the workflow before doing anything else. +- If you need the user to choose between options, clarify a missing premise, or attach one or more documents before you can continue, call ask_inputs with all needed choice and document-upload items in a single tool call. For document-upload items, include a document_types array with short labels for the specific categories of documents you need. After asking, do not continue the substantive task until the user responds in a later message. + +DOCUMENT CITATIONS: +Use document citations only for verbatim evidence from uploaded or generated documents. + +In prose, put sequential markers [1], [2], etc. exactly where the cited claim appears. Assign citation refs in first-appearance order and increment by exactly 1 each time: [1], [2], [3], never [1], [2], [3], [4], [5], [8], [9]. The marker number is the citation "ref" value, not a page, footnote, section, clause, or document number. + +At the very end of the response, append: +<CITATIONS> +[ + {"ref": 1, "doc_id": "doc-0", "quotes": [{"page": 3, "quote": "exact verbatim text"}]}, + {"ref": 2, "doc_id": "doc-1", "quotes": [{"page": "41-42", "quote": "text before page break [[PAGE_BREAK]] text after page break"}]} +] +</CITATIONS> + +Citation rules: +- Every [N] marker must have exactly one matching entry with "ref": N. +- Citation refs must be contiguous with no skipped numbers. If the response uses N citations, the refs must be exactly 1 through N, and the <CITATIONS> array should list them in that order. +- Bracketed numbers like [1] are only citation annotation markers. Do not add brackets to section, clause, schedule, exhibit, paragraph, or list numbering. +- "doc_id" must be the exact chat-local label you were given, such as "doc-0". Never use a filename or document UUID in "doc_id". +- Use one citation entry per marker. If one marker needs several passages, use "quotes" with 1 quote by default and at most 3. +- Keep quotes short, ideally 25 words or fewer, and tightly matched to the claim. +- "page" means the sequential [Page N] marker in the provided text, not printed page numbers inside the document. Non-spreadsheet unpaginated files may have no [Page N] markers; omit "page" (or use 1) when none is present. +- For spreadsheet sources (content shown as "## Sheet: <name>" markdown tables with a "Row" column and column-letter headers), cite by cell instead of page: set "sheet" to the sheet name and "cell" to the A1 address or range you are quoting (e.g. "B7" or "B7:C9", combining the column-letter header with the "Row" number). Put the plain cell value in "quote" with no "Row"/column-letter labels or "|" separators. Omit "page" for spreadsheet citations. +- For a continuous quote crossing two pages, set "page" to "N-M" and include [[PAGE_BREAK]] at the page break. Otherwise, use separate quote objects. +- For legacy compatibility, you may also include top-level "page" and "quote" matching the first quote. +- Omit the <CITATIONS> block when there are no citations. + +DOCX GENERATION: +- If the user asks you to create or draft a document, call generate_docx and provide the downloadable Word document rather than only displaying text inline. +- If the user asks for a spreadsheet, table workbook, tracker, checklist matrix, or Excel file, call generate_excel. +- If the user asks for slides, a presentation, pitch deck, board deck, or PowerPoint file, call generate_ppt. +- If the user asks to revise a document you just generated, call edit_document on that document unless they explicitly want a brand-new document or the change is too broad for coherent editing. +- Use heading levels in order; do not skip from Heading 1 to Heading 3. +- Numbering starts at 1, never 0. The generator applies legal numbering automatically. Do not type numbering prefixes into headings. +- Do not repeat the document title as the first section heading. +- Contract preambles, party blocks, recitals, and WHEREAS clauses are unnumbered. Begin numbering at the first operative clause or section. +- Contracts and agreements must end with an unnumbered signature block on a fresh page. Set pageBreak: true on the final section and include signature lines such as By, Name, Title, and Date for each party. + +DOCUMENT EDITING: +- For document edits, call read_document or fetch_documents once for each relevant document/version unless the exact needed text is already available in this response. Do not reread the same document/version before calling edit_document. +When edit_document adds, deletes, moves, or reorders any numbered clause, section, schedule, exhibit, or list item: +- Renumber all affected downstream items in the same edit. +- Update all affected cross-references, including references in recitals, definitions, schedules, and exhibits. +- Before editing, scan the full document with read_document or find_in_document for affected references. +- If a reference might point to a shifted number, include the update and explain the reason. +- When deleting square brackets, delete both "[" and "]".`; + +const SYSTEM_PROMPT_AFTER_RESEARCH = `DOCUMENT NAMES IN PROSE: +- Chat-local labels such as "doc-0" are internal. Use them only in tool arguments and citation JSON. +- Never show "doc-N" labels to the user in prose, headings, lists, or tool activity text. +- Refer to documents by filename or a natural description, such as "the NDA draft". + +GENERAL GUIDANCE: +- Cite the exact document or fetched opinion passage for evidence-backed claims. +- If no documents are provided, answer from legal knowledge. +- Do not use emojis. +`; + +/** + * Assemble the chat system prompt. When `includeResearchTools` is true the + * CourtListener (US case-law) research instructions are spliced in; when + * false they are omitted entirely so the model is not told about tools it + * does not have. + */ +export function buildSystemPrompt(includeResearchTools = true): string { + return includeResearchTools + ? `${SYSTEM_PROMPT_BEFORE_RESEARCH}\n\n${COURTLISTENER_SYSTEM_PROMPT}\n${SYSTEM_PROMPT_AFTER_RESEARCH}` + : `${SYSTEM_PROMPT_BEFORE_RESEARCH}\n\n${SYSTEM_PROMPT_AFTER_RESEARCH}`; +} + +export const SYSTEM_PROMPT = buildSystemPrompt(true); diff --git a/backend/src/lib/chat/streaming.ts b/backend/src/lib/chat/streaming.ts new file mode 100644 index 0000000..f6ddacb --- /dev/null +++ b/backend/src/lib/chat/streaming.ts @@ -0,0 +1,553 @@ +import { + streamChatWithTools, + resolveModel, + DEFAULT_MAIN_MODEL, + type LlmMessage, + type OpenAIToolSchema, +} from "../llm"; +import { safeErrorMessage } from "../safeError"; +import { createServerSupabase } from "../supabase"; +import { + buildUserMcpTools, + type McpToolEvent, +} from "../mcpConnectors"; +import { + COURTLISTENER_TOOLS, + type CaseCitationEvent, + type CourtlistenerToolEvent, +} from "./tools/courtlistenerTools"; +import { + type DocStore, + type DocIndex, + type TabularCellStore, + type WorkflowStore, + type ToolCall, + type AskInputsEvent, + type EditAnnotation, + devLog, +} from "./types"; +import { TOOLS, WORKFLOW_TOOLS } from "./tools/toolSchemas"; +import { + parseCitationsWithDiagnostics, + parsePartialCitationObjects, + createCitation, + CITATIONS_OPEN_TAG, +} from "./citations"; +import { + runToolCalls, + type CourtlistenerTurnState, +} from "./tools/toolDispatcher"; +import { + type TurnEditState, + type TurnReadState, +} from "./tools/documentOps"; + + +export type AssistantEvent = + | { type: "reasoning"; text: string } + | AskInputsEvent + | { + type: "ask_inputs_response"; + responses: { + id: string; + kind: "choice" | "documents"; + question?: string; + answer?: string; + filenames?: string[]; + skipped?: boolean; + }[]; + } + | { type: "doc_read"; filename: string; document_id?: string } + | { + type: "doc_find"; + filename: string; + query: string; + total_matches: number; + } + | { + type: "doc_created"; + filename: string; + download_url: string; + document_id?: string; + version_id?: string; + version_number?: number | null; + } + | { type: "doc_download"; filename: string; download_url: string } + | { + type: "doc_replicated"; + /** Source document being copied. */ + filename: string; + count: number; + copies: { + new_filename: string; + document_id: string; + version_id: string; + }[]; + } + | { type: "workflow_applied"; workflow_id: string; title: string } + | { + type: "doc_edited"; + filename: string; + document_id: string; + version_id: string; + /** Per-document monotonic Vn; null if backend couldn't determine it. */ + version_number: number | null; + download_url: string; + annotations: EditAnnotation[]; + } + | CaseCitationEvent + | CourtlistenerToolEvent + | McpToolEvent + | { type: "case_opinions"; cluster_id: number; case: unknown } + | { type: "content"; text: string } + | { type: "error"; message: string }; + +export class AssistantStreamError extends Error { + fullText: string; + events: AssistantEvent[]; + + constructor(message: string, fullText: string, events: AssistantEvent[]) { + super(message); + this.name = "AssistantStreamError"; + this.fullText = fullText; + this.events = events; + } +} + +export class AssistantStreamAbortError extends AssistantStreamError { + constructor(fullText: string, events: AssistantEvent[]) { + super("Stream aborted.", fullText, events); + this.name = "AbortError"; + } +} + +class AssistantStreamAskInputsPause extends Error { + constructor() { + super("Waiting for user input."); + this.name = "AssistantStreamAskInputsPause"; + } +} + +export function isAbortError(error: unknown): boolean { + if (!error || typeof error !== "object") return false; + const record = error as { name?: unknown; message?: unknown }; + return ( + record.name === "AbortError" || record.message === "Stream aborted." + ); +} + +function throwIfAborted(signal?: AbortSignal) { + if (!signal?.aborted) return; + const err = new Error("Stream aborted."); + err.name = "AbortError"; + throw err; +} + +export async function runLLMStream(params: { + apiMessages: unknown[]; + docStore: DocStore; + docIndex: DocIndex; + userId: string; + db: ReturnType<typeof createServerSupabase>; + write: (s: string) => void; + extraTools?: unknown[]; + includeResearchTools?: boolean; + workflowStore?: WorkflowStore; + tabularStore?: TabularCellStore; + buildCitations?: (fullText: string) => unknown[]; + model?: string; + apiKeys?: import("../llm").UserApiKeys; + signal?: AbortSignal; + /** + * If set, generate_docx will attach created docs to this project so + * they appear in the project sidebar. Leave null for general chats — + * generated docs still get persisted, but as standalone documents. + */ + projectId?: string | null; +}): Promise<{ + fullText: string; + events: AssistantEvent[]; + citations: unknown[]; +}> { + const { + apiMessages, + docStore, + docIndex, + userId, + db, + write, + extraTools, + includeResearchTools = true, + workflowStore, + tabularStore, + buildCitations, + model, + apiKeys, + signal, + projectId, + } = params; + const researchTools = includeResearchTools ? COURTLISTENER_TOOLS : []; + const mcpTools = await buildUserMcpTools(userId, db); + const baseTools = [...TOOLS, ...researchTools, ...WORKFLOW_TOOLS]; + const activeTools = extraTools?.length + ? [...baseTools, ...mcpTools, ...extraTools] + : [...baseTools, ...mcpTools]; + + // Extract system prompt; pass remaining turns to the adapter as + // plain user/assistant messages. + const rawMsgs = apiMessages as { role: string; content: string | null }[]; + const systemPrompt = + rawMsgs[0]?.role === "system" ? (rawMsgs[0].content ?? "") : ""; + const chatMessages: LlmMessage[] = rawMsgs + .filter((m) => m.role !== "system") + .map((m) => ({ + role: m.role === "assistant" ? "assistant" : "user", + content: m.content ?? "", + })); + + const events: AssistantEvent[] = []; + // One assistant turn produces at most one document_versions row per + // edited doc. `runToolCalls` fires once per tool-call batch; the model + // may emit multiple batches in a single turn, so this map persists + // across batches to let subsequent edit_document calls overwrite the + // turn's existing version instead of creating a new one. + const turnEditState: TurnEditState = new Map(); + // Suppress repeated full-document reads for the same document/version in + // one assistant response. The guard is invalidated when edit_document + // changes that document so a post-edit verification read can still happen. + const turnReadState: TurnReadState = new Map(); + const courtlistenerTurnState: CourtlistenerTurnState = { + casesByClusterId: new Map(), + }; + let fullText = ""; + let iterText = ""; + let iterVisibleText = ""; + let iterReasoning = ""; + let visibleTailBuffer = ""; + let citationsOpenSeen = false; + let streamingCitationsBuffer = ""; + let streamedCitationCount = 0; + + const emitCitationStreamSnapshot = ( + status: "started" | "partial", + citations: unknown[], + ) => { + if (buildCitations) return; + write(`data: ${JSON.stringify({ type: "citations", status, citations })}\n\n`); + }; + + const streamHiddenCitationContent = (delta: string) => { + if (buildCitations || !delta) return; + streamingCitationsBuffer += delta; + const partial = parsePartialCitationObjects(streamingCitationsBuffer); + if (partial.length <= streamedCitationCount) return; + streamedCitationCount = partial.length; + const citations = partial.map((c) => + createCitation( + c, + docIndex, + courtlistenerTurnState.casesByClusterId, + ), + ); + emitCitationStreamSnapshot("partial", citations); + }; + + const streamVisibleContent = (delta: string) => { + if (!delta) return; + if (citationsOpenSeen) { + streamHiddenCitationContent(delta); + return; + } + + const combined = visibleTailBuffer + delta; + const markerIdx = combined.indexOf(CITATIONS_OPEN_TAG); + if (markerIdx >= 0) { + const visible = combined.slice(0, markerIdx); + if (visible) { + iterVisibleText += visible; + write( + `data: ${JSON.stringify({ type: "content_delta", text: visible })}\n\n`, + ); + } + visibleTailBuffer = ""; + citationsOpenSeen = true; + streamingCitationsBuffer = ""; + streamedCitationCount = 0; + emitCitationStreamSnapshot("started", []); + streamHiddenCitationContent( + combined.slice(markerIdx + CITATIONS_OPEN_TAG.length), + ); + return; + } + + const keep = Math.min(CITATIONS_OPEN_TAG.length - 1, combined.length); + const visible = combined.slice(0, combined.length - keep); + visibleTailBuffer = combined.slice(combined.length - keep); + if (visible) { + iterVisibleText += visible; + write( + `data: ${JSON.stringify({ type: "content_delta", text: visible })}\n\n`, + ); + } + }; + + const flushVisibleTail = (opts: { emit?: boolean } = {}) => { + const emit = opts.emit ?? true; + if (citationsOpenSeen || !visibleTailBuffer) { + visibleTailBuffer = ""; + return; + } + iterVisibleText += visibleTailBuffer; + if (emit) { + write( + `data: ${JSON.stringify({ type: "content_delta", text: visibleTailBuffer })}\n\n`, + ); + } + visibleTailBuffer = ""; + }; + + const flushText = (opts: { emit?: boolean } = {}) => { + if (!iterText) return; + fullText += iterText; + flushVisibleTail(opts); + if (iterVisibleText) { + events.push({ type: "content", text: iterVisibleText }); + } + iterText = ""; + iterVisibleText = ""; + visibleTailBuffer = ""; + citationsOpenSeen = false; + streamingCitationsBuffer = ""; + streamedCitationCount = 0; + }; + + const flushPartialTurn = (opts: { emit?: boolean } = {}) => { + flushText(opts); + if (iterReasoning) { + events.push({ type: "reasoning", text: iterReasoning }); + iterReasoning = ""; + } + }; + + const selectedModel = resolveModel(model, DEFAULT_MAIN_MODEL); + + try { + throwIfAborted(signal); + await streamChatWithTools({ + model: selectedModel, + systemPrompt, + messages: chatMessages, + tools: activeTools as OpenAIToolSchema[], + maxIterations: 10, + apiKeys, + enableThinking: true, + abortSignal: signal, + callbacks: { + onContentDelta: (delta) => { + iterText += delta; + streamVisibleContent(delta); + }, + onReasoningDelta: (delta) => { + iterReasoning += delta; + write( + `data: ${JSON.stringify({ type: "reasoning_delta", text: delta })}\n\n`, + ); + }, + onReasoningBlockEnd: () => { + if (!iterReasoning) return; + events.push({ type: "reasoning", text: iterReasoning }); + write(`data: ${JSON.stringify({ type: "reasoning_block_end" })}\n\n`); + iterReasoning = ""; + }, + // Fires after Claude's turn ends with stop_reason=tool_use, before + // the tool actually runs. Flushes any buffered assistant text so + // it's emitted in chronological order, then signals the client so + // it can open a fresh PreResponseWrapper (shows "Working…") while + // the tool executes — avoids the dead gap between message_stop + // and the first tool-specific event. + onToolCallStart: (call) => { + flushText(); + write( + `data: ${JSON.stringify({ + type: "tool_call_start", + name: call.name, + })}\n\n`, + ); + }, + }, + runTools: async (calls) => { + throwIfAborted(signal); + // Emit any text the model produced before this tool turn so the + // UI sees it before the tool results stream in. + flushText(); + + const toolCalls: ToolCall[] = calls.map((c) => ({ + id: c.id, + function: { + name: c.name, + arguments: JSON.stringify(c.input), + }, + })); + const { + toolResults, + docsRead, + docsFound, + docsCreated, + docsReplicated, + workflowsApplied, + docsEdited, + askInputsEvents, + courtlistenerEvents, + caseCitationEvents, + mcpEvents, + } = await runToolCalls( + toolCalls, + docStore, + userId, + db, + write, + workflowStore, + tabularStore, + docIndex, + turnEditState, + turnReadState, + projectId, + courtlistenerTurnState, + apiKeys, + ); + throwIfAborted(signal); + for (const r of docsRead) { + events.push({ + type: "doc_read", + filename: r.filename, + document_id: r.document_id, + }); + } + for (const f of docsFound) { + events.push({ + type: "doc_find", + filename: f.filename, + query: f.query, + total_matches: f.total_matches, + }); + } + for (const dl of docsCreated) { + events.push({ + type: "doc_created", + filename: dl.filename, + download_url: dl.download_url, + document_id: dl.document_id, + version_id: dl.version_id, + version_number: dl.version_number ?? null, + }); + } + for (const r of docsReplicated) { + events.push({ + type: "doc_replicated", + filename: r.filename, + count: r.count, + copies: r.copies, + }); + } + for (const wf of workflowsApplied) { + events.push({ + type: "workflow_applied", + workflow_id: wf.workflow_id, + title: wf.title, + }); + } + for (const e of docsEdited) { + events.push({ + type: "doc_edited", + filename: e.filename, + document_id: e.document_id, + version_id: e.version_id, + version_number: e.version_number, + download_url: e.download_url, + annotations: e.annotations, + }); + } + for (const askInputsEvent of askInputsEvents) { + write(`data: ${JSON.stringify(askInputsEvent)}\n\n`); + events.push(askInputsEvent); + } + for (const event of courtlistenerEvents) { + events.push(event); + } + for (const event of mcpEvents) { + events.push(event); + } + for (const event of caseCitationEvents) { + events.push(event); + } + + if (askInputsEvents.length > 0) { + throw new AssistantStreamAskInputsPause(); + } + + // Index alignment would break if any tool branch skips its + // push (unhandled tool name, disabled store, guard failure). + // Each tool_result already carries its tool_call_id, so key off + // that directly — and fall back to an error result for any + // tool_use that didn't produce one, so Claude's next request + // has a tool_result for every tool_use it sent. + const resultByCallId = new Map<string, string>(); + for (const r of toolResults) { + const row = r as { tool_call_id: string; content?: unknown }; + resultByCallId.set(row.tool_call_id, String(row.content ?? "")); + } + return toolCalls.map((c) => ({ + tool_use_id: c.id, + content: + resultByCallId.get(c.id) ?? + JSON.stringify({ + error: `Tool '${c.function.name}' is not available.`, + }), + })); + }, + }); + } catch (err) { + if (err instanceof AssistantStreamAskInputsPause) { + // The ask_inputs event has already been emitted and persisted in `events`. + // Stop this assistant turn here so the model does not add redundant + // prose telling the user to answer the picker or attach documents. + } else if (isAbortError(err)) { + flushPartialTurn({ emit: false }); + throw new AssistantStreamAbortError(fullText, events); + } else { + flushPartialTurn(); + const message = safeErrorMessage(err, "Stream error"); + events.push({ type: "error", message }); + throw new AssistantStreamError(message, fullText, events); + } + } + + flushText(); + + // Parse and emit citations from <CITATIONS> block + const { citations: parsedCitations, diagnostics: citationDiagnostics } = + parseCitationsWithDiagnostics(fullText); + const citations = buildCitations + ? buildCitations(fullText) + : parsedCitations.map((c) => + createCitation( + c, + docIndex, + courtlistenerTurnState.casesByClusterId, + ), + ); + devLog("[chat/stream] final citations", { + hasCitationsBlock: citationDiagnostics.hasBlock, + citationsBlockLength: citationDiagnostics.rawLength, + parseError: citationDiagnostics.error, + parsedCitationCount: parsedCitations.length, + emittedCitationCount: citations.length, + usedCustomCitationBuilder: !!buildCitations, + }); + write( + `data: ${JSON.stringify({ type: "citations", status: "final", citations })}\n\n`, + ); + write("data: [DONE]\n\n"); + + return { fullText, events, citations }; +} diff --git a/backend/src/lib/legalSourcesTools/courtlistenerTools.ts b/backend/src/lib/chat/tools/courtlistenerTools.ts similarity index 100% rename from backend/src/lib/legalSourcesTools/courtlistenerTools.ts rename to backend/src/lib/chat/tools/courtlistenerTools.ts diff --git a/backend/src/lib/chat/tools/documentOps.ts b/backend/src/lib/chat/tools/documentOps.ts new file mode 100644 index 0000000..1ca2a55 --- /dev/null +++ b/backend/src/lib/chat/tools/documentOps.ts @@ -0,0 +1,1813 @@ +import { + downloadFile, + generatedDocKey, + uploadFile, +} from "../../storage"; +import { convertedPdfKey, docxToPdf } from "../../convert"; +import { createServerSupabase } from "../../supabase"; +import { + applyTrackedEdits, + extractDocxBodyText, + type EditInput, +} from "../../docxTrackedChanges"; +import { buildDownloadUrl } from "../../downloadTokens"; +import { loadActiveVersion } from "../../documentVersions"; +import { + type DocStore, + type DocIndex, + type EditAnnotation, + STANDARD_FONT_DATA_URL, + devLog, +} from "../types"; +import { + contentTypeForDocumentType, + isPresentationDocumentType, + isSpreadsheetDocumentType, + isWordDocumentType, + shouldConvertToPdf, +} from "../../documentTypes"; +import { extractPresentationText } from "../../officeText"; +import { spreadsheetToLLMText } from "../../spreadsheet"; + + +export function citationReminder(docLabel: string, filename: string): string { + const isSpreadsheet = isSpreadsheetDocumentType( + filename.split(".").pop() ?? "", + ); + const shapeLine = isSpreadsheet + ? `Use this citation object shape for this spreadsheet: {"ref": 1, "doc_id": "${docLabel}", "quotes": [{"sheet": "Sheet name", "cell": "B7", "quote": "plain cell value"}]}. Cite by "sheet" + "cell" (A1 address or range), not by page.` + : `Use this citation object shape: {"ref": 1, "doc_id": "${docLabel}", "quotes": [{"page": 1, "quote": "exact verbatim text from the document"}]}. Include top-level "page" and "quote" too only if they match the first quote.`; + return [ + `[Citation requirement for ${docLabel} ("${filename}")]:`, + `If your final answer makes any factual claim from this document, include inline [N] markers and append a final <CITATIONS> JSON block.`, + `Every citation entry for this document MUST use "doc_id": "${docLabel}".`, + shapeLine, + `Do not use "marker" or "text" keys in the citation block; use "ref" and "quotes".`, + ].join("\n"); +} + +export async function extractPdfText(buf: ArrayBuffer): Promise<string> { + try { + const pdfjsLib = await import("pdfjs-dist/legacy/build/pdf.mjs" as string); + const pdf = await ( + pdfjsLib as unknown as { + getDocument: (opts: unknown) => { + promise: Promise<{ + numPages: number; + getPage: (n: number) => Promise<{ + getTextContent: () => Promise<{ + items: { str?: string }[]; + }>; + }>; + }>; + }; + } + ).getDocument({ + data: new Uint8Array(buf), + standardFontDataUrl: STANDARD_FONT_DATA_URL, + }).promise; + const parts: string[] = []; + for (let i = 1; i <= pdf.numPages; i++) { + const page = await pdf.getPage(i); + const textContent = await page.getTextContent(); + parts.push( + `[Page ${i}]\n${textContent.items.map((it) => it.str ?? "").join(" ")}`, + ); + } + return parts.join("\n\n"); + } catch { + return ""; + } +} + +export async function generateDocx( + title: string, + sections: unknown[], + userId: string, + db: ReturnType<typeof createServerSupabase>, + options?: { landscape?: boolean; projectId?: string | null }, +) { + try { + const { + Document, + Paragraph, + HeadingLevel, + Packer, + Table, + TableRow, + TableCell, + WidthType, + BorderStyle, + TextRun, + AlignmentType, + LevelFormat, + LevelSuffix, + PageOrientation, + PageBreak, + } = await import("docx"); + + const FONT = "Times New Roman"; + const SIZE = 22; // 11pt in half-points + + type DocChild = InstanceType<typeof Paragraph> | InstanceType<typeof Table>; + const children: DocChild[] = []; + children.push( + new Paragraph({ + heading: HeadingLevel.TITLE, + spacing: { after: 200 }, + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: title.toUpperCase(), + color: "000000", + font: FONT, + size: SIZE, + bold: true, + }), + ], + }), + ); + + const cellBorder = { + top: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, + bottom: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, + left: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, + right: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, + }; + + const headingLevels = [ + HeadingLevel.HEADING_1, + HeadingLevel.HEADING_2, + HeadingLevel.HEADING_3, + HeadingLevel.HEADING_4, + ]; + const LEGAL_NUMBERING_REF = "legal-clause-numbering"; + const legalNumbering = (level: number) => ({ + reference: LEGAL_NUMBERING_REF, + level: Math.max(0, Math.min(level, 4)), + }); + const legalNumberingLevels = [ + { + level: 0, + format: LevelFormat.DECIMAL, + text: "%1.", + alignment: AlignmentType.START, + suffix: LevelSuffix.TAB, + isLegalNumberingStyle: true, + style: { + paragraph: { indent: { left: 720, hanging: 720 } }, + run: { + bold: true, + color: "000000", + font: FONT, + size: SIZE, + }, + }, + }, + { + level: 1, + format: LevelFormat.DECIMAL, + text: "%1.%2", + alignment: AlignmentType.START, + suffix: LevelSuffix.TAB, + isLegalNumberingStyle: true, + style: { + paragraph: { indent: { left: 720, hanging: 720 } }, + run: { color: "000000", font: FONT, size: SIZE }, + }, + }, + { + level: 2, + format: LevelFormat.LOWER_LETTER, + text: "(%3)", + alignment: AlignmentType.START, + suffix: LevelSuffix.TAB, + style: { + paragraph: { indent: { left: 1440, hanging: 720 } }, + run: { color: "000000", font: FONT, size: SIZE }, + }, + }, + { + level: 3, + format: LevelFormat.LOWER_ROMAN, + text: "(%4)", + alignment: AlignmentType.START, + suffix: LevelSuffix.TAB, + style: { + paragraph: { indent: { left: 1440, hanging: 720 } }, + run: { color: "000000", font: FONT, size: SIZE }, + }, + }, + { + level: 4, + format: LevelFormat.UPPER_LETTER, + text: "(%5)", + alignment: AlignmentType.START, + suffix: LevelSuffix.TAB, + style: { + paragraph: { indent: { left: 2520, hanging: 720 } }, + run: { color: "000000", font: FONT, size: SIZE }, + }, + }, + ]; + const normalizeTable = ( + table: unknown, + ): { headers: string[]; rows: string[][] } | null => { + if (!table || typeof table !== "object") return null; + const raw = table as { headers?: unknown; rows?: unknown }; + const headers = Array.isArray(raw.headers) + ? raw.headers + .map((header) => (typeof header === "string" ? header.trim() : "")) + .filter(Boolean) + : []; + if (headers.length === 0) return null; + + const rawRows = Array.isArray(raw.rows) ? raw.rows : []; + const rows = rawRows + .filter((row): row is unknown[] => Array.isArray(row)) + .map((row) => + headers.map((_, i) => (typeof row[i] === "string" ? row[i] : "")), + ); + + return { headers, rows }; + }; + const stripManualNumbering = ( + value: string, + ): { text: string; levelFromPrefix: number | null } => { + const match = value.trim().match(/^(\d+(?:\.\d+)*)(?:[.)])?\s+(.+)$/); + if (!match) return { text: value.trim(), levelFromPrefix: null }; + return { + text: match[2].trim(), + levelFromPrefix: match[1].split(".").length - 1, + }; + }; + const parseManualListMarker = ( + value: string, + ): { text: string; levelOffset: number | null } => { + const trimmed = value.trim(); + const match = trimmed.match(/^(\(([a-z]+)\)|([a-z]+)[.)])\s+(.+)$/i); + if (!match) return { text: trimmed, levelOffset: null }; + const marker = (match[2] ?? match[3] ?? "").toLowerCase(); + const isRoman = + marker === "i" || + (marker.length > 1 && + /^(?:m{0,4}(?:cm|cd|d?c{0,3})(?:xc|xl|l?x{0,3})(?:ix|iv|v?i{0,3}))$/i.test( + marker, + )); + return { text: match[4].trim(), levelOffset: isRoman ? 3 : 2 }; + }; + const normalizeHeadingText = (value: string) => + value + .trim() + .replace(/[^a-zA-Z0-9]+/g, " ") + .trim() + .toLowerCase(); + + const isTitleLikeFirstHeading = (heading: string, sectionIndex: number) => { + if (sectionIndex !== 0) return false; + const normalized = normalizeHeadingText(heading); + const titleNormalized = normalizeHeadingText(title); + if (!normalized || !titleNormalized) return false; + if (normalized === titleNormalized) return true; + return ( + titleNormalized.includes(normalized) && + /\b(agreement|contract|deed|terms|policy|notice|nda|disclosure)\b/.test( + normalized, + ) + ); + }; + + const isUnnumberedHeading = (heading: string, sectionIndex: number) => { + const normalized = normalizeHeadingText(heading); + if (!normalized) return true; + if (normalized === "signatures" || normalized === "signature") { + return true; + } + if (isTitleLikeFirstHeading(heading, sectionIndex)) { + return true; + } + if ( + sectionIndex === 0 && + /^(agreement|contract|mutual non disclosure agreement|non disclosure agreement|employment agreement|service level agreement)$/.test( + normalized, + ) + ) { + return true; + } + return false; + }; + const isSignatureLine = (value: string) => + /^(?:by|name|title|date):\s*/i.test(value.trim()); + const looksLikeSignatureBlock = (value: string) => { + const lines = value + .split("\n") + .map((line) => line.trim()) + .filter(Boolean); + if (lines.length === 0) return false; + const signatureLineCount = lines.filter(isSignatureLine).length; + return signatureLineCount >= 2; + }; + let currentClauseLevel: number | null = null; + + for (const [sectionIndex, section] of ( + sections as { + heading?: string; + content?: string; + level?: number; + pageBreak?: boolean; + table?: { headers: string[]; rows: string[][] }; + }[] + ).entries()) { + if (section.pageBreak) { + children.push(new Paragraph({ children: [new PageBreak()] })); + } + if (section.heading) { + const stripped = stripManualNumbering(section.heading); + const isUnnumbered = isUnnumberedHeading(stripped.text, sectionIndex); + const skipHeading = isTitleLikeFirstHeading( + stripped.text, + sectionIndex, + ); + const idx = Math.min( + stripped.levelFromPrefix ?? (section.level ?? 1) - 1, + 3, + ); + currentClauseLevel = isUnnumbered || skipHeading ? null : idx; + const headingText = + idx === 0 && !isUnnumbered + ? stripped.text.toUpperCase() + : stripped.text; + if (!skipHeading) { + children.push( + new Paragraph({ + heading: headingLevels[idx], + numbering: isUnnumbered ? undefined : legalNumbering(idx), + spacing: { after: 160 }, + children: [ + new TextRun({ + text: headingText, + color: "000000", + font: FONT, + size: SIZE, + bold: true, + }), + ], + }), + ); + } + } + const normalizedTable = normalizeTable(section.table); + if (normalizedTable) { + const { headers, rows } = normalizedTable; + const tableRows: InstanceType<typeof TableRow>[] = []; + // Header row + tableRows.push( + new TableRow({ + tableHeader: true, + children: headers.map( + (h) => + new TableCell({ + borders: cellBorder, + shading: { fill: "F2F2F2" }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: h, + bold: true, + font: FONT, + size: SIZE, + }), + ], + alignment: AlignmentType.LEFT, + }), + ], + }), + ), + }), + ); + // Data rows — normalize each row to exactly colCount cells. + // LLMs occasionally emit malformed rows (extra fragments from + // stray delimiters, or short rows); padding/truncating here + // keeps the rendered table aligned to the headers. + for (const normalized of rows) { + tableRows.push( + new TableRow({ + children: normalized.map( + (cell) => + new TableCell({ + borders: cellBorder, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell, + font: FONT, + size: SIZE, + }), + ], + }), + ], + }), + ), + }), + ); + } + children.push( + new Table({ + width: { size: 100, type: WidthType.PERCENTAGE }, + rows: tableRows, + }), + ); + children.push(new Paragraph({ text: "" })); + } + if (section.content) { + let numberedBodyParagraphs = 0; + const contentIsSignatureBlock = + section.heading && + normalizeHeadingText(section.heading).includes("signature") + ? true + : looksLikeSignatureBlock(section.content); + for (const line of section.content.split("\n")) { + const trimmed = line.trim(); + if (!trimmed) continue; + const bulletMatch = trimmed.match(/^[-•*]\s+(.+)/); + const rawText = bulletMatch ? bulletMatch[1].trim() : trimmed; + const manualList = parseManualListMarker(rawText); + const numeric = stripManualNumbering(rawText); + const text = bulletMatch + ? rawText + : manualList.levelOffset !== null + ? manualList.text + : numeric.text; + const inferredLevel = + currentClauseLevel === null || contentIsSignatureBlock + ? undefined + : bulletMatch + ? currentClauseLevel + 2 + : manualList.levelOffset !== null + ? currentClauseLevel + manualList.levelOffset + : numeric.levelFromPrefix !== null + ? numeric.levelFromPrefix + : numberedBodyParagraphs === 0 + ? currentClauseLevel + 1 + : currentClauseLevel + 2; + if (currentClauseLevel !== null) numberedBodyParagraphs++; + children.push( + new Paragraph({ + numbering: + inferredLevel === undefined + ? undefined + : legalNumbering(inferredLevel), + spacing: { after: 120 }, + children: [ + new TextRun({ + text, + font: FONT, + size: SIZE, + }), + ], + }), + ); + } + } + } + + const pageSetup = options?.landscape + ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } + : {}; + + const doc = new Document({ + numbering: { + config: [ + { + reference: LEGAL_NUMBERING_REF, + levels: legalNumberingLevels, + }, + ], + }, + sections: [{ properties: pageSetup, children }], + }); + const buf = await Packer.toBuffer(doc); + const zip = await import("jszip"); + const packageZip = await zip.default.loadAsync(buf); + for (const requiredPath of [ + "[Content_Types].xml", + "word/document.xml", + "word/_rels/document.xml.rels", + ]) { + if (!packageZip.file(requiredPath)) { + return { + error: `Generated DOCX is missing required package part: ${requiredPath}`, + }; + } + } + const docId = crypto.randomUUID().replace(/-/g, ""); + const safeTitle = + title + .replace(/[^a-zA-Z0-9 -]/g, "") + .trim() + .slice(0, 64) || "document"; + const filename = `${safeTitle}.docx`; + const key = generatedDocKey(userId, docId, filename); + + await uploadFile( + key, + buf.buffer as ArrayBuffer, + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + ); + const downloadUrl = buildDownloadUrl(key, filename); + + // Persist to DB so generated docs are first-class documents: + // openable in the DocPanel and editable via edit_document. In + // project chats we attach to the project so it appears in the + // sidebar; in the general chat we leave project_id null and it + // stays a standalone document. + const { data: docRow, error: docErr } = await db + .from("documents") + .insert({ + project_id: options?.projectId ?? null, + user_id: userId, + status: "ready", + }) + .select("id") + .single(); + if (docErr || !docRow) { + return { + error: `Failed to record generated document: ${docErr?.message ?? "unknown"}`, + }; + } + const documentId = docRow.id as string; + + const { data: versionRow, error: verErr } = await db + .from("document_versions") + .insert({ + document_id: documentId, + storage_path: key, + source: "generated", + version_number: 1, + filename: filename, + file_type: "docx", + size_bytes: buf.byteLength, + page_count: null, + }) + .select("id") + .single(); + if (verErr || !versionRow) { + return { + error: `Failed to record generated document version: ${verErr?.message ?? "unknown"}`, + }; + } + const versionId = versionRow.id as string; + + await db + .from("documents") + .update({ + current_version_id: versionId, + }) + .eq("id", documentId); + + return { + filename, + download_url: downloadUrl, + document_id: documentId, + version_id: versionId, + version_number: 1, + storage_path: key, + message: `Document '${filename}' has been generated successfully.`, + }; + } catch (e) { + return { error: String(e) }; + } +} + +export function safeGeneratedFilename(title: string, extension: string) { + const rawTitle = typeof title === "string" ? title : "document"; + const safeTitle = + rawTitle + .replace(/[^a-zA-Z0-9 -]/g, "") + .trim() + .slice(0, 64) || "document"; + return `${safeTitle}.${extension}`; +} + +function xmlEscape(value: unknown) { + return String(value ?? "") + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + +function excelColumnName(index: number) { + let n = index + 1; + let name = ""; + while (n > 0) { + const mod = (n - 1) % 26; + name = String.fromCharCode(65 + mod) + name; + n = Math.floor((n - mod) / 26); + } + return name; +} + +function normalizeSheetName(value: unknown, fallback: string) { + const raw = typeof value === "string" && value.trim() ? value.trim() : fallback; + return raw.replace(/[:\\/?*[\]]/g, " ").trim().slice(0, 31) || fallback; +} + +function normalizeRows(rows: unknown, colCount: number) { + if (!Array.isArray(rows)) return []; + return rows + .filter((row): row is unknown[] => Array.isArray(row)) + .map((row) => + Array.from({ length: colCount }, (_, i) => + row[i] == null ? "" : String(row[i]), + ), + ); +} + +async function buildXlsxWorkbook(title: string, sheetsInput: unknown[]) { + const JSZip = (await import("jszip")).default; + const zip = new JSZip(); + const sheets = sheetsInput.length ? sheetsInput : [{ name: title, columns: [], rows: [] }]; + + const normalizedSheets = sheets.map((sheet, index) => { + const raw = (sheet && typeof sheet === "object" ? sheet : {}) as { + name?: unknown; + columns?: unknown; + rows?: unknown; + }; + const columns = Array.isArray(raw.columns) + ? raw.columns.map((col) => String(col ?? "")).filter((col) => col.trim()) + : []; + const fallbackColumns = columns.length ? columns : ["Value"]; + return { + name: normalizeSheetName(raw.name, `Sheet ${index + 1}`), + columns: fallbackColumns, + rows: normalizeRows(raw.rows, fallbackColumns.length), + }; + }); + + zip.file( + "[Content_Types].xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"> + <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/> + <Default Extension="xml" ContentType="application/xml"/> + <Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/> + <Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml"/> + <Override PartName="/docProps/app.xml" ContentType="application/vnd.openxmlformats-officedocument.extended-properties+xml"/> +${normalizedSheets + .map( + (_, i) => + ` <Override PartName="/xl/worksheets/sheet${i + 1}.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>`, + ) + .join("\n")} +</Types>`, + ); + zip.file( + "_rels/.rels", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> + <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/> + <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/> + <Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/> +</Relationships>`, + ); + zip.file( + "docProps/core.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> + <dc:title>${xmlEscape(title)}</dc:title> + <dc:creator>Mike</dc:creator> + <cp:lastModifiedBy>Mike</cp:lastModifiedBy> + <dcterms:created xsi:type="dcterms:W3CDTF">${new Date().toISOString()}</dcterms:created> + <dcterms:modified xsi:type="dcterms:W3CDTF">${new Date().toISOString()}</dcterms:modified> +</cp:coreProperties>`, + ); + zip.file( + "docProps/app.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes"> + <Application>Mike</Application> +</Properties>`, + ); + zip.file( + "xl/workbook.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"> + <sheets> +${normalizedSheets + .map( + (sheet, i) => + ` <sheet name="${xmlEscape(sheet.name)}" sheetId="${i + 1}" r:id="rId${i + 1}"/>`, + ) + .join("\n")} + </sheets> +</workbook>`, + ); + zip.file( + "xl/_rels/workbook.xml.rels", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> +${normalizedSheets + .map( + (_, i) => + ` <Relationship Id="rId${i + 1}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet${i + 1}.xml"/>`, + ) + .join("\n")} +</Relationships>`, + ); + + for (const [sheetIndex, sheet] of normalizedSheets.entries()) { + const allRows = [sheet.columns, ...sheet.rows]; + const rowXml = allRows + .map((row, rowIndex) => { + const rowNumber = rowIndex + 1; + const cellXml = row + .map((value, colIndex) => { + const ref = `${excelColumnName(colIndex)}${rowNumber}`; + return `<c r="${ref}" t="inlineStr"><is><t>${xmlEscape(value)}</t></is></c>`; + }) + .join(""); + return `<row r="${rowNumber}">${cellXml}</row>`; + }) + .join(""); + const lastRef = `${excelColumnName(Math.max(sheet.columns.length - 1, 0))}${Math.max(allRows.length, 1)}`; + zip.file( + `xl/worksheets/sheet${sheetIndex + 1}.xml`, + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"> + <dimension ref="A1:${lastRef}"/> + <sheetData>${rowXml}</sheetData> +</worksheet>`, + ); + } + + return zip.generateAsync({ type: "nodebuffer" }); +} + +function pptTextParagraphs(lines: string[], opts: { title?: boolean } = {}) { + return lines + .map((line, index) => { + const escaped = xmlEscape(line); + const titleAttrs = opts.title ? ' sz="3200" b="1"' : ' sz="2000"'; + const bullet = !opts.title && index >= 0 + ? '<a:pPr marL="342900" indent="-171450"><a:buChar char="•"/></a:pPr>' + : ""; + return `<a:p>${bullet}<a:r><a:rPr lang="en-US"${titleAttrs}/><a:t>${escaped}</a:t></a:r></a:p>`; + }) + .join(""); +} + +function pptShape(id: number, name: string, x: number, y: number, cx: number, cy: number, body: string) { + return `<p:sp> + <p:nvSpPr><p:cNvPr id="${id}" name="${xmlEscape(name)}"/><p:cNvSpPr txBox="1"/><p:nvPr/></p:nvSpPr> + <p:spPr><a:xfrm><a:off x="${x}" y="${y}"/><a:ext cx="${cx}" cy="${cy}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom><a:noFill/><a:ln><a:noFill/></a:ln></p:spPr> + <p:txBody><a:bodyPr wrap="square"/><a:lstStyle/>${body}</p:txBody> +</p:sp>`; +} + +async function buildPptxPresentation(title: string, slidesInput: unknown[]) { + const JSZip = (await import("jszip")).default; + const zip = new JSZip(); + const rawSlides = slidesInput.length + ? slidesInput + : [{ title, bullets: ["Generated by Mike"] }]; + const slides = rawSlides.map((slide, index) => { + const raw = (slide && typeof slide === "object" ? slide : {}) as { + title?: unknown; + bullets?: unknown; + }; + return { + title: + typeof raw.title === "string" && raw.title.trim() + ? raw.title.trim() + : index === 0 + ? title + : `Slide ${index + 1}`, + bullets: Array.isArray(raw.bullets) + ? raw.bullets.map((bullet) => String(bullet ?? "")).filter(Boolean) + : [], + }; + }); + + zip.file( + "[Content_Types].xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"> + <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/> + <Default Extension="xml" ContentType="application/xml"/> + <Override PartName="/ppt/presentation.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml"/> + <Override PartName="/ppt/slideMasters/slideMaster1.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slideMaster+xml"/> + <Override PartName="/ppt/slideLayouts/slideLayout1.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml"/> + <Override PartName="/ppt/theme/theme1.xml" ContentType="application/vnd.openxmlformats-officedocument.theme+xml"/> + <Override PartName="/docProps/core.xml" ContentType="application/vnd.openxmlformats-package.core-properties+xml"/> + <Override PartName="/docProps/app.xml" ContentType="application/vnd.openxmlformats-officedocument.extended-properties+xml"/> +${slides + .map( + (_, i) => + ` <Override PartName="/ppt/slides/slide${i + 1}.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slide+xml"/>`, + ) + .join("\n")} +</Types>`, + ); + zip.file( + "_rels/.rels", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> + <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="ppt/presentation.xml"/> + <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/> + <Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/> +</Relationships>`, + ); + zip.file( + "docProps/core.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<cp:coreProperties xmlns:cp="http://schemas.openxmlformats.org/package/2006/metadata/core-properties" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> + <dc:title>${xmlEscape(title)}</dc:title> + <dc:creator>Mike</dc:creator> + <cp:lastModifiedBy>Mike</cp:lastModifiedBy> + <dcterms:created xsi:type="dcterms:W3CDTF">${new Date().toISOString()}</dcterms:created> + <dcterms:modified xsi:type="dcterms:W3CDTF">${new Date().toISOString()}</dcterms:modified> +</cp:coreProperties>`, + ); + zip.file( + "docProps/app.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes"> + <Application>Mike</Application> + <PresentationFormat>On-screen Show (16:9)</PresentationFormat> + <Slides>${slides.length}</Slides> +</Properties>`, + ); + zip.file( + "ppt/presentation.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<p:presentation xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"> + <p:sldMasterIdLst><p:sldMasterId id="2147483648" r:id="rId${slides.length + 1}"/></p:sldMasterIdLst> + <p:sldIdLst> +${slides.map((_, i) => ` <p:sldId id="${256 + i}" r:id="rId${i + 1}"/>`).join("\n")} + </p:sldIdLst> + <p:sldSz cx="12192000" cy="6858000" type="screen16x9"/> + <p:notesSz cx="6858000" cy="9144000"/> +</p:presentation>`, + ); + zip.file( + "ppt/_rels/presentation.xml.rels", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> +${slides + .map( + (_, i) => + ` <Relationship Id="rId${i + 1}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slides/slide${i + 1}.xml"/>`, + ) + .join("\n")} + <Relationship Id="rId${slides.length + 1}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideMaster" Target="slideMasters/slideMaster1.xml"/> + <Relationship Id="rId${slides.length + 2}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="theme/theme1.xml"/> +</Relationships>`, + ); + zip.file( + "ppt/slideMasters/slideMaster1.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<p:sldMaster xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"> + <p:cSld><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr></p:spTree></p:cSld> + <p:sldLayoutIdLst><p:sldLayoutId id="2147483649" r:id="rId1"/></p:sldLayoutIdLst> +</p:sldMaster>`, + ); + zip.file( + "ppt/slideMasters/_rels/slideMaster1.xml.rels", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> + <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout" Target="../slideLayouts/slideLayout1.xml"/> + <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="../theme/theme1.xml"/> +</Relationships>`, + ); + zip.file( + "ppt/slideLayouts/slideLayout1.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<p:sldLayout xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" type="blank"> + <p:cSld name="Blank"><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr></p:spTree></p:cSld> +</p:sldLayout>`, + ); + zip.file( + "ppt/theme/theme1.xml", + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Mike"> + <a:themeElements> + <a:clrScheme name="Office"><a:dk1><a:srgbClr val="111111"/></a:dk1><a:lt1><a:srgbClr val="FFFFFF"/></a:lt1><a:dk2><a:srgbClr val="1F2937"/></a:dk2><a:lt2><a:srgbClr val="F8FAFC"/></a:lt2><a:accent1><a:srgbClr val="2563EB"/></a:accent1><a:accent2><a:srgbClr val="059669"/></a:accent2><a:accent3><a:srgbClr val="D97706"/></a:accent3><a:accent4><a:srgbClr val="7C3AED"/></a:accent4><a:accent5><a:srgbClr val="DC2626"/></a:accent5><a:accent6><a:srgbClr val="0891B2"/></a:accent6><a:hlink><a:srgbClr val="2563EB"/></a:hlink><a:folHlink><a:srgbClr val="7C3AED"/></a:folHlink></a:clrScheme> + <a:fontScheme name="Office"><a:majorFont><a:latin typeface="Aptos Display"/></a:majorFont><a:minorFont><a:latin typeface="Aptos"/></a:minorFont></a:fontScheme> + <a:fmtScheme name="Office"><a:fillStyleLst><a:solidFill><a:schemeClr val="phClr"/></a:solidFill></a:fillStyleLst><a:lnStyleLst><a:ln w="6350" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"/></a:solidFill></a:ln></a:lnStyleLst><a:effectStyleLst><a:effectStyle><a:effectLst/></a:effectStyle></a:effectStyleLst><a:bgFillStyleLst><a:solidFill><a:schemeClr val="phClr"/></a:solidFill></a:bgFillStyleLst></a:fmtScheme> + </a:themeElements> +</a:theme>`, + ); + + for (const [index, slide] of slides.entries()) { + const bullets = slide.bullets.length ? slide.bullets : [""]; + zip.file( + `ppt/slides/slide${index + 1}.xml`, + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<p:sld xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"> + <p:cSld> + <p:bg><p:bgPr><a:solidFill><a:srgbClr val="FFFFFF"/></a:solidFill></p:bgPr></p:bg> + <p:spTree> + <p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr> + <p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr> + ${pptShape(2, "Title", 685800, 457200, 10820400, 914400, pptTextParagraphs([slide.title], { title: true }))} + ${pptShape(3, "Content", 914400, 1600200, 10363200, 4343400, pptTextParagraphs(bullets))} + </p:spTree> + </p:cSld> +</p:sld>`, + ); + zip.file( + `ppt/slides/_rels/slide${index + 1}.xml.rels`, + `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> +<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> + <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout" Target="../slideLayouts/slideLayout1.xml"/> +</Relationships>`, + ); + } + + return zip.generateAsync({ type: "nodebuffer" }); +} + +async function persistGeneratedFile(params: { + title: string; + extension: "xlsx" | "pptx"; + buffer: Buffer; + userId: string; + db: ReturnType<typeof createServerSupabase>; + projectId?: string | null; +}) { + const { title, extension, buffer, userId, db, projectId } = params; + const docId = crypto.randomUUID().replace(/-/g, ""); + const filename = safeGeneratedFilename(title, extension); + const key = generatedDocKey(userId, docId, filename); + await uploadFile( + key, + buffer.buffer.slice( + buffer.byteOffset, + buffer.byteOffset + buffer.byteLength, + ) as ArrayBuffer, + contentTypeForDocumentType(extension), + ); + + let pdfStoragePath: string | null = null; + if (shouldConvertToPdf(extension)) { + try { + const pdfBuf = await docxToPdf(buffer); + const pdfKey = convertedPdfKey(userId, docId); + await uploadFile( + pdfKey, + pdfBuf.buffer.slice( + pdfBuf.byteOffset, + pdfBuf.byteOffset + pdfBuf.byteLength, + ) as ArrayBuffer, + "application/pdf", + ); + pdfStoragePath = pdfKey; + } catch (err) { + devLog(`[generate_${extension}] Office→PDF conversion failed:`, err); + } + } + + const downloadUrl = buildDownloadUrl(key, filename); + const { data: docRow, error: docErr } = await db + .from("documents") + .insert({ + project_id: projectId ?? null, + user_id: userId, + status: "ready", + }) + .select("id") + .single(); + if (docErr || !docRow) { + return { + error: `Failed to record generated document: ${docErr?.message ?? "unknown"}`, + }; + } + const documentId = docRow.id as string; + + const { data: versionRow, error: verErr } = await db + .from("document_versions") + .insert({ + document_id: documentId, + storage_path: key, + pdf_storage_path: pdfStoragePath, + source: "generated", + version_number: 1, + filename, + file_type: extension, + size_bytes: buffer.byteLength, + page_count: null, + }) + .select("id") + .single(); + if (verErr || !versionRow) { + return { + error: `Failed to record generated document version: ${verErr?.message ?? "unknown"}`, + }; + } + const versionId = versionRow.id as string; + + await db + .from("documents") + .update({ current_version_id: versionId }) + .eq("id", documentId); + + return { + filename, + download_url: downloadUrl, + document_id: documentId, + version_id: versionId, + version_number: 1, + storage_path: key, + message: `Document '${filename}' has been generated successfully.`, + }; +} + +export async function generateExcel( + title: string, + sheets: unknown[], + userId: string, + db: ReturnType<typeof createServerSupabase>, + options?: { projectId?: string | null }, +) { + try { + const normalizedTitle = typeof title === "string" ? title : "Workbook"; + const buffer = await buildXlsxWorkbook( + normalizedTitle, + Array.isArray(sheets) ? sheets : [], + ); + return persistGeneratedFile({ + title: normalizedTitle, + extension: "xlsx", + buffer, + userId, + db, + projectId: options?.projectId ?? null, + }); + } catch (e) { + return { error: String(e) }; + } +} + +export async function generatePpt( + title: string, + slides: unknown[], + userId: string, + db: ReturnType<typeof createServerSupabase>, + options?: { projectId?: string | null }, +) { + try { + const normalizedTitle = typeof title === "string" ? title : "Presentation"; + const buffer = await buildPptxPresentation( + normalizedTitle, + Array.isArray(slides) ? slides : [], + ); + return persistGeneratedFile({ + title: normalizedTitle, + extension: "pptx", + buffer, + userId, + db, + projectId: options?.projectId ?? null, + }); + } catch (e) { + return { error: String(e) }; + } +} + +// --------------------------------------------------------------------------- +// Document version helpers (DOCX tracked-change editing) +// --------------------------------------------------------------------------- + +/** + * Resolve the current .docx bytes for a document, preferring the active + * tracked-changes version if one exists, else the original upload. + */ +export async function loadCurrentVersionBytes( + documentId: string, + db: ReturnType<typeof createServerSupabase>, +): Promise<{ bytes: Buffer; storage_path: string } | null> { + const active = await loadActiveVersion(documentId, db); + if (!active) return null; + const raw = await downloadFile(active.storage_path); + if (!raw) return null; + return { bytes: Buffer.from(raw), storage_path: active.storage_path }; +} + +/** + * Ensure the document has a document_versions row for the current upload. + * Called before writing the first 'assistant_edit' row so the history is + * complete. Idempotent. + */ +export async function runEditDocument(params: { + documentId: string; + userId: string; + edits: EditInput[]; + db: ReturnType<typeof createServerSupabase>; + /** + * If provided, append these edits to the existing turn-scoped version + * (overwrites the file at storagePath and reuses the document_versions + * row) instead of creating a new version. Used to collapse multiple + * edit_document tool calls within a single assistant turn into one + * version. + */ + reuseVersion?: { + versionId: string; + versionNumber: number; + storagePath: string; + }; +}): Promise< + | { + ok: true; + version_id: string; + version_number: number; + storage_path: string; + download_url: string; + annotations: EditAnnotation[]; + errors: { index: number; reason: string }[]; + } + | { ok: false; error: string } +> { + const { documentId, userId, edits, db, reuseVersion } = params; + + const { data: doc } = await db + .from("documents") + .select("id") + .eq("id", documentId) + .single(); + if (!doc) return { ok: false, error: "Document not found." }; + + const activeVersion = await loadActiveVersion(documentId, db); + let versionFilename = + activeVersion?.filename?.trim() || "Untitled document"; + + const current = await loadCurrentVersionBytes(documentId, db); + if (!current) return { ok: false, error: "Could not load document bytes." }; + + const { + bytes: editedBytes, + changes, + errors, + } = await applyTrackedEdits(current.bytes, edits, { author: "Mike" }); + + if (changes.length === 0) { + return { + ok: false, + error: + errors[0]?.reason ?? + "No edits could be applied. Refine context_before/context_after and retry.", + }; + } + + const ab = editedBytes.buffer.slice( + editedBytes.byteOffset, + editedBytes.byteOffset + editedBytes.byteLength, + ) as ArrayBuffer; + + let versionRowId: string; + let newPath: string; + let nextVersionNumber: number; + + if (reuseVersion) { + // Overwrite the existing turn version's file in place. The version + // row, version_number, and current_version_id all already point here. + newPath = reuseVersion.storagePath; + versionRowId = reuseVersion.versionId; + nextVersionNumber = reuseVersion.versionNumber; + await uploadFile( + newPath, + ab, + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + ); + await db + .from("document_versions") + .update({ + file_type: "docx", + size_bytes: editedBytes.byteLength, + page_count: null, + }) + .eq("id", versionRowId); + } else { + const versionId = crypto.randomUUID().replace(/-/g, ""); + newPath = `documents/${userId}/${documentId}/edits/${versionId}.docx`; + await uploadFile( + newPath, + ab, + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + ); + + // Per-document sequential number for the new assistant_edit + // version. The counter spans upload + user_upload + assistant_edit + // so the original upload is V1 and the first assistant edit is V2. + const { data: maxRow } = await db + .from("document_versions") + .select("version_number") + .eq("document_id", documentId) + .in("source", ["upload", "user_upload", "assistant_edit"]) + .order("version_number", { ascending: false, nullsFirst: false }) + .limit(1) + .maybeSingle(); + nextVersionNumber = ((maxRow?.version_number as number | null) ?? 1) + 1; + + // Inherit the filename from the most recent prior version so + // user-applied renames carry forward through further edits. Malformed + // legacy rows without a filename get a neutral placeholder, not the + // parent document filename. We intentionally do NOT append "[Edited Vn]" + // — the version number is surfaced separately as a tag in the UI. + const { data: prevRow } = await db + .from("document_versions") + .select("filename, created_at") + .eq("document_id", documentId) + .order("created_at", { ascending: false }) + .limit(1) + .maybeSingle(); + const inheritedFilename = + (prevRow?.filename as string | null)?.trim() || "Untitled document"; + versionFilename = inheritedFilename; + + const { data: versionRow, error: verErr } = await db + .from("document_versions") + .insert({ + document_id: documentId, + storage_path: newPath, + source: "assistant_edit", + version_number: nextVersionNumber, + filename: inheritedFilename, + file_type: "docx", + size_bytes: editedBytes.byteLength, + page_count: null, + }) + .select("id") + .single(); + if (verErr || !versionRow) { + return { ok: false, error: "Failed to record document version." }; + } + versionRowId = versionRow.id as string; + } + + // Insert one row per change + const editRows = changes.map((c) => ({ + document_id: documentId, + version_id: versionRowId, + change_id: c.id, + del_w_id: c.delId ?? null, + ins_w_id: c.insId ?? null, + deleted_text: c.deletedText, + inserted_text: c.insertedText, + context_before: c.contextBefore ?? "", + context_after: c.contextAfter ?? "", + status: "pending" as const, + })); + const { data: insertedEdits, error: editsErr } = await db + .from("document_edits") + .insert(editRows) + .select( + "id, change_id, del_w_id, ins_w_id, deleted_text, inserted_text, context_before, context_after", + ); + + if (editsErr || !insertedEdits) { + return { ok: false, error: "Failed to record edits." }; + } + + await db + .from("documents") + .update({ + current_version_id: versionRowId, + }) + .eq("id", documentId); + + const annotations: EditAnnotation[] = insertedEdits.map( + (r: { + id: string; + change_id: string; + deleted_text: string; + inserted_text: string; + context_before: string | null; + context_after: string | null; + }) => { + const src = changes.find((c) => c.id === r.change_id); + return { + kind: "edit", + edit_id: r.id, + document_id: documentId, + version_id: versionRowId, + version_number: nextVersionNumber, + change_id: r.change_id, + del_w_id: src?.delId, + ins_w_id: src?.insId, + deleted_text: r.deleted_text ?? "", + inserted_text: r.inserted_text ?? "", + context_before: r.context_before ?? "", + context_after: r.context_after ?? "", + reason: src?.reason, + status: "pending", + }; + }, + ); + + // Persistent, non-expiring permalink. The backend streams fresh bytes + // on each request, so this URL stays valid as long as the file exists. + const resolvedFilename = versionFilename.trim() || "Untitled document.docx"; + const permalink = buildDownloadUrl(newPath, resolvedFilename); + + return { + ok: true, + version_id: versionRowId, + version_number: nextVersionNumber, + storage_path: newPath, + download_url: permalink, + annotations, + errors, + }; +} + +// --------------------------------------------------------------------------- +// Tool dispatch +// --------------------------------------------------------------------------- + +export async function getTurnReadIdentity(params: { + docLabel: string; + docStore: DocStore; + docIndex?: DocIndex; + db?: ReturnType<typeof createServerSupabase>; +}): Promise<{ + key: string; + docLabel: string; + filename: string; + documentId?: string; + versionId?: string | null; + storagePath: string; +} | null> { + const { docLabel, docStore, docIndex, db } = params; + const docInfo = docStore.get(docLabel); + if (!docInfo) return null; + + const documentId = docIndex?.[docLabel]?.document_id; + if (documentId && db) { + const active = await loadActiveVersion(documentId, db); + if (active?.storage_path) { + return { + key: `${documentId}:${active.id}`, + docLabel, + filename: docInfo.filename, + documentId, + versionId: active.id, + storagePath: active.storage_path, + }; + } + } + + return { + key: `${documentId ?? docLabel}:${docInfo.storage_path}`, + docLabel, + filename: docInfo.filename, + documentId, + versionId: docIndex?.[docLabel]?.version_id ?? null, + storagePath: docInfo.storage_path, + }; +} + +export function duplicateReadDocumentResult(identity: { + docLabel: string; + filename: string; + documentId?: string; + versionId?: string | null; +}) { + return JSON.stringify({ + ok: true, + already_read: true, + doc_id: identity.docLabel, + filename: identity.filename, + document_id: identity.documentId, + version_id: identity.versionId ?? null, + content: + "This document/version was already read earlier in this response. The full text is not repeated to avoid unnecessary token use.", + next_required_action: + "Use the prior read_document/fetch_documents result, call find_in_document for targeted checks, or proceed to edit_document.", + }); +} + +export function clearTurnReadsForDocument( + turnReadState: TurnReadState | undefined, + documentId: string, +) { + if (!turnReadState) return; + for (const [key, value] of turnReadState.entries()) { + if (value.documentId === documentId) turnReadState.delete(key); + } +} + +export async function readDocumentContent( + docLabel: string, + docStore: DocStore, + write: (s: string) => void, + docIndex?: DocIndex, + db?: ReturnType<typeof createServerSupabase>, + opts?: { emitEvents?: boolean }, +): Promise<string> { + const emitEvents = opts?.emitEvents ?? true; + devLog(`[read_document] called with docLabel="${docLabel}"`); + const docInfo = docStore.get(docLabel); + if (!docInfo) { + devLog( + `[read_document] MISS — docLabel "${docLabel}" not in docStore. Known labels:`, + Array.from(docStore.keys()), + ); + return "Document not found."; + } + devLog( + `[read_document] docInfo: filename="${docInfo.filename}", file_type="${docInfo.file_type}", storage_path="${docInfo.storage_path}"`, + ); + + const documentId = docIndex?.[docLabel]?.document_id; + const emitDocRead = () => { + if (!emitEvents) return; + write( + `data: ${JSON.stringify({ + type: "doc_read", + filename: docInfo.filename, + document_id: documentId, + })}\n\n`, + ); + }; + if (emitEvents) + write( + `data: ${JSON.stringify({ + type: "doc_read_start", + filename: docInfo.filename, + document_id: documentId, + })}\n\n`, + ); + try { + // Prefer the current tracked-changes version (if any) so read_document + // reflects accepted/pending edits rather than the original upload. + let raw: ArrayBuffer | null = null; + let sourcePath = docInfo.storage_path; + if (documentId && db) { + const current = await loadCurrentVersionBytes(documentId, db); + if (current) { + raw = current.bytes.buffer.slice( + current.bytes.byteOffset, + current.bytes.byteOffset + current.bytes.byteLength, + ) as ArrayBuffer; + sourcePath = current.storage_path; + devLog( + `[read_document] using current version path="${sourcePath}" (bytes=${raw.byteLength})`, + ); + } else { + devLog( + `[read_document] loadCurrentVersionBytes returned null for documentId="${documentId}", falling back to original storage_path`, + ); + } + } + if (!raw) { + raw = await downloadFile(docInfo.storage_path); + if (raw) { + devLog( + `[read_document] fallback download from storage_path="${docInfo.storage_path}" (bytes=${raw.byteLength})`, + ); + } + } + if (!raw) { + devLog( + `[read_document] FAILED to download any bytes for docLabel="${docLabel}" (tried path="${sourcePath}")`, + ); + emitDocRead(); + return "Document could not be read."; + } + // Log the first 8 bytes so we can identify real file format regardless + // of the declared file_type. Valid .docx starts with "PK\x03\x04" + // (zip). Legacy .doc starts with "\xD0\xCF\x11\xE0" (OLE/CFB). + // %PDF-1 is a PDF even if mislabeled. Truncated uploads show as all-zero. + { + const head = Buffer.from(raw).subarray(0, 8); + const hex = head.toString("hex"); + const ascii = head.toString("binary").replace(/[^\x20-\x7e]/g, "."); + devLog( + `[read_document] magic bytes hex=${hex} ascii="${ascii}" for filename="${docInfo.filename}"`, + ); + } + let text: string; + const fileType = docInfo.file_type?.toLowerCase?.() ?? ""; + if (fileType === "pdf") { + text = await extractPdfText(raw); + devLog( + `[read_document] pdf extracted length=${text.length} for filename="${docInfo.filename}"`, + ); + } else if (fileType === "docx") { + // Use the same flattening as the edit_document matcher so the + // LLM sees exactly the characters it can anchor against. + text = await extractDocxBodyText(Buffer.from(raw)); + devLog( + `[read_document] docx extractDocxBodyText length=${text.length} for filename="${docInfo.filename}"`, + ); + if (!text) { + devLog( + `[read_document] docx accepted-view extractor returned empty, falling back to mammoth for filename="${docInfo.filename}"`, + ); + const mammoth = await import("mammoth"); + const result = await mammoth.extractRawText({ + buffer: Buffer.from(raw), + }); + text = result.value; + devLog( + `[read_document] docx mammoth fallback length=${text.length} for filename="${docInfo.filename}"`, + ); + } + } else if (isSpreadsheetDocumentType(fileType)) { + // SheetJS reads .xlsx/.xlsm/.xls directly (no PDF detour), emitting a + // cell-addressed markdown view with Excel-formatted values. + text = spreadsheetToLLMText(Buffer.from(raw)); + devLog( + `[read_document] spreadsheet extracted length=${text.length} for filename="${docInfo.filename}"`, + ); + } else if (fileType === "pptx") { + text = await extractPresentationText(Buffer.from(raw)); + devLog( + `[read_document] presentation extracted length=${text.length} for filename="${docInfo.filename}"`, + ); + } else if ( + isPresentationDocumentType(fileType) || + isWordDocumentType(fileType) + ) { + devLog( + `[read_document] legacy Office file_type="${fileType}" for filename="${docInfo.filename}", converting to pdf for text extraction`, + ); + const pdfBuf = await docxToPdf(Buffer.from(raw)); + text = await extractPdfText( + pdfBuf.buffer.slice( + pdfBuf.byteOffset, + pdfBuf.byteOffset + pdfBuf.byteLength, + ) as ArrayBuffer, + ); + devLog( + `[read_document] legacy Office PDF extraction length=${text.length} for filename="${docInfo.filename}"`, + ); + } else { + devLog( + `[read_document] unknown file_type="${docInfo.file_type}" for filename="${docInfo.filename}", trying mammoth`, + ); + const mammoth = await import("mammoth"); + const result = await mammoth.extractRawText({ + buffer: Buffer.from(raw), + }); + text = result.value; + devLog( + `[read_document] mammoth length=${text.length} for filename="${docInfo.filename}"`, + ); + } + devLog( + `[read_document] DONE filename="${docInfo.filename}" finalTextLength=${text.length} firstChars=${JSON.stringify(text.slice(0, 120))}`, + ); + emitDocRead(); + return text; + } catch (err) { + devLog( + `[read_document] THREW for docLabel="${docLabel}" filename="${docInfo.filename}":`, + err, + ); + if (emitEvents) + write( + `data: ${JSON.stringify({ type: "doc_read", filename: docInfo.filename })}\n\n`, + ); + return "Document could not be read."; + } +} + +/** + * Build a whitespace-collapsed, lowercased copy of `text`, plus a map from + * each character index in the normalized form back to the corresponding + * index in the original text. Used by `findInDocumentContent` so matches + * are tolerant of case + whitespace variance but can still return the + * exact original excerpt. + */ +function normalizeWithMap(text: string): { norm: string; origIdx: number[] } { + const norm: string[] = []; + const origIdx: number[] = []; + let prevSpace = false; + for (let i = 0; i < text.length; i++) { + const ch = text[i]; + if (/\s/.test(ch)) { + if (!prevSpace) { + norm.push(" "); + origIdx.push(i); + prevSpace = true; + } + } else { + norm.push(ch.toLowerCase()); + origIdx.push(i); + prevSpace = false; + } + } + return { norm: norm.join(""), origIdx }; +} + +function normalizeQuery(q: string): string { + return q.trim().replace(/\s+/g, " ").toLowerCase(); +} + +export type TextMatch = { + index: number; + excerpt: string; + context: string; +}; + +export function findTextMatches(params: { + text: string; + query: string; + maxResults: number; + contextChars: number; + startIndex?: number; +}): { hits: TextMatch[]; totalMatches: number } { + const { text, query, maxResults, contextChars, startIndex = 0 } = params; + const { norm, origIdx } = normalizeWithMap(text); + const needle = normalizeQuery(query); + const hits: TextMatch[] = []; + let totalMatches = 0; + if (!needle) return { hits, totalMatches }; + + let from = 0; + while (from <= norm.length - needle.length) { + const pos = norm.indexOf(needle, from); + if (pos < 0) break; + const endNormPos = pos + needle.length; + const origStart = origIdx[pos] ?? 0; + const origEnd = + endNormPos - 1 < origIdx.length + ? origIdx[endNormPos - 1] + 1 + : text.length; + if (hits.length < maxResults) { + const ctxStart = Math.max(0, origStart - contextChars); + const ctxEnd = Math.min(text.length, origEnd + contextChars); + hits.push({ + index: startIndex + hits.length, + excerpt: text.slice(origStart, origEnd), + context: + (ctxStart > 0 ? "…" : "") + + text.slice(ctxStart, ctxEnd).replace(/\s+/g, " ").trim() + + (ctxEnd < text.length ? "…" : ""), + }); + } + totalMatches++; + from = pos + Math.max(1, needle.length); + } + + return { hits, totalMatches }; +} + +/** + * Ctrl+F helper. Returns a JSON-serializable result with up to `maxResults` + * hits, each containing the original-text excerpt plus surrounding context. + */ +export async function findInDocumentContent(params: { + docLabel: string; + query: string; + maxResults?: number; + contextChars?: number; + docStore: DocStore; + write: (s: string) => void; + docIndex?: DocIndex; + db?: ReturnType<typeof createServerSupabase>; +}): Promise<string> { + const { + docLabel, + query, + maxResults = 20, + contextChars = 80, + docStore, + write, + docIndex, + db, + } = params; + + if (!query || !query.trim()) { + return JSON.stringify({ ok: false, error: "Empty query." }); + } + + const docInfo = docStore.get(docLabel); + if (!docInfo) { + return JSON.stringify({ + ok: false, + error: `Document '${docLabel}' not found.`, + }); + } + + // Announce the search to the UI, then reuse readDocumentContent for its + // fallbacks — but suppress its own doc_read events so the user only sees + // the doc_find block (not a competing doc_read block for the same op). + write( + `data: ${JSON.stringify({ + type: "doc_find_start", + filename: docInfo.filename, + query, + })}\n\n`, + ); + + const text = await readDocumentContent( + docLabel, + docStore, + write, + docIndex, + db, + { emitEvents: false }, + ); + if (!text || text === "Document could not be read.") { + write( + `data: ${JSON.stringify({ + type: "doc_find", + filename: docInfo.filename, + query, + total_matches: 0, + })}\n\n`, + ); + return JSON.stringify({ + ok: false, + filename: docInfo.filename, + error: "Document could not be read.", + }); + } + + const needle = normalizeQuery(query); + if (!needle) { + return JSON.stringify({ + ok: false, + error: "Empty query after normalization.", + }); + } + + const { hits, totalMatches } = findTextMatches({ + text, + query, + maxResults, + contextChars, + }); + + write( + `data: ${JSON.stringify({ + type: "doc_find", + filename: docInfo.filename, + query, + total_matches: totalMatches, + })}\n\n`, + ); + + return JSON.stringify({ + ok: true, + filename: docInfo.filename, + query, + total_matches: totalMatches, + returned: hits.length, + truncated: totalMatches > hits.length, + hits, + }); +} + +export type DocEditedResult = { + filename: string; + document_id: string; + version_id: string; + version_number: number | null; + download_url: string; + annotations: EditAnnotation[]; +}; + +export type TurnEditState = Map< + string, + { versionId: string; versionNumber: number; storagePath: string } +>; + +export type TurnReadState = Map< + string, + { + docLabel: string; + filename: string; + documentId?: string; + versionId?: string | null; + storagePath: string; + } +>; + +export type DocCreatedResult = { + filename: string; + download_url: string; + document_id?: string; + version_id?: string; + version_number?: number | null; +}; + +export type DocReplicatedResult = { + /** Filename of the source document being copied. */ + filename: string; + /** How many copies were produced in this single tool call. */ + count: number; + /** One entry per new copy. */ + copies: { + new_filename: string; + document_id: string; + version_id: string; + }[]; +}; diff --git a/backend/src/lib/chat/tools/toolDispatcher.ts b/backend/src/lib/chat/tools/toolDispatcher.ts new file mode 100644 index 0000000..118227c --- /dev/null +++ b/backend/src/lib/chat/tools/toolDispatcher.ts @@ -0,0 +1,1896 @@ +import { + getCourtlistenerCases, + searchCourtlistenerCaseLaw, + verifyCourtlistenerCitations, +} from "../../courtlistener"; +import { + COURTLISTENER_TOOL_NAMES, + type CaseCitationEvent, + type CourtlistenerToolEvent, +} from "./courtlistenerTools"; +import { + executeMcpToolCall, + type McpToolEvent, +} from "../../mcpConnectors"; +import { createServerSupabase } from "../../supabase"; +import { + type DocStore, + type DocIndex, + type TabularCellStore, + type WorkflowStore, + type ToolCall, + type AskInputItem, + type AskInputOption, + type AskInputsEvent, + devLog, + resolveDocLabel, +} from "../types"; +import { + downloadFile, + storageKey, + uploadFile, +} from "../../storage"; +import { convertedPdfKey } from "../../convert"; +import { contentTypeForDocumentType } from "../../documentTypes"; +import { buildDownloadUrl } from "../../downloadTokens"; +import { loadActiveVersion } from "../../documentVersions"; +import { type EditInput } from "../../docxTrackedChanges"; +import { + citationReminder, + generateDocx, + generateExcel, + generatePpt, + getTurnReadIdentity, + duplicateReadDocumentResult, + clearTurnReadsForDocument, + readDocumentContent, + findInDocumentContent, + findTextMatches, + runEditDocument, + safeGeneratedFilename, + type DocEditedResult, + type TurnEditState, + type TurnReadState, + type DocCreatedResult, + type DocReplicatedResult, + type TextMatch, +} from "./documentOps"; + + +type CourtlistenerCaseRecord = { + clusterId: number; + caseName: string | null; + citations: string[]; + url: string | null; + pdfUrl: string | null; + dateFiled: string | null; + opinions?: unknown[]; +}; + +type CourtlistenerCaseInput = { + clusterId?: number | null; + caseName?: string | null; + citation?: string | null; + citations?: string[]; + url?: string | null; + pdfUrl?: string | null; + dateFiled?: string | null; + opinions?: unknown[]; +}; + +export type CourtlistenerTurnState = { + casesByClusterId: Map<number, CourtlistenerCaseRecord>; +}; + +function nonEmpty(value: unknown): string | null { + return typeof value === "string" && value.trim() ? value.trim() : null; +} + +function cleanAskInputString(value: unknown, fallback = ""): string { + const text = typeof value === "string" ? value.trim() : ""; + return text || fallback; +} + +function normalizeAskInputsEvent(args: Record<string, unknown>): AskInputsEvent { + const rawItems = Array.isArray(args.items) ? args.items : []; + const items = rawItems + .map((item, index): AskInputItem | null => { + if (!item || typeof item !== "object" || Array.isArray(item)) return null; + const row = item as Record<string, unknown>; + const id = + cleanAskInputString(row.id) || + `${row.kind === "documents" ? "documents" : "choice"}-${index + 1}`; + const responsePrefix = cleanAskInputString(row.response_prefix); + + if (row.kind === "documents") { + const rawDocumentTypes = Array.isArray(row.document_types) + ? row.document_types + : []; + const documentTypes = rawDocumentTypes + .filter((type): type is string => typeof type === "string") + .map((type) => type.trim()) + .filter(Boolean) + .map((type) => type.slice(0, 300)) + .slice(0, 8); + return { + id: id.slice(0, 80), + kind: "documents", + document_types: documentTypes, + ...(responsePrefix + ? { response_prefix: responsePrefix.slice(0, 200) } + : {}), + }; + } + + const question = cleanAskInputString( + row.question, + "Please choose an option.", + ); + const rawOptions = Array.isArray(row.options) ? row.options : []; + const options = rawOptions + .map((option): AskInputOption | null => { + if (!option || typeof option !== "object") return null; + const optionRow = option as Record<string, unknown>; + const value = + cleanAskInputString(optionRow.value) || + cleanAskInputString(optionRow.label); + if (!value) return null; + return { + value: value.slice(0, 500), + }; + }) + .filter((option): option is AskInputOption => !!option) + .slice(0, 8); + const normalizedOptions = + options.length > 0 ? options : [{ value: "Continue" }]; + const otherLabel = cleanAskInputString(row.other_label, "Other"); + return { + id: id.slice(0, 80), + kind: "choice", + question: question.slice(0, 500), + options: normalizedOptions, + allow_other: row.allow_other !== false, + other_label: otherLabel.slice(0, 80), + ...(responsePrefix + ? { response_prefix: responsePrefix.slice(0, 200) } + : {}), + }; + }) + .filter((item): item is AskInputItem => !!item) + .slice(0, 12); + + return { type: "ask_inputs", items }; +} + +function upsertCourtlistenerCases( + state: CourtlistenerTurnState, + inputs: CourtlistenerCaseInput[], +): CourtlistenerCaseRecord[] { + const records: CourtlistenerCaseRecord[] = []; + for (const input of inputs) { + if (typeof input.clusterId !== "number" || !Number.isFinite(input.clusterId)) { + continue; + } + const clusterId = Math.floor(input.clusterId); + const current = + state.casesByClusterId.get(clusterId) ?? + { + clusterId, + caseName: null, + citations: [], + url: null, + pdfUrl: null, + dateFiled: null, + }; + const nextCitations = [ + ...current.citations, + ...(input.citation ? [input.citation] : []), + ...(input.citations ?? []), + ] + .map(nonEmpty) + .filter((value): value is string => !!value); + const record: CourtlistenerCaseRecord = { + ...current, + caseName: current.caseName ?? nonEmpty(input.caseName), + citations: Array.from(new Set(nextCitations)), + url: current.url ?? nonEmpty(input.url), + pdfUrl: current.pdfUrl ?? nonEmpty(input.pdfUrl), + dateFiled: current.dateFiled ?? nonEmpty(input.dateFiled), + opinions: current.opinions ?? input.opinions, + }; + state.casesByClusterId.set(clusterId, record); + records.push(record); + } + return records; +} + +function caseCitationEventFromRecord( + record: CourtlistenerCaseRecord, +): CaseCitationEvent | null { + if (!record.url) return null; + return { + type: "case_citation", + cluster_id: record.clusterId, + case_name: record.caseName, + citation: record.citations[0] ?? null, + url: record.url, + pdfUrl: record.pdfUrl, + dateFiled: record.dateFiled, + }; +} + +function recordFromUnknown(value: unknown): Record<string, unknown> | null { + return value && typeof value === "object" && !Array.isArray(value) + ? (value as Record<string, unknown>) + : null; +} + +function stringField( + record: Record<string, unknown> | null, + key: string, +): string | null { + const value = record?.[key]; + return typeof value === "string" ? value : null; +} + +function numberField( + record: Record<string, unknown> | null, + key: string, +): number | null { + const value = record?.[key]; + return typeof value === "number" && Number.isFinite(value) + ? Math.floor(value) + : null; +} + +function stringArrayField( + record: Record<string, unknown> | null, + key: string, +): string[] { + const value = record?.[key]; + return Array.isArray(value) + ? value.filter((item): item is string => typeof item === "string") + : []; +} + +function courtlistenerCaseInputFromFetchedCase( + fallbackClusterId: number, + fetchedCase: unknown, +): CourtlistenerCaseInput { + const record = recordFromUnknown(fetchedCase); + const clusterId = + numberField(record, "clusterId") ?? numberField(record, "id") ?? fallbackClusterId; + return { + clusterId, + caseName: stringField(record, "caseName"), + citations: stringArrayField(record, "citations"), + url: stringField(record, "url"), + pdfUrl: stringField(record, "pdfUrl"), + dateFiled: stringField(record, "dateFiled"), + opinions: Array.isArray(record?.opinions) ? record.opinions : undefined, + }; +} + +function courtlistenerOpinionCount(fetchedCase: unknown): number { + const record = recordFromUnknown(fetchedCase); + return Array.isArray(record?.opinions) ? record.opinions.length : 0; +} + +function courtlistenerOpinionMetadata(raw: unknown) { + const opinion = recordFromUnknown(raw); + if (!opinion) return null; + const text = + stringField(opinion, "text") ?? + (stringField(opinion, "html") + ? stripCaseOpinionHtml(stringField(opinion, "html")!) + : null); + return { + opinion_id: + numberField(opinion, "opinionId") ?? numberField(opinion, "id"), + type: stringField(opinion, "type"), + author: stringField(opinion, "author"), + per_curiam: stringField(opinion, "per_curiam"), + joined_by_str: stringField(opinion, "joined_by_str"), + url: stringField(opinion, "url"), + char_count: text?.length ?? 0, + }; +} + +function courtlistenerFetchedCaseMetadata( + record: CourtlistenerCaseRecord, + opinionCount: number, +) { + return { + cluster_id: record.clusterId, + case_name: record.caseName, + citation: record.citations[0] ?? null, + citations: record.citations, + dateFiled: record.dateFiled, + url: record.url, + pdfUrl: record.pdfUrl, + opinion_count: opinionCount, + opinions: (record.opinions ?? []) + .map(courtlistenerOpinionMetadata) + .filter((opinion): opinion is NonNullable<typeof opinion> => !!opinion), + }; +} + +function stripCaseOpinionHtml(value: string): string { + return value + .replace(/<style[\s\S]*?<\/style>/gi, " ") + .replace(/<script[\s\S]*?<\/script>/gi, " ") + .replace(/<[^>]+>/g, " ") + .replace(/ /g, " ") + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, '"') + .replace(/'/g, "'") + .replace(/\s+/g, " ") + .trim(); +} + +type CachedCaseOpinionText = { + opinion_id: number | null; + type: string | null; + author: string | null; + url: string | null; + text: string; +}; + +function cachedCaseOpinionTexts( + record: CourtlistenerCaseRecord, +): CachedCaseOpinionText[] { + return (record.opinions ?? []) + .map((raw) => { + const opinion = recordFromUnknown(raw); + if (!opinion) return null; + const text = + stringField(opinion, "text") ?? + (stringField(opinion, "html") + ? stripCaseOpinionHtml(stringField(opinion, "html")!) + : null); + if (!text) return null; + return { + opinion_id: + numberField(opinion, "opinionId") ?? numberField(opinion, "id"), + type: stringField(opinion, "type"), + author: stringField(opinion, "author"), + url: stringField(opinion, "url"), + text, + }; + }) + .filter((opinion): opinion is CachedCaseOpinionText => !!opinion); +} + +function requestedCourtlistenerOpinionIds(args: Record<string, unknown>) { + const rawIds = Array.isArray(args.opinionIds) + ? args.opinionIds + : Array.isArray(args.opinion_ids) + ? args.opinion_ids + : typeof args.opinionId === "number" + ? [args.opinionId] + : typeof args.opinion_id === "number" + ? [args.opinion_id] + : []; + return Array.from( + new Set( + rawIds + .filter((value): value is number => typeof value === "number") + .filter((value) => Number.isFinite(value) && value > 0) + .map((value) => Math.floor(value)), + ), + ); +} + +type FindInCaseArgs = { + clusterId: number | null; + query: string; + maxResults: number; + contextChars: number; +}; + +function parseFindInCaseArgs(args: Record<string, unknown>): FindInCaseArgs { + return { + clusterId: + typeof args.clusterId === "number" && Number.isFinite(args.clusterId) + ? Math.floor(args.clusterId) + : typeof args.cluster_id === "number" && Number.isFinite(args.cluster_id) + ? Math.floor(args.cluster_id) + : null, + query: typeof args.query === "string" ? args.query : "", + maxResults: + typeof args.max_results === "number" + ? Math.max(0, Math.floor(args.max_results)) + : 20, + contextChars: + typeof args.context_chars === "number" + ? Math.max(0, Math.floor(args.context_chars)) + : 160, + }; +} + +function findInCaseSearchSummary( + event: Extract<CourtlistenerToolEvent, { type: "courtlistener_find_in_case" }>, +) { + return { + cluster_id: event.cluster_id, + query: event.query, + total_matches: event.total_matches, + case_name: event.case_name, + citation: event.citation, + error: event.error, + }; +} + +function cachedCaseNotFetchedResult(clusterId: number | null) { + return { + ok: false, + cluster_id: clusterId, + error: + "Case has not been fetched in this turn. Call courtlistener_get_cases first.", + }; +} + +export async function runToolCalls( + toolCalls: ToolCall[], + docStore: DocStore, + userId: string, + db: ReturnType<typeof createServerSupabase>, + write: (s: string) => void, + workflowStore?: WorkflowStore, + tabularStore?: TabularCellStore, + docIndex?: DocIndex, + turnEditState?: TurnEditState, + turnReadState?: TurnReadState, + projectId?: string | null, + courtlistenerState?: CourtlistenerTurnState, + apiKeys?: import("../../llm").UserApiKeys, +): Promise<{ + toolResults: unknown[]; + docsRead: { filename: string; document_id?: string }[]; + docsFound: { filename: string; query: string; total_matches: number }[]; + docsCreated: DocCreatedResult[]; + docsReplicated: DocReplicatedResult[]; + workflowsApplied: { workflow_id: string; title: string }[]; + docsEdited: DocEditedResult[]; + askInputsEvents: AskInputsEvent[]; + courtlistenerEvents: CourtlistenerToolEvent[]; + caseCitationEvents: CaseCitationEvent[]; + mcpEvents: McpToolEvent[]; +}> { + const toolResults: unknown[] = []; + const docsRead: { filename: string; document_id?: string }[] = []; + const docsFound: { + filename: string; + query: string; + total_matches: number; + }[] = []; + const docsCreated: DocCreatedResult[] = []; + const docsReplicated: DocReplicatedResult[] = []; + const workflowsApplied: { workflow_id: string; title: string }[] = []; + const docsEdited: DocEditedResult[] = []; + const askInputsEvents: AskInputsEvent[] = []; + const courtlistenerEvents: CourtlistenerToolEvent[] = []; + const caseCitationEvents: CaseCitationEvent[] = []; + const mcpEvents: McpToolEvent[] = []; + const courtState: CourtlistenerTurnState = + courtlistenerState ?? + { + casesByClusterId: new Map(), + }; + const groupedFindInCaseSearches = toolCalls + .filter((tc) => tc.function.name === COURTLISTENER_TOOL_NAMES.findInCase) + .map((tc) => { + let rawArgs: Record<string, unknown> = {}; + try { + rawArgs = JSON.parse(tc.function.arguments || "{}"); + } catch { + /* ignore */ + } + const parsed = parseFindInCaseArgs(rawArgs); + return { + cluster_id: parsed.clusterId, + query: parsed.query, + total_matches: 0, + }; + }); + const shouldGroupFindInCase = groupedFindInCaseSearches.length > 1; + let groupedFindInCaseStarted = false; + const groupedFindInCaseEvents: Extract< + CourtlistenerToolEvent, + { type: "courtlistener_find_in_case" } + >[] = []; + + const registerGeneratedDocument = ( + tc: ToolCall, + result: Record<string, unknown>, + previewFilename: string, + fileType: string, + ) => { + let newDocLabel: string | null = null; + if ("filename" in result && "download_url" in result) { + const dlFilename = result.filename as string; + const dlUrl = result.download_url as string; + const documentId = (result as { document_id?: string }).document_id; + const versionId = (result as { version_id?: string }).version_id; + const versionNumber = + (result as { version_number?: number }).version_number ?? null; + const storagePath = (result as { storage_path?: string }).storage_path; + + if (documentId && storagePath && docIndex) { + const existingLabels = new Set(Object.keys(docIndex)); + let i = 0; + while (existingLabels.has(`doc-${i}`)) i++; + newDocLabel = `doc-${i}`; + docIndex[newDocLabel] = { + document_id: documentId, + filename: dlFilename, + }; + docStore.set(newDocLabel, { + storage_path: storagePath, + file_type: fileType, + filename: dlFilename, + }); + } + + write( + `data: ${JSON.stringify({ + type: "doc_created", + filename: dlFilename, + download_url: dlUrl, + document_id: documentId, + version_id: versionId, + version_number: versionNumber, + })}\n\n`, + ); + docsCreated.push({ + filename: dlFilename, + download_url: dlUrl, + document_id: documentId, + version_id: versionId, + version_number: versionNumber, + }); + } else { + write( + `data: ${JSON.stringify({ type: "doc_created", filename: previewFilename, download_url: "" })}\n\n`, + ); + } + + const { download_url, storage_path, ...safeToolResult } = result; + const toolResultPayload = newDocLabel + ? { + ...safeToolResult, + doc_id: newDocLabel, + next_required_action: [ + `Before writing your final response, call read_document with doc_id "${newDocLabel}".`, + `Base your description on the generated document's actual returned text, not on memory of what you intended to generate.`, + `Do not include download links, URLs, or markdown links to the document in your prose response; the document card is shown automatically by the UI.`, + `Give a concise description of the generated document and, if you make factual claims about its contents, cite it with [N] markers and a final <CITATIONS> block using doc_id "${newDocLabel}", not any source/template document.`, + ].join(" "), + } + : safeToolResult; + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(toolResultPayload), + }); + }; + + for (const tc of toolCalls) { + let args: Record<string, unknown> = {}; + try { + args = JSON.parse(tc.function.arguments || "{}"); + } catch { + /* ignore */ + } + + if (tc.function.name.startsWith("mcp_")) { + write( + `data: ${JSON.stringify({ + type: "mcp_tool_start", + name: tc.function.name, + })}\n\n`, + ); + const { content, event } = await executeMcpToolCall( + userId, + tc.function.name, + args, + db, + ); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content, + }); + mcpEvents.push(event); + write( + `data: ${JSON.stringify({ + type: "mcp_tool_result", + name: tc.function.name, + connector_name: event.connector_name, + tool_name: event.tool_name, + status: event.status, + error: event.error, + })}\n\n`, + ); + continue; + } + + if (tc.function.name === "ask_inputs") { + const event = normalizeAskInputsEvent(args); + if (event.items.length > 0) askInputsEvents.push(event); + continue; + } + + if (tc.function.name === "read_document") { + const rawDocId = args.doc_id as string; + const docId = resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; + const readIdentity = await getTurnReadIdentity({ + docLabel: docId, + docStore, + docIndex, + db, + }); + if (readIdentity && turnReadState?.has(readIdentity.key)) { + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: duplicateReadDocumentResult(readIdentity), + }); + continue; + } + const content = await readDocumentContent( + docId, + docStore, + write, + docIndex, + db, + ); + const filename = docStore.get(docId)?.filename; + const documentId = docIndex?.[docId]?.document_id; + if (readIdentity && turnReadState) { + turnReadState.set(readIdentity.key, readIdentity); + } + if (filename) docsRead.push({ filename, document_id: documentId }); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: filename + ? `${citationReminder(docId, filename)}\n\n${content}` + : content, + }); + } else if (tc.function.name === "find_in_document") { + const rawDocId = args.doc_id as string; + const docId = resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; + const query = (args.query as string) ?? ""; + const maxResults = + typeof args.max_results === "number" ? args.max_results : undefined; + const contextChars = + typeof args.context_chars === "number" ? args.context_chars : undefined; + const content = await findInDocumentContent({ + docLabel: docId, + query, + maxResults, + contextChars, + docStore, + write, + docIndex, + db, + }); + const filename = docStore.get(docId)?.filename; + if (filename) { + let totalMatches = 0; + try { + const parsed = JSON.parse(content) as { + total_matches?: number; + }; + totalMatches = parsed.total_matches ?? 0; + } catch { + /* ignore — still record the find attempt */ + } + docsFound.push({ + filename, + query, + total_matches: totalMatches, + }); + } + toolResults.push({ role: "tool", tool_call_id: tc.id, content }); + } else if (tc.function.name === "list_documents") { + const list = Array.from(docStore.entries()).map(([doc_id, info]) => ({ + doc_id, + filename: info.filename, + file_type: info.file_type, + })); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(list), + }); + } else if (tc.function.name === "fetch_documents") { + const rawDocIds = (args.doc_ids as string[]) ?? []; + const docIds = rawDocIds.map( + (id) => resolveDocLabel(id, docStore, docIndex) ?? id, + ); + const parts: string[] = []; + for (const docId of docIds) { + const readIdentity = await getTurnReadIdentity({ + docLabel: docId, + docStore, + docIndex, + db, + }); + if (readIdentity && turnReadState?.has(readIdentity.key)) { + const filename = docStore.get(docId)?.filename ?? docId; + parts.push( + `--- ${filename} (${docId}) ---\n${duplicateReadDocumentResult( + readIdentity, + )}`, + ); + continue; + } + const content = await readDocumentContent( + docId, + docStore, + write, + docIndex, + db, + ); + const filename = docStore.get(docId)?.filename ?? docId; + if (readIdentity && turnReadState) { + turnReadState.set(readIdentity.key, readIdentity); + } + parts.push( + `--- ${filename} (${docId}) ---\n${citationReminder(docId, filename)}\n\n${content}`, + ); + if (docStore.get(docId)) { + const documentId = docIndex?.[docId]?.document_id; + docsRead.push({ filename, document_id: documentId }); + } + } + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: parts.join("\n\n"), + }); + } else if (tc.function.name === "list_workflows") { + const list = workflowStore + ? Array.from(workflowStore.entries()).map(([id, w]) => ({ + id, + title: w.title, + })) + : []; + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(list), + }); + } else if (tc.function.name === "read_workflow") { + const wfId = args.workflow_id as string; + const wf = workflowStore?.get(wfId); + if (wf) { + write( + `data: ${JSON.stringify({ type: "workflow_applied", workflow_id: wfId, title: wf.title })}\n\n`, + ); + workflowsApplied.push({ workflow_id: wfId, title: wf.title }); + } + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: wf ? wf.prompt_md : `Workflow '${wfId}' not found.`, + }); + } else if (tc.function.name === "read_table_cells" && tabularStore) { + const colIndices = args.col_indices as number[] | undefined; + const rowIndices = args.row_indices as number[] | undefined; + + const filteredCols = colIndices?.length + ? tabularStore.columns.filter((_, i) => colIndices.includes(i)) + : tabularStore.columns; + const filteredDocs = rowIndices?.length + ? tabularStore.documents.filter((_, i) => rowIndices.includes(i)) + : tabularStore.documents; + + const label = `${filteredCols.length} ${filteredCols.length === 1 ? "column" : "columns"} × ${filteredDocs.length} ${filteredDocs.length === 1 ? "row" : "rows"}`; + write( + `data: ${JSON.stringify({ type: "doc_read_start", filename: label })}\n\n`, + ); + + const lines: string[] = []; + for (const col of filteredCols) { + const colPos = tabularStore.columns.findIndex( + (c) => c.index === col.index, + ); + for (const doc of filteredDocs) { + const rowPos = tabularStore.documents.findIndex( + (d) => d.id === doc.id, + ); + const cell = tabularStore.cells.get(`${col.index}:${doc.id}`); + lines.push( + `[COL:${colPos} "${col.name}" | ROW:${rowPos} "${doc.filename}"]`, + ); + if (cell?.summary) { + lines.push(`Summary: ${cell.summary}`); + if (cell.flag) lines.push(`Flag: ${cell.flag}`); + if (cell.reasoning) lines.push(`Reasoning: ${cell.reasoning}`); + } else { + lines.push(`(not yet generated)`); + } + lines.push(""); + } + } + + write( + `data: ${JSON.stringify({ type: "doc_read", filename: label })}\n\n`, + ); + docsRead.push({ filename: label }); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: lines.join("\n") || "No cells found.", + }); + } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.searchCaseLaw) { + const query = typeof args.query === "string" ? args.query : ""; + write( + `data: ${JSON.stringify({ type: "courtlistener_search_case_law_start", query })}\n\n`, + ); + try { + const result = await searchCourtlistenerCaseLaw({ + query: query || undefined, + court: typeof args.court === "string" ? args.court : undefined, + filedAfter: + typeof args.filedAfter === "string" ? args.filedAfter : undefined, + filedBefore: + typeof args.filedBefore === "string" ? args.filedBefore : undefined, + limit: typeof args.limit === "number" ? args.limit : undefined, + apiToken: apiKeys?.courtlistener, + }); + const resultCount = + result && + typeof result === "object" && + Array.isArray((result as { results?: unknown }).results) + ? (result as { results: unknown[] }).results.length + : 0; + const error = + result && + typeof result === "object" && + typeof (result as { error?: unknown }).error === "string" + ? (result as { error: string }).error + : undefined; + const event: CourtlistenerToolEvent = { + type: "courtlistener_search_case_law", + query, + result_count: resultCount, + ...(error ? { error } : {}), + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(result), + }); + } catch (err) { + const event: CourtlistenerToolEvent = { + type: "courtlistener_search_case_law", + query, + result_count: 0, + error: + err instanceof Error ? err.message : "CourtListener search failed.", + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + error: + err instanceof Error + ? err.message + : "CourtListener search failed.", + }), + }); + } + } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.getCases) { + const rawClusterIds = Array.isArray(args.clusterIds) + ? args.clusterIds + : Array.isArray(args.cluster_ids) + ? args.cluster_ids + : typeof args.clusterId === "number" + ? [args.clusterId] + : []; + const clusterIds = Array.from( + new Set( + rawClusterIds + .filter((value): value is number => typeof value === "number") + .filter((value) => Number.isFinite(value) && value > 0) + .map((value) => Math.floor(value)), + ), + ); + write( + `data: ${JSON.stringify({ type: "courtlistener_get_cases_start", cluster_ids: clusterIds })}\n\n`, + ); + try { + const result = await getCourtlistenerCases({ + clusterIds, + db, + apiToken: apiKeys?.courtlistener, + }); + const fetchedCases = + result && + typeof result === "object" && + Array.isArray((result as { cases?: unknown }).cases) + ? (result as { cases: unknown[] }).cases + : []; + fetchedCases.forEach((fetchedCase, index) => { + const clusterId = + courtlistenerCaseInputFromFetchedCase( + clusterIds[index] ?? 0, + fetchedCase, + ).clusterId ?? 0; + if (clusterId) { + write( + `data: ${JSON.stringify({ type: "case_opinions", cluster_id: clusterId, case: fetchedCase })}\n\n`, + ); + } + }); + const caseRecords = upsertCourtlistenerCases( + courtState, + fetchedCases.map((fetchedCase, index) => + courtlistenerCaseInputFromFetchedCase( + clusterIds[index] ?? 0, + fetchedCase, + ), + ), + ); + const opinionCount = fetchedCases.reduce<number>( + (sum, fetchedCase) => sum + courtlistenerOpinionCount(fetchedCase), + 0, + ); + const caseOpinionCountByClusterId = new Map<number, number>(); + fetchedCases.forEach((fetchedCase, index) => { + const clusterId = + courtlistenerCaseInputFromFetchedCase( + clusterIds[index] ?? 0, + fetchedCase, + ).clusterId ?? 0; + if (clusterId) { + caseOpinionCountByClusterId.set( + clusterId, + courtlistenerOpinionCount(fetchedCase), + ); + } + }); + const errors = fetchedCases + .map((fetchedCase) => + stringField(recordFromUnknown(fetchedCase), "error"), + ) + .filter((error): error is string => !!error); + const resultError = + result && + typeof result === "object" && + typeof (result as { error?: unknown }).error === "string" + ? (result as { error: string }).error + : undefined; + const hasMultipleOpinionCase = caseRecords.some( + (record) => + (caseOpinionCountByClusterId.get(record.clusterId) ?? 0) > 1, + ); + const event: CourtlistenerToolEvent = { + type: "courtlistener_get_cases", + cluster_ids: clusterIds, + case_count: fetchedCases.length, + opinion_count: opinionCount, + cases: caseRecords.map((record) => ({ + cluster_id: record.clusterId, + case_name: record.caseName, + citation: record.citations[0] ?? null, + dateFiled: record.dateFiled, + url: record.url, + })), + ...(resultError || errors.length + ? { error: resultError ?? errors.join("; ") } + : {}), + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + ok: !resultError && errors.length === 0, + cluster_ids: clusterIds, + case_count: fetchedCases.length, + opinion_count: opinionCount, + cases: caseRecords.map((record) => + courtlistenerFetchedCaseMetadata( + record, + caseOpinionCountByClusterId.get(record.clusterId) ?? 0, + ), + ), + ...(resultError || errors.length + ? { error: resultError ?? errors.join("; ") } + : {}), + next_required_action: hasMultipleOpinionCase + ? "Opinion text is cached server-side only. Use courtlistener_find_in_case with short 1-3 word keyword probes for relevant passages. At least one fetched case has multiple opinions; if snippets are insufficient, choose the needed opinion_id(s) from the text-free opinion metadata and call courtlistener_read_case with only those IDs. Do not read all opinions unless the question requires it." + : "Opinion text is cached server-side only. Use courtlistener_find_in_case with short 1-3 word keyword probes for relevant passages, or courtlistener_read_case if snippets are insufficient.", + }), + }); + } catch (err) { + const event: CourtlistenerToolEvent = { + type: "courtlistener_get_cases", + cluster_ids: clusterIds, + case_count: 0, + opinion_count: 0, + error: + err instanceof Error + ? err.message + : "CourtListener case fetch failed.", + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + error: + err instanceof Error + ? err.message + : "CourtListener case fetch failed.", + }), + }); + } + } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.findInCase) { + const { clusterId, query, maxResults, contextChars } = + parseFindInCaseArgs(args); + if (shouldGroupFindInCase) { + if (!groupedFindInCaseStarted) { + write( + `data: ${JSON.stringify({ + type: "courtlistener_find_in_case_start", + cluster_id: null, + query: "", + searches: groupedFindInCaseSearches, + })}\n\n`, + ); + groupedFindInCaseStarted = true; + } + } else { + write( + `data: ${JSON.stringify({ type: "courtlistener_find_in_case_start", cluster_id: clusterId, query })}\n\n`, + ); + } + + const record = + typeof clusterId === "number" ? courtState.casesByClusterId.get(clusterId) : undefined; + if (!record) { + const payload = cachedCaseNotFetchedResult(clusterId); + const event: CourtlistenerToolEvent = { + type: "courtlistener_find_in_case", + cluster_id: clusterId, + query, + total_matches: 0, + error: payload.error, + }; + if (shouldGroupFindInCase) { + groupedFindInCaseEvents.push(event); + } else { + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + } + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(payload), + }); + continue; + } + + const opinions = cachedCaseOpinionTexts(record); + const hits: Array< + TextMatch & { + opinion_id: number | null; + type: string | null; + author: string | null; + url: string | null; + } + > = []; + let totalMatches = 0; + for (const opinion of opinions) { + const remaining = Math.max(0, maxResults - hits.length); + const result = findTextMatches({ + text: opinion.text, + query, + maxResults: remaining, + contextChars, + startIndex: hits.length, + }); + totalMatches += result.totalMatches; + hits.push( + ...result.hits.map((hit) => ({ + ...hit, + opinion_id: opinion.opinion_id, + type: opinion.type, + author: opinion.author, + url: opinion.url, + })), + ); + } + + const event: CourtlistenerToolEvent = { + type: "courtlistener_find_in_case", + cluster_id: record.clusterId, + query, + total_matches: totalMatches, + case_name: record.caseName, + citation: record.citations[0] ?? null, + }; + if (shouldGroupFindInCase) { + groupedFindInCaseEvents.push(event); + } else { + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + } + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + ok: true, + cluster_id: record.clusterId, + case_name: record.caseName, + citation: record.citations[0] ?? null, + query, + total_matches: totalMatches, + returned: hits.length, + truncated: totalMatches > hits.length, + hits, + }), + }); + } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.readCase) { + const clusterId = + typeof args.clusterId === "number" && Number.isFinite(args.clusterId) + ? Math.floor(args.clusterId) + : typeof args.cluster_id === "number" && + Number.isFinite(args.cluster_id) + ? Math.floor(args.cluster_id) + : null; + write( + `data: ${JSON.stringify({ type: "courtlistener_read_case_start", cluster_id: clusterId })}\n\n`, + ); + + const record = + typeof clusterId === "number" ? courtState.casesByClusterId.get(clusterId) : undefined; + if (!record) { + const payload = cachedCaseNotFetchedResult(clusterId); + const event: CourtlistenerToolEvent = { + type: "courtlistener_read_case", + cluster_id: clusterId, + opinion_count: 0, + error: payload.error, + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(payload), + }); + continue; + } + + const opinions = cachedCaseOpinionTexts(record); + const requestedOpinionIds = requestedCourtlistenerOpinionIds(args); + const selectedOpinions = + requestedOpinionIds.length > 0 + ? opinions.filter( + (opinion) => + typeof opinion.opinion_id === "number" && + requestedOpinionIds.includes(opinion.opinion_id), + ) + : opinions.length === 1 + ? opinions + : []; + if (!selectedOpinions.length) { + const multipleOpinions = opinions.length > 1; + const payload = { + ok: false, + cluster_id: record.clusterId, + case_name: record.caseName, + citations: record.citations, + url: record.url, + dateFiled: record.dateFiled, + opinion_count: opinions.length, + opinions: (record.opinions ?? []) + .map(courtlistenerOpinionMetadata) + .filter( + (opinion): opinion is NonNullable<typeof opinion> => + !!opinion, + ), + error: multipleOpinions + ? "Multiple opinions are available. Call courtlistener_read_case again with the opinionId or opinionIds needed." + : "No matching opinion_id was found for this fetched case.", + }; + const event: CourtlistenerToolEvent = { + type: "courtlistener_read_case", + cluster_id: record.clusterId, + case_name: record.caseName, + citation: record.citations[0] ?? null, + opinion_count: 0, + error: payload.error, + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(payload), + }); + continue; + } + + const event: CourtlistenerToolEvent = { + type: "courtlistener_read_case", + cluster_id: record.clusterId, + case_name: record.caseName, + citation: record.citations[0] ?? null, + opinion_count: selectedOpinions.length, + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + ok: true, + cluster_id: record.clusterId, + case_name: record.caseName, + citations: record.citations, + url: record.url, + dateFiled: record.dateFiled, + opinion_count: opinions.length, + returned_opinion_count: selectedOpinions.length, + opinions: selectedOpinions, + }), + }); + } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.verifyCitations) { + const citations = Array.isArray(args.citations) + ? args.citations.filter( + (value): value is string => typeof value === "string", + ) + : []; + const citationCount = citations.length; + write( + `data: ${JSON.stringify({ type: "courtlistener_verify_citations_start", citation_count: citationCount })}\n\n`, + ); + try { + const result = (await verifyCourtlistenerCitations({ + citations, + db, + apiToken: apiKeys?.courtlistener, + })) as { + citationLinks?: { + clusterId?: number | null; + citation?: string | null; + caseName?: string | null; + dateFiled?: string | null; + pdfUrl?: string | null; + url?: string | null; + markdown?: string; + }[]; + results?: unknown[]; + error?: string; + source?: string; + [key: string]: unknown; + }; + if (Array.isArray(result.citationLinks)) { + const caseRecords = upsertCourtlistenerCases( + courtState, + result.citationLinks.map((link) => ({ + clusterId: link.clusterId, + caseName: link.caseName, + citation: link.citation, + url: link.url, + pdfUrl: link.pdfUrl, + dateFiled: link.dateFiled, + })), + ); + const recordsByClusterId = new Map( + caseRecords.map((record) => [record.clusterId, record]), + ); + result.citationLinks = result.citationLinks.map((link) => { + if (!link.url) return link; + const href = + typeof link.clusterId === "number" + ? `us-case-${link.clusterId}` + : link.url; + const label = [link.caseName, link.citation] + .filter(Boolean) + .join(", "); + const record = + typeof link.clusterId === "number" + ? recordsByClusterId.get(link.clusterId) + : undefined; + if (record) { + const event = caseCitationEventFromRecord(record); + if (event) { + caseCitationEvents.push(event); + write(`data: ${JSON.stringify(event)}\n\n`); + } + } + return { + ...link, + markdown: `[${label || link.url}](${href})`, + }; + }); + } + const rows = + result && + typeof result === "object" && + Array.isArray((result as { results?: unknown }).results) + ? (result as { results: unknown[] }).results + : []; + const matchCount = rows.reduce<number>((count, row) => { + if (!row || typeof row !== "object") return count; + const clusters = (row as { clusters?: unknown }).clusters; + return count + (Array.isArray(clusters) ? clusters.length : 0); + }, 0); + const error = + result && + typeof result === "object" && + typeof (result as { error?: unknown }).error === "string" + ? (result as { error: string }).error + : undefined; + const event: CourtlistenerToolEvent = { + type: "courtlistener_verify_citations", + citation_count: citationCount, + match_count: matchCount, + ...(error ? { error } : {}), + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify(result), + }); + } catch (err) { + const event: CourtlistenerToolEvent = { + type: "courtlistener_verify_citations", + citation_count: citationCount, + match_count: 0, + error: + err instanceof Error + ? err.message + : "CourtListener citation lookup failed.", + }; + write(`data: ${JSON.stringify(event)}\n\n`); + courtlistenerEvents.push(event); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + error: + err instanceof Error + ? err.message + : "CourtListener citation lookup failed.", + }), + }); + } + } else if (tc.function.name === "edit_document" && docIndex) { + const rawDocId = args.doc_id as string; + const editsRaw = args.edits as unknown[] | undefined; + const docId = resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; + const docInfo = docStore.get(docId); + const indexed = docIndex?.[docId]; + + const emitEditError = ( + filename: string, + documentId: string, + error: string, + ) => { + // Surface the failure as a failed "Edited" block in the UI + // (start → done-with-error) so it matches the shape the + // success/late-failure paths already use. + write( + `data: ${JSON.stringify({ + type: "doc_edited_start", + filename, + })}\n\n`, + ); + write( + `data: ${JSON.stringify({ + type: "doc_edited", + filename, + document_id: documentId, + version_id: "", + download_url: "", + annotations: [], + error, + })}\n\n`, + ); + }; + + if (!docInfo || !indexed) { + const err = `Document '${docId}' not found in this chat's attachments.`; + emitEditError(docId, indexed?.document_id ?? "", err); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ error: err }), + }); + } else if (!Array.isArray(editsRaw) || editsRaw.length === 0) { + const err = "edits array is required and must not be empty."; + emitEditError(docInfo.filename, indexed.document_id, err); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ error: err }), + }); + } else if (docInfo.file_type !== "docx") { + const err = "edit_document only supports .docx files."; + emitEditError(docInfo.filename, indexed.document_id, err); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ error: err }), + }); + } else { + write( + `data: ${JSON.stringify({ + type: "doc_edited_start", + filename: docInfo.filename, + })}\n\n`, + ); + const edits: EditInput[] = (editsRaw as Record<string, unknown>[]).map( + (e) => ({ + find: String(e.find ?? ""), + replace: String(e.replace ?? ""), + context_before: String(e.context_before ?? ""), + context_after: String(e.context_after ?? ""), + reason: e.reason ? String(e.reason) : undefined, + }), + ); + const reuseVersion = turnEditState?.get(indexed.document_id); + const result = await runEditDocument({ + documentId: indexed.document_id, + userId, + edits, + db, + reuseVersion, + }); + + if (result.ok) { + turnEditState?.set(indexed.document_id, { + versionId: result.version_id, + versionNumber: result.version_number, + storagePath: result.storage_path, + }); + clearTurnReadsForDocument(turnReadState, indexed.document_id); + // Keep the chat-local doc label pointed at the latest + // edited version so any follow-up read_document call in + // the same assistant turn reads and cites the same bytes. + if (docIndex[docId]) { + docIndex[docId] = { + ...docIndex[docId], + version_id: result.version_id, + version_number: result.version_number, + }; + } + const currentDocStore = docStore.get(docId); + if (currentDocStore) { + docStore.set(docId, { + ...currentDocStore, + storage_path: result.storage_path, + }); + } + const payload: DocEditedResult = { + filename: docInfo.filename, + document_id: indexed.document_id, + version_id: result.version_id, + version_number: result.version_number, + download_url: result.download_url, + annotations: result.annotations, + }; + docsEdited.push(payload); + write( + `data: ${JSON.stringify({ + type: "doc_edited", + ...payload, + })}\n\n`, + ); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + ok: true, + doc_id: docId, + document_id: indexed.document_id, + version_id: result.version_id, + version_number: result.version_number, + applied: result.annotations.length, + errors: result.errors, + next_required_action: [ + `The edited document remains available as doc_id "${docId}".`, + `Before making factual claims about the edited document's final contents, call read_document with doc_id "${docId}" and base the response on that returned text.`, + `Do not include download links or URLs in your prose response; the edited document card is shown automatically by the UI.`, + `If you describe specific content from the edited document, cite it with [N] markers and a final <CITATIONS> block using doc_id "${docId}".`, + ].join(" "), + }), + }); + } else { + write( + `data: ${JSON.stringify({ + type: "doc_edited", + filename: docInfo.filename, + document_id: indexed.document_id, + version_id: "", + download_url: "", + annotations: [], + error: result.error, + })}\n\n`, + ); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + ok: false, + error: result.error, + }), + }); + } + } + } else if (tc.function.name === "replicate_document" && docIndex) { + const rawDocId = args.doc_id as string; + const requestedFilename = + typeof args.new_filename === "string" && args.new_filename.trim() + ? args.new_filename.trim() + : null; + const requestedCount = + typeof args.count === "number" && Number.isFinite(args.count) + ? Math.max(1, Math.min(20, Math.floor(args.count))) + : 1; + const sourceLabel = + resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; + const sourceInfo = docStore.get(sourceLabel); + const sourceIndexed = docIndex[sourceLabel]; + const sourceFilename = sourceInfo?.filename ?? rawDocId; + + write( + `data: ${JSON.stringify({ + type: "doc_replicate_start", + filename: sourceFilename, + count: requestedCount, + })}\n\n`, + ); + + const fail = (error: string) => { + write( + `data: ${JSON.stringify({ + type: "doc_replicated", + filename: sourceFilename, + count: requestedCount, + copies: [], + error, + })}\n\n`, + ); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ ok: false, error }), + }); + }; + + if (!sourceInfo || !sourceIndexed) { + fail(`Document '${rawDocId}' not found in this project.`); + } else if (!projectId) { + fail("replicate_document is only available in project chats."); + } else { + try { + // Pull the active version once — every copy gets the + // same starting bytes (with any accepted tracked + // changes rolled in), no point re-fetching per copy. + const active = await loadActiveVersion(sourceIndexed.document_id, db); + const sourcePath = active?.storage_path ?? sourceInfo.storage_path; + const sourcePdfPath = active?.pdf_storage_path ?? null; + const raw = await downloadFile(sourcePath); + const pdfBytes = sourcePdfPath + ? await downloadFile(sourcePdfPath) + : null; + if (!raw) { + fail("Could not read the source document's bytes from storage."); + } else { + // Build N filenames. With count=1 keep the + // pre-existing "(copy)" suffix; with count>1 use + // numbered "(1)", "(2)" suffixes. + const srcExt = sourceInfo.filename.match(/\.[^./\\]+$/)?.[0] ?? ""; + const baseStem = (() => { + if (requestedFilename) { + return requestedFilename.replace(/\.[^./\\]+$/, ""); + } + return sourceInfo.filename.replace(/\.[^./\\]+$/, ""); + })(); + const filenames: string[] = []; + for (let n = 1; n <= requestedCount; n++) { + const suffix = + requestedCount === 1 + ? requestedFilename + ? "" + : " (copy)" + : ` (${n})`; + filenames.push(`${baseStem}${suffix}${srcExt}`); + } + + // Bulk insert N documents in one round-trip. + const docRows = filenames.map((fn) => ({ + project_id: projectId, + user_id: userId, + status: "ready", + })); + const { data: insertedDocs, error: docErr } = await db + .from("documents") + .insert(docRows) + .select("id"); + if (docErr || !insertedDocs || insertedDocs.length === 0) { + fail( + `Failed to record replicated documents: ${docErr?.message ?? "unknown"}`, + ); + } else { + // Preserve the request order so each row pairs + // with the right filename. Supabase returns + // inserted rows in the same order as the + // payload. + const newDocs = (insertedDocs as { id: string }[]).map( + (doc, idx) => ({ + ...doc, + filename: filenames[idx] ?? "Untitled document.docx", + }), + ); + const contentType = contentTypeForDocumentType( + sourceInfo.file_type, + ); + + // Parallel uploads: the doc bytes (and PDF + // rendition if any) for every new copy. + const uploadJobs: Promise<unknown>[] = []; + const newKeys: string[] = []; + const newPdfKeys: (string | null)[] = []; + for (const d of newDocs) { + const key = storageKey(userId, d.id, d.filename); + newKeys.push(key); + uploadJobs.push(uploadFile(key, raw, contentType)); + if (pdfBytes) { + const pdfKey = convertedPdfKey(userId, d.id); + newPdfKeys.push(pdfKey); + uploadJobs.push( + uploadFile(pdfKey, pdfBytes, "application/pdf"), + ); + } else { + newPdfKeys.push(null); + } + } + await Promise.all(uploadJobs); + + // Bulk insert N versions in one round-trip. + const versionRows = newDocs.map((d, idx) => ({ + document_id: d.id, + storage_path: newKeys[idx], + pdf_storage_path: newPdfKeys[idx], + source: "upload", + version_number: 1, + filename: d.filename, + file_type: active?.file_type ?? sourceInfo.file_type, + size_bytes: active?.size_bytes ?? raw.byteLength, + page_count: active?.page_count ?? null, + })); + const { data: insertedVersions, error: verErr } = await db + .from("document_versions") + .insert(versionRows) + .select("id, document_id"); + if ( + verErr || + !insertedVersions || + insertedVersions.length !== newDocs.length + ) { + fail( + `Failed to record replicated document versions: ${verErr?.message ?? "unknown"}`, + ); + } else { + const versionByDocId = new Map<string, string>(); + for (const v of insertedVersions as { + id: string; + document_id: string; + }[]) { + versionByDocId.set(v.document_id, v.id); + } + + // current_version_id has to be a per-row + // value, so a single UPDATE statement + // can't cover all N. Fan out in parallel + // instead of sequential awaits. + await Promise.all( + newDocs.map((d) => + db + .from("documents") + .update({ + current_version_id: versionByDocId.get(d.id), + }) + .eq("id", d.id), + ), + ); + + // Register every copy under a fresh doc-N + // slug so the model can edit/read any of + // them in the same turn. + const existingLabels = new Set(Object.keys(docIndex)); + let nextLabelIdx = 0; + const copies: { + new_filename: string; + document_id: string; + version_id: string; + }[] = []; + const toolPayloadCopies: { + doc_id: string; + document_id: string; + version_id: string; + filename: string; + download_url: string; + }[] = []; + for (let idx = 0; idx < newDocs.length; idx++) { + const d = newDocs[idx]; + const newKey = newKeys[idx]; + const versionId = versionByDocId.get(d.id); + if (!versionId) continue; + while (existingLabels.has(`doc-${nextLabelIdx}`)) + nextLabelIdx++; + const slug = `doc-${nextLabelIdx}`; + existingLabels.add(slug); + docIndex[slug] = { + document_id: d.id, + filename: d.filename, + }; + docStore.set(slug, { + storage_path: newKey, + file_type: sourceInfo.file_type, + filename: d.filename, + }); + copies.push({ + new_filename: d.filename, + document_id: d.id, + version_id: versionId, + }); + toolPayloadCopies.push({ + doc_id: slug, + document_id: d.id, + version_id: versionId, + filename: d.filename, + download_url: buildDownloadUrl(newKey, d.filename), + }); + } + + write( + `data: ${JSON.stringify({ + type: "doc_replicated", + filename: sourceFilename, + count: copies.length, + copies, + })}\n\n`, + ); + docsReplicated.push({ + filename: sourceFilename, + count: copies.length, + copies, + }); + toolResults.push({ + role: "tool", + tool_call_id: tc.id, + content: JSON.stringify({ + ok: true, + count: copies.length, + copies: toolPayloadCopies, + }), + }); + } + } + } + } catch (e) { + fail(`replicate_document failed: ${String(e)}`); + } + } + } else if (tc.function.name === "generate_docx") { + const title = args.title as string; + const landscape = !!args.landscape; + devLog( + `[generate_docx] title="${title}" landscape=${landscape} args.landscape=${args.landscape}`, + ); + const previewFilename = safeGeneratedFilename(title, "docx"); + write( + `data: ${JSON.stringify({ type: "doc_created_start", filename: previewFilename })}\n\n`, + ); + const result = await generateDocx( + title, + args.sections as unknown[], + userId, + db, + { landscape, projectId: projectId ?? null }, + ); + registerGeneratedDocument( + tc, + result as Record<string, unknown>, + previewFilename, + "docx", + ); + } else if (tc.function.name === "generate_excel") { + const title = args.title as string; + devLog(`[generate_excel] title="${title}"`); + const previewFilename = safeGeneratedFilename(title, "xlsx"); + write( + `data: ${JSON.stringify({ type: "doc_created_start", filename: previewFilename })}\n\n`, + ); + const result = await generateExcel( + title, + args.sheets as unknown[], + userId, + db, + { projectId: projectId ?? null }, + ); + registerGeneratedDocument( + tc, + result as Record<string, unknown>, + previewFilename, + "xlsx", + ); + } else if (tc.function.name === "generate_ppt") { + const title = args.title as string; + devLog(`[generate_ppt] title="${title}"`); + const previewFilename = safeGeneratedFilename(title, "pptx"); + write( + `data: ${JSON.stringify({ type: "doc_created_start", filename: previewFilename })}\n\n`, + ); + const result = await generatePpt( + title, + args.slides as unknown[], + userId, + db, + { projectId: projectId ?? null }, + ); + registerGeneratedDocument( + tc, + result as Record<string, unknown>, + previewFilename, + "pptx", + ); + } + } + + if (shouldGroupFindInCase && groupedFindInCaseEvents.length > 0) { + const errors = groupedFindInCaseEvents + .map((event) => event.error) + .filter((error): error is string => !!error); + const groupEvent: CourtlistenerToolEvent = { + type: "courtlistener_find_in_case", + cluster_id: null, + query: "", + total_matches: groupedFindInCaseEvents.reduce( + (sum, event) => sum + event.total_matches, + 0, + ), + searches: groupedFindInCaseEvents.map(findInCaseSearchSummary), + ...(errors.length ? { error: errors.join("; ") } : {}), + }; + write(`data: ${JSON.stringify(groupEvent)}\n\n`); + courtlistenerEvents.push(groupEvent); + } + + return { + toolResults, + docsRead, + docsFound, + docsCreated, + docsReplicated, + workflowsApplied, + docsEdited, + askInputsEvents, + courtlistenerEvents, + caseCitationEvents, + mcpEvents, + }; +} diff --git a/backend/src/lib/chat/tools/toolSchemas.ts b/backend/src/lib/chat/tools/toolSchemas.ts new file mode 100644 index 0000000..302ceb9 --- /dev/null +++ b/backend/src/lib/chat/tools/toolSchemas.ts @@ -0,0 +1,471 @@ +export const PROJECT_EXTRA_TOOLS = [ + { + type: "function", + function: { + name: "list_documents", + description: + "List all documents available in the project. Returns each document's ID, filename, and file type. Call this to discover what documents are available before deciding which ones to read.", + parameters: { type: "object", properties: {} }, + }, + }, + { + type: "function", + function: { + name: "fetch_documents", + description: + "Read the full text content of multiple documents in a single call. Use this instead of calling read_document repeatedly when you need to read several documents at once. In one response, fetch each document/version at most once; after it has been fetched, use the prior tool result or find_in_document for targeted checks.", + parameters: { + type: "object", + properties: { + doc_ids: { + type: "array", + items: { type: "string" }, + description: + "Array of document IDs to read (e.g. ['doc-0', 'doc-2'])", + }, + }, + required: ["doc_ids"], + }, + }, + }, + { + type: "function", + function: { + name: "replicate_document", + description: + "Make byte-for-byte copies of an existing project document as new project documents. Use when the user wants standalone copies to edit (e.g. 'use this NDA as a template', 'give me three drafts I can adapt') without modifying the original. Pass `count` to create multiple copies in a single call rather than calling the tool repeatedly. Returns the new doc_id slugs so you can immediately call edit_document / read_document on them.", + parameters: { + type: "object", + properties: { + doc_id: { + type: "string", + description: "ID of the source document to copy (e.g. 'doc-0').", + }, + count: { + type: "integer", + description: + "How many copies to create. Defaults to 1. Maximum 20.", + minimum: 1, + maximum: 20, + }, + new_filename: { + type: "string", + description: + "Optional base filename. With count > 1, copies are suffixed (e.g. 'Foo (1).docx', 'Foo (2).docx'). Extension is forced to match the source.", + }, + }, + required: ["doc_id"], + }, + }, + }, +]; + +export const TABULAR_TOOLS = [ + { + type: "function", + function: { + name: "read_table_cells", + description: + "Read the extracted cell content from the tabular review. Each cell contains the value extracted for a specific column from a specific document. Pass col_indices and/or row_indices (0-based) to read a subset; omit either to read all columns or all rows.", + parameters: { + type: "object", + properties: { + col_indices: { + type: "array", + items: { type: "integer" }, + description: + "0-based column indices to read (e.g. [0, 2]). Omit to read all columns.", + }, + row_indices: { + type: "array", + items: { type: "integer" }, + description: + "0-based document (row) indices to read (e.g. [0, 1]). Omit to read all rows.", + }, + }, + }, + }, + }, +]; + +export const WORKFLOW_TOOLS = [ + { + type: "function", + function: { + name: "list_workflows", + description: + "List all workflows available to the user. Returns each workflow's ID and title. Call this when the user asks to run a workflow, apply a template, or you need to discover what workflows exist.", + parameters: { type: "object", properties: {} }, + }, + }, + { + type: "function", + function: { + name: "read_workflow", + description: + "Read the full instructions (prompt) of a workflow by its ID. Call this after list_workflows to load a specific workflow's prompt, then follow those instructions.", + parameters: { + type: "object", + properties: { + workflow_id: { + type: "string", + description: "The workflow ID to read", + }, + }, + required: ["workflow_id"], + }, + }, + }, +]; + +export const TOOLS = [ + { + type: "function", + function: { + name: "ask_inputs", + description: + "Ask the user for one or more decisions, clarifications, or document uploads before continuing. Use this when guessing would materially affect the answer or when required documents have not been attached. Put all needed questions and document requests in one items array. After calling ask_inputs, do not continue the substantive task until the user responds in a later message.", + parameters: { + type: "object", + properties: { + items: { + type: "array", + minItems: 1, + maxItems: 12, + description: + "The list of user inputs needed before continuing. Use choice items for decisions/clarifications and documents items for required uploads.", + items: { + type: "object", + properties: { + id: { + type: "string", + description: + "Stable short ID for this input, unique within this tool call.", + }, + kind: { + type: "string", + enum: ["choice", "documents"], + }, + question: { + type: "string", + description: + "For choice items only: the concise question to show to the user.", + }, + options: { + type: "array", + description: + "For choice items only: selectable choices to show. Each choice has a single user-facing value, which is also sent back if selected.", + minItems: 1, + maxItems: 8, + items: { + type: "object", + properties: { + value: { + type: "string", + description: "The user-facing choice text.", + }, + }, + required: ["value"], + }, + }, + allow_other: { + type: "boolean", + description: + "For choice items only: whether to show an Other option with a text field. Defaults to true.", + }, + other_label: { + type: "string", + description: + "For choice items only: label for the free-text option. Defaults to Other.", + }, + document_types: { + type: "array", + description: + "For documents items only: readable labels for the types of documents you need the user to attach.", + minItems: 1, + maxItems: 8, + items: { + type: "string", + }, + }, + response_prefix: { + type: "string", + description: + "Optional prefix the UI should include when sending this response back as the next message.", + }, + }, + required: ["id", "kind"], + }, + }, + }, + required: ["items"], + }, + }, + }, + { + type: "function", + function: { + name: "read_document", + description: + "Read the full text content of a document attached by the user. Always call this before answering questions about, summarising, citing from, or editing a document, but call it at most once per document/version in a single response. After this returns, use the prior tool result or find_in_document for targeted checks instead of reading the same document/version again.", + parameters: { + type: "object", + properties: { + doc_id: { + type: "string", + description: "The document ID to read (e.g. 'doc-0', 'doc-1')", + }, + }, + required: ["doc_id"], + }, + }, + }, + { + type: "function", + function: { + name: "find_in_document", + description: + "Search for specific strings inside a document — a Ctrl+F equivalent. Returns each match with surrounding context so you can locate and quote the exact text without reading the whole document. Matching is case-insensitive and whitespace-tolerant. Use this for targeted lookups (e.g. finding a clause title, party name, or a specific phrase) rather than reading the whole document.", + parameters: { + type: "object", + properties: { + doc_id: { + type: "string", + description: "The document ID to search (e.g. 'doc-0').", + }, + query: { + type: "string", + description: + "The string to search for. Matching is case-insensitive and collapses runs of whitespace, so 'Section 4.2' matches 'section 4.2'.", + }, + max_results: { + type: "integer", + description: + "Maximum number of matches to return (default 20). Use a smaller value for common terms.", + }, + context_chars: { + type: "integer", + description: + "Characters of surrounding context to include on each side of a match (default 80).", + }, + }, + required: ["doc_id", "query"], + }, + }, + }, + { + type: "function", + function: { + name: "generate_docx", + description: + "Generate a Word (.docx) document from structured content. Use this when the user asks you to draft, create, or produce a legal document. Returns a download URL for the generated file.", + parameters: { + type: "object", + properties: { + title: { + type: "string", + description: "Document title (used as filename and heading)", + }, + landscape: { + type: "boolean", + description: + "Set to true for landscape page orientation. Default is portrait.", + }, + sections: { + type: "array", + description: + "List of document sections. Each section may contain a heading, prose content, or a table.", + items: { + type: "object", + properties: { + heading: { + type: "string", + description: "Optional section heading", + }, + level: { + type: "integer", + description: "Heading level: 1, 2, or 3", + }, + content: { + type: "string", + description: + "Prose text content (paragraphs separated by double newlines)", + }, + pageBreak: { + type: "boolean", + description: + "Set to true to start this section on a new page. Use for contract signature pages.", + }, + table: { + type: "object", + description: "Optional table to render in this section", + properties: { + headers: { + type: "array", + items: { type: "string" }, + description: "Column header labels", + }, + rows: { + type: "array", + items: { + type: "array", + items: { type: "string" }, + }, + description: + "Array of rows, each row is an array of cell strings matching the headers order", + }, + }, + required: ["headers", "rows"], + }, + }, + }, + }, + }, + required: ["title", "sections"], + }, + }, + }, + { + type: "function", + function: { + name: "generate_excel", + description: + "Generate an Excel (.xlsx) workbook from structured sheet data. Use this when the user asks for a spreadsheet, tracker, matrix, checklist, schedule, or Excel file. Returns a download URL for the generated file.", + parameters: { + type: "object", + properties: { + title: { + type: "string", + description: "Workbook title, used as the filename.", + }, + sheets: { + type: "array", + description: + "Workbook sheets. Each sheet has a name, columns, and rows. Row values should follow the columns order.", + items: { + type: "object", + properties: { + name: { + type: "string", + description: "Sheet tab name. Keep it short.", + }, + columns: { + type: "array", + items: { type: "string" }, + description: "Column header labels.", + }, + rows: { + type: "array", + items: { + type: "array", + items: { type: "string" }, + }, + description: + "Array of rows, each row an array of cell strings matching the columns order.", + }, + }, + required: ["name", "columns", "rows"], + }, + }, + }, + required: ["title", "sheets"], + }, + }, + }, + { + type: "function", + function: { + name: "generate_ppt", + description: + "Generate a PowerPoint (.pptx) presentation from structured slides. Use this when the user asks for slides, a deck, presentation, or PowerPoint file. Returns a download URL for the generated file.", + parameters: { + type: "object", + properties: { + title: { + type: "string", + description: "Presentation title, used as the filename.", + }, + slides: { + type: "array", + description: + "Slides in order. Each slide may have a title, bullets, and optional speaker notes.", + items: { + type: "object", + properties: { + title: { + type: "string", + description: "Slide title.", + }, + bullets: { + type: "array", + items: { type: "string" }, + description: + "Main bullet points for the slide. Keep each bullet concise.", + }, + notes: { + type: "string", + description: + "Optional speaker notes. Included as text on a notes slide placeholder is not supported; use only for generation context.", + }, + }, + required: ["title", "bullets"], + }, + }, + }, + required: ["title", "slides"], + }, + }, + }, + { + type: "function", + function: { + name: "edit_document", + description: + "Propose edits to a user-attached .docx as tracked changes. Each edit is a precise, minimal substitution of specific words/characters, NOT a whole-line or paragraph replacement. Use read_document first unless this same document/version has already been read in the current response. Anchor each edit with short before/after context so it can be located unambiguously. Returns per-edit annotations the UI will render as Accept/Reject cards and a download link to the edited document.", + parameters: { + type: "object", + properties: { + doc_id: { + type: "string", + description: "Document slug (e.g. 'doc-0').", + }, + edits: { + type: "array", + description: "List of precise substitutions.", + items: { + type: "object", + properties: { + find: { + type: "string", + description: + "Exact substring to replace (keep it as short as possible — ideally just the words/chars being changed).", + }, + replace: { + type: "string", + description: + "Replacement text. Empty string = pure deletion.", + }, + context_before: { + type: "string", + description: + "~40 chars immediately preceding `find`, used to disambiguate.", + }, + context_after: { + type: "string", + description: "~40 chars immediately following `find`.", + }, + reason: { + type: "string", + description: + "Short explanation shown to the user on the card.", + }, + }, + required: ["find", "replace", "context_before", "context_after"], + }, + }, + }, + required: ["doc_id", "edits"], + }, + }, + }, +]; diff --git a/backend/src/lib/chat/types.ts b/backend/src/lib/chat/types.ts new file mode 100644 index 0000000..1ddecbf --- /dev/null +++ b/backend/src/lib/chat/types.ts @@ -0,0 +1,153 @@ +import path from "path"; + +export const STANDARD_FONT_DATA_URL = (() => { + try { + const pkgPath = require.resolve("pdfjs-dist/package.json"); + return path.join(path.dirname(pkgPath), "standard_fonts") + path.sep; + } catch { + return undefined; + } +})(); + +const isDev = process.env.NODE_ENV !== "production"; +export const devLog = (...args: Parameters<typeof console.log>) => { + if (isDev) console.log(...args); +}; + +// --------------------------------------------------------------------------- +// Core types +// --------------------------------------------------------------------------- + +export type DocStore = Map< + string, + { storage_path: string; file_type: string; filename: string } +>; + +export type WorkflowStore = Map<string, { title: string; prompt_md: string }>; + +export type DocIndex = Record< + string, + { + document_id: string; + filename: string; + version_id?: string | null; + version_number?: number | null; + } +>; + +export type TabularCellStore = { + columns: { index: number; name: string }[]; + documents: { id: string; filename: string }[]; + /** key: `${colIndex}:${docId}` */ + cells: Map< + string, + { summary: string; flag?: string; reasoning?: string } | null + >; +}; + +export type ToolCall = { + id: string; + function: { name: string; arguments: string }; +}; + +export type ChatMessage = { + role: string; + content: string | null; + files?: { filename: string; document_id?: string }[]; + workflow?: { id: string; title: string }; +}; + +// --------------------------------------------------------------------------- +// Doc resolution helpers (used by citations + documentOps) +// --------------------------------------------------------------------------- + +export function resolveDoc(rawId: string, docIndex: DocIndex) { + return docIndex[rawId]; +} + +/** + * Resolve whatever identifier the model passed (`doc-N` slug, filename, or + * document UUID) back to a chat-local doc label. + */ +export function resolveDocLabel( + rawId: string, + docStore: DocStore, + docIndex?: DocIndex, +): string | null { + if (docStore.has(rawId)) return rawId; + for (const [label, info] of docStore.entries()) { + if (info.filename === rawId) return label; + } + if (docIndex) { + for (const [label, info] of Object.entries(docIndex)) { + if (info.document_id === rawId) return label; + } + } + return null; +} + +// --------------------------------------------------------------------------- +// Event / annotation types (shared between toolDispatcher and streaming) +// --------------------------------------------------------------------------- + +export type AskInputOption = { + value: string; +}; + +export type AskInputItem = + | { + id: string; + kind: "choice"; + question: string; + options: AskInputOption[]; + allow_other: boolean; + other_label: string; + response_prefix?: string; + } + | { + id: string; + kind: "documents"; + document_types: string[]; + response_prefix?: string; + }; + +export type AskInputsEvent = { + type: "ask_inputs"; + items: AskInputItem[]; +}; + +export type AskInputResponseItem = + | { + id: string; + kind: "choice"; + question: string; + answer?: string; + skipped?: boolean; + } + | { + id: string; + kind: "documents"; + filenames: string[]; + skipped?: boolean; + }; + +export type AskInputsResponseRequest = { + responses: AskInputResponseItem[]; +}; + +export type EditAnnotation = { + kind: "edit"; + edit_id: string; + document_id: string; + version_id: string; + version_number?: number | null; + change_id: string; + del_w_id?: string; + ins_w_id?: string; + deleted_text: string; + inserted_text: string; + context_before: string; + context_after: string; + reason?: string; + status: "pending" | "accepted" | "rejected"; +}; diff --git a/backend/src/lib/chatTools.ts b/backend/src/lib/chatTools.ts deleted file mode 100644 index a0b705e..0000000 --- a/backend/src/lib/chatTools.ts +++ /dev/null @@ -1,4590 +0,0 @@ -import path from "path"; -import { - downloadFile, - generatedDocKey, - storageKey, - uploadFile, -} from "./storage"; -import { convertedPdfKey } from "./convert"; -import { createServerSupabase } from "./supabase"; -import { - applyTrackedEdits, - extractDocxBodyText, - type EditInput, -} from "./docxTrackedChanges"; -import { buildDownloadUrl } from "./downloadTokens"; -import { - attachActiveVersionPaths, - loadActiveVersion, -} from "./documentVersions"; -import { - getCourtlistenerCaseOpinions, - getCourtlistenerCases, - searchCourtlistenerCaseLaw, - verifyCourtlistenerCitations, -} from "./courtlistener"; -import { - COURTLISTENER_SYSTEM_PROMPT, - COURTLISTENER_TOOL_NAMES, - COURTLISTENER_TOOLS, - type CaseCitationEvent, - type CourtlistenerToolEvent, -} from "./legalSourcesTools/courtlistenerTools"; -import { - buildUserMcpTools, - executeMcpToolCall, - type McpToolEvent, -} from "./mcpConnectors"; -import { - streamChatWithTools, - resolveModel, - DEFAULT_MAIN_MODEL, - type LlmMessage, - type OpenAIToolSchema, -} from "./llm"; -import { safeErrorMessage } from "./safeError"; - -const STANDARD_FONT_DATA_URL = (() => { - try { - const pkgPath = require.resolve("pdfjs-dist/package.json"); - return path.join(path.dirname(pkgPath), "standard_fonts") + path.sep; - } catch { - return undefined; - } -})(); -const isDev = process.env.NODE_ENV !== "production"; -const devLog = (...args: Parameters<typeof console.log>) => { - if (isDev) console.log(...args); -}; - -// --------------------------------------------------------------------------- -// Types -// --------------------------------------------------------------------------- - -export type DocStore = Map< - string, - { storage_path: string; file_type: string; filename: string } ->; - -export type WorkflowStore = Map<string, { title: string; prompt_md: string }>; - -export type DocIndex = Record< - string, - { - document_id: string; - filename: string; - version_id?: string | null; - version_number?: number | null; - } ->; - -export type TabularCellStore = { - columns: { index: number; name: string }[]; - documents: { id: string; filename: string }[]; - /** key: `${colIndex}:${docId}` */ - cells: Map< - string, - { summary: string; flag?: string; reasoning?: string } | null - >; -}; - -export type ToolCall = { - id: string; - function: { name: string; arguments: string }; -}; - -export type ChatMessage = { - role: string; - content: string | null; - files?: { filename: string; document_id?: string }[]; - workflow?: { id: string; title: string }; -}; - -// --------------------------------------------------------------------------- -// Constants -// --------------------------------------------------------------------------- - -const SYSTEM_PROMPT_BEFORE_RESEARCH = `You are Mike, an AI legal assistant for lawyers and legal professionals. Help analyze documents, answer legal questions, and draft legal documents. - -CORE RULES: -- Be precise, professional, and evidence-aware. -- Do not fabricate document content. -- Use at most 10 tool-use rounds per response. Batch independent tool calls and leave room for the final answer. -- If the user selects a workflow with [Workflow: <title> (id: <id>)], immediately call read_workflow with that id and follow the workflow before doing anything else. - -DOCUMENT CITATIONS: -Use document citations only for verbatim evidence from uploaded or generated documents. - -In prose, put sequential markers [1], [2], etc. exactly where the cited claim appears. The marker number is the citation "ref" value, not a page, footnote, section, or document number. - -At the very end of the response, append: -<CITATIONS> -[ - {"ref": 1, "doc_id": "doc-0", "quotes": [{"page": 3, "quote": "exact verbatim text"}]}, - {"ref": 2, "doc_id": "doc-1", "quotes": [{"page": "41-42", "quote": "text before page break [[PAGE_BREAK]] text after page break"}]} -] -</CITATIONS> - -Citation rules: -- Every [N] marker must have exactly one matching entry with "ref": N. -- "doc_id" must be the exact chat-local label you were given, such as "doc-0". Never use a filename or document UUID in "doc_id". -- Use one citation entry per marker. If one marker needs several passages, use "quotes" with 1 quote by default and at most 3. -- Keep quotes short, ideally 25 words or fewer, and tightly matched to the claim. -- "page" means the sequential [Page N] marker in the provided text, not printed page numbers inside the document. -- For a continuous quote crossing two pages, set "page" to "N-M" and include [[PAGE_BREAK]] at the page break. Otherwise, use separate quote objects. -- For legacy compatibility, you may also include top-level "page" and "quote" matching the first quote. -- Omit the <CITATIONS> block when there are no citations. - -DOCX GENERATION: -- If the user asks you to create or draft a document, call generate_docx and provide the downloadable Word document rather than only displaying text inline. -- If the user asks to revise a document you just generated, call edit_document on that document unless they explicitly want a brand-new document or the change is too broad for coherent editing. -- Use heading levels in order; do not skip from Heading 1 to Heading 3. -- Numbering starts at 1, never 0. The generator applies legal numbering automatically. Do not type numbering prefixes into headings. -- Do not repeat the document title as the first section heading. -- Contract preambles, party blocks, recitals, and WHEREAS clauses are unnumbered. Begin numbering at the first operative clause or section. -- Contracts and agreements must end with an unnumbered signature block on a fresh page. Set pageBreak: true on the final section and include signature lines such as By, Name, Title, and Date for each party. - -DOCUMENT EDITING: -When edit_document adds, deletes, moves, or reorders any numbered clause, section, schedule, exhibit, or list item: -- Renumber all affected downstream items in the same edit. -- Update all affected cross-references, including references in recitals, definitions, schedules, and exhibits. -- Before editing, scan the full document with read_document or find_in_document for affected references. -- If a reference might point to a shifted number, include the update and explain the reason. -- When deleting square brackets, delete both "[" and "]".`; - -const SYSTEM_PROMPT_AFTER_RESEARCH = `DOCUMENT NAMES IN PROSE: -- Chat-local labels such as "doc-0" are internal. Use them only in tool arguments and citation JSON. -- Never show "doc-N" labels to the user in prose, headings, lists, or tool activity text. -- Refer to documents by filename or a natural description, such as "the NDA draft". - -GENERAL GUIDANCE: -- Cite the exact document or fetched opinion passage for evidence-backed claims. -- If no documents are provided, answer from legal knowledge. -- Do not use emojis. -`; - -/** - * Assemble the chat system prompt. When `includeResearchTools` is true the - * CourtListener (US case-law) research instructions are spliced in; when - * false they are omitted entirely so the model is not told about tools it - * does not have. Gated per-user by the Legal Research > US feature toggle. - */ -export function buildSystemPrompt(includeResearchTools = true): string { - return includeResearchTools - ? `${SYSTEM_PROMPT_BEFORE_RESEARCH}\n\n${COURTLISTENER_SYSTEM_PROMPT}\n${SYSTEM_PROMPT_AFTER_RESEARCH}` - : `${SYSTEM_PROMPT_BEFORE_RESEARCH}\n\n${SYSTEM_PROMPT_AFTER_RESEARCH}`; -} - -export const SYSTEM_PROMPT = buildSystemPrompt(true); - -export const PROJECT_EXTRA_TOOLS = [ - { - type: "function", - function: { - name: "list_documents", - description: - "List all documents available in the project. Returns each document's ID, filename, and file type. Call this to discover what documents are available before deciding which ones to read.", - parameters: { type: "object", properties: {} }, - }, - }, - { - type: "function", - function: { - name: "fetch_documents", - description: - "Read the full text content of multiple documents in a single call. Use this instead of calling read_document repeatedly when you need to read several documents at once.", - parameters: { - type: "object", - properties: { - doc_ids: { - type: "array", - items: { type: "string" }, - description: - "Array of document IDs to read (e.g. ['doc-0', 'doc-2'])", - }, - }, - required: ["doc_ids"], - }, - }, - }, - { - type: "function", - function: { - name: "replicate_document", - description: - "Make byte-for-byte copies of an existing project document as new project documents. Use when the user wants standalone copies to edit (e.g. 'use this NDA as a template', 'give me three drafts I can adapt') without modifying the original. Pass `count` to create multiple copies in a single call rather than calling the tool repeatedly. Returns the new doc_id slugs so you can immediately call edit_document / read_document on them.", - parameters: { - type: "object", - properties: { - doc_id: { - type: "string", - description: "ID of the source document to copy (e.g. 'doc-0').", - }, - count: { - type: "integer", - description: - "How many copies to create. Defaults to 1. Maximum 20.", - minimum: 1, - maximum: 20, - }, - new_filename: { - type: "string", - description: - "Optional base filename. With count > 1, copies are suffixed (e.g. 'Foo (1).docx', 'Foo (2).docx'). Extension is forced to match the source.", - }, - }, - required: ["doc_id"], - }, - }, - }, -]; - -export const TABULAR_TOOLS = [ - { - type: "function", - function: { - name: "read_table_cells", - description: - "Read the extracted cell content from the tabular review. Each cell contains the value extracted for a specific column from a specific document. Pass col_indices and/or row_indices (0-based) to read a subset; omit either to read all columns or all rows.", - parameters: { - type: "object", - properties: { - col_indices: { - type: "array", - items: { type: "integer" }, - description: - "0-based column indices to read (e.g. [0, 2]). Omit to read all columns.", - }, - row_indices: { - type: "array", - items: { type: "integer" }, - description: - "0-based document (row) indices to read (e.g. [0, 1]). Omit to read all rows.", - }, - }, - }, - }, - }, -]; - -export const WORKFLOW_TOOLS = [ - { - type: "function", - function: { - name: "list_workflows", - description: - "List all workflows available to the user. Returns each workflow's ID and title. Call this when the user asks to run a workflow, apply a template, or you need to discover what workflows exist.", - parameters: { type: "object", properties: {} }, - }, - }, - { - type: "function", - function: { - name: "read_workflow", - description: - "Read the full instructions (prompt) of a workflow by its ID. Call this after list_workflows to load a specific workflow's prompt, then follow those instructions.", - parameters: { - type: "object", - properties: { - workflow_id: { - type: "string", - description: "The workflow ID to read", - }, - }, - required: ["workflow_id"], - }, - }, - }, -]; - -export const TOOLS = [ - { - type: "function", - function: { - name: "read_document", - description: - "Read the full text content of a document attached by the user. Always call this before answering questions about, summarising, or citing from a document.", - parameters: { - type: "object", - properties: { - doc_id: { - type: "string", - description: "The document ID to read (e.g. 'doc-0', 'doc-1')", - }, - }, - required: ["doc_id"], - }, - }, - }, - { - type: "function", - function: { - name: "find_in_document", - description: - "Search for specific strings inside a document — a Ctrl+F equivalent. Returns each match with surrounding context so you can locate and quote the exact text without reading the whole document. Matching is case-insensitive and whitespace-tolerant. Use this for targeted lookups (e.g. finding a clause title, party name, or a specific phrase) rather than reading the whole document.", - parameters: { - type: "object", - properties: { - doc_id: { - type: "string", - description: "The document ID to search (e.g. 'doc-0').", - }, - query: { - type: "string", - description: - "The string to search for. Matching is case-insensitive and collapses runs of whitespace, so 'Section 4.2' matches 'section 4.2'.", - }, - max_results: { - type: "integer", - description: - "Maximum number of matches to return (default 20). Use a smaller value for common terms.", - }, - context_chars: { - type: "integer", - description: - "Characters of surrounding context to include on each side of a match (default 80).", - }, - }, - required: ["doc_id", "query"], - }, - }, - }, - { - type: "function", - function: { - name: "generate_docx", - description: - "Generate a Word (.docx) document from structured content. Use this when the user asks you to draft, create, or produce a legal document. Returns a download URL for the generated file.", - parameters: { - type: "object", - properties: { - title: { - type: "string", - description: "Document title (used as filename and heading)", - }, - landscape: { - type: "boolean", - description: - "Set to true for landscape page orientation. Default is portrait.", - }, - sections: { - type: "array", - description: - "List of document sections. Each section may contain a heading, prose content, or a table.", - items: { - type: "object", - properties: { - heading: { - type: "string", - description: "Optional section heading", - }, - level: { - type: "integer", - description: "Heading level: 1, 2, or 3", - }, - content: { - type: "string", - description: - "Prose text content (paragraphs separated by double newlines)", - }, - pageBreak: { - type: "boolean", - description: - "Set to true to start this section on a new page. Use for contract signature pages.", - }, - table: { - type: "object", - description: "Optional table to render in this section", - properties: { - headers: { - type: "array", - items: { type: "string" }, - description: "Column header labels", - }, - rows: { - type: "array", - items: { - type: "array", - items: { type: "string" }, - }, - description: - "Array of rows, each row is an array of cell strings matching the headers order", - }, - }, - required: ["headers", "rows"], - }, - }, - }, - }, - }, - required: ["title", "sections"], - }, - }, - }, - { - type: "function", - function: { - name: "edit_document", - description: - "Propose edits to a user-attached .docx as tracked changes. Each edit is a precise, minimal substitution of specific words/characters, NOT a whole-line or paragraph replacement. Use read_document first. Anchor each edit with short before/after context so it can be located unambiguously. Returns per-edit annotations the UI will render as Accept/Reject cards and a download link to the edited document.", - parameters: { - type: "object", - properties: { - doc_id: { - type: "string", - description: "Document slug (e.g. 'doc-0').", - }, - edits: { - type: "array", - description: "List of precise substitutions.", - items: { - type: "object", - properties: { - find: { - type: "string", - description: - "Exact substring to replace (keep it as short as possible — ideally just the words/chars being changed).", - }, - replace: { - type: "string", - description: - "Replacement text. Empty string = pure deletion.", - }, - context_before: { - type: "string", - description: - "~40 chars immediately preceding `find`, used to disambiguate.", - }, - context_after: { - type: "string", - description: "~40 chars immediately following `find`.", - }, - reason: { - type: "string", - description: - "Short explanation shown to the user on the card.", - }, - }, - required: ["find", "replace", "context_before", "context_after"], - }, - }, - }, - required: ["doc_id", "edits"], - }, - }, - }, -]; - -type ParsedDocumentCitation = { - kind: "document"; - ref: number; - doc_id: string; - page: number | string; - quote: string; - quotes: { - page: number | string; - quote: string; - }[]; -}; - -type ParsedCaseCitation = { - kind: "case"; - ref: number; - cluster_id: number; - quotes: { - opinionId: number | null; - type: string | null; - author: string | null; - quote: string; - }[]; -}; - -type ParsedCitation = ParsedDocumentCitation | ParsedCaseCitation; - -function normalizeCitation(raw: unknown): ParsedCitation | null { - if (!raw || typeof raw !== "object") return null; - const c = raw as Record<string, unknown>; - const markerRef = - typeof c.marker === "string" - ? Number(c.marker.match(/^\[(\d+)\]$/)?.[1]) - : NaN; - const ref = - typeof c.ref === "number" - ? c.ref - : Number.isFinite(markerRef) - ? markerRef - : null; - if (typeof ref !== "number") return null; - const quote = typeof c.quote === "string" ? c.quote : c.text; - - const rawClusterId = - typeof c.cluster_id === "number" - ? c.cluster_id - : typeof c.clusterId === "number" - ? c.clusterId - : typeof c.cluster_id === "string" - ? Number.parseInt(c.cluster_id, 10) - : typeof c.clusterId === "string" - ? Number.parseInt(c.clusterId, 10) - : NaN; - if (Number.isFinite(rawClusterId) && rawClusterId > 0) { - const quotes = normalizeCaseCitationQuotes(c); - if (!quotes.length) { - if (typeof quote !== "string" || !quote) return null; - quotes.push({ - opinionId: null, - type: null, - author: null, - quote, - }); - } - return { - kind: "case", - ref, - cluster_id: Math.floor(rawClusterId), - quotes, - }; - } - - if (typeof c.doc_id !== "string") return null; - const quotes = normalizeDocumentCitationQuotes(c); - if (!quotes.length) { - if (typeof quote !== "string" || !quote) return null; - quotes.push({ page: normalizeCitationPage(c.page), quote }); - } - return { - kind: "document", - ref, - doc_id: c.doc_id, - page: quotes[0].page, - quote: quotes[0].quote, - quotes, - }; -} - -function normalizeCitationPage(value: unknown): number | string { - if (typeof value === "number") { - return value; - } else if (typeof value === "string" && /^\d+\s*-\s*\d+$/.test(value)) { - return value; - } else { - const n = parseInt(String(value ?? ""), 10); - if (!Number.isFinite(n)) return 1; - return n; - } -} - -function normalizeDocumentCitationQuotes(c: Record<string, unknown>) { - if (!Array.isArray(c.quotes)) return []; - return c.quotes - .slice(0, 3) - .map((raw) => { - if (!raw || typeof raw !== "object" || Array.isArray(raw)) { - return null; - } - const row = raw as Record<string, unknown>; - const text = typeof row.quote === "string" ? row.quote : row.text; - if (typeof text !== "string" || !text.trim()) return null; - return { - page: normalizeCitationPage(row.page ?? c.page), - quote: text, - }; - }) - .filter( - (quote): quote is { page: number | string; quote: string } => !!quote, - ); -} - -function normalizeCaseCitationQuotes(c: Record<string, unknown>) { - if (!Array.isArray(c.quotes)) return []; - return c.quotes - .slice(0, 3) - .map((raw) => { - if (!raw || typeof raw !== "object" || Array.isArray(raw)) { - return null; - } - const row = raw as Record<string, unknown>; - const text = typeof row.quote === "string" ? row.quote : row.text; - if (typeof text !== "string" || !text.trim()) return null; - const opinionId = - typeof row.opinion_id === "number" && Number.isFinite(row.opinion_id) - ? Math.floor(row.opinion_id) - : typeof row.opinionId === "number" && Number.isFinite(row.opinionId) - ? Math.floor(row.opinionId) - : null; - return { - opinionId, - type: typeof row.type === "string" ? row.type : null, - author: typeof row.author === "string" ? row.author : null, - quote: text, - }; - }) - .filter( - (quote): quote is { - opinionId: number | null; - type: string | null; - author: string | null; - quote: string; - } => !!quote, - ); -} - -// --------------------------------------------------------------------------- -// Helpers -// --------------------------------------------------------------------------- - -export function resolveDoc(rawId: string, docIndex: DocIndex) { - return docIndex[rawId]; -} - -/** - * Resolve whatever identifier the model passed (`doc-N` slug, filename, or - * document UUID) back to a chat-local doc label. Generated docs surface in - * tool results with both `doc_id` (slug) and `document_id` (UUID), so the - * model often picks the wrong one — without this fallback `read_document` - * silently returns "not found" and the model gives up and re-generates. - */ -export function resolveDocLabel( - rawId: string, - docStore: DocStore, - docIndex?: DocIndex, -): string | null { - if (docStore.has(rawId)) return rawId; - for (const [label, info] of docStore.entries()) { - if (info.filename === rawId) return label; - } - if (docIndex) { - for (const [label, info] of Object.entries(docIndex)) { - if (info.document_id === rawId) return label; - } - } - return null; -} - -function citationReminder(docLabel: string, filename: string): string { - return [ - `[Citation requirement for ${docLabel} ("${filename}")]:`, - `If your final answer makes any factual claim from this document, include inline [N] markers and append a final <CITATIONS> JSON block.`, - `Every citation entry for this document MUST use "doc_id": "${docLabel}".`, - `Use this citation object shape: {"ref": 1, "doc_id": "${docLabel}", "quotes": [{"page": 1, "quote": "exact verbatim text from the document"}]}. Include top-level "page" and "quote" too only if they match the first quote.`, - `Do not use "marker" or "text" keys in the citation block; use "ref" and "quotes".`, - ].join("\n"); -} - -/** - * Append a tool-activity summary to the most recent assistant message so - * the model can see what it just did (read / create / edit / workflow - * applied) in the prior turn — otherwise it only sees its own prose and - * forgets which docs it touched, which leads to e.g. re-generating a doc - * that already exists. - * - * Doc references use the *current-turn* `doc_id` slug (looked up by - * matching the event's stored `document_id` against this turn's freshly - * built `docIndex`), since slugs are reassigned every turn and the old - * slug from the prior turn would be meaningless. Falls back to filename - * only if the doc is no longer in the index (deleted, scope changed). - */ -export async function enrichWithPriorEvents( - messages: ChatMessage[], - chatId: string | null | undefined, - db: ReturnType<typeof createServerSupabase>, - docIndex: DocIndex, -): Promise<ChatMessage[]> { - if (!chatId) return messages; - const { data: rows } = await db - .from("chat_messages") - .select("content, created_at") - .eq("chat_id", chatId) - .eq("role", "assistant") - .order("created_at", { ascending: false }) - .limit(1); - - const lastRow = rows?.[0] as { content?: unknown } | undefined; - const content = lastRow?.content; - if (!Array.isArray(content)) return messages; - - const slugByDocumentId = new Map<string, string>(); - for (const [slug, info] of Object.entries(docIndex)) { - if (info.document_id) slugByDocumentId.set(info.document_id, slug); - } - const refFor = (documentId: unknown, filename: unknown) => { - const slug = - typeof documentId === "string" - ? slugByDocumentId.get(documentId) - : undefined; - return slug ? `${slug} ("${filename}")` : `"${filename}"`; - }; - - const lines: string[] = []; - for (const ev of content as Record<string, unknown>[]) { - if (ev?.type === "doc_created") { - lines.push(`- generate_docx → ${refFor(ev.document_id, ev.filename)}`); - } else if (ev?.type === "doc_edited") { - lines.push(`- edit_document → ${refFor(ev.document_id, ev.filename)}`); - } else if (ev?.type === "doc_read") { - lines.push(`- read_document → ${refFor(ev.document_id, ev.filename)}`); - } else if (ev?.type === "doc_replicated") { - // The model needs to know what each copy resolved to so it - // can call edit_document / read_document on them. Emit one - // line per copy, all attributed back to the same source. - const srcLabel = - typeof ev.filename === "string" ? `"${ev.filename}"` : ""; - const copies = Array.isArray(ev.copies) - ? (ev.copies as { - new_filename?: unknown; - document_id?: unknown; - }[]) - : []; - for (const c of copies) { - const ref = refFor(c.document_id, c.new_filename); - lines.push( - srcLabel - ? `- replicate_document → ${ref} (copy of ${srcLabel})` - : `- replicate_document → ${ref}`, - ); - } - } else if (ev?.type === "workflow_applied") { - lines.push(`- applied workflow: "${ev.title}"`); - } - } - if (lines.length === 0) return messages; - const summary = `\n\n[Tool activity in your previous turn]\n${lines.join("\n")}`; - - // Find the index of the last assistant message and attach the - // summary there only. - let lastAssistantIdx = -1; - for (let i = messages.length - 1; i >= 0; i--) { - if (messages[i].role === "assistant") { - lastAssistantIdx = i; - break; - } - } - if (lastAssistantIdx < 0) return messages; - const enriched = messages.slice(); - const target = enriched[lastAssistantIdx]; - enriched[lastAssistantIdx] = { - ...target, - content: (target.content ?? "") + summary, - }; - return enriched; -} - -export function buildMessages( - messages: ChatMessage[], - docAvailability: { - doc_id: string; - filename: string; - folder_path?: string; - }[], - systemPromptExtra?: string, - docIndex?: DocIndex, - includeResearchTools = true, -) { - const formatted: unknown[] = []; - let systemContent = buildSystemPrompt(includeResearchTools); - - if (systemPromptExtra) { - systemContent += `\n\n${systemPromptExtra.trim()}`; - } - - if (docAvailability.length) { - systemContent += "\n\n---\nAVAILABLE DOCUMENTS:\n"; - for (const doc of docAvailability) { - const label = doc.folder_path - ? `${doc.folder_path} / ${doc.filename}` - : doc.filename; - systemContent += `- ${doc.doc_id}: ${label}\n`; - } - systemContent += - "\nYou do NOT retain document content between conversation turns. You MUST call read_document (or fetch_documents) at the start of every response that involves a document's content, even if you have read it in a previous turn. Failure to do so will result in hallucinated or stale content.\n---\n"; - } - formatted.push({ role: "system", content: systemContent }); - - // Map document_id (UUID) → current-turn doc_id slug, so when we - // inline a user attachment we hand the model the same handle it - // would use to call read_document / fetch_documents. - const slugByDocumentId = new Map<string, string>(); - if (docIndex) { - for (const [slug, info] of Object.entries(docIndex)) { - if (info.document_id) slugByDocumentId.set(info.document_id, slug); - } - } - - for (const msg of messages) { - let content = msg.content ?? ""; - if (msg.role === "user" && msg.workflow) { - content = `[Workflow: ${msg.workflow.title} (id: ${msg.workflow.id})]\n\n${content}`; - } - if (msg.role === "user" && msg.files?.length) { - const lines = msg.files.map((f) => { - const slug = f.document_id - ? slugByDocumentId.get(f.document_id) - : undefined; - return slug ? `- ${slug}: ${f.filename}` : `- ${f.filename}`; - }); - content = `[The user attached the following document(s) to this message:\n${lines.join("\n")}]\n\n${content}`; - } - formatted.push({ role: msg.role, content }); - } - return formatted; -} - -export async function extractPdfText(buf: ArrayBuffer): Promise<string> { - try { - const pdfjsLib = await import("pdfjs-dist/legacy/build/pdf.mjs" as string); - const pdf = await ( - pdfjsLib as unknown as { - getDocument: (opts: unknown) => { - promise: Promise<{ - numPages: number; - getPage: (n: number) => Promise<{ - getTextContent: () => Promise<{ - items: { str?: string }[]; - }>; - }>; - }>; - }; - } - ).getDocument({ - data: new Uint8Array(buf), - standardFontDataUrl: STANDARD_FONT_DATA_URL, - }).promise; - const parts: string[] = []; - for (let i = 1; i <= pdf.numPages; i++) { - const page = await pdf.getPage(i); - const textContent = await page.getTextContent(); - parts.push( - `[Page ${i}]\n${textContent.items.map((it) => it.str ?? "").join(" ")}`, - ); - } - return parts.join("\n\n"); - } catch { - return ""; - } -} - -export async function generateDocx( - title: string, - sections: unknown[], - userId: string, - db: ReturnType<typeof createServerSupabase>, - options?: { landscape?: boolean; projectId?: string | null }, -) { - try { - const { - Document, - Paragraph, - HeadingLevel, - Packer, - Table, - TableRow, - TableCell, - WidthType, - BorderStyle, - TextRun, - AlignmentType, - LevelFormat, - LevelSuffix, - PageOrientation, - PageBreak, - } = await import("docx"); - - const FONT = "Times New Roman"; - const SIZE = 22; // 11pt in half-points - - type DocChild = InstanceType<typeof Paragraph> | InstanceType<typeof Table>; - const children: DocChild[] = []; - children.push( - new Paragraph({ - heading: HeadingLevel.TITLE, - spacing: { after: 200 }, - alignment: AlignmentType.CENTER, - children: [ - new TextRun({ - text: title.toUpperCase(), - color: "000000", - font: FONT, - size: SIZE, - bold: true, - }), - ], - }), - ); - - const cellBorder = { - top: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, - bottom: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, - left: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, - right: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" }, - }; - - const headingLevels = [ - HeadingLevel.HEADING_1, - HeadingLevel.HEADING_2, - HeadingLevel.HEADING_3, - HeadingLevel.HEADING_4, - ]; - const LEGAL_NUMBERING_REF = "legal-clause-numbering"; - const legalNumbering = (level: number) => ({ - reference: LEGAL_NUMBERING_REF, - level: Math.max(0, Math.min(level, 4)), - }); - const legalNumberingLevels = [ - { - level: 0, - format: LevelFormat.DECIMAL, - text: "%1.", - alignment: AlignmentType.START, - suffix: LevelSuffix.TAB, - isLegalNumberingStyle: true, - style: { - paragraph: { indent: { left: 720, hanging: 720 } }, - run: { - bold: true, - color: "000000", - font: FONT, - size: SIZE, - }, - }, - }, - { - level: 1, - format: LevelFormat.DECIMAL, - text: "%1.%2", - alignment: AlignmentType.START, - suffix: LevelSuffix.TAB, - isLegalNumberingStyle: true, - style: { - paragraph: { indent: { left: 720, hanging: 720 } }, - run: { color: "000000", font: FONT, size: SIZE }, - }, - }, - { - level: 2, - format: LevelFormat.LOWER_LETTER, - text: "(%3)", - alignment: AlignmentType.START, - suffix: LevelSuffix.TAB, - style: { - paragraph: { indent: { left: 1440, hanging: 720 } }, - run: { color: "000000", font: FONT, size: SIZE }, - }, - }, - { - level: 3, - format: LevelFormat.LOWER_ROMAN, - text: "(%4)", - alignment: AlignmentType.START, - suffix: LevelSuffix.TAB, - style: { - paragraph: { indent: { left: 1440, hanging: 720 } }, - run: { color: "000000", font: FONT, size: SIZE }, - }, - }, - { - level: 4, - format: LevelFormat.UPPER_LETTER, - text: "(%5)", - alignment: AlignmentType.START, - suffix: LevelSuffix.TAB, - style: { - paragraph: { indent: { left: 2520, hanging: 720 } }, - run: { color: "000000", font: FONT, size: SIZE }, - }, - }, - ]; - const normalizeTable = ( - table: unknown, - ): { headers: string[]; rows: string[][] } | null => { - if (!table || typeof table !== "object") return null; - const raw = table as { headers?: unknown; rows?: unknown }; - const headers = Array.isArray(raw.headers) - ? raw.headers - .map((header) => (typeof header === "string" ? header.trim() : "")) - .filter(Boolean) - : []; - if (headers.length === 0) return null; - - const rawRows = Array.isArray(raw.rows) ? raw.rows : []; - const rows = rawRows - .filter((row): row is unknown[] => Array.isArray(row)) - .map((row) => - headers.map((_, i) => (typeof row[i] === "string" ? row[i] : "")), - ); - - return { headers, rows }; - }; - const stripManualNumbering = ( - value: string, - ): { text: string; levelFromPrefix: number | null } => { - const match = value.trim().match(/^(\d+(?:\.\d+)*)(?:[.)])?\s+(.+)$/); - if (!match) return { text: value.trim(), levelFromPrefix: null }; - return { - text: match[2].trim(), - levelFromPrefix: match[1].split(".").length - 1, - }; - }; - const parseManualListMarker = ( - value: string, - ): { text: string; levelOffset: number | null } => { - const trimmed = value.trim(); - const match = trimmed.match(/^(\(([a-z]+)\)|([a-z]+)[.)])\s+(.+)$/i); - if (!match) return { text: trimmed, levelOffset: null }; - const marker = (match[2] ?? match[3] ?? "").toLowerCase(); - const isRoman = - marker === "i" || - (marker.length > 1 && - /^(?:m{0,4}(?:cm|cd|d?c{0,3})(?:xc|xl|l?x{0,3})(?:ix|iv|v?i{0,3}))$/i.test( - marker, - )); - return { text: match[4].trim(), levelOffset: isRoman ? 3 : 2 }; - }; - const normalizeHeadingText = (value: string) => - value - .trim() - .replace(/[^a-zA-Z0-9]+/g, " ") - .trim() - .toLowerCase(); - - const isTitleLikeFirstHeading = (heading: string, sectionIndex: number) => { - if (sectionIndex !== 0) return false; - const normalized = normalizeHeadingText(heading); - const titleNormalized = normalizeHeadingText(title); - if (!normalized || !titleNormalized) return false; - if (normalized === titleNormalized) return true; - return ( - titleNormalized.includes(normalized) && - /\b(agreement|contract|deed|terms|policy|notice|nda|disclosure)\b/.test( - normalized, - ) - ); - }; - - const isUnnumberedHeading = (heading: string, sectionIndex: number) => { - const normalized = normalizeHeadingText(heading); - if (!normalized) return true; - if (normalized === "signatures" || normalized === "signature") { - return true; - } - if (isTitleLikeFirstHeading(heading, sectionIndex)) { - return true; - } - if ( - sectionIndex === 0 && - /^(agreement|contract|mutual non disclosure agreement|non disclosure agreement|employment agreement|service level agreement)$/.test( - normalized, - ) - ) { - return true; - } - return false; - }; - const isSignatureLine = (value: string) => - /^(?:by|name|title|date):\s*/i.test(value.trim()); - const looksLikeSignatureBlock = (value: string) => { - const lines = value - .split("\n") - .map((line) => line.trim()) - .filter(Boolean); - if (lines.length === 0) return false; - const signatureLineCount = lines.filter(isSignatureLine).length; - return signatureLineCount >= 2; - }; - let currentClauseLevel: number | null = null; - - for (const [sectionIndex, section] of ( - sections as { - heading?: string; - content?: string; - level?: number; - pageBreak?: boolean; - table?: { headers: string[]; rows: string[][] }; - }[] - ).entries()) { - if (section.pageBreak) { - children.push(new Paragraph({ children: [new PageBreak()] })); - } - if (section.heading) { - const stripped = stripManualNumbering(section.heading); - const isUnnumbered = isUnnumberedHeading(stripped.text, sectionIndex); - const skipHeading = isTitleLikeFirstHeading( - stripped.text, - sectionIndex, - ); - const idx = Math.min( - stripped.levelFromPrefix ?? (section.level ?? 1) - 1, - 3, - ); - currentClauseLevel = isUnnumbered || skipHeading ? null : idx; - const headingText = - idx === 0 && !isUnnumbered - ? stripped.text.toUpperCase() - : stripped.text; - if (!skipHeading) { - children.push( - new Paragraph({ - heading: headingLevels[idx], - numbering: isUnnumbered ? undefined : legalNumbering(idx), - spacing: { after: 160 }, - children: [ - new TextRun({ - text: headingText, - color: "000000", - font: FONT, - size: SIZE, - bold: true, - }), - ], - }), - ); - } - } - const normalizedTable = normalizeTable(section.table); - if (normalizedTable) { - const { headers, rows } = normalizedTable; - const colCount = headers.length; - const tableRows: InstanceType<typeof TableRow>[] = []; - // Header row - tableRows.push( - new TableRow({ - tableHeader: true, - children: headers.map( - (h) => - new TableCell({ - borders: cellBorder, - shading: { fill: "F2F2F2" }, - children: [ - new Paragraph({ - children: [ - new TextRun({ - text: h, - bold: true, - font: FONT, - size: SIZE, - }), - ], - alignment: AlignmentType.LEFT, - }), - ], - }), - ), - }), - ); - // Data rows — normalize each row to exactly colCount cells. - // LLMs occasionally emit malformed rows (extra fragments from - // stray delimiters, or short rows); padding/truncating here - // keeps the rendered table aligned to the headers. - for (const normalized of rows) { - tableRows.push( - new TableRow({ - children: normalized.map( - (cell) => - new TableCell({ - borders: cellBorder, - children: [ - new Paragraph({ - children: [ - new TextRun({ - text: cell, - font: FONT, - size: SIZE, - }), - ], - }), - ], - }), - ), - }), - ); - } - children.push( - new Table({ - width: { size: 100, type: WidthType.PERCENTAGE }, - rows: tableRows, - }), - ); - children.push(new Paragraph({ text: "" })); - } - if (section.content) { - let numberedBodyParagraphs = 0; - const contentIsSignatureBlock = - section.heading && - normalizeHeadingText(section.heading).includes("signature") - ? true - : looksLikeSignatureBlock(section.content); - for (const line of section.content.split("\n")) { - const trimmed = line.trim(); - if (!trimmed) continue; - const bulletMatch = trimmed.match(/^[-•*]\s+(.+)/); - const rawText = bulletMatch ? bulletMatch[1].trim() : trimmed; - const manualList = parseManualListMarker(rawText); - const numeric = stripManualNumbering(rawText); - const text = bulletMatch - ? rawText - : manualList.levelOffset !== null - ? manualList.text - : numeric.text; - const inferredLevel = - currentClauseLevel === null || contentIsSignatureBlock - ? undefined - : bulletMatch - ? currentClauseLevel + 2 - : manualList.levelOffset !== null - ? currentClauseLevel + manualList.levelOffset - : numeric.levelFromPrefix !== null - ? numeric.levelFromPrefix - : numberedBodyParagraphs === 0 - ? currentClauseLevel + 1 - : currentClauseLevel + 2; - if (currentClauseLevel !== null) numberedBodyParagraphs++; - children.push( - new Paragraph({ - numbering: - inferredLevel === undefined - ? undefined - : legalNumbering(inferredLevel), - spacing: { after: 120 }, - children: [ - new TextRun({ - text, - font: FONT, - size: SIZE, - }), - ], - }), - ); - } - } - } - - const pageSetup = options?.landscape - ? { page: { size: { orientation: PageOrientation.LANDSCAPE } } } - : {}; - - const doc = new Document({ - numbering: { - config: [ - { - reference: LEGAL_NUMBERING_REF, - levels: legalNumberingLevels, - }, - ], - }, - sections: [{ properties: pageSetup, children }], - }); - const buf = await Packer.toBuffer(doc); - const zip = await import("jszip"); - const packageZip = await zip.default.loadAsync(buf); - for (const requiredPath of [ - "[Content_Types].xml", - "word/document.xml", - "word/_rels/document.xml.rels", - ]) { - if (!packageZip.file(requiredPath)) { - return { - error: `Generated DOCX is missing required package part: ${requiredPath}`, - }; - } - } - const docId = crypto.randomUUID().replace(/-/g, ""); - const safeTitle = - title - .replace(/[^a-zA-Z0-9 -]/g, "") - .trim() - .slice(0, 64) || "document"; - const filename = `${safeTitle}.docx`; - const key = generatedDocKey(userId, docId, filename); - - await uploadFile( - key, - buf.buffer as ArrayBuffer, - "application/vnd.openxmlformats-officedocument.wordprocessingml.document", - ); - const downloadUrl = buildDownloadUrl(key, filename); - - // Persist to DB so generated docs are first-class documents: - // openable in the DocPanel and editable via edit_document. In - // project chats we attach to the project so it appears in the - // sidebar; in the general chat we leave project_id null and it - // stays a standalone document. - const { data: docRow, error: docErr } = await db - .from("documents") - .insert({ - project_id: options?.projectId ?? null, - user_id: userId, - status: "ready", - }) - .select("id") - .single(); - if (docErr || !docRow) { - return { - error: `Failed to record generated document: ${docErr?.message ?? "unknown"}`, - }; - } - const documentId = docRow.id as string; - - const { data: versionRow, error: verErr } = await db - .from("document_versions") - .insert({ - document_id: documentId, - storage_path: key, - source: "generated", - version_number: 1, - filename: filename, - file_type: "docx", - size_bytes: buf.byteLength, - page_count: null, - }) - .select("id") - .single(); - if (verErr || !versionRow) { - return { - error: `Failed to record generated document version: ${verErr?.message ?? "unknown"}`, - }; - } - const versionId = versionRow.id as string; - - await db - .from("documents") - .update({ - current_version_id: versionId, - }) - .eq("id", documentId); - - return { - filename, - download_url: downloadUrl, - document_id: documentId, - version_id: versionId, - version_number: 1, - storage_path: key, - message: `Document '${filename}' has been generated successfully.`, - }; - } catch (e) { - return { error: String(e) }; - } -} - -// --------------------------------------------------------------------------- -// Document version helpers (DOCX tracked-change editing) -// --------------------------------------------------------------------------- - -/** - * Resolve the current .docx bytes for a document, preferring the active - * tracked-changes version if one exists, else the original upload. - */ -export async function loadCurrentVersionBytes( - documentId: string, - db: ReturnType<typeof createServerSupabase>, -): Promise<{ bytes: Buffer; storage_path: string } | null> { - const active = await loadActiveVersion(documentId, db); - if (!active) return null; - const raw = await downloadFile(active.storage_path); - if (!raw) return null; - return { bytes: Buffer.from(raw), storage_path: active.storage_path }; -} - -/** - * Ensure the document has a document_versions row for the current upload. - * Called before writing the first 'assistant_edit' row so the history is - * complete. Idempotent. - */ -export async function runEditDocument(params: { - documentId: string; - userId: string; - edits: EditInput[]; - db: ReturnType<typeof createServerSupabase>; - /** - * If provided, append these edits to the existing turn-scoped version - * (overwrites the file at storagePath and reuses the document_versions - * row) instead of creating a new version. Used to collapse multiple - * edit_document tool calls within a single assistant turn into one - * version. - */ - reuseVersion?: { - versionId: string; - versionNumber: number; - storagePath: string; - }; -}): Promise< - | { - ok: true; - version_id: string; - version_number: number; - storage_path: string; - download_url: string; - annotations: EditAnnotation[]; - errors: { index: number; reason: string }[]; - } - | { ok: false; error: string } -> { - const { documentId, userId, edits, db, reuseVersion } = params; - - const { data: doc } = await db - .from("documents") - .select("id") - .eq("id", documentId) - .single(); - if (!doc) return { ok: false, error: "Document not found." }; - - const activeVersion = await loadActiveVersion(documentId, db); - let versionFilename = - activeVersion?.filename?.trim() || "Untitled document"; - - const current = await loadCurrentVersionBytes(documentId, db); - if (!current) return { ok: false, error: "Could not load document bytes." }; - - const { - bytes: editedBytes, - changes, - errors, - } = await applyTrackedEdits(current.bytes, edits, { author: "Mike" }); - - if (changes.length === 0) { - return { - ok: false, - error: - errors[0]?.reason ?? - "No edits could be applied. Refine context_before/context_after and retry.", - }; - } - - const ab = editedBytes.buffer.slice( - editedBytes.byteOffset, - editedBytes.byteOffset + editedBytes.byteLength, - ) as ArrayBuffer; - - let versionRowId: string; - let newPath: string; - let nextVersionNumber: number; - - if (reuseVersion) { - // Overwrite the existing turn version's file in place. The version - // row, version_number, and current_version_id all already point here. - newPath = reuseVersion.storagePath; - versionRowId = reuseVersion.versionId; - nextVersionNumber = reuseVersion.versionNumber; - await uploadFile( - newPath, - ab, - "application/vnd.openxmlformats-officedocument.wordprocessingml.document", - ); - await db - .from("document_versions") - .update({ - file_type: "docx", - size_bytes: editedBytes.byteLength, - page_count: null, - }) - .eq("id", versionRowId); - } else { - const versionId = crypto.randomUUID().replace(/-/g, ""); - newPath = `documents/${userId}/${documentId}/edits/${versionId}.docx`; - await uploadFile( - newPath, - ab, - "application/vnd.openxmlformats-officedocument.wordprocessingml.document", - ); - - // Per-document sequential number for the new assistant_edit - // version. The counter spans upload + user_upload + assistant_edit - // so the original upload is V1 and the first assistant edit is V2. - const { data: maxRow } = await db - .from("document_versions") - .select("version_number") - .eq("document_id", documentId) - .in("source", ["upload", "user_upload", "assistant_edit"]) - .order("version_number", { ascending: false, nullsFirst: false }) - .limit(1) - .maybeSingle(); - nextVersionNumber = ((maxRow?.version_number as number | null) ?? 1) + 1; - - // Inherit the filename from the most recent prior version so - // user-applied renames carry forward through further edits. Malformed - // legacy rows without a filename get a neutral placeholder, not the - // parent document filename. We intentionally do NOT append "[Edited Vn]" - // — the version number is surfaced separately as a tag in the UI. - const { data: prevRow } = await db - .from("document_versions") - .select("filename, created_at") - .eq("document_id", documentId) - .order("created_at", { ascending: false }) - .limit(1) - .maybeSingle(); - const inheritedFilename = - (prevRow?.filename as string | null)?.trim() || "Untitled document"; - versionFilename = inheritedFilename; - - const { data: versionRow, error: verErr } = await db - .from("document_versions") - .insert({ - document_id: documentId, - storage_path: newPath, - source: "assistant_edit", - version_number: nextVersionNumber, - filename: inheritedFilename, - file_type: "docx", - size_bytes: editedBytes.byteLength, - page_count: null, - }) - .select("id") - .single(); - if (verErr || !versionRow) { - return { ok: false, error: "Failed to record document version." }; - } - versionRowId = versionRow.id as string; - } - - // Insert one row per change - const editRows = changes.map((c) => ({ - document_id: documentId, - version_id: versionRowId, - change_id: c.id, - del_w_id: c.delId ?? null, - ins_w_id: c.insId ?? null, - deleted_text: c.deletedText, - inserted_text: c.insertedText, - context_before: c.contextBefore ?? "", - context_after: c.contextAfter ?? "", - status: "pending" as const, - })); - const { data: insertedEdits, error: editsErr } = await db - .from("document_edits") - .insert(editRows) - .select( - "id, change_id, del_w_id, ins_w_id, deleted_text, inserted_text, context_before, context_after", - ); - - if (editsErr || !insertedEdits) { - return { ok: false, error: "Failed to record edits." }; - } - - await db - .from("documents") - .update({ - current_version_id: versionRowId, - }) - .eq("id", documentId); - - const annotations: EditAnnotation[] = insertedEdits.map( - (r: { - id: string; - change_id: string; - deleted_text: string; - inserted_text: string; - context_before: string | null; - context_after: string | null; - }) => { - const src = changes.find((c) => c.id === r.change_id); - return { - kind: "edit", - edit_id: r.id, - document_id: documentId, - version_id: versionRowId, - version_number: nextVersionNumber, - change_id: r.change_id, - del_w_id: src?.delId, - ins_w_id: src?.insId, - deleted_text: r.deleted_text ?? "", - inserted_text: r.inserted_text ?? "", - context_before: r.context_before ?? "", - context_after: r.context_after ?? "", - reason: src?.reason, - status: "pending", - }; - }, - ); - - // Persistent, non-expiring permalink. The backend streams fresh bytes - // on each request, so this URL stays valid as long as the file exists. - const resolvedFilename = versionFilename.trim() || "Untitled document.docx"; - const permalink = buildDownloadUrl(newPath, resolvedFilename); - - return { - ok: true, - version_id: versionRowId, - version_number: nextVersionNumber, - storage_path: newPath, - download_url: permalink, - annotations, - errors, - }; -} - -// --------------------------------------------------------------------------- -// Tool dispatch -// --------------------------------------------------------------------------- - -async function readDocumentContent( - docLabel: string, - docStore: DocStore, - write: (s: string) => void, - docIndex?: DocIndex, - db?: ReturnType<typeof createServerSupabase>, - opts?: { emitEvents?: boolean }, -): Promise<string> { - const emitEvents = opts?.emitEvents ?? true; - devLog(`[read_document] called with docLabel="${docLabel}"`); - const docInfo = docStore.get(docLabel); - if (!docInfo) { - devLog( - `[read_document] MISS — docLabel "${docLabel}" not in docStore. Known labels:`, - Array.from(docStore.keys()), - ); - return "Document not found."; - } - devLog( - `[read_document] docInfo: filename="${docInfo.filename}", file_type="${docInfo.file_type}", storage_path="${docInfo.storage_path}"`, - ); - - const documentId = docIndex?.[docLabel]?.document_id; - const emitDocRead = () => { - if (!emitEvents) return; - write( - `data: ${JSON.stringify({ - type: "doc_read", - filename: docInfo.filename, - document_id: documentId, - })}\n\n`, - ); - }; - if (emitEvents) - write( - `data: ${JSON.stringify({ - type: "doc_read_start", - filename: docInfo.filename, - document_id: documentId, - })}\n\n`, - ); - try { - // Prefer the current tracked-changes version (if any) so read_document - // reflects accepted/pending edits rather than the original upload. - let raw: ArrayBuffer | null = null; - let sourcePath = docInfo.storage_path; - if (documentId && db) { - const current = await loadCurrentVersionBytes(documentId, db); - if (current) { - raw = current.bytes.buffer.slice( - current.bytes.byteOffset, - current.bytes.byteOffset + current.bytes.byteLength, - ) as ArrayBuffer; - sourcePath = current.storage_path; - devLog( - `[read_document] using current version path="${sourcePath}" (bytes=${raw.byteLength})`, - ); - } else { - devLog( - `[read_document] loadCurrentVersionBytes returned null for documentId="${documentId}", falling back to original storage_path`, - ); - } - } - if (!raw) { - raw = await downloadFile(docInfo.storage_path); - if (raw) { - devLog( - `[read_document] fallback download from storage_path="${docInfo.storage_path}" (bytes=${raw.byteLength})`, - ); - } - } - if (!raw) { - devLog( - `[read_document] FAILED to download any bytes for docLabel="${docLabel}" (tried path="${sourcePath}")`, - ); - emitDocRead(); - return "Document could not be read."; - } - // Log the first 8 bytes so we can identify real file format regardless - // of the declared file_type. Valid .docx starts with "PK\x03\x04" - // (zip). Legacy .doc starts with "\xD0\xCF\x11\xE0" (OLE/CFB). - // %PDF-1 is a PDF even if mislabeled. Truncated uploads show as all-zero. - { - const head = Buffer.from(raw).subarray(0, 8); - const hex = head.toString("hex"); - const ascii = head.toString("binary").replace(/[^\x20-\x7e]/g, "."); - devLog( - `[read_document] magic bytes hex=${hex} ascii="${ascii}" for filename="${docInfo.filename}"`, - ); - } - let text: string; - if (docInfo.file_type === "pdf") { - text = await extractPdfText(raw); - devLog( - `[read_document] pdf extracted length=${text.length} for filename="${docInfo.filename}"`, - ); - } else if (docInfo.file_type === "docx") { - // Use the same flattening as the edit_document matcher so the - // LLM sees exactly the characters it can anchor against. - text = await extractDocxBodyText(Buffer.from(raw)); - devLog( - `[read_document] docx extractDocxBodyText length=${text.length} for filename="${docInfo.filename}"`, - ); - if (!text) { - devLog( - `[read_document] docx accepted-view extractor returned empty, falling back to mammoth for filename="${docInfo.filename}"`, - ); - const mammoth = await import("mammoth"); - const result = await mammoth.extractRawText({ - buffer: Buffer.from(raw), - }); - text = result.value; - devLog( - `[read_document] docx mammoth fallback length=${text.length} for filename="${docInfo.filename}"`, - ); - } - } else { - devLog( - `[read_document] unknown file_type="${docInfo.file_type}" for filename="${docInfo.filename}", trying mammoth`, - ); - const mammoth = await import("mammoth"); - const result = await mammoth.extractRawText({ - buffer: Buffer.from(raw), - }); - text = result.value; - devLog( - `[read_document] mammoth length=${text.length} for filename="${docInfo.filename}"`, - ); - } - devLog( - `[read_document] DONE filename="${docInfo.filename}" finalTextLength=${text.length} firstChars=${JSON.stringify(text.slice(0, 120))}`, - ); - emitDocRead(); - return text; - } catch (err) { - devLog( - `[read_document] THREW for docLabel="${docLabel}" filename="${docInfo.filename}":`, - err, - ); - if (emitEvents) - write( - `data: ${JSON.stringify({ type: "doc_read", filename: docInfo.filename })}\n\n`, - ); - return "Document could not be read."; - } -} - -/** - * Build a whitespace-collapsed, lowercased copy of `text`, plus a map from - * each character index in the normalized form back to the corresponding - * index in the original text. Used by `findInDocumentContent` so matches - * are tolerant of case + whitespace variance but can still return the - * exact original excerpt. - */ -function normalizeWithMap(text: string): { norm: string; origIdx: number[] } { - const norm: string[] = []; - const origIdx: number[] = []; - let prevSpace = false; - for (let i = 0; i < text.length; i++) { - const ch = text[i]; - if (/\s/.test(ch)) { - if (!prevSpace) { - norm.push(" "); - origIdx.push(i); - prevSpace = true; - } - } else { - norm.push(ch.toLowerCase()); - origIdx.push(i); - prevSpace = false; - } - } - return { norm: norm.join(""), origIdx }; -} - -function normalizeQuery(q: string): string { - return q.trim().replace(/\s+/g, " ").toLowerCase(); -} - -type TextMatch = { - index: number; - excerpt: string; - context: string; -}; - -function findTextMatches(params: { - text: string; - query: string; - maxResults: number; - contextChars: number; - startIndex?: number; -}): { hits: TextMatch[]; totalMatches: number } { - const { text, query, maxResults, contextChars, startIndex = 0 } = params; - const { norm, origIdx } = normalizeWithMap(text); - const needle = normalizeQuery(query); - const hits: TextMatch[] = []; - let totalMatches = 0; - if (!needle) return { hits, totalMatches }; - - let from = 0; - while (from <= norm.length - needle.length) { - const pos = norm.indexOf(needle, from); - if (pos < 0) break; - const endNormPos = pos + needle.length; - const origStart = origIdx[pos] ?? 0; - const origEnd = - endNormPos - 1 < origIdx.length - ? origIdx[endNormPos - 1] + 1 - : text.length; - if (hits.length < maxResults) { - const ctxStart = Math.max(0, origStart - contextChars); - const ctxEnd = Math.min(text.length, origEnd + contextChars); - hits.push({ - index: startIndex + hits.length, - excerpt: text.slice(origStart, origEnd), - context: - (ctxStart > 0 ? "…" : "") + - text.slice(ctxStart, ctxEnd).replace(/\s+/g, " ").trim() + - (ctxEnd < text.length ? "…" : ""), - }); - } - totalMatches++; - from = pos + Math.max(1, needle.length); - } - - return { hits, totalMatches }; -} - -/** - * Ctrl+F helper. Returns a JSON-serializable result with up to `maxResults` - * hits, each containing the original-text excerpt plus surrounding context. - */ -async function findInDocumentContent(params: { - docLabel: string; - query: string; - maxResults?: number; - contextChars?: number; - docStore: DocStore; - write: (s: string) => void; - docIndex?: DocIndex; - db?: ReturnType<typeof createServerSupabase>; -}): Promise<string> { - const { - docLabel, - query, - maxResults = 20, - contextChars = 80, - docStore, - write, - docIndex, - db, - } = params; - - if (!query || !query.trim()) { - return JSON.stringify({ ok: false, error: "Empty query." }); - } - - const docInfo = docStore.get(docLabel); - if (!docInfo) { - return JSON.stringify({ - ok: false, - error: `Document '${docLabel}' not found.`, - }); - } - - // Announce the search to the UI, then reuse readDocumentContent for its - // fallbacks — but suppress its own doc_read events so the user only sees - // the doc_find block (not a competing doc_read block for the same op). - write( - `data: ${JSON.stringify({ - type: "doc_find_start", - filename: docInfo.filename, - query, - })}\n\n`, - ); - - const text = await readDocumentContent( - docLabel, - docStore, - write, - docIndex, - db, - { emitEvents: false }, - ); - if (!text || text === "Document could not be read.") { - write( - `data: ${JSON.stringify({ - type: "doc_find", - filename: docInfo.filename, - query, - total_matches: 0, - })}\n\n`, - ); - return JSON.stringify({ - ok: false, - filename: docInfo.filename, - error: "Document could not be read.", - }); - } - - const needle = normalizeQuery(query); - if (!needle) { - return JSON.stringify({ - ok: false, - error: "Empty query after normalization.", - }); - } - - const { hits, totalMatches } = findTextMatches({ - text, - query, - maxResults, - contextChars, - }); - - write( - `data: ${JSON.stringify({ - type: "doc_find", - filename: docInfo.filename, - query, - total_matches: totalMatches, - })}\n\n`, - ); - - return JSON.stringify({ - ok: true, - filename: docInfo.filename, - query, - total_matches: totalMatches, - returned: hits.length, - truncated: totalMatches > hits.length, - hits, - }); -} - -export type DocEditedResult = { - filename: string; - document_id: string; - version_id: string; - version_number: number | null; - download_url: string; - annotations: EditAnnotation[]; -}; - -export type TurnEditState = Map< - string, - { versionId: string; versionNumber: number; storagePath: string } ->; - -export type DocCreatedResult = { - filename: string; - download_url: string; - document_id?: string; - version_id?: string; - version_number?: number | null; -}; - -export type DocReplicatedResult = { - /** Filename of the source document being copied. */ - filename: string; - /** How many copies were produced in this single tool call. */ - count: number; - /** One entry per new copy. */ - copies: { - new_filename: string; - document_id: string; - version_id: string; - }[]; -}; - -type CourtlistenerCaseRecord = { - clusterId: number; - caseName: string | null; - citations: string[]; - url: string | null; - pdfUrl: string | null; - dateFiled: string | null; - opinions?: unknown[]; -}; - -type CourtlistenerCaseInput = { - clusterId?: number | null; - caseName?: string | null; - citation?: string | null; - citations?: string[]; - url?: string | null; - pdfUrl?: string | null; - dateFiled?: string | null; - opinions?: unknown[]; -}; - -type CourtlistenerTurnState = { - casesByClusterId: Map<number, CourtlistenerCaseRecord>; -}; - -function nonEmpty(value: unknown): string | null { - return typeof value === "string" && value.trim() ? value.trim() : null; -} - -function upsertCourtlistenerCases( - state: CourtlistenerTurnState, - inputs: CourtlistenerCaseInput[], -): CourtlistenerCaseRecord[] { - const records: CourtlistenerCaseRecord[] = []; - for (const input of inputs) { - if (typeof input.clusterId !== "number" || !Number.isFinite(input.clusterId)) { - continue; - } - const clusterId = Math.floor(input.clusterId); - const current = - state.casesByClusterId.get(clusterId) ?? - { - clusterId, - caseName: null, - citations: [], - url: null, - pdfUrl: null, - dateFiled: null, - }; - const nextCitations = [ - ...current.citations, - ...(input.citation ? [input.citation] : []), - ...(input.citations ?? []), - ] - .map(nonEmpty) - .filter((value): value is string => !!value); - const record: CourtlistenerCaseRecord = { - ...current, - caseName: current.caseName ?? nonEmpty(input.caseName), - citations: Array.from(new Set(nextCitations)), - url: current.url ?? nonEmpty(input.url), - pdfUrl: current.pdfUrl ?? nonEmpty(input.pdfUrl), - dateFiled: current.dateFiled ?? nonEmpty(input.dateFiled), - opinions: current.opinions ?? input.opinions, - }; - state.casesByClusterId.set(clusterId, record); - records.push(record); - } - return records; -} - -function caseCitationEventFromRecord( - record: CourtlistenerCaseRecord, -): CaseCitationEvent | null { - if (!record.url) return null; - return { - type: "case_citation", - cluster_id: record.clusterId, - case_name: record.caseName, - citation: record.citations[0] ?? null, - url: record.url, - pdfUrl: record.pdfUrl, - dateFiled: record.dateFiled, - }; -} - -function recordFromUnknown(value: unknown): Record<string, unknown> | null { - return value && typeof value === "object" && !Array.isArray(value) - ? (value as Record<string, unknown>) - : null; -} - -function stringField( - record: Record<string, unknown> | null, - key: string, -): string | null { - const value = record?.[key]; - return typeof value === "string" ? value : null; -} - -function numberField( - record: Record<string, unknown> | null, - key: string, -): number | null { - const value = record?.[key]; - return typeof value === "number" && Number.isFinite(value) - ? Math.floor(value) - : null; -} - -function stringArrayField( - record: Record<string, unknown> | null, - key: string, -): string[] { - const value = record?.[key]; - return Array.isArray(value) - ? value.filter((item): item is string => typeof item === "string") - : []; -} - -function courtlistenerCaseInputFromFetchedCase( - fallbackClusterId: number, - fetchedCase: unknown, -): CourtlistenerCaseInput { - const record = recordFromUnknown(fetchedCase); - const clusterId = - numberField(record, "clusterId") ?? numberField(record, "id") ?? fallbackClusterId; - return { - clusterId, - caseName: stringField(record, "caseName"), - citations: stringArrayField(record, "citations"), - url: stringField(record, "url"), - pdfUrl: stringField(record, "pdfUrl"), - dateFiled: stringField(record, "dateFiled"), - opinions: Array.isArray(record?.opinions) ? record.opinions : undefined, - }; -} - -function courtlistenerOpinionCount(fetchedCase: unknown): number { - const record = recordFromUnknown(fetchedCase); - return Array.isArray(record?.opinions) ? record.opinions.length : 0; -} - -function courtlistenerOpinionMetadata(raw: unknown) { - const opinion = recordFromUnknown(raw); - if (!opinion) return null; - const text = - stringField(opinion, "text") ?? - (stringField(opinion, "html") - ? stripCaseOpinionHtml(stringField(opinion, "html")!) - : null); - return { - opinion_id: - numberField(opinion, "opinionId") ?? numberField(opinion, "id"), - type: stringField(opinion, "type"), - author: stringField(opinion, "author"), - per_curiam: stringField(opinion, "per_curiam"), - joined_by_str: stringField(opinion, "joined_by_str"), - url: stringField(opinion, "url"), - char_count: text?.length ?? 0, - }; -} - -function courtlistenerFetchedCaseMetadata( - record: CourtlistenerCaseRecord, - opinionCount: number, -) { - return { - cluster_id: record.clusterId, - case_name: record.caseName, - citation: record.citations[0] ?? null, - citations: record.citations, - dateFiled: record.dateFiled, - url: record.url, - pdfUrl: record.pdfUrl, - opinion_count: opinionCount, - opinions: (record.opinions ?? []) - .map(courtlistenerOpinionMetadata) - .filter((opinion): opinion is NonNullable<typeof opinion> => !!opinion), - }; -} - -function stripCaseOpinionHtml(value: string): string { - return value - .replace(/<style[\s\S]*?<\/style>/gi, " ") - .replace(/<script[\s\S]*?<\/script>/gi, " ") - .replace(/<[^>]+>/g, " ") - .replace(/ /g, " ") - .replace(/&/g, "&") - .replace(/</g, "<") - .replace(/>/g, ">") - .replace(/"/g, '"') - .replace(/'/g, "'") - .replace(/\s+/g, " ") - .trim(); -} - -type CachedCaseOpinionText = { - opinion_id: number | null; - type: string | null; - author: string | null; - url: string | null; - text: string; -}; - -function cachedCaseOpinionTexts( - record: CourtlistenerCaseRecord, -): CachedCaseOpinionText[] { - return (record.opinions ?? []) - .map((raw) => { - const opinion = recordFromUnknown(raw); - if (!opinion) return null; - const text = - stringField(opinion, "text") ?? - (stringField(opinion, "html") - ? stripCaseOpinionHtml(stringField(opinion, "html")!) - : null); - if (!text) return null; - return { - opinion_id: - numberField(opinion, "opinionId") ?? numberField(opinion, "id"), - type: stringField(opinion, "type"), - author: stringField(opinion, "author"), - url: stringField(opinion, "url"), - text, - }; - }) - .filter((opinion): opinion is CachedCaseOpinionText => !!opinion); -} - -function requestedCourtlistenerOpinionIds(args: Record<string, unknown>) { - const rawIds = Array.isArray(args.opinionIds) - ? args.opinionIds - : Array.isArray(args.opinion_ids) - ? args.opinion_ids - : typeof args.opinionId === "number" - ? [args.opinionId] - : typeof args.opinion_id === "number" - ? [args.opinion_id] - : []; - return Array.from( - new Set( - rawIds - .filter((value): value is number => typeof value === "number") - .filter((value) => Number.isFinite(value) && value > 0) - .map((value) => Math.floor(value)), - ), - ); -} - -type FindInCaseArgs = { - clusterId: number | null; - query: string; - maxResults: number; - contextChars: number; -}; - -function parseFindInCaseArgs(args: Record<string, unknown>): FindInCaseArgs { - return { - clusterId: - typeof args.clusterId === "number" && Number.isFinite(args.clusterId) - ? Math.floor(args.clusterId) - : typeof args.cluster_id === "number" && Number.isFinite(args.cluster_id) - ? Math.floor(args.cluster_id) - : null, - query: typeof args.query === "string" ? args.query : "", - maxResults: - typeof args.max_results === "number" - ? Math.max(0, Math.floor(args.max_results)) - : 20, - contextChars: - typeof args.context_chars === "number" - ? Math.max(0, Math.floor(args.context_chars)) - : 160, - }; -} - -function findInCaseSearchSummary( - event: Extract<CourtlistenerToolEvent, { type: "courtlistener_find_in_case" }>, -) { - return { - cluster_id: event.cluster_id, - query: event.query, - total_matches: event.total_matches, - case_name: event.case_name, - citation: event.citation, - error: event.error, - }; -} - -function cachedCaseNotFetchedResult(clusterId: number | null) { - return { - ok: false, - cluster_id: clusterId, - error: - "Case has not been fetched in this turn. Call courtlistener_get_cases first.", - }; -} - -export async function runToolCalls( - toolCalls: ToolCall[], - docStore: DocStore, - userId: string, - db: ReturnType<typeof createServerSupabase>, - write: (s: string) => void, - workflowStore?: WorkflowStore, - tabularStore?: TabularCellStore, - docIndex?: DocIndex, - turnEditState?: TurnEditState, - projectId?: string | null, - courtlistenerState?: CourtlistenerTurnState, - apiKeys?: import("./llm").UserApiKeys, -): Promise<{ - toolResults: unknown[]; - docsRead: { filename: string; document_id?: string }[]; - docsFound: { filename: string; query: string; total_matches: number }[]; - docsCreated: DocCreatedResult[]; - docsReplicated: DocReplicatedResult[]; - workflowsApplied: { workflow_id: string; title: string }[]; - docsEdited: DocEditedResult[]; - courtlistenerEvents: CourtlistenerToolEvent[]; - caseCitationEvents: CaseCitationEvent[]; - mcpEvents: McpToolEvent[]; -}> { - const toolResults: unknown[] = []; - const docsRead: { filename: string; document_id?: string }[] = []; - const docsFound: { - filename: string; - query: string; - total_matches: number; - }[] = []; - const docsCreated: DocCreatedResult[] = []; - const docsReplicated: DocReplicatedResult[] = []; - const workflowsApplied: { workflow_id: string; title: string }[] = []; - const docsEdited: DocEditedResult[] = []; - const courtlistenerEvents: CourtlistenerToolEvent[] = []; - const caseCitationEvents: CaseCitationEvent[] = []; - const mcpEvents: McpToolEvent[] = []; - const courtState: CourtlistenerTurnState = - courtlistenerState ?? - { - casesByClusterId: new Map(), - }; - const groupedFindInCaseSearches = toolCalls - .filter((tc) => tc.function.name === COURTLISTENER_TOOL_NAMES.findInCase) - .map((tc) => { - let rawArgs: Record<string, unknown> = {}; - try { - rawArgs = JSON.parse(tc.function.arguments || "{}"); - } catch { - /* ignore */ - } - const parsed = parseFindInCaseArgs(rawArgs); - return { - cluster_id: parsed.clusterId, - query: parsed.query, - total_matches: 0, - }; - }); - const shouldGroupFindInCase = groupedFindInCaseSearches.length > 1; - let groupedFindInCaseStarted = false; - const groupedFindInCaseEvents: Extract< - CourtlistenerToolEvent, - { type: "courtlistener_find_in_case" } - >[] = []; - - for (const tc of toolCalls) { - let args: Record<string, unknown> = {}; - try { - args = JSON.parse(tc.function.arguments || "{}"); - } catch { - /* ignore */ - } - - if (tc.function.name.startsWith("mcp_")) { - write( - `data: ${JSON.stringify({ - type: "mcp_tool_start", - name: tc.function.name, - })}\n\n`, - ); - const { content, event } = await executeMcpToolCall( - userId, - tc.function.name, - args, - db, - ); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content, - }); - mcpEvents.push(event); - write( - `data: ${JSON.stringify({ - type: "mcp_tool_result", - name: tc.function.name, - connector_name: event.connector_name, - tool_name: event.tool_name, - status: event.status, - error: event.error, - })}\n\n`, - ); - continue; - } - - if (tc.function.name === "read_document") { - const rawDocId = args.doc_id as string; - const docId = resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; - const content = await readDocumentContent( - docId, - docStore, - write, - docIndex, - db, - ); - const filename = docStore.get(docId)?.filename; - const documentId = docIndex?.[docId]?.document_id; - if (filename) docsRead.push({ filename, document_id: documentId }); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: filename - ? `${citationReminder(docId, filename)}\n\n${content}` - : content, - }); - } else if (tc.function.name === "find_in_document") { - const rawDocId = args.doc_id as string; - const docId = resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; - const query = (args.query as string) ?? ""; - const maxResults = - typeof args.max_results === "number" ? args.max_results : undefined; - const contextChars = - typeof args.context_chars === "number" ? args.context_chars : undefined; - const content = await findInDocumentContent({ - docLabel: docId, - query, - maxResults, - contextChars, - docStore, - write, - docIndex, - db, - }); - const filename = docStore.get(docId)?.filename; - if (filename) { - let totalMatches = 0; - try { - const parsed = JSON.parse(content) as { - total_matches?: number; - }; - totalMatches = parsed.total_matches ?? 0; - } catch { - /* ignore — still record the find attempt */ - } - docsFound.push({ - filename, - query, - total_matches: totalMatches, - }); - } - toolResults.push({ role: "tool", tool_call_id: tc.id, content }); - } else if (tc.function.name === "list_documents") { - const list = Array.from(docStore.entries()).map(([doc_id, info]) => ({ - doc_id, - filename: info.filename, - file_type: info.file_type, - })); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(list), - }); - } else if (tc.function.name === "fetch_documents") { - const rawDocIds = (args.doc_ids as string[]) ?? []; - const docIds = rawDocIds.map( - (id) => resolveDocLabel(id, docStore, docIndex) ?? id, - ); - const parts: string[] = []; - for (const docId of docIds) { - const content = await readDocumentContent( - docId, - docStore, - write, - docIndex, - db, - ); - const filename = docStore.get(docId)?.filename ?? docId; - parts.push( - `--- ${filename} (${docId}) ---\n${citationReminder(docId, filename)}\n\n${content}`, - ); - if (docStore.get(docId)) { - const documentId = docIndex?.[docId]?.document_id; - docsRead.push({ filename, document_id: documentId }); - } - } - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: parts.join("\n\n"), - }); - } else if (tc.function.name === "list_workflows") { - const list = workflowStore - ? Array.from(workflowStore.entries()).map(([id, w]) => ({ - id, - title: w.title, - })) - : []; - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(list), - }); - } else if (tc.function.name === "read_workflow") { - const wfId = args.workflow_id as string; - const wf = workflowStore?.get(wfId); - if (wf) { - write( - `data: ${JSON.stringify({ type: "workflow_applied", workflow_id: wfId, title: wf.title })}\n\n`, - ); - workflowsApplied.push({ workflow_id: wfId, title: wf.title }); - } - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: wf ? wf.prompt_md : `Workflow '${wfId}' not found.`, - }); - } else if (tc.function.name === "read_table_cells" && tabularStore) { - const colIndices = args.col_indices as number[] | undefined; - const rowIndices = args.row_indices as number[] | undefined; - - const filteredCols = colIndices?.length - ? tabularStore.columns.filter((_, i) => colIndices.includes(i)) - : tabularStore.columns; - const filteredDocs = rowIndices?.length - ? tabularStore.documents.filter((_, i) => rowIndices.includes(i)) - : tabularStore.documents; - - const label = `${filteredCols.length} ${filteredCols.length === 1 ? "column" : "columns"} × ${filteredDocs.length} ${filteredDocs.length === 1 ? "row" : "rows"}`; - write( - `data: ${JSON.stringify({ type: "doc_read_start", filename: label })}\n\n`, - ); - - const lines: string[] = []; - for (const col of filteredCols) { - const colPos = tabularStore.columns.findIndex( - (c) => c.index === col.index, - ); - for (const doc of filteredDocs) { - const rowPos = tabularStore.documents.findIndex( - (d) => d.id === doc.id, - ); - const cell = tabularStore.cells.get(`${col.index}:${doc.id}`); - lines.push( - `[COL:${colPos} "${col.name}" | ROW:${rowPos} "${doc.filename}"]`, - ); - if (cell?.summary) { - lines.push(`Summary: ${cell.summary}`); - if (cell.flag) lines.push(`Flag: ${cell.flag}`); - if (cell.reasoning) lines.push(`Reasoning: ${cell.reasoning}`); - } else { - lines.push(`(not yet generated)`); - } - lines.push(""); - } - } - - write( - `data: ${JSON.stringify({ type: "doc_read", filename: label })}\n\n`, - ); - docsRead.push({ filename: label }); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: lines.join("\n") || "No cells found.", - }); - } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.searchCaseLaw) { - const query = typeof args.query === "string" ? args.query : ""; - write( - `data: ${JSON.stringify({ type: "courtlistener_search_case_law_start", query })}\n\n`, - ); - try { - const result = await searchCourtlistenerCaseLaw({ - query: query || undefined, - court: typeof args.court === "string" ? args.court : undefined, - filedAfter: - typeof args.filedAfter === "string" ? args.filedAfter : undefined, - filedBefore: - typeof args.filedBefore === "string" ? args.filedBefore : undefined, - limit: typeof args.limit === "number" ? args.limit : undefined, - apiToken: apiKeys?.courtlistener, - }); - const resultCount = - result && - typeof result === "object" && - Array.isArray((result as { results?: unknown }).results) - ? (result as { results: unknown[] }).results.length - : 0; - const error = - result && - typeof result === "object" && - typeof (result as { error?: unknown }).error === "string" - ? (result as { error: string }).error - : undefined; - const event: CourtlistenerToolEvent = { - type: "courtlistener_search_case_law", - query, - result_count: resultCount, - ...(error ? { error } : {}), - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(result), - }); - } catch (err) { - const event: CourtlistenerToolEvent = { - type: "courtlistener_search_case_law", - query, - result_count: 0, - error: - err instanceof Error ? err.message : "CourtListener search failed.", - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - error: - err instanceof Error - ? err.message - : "CourtListener search failed.", - }), - }); - } - } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.getCases) { - const rawClusterIds = Array.isArray(args.clusterIds) - ? args.clusterIds - : Array.isArray(args.cluster_ids) - ? args.cluster_ids - : typeof args.clusterId === "number" - ? [args.clusterId] - : []; - const clusterIds = Array.from( - new Set( - rawClusterIds - .filter((value): value is number => typeof value === "number") - .filter((value) => Number.isFinite(value) && value > 0) - .map((value) => Math.floor(value)), - ), - ); - write( - `data: ${JSON.stringify({ type: "courtlistener_get_cases_start", cluster_ids: clusterIds })}\n\n`, - ); - try { - const result = await getCourtlistenerCases({ - clusterIds, - db, - apiToken: apiKeys?.courtlistener, - }); - const fetchedCases = - result && - typeof result === "object" && - Array.isArray((result as { cases?: unknown }).cases) - ? (result as { cases: unknown[] }).cases - : []; - fetchedCases.forEach((fetchedCase, index) => { - const clusterId = - courtlistenerCaseInputFromFetchedCase( - clusterIds[index] ?? 0, - fetchedCase, - ).clusterId ?? 0; - if (clusterId) { - write( - `data: ${JSON.stringify({ type: "case_opinions", cluster_id: clusterId, case: fetchedCase })}\n\n`, - ); - } - }); - const caseRecords = upsertCourtlistenerCases( - courtState, - fetchedCases.map((fetchedCase, index) => - courtlistenerCaseInputFromFetchedCase( - clusterIds[index] ?? 0, - fetchedCase, - ), - ), - ); - const opinionCount = fetchedCases.reduce<number>( - (sum, fetchedCase) => sum + courtlistenerOpinionCount(fetchedCase), - 0, - ); - const caseOpinionCountByClusterId = new Map<number, number>(); - fetchedCases.forEach((fetchedCase, index) => { - const clusterId = - courtlistenerCaseInputFromFetchedCase( - clusterIds[index] ?? 0, - fetchedCase, - ).clusterId ?? 0; - if (clusterId) { - caseOpinionCountByClusterId.set( - clusterId, - courtlistenerOpinionCount(fetchedCase), - ); - } - }); - const errors = fetchedCases - .map((fetchedCase) => - stringField(recordFromUnknown(fetchedCase), "error"), - ) - .filter((error): error is string => !!error); - const resultError = - result && - typeof result === "object" && - typeof (result as { error?: unknown }).error === "string" - ? (result as { error: string }).error - : undefined; - const hasMultipleOpinionCase = caseRecords.some( - (record) => - (caseOpinionCountByClusterId.get(record.clusterId) ?? 0) > 1, - ); - const event: CourtlistenerToolEvent = { - type: "courtlistener_get_cases", - cluster_ids: clusterIds, - case_count: fetchedCases.length, - opinion_count: opinionCount, - cases: caseRecords.map((record) => ({ - cluster_id: record.clusterId, - case_name: record.caseName, - citation: record.citations[0] ?? null, - dateFiled: record.dateFiled, - url: record.url, - })), - ...(resultError || errors.length - ? { error: resultError ?? errors.join("; ") } - : {}), - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - ok: !resultError && errors.length === 0, - cluster_ids: clusterIds, - case_count: fetchedCases.length, - opinion_count: opinionCount, - cases: caseRecords.map((record) => - courtlistenerFetchedCaseMetadata( - record, - caseOpinionCountByClusterId.get(record.clusterId) ?? 0, - ), - ), - ...(resultError || errors.length - ? { error: resultError ?? errors.join("; ") } - : {}), - next_required_action: hasMultipleOpinionCase - ? "Opinion text is cached server-side only. Use courtlistener_find_in_case with short 1-3 word keyword probes for relevant passages. At least one fetched case has multiple opinions; if snippets are insufficient, choose the needed opinion_id(s) from the text-free opinion metadata and call courtlistener_read_case with only those IDs. Do not read all opinions unless the question requires it." - : "Opinion text is cached server-side only. Use courtlistener_find_in_case with short 1-3 word keyword probes for relevant passages, or courtlistener_read_case if snippets are insufficient.", - }), - }); - } catch (err) { - const event: CourtlistenerToolEvent = { - type: "courtlistener_get_cases", - cluster_ids: clusterIds, - case_count: 0, - opinion_count: 0, - error: - err instanceof Error - ? err.message - : "CourtListener case fetch failed.", - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - error: - err instanceof Error - ? err.message - : "CourtListener case fetch failed.", - }), - }); - } - } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.findInCase) { - const { clusterId, query, maxResults, contextChars } = - parseFindInCaseArgs(args); - if (shouldGroupFindInCase) { - if (!groupedFindInCaseStarted) { - write( - `data: ${JSON.stringify({ - type: "courtlistener_find_in_case_start", - cluster_id: null, - query: "", - searches: groupedFindInCaseSearches, - })}\n\n`, - ); - groupedFindInCaseStarted = true; - } - } else { - write( - `data: ${JSON.stringify({ type: "courtlistener_find_in_case_start", cluster_id: clusterId, query })}\n\n`, - ); - } - - const record = - typeof clusterId === "number" ? courtState.casesByClusterId.get(clusterId) : undefined; - if (!record) { - const payload = cachedCaseNotFetchedResult(clusterId); - const event: CourtlistenerToolEvent = { - type: "courtlistener_find_in_case", - cluster_id: clusterId, - query, - total_matches: 0, - error: payload.error, - }; - if (shouldGroupFindInCase) { - groupedFindInCaseEvents.push(event); - } else { - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - } - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(payload), - }); - continue; - } - - const opinions = cachedCaseOpinionTexts(record); - const hits: Array< - TextMatch & { - opinion_id: number | null; - type: string | null; - author: string | null; - url: string | null; - } - > = []; - let totalMatches = 0; - for (const opinion of opinions) { - const remaining = Math.max(0, maxResults - hits.length); - const result = findTextMatches({ - text: opinion.text, - query, - maxResults: remaining, - contextChars, - startIndex: hits.length, - }); - totalMatches += result.totalMatches; - hits.push( - ...result.hits.map((hit) => ({ - ...hit, - opinion_id: opinion.opinion_id, - type: opinion.type, - author: opinion.author, - url: opinion.url, - })), - ); - } - - const event: CourtlistenerToolEvent = { - type: "courtlistener_find_in_case", - cluster_id: record.clusterId, - query, - total_matches: totalMatches, - case_name: record.caseName, - citation: record.citations[0] ?? null, - }; - if (shouldGroupFindInCase) { - groupedFindInCaseEvents.push(event); - } else { - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - } - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - ok: true, - cluster_id: record.clusterId, - case_name: record.caseName, - citation: record.citations[0] ?? null, - query, - total_matches: totalMatches, - returned: hits.length, - truncated: totalMatches > hits.length, - hits, - }), - }); - } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.readCase) { - const clusterId = - typeof args.clusterId === "number" && Number.isFinite(args.clusterId) - ? Math.floor(args.clusterId) - : typeof args.cluster_id === "number" && - Number.isFinite(args.cluster_id) - ? Math.floor(args.cluster_id) - : null; - write( - `data: ${JSON.stringify({ type: "courtlistener_read_case_start", cluster_id: clusterId })}\n\n`, - ); - - const record = - typeof clusterId === "number" ? courtState.casesByClusterId.get(clusterId) : undefined; - if (!record) { - const payload = cachedCaseNotFetchedResult(clusterId); - const event: CourtlistenerToolEvent = { - type: "courtlistener_read_case", - cluster_id: clusterId, - opinion_count: 0, - error: payload.error, - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(payload), - }); - continue; - } - - const opinions = cachedCaseOpinionTexts(record); - const requestedOpinionIds = requestedCourtlistenerOpinionIds(args); - const selectedOpinions = - requestedOpinionIds.length > 0 - ? opinions.filter( - (opinion) => - typeof opinion.opinion_id === "number" && - requestedOpinionIds.includes(opinion.opinion_id), - ) - : opinions.length === 1 - ? opinions - : []; - if (!selectedOpinions.length) { - const multipleOpinions = opinions.length > 1; - const payload = { - ok: false, - cluster_id: record.clusterId, - case_name: record.caseName, - citations: record.citations, - url: record.url, - dateFiled: record.dateFiled, - opinion_count: opinions.length, - opinions: (record.opinions ?? []) - .map(courtlistenerOpinionMetadata) - .filter( - (opinion): opinion is NonNullable<typeof opinion> => - !!opinion, - ), - error: multipleOpinions - ? "Multiple opinions are available. Call courtlistener_read_case again with the opinionId or opinionIds needed." - : "No matching opinion_id was found for this fetched case.", - }; - const event: CourtlistenerToolEvent = { - type: "courtlistener_read_case", - cluster_id: record.clusterId, - case_name: record.caseName, - citation: record.citations[0] ?? null, - opinion_count: 0, - error: payload.error, - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(payload), - }); - continue; - } - - const event: CourtlistenerToolEvent = { - type: "courtlistener_read_case", - cluster_id: record.clusterId, - case_name: record.caseName, - citation: record.citations[0] ?? null, - opinion_count: selectedOpinions.length, - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - ok: true, - cluster_id: record.clusterId, - case_name: record.caseName, - citations: record.citations, - url: record.url, - dateFiled: record.dateFiled, - opinion_count: opinions.length, - returned_opinion_count: selectedOpinions.length, - opinions: selectedOpinions, - }), - }); - } else if (tc.function.name === COURTLISTENER_TOOL_NAMES.verifyCitations) { - const citations = Array.isArray(args.citations) - ? args.citations.filter( - (value): value is string => typeof value === "string", - ) - : []; - const citationCount = citations.length; - write( - `data: ${JSON.stringify({ type: "courtlistener_verify_citations_start", citation_count: citationCount })}\n\n`, - ); - try { - const result = (await verifyCourtlistenerCitations({ - citations, - db, - apiToken: apiKeys?.courtlistener, - })) as { - citationLinks?: { - clusterId?: number | null; - citation?: string | null; - caseName?: string | null; - dateFiled?: string | null; - pdfUrl?: string | null; - url?: string | null; - markdown?: string; - }[]; - results?: unknown[]; - error?: string; - source?: string; - [key: string]: unknown; - }; - if (Array.isArray(result.citationLinks)) { - const caseRecords = upsertCourtlistenerCases( - courtState, - result.citationLinks.map((link) => ({ - clusterId: link.clusterId, - caseName: link.caseName, - citation: link.citation, - url: link.url, - pdfUrl: link.pdfUrl, - dateFiled: link.dateFiled, - })), - ); - const recordsByClusterId = new Map( - caseRecords.map((record) => [record.clusterId, record]), - ); - result.citationLinks = result.citationLinks.map((link) => { - if (!link.url) return link; - const href = - typeof link.clusterId === "number" - ? `us-case-${link.clusterId}` - : link.url; - const label = [link.caseName, link.citation] - .filter(Boolean) - .join(", "); - const record = - typeof link.clusterId === "number" - ? recordsByClusterId.get(link.clusterId) - : undefined; - if (record) { - const event = caseCitationEventFromRecord(record); - if (event) { - caseCitationEvents.push(event); - write(`data: ${JSON.stringify(event)}\n\n`); - } - } - return { - ...link, - markdown: `[${label || link.url}](${href})`, - }; - }); - } - const rows = - result && - typeof result === "object" && - Array.isArray((result as { results?: unknown }).results) - ? (result as { results: unknown[] }).results - : []; - const matchCount = rows.reduce<number>((count, row) => { - if (!row || typeof row !== "object") return count; - const clusters = (row as { clusters?: unknown }).clusters; - return count + (Array.isArray(clusters) ? clusters.length : 0); - }, 0); - const error = - result && - typeof result === "object" && - typeof (result as { error?: unknown }).error === "string" - ? (result as { error: string }).error - : undefined; - const event: CourtlistenerToolEvent = { - type: "courtlistener_verify_citations", - citation_count: citationCount, - match_count: matchCount, - ...(error ? { error } : {}), - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(result), - }); - } catch (err) { - const event: CourtlistenerToolEvent = { - type: "courtlistener_verify_citations", - citation_count: citationCount, - match_count: 0, - error: - err instanceof Error - ? err.message - : "CourtListener citation lookup failed.", - }; - write(`data: ${JSON.stringify(event)}\n\n`); - courtlistenerEvents.push(event); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - error: - err instanceof Error - ? err.message - : "CourtListener citation lookup failed.", - }), - }); - } - } else if (tc.function.name === "edit_document" && docIndex) { - const rawDocId = args.doc_id as string; - const editsRaw = args.edits as unknown[] | undefined; - const docId = resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; - const docInfo = docStore.get(docId); - const indexed = docIndex?.[docId]; - - const emitEditError = ( - filename: string, - documentId: string, - error: string, - ) => { - // Surface the failure as a failed "Edited" block in the UI - // (start → done-with-error) so it matches the shape the - // success/late-failure paths already use. - write( - `data: ${JSON.stringify({ - type: "doc_edited_start", - filename, - })}\n\n`, - ); - write( - `data: ${JSON.stringify({ - type: "doc_edited", - filename, - document_id: documentId, - version_id: "", - download_url: "", - annotations: [], - error, - })}\n\n`, - ); - }; - - if (!docInfo || !indexed) { - const err = `Document '${docId}' not found in this chat's attachments.`; - emitEditError(docId, indexed?.document_id ?? "", err); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ error: err }), - }); - } else if (!Array.isArray(editsRaw) || editsRaw.length === 0) { - const err = "edits array is required and must not be empty."; - emitEditError(docInfo.filename, indexed.document_id, err); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ error: err }), - }); - } else if (docInfo.file_type !== "docx") { - const err = "edit_document only supports .docx files."; - emitEditError(docInfo.filename, indexed.document_id, err); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ error: err }), - }); - } else { - write( - `data: ${JSON.stringify({ - type: "doc_edited_start", - filename: docInfo.filename, - })}\n\n`, - ); - const edits: EditInput[] = (editsRaw as Record<string, unknown>[]).map( - (e) => ({ - find: String(e.find ?? ""), - replace: String(e.replace ?? ""), - context_before: String(e.context_before ?? ""), - context_after: String(e.context_after ?? ""), - reason: e.reason ? String(e.reason) : undefined, - }), - ); - const reuseVersion = turnEditState?.get(indexed.document_id); - const result = await runEditDocument({ - documentId: indexed.document_id, - userId, - edits, - db, - reuseVersion, - }); - - if (result.ok) { - turnEditState?.set(indexed.document_id, { - versionId: result.version_id, - versionNumber: result.version_number, - storagePath: result.storage_path, - }); - // Keep the chat-local doc label pointed at the latest - // edited version so any follow-up read_document call in - // the same assistant turn reads and cites the same bytes. - if (docIndex[docId]) { - docIndex[docId] = { - ...docIndex[docId], - version_id: result.version_id, - version_number: result.version_number, - }; - } - const currentDocStore = docStore.get(docId); - if (currentDocStore) { - docStore.set(docId, { - ...currentDocStore, - storage_path: result.storage_path, - }); - } - const payload: DocEditedResult = { - filename: docInfo.filename, - document_id: indexed.document_id, - version_id: result.version_id, - version_number: result.version_number, - download_url: result.download_url, - annotations: result.annotations, - }; - docsEdited.push(payload); - write( - `data: ${JSON.stringify({ - type: "doc_edited", - ...payload, - })}\n\n`, - ); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - ok: true, - doc_id: docId, - document_id: indexed.document_id, - version_id: result.version_id, - version_number: result.version_number, - applied: result.annotations.length, - errors: result.errors, - next_required_action: [ - `The edited document remains available as doc_id "${docId}".`, - `Before making factual claims about the edited document's final contents, call read_document with doc_id "${docId}" and base the response on that returned text.`, - `Do not include download links or URLs in your prose response; the edited document card is shown automatically by the UI.`, - `If you describe specific content from the edited document, cite it with [N] markers and a final <CITATIONS> block using doc_id "${docId}".`, - ].join(" "), - }), - }); - } else { - write( - `data: ${JSON.stringify({ - type: "doc_edited", - filename: docInfo.filename, - document_id: indexed.document_id, - version_id: "", - download_url: "", - annotations: [], - error: result.error, - })}\n\n`, - ); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - ok: false, - error: result.error, - }), - }); - } - } - } else if (tc.function.name === "replicate_document" && docIndex) { - const rawDocId = args.doc_id as string; - const requestedFilename = - typeof args.new_filename === "string" && args.new_filename.trim() - ? args.new_filename.trim() - : null; - const requestedCount = - typeof args.count === "number" && Number.isFinite(args.count) - ? Math.max(1, Math.min(20, Math.floor(args.count))) - : 1; - const sourceLabel = - resolveDocLabel(rawDocId, docStore, docIndex) ?? rawDocId; - const sourceInfo = docStore.get(sourceLabel); - const sourceIndexed = docIndex[sourceLabel]; - const sourceFilename = sourceInfo?.filename ?? rawDocId; - - write( - `data: ${JSON.stringify({ - type: "doc_replicate_start", - filename: sourceFilename, - count: requestedCount, - })}\n\n`, - ); - - const fail = (error: string) => { - write( - `data: ${JSON.stringify({ - type: "doc_replicated", - filename: sourceFilename, - count: requestedCount, - copies: [], - error, - })}\n\n`, - ); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ ok: false, error }), - }); - }; - - if (!sourceInfo || !sourceIndexed) { - fail(`Document '${rawDocId}' not found in this project.`); - } else if (!projectId) { - fail("replicate_document is only available in project chats."); - } else { - try { - // Pull the active version once — every copy gets the - // same starting bytes (with any accepted tracked - // changes rolled in), no point re-fetching per copy. - const active = await loadActiveVersion(sourceIndexed.document_id, db); - const sourcePath = active?.storage_path ?? sourceInfo.storage_path; - const sourcePdfPath = active?.pdf_storage_path ?? null; - const raw = await downloadFile(sourcePath); - const pdfBytes = sourcePdfPath - ? await downloadFile(sourcePdfPath) - : null; - if (!raw) { - fail("Could not read the source document's bytes from storage."); - } else { - // Build N filenames. With count=1 keep the - // pre-existing "(copy)" suffix; with count>1 use - // numbered "(1)", "(2)" suffixes. - const srcExt = sourceInfo.filename.match(/\.[^./\\]+$/)?.[0] ?? ""; - const baseStem = (() => { - if (requestedFilename) { - return requestedFilename.replace(/\.[^./\\]+$/, ""); - } - return sourceInfo.filename.replace(/\.[^./\\]+$/, ""); - })(); - const filenames: string[] = []; - for (let n = 1; n <= requestedCount; n++) { - const suffix = - requestedCount === 1 - ? requestedFilename - ? "" - : " (copy)" - : ` (${n})`; - filenames.push(`${baseStem}${suffix}${srcExt}`); - } - - // Bulk insert N documents in one round-trip. - const docRows = filenames.map((fn) => ({ - project_id: projectId, - user_id: userId, - status: "ready", - })); - const { data: insertedDocs, error: docErr } = await db - .from("documents") - .insert(docRows) - .select("id"); - if (docErr || !insertedDocs || insertedDocs.length === 0) { - fail( - `Failed to record replicated documents: ${docErr?.message ?? "unknown"}`, - ); - } else { - // Preserve the request order so each row pairs - // with the right filename. Supabase returns - // inserted rows in the same order as the - // payload. - const newDocs = (insertedDocs as { id: string }[]).map( - (doc, idx) => ({ - ...doc, - filename: filenames[idx] ?? "Untitled document.docx", - }), - ); - const contentType = - sourceInfo.file_type === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; - - // Parallel uploads: the doc bytes (and PDF - // rendition if any) for every new copy. - const uploadJobs: Promise<unknown>[] = []; - const newKeys: string[] = []; - const newPdfKeys: (string | null)[] = []; - for (const d of newDocs) { - const key = storageKey(userId, d.id, d.filename); - newKeys.push(key); - uploadJobs.push(uploadFile(key, raw, contentType)); - if (pdfBytes) { - const pdfKey = convertedPdfKey(userId, d.id); - newPdfKeys.push(pdfKey); - uploadJobs.push( - uploadFile(pdfKey, pdfBytes, "application/pdf"), - ); - } else { - newPdfKeys.push(null); - } - } - await Promise.all(uploadJobs); - - // Bulk insert N versions in one round-trip. - const versionRows = newDocs.map((d, idx) => ({ - document_id: d.id, - storage_path: newKeys[idx], - pdf_storage_path: newPdfKeys[idx], - source: "upload", - version_number: 1, - filename: d.filename, - file_type: active?.file_type ?? sourceInfo.file_type, - size_bytes: active?.size_bytes ?? raw.byteLength, - page_count: active?.page_count ?? null, - })); - const { data: insertedVersions, error: verErr } = await db - .from("document_versions") - .insert(versionRows) - .select("id, document_id"); - if ( - verErr || - !insertedVersions || - insertedVersions.length !== newDocs.length - ) { - fail( - `Failed to record replicated document versions: ${verErr?.message ?? "unknown"}`, - ); - } else { - const versionByDocId = new Map<string, string>(); - for (const v of insertedVersions as { - id: string; - document_id: string; - }[]) { - versionByDocId.set(v.document_id, v.id); - } - - // current_version_id has to be a per-row - // value, so a single UPDATE statement - // can't cover all N. Fan out in parallel - // instead of sequential awaits. - await Promise.all( - newDocs.map((d) => - db - .from("documents") - .update({ - current_version_id: versionByDocId.get(d.id), - }) - .eq("id", d.id), - ), - ); - - // Register every copy under a fresh doc-N - // slug so the model can edit/read any of - // them in the same turn. - const existingLabels = new Set(Object.keys(docIndex)); - let nextLabelIdx = 0; - const copies: { - new_filename: string; - document_id: string; - version_id: string; - }[] = []; - const toolPayloadCopies: { - doc_id: string; - document_id: string; - version_id: string; - filename: string; - download_url: string; - }[] = []; - for (let idx = 0; idx < newDocs.length; idx++) { - const d = newDocs[idx]; - const newKey = newKeys[idx]; - const versionId = versionByDocId.get(d.id); - if (!versionId) continue; - while (existingLabels.has(`doc-${nextLabelIdx}`)) - nextLabelIdx++; - const slug = `doc-${nextLabelIdx}`; - existingLabels.add(slug); - docIndex[slug] = { - document_id: d.id, - filename: d.filename, - }; - docStore.set(slug, { - storage_path: newKey, - file_type: sourceInfo.file_type, - filename: d.filename, - }); - copies.push({ - new_filename: d.filename, - document_id: d.id, - version_id: versionId, - }); - toolPayloadCopies.push({ - doc_id: slug, - document_id: d.id, - version_id: versionId, - filename: d.filename, - download_url: buildDownloadUrl(newKey, d.filename), - }); - } - - write( - `data: ${JSON.stringify({ - type: "doc_replicated", - filename: sourceFilename, - count: copies.length, - copies, - })}\n\n`, - ); - docsReplicated.push({ - filename: sourceFilename, - count: copies.length, - copies, - }); - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify({ - ok: true, - count: copies.length, - copies: toolPayloadCopies, - }), - }); - } - } - } - } catch (e) { - fail(`replicate_document failed: ${String(e)}`); - } - } - } else if (tc.function.name === "generate_docx") { - const title = args.title as string; - const landscape = !!args.landscape; - devLog( - `[generate_docx] title="${title}" landscape=${landscape} args.landscape=${args.landscape}`, - ); - const previewFilename = `${ - title - .replace(/[^a-zA-Z0-9 _-]/g, "") - .trim() - .slice(0, 64) || "document" - }.docx`; - write( - `data: ${JSON.stringify({ type: "doc_created_start", filename: previewFilename })}\n\n`, - ); - const result = await generateDocx( - title, - args.sections as unknown[], - userId, - db, - { landscape, projectId: projectId ?? null }, - ); - let newDocLabel: string | null = null; - if ("filename" in result && "download_url" in result) { - const dlFilename = result.filename as string; - const dlUrl = result.download_url as string; - const documentId = (result as { document_id?: string }).document_id; - const versionId = (result as { version_id?: string }).version_id; - const versionNumber = - (result as { version_number?: number }).version_number ?? null; - const storagePath = (result as { storage_path?: string }).storage_path; - - // Register the generated doc in the chat context so - // edit_document (and read_document / find_in_document) - // can act on it within the same assistant turn. New label - // is the next free `doc-N` index. Subsequent turns pick - // it up via the normal attachment/project doc query. - if (documentId && storagePath && docIndex) { - const existingLabels = new Set(Object.keys(docIndex)); - let i = 0; - while (existingLabels.has(`doc-${i}`)) i++; - newDocLabel = `doc-${i}`; - docIndex[newDocLabel] = { - document_id: documentId, - filename: dlFilename, - }; - docStore.set(newDocLabel, { - storage_path: storagePath, - file_type: "docx", - filename: dlFilename, - }); - } - - write( - `data: ${JSON.stringify({ - type: "doc_created", - filename: dlFilename, - download_url: dlUrl, - document_id: documentId, - version_id: versionId, - version_number: versionNumber, - })}\n\n`, - ); - docsCreated.push({ - filename: dlFilename, - download_url: dlUrl, - document_id: documentId, - version_id: versionId, - version_number: versionNumber, - }); - } else { - write( - `data: ${JSON.stringify({ type: "doc_created", filename: previewFilename, download_url: "" })}\n\n`, - ); - } - // Surface the chat-local doc label in the tool result so the - // model can pass it as `doc_id` to edit_document / read_document - // / find_in_document in the same turn. Without this the model - // only sees the DB UUID, which isn't valid as a doc_id anchor. - const { download_url, storage_path, ...safeToolResult } = - result as Record<string, unknown>; - const toolResultPayload = newDocLabel - ? { - ...safeToolResult, - doc_id: newDocLabel, - next_required_action: [ - `Before writing your final response, call read_document with doc_id "${newDocLabel}".`, - `Base your description on the generated document's actual returned text, not on memory of what you intended to generate.`, - `Do not include download links, URLs, or markdown links to the document in your prose response; the document card is shown automatically by the UI.`, - `Give a concise description of the generated document and, if you make factual claims about its contents, cite it with [N] markers and a final <CITATIONS> block using doc_id "${newDocLabel}", not any source/template document.`, - ].join(" "), - } - : safeToolResult; - toolResults.push({ - role: "tool", - tool_call_id: tc.id, - content: JSON.stringify(toolResultPayload), - }); - } - } - - if (shouldGroupFindInCase && groupedFindInCaseEvents.length > 0) { - const errors = groupedFindInCaseEvents - .map((event) => event.error) - .filter((error): error is string => !!error); - const groupEvent: CourtlistenerToolEvent = { - type: "courtlistener_find_in_case", - cluster_id: null, - query: "", - total_matches: groupedFindInCaseEvents.reduce( - (sum, event) => sum + event.total_matches, - 0, - ), - searches: groupedFindInCaseEvents.map(findInCaseSearchSummary), - ...(errors.length ? { error: errors.join("; ") } : {}), - }; - write(`data: ${JSON.stringify(groupEvent)}\n\n`); - courtlistenerEvents.push(groupEvent); - } - - return { - toolResults, - docsRead, - docsFound, - docsCreated, - docsReplicated, - workflowsApplied, - docsEdited, - courtlistenerEvents, - caseCitationEvents, - mcpEvents, - }; -} - -// --------------------------------------------------------------------------- -// Citation parsing -// --------------------------------------------------------------------------- - -const CITATIONS_BLOCK_RE = /<CITATIONS>\s*([\s\S]*?)\s*<\/CITATIONS>/; -const CITATIONS_OPEN_TAG = "<CITATIONS>"; -const CITATIONS_CLOSE_TAG = "</CITATIONS>"; - -type CitationParseDiagnostics = { - hasBlock: boolean; - rawLength: number; - error: string | null; -}; - -function parseCitationsWithDiagnostics(text: string): { - citations: ParsedCitation[]; - diagnostics: CitationParseDiagnostics; -} { - const match = text.match(CITATIONS_BLOCK_RE); - if (!match) { - return { - citations: [], - diagnostics: { - hasBlock: false, - rawLength: 0, - error: null, - }, - }; - } - - const raw = match[1] ?? ""; - try { - const parsed = JSON.parse(raw); - if (!Array.isArray(parsed)) { - return { - citations: [], - diagnostics: { - hasBlock: true, - rawLength: raw.length, - error: "CITATIONS block JSON was not an array.", - }, - }; - } - return { - citations: parsed - .map(normalizeCitation) - .filter((c): c is ParsedCitation => c !== null), - diagnostics: { - hasBlock: true, - rawLength: raw.length, - error: null, - }, - }; - } catch (error) { - return { - citations: [], - diagnostics: { - hasBlock: true, - rawLength: raw.length, - error: error instanceof Error ? error.message : String(error), - }, - }; - } -} - -function parseCitations(text: string): ParsedCitation[] { - return parseCitationsWithDiagnostics(text).citations; -} - -function parsePartialCitationObjects(text: string): ParsedCitation[] { - const beforeClose = text.split(CITATIONS_CLOSE_TAG)[0] ?? text; - const arrayStart = beforeClose.indexOf("["); - if (arrayStart < 0) return []; - - const parsed: ParsedCitation[] = []; - let inString = false; - let escaped = false; - let depth = 0; - let objectStart = -1; - - for (let i = arrayStart + 1; i < beforeClose.length; i += 1) { - const char = beforeClose[i]; - - if (escaped) { - escaped = false; - continue; - } - if (char === "\\") { - escaped = inString; - continue; - } - if (char === '"') { - inString = !inString; - continue; - } - if (inString) continue; - - if (char === "{") { - if (depth === 0) objectStart = i; - depth += 1; - } else if (char === "}") { - if (depth === 0) continue; - depth -= 1; - if (depth === 0 && objectStart >= 0) { - try { - const raw = JSON.parse(beforeClose.slice(objectStart, i + 1)); - const citation = normalizeCitation(raw); - if (citation) parsed.push(citation); - } catch { - /* ignore incomplete/malformed partial object */ - } - objectStart = -1; - } - } else if (char === "]" && depth === 0) { - break; - } - } - - return parsed; -} - -function createCitationAnnotation( - citation: ParsedCitation, - docIndex: DocIndex, - casesByClusterId?: CourtlistenerTurnState["casesByClusterId"], -) { - if (citation.kind === "case") { - const caseRecord = casesByClusterId?.get(citation.cluster_id); - return { - type: "citation_data", - kind: "case", - ref: citation.ref, - cluster_id: citation.cluster_id, - case_name: caseRecord?.caseName ?? null, - citation: caseRecord?.citations[0] ?? null, - url: caseRecord?.url ?? null, - pdfUrl: caseRecord?.pdfUrl ?? null, - dateFiled: caseRecord?.dateFiled ?? null, - quotes: citation.quotes, - }; - } - - const docInfo = resolveDoc(citation.doc_id, docIndex); - return { - type: "citation_data", - kind: "document", - ref: citation.ref, - doc_id: citation.doc_id, - document_id: docInfo?.document_id, - version_id: docInfo?.version_id ?? null, - version_number: docInfo?.version_number ?? null, - filename: docInfo?.filename ?? citation.doc_id, - page: citation.page, - quote: citation.quote, - quotes: citation.quotes, - }; -} - -// --------------------------------------------------------------------------- -// LLM streaming loop -// --------------------------------------------------------------------------- - -export type EditAnnotation = { - kind: "edit"; - edit_id: string; - document_id: string; - version_id: string; - version_number?: number | null; - change_id: string; - del_w_id?: string; - ins_w_id?: string; - deleted_text: string; - inserted_text: string; - context_before: string; - context_after: string; - reason?: string; - status: "pending" | "accepted" | "rejected"; -}; - -type AssistantEvent = - | { type: "reasoning"; text: string } - | { type: "doc_read"; filename: string; document_id?: string } - | { - type: "doc_find"; - filename: string; - query: string; - total_matches: number; - } - | { - type: "doc_created"; - filename: string; - download_url: string; - document_id?: string; - version_id?: string; - version_number?: number | null; - } - | { type: "doc_download"; filename: string; download_url: string } - | { - type: "doc_replicated"; - /** Source document being copied. */ - filename: string; - count: number; - copies: { - new_filename: string; - document_id: string; - version_id: string; - }[]; - } - | { type: "workflow_applied"; workflow_id: string; title: string } - | { - type: "doc_edited"; - filename: string; - document_id: string; - version_id: string; - /** Per-document monotonic Vn; null if backend couldn't determine it. */ - version_number: number | null; - download_url: string; - annotations: EditAnnotation[]; - } - | CaseCitationEvent - | CourtlistenerToolEvent - | McpToolEvent - | { type: "case_opinions"; cluster_id: number; case: unknown } - | { type: "content"; text: string } - | { type: "error"; message: string }; - -export class AssistantStreamError extends Error { - fullText: string; - events: AssistantEvent[]; - - constructor(message: string, fullText: string, events: AssistantEvent[]) { - super(message); - this.name = "AssistantStreamError"; - this.fullText = fullText; - this.events = events; - } -} - -export class AssistantStreamAbortError extends AssistantStreamError { - constructor(fullText: string, events: AssistantEvent[]) { - super("Stream aborted.", fullText, events); - this.name = "AbortError"; - } -} - -export function isAbortError(error: unknown): boolean { - if (!error || typeof error !== "object") return false; - const record = error as { name?: unknown; message?: unknown }; - return ( - record.name === "AbortError" || record.message === "Stream aborted." - ); -} - -function throwIfAborted(signal?: AbortSignal) { - if (!signal?.aborted) return; - const err = new Error("Stream aborted."); - err.name = "AbortError"; - throw err; -} - -export async function runLLMStream(params: { - apiMessages: unknown[]; - docStore: DocStore; - docIndex: DocIndex; - userId: string; - db: ReturnType<typeof createServerSupabase>; - write: (s: string) => void; - extraTools?: unknown[]; - includeResearchTools?: boolean; - workflowStore?: WorkflowStore; - tabularStore?: TabularCellStore; - buildCitations?: (fullText: string) => unknown[]; - model?: string; - apiKeys?: import("./llm").UserApiKeys; - signal?: AbortSignal; - /** - * If set, generate_docx will attach created docs to this project so - * they appear in the project sidebar. Leave null for general chats — - * generated docs still get persisted, but as standalone documents. - */ - projectId?: string | null; -}): Promise<{ - fullText: string; - events: AssistantEvent[]; - annotations: unknown[]; -}> { - const { - apiMessages, - docStore, - docIndex, - userId, - db, - write, - extraTools, - includeResearchTools = true, - workflowStore, - tabularStore, - buildCitations, - model, - apiKeys, - signal, - projectId, - } = params; - const researchTools = includeResearchTools ? COURTLISTENER_TOOLS : []; - const mcpTools = await buildUserMcpTools(userId, db); - const baseTools = [...TOOLS, ...researchTools, ...WORKFLOW_TOOLS]; - const activeTools = extraTools?.length - ? [...baseTools, ...mcpTools, ...extraTools] - : [...baseTools, ...mcpTools]; - - // Extract system prompt; pass remaining turns to the adapter as - // plain user/assistant messages. - const rawMsgs = apiMessages as { role: string; content: string | null }[]; - const systemPrompt = - rawMsgs[0]?.role === "system" ? (rawMsgs[0].content ?? "") : ""; - const chatMessages: LlmMessage[] = rawMsgs - .filter((m) => m.role !== "system") - .map((m) => ({ - role: m.role === "assistant" ? "assistant" : "user", - content: m.content ?? "", - })); - - const events: AssistantEvent[] = []; - // One assistant turn produces at most one document_versions row per - // edited doc. `runToolCalls` fires once per tool-call batch; the model - // may emit multiple batches in a single turn, so this map persists - // across batches to let subsequent edit_document calls overwrite the - // turn's existing version instead of creating a new one. - const turnEditState: TurnEditState = new Map(); - const courtlistenerTurnState: CourtlistenerTurnState = { - casesByClusterId: new Map(), - }; - let fullText = ""; - let iterText = ""; - let iterVisibleText = ""; - let iterReasoning = ""; - let visibleTailBuffer = ""; - let citationsOpenSeen = false; - let streamingCitationsBuffer = ""; - let streamedCitationCount = 0; - - const emitCitationStreamSnapshot = ( - status: "started" | "partial", - citations: unknown[], - ) => { - if (buildCitations) return; - write(`data: ${JSON.stringify({ type: "citations", status, citations })}\n\n`); - }; - - const streamHiddenCitationContent = (delta: string) => { - if (buildCitations || !delta) return; - streamingCitationsBuffer += delta; - const partial = parsePartialCitationObjects(streamingCitationsBuffer); - if (partial.length <= streamedCitationCount) return; - streamedCitationCount = partial.length; - const citations = partial.map((c) => - createCitationAnnotation( - c, - docIndex, - courtlistenerTurnState.casesByClusterId, - ), - ); - emitCitationStreamSnapshot("partial", citations); - }; - - const streamVisibleContent = (delta: string) => { - if (!delta) return; - if (citationsOpenSeen) { - streamHiddenCitationContent(delta); - return; - } - - const combined = visibleTailBuffer + delta; - const markerIdx = combined.indexOf(CITATIONS_OPEN_TAG); - if (markerIdx >= 0) { - const visible = combined.slice(0, markerIdx); - if (visible) { - iterVisibleText += visible; - write( - `data: ${JSON.stringify({ type: "content_delta", text: visible })}\n\n`, - ); - } - visibleTailBuffer = ""; - citationsOpenSeen = true; - streamingCitationsBuffer = ""; - streamedCitationCount = 0; - emitCitationStreamSnapshot("started", []); - streamHiddenCitationContent( - combined.slice(markerIdx + CITATIONS_OPEN_TAG.length), - ); - return; - } - - const keep = Math.min(CITATIONS_OPEN_TAG.length - 1, combined.length); - const visible = combined.slice(0, combined.length - keep); - visibleTailBuffer = combined.slice(combined.length - keep); - if (visible) { - iterVisibleText += visible; - write( - `data: ${JSON.stringify({ type: "content_delta", text: visible })}\n\n`, - ); - } - }; - - const flushVisibleTail = (opts: { emit?: boolean } = {}) => { - const emit = opts.emit ?? true; - if (citationsOpenSeen || !visibleTailBuffer) { - visibleTailBuffer = ""; - return; - } - iterVisibleText += visibleTailBuffer; - if (emit) { - write( - `data: ${JSON.stringify({ type: "content_delta", text: visibleTailBuffer })}\n\n`, - ); - } - visibleTailBuffer = ""; - }; - - const flushText = (opts: { emit?: boolean } = {}) => { - if (!iterText) return; - fullText += iterText; - flushVisibleTail(opts); - if (iterVisibleText) { - events.push({ type: "content", text: iterVisibleText }); - } - iterText = ""; - iterVisibleText = ""; - visibleTailBuffer = ""; - citationsOpenSeen = false; - streamingCitationsBuffer = ""; - streamedCitationCount = 0; - }; - - const flushPartialTurn = (opts: { emit?: boolean } = {}) => { - flushText(opts); - if (iterReasoning) { - events.push({ type: "reasoning", text: iterReasoning }); - iterReasoning = ""; - } - }; - - const selectedModel = resolveModel(model, DEFAULT_MAIN_MODEL); - - try { - throwIfAborted(signal); - await streamChatWithTools({ - model: selectedModel, - systemPrompt, - messages: chatMessages, - tools: activeTools as OpenAIToolSchema[], - maxIterations: 10, - apiKeys, - enableThinking: true, - abortSignal: signal, - callbacks: { - onContentDelta: (delta) => { - iterText += delta; - streamVisibleContent(delta); - }, - onReasoningDelta: (delta) => { - iterReasoning += delta; - write( - `data: ${JSON.stringify({ type: "reasoning_delta", text: delta })}\n\n`, - ); - }, - onReasoningBlockEnd: () => { - if (!iterReasoning) return; - events.push({ type: "reasoning", text: iterReasoning }); - write(`data: ${JSON.stringify({ type: "reasoning_block_end" })}\n\n`); - iterReasoning = ""; - }, - // Fires after Claude's turn ends with stop_reason=tool_use, before - // the tool actually runs. Flushes any buffered assistant text so - // it's emitted in chronological order, then signals the client so - // it can open a fresh PreResponseWrapper (shows "Working…") while - // the tool executes — avoids the dead gap between message_stop - // and the first tool-specific event. - onToolCallStart: (call) => { - flushText(); - write( - `data: ${JSON.stringify({ - type: "tool_call_start", - name: call.name, - })}\n\n`, - ); - }, - }, - runTools: async (calls) => { - throwIfAborted(signal); - // Emit any text the model produced before this tool turn so the - // UI sees it before the tool results stream in. - flushText(); - - const toolCalls: ToolCall[] = calls.map((c) => ({ - id: c.id, - function: { - name: c.name, - arguments: JSON.stringify(c.input), - }, - })); - const { - toolResults, - docsRead, - docsFound, - docsCreated, - docsReplicated, - workflowsApplied, - docsEdited, - courtlistenerEvents, - caseCitationEvents, - mcpEvents, - } = await runToolCalls( - toolCalls, - docStore, - userId, - db, - write, - workflowStore, - tabularStore, - docIndex, - turnEditState, - projectId, - courtlistenerTurnState, - apiKeys, - ); - throwIfAborted(signal); - for (const r of docsRead) { - events.push({ - type: "doc_read", - filename: r.filename, - document_id: r.document_id, - }); - } - for (const f of docsFound) { - events.push({ - type: "doc_find", - filename: f.filename, - query: f.query, - total_matches: f.total_matches, - }); - } - for (const dl of docsCreated) { - events.push({ - type: "doc_created", - filename: dl.filename, - download_url: dl.download_url, - document_id: dl.document_id, - version_id: dl.version_id, - version_number: dl.version_number ?? null, - }); - } - for (const r of docsReplicated) { - events.push({ - type: "doc_replicated", - filename: r.filename, - count: r.count, - copies: r.copies, - }); - } - for (const wf of workflowsApplied) { - events.push({ - type: "workflow_applied", - workflow_id: wf.workflow_id, - title: wf.title, - }); - } - for (const e of docsEdited) { - events.push({ - type: "doc_edited", - filename: e.filename, - document_id: e.document_id, - version_id: e.version_id, - version_number: e.version_number, - download_url: e.download_url, - annotations: e.annotations, - }); - } - for (const event of courtlistenerEvents) { - events.push(event); - } - for (const event of mcpEvents) { - events.push(event); - } - for (const event of caseCitationEvents) { - events.push(event); - } - - // Index alignment would break if any tool branch skips its - // push (unhandled tool name, disabled store, guard failure). - // Each tool_result already carries its tool_call_id, so key off - // that directly — and fall back to an error result for any - // tool_use that didn't produce one, so Claude's next request - // has a tool_result for every tool_use it sent. - const resultByCallId = new Map<string, string>(); - for (const r of toolResults) { - const row = r as { tool_call_id: string; content?: unknown }; - resultByCallId.set(row.tool_call_id, String(row.content ?? "")); - } - return toolCalls.map((c) => ({ - tool_use_id: c.id, - content: - resultByCallId.get(c.id) ?? - JSON.stringify({ - error: `Tool '${c.function.name}' is not available.`, - }), - })); - }, - }); - } catch (err) { - if (isAbortError(err)) { - flushPartialTurn({ emit: false }); - throw new AssistantStreamAbortError(fullText, events); - } - flushPartialTurn(); - const message = safeErrorMessage(err, "Stream error"); - events.push({ type: "error", message }); - throw new AssistantStreamError(message, fullText, events); - } - - flushText(); - - // Parse and emit citations from <CITATIONS> block - const { citations: parsedCitations, diagnostics: citationDiagnostics } = - parseCitationsWithDiagnostics(fullText); - const citations = buildCitations - ? buildCitations(fullText) - : parsedCitations.map((c) => - createCitationAnnotation( - c, - docIndex, - courtlistenerTurnState.casesByClusterId, - ), - ); - devLog("[chat/stream] final citation annotations", { - hasCitationsBlock: citationDiagnostics.hasBlock, - citationsBlockLength: citationDiagnostics.rawLength, - parseError: citationDiagnostics.error, - parsedCitationCount: parsedCitations.length, - emittedAnnotationCount: citations.length, - usedCustomCitationBuilder: !!buildCitations, - }); - write( - `data: ${JSON.stringify({ type: "citations", status: "final", citations })}\n\n`, - ); - write("data: [DONE]\n\n"); - - return { fullText, events, annotations: citations }; -} - -// --------------------------------------------------------------------------- -// Annotation extraction (for DB save) -// --------------------------------------------------------------------------- - -export function extractAnnotations( - fullText: string, - docIndex: DocIndex, - _events?: ({ type: string } & Record<string, unknown>[]) | unknown[], -): unknown[] { - return parseCitations(fullText).map((c) => - createCitationAnnotation(c, docIndex), - ); -} - -export function stripTransientAssistantEvents(events: AssistantEvent[]) { - return events.filter((event) => event.type !== "case_opinions"); -} - -export function appendCancelledAssistantEvent(events: AssistantEvent[]) { - return [...events, { type: "content" as const, text: "Cancelled by user." }]; -} - -export function buildCancelledAssistantMessage(args: { - fullText: string; - events: AssistantEvent[]; - buildAnnotations: (fullText: string, events: AssistantEvent[]) => unknown[]; -}) { - const events = appendCancelledAssistantEvent( - stripTransientAssistantEvents(args.events), - ); - return { - events, - annotations: args.buildAnnotations(args.fullText, events), - }; -} - -// --------------------------------------------------------------------------- -// Document context builder (from message file attachments) -// --------------------------------------------------------------------------- - -export async function buildDocContext( - messages: ChatMessage[], - userId: string, - db: ReturnType<typeof createServerSupabase>, - chatId?: string | null, -): Promise<{ docIndex: DocIndex; docStore: DocStore }> { - const docIndex: DocIndex = {}; - const docStore: DocStore = new Map(); - - const documentIds = new Set<string>(); - for (const m of messages) { - for (const f of m.files ?? []) { - if (f.document_id) documentIds.add(f.document_id); - } - } - - // Also pull in document_ids from prior assistant events in this chat — - // generated docs (generate_docx) and tracked-change edits (edit_document) - // aren't attached to user messages as files, so they only live in the - // assistant's `doc_created` / `doc_edited` events. Without this sweep - // the model loses access to generated docs after the turn that created - // them, and can't call edit_document / read_document on them. - if (chatId) { - const { data: rows } = await db - .from("chat_messages") - .select("content") - .eq("chat_id", chatId) - .eq("role", "assistant"); - for (const row of rows ?? []) { - const content = (row as { content?: unknown }).content; - if (!Array.isArray(content)) continue; - for (const ev of content as Record<string, unknown>[]) { - if ( - (ev?.type === "doc_created" || ev?.type === "doc_edited") && - typeof ev.document_id === "string" - ) { - documentIds.add(ev.document_id); - } - } - } - } - - const ids = [...documentIds]; - if (ids.length > 0) { - const { data: docs } = await db - .from("documents") - .select("id, current_version_id, status") - .in("id", ids) - .eq("user_id", userId) - .eq("status", "ready"); - - const docList = (docs ?? []) as unknown as { - id: string; - filename?: string | null; - file_type?: string | null; - current_version_id?: string | null; - active_version_number?: number | null; - storage_path?: string | null; - }[]; - await attachActiveVersionPaths(db, docList); - for (let i = 0; i < docList.length; i++) { - const doc = docList[i]; - if (!doc.storage_path) continue; - const docLabel = `doc-${i}`; - const filename = doc.filename?.trim() || "Untitled document"; - docIndex[docLabel] = { - document_id: doc.id, - filename, - version_id: doc.current_version_id ?? null, - version_number: doc.active_version_number ?? null, - }; - docStore.set(docLabel, { - storage_path: doc.storage_path, - file_type: doc.file_type ?? "", - filename, - }); - } - } - - devLog( - "[buildDocContext] available docs:", - Object.entries(docIndex).map(([label, info]) => ({ - label, - filename: info.filename, - document_id: info.document_id, - })), - ); - return { docIndex, docStore }; -} - -export async function buildProjectDocContext( - projectId: string, - _userId: string, - db: ReturnType<typeof createServerSupabase>, -): Promise<{ - docIndex: DocIndex; - docStore: DocStore; - folderPaths: Map<string, string>; -}> { - const docIndex: DocIndex = {}; - const docStore: DocStore = new Map(); - - const [{ data: docs }, { data: folders }] = await Promise.all([ - db - .from("documents") - .select("id, current_version_id, status, folder_id") - .eq("project_id", projectId) - .eq("status", "ready") - .order("created_at", { ascending: true }), - db - .from("project_subfolders") - .select("id, name, parent_folder_id") - .eq("project_id", projectId), - ]); - const docList = (docs ?? []) as unknown as { - id: string; - filename?: string | null; - file_type?: string | null; - current_version_id?: string | null; - active_version_number?: number | null; - folder_id?: string | null; - storage_path?: string | null; - }[]; - await attachActiveVersionPaths(db, docList); - - // Build folder id → full path map - const folderMap = new Map< - string, - { name: string; parent_folder_id: string | null } - >(); - for (const f of folders ?? []) - folderMap.set(f.id, { - name: f.name, - parent_folder_id: f.parent_folder_id, - }); - - function resolvePath(folderId: string | null): string { - if (!folderId) return ""; - const parts: string[] = []; - let cur: string | null = folderId; - while (cur) { - const f = folderMap.get(cur); - if (!f) break; - parts.unshift(f.name); - cur = f.parent_folder_id; - } - return parts.join(" / "); - } - - const folderPaths = new Map<string, string>(); // doc label → folder path - - for (let i = 0; i < docList.length; i++) { - const doc = docList[i]; - if (!doc.storage_path) continue; - const docLabel = `doc-${i}`; - const filename = doc.filename?.trim() || "Untitled document"; - docIndex[docLabel] = { - document_id: doc.id, - filename, - version_id: doc.current_version_id ?? null, - version_number: doc.active_version_number ?? null, - }; - docStore.set(docLabel, { - storage_path: doc.storage_path, - file_type: doc.file_type ?? "", - filename, - }); - const path = resolvePath(doc.folder_id ?? null); - if (path) folderPaths.set(docLabel, path); - } - - devLog( - "[buildProjectDocContext] available docs:", - Object.entries(docIndex).map(([label, info]) => ({ - label, - filename: info.filename, - document_id: info.document_id, - folder: folderPaths.get(label) ?? null, - })), - ); - return { docIndex, docStore, folderPaths }; -} - -export async function buildWorkflowStore( - userId: string, - userEmail: string | null | undefined, - db: ReturnType<typeof createServerSupabase>, -): Promise<WorkflowStore> { - const { BUILTIN_WORKFLOWS } = await import("./builtinWorkflows"); - const store: WorkflowStore = new Map(); - const normalizedUserEmail = (userEmail ?? "").trim().toLowerCase(); - - // Seed built-ins first - for (const wf of BUILTIN_WORKFLOWS) { - store.set(wf.id, { title: wf.title, prompt_md: wf.prompt_md }); - } - - // Then overlay user-owned assistant workflows. - const { data: workflows } = await db - .from("workflows") - .select("id, title, prompt_md") - .eq("user_id", userId) - .eq("type", "assistant"); - for (const wf of workflows ?? []) { - if (wf.prompt_md) { - store.set(wf.id, { title: wf.title, prompt_md: wf.prompt_md }); - } - } - - // Shared assistant workflows must also be readable by workflow tools. - if (normalizedUserEmail) { - const { data: shares } = await db - .from("workflow_shares") - .select("workflow_id") - .eq("shared_with_email", normalizedUserEmail); - const sharedIds = [ - ...new Set((shares ?? []).map((share) => share.workflow_id)), - ]; - if (sharedIds.length > 0) { - const { data: sharedWorkflows } = await db - .from("workflows") - .select("id, title, prompt_md") - .in("id", sharedIds) - .eq("type", "assistant"); - for (const wf of sharedWorkflows ?? []) { - if (wf.prompt_md) { - store.set(wf.id, { - title: wf.title, - prompt_md: wf.prompt_md, - }); - } - } - } - } - return store; -} diff --git a/backend/src/lib/documentTypes.ts b/backend/src/lib/documentTypes.ts new file mode 100644 index 0000000..7df223b --- /dev/null +++ b/backend/src/lib/documentTypes.ts @@ -0,0 +1,60 @@ +export const ALLOWED_DOCUMENT_TYPES = new Set([ + "pdf", + "docx", + "doc", + "xlsx", + "xlsm", + "xls", + "pptx", + "ppt", +]); + +export const ALLOWED_DOCUMENT_TYPES_LABEL = + "pdf, docx, doc, xlsx, xlsm, xls, pptx, ppt"; + +const WORD_TYPES = new Set(["docx", "doc"]); +const SPREADSHEET_TYPES = new Set(["xlsx", "xlsm", "xls"]); +const PRESENTATION_TYPES = new Set(["pptx", "ppt"]); + +export function isWordDocumentType(fileType: string | null | undefined) { + return WORD_TYPES.has((fileType ?? "").toLowerCase()); +} + +export function isSpreadsheetDocumentType(fileType: string | null | undefined) { + return SPREADSHEET_TYPES.has((fileType ?? "").toLowerCase()); +} + +export function isPresentationDocumentType(fileType: string | null | undefined) { + return PRESENTATION_TYPES.has((fileType ?? "").toLowerCase()); +} + +export function shouldConvertToPdf(fileType: string | null | undefined) { + const normalized = (fileType ?? "").toLowerCase(); + // Spreadsheets are intentionally excluded: they are rendered natively as a + // grid in the frontend (Fortune-sheet) from the raw file bytes rather than a + // PDF rendition, which clipped wide/large sheets. + return ( + isWordDocumentType(normalized) || isPresentationDocumentType(normalized) + ); +} + +export function contentTypeForDocumentType(fileType: string | null | undefined) { + switch ((fileType ?? "").toLowerCase()) { + case "pdf": + return "application/pdf"; + case "docx": + return "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + case "xlsx": + return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; + case "xlsm": + return "application/vnd.ms-excel.sheet.macroEnabled.12"; + case "xls": + return "application/vnd.ms-excel"; + case "pptx": + return "application/vnd.openxmlformats-officedocument.presentationml.presentation"; + case "ppt": + return "application/vnd.ms-powerpoint"; + default: + return "application/octet-stream"; + } +} diff --git a/backend/src/lib/llm/tools.ts b/backend/src/lib/llm/tools.ts index f5a383e..a71193b 100644 --- a/backend/src/lib/llm/tools.ts +++ b/backend/src/lib/llm/tools.ts @@ -28,7 +28,7 @@ export type GeminiFunctionDeclaration = { export function toGeminiTools(tools: OpenAIToolSchema[]): GeminiFunctionDeclaration[] { return tools.map((t) => { - const params = normalizeSchema(t.function.parameters); + const params = normalizeGeminiSchema(t.function.parameters); // Gemini rejects `{ type: "object", properties: {} }` with no fields // present; omit the parameters key entirely when empty. const hasProps = @@ -72,3 +72,121 @@ function normalizeSchema(schema: unknown): Record<string, unknown> { } return out; } + +const GEMINI_SCHEMA_KEYS = new Set([ + "type", + "description", + "enum", + "format", + "items", + "nullable", + "properties", + "required", +]); + +function normalizeGeminiSchema(schema: unknown): Record<string, unknown> { + return normalizeGeminiSchemaNode(schema, schema, new Set()); +} + +function normalizeGeminiSchemaNode( + schema: unknown, + root: unknown, + seenRefs: Set<string>, +): Record<string, unknown> { + if (!schema || typeof schema !== "object" || Array.isArray(schema)) { + return { type: "object", properties: {} }; + } + + const s = schema as Record<string, unknown>; + const ref = typeof s.$ref === "string" ? s.$ref : null; + if (ref) { + const resolved = resolveLocalJsonRef(root, ref); + if (resolved && !seenRefs.has(ref)) { + return normalizeGeminiSchemaNode( + resolved, + root, + new Set([...seenRefs, ref]), + ); + } + return { type: "string" }; + } + + const out: Record<string, unknown> = {}; + for (const [key, value] of Object.entries(s)) { + if (!GEMINI_SCHEMA_KEYS.has(key)) continue; + if (key.startsWith("$") || key.startsWith("x-")) continue; + out[key] = value; + } + + const type = normalizeGeminiType(out.type); + out.type = type; + + if (type === "object") { + const props = + s.properties && typeof s.properties === "object" && !Array.isArray(s.properties) + ? (s.properties as Record<string, unknown>) + : {}; + const normProps: Record<string, unknown> = {}; + for (const [key, value] of Object.entries(props)) { + normProps[key] = normalizeGeminiSchemaNode(value, root, seenRefs); + } + out.properties = normProps; + if (Array.isArray(s.required)) { + out.required = s.required.filter( + (name): name is string => + typeof name === "string" && Object.prototype.hasOwnProperty.call(normProps, name), + ); + } else { + delete out.required; + } + return out; + } + + delete out.properties; + delete out.required; + + if (type === "array") { + out.items = normalizeGeminiSchemaNode(s.items, root, seenRefs); + } else { + delete out.items; + } + + return out; +} + +function normalizeGeminiType(value: unknown): string { + if (Array.isArray(value)) { + const nonNull = value.find( + (item): item is string => typeof item === "string" && item !== "null", + ); + return normalizeGeminiType(nonNull); + } + if (typeof value !== "string" || !value) return "object"; + if (value === "integer") return "number"; + if ( + value === "object" || + value === "array" || + value === "string" || + value === "number" || + value === "boolean" + ) { + return value; + } + return "string"; +} + +function resolveLocalJsonRef(root: unknown, ref: string): unknown { + if (!ref.startsWith("#/")) return null; + const parts = ref + .slice(2) + .split("/") + .map((part) => part.replace(/~1/g, "/").replace(/~0/g, "~")); + let cursor = root; + for (const part of parts) { + if (!cursor || typeof cursor !== "object" || Array.isArray(cursor)) { + return null; + } + cursor = (cursor as Record<string, unknown>)[part]; + } + return cursor; +} diff --git a/backend/src/lib/officeText.ts b/backend/src/lib/officeText.ts new file mode 100644 index 0000000..7478934 --- /dev/null +++ b/backend/src/lib/officeText.ts @@ -0,0 +1,53 @@ +import JSZip from "jszip"; + +function decodeXml(text: string) { + return text + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, '"') + .replace(/'/g, "'") + .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))) + .replace(/&#x([0-9a-f]+);/gi, (_, code) => + String.fromCharCode(Number.parseInt(code, 16)), + ); +} + +function extractTagText(xml: string, tagName: string) { + const parts: string[] = []; + const re = new RegExp( + `<${tagName}\\b[^>]*>([\\s\\S]*?)<\\/${tagName}>`, + "gi", + ); + let match: RegExpExecArray | null; + while ((match = re.exec(xml))) parts.push(decodeXml(match[1])); + return parts; +} + +function naturalSort(a: string, b: string) { + return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }); +} + +async function readZipText(zip: JSZip, path: string) { + const entry = zip.file(path); + return entry ? entry.async("text") : null; +} + +export async function extractPresentationText(buffer: Buffer) { + const zip = await JSZip.loadAsync(buffer); + const slidePaths = Object.keys(zip.files) + .filter((name) => /^ppt\/slides\/slide\d+\.xml$/i.test(name)) + .sort(naturalSort); + + const slides: string[] = []; + for (let index = 0; index < slidePaths.length; index++) { + const xml = await readZipText(zip, slidePaths[index]); + if (!xml) continue; + const text = extractTagText(xml, "a:t") + .map((part) => part.trim()) + .filter(Boolean) + .join("\n"); + if (text) slides.push(`## Slide ${index + 1}\n\n${text}`); + } + return slides.join("\n\n").trim(); +} diff --git a/backend/src/lib/spreadsheet.ts b/backend/src/lib/spreadsheet.ts new file mode 100644 index 0000000..e5d061b --- /dev/null +++ b/backend/src/lib/spreadsheet.ts @@ -0,0 +1,100 @@ +import * as XLSX from "xlsx"; + +/** + * Spreadsheet parsing for the LLM read path. + * + * Replaces the old regex-over-OOXML extractor (`extractSpreadsheetText`) with a + * real reader. SheetJS handles `.xlsx`, `.xlsm`, and legacy `.xls` uniformly and + * exposes `cell.w` — the Excel-formatted display string — so dates and currency + * reach the model the way a human sees them (`3/1/26`, `$1,200`) rather than as + * raw serial numbers. Cached formula results are used (we never show formulas). + * + * The output is a compact, cell-addressed markdown table per sheet: a header row + * of column letters plus a leftmost row-number column. That lets the model name + * any cell as `Sheet!<col><row>` (e.g. `Q3 Budget!B7`) for cell-level citations, + * with none of the old `Row N:` / `|`-separator noise. + */ + +/** Formatted display text for a cell (`w`), falling back to the raw value. */ +function cellDisplayText(cell: XLSX.CellObject | undefined): string { + if (!cell) return ""; + if (typeof cell.w === "string" && cell.w.length > 0) return cell.w; + if (cell.v == null) return ""; + return String(cell.v); +} + +/** Escape a cell value so it can't break the markdown table layout. */ +function sanitizeCellText(value: string): string { + return value.replace(/\r?\n/g, " ").replace(/\|/g, "\\|").trim(); +} + +function renderSheet(sheetName: string, ws: XLSX.WorkSheet): string | null { + const ref = ws["!ref"]; + if (!ref) return null; + const range = XLSX.utils.decode_range(ref); + + // Build a trimmed grid: capture formatted text for every cell in the used + // range, then drop trailing empty columns and fully empty rows so we don't + // emit oceans of blank cells. + const rows: { rowNumber: number; cells: string[] }[] = []; + let lastNonEmptyCol = -1; + + for (let r = range.s.r; r <= range.e.r; r++) { + const cells: string[] = []; + let rowHasContent = false; + for (let c = range.s.c; c <= range.e.c; c++) { + const addr = XLSX.utils.encode_cell({ r, c }); + const text = sanitizeCellText(cellDisplayText(ws[addr])); + cells[c - range.s.c] = text; + if (text) { + rowHasContent = true; + if (c - range.s.c > lastNonEmptyCol) lastNonEmptyCol = c - range.s.c; + } + } + if (rowHasContent) rows.push({ rowNumber: r + 1, cells }); + } + + if (rows.length === 0 || lastNonEmptyCol < 0) return null; + + // Column-letter header, e.g. ["A", "B", "C"] for the used columns. + const colLetters: string[] = []; + for (let c = 0; c <= lastNonEmptyCol; c++) { + colLetters.push(XLSX.utils.encode_col(range.s.c + c)); + } + + const headerRow = `| Row | ${colLetters.join(" | ")} |`; + const separator = `| --- | ${colLetters.map(() => "---").join(" | ")} |`; + const bodyRows = rows.map(({ rowNumber, cells }) => { + const padded: string[] = []; + for (let c = 0; c <= lastNonEmptyCol; c++) padded.push(cells[c] ?? ""); + return `| ${rowNumber} | ${padded.join(" | ")} |`; + }); + + const lines = [`## Sheet: ${sheetName}`, "", headerRow, separator, ...bodyRows]; + + // Note merged ranges once so the model understands spanned headers/labels. + const merges = ws["!merges"]; + if (merges && merges.length > 0) { + const encoded = merges.map((m) => XLSX.utils.encode_range(m)); + lines.push("", `Merged ranges: ${encoded.join(", ")}`); + } + + return lines.join("\n"); +} + +/** + * Extract a spreadsheet as cell-addressed markdown for the LLM. Handles + * `.xlsx`, `.xlsm`, and legacy `.xls` (SheetJS reads all three), so callers no + * longer need the LibreOffice→PDF→text detour for spreadsheets. + */ +export function spreadsheetToLLMText(buffer: Buffer): string { + const wb = XLSX.read(buffer, { type: "buffer" }); + const sheets: string[] = []; + for (const sheetName of wb.SheetNames) { + const ws = wb.Sheets[sheetName]; + if (!ws) continue; + const rendered = renderSheet(sheetName, ws); + if (rendered) sheets.push(rendered); + } + return sheets.join("\n\n").trim(); +} diff --git a/backend/src/lib/systemWorkflows.ts b/backend/src/lib/systemWorkflows.ts new file mode 100644 index 0000000..a2caad5 --- /dev/null +++ b/backend/src/lib/systemWorkflows.ts @@ -0,0 +1,1596 @@ +// This file is generated by scripts/build-workflows.js. Do not edit it directly. + +export type SystemWorkflowContributor = { + name: string; + organisation: string | null; + role: string | null; + linkedin: string | null; +}; + +export type SystemWorkflow = { + id: string; + user_id: null; + is_system: true; + created_at: string; + title: string; + type: "assistant" | "tabular"; + contributors: SystemWorkflowContributor[]; + language: string; + version: string; + practice: string | null; + jurisdictions: string[] | null; + prompt_md: string | null; + columns_config: { index: number; name: string; format?: string; prompt: string; tags?: string[] }[] | null; +}; + +export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-cp-checklist", + "title": "Draft CP Checklist", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status).", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-coc-dd", + "title": "Change of Control Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Change of Control Due Diligence Review\n\nThis workflow performs a change of control due diligence review across the selected documents.", + "columns_config": [ + { + "index": 0, + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this agreement. For each party state their full legal name and their role (e.g. counterparty, licensor, lender, supplier)." + }, + { + "index": 1, + "name": "Date", + "format": "date", + "prompt": "What is the date of this agreement? If a commencement date differs from the signing date, state both." + }, + { + "index": 2, + "name": "Term", + "format": "text", + "prompt": "What is the term or duration of this agreement? State the start and end dates or the length of the term." + }, + { + "index": 3, + "name": "Change of Control Clause", + "prompt": "Identify and summarize the change of control clause(s) in this document. Quote the exact triggering language and specify what constitutes a 'change of control'." + }, + { + "index": 4, + "name": "Consent Required", + "prompt": "Does a change of control require prior consent from any party? Identify who must consent, the notice period, and any conditions." + }, + { + "index": 5, + "name": "Termination Rights", + "prompt": "What termination rights arise upon a change of control? Who can terminate, and what are the notice requirements?" + }, + { + "index": 6, + "name": "Put/Call Options", + "prompt": "Are there any put or call options triggered by a change of control? Summarize the terms, pricing, and exercise period." + }, + { + "index": 7, + "name": "Financial Implications", + "prompt": "What are the financial implications of a change of control? Include any fees, payments, accelerated obligations, or pricing adjustments." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-draft-issues-list", + "title": "Draft Issues List", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-credit-summary", + "title": "Credit Agreement Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-commercial-agreement", + "title": "Commercial Agreement Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this agreement. For each party state their full legal name, jurisdiction of incorporation (if stated), and their role in the agreement (e.g. supplier, customer, licensor)." + }, + { + "index": 1, + "name": "Scope of Work", + "format": "text", + "prompt": "Summarise the scope of work or services to be provided under this agreement. What are the key deliverables, obligations, or services? Identify any limitations or exclusions to the scope." + }, + { + "index": 2, + "name": "Amends Earlier Agreement", + "format": "yes_no", + "prompt": "Does this agreement amend, restate, supplement, or replace an earlier agreement? If yes, identify the earlier agreement by name and date." + }, + { + "index": 3, + "name": "Effective Date", + "format": "date", + "prompt": "What is the effective date or commencement date of this agreement? If no explicit date is stated, note when it is deemed to take effect." + }, + { + "index": 4, + "name": "Term", + "format": "text", + "prompt": "What is the duration or term of this agreement? State the initial term length and any conditions that affect the duration." + }, + { + "index": 5, + "name": "Renewal", + "format": "text", + "prompt": "What renewal provisions apply? Specify whether renewal is automatic or requires notice, the renewal period, and any conditions or notice periods required to prevent automatic renewal." + }, + { + "index": 6, + "name": "Pricing", + "format": "text", + "prompt": "What is the pricing structure under this agreement? Identify all fees, rates, charges, and payment terms including currency, payment schedule, and invoicing requirements." + }, + { + "index": 7, + "name": "Price Adjustments", + "format": "text", + "prompt": "Are there any price adjustment mechanisms in this agreement? Identify any indexation, CPI/RPI linkage, benchmarking, volume-based adjustments, or other mechanisms that allow prices to change over the term." + }, + { + "index": 8, + "name": "Penalties for Late Payment", + "format": "text", + "prompt": "What penalties or consequences apply for late payment? Include any interest rates on overdue amounts, suspension rights, or other remedies available to the payee." + }, + { + "index": 9, + "name": "Estimated Contract Value", + "format": "monetary_amount", + "prompt": "What is the total estimated or stated contract value? If no single figure is given, calculate or estimate based on stated rates and term. State the currency and any assumptions made." + }, + { + "index": 10, + "name": "Limitation of Liability", + "format": "text", + "prompt": "What limitations of liability apply? Identify any caps on liability (including how they are calculated), exclusions of consequential or indirect loss, and any carve-outs from the cap (e.g. fraud, death, IP infringement)." + }, + { + "index": 11, + "name": "IP Ownership and Licensing", + "format": "text", + "prompt": "How is intellectual property ownership and licensing addressed? Identify who owns pre-existing IP, who owns newly created IP, and what licences are granted to each party. Note any restrictions on use." + }, + { + "index": 12, + "name": "Change of Control", + "format": "text", + "prompt": "Is there a change of control provision? If so, describe what constitutes a change of control, whether consent is required, and what rights (e.g. termination, assignment) are triggered." + }, + { + "index": 13, + "name": "Force Majeure", + "format": "text", + "prompt": "Summarise the force majeure clause. What events qualify, what obligations are suspended, how long must the event persist before termination is permitted, and what notice is required?" + }, + { + "index": 14, + "name": "Termination Rights", + "format": "text", + "prompt": "What are the termination rights of each party? Identify termination for convenience (including notice period), termination for cause (including cure periods), and the consequences of termination (e.g. payment obligations, survival of terms)." + }, + { + "index": 15, + "name": "Liquidated Damages", + "format": "text", + "prompt": "Are there any liquidated damages provisions? If so, identify what triggers them, the applicable rate or formula, any cap on aggregate liquidated damages, and whether they are the exclusive remedy." + }, + { + "index": 16, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced." + }, + { + "index": 17, + "name": "Dispute Resolution", + "format": "text", + "prompt": "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, any escalation or mediation steps required before formal proceedings, and the language of proceedings." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-proofread", + "title": "Proofread", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-corporate-approvals-review", + "title": "Corporate Approvals Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-credit-agreement", + "title": "Credit Agreement Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Lenders", + "format": "bulleted_list", + "prompt": "Identify all lenders (or the lender syndicate) named in this agreement. For each, state their full legal name and role (e.g. mandated lead arranger, original lender, agent bank)." + }, + { + "index": 1, + "name": "Borrowers", + "format": "bulleted_list", + "prompt": "Identify all borrowers named in this agreement, including their full legal name and jurisdiction of incorporation." + }, + { + "index": 2, + "name": "Guarantors", + "format": "bulleted_list", + "prompt": "Identify all guarantors named in this agreement, including their full legal name and the scope of their guarantee obligation." + }, + { + "index": 3, + "name": "Other Parties", + "format": "bulleted_list", + "prompt": "Identify any other material parties to this agreement (e.g. facility agent, security agent, hedge counterparties, issuing bank). State their name and role." + }, + { + "index": 4, + "name": "Date of Agreement", + "format": "date", + "prompt": "What is the date of this credit agreement?" + }, + { + "index": 5, + "name": "Facility", + "format": "bulleted_list", + "prompt": "List each facility available under this agreement (e.g. Revolving Credit Facility, Term Loan A, Term Loan B, Term Loan C). For each, state the facility type, tranche name, and any key structural features." + }, + { + "index": 6, + "name": "Amount", + "format": "monetary_amount", + "prompt": "What is the total committed amount available under this agreement across all facilities? State the amount, currency, and breakdown by tranche if applicable." + }, + { + "index": 7, + "name": "Purpose", + "format": "text", + "prompt": "What is the stated purpose for which borrowings under this agreement may be used? Identify any restrictions on use of proceeds." + }, + { + "index": 8, + "name": "Interest", + "format": "text", + "prompt": "What interest rate applies to borrowings under this agreement? Identify the applicable rate (e.g. SOFR, EURIBOR, base rate), the margin, any margin ratchet mechanism, and how interest periods are structured." + }, + { + "index": 9, + "name": "Commitment Fee", + "format": "text", + "prompt": "Is there a commitment fee or utilisation fee? If so, state the applicable rate, how it is calculated, and on what basis (e.g. undrawn commitment, average utilisation)." + }, + { + "index": 10, + "name": "Repayment Schedule", + "format": "text", + "prompt": "Summarise the repayment schedule for each facility. Identify whether repayment is by scheduled instalments or bullet repayment, and state the repayment dates and amounts where specified." + }, + { + "index": 11, + "name": "Maturity", + "format": "date", + "prompt": "What is the final maturity date of the facilities under this agreement? If different facilities have different maturities, state each." + }, + { + "index": 12, + "name": "Security", + "format": "bulleted_list", + "prompt": "What security is granted or required to be granted under this agreement? List each class of security (e.g. share pledges, fixed and floating charges, real estate mortgages, account pledges) and the assets or entities over which security is taken." + }, + { + "index": 13, + "name": "Guarantees", + "format": "bulleted_list", + "prompt": "What guarantee obligations are given under or in connection with this agreement? Identify the guarantors, the scope of the guarantee, and any limitations (e.g. up-stream guarantee limitations, guarantor coverage test)." + }, + { + "index": 14, + "name": "Financial Covenants", + "format": "bulleted_list", + "prompt": "What financial covenants are included in this agreement? For each covenant identify the metric (e.g. leverage ratio, interest cover, cashflow cover), the applicable test, the testing frequency, and any equity cure rights." + }, + { + "index": 15, + "name": "Events of Default", + "format": "bulleted_list", + "prompt": "List the events of default under this agreement. For each, note any grace periods, materiality thresholds, or cross-default provisions." + }, + { + "index": 16, + "name": "Assignment", + "format": "text", + "prompt": "What restrictions or permissions apply to assignment or transfer of rights under this agreement? Identify restrictions on lender transfers (e.g. white/blacklists, borrower consent) and on borrower assignment." + }, + { + "index": 17, + "name": "Change of Control", + "format": "text", + "prompt": "Is there a change of control provision? If so, what constitutes a change of control, what obligations does it trigger (e.g. mandatory prepayment, cancellation, lender consent), and is there any cure period?" + }, + { + "index": 18, + "name": "Prepayment Fee", + "format": "text", + "prompt": "Are there any prepayment fees, make-whole premiums, or soft-call protections? If so, state the applicable fee, the period during which it applies, and any exceptions (e.g. prepayment from insurance proceeds or asset disposal)." + }, + { + "index": 19, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced." + }, + { + "index": 20, + "name": "Dispute Resolution", + "format": "text", + "prompt": "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, and any submission to jurisdiction provisions." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-ediscovery", + "title": "E-Discovery Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Litigation", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Date", + "format": "date", + "prompt": "What is the date of this document? For emails or correspondence, use the date sent. For other documents, use the date of creation, signature, or the most prominent date shown." + }, + { + "index": 1, + "name": "Type of Document", + "format": "text", + "prompt": "What type of document is this? (e.g. email, memorandum, letter, contract, report, meeting minutes, text message, invoice, presentation). Be specific." + }, + { + "index": 2, + "name": "Sender", + "format": "text", + "prompt": "Who is the sender or author of this document? State their full name, title, and organisation where identifiable." + }, + { + "index": 3, + "name": "Recipient(s)", + "format": "bulleted_list", + "prompt": "Who are the recipients of this document? List all To, CC, and BCC recipients where identifiable. State their full name, title, and organisation for each. Note whether they appear in To, CC, or BCC fields." + }, + { + "index": 4, + "name": "Summary", + "format": "text", + "prompt": "Provide a concise factual summary of the content of this document in 2–4 sentences. Focus on the key subject matter, any decisions made, actions requested, or information conveyed. Do not include legal conclusions." + }, + { + "index": 5, + "name": "Persons Mentioned", + "format": "bulleted_list", + "prompt": "List all individuals mentioned in this document (other than the sender and recipients already identified). For each person, state their name and, if discernible, their role or organisation." + }, + { + "index": 6, + "name": "Privileged?", + "format": "yes_no", + "prompt": "Does this document appear to be legally privileged? Answer Yes if it appears to be a communication between a lawyer and client made for the dominant purpose of obtaining or giving legal advice, or created for the dominant purpose of litigation. Answer No otherwise. If uncertain, note the basis for uncertainty." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-supply-agreement", + "title": "Supply Agreement Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this supply agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. supplier, buyer, distributor)." + }, + { + "index": 1, + "name": "Effective Date", + "format": "date", + "prompt": "What is the effective date or commencement date of this agreement? If no explicit date is stated, note the date it is deemed to take effect." + }, + { + "index": 2, + "name": "Products", + "format": "bulleted_list", + "prompt": "What products are to be supplied under this agreement? List each product or product category, including any relevant specifications, part numbers, or standards referenced." + }, + { + "index": 3, + "name": "Term", + "format": "text", + "prompt": "What is the initial term or duration of this agreement? State the start date (or reference to when it commences) and the end date or duration." + }, + { + "index": 4, + "name": "Renewal", + "format": "text", + "prompt": "What renewal provisions apply? Is renewal automatic or by agreement? State the renewal period, notice requirements to prevent renewal, and any conditions on renewal." + }, + { + "index": 5, + "name": "Delivery", + "format": "text", + "prompt": "What delivery obligations and terms apply? Identify the delivery terms (e.g. Incoterms), delivery lead times, delivery locations, risk of loss, and any consequences for late or failed delivery." + }, + { + "index": 6, + "name": "Quality", + "format": "text", + "prompt": "What quality standards or specifications apply to the products? Identify any applicable standards (e.g. ISO, regulatory requirements), inspection rights, acceptance procedures, and consequences of non-conformance." + }, + { + "index": 7, + "name": "Warranties", + "format": "text", + "prompt": "What warranties does the supplier give in relation to the products? State the warranty period, the scope of the warranty (e.g. free from defects, conformance to specifications), the remedy for breach (e.g. repair, replacement, refund), and any exclusions." + }, + { + "index": 8, + "name": "Liquidated Damages", + "format": "text", + "prompt": "Are there any liquidated damages provisions? If so, identify what triggers them (e.g. late delivery, failure to meet quality standards), the applicable rate or formula, any aggregate cap, and whether they are stated to be the exclusive remedy." + }, + { + "index": 9, + "name": "Limitation of Liability", + "format": "text", + "prompt": "What limitations of liability apply? Identify any caps on liability (and how they are calculated, e.g. contract value, fees paid), exclusions of consequential or indirect loss, and any carve-outs from the limitation (e.g. fraud, wilful misconduct, death or personal injury)." + }, + { + "index": 10, + "name": "Force Majeure", + "format": "text", + "prompt": "Summarise the force majeure clause. What events qualify, what obligations are suspended, what notice must be given, how long must the event persist before either party may terminate, and what are the consequences of termination for force majeure?" + }, + { + "index": 11, + "name": "Termination Rights", + "format": "text", + "prompt": "What are the termination rights of each party? Distinguish between termination for convenience (including notice period) and termination for cause (including cure periods and triggers). Note what happens on termination, including any outstanding purchase orders or payment obligations." + }, + { + "index": 12, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced." + }, + { + "index": 13, + "name": "Dispute Resolution", + "format": "text", + "prompt": "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, and any mandatory escalation steps (e.g. negotiation, mediation) before formal proceedings." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-spa", + "title": "SPA Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this share purchase agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. seller, buyer, target company, warrantor, guarantor)." + }, + { + "index": 1, + "name": "Date", + "format": "date", + "prompt": "What is the date of this share purchase agreement?" + }, + { + "index": 2, + "name": "Transaction", + "format": "text", + "prompt": "Summarise the transaction. What shares or interests are being acquired, in which target company or companies, and what is the nature of the transaction (e.g. 100% acquisition, majority stake, minority investment)?" + }, + { + "index": 3, + "name": "Consideration", + "format": "monetary_amount", + "prompt": "What is the consideration payable under this agreement? State the total headline price, the currency, and the structure (e.g. cash, shares, loan notes, deferred consideration, earnout). If the price is subject to adjustment (e.g. locked box, completion accounts), describe the mechanism." + }, + { + "index": 4, + "name": "Key Conditions Precedent", + "format": "bulleted_list", + "prompt": "List the key conditions precedent (CPs) to completion. For each CP, state what must be satisfied or waived and by whom. Identify any long-stop date by which CPs must be satisfied." + }, + { + "index": 5, + "name": "Completion Date", + "format": "text", + "prompt": "When does completion occur? State how many business days after satisfaction or waiver of all CPs completion must occur, and/or any fixed outside date for completion. Note whether there is any obligation to complete by a specific date after signing." + }, + { + "index": 6, + "name": "Warranties", + "format": "text", + "prompt": "Summarise the warranty package. Who gives the warranties (e.g. seller, management, all sellers jointly and severally)? Are there business warranties and/or title warranties? Identify the scope of any warranty disclosure process and any limitations on warranty claims (e.g. time limits, minimum claim thresholds, aggregate cap)." + }, + { + "index": 7, + "name": "Indemnities", + "format": "text", + "prompt": "Are there specific indemnities in this agreement? If so, list the key indemnities given, by whom, and for what potential liabilities (e.g. tax indemnity, environmental indemnity, litigation indemnity). Note any time limits or caps applicable to indemnity claims." + }, + { + "index": 8, + "name": "Limitation of Liability", + "format": "text", + "prompt": "What limitations on liability apply to warranty and indemnity claims? Identify the aggregate cap (and how it is calculated, e.g. as a percentage of consideration), any separate cap for fundamental warranties or indemnities, minimum claim thresholds (de minimis and basket/deductible), and time limits for bringing claims." + }, + { + "index": 9, + "name": "Covenants", + "format": "text", + "prompt": "What restrictive or other covenants are given by the seller or management? Include non-compete, non-solicitation, and non-dealing covenants, stating the scope (activities and geography) and duration of each." + }, + { + "index": 10, + "name": "Exclusivity", + "format": "text", + "prompt": "Is there an exclusivity or no-shop provision in this agreement? If so, state the period of exclusivity, what activities are restricted (e.g. soliciting competing offers, engaging with third parties), and any carve-outs or break fee arrangements." + }, + { + "index": 11, + "name": "Governing Law and Jurisdiction", + "format": "text", + "prompt": "What governing law applies to this agreement and what courts or arbitral tribunals have jurisdiction? State the chosen law, the forum for disputes, and whether jurisdiction is exclusive or non-exclusive." + }, + { + "index": 12, + "name": "Dispute Resolution", + "format": "text", + "prompt": "How are disputes to be resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen seat or forum, the applicable rules (if arbitration), and any mandatory pre-dispute escalation steps." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-nda", + "title": "NDA Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Direction", + "format": "tag", + "tags": [ + "Mutual", + "Unilateral" + ], + "prompt": "Is this NDA mutual (both parties owe confidentiality obligations to each other) or unilateral (only one party owes confidentiality obligations)? Identify the direction and name the disclosing and receiving party or parties." + }, + { + "index": 1, + "name": "Definition of Confidential Information", + "format": "text", + "prompt": "How is 'Confidential Information' defined in this agreement? Is it broadly or narrowly drafted? Does it require information to be marked as confidential, or is all information shared in connection with the purpose automatically covered? Note any express inclusions or exclusions." + }, + { + "index": 2, + "name": "Obligations of Receiving Party", + "format": "bulleted_list", + "prompt": "What are the key obligations of the receiving party in respect of the confidential information? List each obligation (e.g. keep confidential, not disclose to third parties, use only for the permitted purpose, apply a specific standard of care, restrict access to need-to-know personnel)." + }, + { + "index": 3, + "name": "Standard Carveouts Present?", + "format": "yes_no", + "prompt": "Does the agreement include the standard carveouts to confidentiality obligations? Answer Yes if the agreement excludes information that: (a) is or becomes publicly available without breach; (b) was already known to the receiving party; (c) is independently developed; and (d) is received from a third party without restriction. Note any carveouts that are missing or are drafted differently from the standard formulation." + }, + { + "index": 4, + "name": "Permitted Disclosures", + "format": "bulleted_list", + "prompt": "To whom may the receiving party disclose confidential information? List each category of permitted recipient (e.g. employees, professional advisers, affiliates, financing parties, regulatory authorities). Note whether onward disclosure requires the recipient to be bound by equivalent obligations." + }, + { + "index": 5, + "name": "Term and Duration", + "format": "text", + "prompt": "What is the term of this NDA and how long do the confidentiality obligations last? State the initial term of the agreement and the duration of the confidentiality obligations (noting whether they survive termination and for how long)." + }, + { + "index": 6, + "name": "Return and Destruction", + "format": "text", + "prompt": "What obligations apply on expiry or termination regarding return or destruction of confidential information? Is there a choice between return and destruction? Must destruction be certified? Are there any retention exceptions (e.g. for regulatory purposes, IT backup systems)?" + }, + { + "index": 7, + "name": "Remedies", + "format": "text", + "prompt": "What remedies are available for breach of the confidentiality obligations? Does the agreement acknowledge that damages may be inadequate and that injunctive relief or specific performance is available? Are there any agreed liquidated damages or indemnities for breach?" + }, + { + "index": 8, + "name": "Governing Law and Jurisdiction", + "format": "text", + "prompt": "What governing law applies to this agreement and which courts have jurisdiction? State the chosen law, the forum, and whether jurisdiction is exclusive or non-exclusive." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-commercial-lease", + "title": "Commercial Lease Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Real Estate", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Landlord", + "format": "text", + "prompt": "Who is the landlord under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address or title number stated." + }, + { + "index": 1, + "name": "Tenant", + "format": "text", + "prompt": "Who is the tenant under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address stated." + }, + { + "index": 2, + "name": "Guarantor", + "format": "text", + "prompt": "Is there a guarantor under this lease? If so, state the guarantor's full legal name and the scope of the guarantee (e.g. full guarantee of the tenant's obligations, or limited to specific obligations). If there is no guarantor, state this explicitly." + }, + { + "index": 3, + "name": "Premises", + "format": "text", + "prompt": "Describe the premises demised under this lease. Include the address, floor(s), unit reference, net internal area (if stated), and any areas included or excluded from the demise (e.g. common parts, roof, structure, car parking)." + }, + { + "index": 4, + "name": "Date of Lease", + "format": "date", + "prompt": "What is the date of this lease? If the lease is undated or if the term commencement date differs from the execution date, note both." + }, + { + "index": 5, + "name": "Term", + "format": "text", + "prompt": "What is the contractual term of this lease? State the length of the term and the term commencement and expiry dates." + }, + { + "index": 6, + "name": "Rent", + "format": "monetary_amount", + "prompt": "What is the initial annual rent payable under this lease? State the amount, the currency, the payment frequency (e.g. quarterly in advance), and the payment dates. Note any rent-free period or initial concessionary rent." + }, + { + "index": 7, + "name": "Rent Review", + "format": "text", + "prompt": "Are there rent review provisions? If so, state the review dates or frequency, the review mechanism (e.g. open market rent review, RPI/CPI indexation, fixed uplift), whether the review is upward-only, any assumptions and disregards applicable to an open market review, and the dispute resolution mechanism if the parties cannot agree the reviewed rent." + }, + { + "index": 8, + "name": "Service Charge", + "format": "text", + "prompt": "Is the tenant liable for a service charge? If so, describe what costs are included within the service charge, the tenant's apportionment or percentage share, any cap on the service charge, and how the service charge is administered and reconciled." + }, + { + "index": 9, + "name": "Insurance", + "format": "text", + "prompt": "What are the insurance obligations under this lease? State who insures (landlord or tenant), what risks must be insured, who bears the insurance premium cost, and the tenant's obligations in respect of the landlord's insurance (e.g. not to vitiate the policy, to pay the premium as additional rent)." + }, + { + "index": 10, + "name": "Permitted Use", + "format": "text", + "prompt": "What is the permitted use of the premises under this lease? State the use class or specific use permitted and identify any restrictions on use. Note whether the landlord's consent is required to change use and on what basis consent may be withheld." + }, + { + "index": 11, + "name": "Repair & Maintenance", + "format": "text", + "prompt": "Who is responsible for repair and maintenance of the premises? Describe the extent of the tenant's repairing obligation (e.g. full repairing, internal repairing only, subject to a schedule of condition). State the landlord's repairing obligations, if any, in respect of the structure, exterior, or common parts." + }, + { + "index": 12, + "name": "Alterations", + "format": "text", + "prompt": "What alterations may the tenant make to the premises? Distinguish between structural and non-structural alterations. Is landlord consent required, and if so on what basis may it be withheld? Must the tenant reinstate alterations at the end of the term?" + }, + { + "index": 13, + "name": "Assignment & Subletting", + "format": "text", + "prompt": "What rights does the tenant have to assign or sublet the premises? State whether assignment and subletting are permitted with landlord consent, on what grounds consent may be withheld, any conditions to be satisfied (e.g. an authorised guarantee agreement on assignment, rent at no less than the passing rent on subletting), and whether any dealings are prohibited outright." + }, + { + "index": 14, + "name": "Break Rights", + "format": "text", + "prompt": "Are there any break rights in this lease? If so, identify who holds the break right (landlord, tenant, or both), the break date(s), the notice period and form required to exercise the break, and any pre-conditions to effective exercise (e.g. no material breach, vacant possession, payment of all sums due)." + }, + { + "index": 15, + "name": "Security of Tenure", + "format": "yes_no", + "prompt": "Does the tenant have statutory security of tenure (e.g. under the Landlord and Tenant Act 1954 in England and Wales, or equivalent legislation in another jurisdiction)? Answer Yes if the lease is contracted in or benefits from security of tenure. Answer No if the lease has been contracted out or if security of tenure does not apply. State the basis for your answer." + }, + { + "index": 16, + "name": "Dilapidations", + "format": "text", + "prompt": "What dilapidations obligations apply at the end of the term? Describe the tenant's yield-up obligations (e.g. to deliver the premises in repair, to reinstate alterations, to redecorate). Is there a schedule of condition limiting the tenant's liability? Note any dilapidations cap or other limitation on the landlord's claim." + }, + { + "index": 17, + "name": "Rent Deposit", + "format": "monetary_amount", + "prompt": "Is a rent deposit required? If so, state the amount, the period for which it is held, the conditions under which the landlord may draw on it, and the circumstances in which it is returned to the tenant." + }, + { + "index": 18, + "name": "Forfeiture & Termination", + "format": "text", + "prompt": "What are the landlord's forfeiture or termination rights? Identify the events that entitle the landlord to forfeit the lease (e.g. non-payment of rent after a grace period, material breach of covenant, insolvency) and any notice requirements before forfeiture can be exercised." + }, + { + "index": 19, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this lease and which courts have jurisdiction over disputes?" + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-lpa", + "title": "Limited Partnership Agreement Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Private Equity", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "General Partner", + "format": "text", + "prompt": "Identify the General Partner(s) of the fund. State the full legal name, jurisdiction of establishment, and any affiliated management entity (e.g. the fund manager or investment adviser) named in the agreement." + }, + { + "index": 1, + "name": "Fund Name & Jurisdiction", + "format": "text", + "prompt": "What is the full name of the fund and in which jurisdiction is the limited partnership established or registered?" + }, + { + "index": 2, + "name": "Total Committed Capital", + "format": "monetary_amount", + "prompt": "What is the total committed capital of the fund? State the target size, any hard cap, the currency, and the closing date or dates if specified." + }, + { + "index": 3, + "name": "Capital Calls & Drawdowns", + "format": "text", + "prompt": "How and when may the GP call capital from LPs? State the notice period for capital calls, the mechanics for issuing a call notice, any limit on the frequency or size of calls, and whether undrawn commitments can be recalled after repayment." + }, + { + "index": 4, + "name": "Penalties for Failure to Fund", + "format": "text", + "prompt": "What are the consequences if an LP fails to fund a capital call? Describe any penalties (e.g. interest on the shortfall, dilution of interest, forced transfer at a discount, loss of voting or distribution rights, exclusion from future investments). Are there any cure periods before penalties apply?" + }, + { + "index": 5, + "name": "Investment Scope & Restrictions", + "format": "text", + "prompt": "What is the fund's stated investment strategy, scope, and any restrictions? Include permitted sectors, geographies, investment stages, instrument types, and any concentration limits (e.g. maximum % of committed capital per single investment). Note how much discretion the GP has to deviate from the stated strategy." + }, + { + "index": 6, + "name": "Fund Term", + "format": "text", + "prompt": "What is the term of the fund? State the initial term (e.g. 10 years from final closing), any permitted extension periods (e.g. 2 × 1-year extensions), who has the right to approve extensions (GP alone or with LP/LPAC consent), and any early termination mechanics." + }, + { + "index": 7, + "name": "Management Fee", + "format": "text", + "prompt": "What management fee is payable to the GP or manager? State the fee rate, the basis on which it is calculated (e.g. committed capital during the investment period, then invested or net asset value thereafter), any step-downs over the fund life, and the payment frequency." + }, + { + "index": 8, + "name": "Carried Interest", + "format": "text", + "prompt": "What carried interest (carry) is payable to the GP? State the carry percentage, the structure (European/fund-level waterfall vs American/deal-by-deal), and identify each step of the distribution waterfall in sequence (e.g. return of capital, preferred return, GP catch-up, then profit split)." + }, + { + "index": 9, + "name": "Preferred Return (Hurdle Rate)", + "format": "percentage", + "prompt": "Is there a preferred return or hurdle rate that LPs must receive before the GP earns carry? State the rate, whether it is compounded (and on what basis), and how it is calculated (e.g. on invested capital, on contributed capital). If there is no preferred return, state this explicitly." + }, + { + "index": 10, + "name": "GP Catch-Up", + "format": "text", + "prompt": "Is there a GP catch-up mechanism after the preferred return is met? If so, describe how it operates: what percentage of distributions go to the GP during the catch-up, and what economic result the catch-up is designed to achieve (e.g. the GP receives 20% of all profits to date)." + }, + { + "index": 11, + "name": "Clawback", + "format": "text", + "prompt": "Is there a clawback obligation on the GP if it receives excess carry? State whether the clawback is calculated at fund level or individual partner level, when it is triggered, any cap or limit on the clawback obligation, and whether there is any escrow or security arrangement to support the GP's clawback obligation." + }, + { + "index": 12, + "name": "Fees & Expenses (Beyond Management Fee)", + "format": "bulleted_list", + "prompt": "What fees and expenses are charged to the fund or LPs beyond the management fee? List each category (e.g. transaction fees, monitoring fees, broken deal costs, formation expenses, legal fees, fund administration costs, organisational expenses). For each, state who bears the cost and whether any amounts are offset against the management fee." + }, + { + "index": 13, + "name": "Distributions", + "format": "text", + "prompt": "How and when are distributions made to LPs? Describe the timing of distributions (e.g. upon realisation of investments or at the GP's discretion), whether the GP can reinvest proceeds within the investment period, and whether distributions may be made in-kind (i.e. as securities rather than cash)." + }, + { + "index": 14, + "name": "Key Person Clause", + "format": "text", + "prompt": "Is there a key person clause? Identify the designated key persons. What triggers the key person event (e.g. departure, incapacity, reduced time commitment below a threshold)? What are the consequences (e.g. suspension of the investment period)? Do LPs have any right to terminate or vote on continuation following a key person event?" + }, + { + "index": 15, + "name": "Removal of the GP", + "format": "text", + "prompt": "Under what circumstances can the GP be removed? Distinguish between removal for cause (e.g. fraud, gross negligence, wilful misconduct — state the LP voting threshold required) and removal without cause (state the LP voting threshold and any associated consequences such as carried interest treatment on removal)." + }, + { + "index": 16, + "name": "Advisory Committee (LPAC)", + "format": "text", + "prompt": "Is there an LP Advisory Committee (LPAC) or similar governance body? If so, describe its composition, how members are selected, its key powers and responsibilities (e.g. approving conflicts of interest, valuations, extensions, related-party transactions), and whether its approval is binding or merely advisory." + }, + { + "index": 17, + "name": "Transfer Restrictions", + "format": "text", + "prompt": "What restrictions apply to an LP transferring or assigning its interest in the fund? Is GP consent required? Are there any permitted transfer exceptions (e.g. to affiliates)? Are secondary market sales permitted and, if so, subject to what conditions or rights of first refusal?" + }, + { + "index": 18, + "name": "Conflicts of Interest", + "format": "text", + "prompt": "How does the agreement address conflicts of interest? Describe the deal allocation policy across funds, any co-investment rights granted to LPs, restrictions on related-party transactions, and the role of the LPAC in reviewing or approving conflicts. Note any specific conflict scenarios expressly contemplated." + }, + { + "index": 19, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this agreement and which courts or arbitral tribunals have jurisdiction over disputes?" + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-sha-summary", + "title": "Shareholder Agreement Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-shareholder-agreement", + "title": "Shareholder Agreement Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this shareholder agreement. For each, state their full legal name, jurisdiction of incorporation or establishment (if stated), and their role (e.g. company, majority shareholder, minority shareholder, investor, founder, management shareholder)." + }, + { + "index": 1, + "name": "Date", + "format": "date", + "prompt": "What is the date of this shareholder agreement?" + }, + { + "index": 2, + "name": "Share Capital & Classes", + "format": "bulleted_list", + "prompt": "What classes of shares are in issue or contemplated by this agreement? For each class, describe the key rights attaching to it including voting rights, dividend rights, liquidation preference (if any), and any conversion or redemption features." + }, + { + "index": 3, + "name": "Shareholdings", + "format": "bulleted_list", + "prompt": "What are the shareholdings of each party as set out or contemplated in this agreement? For each shareholder, state the number of shares held, the class, and the percentage of total share capital (on a fully diluted basis if stated)." + }, + { + "index": 4, + "name": "Board Composition", + "format": "text", + "prompt": "How is the board of directors constituted under this agreement? State the total number of directors, each shareholder's or class of shareholders' right to appoint or nominate directors (and the threshold shareholding required to maintain that right), and any provisions for a chairman or casting vote." + }, + { + "index": 5, + "name": "Reserved Matters", + "format": "bulleted_list", + "prompt": "What are the reserved matters or veto rights set out in this agreement? List each matter that requires shareholder or director approval beyond an ordinary majority (e.g. special majority, unanimity, or the consent of a specific shareholder). Identify the applicable threshold or whose consent is required for each." + }, + { + "index": 6, + "name": "Pre-emption on New Shares", + "format": "text", + "prompt": "What pre-emption rights apply on the issuance of new shares? Describe who holds pre-emption rights, the procedure for offering new shares to existing shareholders, the timeline for acceptance, and any carve-outs or exceptions (e.g. shares issued under an employee option scheme, permitted issuances)." + }, + { + "index": 7, + "name": "Transfer Restrictions", + "format": "text", + "prompt": "What restrictions apply to the transfer of shares? Identify any lock-up periods (and their duration), which transfers are prohibited outright, and which transfers are permitted without consent (e.g. transfers to affiliates or family trusts). Note any board or shareholder approval requirements for transfers." + }, + { + "index": 8, + "name": "Right of First Refusal / Pre-emption on Transfer", + "format": "text", + "prompt": "Is there a right of first refusal or pre-emption right on a proposed transfer of shares? If so, describe who holds the right, the procedure for triggering and exercising it (including notice periods and pricing mechanics), and any exceptions." + }, + { + "index": 9, + "name": "Drag-Along Rights", + "format": "text", + "prompt": "Are there drag-along rights? If so, identify who holds the drag right (e.g. majority shareholders above a specified threshold), the threshold required to trigger a drag, the obligations imposed on dragged shareholders, any conditions on the drag (e.g. minimum price, independent valuation), and any protections for minority shareholders." + }, + { + "index": 10, + "name": "Tag-Along Rights", + "format": "text", + "prompt": "Are there tag-along rights? If so, identify who holds the tag right, the threshold transfer that triggers the tag, the procedure for exercising the tag (including notice periods), the price and terms on which the tagging shareholder may sell, and any exceptions." + }, + { + "index": 11, + "name": "Anti-Dilution Protections", + "format": "text", + "prompt": "Are there any anti-dilution protections for any class of shareholders? If so, describe the type of protection (e.g. full ratchet, weighted average, broad-based or narrow-based), the trigger events, how the adjusted price or entitlement is calculated, and any exceptions (e.g. permitted issuances excluded from the calculation)." + }, + { + "index": 12, + "name": "Dividend Policy", + "format": "text", + "prompt": "What dividend provisions are set out in this agreement? Describe any obligation or policy to pay dividends (e.g. a minimum percentage of distributable profits), any preferential dividend rights attaching to a particular class of shares, and any restrictions on dividend payments (e.g. subject to available profits, board or shareholder approval, lender consent)." + }, + { + "index": 13, + "name": "Exit & Liquidity Provisions", + "format": "text", + "prompt": "What exit or liquidity provisions are included? Describe any agreed exit mechanisms (e.g. trade sale, IPO, drag-along sale), any timelines or milestones by which an exit is targeted, any shareholder rights to initiate or compel an exit process after a specified period, and any preference on exit proceeds attaching to a particular class of shares." + }, + { + "index": 14, + "name": "Deadlock", + "format": "text", + "prompt": "How is deadlock addressed? Describe any deadlock resolution mechanisms (e.g. escalation to senior management, mediation, Russian roulette / shoot-out provisions, put/call options). For each mechanism, state the trigger conditions, the procedure, and the consequences if deadlock is not resolved." + }, + { + "index": 15, + "name": "Non-Compete & Non-Solicitation", + "format": "text", + "prompt": "Are any shareholders subject to non-compete or non-solicitation obligations? If so, identify which shareholders are bound, the scope of the restriction (activities and geography), and the duration (during the term of the agreement and/or for a period after a shareholder ceases to hold shares). Note any carve-outs." + }, + { + "index": 16, + "name": "Confidentiality", + "format": "text", + "prompt": "What confidentiality obligations are imposed on the shareholders? State the scope of confidential information covered, the permitted disclosures (e.g. to professional advisers, affiliates, lenders), and the duration of the obligation. Note whether the obligation survives termination of the agreement." + }, + { + "index": 17, + "name": "Warranties", + "format": "text", + "prompt": "What warranties are given by the shareholders under this agreement? Identify who gives warranties, the subject matter (e.g. title to shares, capacity, no encumbrances, no conflicts), any limitations on warranty claims (e.g. time limits, caps, knowledge qualifications), and any indemnities given alongside the warranties." + }, + { + "index": 18, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced." + }, + { + "index": 19, + "name": "Dispute Resolution", + "format": "text", + "prompt": "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, any mandatory escalation steps, and whether jurisdiction is exclusive." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-employment-agreement", + "title": "Employment Agreement Review", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Employment", + "jurisdictions": [ + "General" + ], + "prompt_md": null, + "columns_config": [ + { + "index": 0, + "name": "Employer", + "format": "text", + "prompt": "Who is the employer under this agreement? State the full legal name and jurisdiction of incorporation or establishment." + }, + { + "index": 1, + "name": "Employee", + "format": "text", + "prompt": "Who is the employee under this agreement? State their full name and, if provided, their address or location." + }, + { + "index": 2, + "name": "Date", + "format": "date", + "prompt": "What is the date of this employment agreement? If a commencement date or start date differs from the signing date, state both." + }, + { + "index": 3, + "name": "Title", + "format": "text", + "prompt": "What is the employee's job title or position as stated in this agreement? If a reporting line is specified, include it." + }, + { + "index": 4, + "name": "Compensation", + "format": "text", + "prompt": "What is the employee's compensation under this agreement? State the base salary or wage, the currency, and the payment frequency (e.g. monthly, bi-weekly). Include any guaranteed bonus, commission, or other fixed remuneration elements." + }, + { + "index": 5, + "name": "Full Time / Part Time", + "format": "tag", + "tags": [ + "Full Time", + "Part Time" + ], + "prompt": "Is this a full-time or part-time position? If part-time, state the number of days or hours per week where specified." + }, + { + "index": 6, + "name": "Independent Contractor?", + "format": "yes_no", + "prompt": "Does the agreement characterise the worker as an independent contractor rather than an employee? Answer Yes if the agreement uses contractor, consultant, or self-employed language. Note any provisions that address the nature of the relationship." + }, + { + "index": 7, + "name": "Benefits", + "format": "bulleted_list", + "prompt": "What benefits are the employee entitled to under this agreement? List each benefit (e.g. health insurance, pension/retirement contributions, life assurance, car allowance, share options, expense reimbursement). Note any eligibility conditions or limits." + }, + { + "index": 8, + "name": "Notice Period (Employer to Employee)", + "format": "text", + "prompt": "What notice must the employer give to terminate the employee's employment (other than for cause)? State the notice period and any provisions for payment in lieu of notice." + }, + { + "index": 9, + "name": "Notice Period (Employee to Employer)", + "format": "text", + "prompt": "What notice must the employee give to resign? State the notice period and any provisions for payment in lieu of notice or garden leave." + }, + { + "index": 10, + "name": "Overtime", + "format": "text", + "prompt": "What provisions apply to overtime? Is the employee eligible for overtime pay, and if so at what rate? Or does the agreement state that the salary is inclusive of any overtime? Note any opt-out of statutory working time limits." + }, + { + "index": 11, + "name": "Working Hours", + "format": "text", + "prompt": "What working hours are specified in this agreement? State the normal hours of work, any flexibility provisions, and whether the employee is expected to work additional hours as required." + }, + { + "index": 12, + "name": "Variation", + "format": "text", + "prompt": "What provisions govern variation of the terms of this agreement? Can the employer unilaterally vary terms, or is the employee's consent required? Note any specific terms that are stated to be variable without consent." + }, + { + "index": 13, + "name": "Intellectual Property Assignment", + "format": "text", + "prompt": "What intellectual property assignment provisions are included? Does the employee assign to the employer all IP created in the course of employment? Are there any carve-outs for pre-existing IP or inventions created outside working hours? Note any moral rights waiver." + }, + { + "index": 14, + "name": "Grounds for Termination", + "format": "bulleted_list", + "prompt": "What grounds for summary dismissal or termination for cause are set out in the agreement? List each ground (e.g. gross misconduct, breach of confidentiality, insolvency, criminal conviction). Note whether summary dismissal is without notice or payment in lieu." + }, + { + "index": 15, + "name": "Annual Leave Entitlement", + "format": "text", + "prompt": "What is the employee's annual leave entitlement? State the number of days (or weeks) per year, whether this is inclusive of or in addition to public holidays, and any provisions for accrual, carry-over, or payment of untaken leave on termination." + } + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-nda-review", + "title": "NDA Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ], + "prompt_md": "## NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-employment-agreement-review", + "title": "Employment Agreement Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Employment", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-guarantee-agreement-review", + "title": "Guarantee Agreement Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-commercial-lease-review", + "title": "Commercial Lease Review", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Real Estate", + "jurisdictions": [ + "General" + ], + "prompt_md": "## Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + } +]; + +export const SYSTEM_WORKFLOW_IDS = new Set(SYSTEM_WORKFLOWS.map((wf) => wf.id)); + +export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; prompt_md: string }[] = [ + { + "id": "builtin-cp-checklist", + "title": "Draft CP Checklist", + "prompt_md": "## Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status)." + }, + { + "id": "builtin-draft-issues-list", + "title": "Draft Issues List", + "prompt_md": "## Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder." + }, + { + "id": "builtin-credit-summary", + "title": "Credit Agreement Review", + "prompt_md": "## Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-proofread", + "title": "Proofread", + "prompt_md": "## Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections." + }, + { + "id": "builtin-corporate-approvals-review", + "title": "Corporate Approvals Review", + "prompt_md": "## Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one." + }, + { + "id": "builtin-sha-summary", + "title": "Shareholder Agreement Review", + "prompt_md": "## Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-nda-review", + "title": "NDA Review", + "prompt_md": "## NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-employment-agreement-review", + "title": "Employment Agreement Review", + "prompt_md": "## Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-guarantee-agreement-review", + "title": "Guarantee Agreement Review", + "prompt_md": "## Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-commercial-lease-review", + "title": "Commercial Lease Review", + "prompt_md": "## Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + } +]; diff --git a/backend/src/lib/userDataCleanup.ts b/backend/src/lib/userDataCleanup.ts index 8f222c6..aa812e6 100644 --- a/backend/src/lib/userDataCleanup.ts +++ b/backend/src/lib/userDataCleanup.ts @@ -321,6 +321,10 @@ export async function deleteUserAccountData( db.from("chats").delete().eq("user_id", userId), db.from("project_subfolders").delete().eq("user_id", userId), db.from("hidden_workflows").delete().eq("user_id", userId), + db + .from("workflow_open_source_submissions") + .delete() + .eq("submitted_by_user_id", userId), db.from("workflow_shares").delete().eq("shared_by_user_id", userId), userEmail ? db diff --git a/backend/src/lib/userDataExport.ts b/backend/src/lib/userDataExport.ts index e2b3310..76749f0 100644 --- a/backend/src/lib/userDataExport.ts +++ b/backend/src/lib/userDataExport.ts @@ -171,6 +171,7 @@ export async function buildUserAccountExport( projects, standaloneDocuments, workflows, + workflowOpenSourceSubmissions, hiddenWorkflows, workflowSharesByUser, workflowSharesWithUser, @@ -194,6 +195,11 @@ export async function buildUserAccountExport( selectAll(db, "workflows", (query) => query.eq("user_id", userId).order("created_at", { ascending: true }), ), + selectAll(db, "workflow_open_source_submissions", (query) => + query + .eq("submitted_by_user_id", userId) + .order("submitted_at", { ascending: true }), + ), selectAll(db, "hidden_workflows", (query) => query.eq("user_id", userId).order("created_at", { ascending: true }), ), @@ -263,6 +269,7 @@ export async function buildUserAccountExport( document_versions: versions, document_edits: edits, workflows, + workflow_open_source_submissions: workflowOpenSourceSubmissions, hidden_workflows: hiddenWorkflows, workflow_shares_by_user: workflowSharesByUser, workflow_shares_with_user: workflowSharesWithUser, diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts index dac083a..b69fe17 100644 --- a/backend/src/middleware/auth.ts +++ b/backend/src/middleware/auth.ts @@ -1,5 +1,6 @@ import { Request, Response, NextFunction } from "express"; import { createClient, type SupabaseClient } from "@supabase/supabase-js"; +import { syncProfileEmail } from "../lib/userLookup"; const isDev = process.env.NODE_ENV !== "production"; const devLog = (...args: Parameters<typeof console.log>) => { @@ -118,6 +119,19 @@ export async function requireAuth( res.locals.userId = data.user.id; res.locals.userEmail = data.user.email?.toLowerCase() ?? ""; res.locals.token = token; + const syncError = await syncProfileEmail( + admin, + data.user.id, + data.user.email, + ); + if (syncError) { + devLog("[auth/profile-email] sync failed", { + method: req.method, + path: req.originalUrl, + userId: data.user.id, + error: syncError.message, + }); + } if (!(await enforceLoginMfaIfEnabled(req, res, admin, token))) { return; } diff --git a/backend/src/routes/chat.ts b/backend/src/routes/chat.ts index 4174e44..2bb3dfd 100644 --- a/backend/src/routes/chat.ts +++ b/backend/src/routes/chat.ts @@ -6,14 +6,17 @@ import { buildMessages, enrichWithPriorEvents, buildWorkflowStore, + appendAskInputsResponseToLastAssistantMessage, + appendAssistantEventsToLastAssistantMessage, AssistantStreamError, buildCancelledAssistantMessage, - extractAnnotations, + extractCitations, isAbortError, runLLMStream, stripTransientAssistantEvents, + parseAskInputsResponsePayload, type ChatMessage, -} from "../lib/chatTools"; +} from "../lib/chat"; import { completeText } from "../lib/llm"; import { getUserModelSettings, @@ -225,8 +228,6 @@ chatRouter.get("/:chatId", requireAuth, async (req, res) => { // produced the edit (always "pending"). If the user later accepts or rejects, // `document_edits.status` is updated but the stored event is not. On chat load // we merge the current DB status in so EditCards render with the real state. -// Legacy rows may also have duplicate edit_data in top-level annotations, so -// keep patching that path until old data no longer matters. async function hydrateEditStatuses( messages: Record<string, unknown>[], db: ReturnType<typeof createServerSupabase>, @@ -242,7 +243,6 @@ async function hydrateEditStatuses( } }; for (const m of messages) { - collectFromAnnList(m.annotations); const content = m.content; if (Array.isArray(content)) { for (const ev of content as Record<string, unknown>[]) { @@ -312,7 +312,6 @@ async function hydrateEditStatuses( }; return messages.map((m) => { const next: Record<string, unknown> = { ...m }; - next.annotations = patchAnnList(m.annotations); if (Array.isArray(m.content)) { next.content = (m.content as Record<string, unknown>[]).map( (ev) => { @@ -439,6 +438,9 @@ chatRouter.post("/", requireAuth, async (req, res) => { if (!parsedModel.ok) { return void res.status(400).json({ detail: parsedModel.detail }); } + const askInputsResponse = parseAskInputsResponsePayload( + body.ask_inputs_response, + ); const messages = parsedMessages.messages; const chat_id = parsedChatId.chatId; @@ -509,7 +511,13 @@ chatRouter.post("/", requireAuth, async (req, res) => { devLog("[chat/stream] resolved chatId", chatId); const lastUser = [...messages].reverse().find((m) => m.role === "user"); - if (lastUser) { + if (askInputsResponse) { + await appendAskInputsResponseToLastAssistantMessage( + db, + chatId, + askInputsResponse, + ); + } else if (lastUser) { await db.from("chat_messages").insert({ chat_id: chatId, role: "user", @@ -571,7 +579,7 @@ chatRouter.post("/", requireAuth, async (req, res) => { try { write(`data: ${JSON.stringify({ type: "chat_id", chatId })}\n\n`); - const { fullText, events, annotations } = await runLLMStream({ + const { fullText, events, citations } = await runLLMStream({ apiMessages, docStore, docIndex, @@ -592,12 +600,21 @@ chatRouter.post("/", requireAuth, async (req, res) => { }); const persistedEvents = stripTransientAssistantEvents(events); - await db.from("chat_messages").insert({ - chat_id: chatId, - role: "assistant", - content: persistedEvents.length ? persistedEvents : null, - annotations: annotations.length ? annotations : null, - }); + if (askInputsResponse) { + await appendAssistantEventsToLastAssistantMessage( + db, + chatId, + persistedEvents, + citations, + ); + } else { + await db.from("chat_messages").insert({ + chat_id: chatId, + role: "assistant", + content: persistedEvents.length ? persistedEvents : null, + citations: citations.length ? citations : null, + }); + } if (!chatTitle && lastUser?.content) { await db @@ -612,17 +629,31 @@ chatRouter.post("/", requireAuth, async (req, res) => { const partial = buildCancelledAssistantMessage({ fullText: err.fullText, events: err.events, - buildAnnotations: (fullText, events) => - extractAnnotations(fullText, docIndex, events), - }); - const { error: saveError } = await db.from("chat_messages").insert({ - chat_id: chatId, - role: "assistant", - content: partial.events.length ? partial.events : null, - annotations: partial.annotations.length - ? partial.annotations - : null, + buildCitations: (fullText, events) => + extractCitations(fullText, docIndex, events), }); + const saveError = askInputsResponse + ? null + : ( + await db.from("chat_messages").insert({ + chat_id: chatId, + role: "assistant", + content: partial.events.length + ? partial.events + : null, + citations: partial.citations.length + ? partial.citations + : null, + }) + ).error; + if (askInputsResponse) { + await appendAssistantEventsToLastAssistantMessage( + db, + chatId, + partial.events, + partial.citations, + ); + } if (saveError) { console.error( "[chat/stream] failed to save aborted stream", @@ -640,17 +671,29 @@ chatRouter.post("/", requireAuth, async (req, res) => { const errorFullText = err instanceof AssistantStreamError ? err.fullText : ""; try { - const annotations = extractAnnotations( + const citations = extractCitations( errorFullText, docIndex, errorEvents, ); - const { error: saveError } = await db.from("chat_messages").insert({ - chat_id: chatId, - role: "assistant", - content: errorEvents.length ? errorEvents : null, - annotations: annotations.length ? annotations : null, - }); + const saveError = askInputsResponse + ? null + : ( + await db.from("chat_messages").insert({ + chat_id: chatId, + role: "assistant", + content: errorEvents.length ? errorEvents : null, + citations: citations.length ? citations : null, + }) + ).error; + if (askInputsResponse) { + await appendAssistantEventsToLastAssistantMessage( + db, + chatId, + errorEvents, + citations, + ); + } if (saveError) console.error("[chat/stream] failed to save error", saveError); } catch (saveErr) { diff --git a/backend/src/routes/documents.ts b/backend/src/routes/documents.ts index 01528f0..dd7c0de 100644 --- a/backend/src/routes/documents.ts +++ b/backend/src/routes/documents.ts @@ -23,9 +23,14 @@ import { } from "../lib/documentVersions"; import { ensureDocAccess } from "../lib/access"; import { singleFileUpload } from "../lib/upload"; +import { + ALLOWED_DOCUMENT_TYPES, + ALLOWED_DOCUMENT_TYPES_LABEL, + contentTypeForDocumentType, + shouldConvertToPdf, +} from "../lib/documentTypes"; export const documentsRouter = Router(); -const ALLOWED_TYPES = new Set(["pdf", "docx", "doc"]); const isDev = process.env.NODE_ENV !== "production"; const devLog = (...args: Parameters<typeof console.log>) => { if (isDev) console.log(...args); @@ -129,16 +134,16 @@ documentsRouter.get("/:documentId/display", requireAuth, async (req, res) => { return void res.status(404).json({ detail: "No file available" }); const fileType = active.file_type ?? ""; - const isDocx = fileType === "docx" || fileType === "doc"; + const isConvertibleOffice = shouldConvertToPdf(fileType); const displayFilename = downloadFilenameForVersion( active.filename, active.version_number, active.source === "assistant_edit", ); - // For DOCX, prefer the per-version PDF rendition if one exists. + // For Office files, prefer the per-version PDF rendition if one exists. const servePath = - isDocx && active.pdf_storage_path + isConvertibleOffice && active.pdf_storage_path ? active.pdf_storage_path : active.storage_path; const raw = await downloadFile(servePath); @@ -147,7 +152,7 @@ documentsRouter.get("/:documentId/display", requireAuth, async (req, res) => { .status(404) .json({ detail: "Document not found in storage" }); - if (fileType === "pdf" || (isDocx && active.pdf_storage_path)) { + if (fileType === "pdf" || (isConvertibleOffice && active.pdf_storage_path)) { res.setHeader("Content-Type", "application/pdf"); res.setHeader( "Content-Disposition", @@ -155,11 +160,8 @@ documentsRouter.get("/:documentId/display", requireAuth, async (req, res) => { ); res.send(Buffer.from(raw)); } else { - // Fallback: serve raw DOCX (mammoth will handle it client-side) - res.setHeader( - "Content-Type", - "application/vnd.openxmlformats-officedocument.wordprocessingml.document", - ); + // Fallback: serve raw Office bytes when PDF conversion was unavailable. + res.setHeader("Content-Type", contentTypeForDocumentType(fileType)); res.setHeader( "Content-Disposition", buildContentDisposition("inline", displayFilename), @@ -455,10 +457,7 @@ documentsRouter.post( (filename.includes(".") ? filename.split(".").pop()!.toLowerCase() : ""); const versionSlug = crypto.randomUUID().replace(/-/g, ""); const key = versionStorageKey(userId, documentId, versionSlug, filename); - const contentType = - suffix === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + const contentType = contentTypeForDocumentType(suffix); try { await uploadFile(key, bytes, contentType); @@ -483,7 +482,7 @@ documentsRouter.post( pdfStoragePath = pdfKey; } } - } else if (suffix === "docx" || suffix === "doc") { + } else if (shouldConvertToPdf(suffix)) { try { const pdfBuf = await docxToPdf(Buffer.from(bytes)); const pdfKey = `converted-pdfs/${userId}/${documentId}/${versionSlug}.pdf`; @@ -498,7 +497,7 @@ documentsRouter.post( pdfStoragePath = pdfKey; } catch (err) { console.error( - `[versions/copy] DOCX→PDF conversion failed for ${filename}:`, + `[versions/copy] Office→PDF conversion failed for ${filename}:`, err, ); } @@ -599,9 +598,9 @@ documentsRouter.post( const suffix = file.originalname.includes(".") ? file.originalname.split(".").pop()!.toLowerCase() : ""; - if (!ALLOWED_TYPES.has(suffix)) { + if (!ALLOWED_DOCUMENT_TYPES.has(suffix)) { return void res.status(400).json({ - detail: `Unsupported file type: ${suffix}. Allowed: pdf, docx, doc`, + detail: `Unsupported file type: ${suffix}. Allowed: ${ALLOWED_DOCUMENT_TYPES_LABEL}`, }); } @@ -614,10 +613,7 @@ documentsRouter.post( versionSlug, file.originalname, ); - const contentType = - suffix === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + const contentType = contentTypeForDocumentType(suffix); try { await uploadFile( key, @@ -638,7 +634,7 @@ documentsRouter.post( // historical versions without on-demand conversion. Same logic as the // initial-upload pipeline; failures don't block the version row. let pdfStoragePath: string | null = null; - if (suffix === "docx" || suffix === "doc") { + if (shouldConvertToPdf(suffix)) { try { const pdfBuf = await docxToPdf(file.buffer); const pdfKey = `converted-pdfs/${userId}/${documentId}/${versionSlug}.pdf`; @@ -653,7 +649,7 @@ documentsRouter.post( pdfStoragePath = pdfKey; } catch (err) { console.error( - `[versions/upload] DOCX→PDF conversion failed for ${file.originalname}:`, + `[versions/upload] Office→PDF conversion failed for ${file.originalname}:`, err, ); } @@ -814,9 +810,9 @@ documentsRouter.put( const suffix = file.originalname.includes(".") ? file.originalname.split(".").pop()!.toLowerCase() : ""; - if (!ALLOWED_TYPES.has(suffix)) { + if (!ALLOWED_DOCUMENT_TYPES.has(suffix)) { return void res.status(400).json({ - detail: `Unsupported file type: ${suffix}. Allowed: pdf, docx, doc`, + detail: `Unsupported file type: ${suffix}. Allowed: ${ALLOWED_DOCUMENT_TYPES_LABEL}`, }); } if (target.file_type && target.file_type !== suffix) { @@ -832,10 +828,7 @@ documentsRouter.put( versionSlug, file.originalname, ); - const contentType = - suffix === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + const contentType = contentTypeForDocumentType(suffix); try { await uploadFile( @@ -854,7 +847,7 @@ documentsRouter.put( } let pdfStoragePath: string | null = null; - if (suffix === "docx" || suffix === "doc") { + if (shouldConvertToPdf(suffix)) { try { const pdfBuf = await docxToPdf(file.buffer); const pdfKey = `converted-pdfs/${userId}/${documentId}/${versionSlug}.pdf`; @@ -869,7 +862,7 @@ documentsRouter.put( pdfStoragePath = pdfKey; } catch (err) { console.error( - `[versions/replace] DOCX→PDF conversion failed for ${file.originalname}:`, + `[versions/replace] Office→PDF conversion failed for ${file.originalname}:`, err, ); } @@ -1304,11 +1297,11 @@ async function handleDocumentUpload( const suffix = filename.includes(".") ? filename.split(".").pop()!.toLowerCase() : ""; - if (!ALLOWED_TYPES.has(suffix)) + if (!ALLOWED_DOCUMENT_TYPES.has(suffix)) return void res .status(400) .json({ - detail: `Unsupported file type: ${suffix}. Allowed: pdf, docx, doc`, + detail: `Unsupported file type: ${suffix}. Allowed: ${ALLOWED_DOCUMENT_TYPES_LABEL}`, }); const content = file.buffer; @@ -1338,10 +1331,7 @@ async function handleDocumentUpload( try { const docId = doc.id as string; const key = storageKey(userId, docId, filename); - const contentType = - suffix === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + const contentType = contentTypeForDocumentType(suffix); await uploadFile( key, content.buffer.slice( @@ -1357,9 +1347,9 @@ async function handleDocumentUpload( ) as ArrayBuffer; const pageCount = suffix === "pdf" ? await countPdfPages(rawBuf) : null; - // Convert DOCX/DOC → PDF for display. PDFs are their own rendition. + // Convert Office files → PDF for display. PDFs are their own rendition. let pdfStoragePath: string | null = null; - if (suffix === "docx" || suffix === "doc") { + if (shouldConvertToPdf(suffix)) { try { const pdfBuf = await docxToPdf(content); const pdfKey = convertedPdfKey(userId, docId); @@ -1374,7 +1364,7 @@ async function handleDocumentUpload( pdfStoragePath = pdfKey; } catch (err) { console.error( - `[upload] DOCX→PDF conversion failed for ${filename}:`, + `[upload] Office→PDF conversion failed for ${filename}:`, err, ); } diff --git a/backend/src/routes/downloads.ts b/backend/src/routes/downloads.ts index 8a7f843..9726f86 100644 --- a/backend/src/routes/downloads.ts +++ b/backend/src/routes/downloads.ts @@ -4,17 +4,15 @@ import { createServerSupabase } from "../lib/supabase"; import { buildContentDisposition, downloadFile } from "../lib/storage"; import { verifyDownload } from "../lib/downloadTokens"; import { ensureDocAccess } from "../lib/access"; +import { contentTypeForDocumentType } from "../lib/documentTypes"; export const downloadsRouter = Router(); function contentTypeFor(filename: string): string { - const lower = filename.toLowerCase(); - if (lower.endsWith(".docx")) - return "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; - if (lower.endsWith(".pdf")) return "application/pdf"; - if (lower.endsWith(".xlsx")) - return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; - return "application/octet-stream"; + const suffix = filename.includes(".") + ? filename.split(".").pop()?.toLowerCase() + : ""; + return contentTypeForDocumentType(suffix); } // GET /download/:token diff --git a/backend/src/routes/projectChat.ts b/backend/src/routes/projectChat.ts index 1a3a9ea..56ea6ef 100644 --- a/backend/src/routes/projectChat.ts +++ b/backend/src/routes/projectChat.ts @@ -6,15 +6,18 @@ import { buildMessages, buildWorkflowStore, enrichWithPriorEvents, + appendAskInputsResponseToLastAssistantMessage, + appendAssistantEventsToLastAssistantMessage, AssistantStreamError, buildCancelledAssistantMessage, - extractAnnotations, + extractCitations, isAbortError, runLLMStream, stripTransientAssistantEvents, PROJECT_EXTRA_TOOLS, + parseAskInputsResponsePayload, type ChatMessage, -} from "../lib/chatTools"; +} from "../lib/chat"; import { getUserModelSettings, } from "../lib/userSettings"; @@ -36,14 +39,25 @@ projectChatRouter.post("/", requireAuth, async (req, res) => { const userId = res.locals.userId as string; const userEmail = res.locals.userEmail as string | undefined; const { projectId } = req.params; - const { messages, chat_id, model, displayed_doc, attached_documents } = + const { + messages, + chat_id, + model, + displayed_doc, + attached_documents, + ask_inputs_response, + } = req.body as { messages: ChatMessage[]; chat_id?: string; model?: string; displayed_doc?: { filename: string; document_id: string }; attached_documents?: { filename: string; document_id: string }[]; + ask_inputs_response?: unknown; }; + const askInputsResponse = parseAskInputsResponsePayload( + ask_inputs_response, + ); const db = createServerSupabase(); @@ -86,7 +100,13 @@ projectChatRouter.post("/", requireAuth, async (req, res) => { } const lastUser = [...messages].reverse().find((m) => m.role === "user"); - if (lastUser) { + if (askInputsResponse) { + await appendAskInputsResponseToLastAssistantMessage( + db, + chatId, + askInputsResponse, + ); + } else if (lastUser) { await db.from("chat_messages").insert({ chat_id: chatId, role: "user", @@ -173,7 +193,7 @@ projectChatRouter.post("/", requireAuth, async (req, res) => { try { write(`data: ${JSON.stringify({ type: "chat_id", chatId })}\n\n`); - const { events, annotations } = await runLLMStream({ + const { events, citations } = await runLLMStream({ apiMessages, docStore, docIndex, @@ -190,12 +210,21 @@ projectChatRouter.post("/", requireAuth, async (req, res) => { }); const persistedEvents = stripTransientAssistantEvents(events); - await db.from("chat_messages").insert({ - chat_id: chatId, - role: "assistant", - content: persistedEvents.length ? persistedEvents : null, - annotations: annotations.length ? annotations : null, - }); + if (askInputsResponse) { + await appendAssistantEventsToLastAssistantMessage( + db, + chatId, + persistedEvents, + citations, + ); + } else { + await db.from("chat_messages").insert({ + chat_id: chatId, + role: "assistant", + content: persistedEvents.length ? persistedEvents : null, + citations: citations.length ? citations : null, + }); + } if (!chatTitle && lastUser?.content) { await db @@ -212,17 +241,31 @@ projectChatRouter.post("/", requireAuth, async (req, res) => { const partial = buildCancelledAssistantMessage({ fullText: err.fullText, events: err.events, - buildAnnotations: (fullText, events) => - extractAnnotations(fullText, docIndex, events), - }); - const { error: saveError } = await db.from("chat_messages").insert({ - chat_id: chatId, - role: "assistant", - content: partial.events.length ? partial.events : null, - annotations: partial.annotations.length - ? partial.annotations - : null, + buildCitations: (fullText, events) => + extractCitations(fullText, docIndex, events), }); + const saveError = askInputsResponse + ? null + : ( + await db.from("chat_messages").insert({ + chat_id: chatId, + role: "assistant", + content: partial.events.length + ? partial.events + : null, + citations: partial.citations.length + ? partial.citations + : null, + }) + ).error; + if (askInputsResponse) { + await appendAssistantEventsToLastAssistantMessage( + db, + chatId, + partial.events, + partial.citations, + ); + } if (saveError) { console.error( "[project-chat/stream] failed to save aborted stream", @@ -240,17 +283,29 @@ projectChatRouter.post("/", requireAuth, async (req, res) => { const errorFullText = err instanceof AssistantStreamError ? err.fullText : ""; try { - const annotations = extractAnnotations( + const citations = extractCitations( errorFullText, docIndex, errorEvents, ); - const { error: saveError } = await db.from("chat_messages").insert({ - chat_id: chatId, - role: "assistant", - content: errorEvents.length ? errorEvents : null, - annotations: annotations.length ? annotations : null, - }); + const saveError = askInputsResponse + ? null + : ( + await db.from("chat_messages").insert({ + chat_id: chatId, + role: "assistant", + content: errorEvents.length ? errorEvents : null, + citations: citations.length ? citations : null, + }) + ).error; + if (askInputsResponse) { + await appendAssistantEventsToLastAssistantMessage( + db, + chatId, + errorEvents, + citations, + ); + } if (saveError) console.error("[project-chat/stream] failed to save error", saveError); } catch (saveErr) { diff --git a/backend/src/routes/projects.ts b/backend/src/routes/projects.ts index 893e255..76b7181 100644 --- a/backend/src/routes/projects.ts +++ b/backend/src/routes/projects.ts @@ -16,9 +16,24 @@ import { docxToPdf, convertedPdfKey } from "../lib/convert"; import { checkProjectAccess } from "../lib/access"; import { singleFileUpload } from "../lib/upload"; import { deleteUserProjects } from "../lib/userDataCleanup"; +import { + ALLOWED_DOCUMENT_TYPES, + ALLOWED_DOCUMENT_TYPES_LABEL, + contentTypeForDocumentType, + shouldConvertToPdf, +} from "../lib/documentTypes"; +import { + findMissingUserEmails, + loadProfileUsersByEmail, +} from "../lib/userLookup"; export const projectsRouter = Router(); -const ALLOWED_TYPES = new Set(["pdf", "docx", "doc"]); + +function normalizeOptionalString(value: unknown) { + if (typeof value !== "string") return null; + const trimmed = value.trim(); + return trimmed.length > 0 ? trimmed : null; +} function normalizeDocumentFilename(nextName: unknown, currentName: string) { if (typeof nextName !== "string") return null; @@ -155,9 +170,10 @@ projectsRouter.get("/", requireAuth, async (req, res) => { projectsRouter.post("/", requireAuth, async (req, res) => { const userId = res.locals.userId as string; const userEmail = res.locals.userEmail as string | undefined; - const { name, cm_number, shared_with } = req.body as { + const { name, cm_number, practice, shared_with } = req.body as { name: string; cm_number?: string; + practice?: string; shared_with?: string[]; }; if (!name?.trim()) @@ -181,12 +197,20 @@ projectsRouter.post("/", requireAuth, async (req, res) => { } const db = createServerSupabase(); + const missingSharedUsers = await findMissingUserEmails(db, cleanedSharedWith); + if (missingSharedUsers.length > 0) { + return void res.status(400).json({ + detail: `${missingSharedUsers[0]} does not belong to a Mike user.`, + }); + } + const { data, error } = await db .from("projects") .insert({ user_id: userId, name: name.trim(), - cm_number: cm_number ?? null, + cm_number: normalizeOptionalString(cm_number), + practice: normalizeOptionalString(practice), shared_with: cleanedSharedWith, }) .select("*") @@ -266,60 +290,18 @@ projectsRouter.get("/:projectId/people", requireAuth, async (req, res) => { if (!isOwner && !isShared) return void res.status(404).json({ detail: "Project not found" }); - // Pull every auth user (matching the lookup endpoint's pattern). For - // larger deployments this should page or be replaced with a bulk-by-id - // RPC, but it keeps things simple while user counts are modest. - const { data: usersData } = await db.auth.admin.listUsers({ perPage: 1000 }); - const allUsers = usersData?.users ?? []; - const userByEmail = new Map<string, { id: string; email: string }>(); - const userById = new Map<string, { id: string; email: string }>(); - for (const u of allUsers) { - if (!u.email) continue; - const lower = u.email.toLowerCase(); - userByEmail.set(lower, { id: u.id, email: u.email }); - userById.set(u.id, { id: u.id, email: u.email }); - } - - const memberUserIds: string[] = []; - for (const email of sharedWith) { - const u = userByEmail.get(email); - if (u) memberUserIds.push(u.id); - } - - const profileIds = [ - project.user_id as string, - ...memberUserIds, - ].filter((x, i, arr) => arr.indexOf(x) === i); - - const profileByUserId = new Map< - string, - { display_name: string | null; organisation: string | null } - >(); - if (profileIds.length > 0) { - const { data: profiles } = await db - .from("user_profiles") - .select("user_id, display_name, organisation") - .in("user_id", profileIds); - for (const p of profiles ?? []) { - profileByUserId.set(p.user_id as string, { - display_name: (p.display_name as string | null) ?? null, - organisation: (p.organisation as string | null) ?? null, - }); - } - } + // Use the mirrored profile email so sharing checks do not scan auth.users. + const { userByEmail, userById } = await loadProfileUsersByEmail(db); const ownerInfo = userById.get(project.user_id as string); const owner = { user_id: project.user_id, email: ownerInfo?.email ?? null, - display_name: - profileByUserId.get(project.user_id as string)?.display_name ?? null, + display_name: ownerInfo?.display_name ?? null, }; const members = sharedWith.map((email) => { const u = userByEmail.get(email); - const display_name = u - ? profileByUserId.get(u.id)?.display_name ?? null - : null; + const display_name = u?.display_name ?? null; return { email, display_name }; }); @@ -334,6 +316,9 @@ projectsRouter.patch("/:projectId", requireAuth, async (req, res) => { const updates: Record<string, unknown> = {}; if (req.body.name != null) updates.name = req.body.name; if (req.body.cm_number != null) updates.cm_number = req.body.cm_number; + if ("practice" in req.body) { + updates.practice = normalizeOptionalString(req.body.practice); + } if (Array.isArray(req.body.shared_with)) { // Normalise: lowercase + dedupe + drop empties. const normalizedUserEmail = userEmail?.trim().toLowerCase(); @@ -355,6 +340,18 @@ projectsRouter.patch("/:projectId", requireAuth, async (req, res) => { } const db = createServerSupabase(); + if (Array.isArray(updates.shared_with)) { + const missingSharedUsers = await findMissingUserEmails( + db, + updates.shared_with as string[], + ); + if (missingSharedUsers.length > 0) { + return void res.status(400).json({ + detail: `${missingSharedUsers[0]} does not belong to a Mike user.`, + }); + } + } + const { data, error } = await db .from("projects") .update({ ...updates, updated_at: new Date().toISOString() }) @@ -519,10 +516,9 @@ projectsRouter.post( ); let newPdfPath: string | null = null; try { - const contentType = - ((srcV.file_type as string | null) ?? doc.file_type) === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + const contentType = contentTypeForDocumentType( + (srcV.file_type as string | null) ?? doc.file_type, + ); await uploadFile(newKey, srcBytes, contentType); // PDFs share one object for source + display rendition. DOCX @@ -885,11 +881,11 @@ export async function handleDocumentUpload( const suffix = filename.includes(".") ? filename.split(".").pop()!.toLowerCase() : ""; - if (!ALLOWED_TYPES.has(suffix)) + if (!ALLOWED_DOCUMENT_TYPES.has(suffix)) return void res .status(400) .json({ - detail: `Unsupported file type: ${suffix}. Allowed: pdf, docx, doc`, + detail: `Unsupported file type: ${suffix}. Allowed: ${ALLOWED_DOCUMENT_TYPES_LABEL}`, }); const content = file.buffer; @@ -911,10 +907,7 @@ export async function handleDocumentUpload( try { const docId = doc.id as string; const key = storageKey(userId, docId, filename); - const contentType = - suffix === "pdf" - ? "application/pdf" - : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"; + const contentType = contentTypeForDocumentType(suffix); await uploadFile( key, content.buffer.slice( @@ -930,9 +923,9 @@ export async function handleDocumentUpload( ) as ArrayBuffer; const pageCount = suffix === "pdf" ? await countPdfPages(rawBuf) : null; - // Convert DOCX/DOC → PDF for display. PDFs are their own rendition. + // Convert Office files → PDF for display. PDFs are their own rendition. let pdfStoragePath: string | null = null; - if (suffix === "docx" || suffix === "doc") { + if (shouldConvertToPdf(suffix)) { try { const pdfBuf = await docxToPdf(content); const pdfKey = convertedPdfKey(userId, docId); @@ -947,7 +940,7 @@ export async function handleDocumentUpload( pdfStoragePath = pdfKey; } catch (err) { console.error( - `[upload] DOCX→PDF conversion failed for ${filename}:`, + `[upload] Office→PDF conversion failed for ${filename}:`, err, ); } diff --git a/backend/src/routes/tabular.ts b/backend/src/routes/tabular.ts index fb89a97..de9af9b 100644 --- a/backend/src/routes/tabular.ts +++ b/backend/src/routes/tabular.ts @@ -6,7 +6,14 @@ import { attachActiveVersionPaths, loadActiveVersion, } from "../lib/documentVersions"; -import { normalizeDocxZipPaths } from "../lib/convert"; +import { docxToPdf, normalizeDocxZipPaths } from "../lib/convert"; +import { + isPresentationDocumentType, + isSpreadsheetDocumentType, + isWordDocumentType, +} from "../lib/documentTypes"; +import { extractPresentationText } from "../lib/officeText"; +import { spreadsheetToLLMText } from "../lib/spreadsheet"; import { AssistantStreamError, buildCancelledAssistantMessage, @@ -16,7 +23,7 @@ import { TABULAR_TOOLS, type ChatMessage, type TabularCellStore, -} from "../lib/chatTools"; +} from "../lib/chat"; import { completeText, providerForModel, @@ -31,6 +38,10 @@ import { filterAccessibleDocumentIds, } from "../lib/access"; import { safeErrorLog, safeErrorMessage } from "../lib/safeError"; +import { + findMissingUserEmails, + loadProfileUsersByEmail, +} from "../lib/userLookup"; function formatPromptSuffix(format?: string, tags?: string[]): string { switch (format) { @@ -307,55 +318,19 @@ tabularRouter.get("/:reviewId/people", requireAuth, async (req, res) => { : [] ).map((e) => (e ?? "").toLowerCase()); - // Same pattern as /projects/:id/people: walk auth.users to map emails - // to user_ids, then pull display_names from user_profiles by user_id. - const { data: usersData } = await db.auth.admin.listUsers({ - perPage: 1000, - }); - const allUsers = usersData?.users ?? []; - const userByEmail = new Map<string, { id: string; email: string }>(); - const userById = new Map<string, { id: string; email: string }>(); - for (const u of allUsers) { - if (!u.email) continue; - const lower = u.email.toLowerCase(); - userByEmail.set(lower, { id: u.id, email: u.email }); - userById.set(u.id, { id: u.id, email: u.email }); - } - - const memberUserIds: string[] = []; - for (const email of sharedWith) { - const u = userByEmail.get(email); - if (u) memberUserIds.push(u.id); - } - - const profileIds = [review.user_id as string, ...memberUserIds].filter( - (x, i, arr) => arr.indexOf(x) === i, - ); - - const profileByUserId = new Map<string, string | null>(); - if (profileIds.length > 0) { - const { data: profiles } = await db - .from("user_profiles") - .select("user_id, display_name") - .in("user_id", profileIds); - for (const p of profiles ?? []) { - profileByUserId.set( - p.user_id as string, - (p.display_name as string | null) ?? null, - ); - } - } + // Use the mirrored profile email so sharing checks do not scan auth.users. + const { userByEmail, userById } = await loadProfileUsersByEmail(db); const ownerInfo = userById.get(review.user_id as string); res.json({ owner: { user_id: review.user_id, email: ownerInfo?.email ?? null, - display_name: profileByUserId.get(review.user_id as string) ?? null, + display_name: ownerInfo?.display_name ?? null, }, members: sharedWith.map((email) => { const u = userByEmail.get(email); - const display_name = u ? (profileByUserId.get(u.id) ?? null) : null; + const display_name = u?.display_name ?? null; return { email, display_name }; }), }); @@ -433,6 +408,15 @@ tabularRouter.patch("/:reviewId", requireAuth, async (req, res) => { return void res .status(403) .json({ detail: "Only the review owner can change sharing" }); + const missingSharedUsers = await findMissingUserEmails( + db, + sharedWithUpdate, + ); + if (missingSharedUsers.length > 0) { + return void res.status(400).json({ + detail: `${missingSharedUsers[0]} does not belong to a Mike user.`, + }); + } updates.shared_with = sharedWithUpdate; } if (projectIdUpdateProvided) { @@ -712,10 +696,10 @@ tabularRouter.post( const buf = await downloadFile(docActive.storage_path); if (buf) { try { - markdown = - docActive.file_type === "pdf" - ? await extractPdfMarkdown(buf) - : await extractDocxMarkdown(buf); + markdown = await extractDocumentMarkdown( + buf, + docActive.file_type, + ); } catch (err) { console.error( `[regenerate-cell] extraction error doc=${document_id}`, @@ -858,10 +842,10 @@ tabularRouter.post("/:reviewId/generate", requireAuth, async (req, res) => { const buf = await downloadFile(storagePath); if (buf) { try { - markdown = - fileType === "pdf" - ? await extractPdfMarkdown(buf) - : await extractDocxMarkdown(buf); + markdown = await extractDocumentMarkdown( + buf, + fileType, + ); } catch (err) { console.error( `[tabular/generate] extraction error doc=${docId}`, @@ -1379,17 +1363,18 @@ tabularRouter.post("/:reviewId/chat", requireAuth, async (req, res) => { const partial = buildCancelledAssistantMessage({ fullText: err.fullText, events: err.events, - buildAnnotations: (fullText) => + buildCitations: (fullText) => extractTabularAnnotations(fullText, tabularStore), }); + const annotations = partial.citations; const { error: saveError } = await db .from("tabular_review_chat_messages") .insert({ chat_id: chatId, role: "assistant", content: partial.events.length ? partial.events : null, - annotations: partial.annotations.length - ? partial.annotations + annotations: annotations.length + ? annotations : null, }); if (saveError) { @@ -1737,6 +1722,34 @@ Rules: await Promise.all(pending); } +async function extractDocumentMarkdown( + buf: ArrayBuffer, + fileType: string | null | undefined, +): Promise<string> { + const normalizedType = (fileType ?? "").toLowerCase(); + if (normalizedType === "pdf") return extractPdfMarkdown(buf); + if (normalizedType === "docx") return extractDocxMarkdown(buf); + if (isSpreadsheetDocumentType(normalizedType)) { + // SheetJS handles .xlsx/.xlsm/.xls directly, no PDF detour. + return spreadsheetToLLMText(Buffer.from(buf)); + } + if (normalizedType === "pptx") { + return extractPresentationText(Buffer.from(buf)); + } + if ( + isPresentationDocumentType(normalizedType) || + isWordDocumentType(normalizedType) + ) { + const pdfBuf = await docxToPdf(Buffer.from(buf)); + const pdfArrayBuffer = pdfBuf.buffer.slice( + pdfBuf.byteOffset, + pdfBuf.byteOffset + pdfBuf.byteLength, + ) as ArrayBuffer; + return extractPdfMarkdown(pdfArrayBuffer); + } + return extractDocxMarkdown(buf); +} + async function extractPdfMarkdown(buf: ArrayBuffer): Promise<string> { try { const pdfjsLib = await import( diff --git a/backend/src/routes/user.ts b/backend/src/routes/user.ts index e08e2aa..ca77f59 100644 --- a/backend/src/routes/user.ts +++ b/backend/src/routes/user.ts @@ -40,6 +40,7 @@ import { buildUserTabularReviewsExport, userExportFilename, } from "../lib/userDataExport"; +import { findProfileUserByEmail } from "../lib/userLookup"; export const userRouter = Router(); @@ -505,6 +506,22 @@ userRouter.post("/profile", requireAuth, async (_req, res) => { res.json({ ok: true }); }); +// GET /user/lookup?email=person@example.com +userRouter.get("/lookup", requireAuth, async (req, res) => { + const email = typeof req.query.email === "string" ? req.query.email : ""; + if (!email.trim()) { + return void res.status(400).json({ detail: "email is required" }); + } + + const db = createServerSupabase(); + const user = await findProfileUserByEmail(db, email); + res.json({ + exists: !!user, + email: user?.email ?? email.trim().toLowerCase(), + display_name: user?.display_name ?? null, + }); +}); + // GET /user/profile userRouter.get("/profile", requireAuth, async (_req, res) => { const userId = res.locals.userId as string; diff --git a/backend/src/routes/workflows.ts b/backend/src/routes/workflows.ts index 1ecfec7..a28e7eb 100644 --- a/backend/src/routes/workflows.ts +++ b/backend/src/routes/workflows.ts @@ -1,18 +1,80 @@ import { Router, type NextFunction, type Request, type Response } from "express"; import { requireAuth } from "../middleware/auth"; import { createServerSupabase } from "../lib/supabase"; +import { + SYSTEM_WORKFLOW_IDS, + SYSTEM_WORKFLOWS, + type SystemWorkflow, +} from "../lib/systemWorkflows"; +import { findMissingUserEmails } from "../lib/userLookup"; export const workflowsRouter = Router(); type Db = ReturnType<typeof createServerSupabase>; +const isDev = process.env.NODE_ENV !== "production"; +const devLog = (...args: Parameters<typeof console.log>) => { + if (isDev) console.log(...args); +}; type WorkflowRecord = { id: string; user_id: string | null; - is_system: boolean; + is_system?: boolean; + title?: string; + type?: string; + prompt_md?: string | null; + columns_config?: unknown; + language?: string | null; + version?: string | null; + practice?: string | null; + jurisdictions?: string[] | null; + created_at?: string; [key: string]: unknown; }; +type WorkflowContributor = { + name: string; + organisation: string | null; + role: string | null; + linkedin: string | null; +}; +type OpenSourceSubmissionStatus = "pending" | "approved" | "rejected"; + +type OpenSourceSubmissionRow = { + id: string; + workflow_id: string; + submitted_by_user_id: string; + submitter_email: string | null; + submitter_name: string | null; + contributor_mode?: "named" | "anonymous"; + status: OpenSourceSubmissionStatus; + snapshot: unknown; + submitted_at: string; + updated_at: string; + reviewed_at?: string | null; + reviewed_by_user_id?: string | null; + review_notes?: string | null; +}; + +type OpenSourceSubmissionSummary = Pick< + OpenSourceSubmissionRow, + "id" | "status" | "submitted_at" | "updated_at" +> & { + reviewed_at?: string | null; +}; + +const DEFAULT_WORKFLOW_CONTRIBUTOR: WorkflowContributor = { + name: "Mike", + organisation: null, + role: null, + linkedin: null, +}; +const DEFAULT_WORKFLOW_LANGUAGE = "English"; +const DEFAULT_WORKFLOW_PRACTICE = "General Transactions"; +const DEFAULT_WORKFLOW_JURISDICTIONS = ["General"]; +const WORKFLOW_CONTRIBUTIONS_ENABLED = + process.env.WORKFLOW_CONTRIBUTIONS_ENABLED === "true"; + type WorkflowAccess = | { workflow: WorkflowRecord; @@ -29,7 +91,7 @@ function asyncRoute(handler: AsyncRoute) { }; } -function withWorkflowAccess<T extends Record<string, unknown>>( +function withWorkflowAccess<T extends object>( workflow: T, access: { allowEdit: boolean; isOwner: boolean; sharedByName?: string | null }, ) { @@ -41,6 +103,70 @@ function withWorkflowAccess<T extends Record<string, unknown>>( }; } +function withOpenSourceSubmission<T extends object>( + workflow: T, + submission: OpenSourceSubmissionSummary | null, +) { + return { + ...workflow, + open_source_submission: submission, + }; +} + +function withSystemWorkflowAccess(workflow: SystemWorkflow) { + return withWorkflowAccess(workflow, { + allowEdit: false, + isOwner: false, + }); +} + +function withDatabaseWorkflow<T extends object>(workflow: T) { + return { + ...workflow, + is_system: false, + }; +} + +function normalizeOptionalString(value: unknown): string | null { + if (typeof value !== "string") return null; + const trimmed = value.trim(); + return trimmed || null; +} + +function normalizeJurisdictions(value: unknown): string[] | null { + if (!Array.isArray(value)) return null; + const items = value + .map((item) => normalizeOptionalString(item)) + .filter((item): item is string => !!item); + return items.length > 0 ? Array.from(new Set(items)) : null; +} + +function normalizeContributors(value: unknown): WorkflowContributor[] | null { + if (!Array.isArray(value)) return null; + const contributors = value + .map((item): WorkflowContributor | null => { + if (!item || typeof item !== "object" || Array.isArray(item)) return null; + const record = item as Record<string, unknown>; + const name = normalizeOptionalString(record.name); + if (!name) return null; + return { + name, + organisation: normalizeOptionalString(record.organisation), + role: normalizeOptionalString(record.role), + linkedin: normalizeOptionalString(record.linkedin), + }; + }) + .filter((item): item is WorkflowContributor => !!item); + return contributors.length ? contributors : null; +} + +function contributorFromName(name: unknown): WorkflowContributor { + return { + ...DEFAULT_WORKFLOW_CONTRIBUTOR, + name: normalizeOptionalString(name) ?? DEFAULT_WORKFLOW_CONTRIBUTOR.name, + }; +} + async function resolveWorkflowAccess( workflowId: string, userId: string, @@ -53,7 +179,7 @@ async function resolveWorkflowAccess( .eq("id", workflowId) .single(); if (!workflow) return null; - const workflowRecord = workflow as WorkflowRecord; + const workflowRecord = withDatabaseWorkflow(workflow as WorkflowRecord); if (workflowRecord.user_id === userId) { return { workflow: workflowRecord, allowEdit: true, isOwner: true }; } @@ -72,32 +198,116 @@ async function resolveWorkflowAccess( return { workflow: workflowRecord, allowEdit: !!share.allow_edit, isOwner: false }; } +function toOpenSourceSubmissionSummary( + row: OpenSourceSubmissionRow, +): OpenSourceSubmissionSummary { + return { + id: row.id, + status: row.status, + submitted_at: row.submitted_at, + updated_at: row.updated_at, + reviewed_at: row.reviewed_at ?? null, + }; +} + +async function getLatestOpenSourceSubmission( + db: Db, + workflowId: string, + userId: string, +): Promise<OpenSourceSubmissionSummary | null> { + const { data, error } = await db + .from("workflow_open_source_submissions") + .select("id, status, submitted_at, updated_at, reviewed_at") + .eq("workflow_id", workflowId) + .eq("submitted_by_user_id", userId) + .order("submitted_at", { ascending: false }) + .limit(1) + .maybeSingle(); + if (error) throw error; + return data ? toOpenSourceSubmissionSummary(data as OpenSourceSubmissionRow) : null; +} + +function buildOpenSourceSnapshot( + workflow: WorkflowRecord, + contributors: WorkflowContributor[], + contributorMode: "named" | "anonymous", +) { + return { + workflow_id: workflow.id, + title: workflow.title ?? "", + type: workflow.type ?? "", + prompt_md: workflow.prompt_md ?? null, + columns_config: workflow.columns_config ?? null, + contributors, + contributor_mode: contributorMode, + language: workflow.language ?? DEFAULT_WORKFLOW_LANGUAGE, + version: workflow.version ?? null, + practice: workflow.practice ?? DEFAULT_WORKFLOW_PRACTICE, + jurisdictions: workflow.jurisdictions ?? DEFAULT_WORKFLOW_JURISDICTIONS, + created_at: workflow.created_at ?? null, + }; +} + +function validateOpenSourceWorkflow(workflow: WorkflowRecord): string | null { + if (workflow.type === "assistant") { + return typeof workflow.prompt_md === "string" && workflow.prompt_md.trim() + ? null + : "Assistant workflows need instructions before they can be opened source."; + } + if (workflow.type === "tabular") { + return Array.isArray(workflow.columns_config) && workflow.columns_config.length > 0 + ? null + : "Tabular workflows need at least one column before they can be opened source."; + } + return "Workflow type must be 'assistant' or 'tabular'."; +} + // GET /workflows workflowsRouter.get("/", requireAuth, asyncRoute(async (req, res) => { const userId = res.locals.userId as string; const userEmail = res.locals.userEmail as string | undefined; const { type } = req.query as { type?: string }; const db = createServerSupabase(); + const workflowType = typeof type === "string" && type ? type : null; const { data, error } = await db.rpc("get_workflows_overview", { p_user_id: userId, p_user_email: userEmail ?? null, - p_type: typeof type === "string" && type ? type : null, + p_type: workflowType, }); - if (error) return void res.status(500).json({ detail: error.message }); + if (error) { + return void res.status(500).json({ detail: error.message }); + } - res.json(data ?? []); + const systemWorkflows = SYSTEM_WORKFLOWS.filter( + (workflow) => !workflowType || workflow.type === workflowType, + ).map(withSystemWorkflowAccess); + const databaseWorkflows = ((data ?? []) as WorkflowRecord[]).filter( + (workflow) => !SYSTEM_WORKFLOW_IDS.has(workflow.id), + ); + + res.json([...systemWorkflows, ...databaseWorkflows]); })); // POST /workflows workflowsRouter.post("/", requireAuth, asyncRoute(async (req, res) => { const userId = res.locals.userId as string; - const { title, type, prompt_md, columns_config, practice } = req.body as { + const { + title, + type, + prompt_md, + columns_config, + language, + practice, + jurisdictions, + } = req.body as { title: string; type: string; prompt_md?: string; columns_config?: unknown; + language?: unknown; practice?: string | null; + jurisdictions?: unknown; }; if (!title?.trim()) return void res.status(400).json({ detail: "title is required" }); @@ -107,6 +317,17 @@ workflowsRouter.post("/", requireAuth, asyncRoute(async (req, res) => { .json({ detail: "type must be 'assistant' or 'tabular'" }); const db = createServerSupabase(); + devLog("[workflows/create] request", { + userId, + title: title.trim(), + type, + hasPrompt: typeof prompt_md === "string" && prompt_md.length > 0, + columnCount: Array.isArray(columns_config) ? columns_config.length : null, + language: normalizeOptionalString(language) ?? DEFAULT_WORKFLOW_LANGUAGE, + practice: practice ?? null, + jurisdictions: + normalizeJurisdictions(jurisdictions) ?? DEFAULT_WORKFLOW_JURISDICTIONS, + }); const { data, error } = await db .from("workflows") .insert({ @@ -115,13 +336,33 @@ workflowsRouter.post("/", requireAuth, asyncRoute(async (req, res) => { type, prompt_md: prompt_md ?? null, columns_config: columns_config ?? null, - practice: practice ?? null, - is_system: false, + language: normalizeOptionalString(language) ?? DEFAULT_WORKFLOW_LANGUAGE, + practice: + normalizeOptionalString(practice) ?? DEFAULT_WORKFLOW_PRACTICE, + jurisdictions: + normalizeJurisdictions(jurisdictions) ?? DEFAULT_WORKFLOW_JURISDICTIONS, }) .select("*") .single(); - if (error) return void res.status(500).json({ detail: error.message }); - res.status(201).json(data); + if (error) { + devLog("[workflows/create] insert error", { + userId, + title: title.trim(), + type, + code: error.code, + message: error.message, + details: error.details, + hint: error.hint, + }); + return void res.status(500).json({ detail: error.message }); + } + devLog("[workflows/create] inserted", { + id: data?.id, + user_id: data?.user_id, + title: data?.title, + type: data?.type, + }); + res.status(201).json(withDatabaseWorkflow(data)); })); async function handleWorkflowUpdate(req: Request, res: Response) { @@ -133,11 +374,15 @@ async function handleWorkflowUpdate(req: Request, res: Response) { if (req.body.prompt_md != null) updates.prompt_md = req.body.prompt_md; if (req.body.columns_config != null) updates.columns_config = req.body.columns_config; + if ("language" in req.body) + updates.language = normalizeOptionalString(req.body.language); if ("practice" in req.body) updates.practice = req.body.practice ?? null; + if ("jurisdictions" in req.body) + updates.jurisdictions = normalizeJurisdictions(req.body.jurisdictions); const db = createServerSupabase(); const access = await resolveWorkflowAccess(workflowId, userId, userEmail, db); - if (!access || access.workflow.is_system || !access.allowEdit) { + if (!access || !access.allowEdit) { return void res .status(404) .json({ detail: "Workflow not found or not editable" }); @@ -146,7 +391,6 @@ async function handleWorkflowUpdate(req: Request, res: Response) { .from("workflows") .update(updates) .eq("id", workflowId) - .eq("is_system", false) .select("*") .single(); if (error || !data) @@ -154,7 +398,7 @@ async function handleWorkflowUpdate(req: Request, res: Response) { .status(404) .json({ detail: "Workflow not found or not editable" }); res.json( - withWorkflowAccess(data, { + withWorkflowAccess(withDatabaseWorkflow(data), { allowEdit: access.allowEdit, isOwner: access.isOwner, }), @@ -171,13 +415,19 @@ workflowsRouter.patch("/:workflowId", requireAuth, asyncRoute(handleWorkflowUpda workflowsRouter.delete("/:workflowId", requireAuth, asyncRoute(async (req, res) => { const userId = res.locals.userId as string; const { workflowId } = req.params; + const systemWorkflow = SYSTEM_WORKFLOWS.find( + (workflow) => workflow.id === workflowId, + ); + if (systemWorkflow) { + return void res.json(withSystemWorkflowAccess(systemWorkflow)); + } + const db = createServerSupabase(); const { error } = await db .from("workflows") .delete() .eq("id", workflowId) - .eq("user_id", userId) - .eq("is_system", false); + .eq("user_id", userId); if (error) return void res.status(500).json({ detail: error.message }); res.status(204).send(); })); @@ -222,20 +472,160 @@ workflowsRouter.delete("/hidden/:workflowId", requireAuth, asyncRoute(async (req res.status(204).send(); })); +// POST /workflows/:workflowId/open-source +workflowsRouter.post("/:workflowId/open-source", requireAuth, asyncRoute(async (req, res) => { + if (!WORKFLOW_CONTRIBUTIONS_ENABLED) { + return void res.status(404).json({ detail: "Workflow contributions are disabled" }); + } + + const userId = res.locals.userId as string; + const userEmail = res.locals.userEmail as string | undefined; + const { workflowId } = req.params; + const openSourceBody = req.body as { + contributor_mode?: unknown; + contributor?: unknown; + }; + const requestedContributorMode = + openSourceBody.contributor_mode === "named" + ? "named" + : "anonymous"; + const db = createServerSupabase(); + + const { data: workflow, error: workflowError } = await db + .from("workflows") + .select("*") + .eq("id", workflowId) + .eq("user_id", userId) + .maybeSingle(); + if (workflowError) { + return void res.status(500).json({ detail: workflowError.message }); + } + if (!workflow) { + return void res + .status(404) + .json({ detail: "Workflow not found or not open-sourceable" }); + } + + const workflowRecord = withDatabaseWorkflow(workflow as WorkflowRecord); + const validationError = validateOpenSourceWorkflow(workflowRecord); + if (validationError) { + return void res.status(400).json({ detail: validationError }); + } + + const { data: profile } = await db + .from("user_profiles") + .select("display_name") + .eq("user_id", userId) + .maybeSingle(); + const submitterName = + typeof profile?.display_name === "string" && profile.display_name.trim() + ? profile.display_name.trim() + : null; + const submittedContributor = + normalizeContributors([openSourceBody.contributor])?.[0] ?? + contributorFromName(submitterName || userEmail); + const publicContributors = + requestedContributorMode === "named" + ? [submittedContributor] + : [DEFAULT_WORKFLOW_CONTRIBUTOR]; + const now = new Date().toISOString(); + const snapshot = buildOpenSourceSnapshot( + workflowRecord, + publicContributors, + requestedContributorMode, + ); + + const { data: pendingSubmission, error: pendingError } = await db + .from("workflow_open_source_submissions") + .select("*") + .eq("workflow_id", workflowId) + .eq("submitted_by_user_id", userId) + .eq("status", "pending") + .maybeSingle(); + if (pendingError) { + return void res.status(500).json({ detail: pendingError.message }); + } + + if (pendingSubmission) { + const { data: updated, error: updateError } = await db + .from("workflow_open_source_submissions") + .update({ + submitter_email: userEmail ?? null, + submitter_name: + requestedContributorMode === "named" ? submitterName : null, + contributor_mode: requestedContributorMode, + snapshot, + updated_at: now, + }) + .eq("id", pendingSubmission.id) + .select("id, status, submitted_at, updated_at, reviewed_at") + .single(); + if (updateError || !updated) { + return void res.status(500).json({ + detail: updateError?.message ?? "Failed to update submission", + }); + } + return void res.json({ + ...toOpenSourceSubmissionSummary(updated as OpenSourceSubmissionRow), + mode: "updated", + }); + } + + const { data: created, error: createError } = await db + .from("workflow_open_source_submissions") + .insert({ + workflow_id: workflowId, + submitted_by_user_id: userId, + submitter_email: userEmail ?? null, + submitter_name: + requestedContributorMode === "named" ? submitterName : null, + contributor_mode: requestedContributorMode, + status: "pending", + snapshot, + submitted_at: now, + updated_at: now, + }) + .select("id, status, submitted_at, updated_at, reviewed_at") + .single(); + if (createError || !created) { + return void res.status(500).json({ + detail: createError?.message ?? "Failed to create submission", + }); + } + + res.status(201).json({ + ...toOpenSourceSubmissionSummary(created as OpenSourceSubmissionRow), + mode: "created", + }); +})); + // GET /workflows/:workflowId workflowsRouter.get("/:workflowId", requireAuth, asyncRoute(async (req, res) => { const userId = res.locals.userId as string; const userEmail = res.locals.userEmail as string | undefined; const { workflowId } = req.params; + const systemWorkflow = SYSTEM_WORKFLOWS.find( + (workflow) => workflow.id === workflowId, + ); + if (systemWorkflow) { + return void res.json(withSystemWorkflowAccess(systemWorkflow)); + } + const db = createServerSupabase(); const access = await resolveWorkflowAccess(workflowId, userId, userEmail, db); if (!access) return void res.status(404).json({ detail: "Workflow not found" }); + const openSourceSubmission = access.isOwner + ? await getLatestOpenSourceSubmission(db, workflowId, userId) + : null; res.json( - withWorkflowAccess(access.workflow, { - allowEdit: access.allowEdit, - isOwner: access.isOwner, - }), + withOpenSourceSubmission( + withWorkflowAccess(access.workflow, { + allowEdit: access.allowEdit, + isOwner: access.isOwner, + }), + openSourceSubmission, + ), ); })); @@ -250,7 +640,6 @@ workflowsRouter.get("/:workflowId/shares", requireAuth, asyncRoute(async (req, r .select("id") .eq("id", workflowId) .eq("user_id", userId) - .eq("is_system", false) .single(); if (!wf) return void res.status(404).json({ detail: "Workflow not found or not editable" }); @@ -308,13 +697,19 @@ workflowsRouter.post("/:workflowId/share", requireAuth, asyncRoute(async (req, r } const db = createServerSupabase(); + const missingSharedUsers = await findMissingUserEmails(db, normalizedEmails); + if (missingSharedUsers.length > 0) { + return void res.status(400).json({ + detail: `${missingSharedUsers[0]} does not belong to a Mike user.`, + }); + } + // Verify ownership const { data: wf } = await db .from("workflows") .select("id") .eq("id", workflowId) .eq("user_id", userId) - .eq("is_system", false) .single(); if (!wf) return void res.status(404).json({ detail: "Workflow not found or not editable" }); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 198e40f..a0a6a2d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "@aws-sdk/client-s3": "^3.1025.0", "@aws-sdk/s3-request-presigner": "^3.1025.0", + "@fortune-sheet/core": "^1.0.4", + "@fortune-sheet/react": "^1.0.4", "@opennextjs/cloudflare": "^1.19.9", "@openrouter/sdk": "^0.3.11", "@radix-ui/react-dropdown-menu": "^2.1.16", @@ -18,6 +20,8 @@ "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/auth-js": "^2.101.1", "@supabase/supabase-js": "^2.81.1", + "@tiptap/core": "^3.22.3", + "@tiptap/extension-table": "^3.22.3", "@tiptap/pm": "^3.22.3", "@tiptap/react": "^3.22.3", "@tiptap/starter-kit": "^3.22.3", @@ -31,6 +35,7 @@ "exceljs": "^4.4.0", "katex": "^0.16.27", "lucide-react": "^0.553.0", + "luckyexcel": "^1.0.1", "mammoth": "^1.11.0", "marked": "^17.0.1", "next": "^16.2.6", @@ -2538,6 +2543,90 @@ "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==", "license": "MIT" }, + "node_modules/@formulajs/formulajs": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/@formulajs/formulajs/-/formulajs-2.9.3.tgz", + "integrity": "sha512-WpgiuJaBl/Hcda9Ti8a7mlnw/vUZkJrtjABvojz6P6mo6d8EscudyA7iAt/kTLsgi0c8zfmzQd/Yjb4ASFkw+g==", + "license": "MIT", + "dependencies": { + "bessel": "^1.0.2", + "jstat": "^1.9.2" + }, + "bin": { + "implementation-stats": "bin/implementation-stats" + } + }, + "node_modules/@fortune-sheet/core": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@fortune-sheet/core/-/core-1.0.4.tgz", + "integrity": "sha512-CDnUVebfvtT++CymNRw0qnY4sz6zYO3KZazlH+nG6otkRkZ05Bvt7NXqVhmKKSSxIvJR4R6h50abu/dVGBpjpw==", + "license": "MIT", + "dependencies": { + "@fortune-sheet/formula-parser": "^0.2.13", + "dayjs": "^1.11.0", + "immer": "^9.0.12", + "lodash": "^4.17.21", + "numeral": "^2.0.6", + "uuid": "^8.3.2" + } + }, + "node_modules/@fortune-sheet/core/node_modules/immer": { + "version": "9.0.21", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", + "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, + "node_modules/@fortune-sheet/core/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "deprecated": "uuid@10 and below is no longer supported. For ESM codebases, update to uuid@latest. For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).", + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/@fortune-sheet/formula-parser": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@fortune-sheet/formula-parser/-/formula-parser-0.2.13.tgz", + "integrity": "sha512-za2ZVQ5ZfMSPCtL8MdqhCthPip7AoeU4MPyd5UDo4RCl9/arrv1Jz0y755mACVVi4suSZxrzWoJGDkLmofoSmw==", + "license": "MIT", + "dependencies": { + "@formulajs/formulajs": "^2.9.3", + "tiny-emitter": "^2.1.0" + } + }, + "node_modules/@fortune-sheet/react": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@fortune-sheet/react/-/react-1.0.4.tgz", + "integrity": "sha512-v+BU5mmp2hhUe4gRF+vOJ3j8zZkzHU0kzhTZzp+Nn00wA/RArMr+CO+SAluKlCPAsTZgPwmgOEK685WPqJ5XNw==", + "license": "MIT", + "dependencies": { + "@fortune-sheet/core": "^1.0.4", + "@types/regenerator-runtime": "^0.13.6", + "immer": "^9.0.12", + "lodash": "^4.17.21", + "regenerator-runtime": "^0.14.1" + }, + "peerDependencies": { + "react": ">= 18.2", + "react-dom": ">= 18.2" + } + }, + "node_modules/@fortune-sheet/react/node_modules/immer": { + "version": "9.0.21", + "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", + "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -6061,6 +6150,20 @@ "@tiptap/core": "^3.22.3" } }, + "node_modules/@tiptap/extension-table": { + "version": "3.22.3", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-3.22.3.tgz", + "integrity": "sha512-inbQSusJad7H0T++L1APg/anfL5d15cNGp2YG3vwo6TQr71nn2c9pepvmz3xuAIt8eygZDRba+4GT/COP1f9QA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.22.3", + "@tiptap/pm": "^3.22.3" + } + }, "node_modules/@tiptap/extension-text": { "version": "3.22.3", "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.22.3.tgz", @@ -6425,6 +6528,12 @@ "@types/react": "^19.2.0" } }, + "node_modules/@types/regenerator-runtime": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/@types/regenerator-runtime/-/regenerator-runtime-0.13.8.tgz", + "integrity": "sha512-jjKoBekfYDH331060tZhosdJVDnXIXx+T8Iw2h2T4HEds6Ddb2lr0JxD15+XPKlXwRHRNgZoY+4Fb2ykoqzHBg==", + "license": "MIT" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -7614,6 +7723,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/bessel": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bessel/-/bessel-1.0.2.tgz", + "integrity": "sha512-Al3nHGQGqDYqqinXhQzmwmcRToe/3WyBv4N8aZc5Pef8xw2neZlR9VPi84Sa23JtgWcucu18HxVZrnI0fn2etw==", + "license": "Apache-2.0", + "engines": { + "node": ">=0.8" + } + }, "node_modules/big-integer": { "version": "1.6.52", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", @@ -11748,6 +11866,11 @@ "node": ">=6" } }, + "node_modules/jstat": { + "version": "1.9.6", + "resolved": "https://registry.npmjs.org/jstat/-/jstat-1.9.6.tgz", + "integrity": "sha512-rPBkJbK2TnA8pzs93QcDDPlKcrtZWuuCo2dVR0TFLOJSxhqfWOVCSp8aV3/oSbn+4uY4yw1URtLpHQedtmXfug==" + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -12173,6 +12296,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz", + "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==", + "license": "MIT" + }, "node_modules/lodash.defaults": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz", @@ -12311,6 +12440,15 @@ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/luckyexcel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/luckyexcel/-/luckyexcel-1.0.1.tgz", + "integrity": "sha512-hvbJmCXNp/vST/huA6sieDn32Ib8bd80L9aIu5ZGxniJvZle7VlpHZrl6weLGaEnX99+t7cPAoYGqrqbfZp/AQ==", + "license": "MIT", + "dependencies": { + "jszip": "^3.5.0" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", @@ -13783,6 +13921,15 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/numeral": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz", + "integrity": "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -14426,9 +14573,9 @@ } }, "node_modules/prosemirror-menu": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.3.1.tgz", - "integrity": "sha512-2OSIKBFyLo2iqDpjQHEC7tKt3lluhY7L44pcRai8EpoU9R7cZDj/dklEsOOIubNKWUXab6dL7y4JtAWnrlR4lA==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.3.2.tgz", + "integrity": "sha512-6VgUJTYod0nMBlCaYJGhXGLu7Gt4AvcwcOq0YfJCY/6Uh+3S7UsWhpy6rJFCBFOmonq1hD8KyWOtZhkppd4YPg==", "license": "MIT", "dependencies": { "crelt": "^1.0.0", @@ -14438,9 +14585,9 @@ } }, "node_modules/prosemirror-model": { - "version": "1.25.4", - "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz", - "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==", + "version": "1.25.9", + "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.9.tgz", + "integrity": "sha512-pRTklkDDMMRopyoAcrr9wV/8g/RYgrLHBuJAb5hlEuYZRdm5yqmPjWId83fpBwPpSFqEdja0H7Dfd7z1X/npcA==", "license": "MIT", "dependencies": { "orderedmap": "^2.0.0" @@ -14892,6 +15039,12 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "license": "MIT" + }, "node_modules/regexp.prototype.flags": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz", @@ -16275,6 +16428,12 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "license": "MIT" + }, "node_modules/tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2be1583..1877d7b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "dev": "next dev", + "prebuild": "node ../scripts/build-workflows.js", "build": "next build", "start": "next start", "lint": "eslint", @@ -15,6 +16,8 @@ "dependencies": { "@aws-sdk/client-s3": "^3.1025.0", "@aws-sdk/s3-request-presigner": "^3.1025.0", + "@fortune-sheet/core": "^1.0.4", + "@fortune-sheet/react": "^1.0.4", "@opennextjs/cloudflare": "^1.19.9", "@openrouter/sdk": "^0.3.11", "@radix-ui/react-dropdown-menu": "^2.1.16", @@ -23,6 +26,8 @@ "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/auth-js": "^2.101.1", "@supabase/supabase-js": "^2.81.1", + "@tiptap/core": "^3.22.3", + "@tiptap/extension-table": "^3.22.3", "@tiptap/pm": "^3.22.3", "@tiptap/react": "^3.22.3", "@tiptap/starter-kit": "^3.22.3", @@ -36,6 +41,7 @@ "exceljs": "^4.4.0", "katex": "^0.16.27", "lucide-react": "^0.553.0", + "luckyexcel": "^1.0.1", "mammoth": "^1.11.0", "marked": "^17.0.1", "next": "^16.2.6", diff --git a/frontend/src/app/(pages)/account/api-keys/page.tsx b/frontend/src/app/(pages)/account/api-keys/page.tsx index 9aa2d87..8ed5f85 100644 --- a/frontend/src/app/(pages)/account/api-keys/page.tsx +++ b/frontend/src/app/(pages)/account/api-keys/page.tsx @@ -7,7 +7,7 @@ import { useUserProfile } from "@/contexts/UserProfileContext"; import { MfaVerificationPopup, needsMfaVerification, -} from "@/app/components/shared/MfaVerificationPopup"; +} from "@/app/components/popups/MfaVerificationPopup"; import { isMfaRequiredError } from "@/app/lib/mikeApi"; import { accountGlassIconButtonClassName, diff --git a/frontend/src/app/(pages)/account/connectors/page.tsx b/frontend/src/app/(pages)/account/connectors/page.tsx index 099b054..03e6fb0 100644 --- a/frontend/src/app/(pages)/account/connectors/page.tsx +++ b/frontend/src/app/(pages)/account/connectors/page.tsx @@ -3,20 +3,19 @@ import { useCallback, useEffect, useState } from "react"; import { ChevronDown, - Check, Eye, EyeOff, Loader2, Plus, RefreshCw, - Trash2, } from "lucide-react"; import { Input } from "@/components/ui/input"; -import { Modal } from "@/app/components/shared/Modal"; +import { Modal } from "@/app/components/modals/Modal"; +import { NewMcpModal } from "@/app/components/account/NewMcpModal"; import { MfaVerificationPopup, needsMfaVerification, -} from "@/app/components/shared/MfaVerificationPopup"; +} from "@/app/components/popups/MfaVerificationPopup"; import { type McpConnectorSummary, MikeApiError, @@ -31,7 +30,6 @@ import { updateMcpConnector, } from "@/app/lib/mikeApi"; import { - accountGlassDangerButtonClassName, accountGlassIconButtonClassName, accountGlassInputClassName, accountGlassPrimaryButtonClassName, @@ -634,7 +632,7 @@ export default function ConnectorsPage() { )} </div> - <AddMcpConnectorModal + <NewMcpModal open={addOpen} draft={addDraft} step={addStep} @@ -793,129 +791,6 @@ function ConnectorRow({ ); } -function AddMcpConnectorModal({ - open, - draft, - step, - result, - error, - authMessage, - showToken, - showAdvanced, - onDraftChange, - onShowTokenChange, - onShowAdvancedChange, - onClose, - onSubmit, - onOpenConnector, -}: { - open: boolean; - draft: AddDraft; - step: AddStep; - result: McpConnectorSummary | null; - error: string | null; - authMessage: string | null; - showToken: boolean; - showAdvanced: boolean; - onDraftChange: (draft: AddDraft) => void; - onShowTokenChange: (show: boolean) => void; - onShowAdvancedChange: (show: boolean) => void; - onClose: () => void; - onSubmit: () => Promise<void>; - onOpenConnector: (connectorId: string) => void; -}) { - const canSubmit = - draft.name.trim().length > 0 && - draft.serverUrl.trim().length > 0 && - step !== "working" && - step !== "auth"; - - return ( - <Modal - open={open} - onClose={onClose} - breadcrumbs={[ - "Connectors", - step === "success" - ? "Connector added" - : step === "auth" - ? "Authenticate connector" - : "Add MCP connector", - ]} - size="lg" - primaryAction={ - step === "success" && result - ? { - label: "View connector", - onClick: () => onOpenConnector(result.id), - } - : { - label: - step === "working" - ? "Connecting..." - : step === "auth" - ? "Authorizing..." - : "Connect", - icon: - step === "working" || step === "auth" ? ( - <Loader2 className="h-4 w-4 animate-spin" /> - ) : undefined, - onClick: () => void onSubmit(), - disabled: !canSubmit, - } - } - cancelAction={ - step === "working" || step === "auth" - ? false - : { label: step === "success" ? "Done" : "Cancel", onClick: onClose } - } - footerStatus={ - error ? ( - <div className="rounded-xl border border-white/70 bg-white/75 px-3 py-2 text-sm text-red-600 shadow-[0_12px_32px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.75)] backdrop-blur-xl"> - {error} - </div> - ) : null - } - > - {step === "success" && result ? ( - <SuccessToolsList connector={result} /> - ) : step === "auth" ? ( - <ConnectorAuthScreen - message={ - authMessage ?? - "Complete authorization in the popup to finish connecting this MCP server." - } - /> - ) : ( - <div className="space-y-4 pb-4"> - <p className="text-sm text-gray-500"> - The assistant will have access to this MCP server and - its enabled tools. - </p> - <ConnectorForm - draft={draft} - showToken={showToken} - showAdvanced={showAdvanced} - showTokenNote - tokenPlaceholder="Bearer token" - disabled={step === "working"} - onDraftChange={(next) => - onDraftChange({ - name: next.name, - serverUrl: next.serverUrl, - bearerToken: next.bearerToken, - customHeaders: next.customHeaders, - }) - } - onShowTokenChange={onShowTokenChange} - onShowAdvancedChange={onShowAdvancedChange} - /> - </div> - )} - </Modal> - ); -} - function McpConnectorDetailsModal({ connector, draft, @@ -1020,7 +895,7 @@ function McpConnectorDetailsModal({ } > {connector && ( - <div className="flex min-h-0 flex-1 flex-col gap-5 pb-4"> + <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto pb-4"> <ConnectorForm draft={draft} showToken={showToken} @@ -1290,41 +1165,6 @@ function ConnectorForm({ ); } -function SuccessToolsList({ connector }: { connector: McpConnectorSummary }) { - return ( - <div className="flex h-full min-h-0 flex-1 flex-col gap-4 pb-4"> - <div className="flex items-start gap-3 rounded-xl border border-green-100/80 bg-green-50/80 px-3 py-3 text-green-800 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-xl"> - <Check className="mt-0.5 h-4 w-4 shrink-0 text-green-600" /> - <div className="min-w-0"> - <p className="truncate text-sm font-medium"> - {connector.name} is connected.{" "} - <span className="font-normal text-green-700"> - {connector.tools.length} tools discovered. - </span> - </p> - </div> - </div> - <ScrollableToolList connector={connector} fill /> - </div> - ); -} - -function ConnectorAuthScreen({ message }: { message: string }) { - return ( - <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3 pb-4 text-center"> - <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/70 bg-white/75 text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-xl"> - <Loader2 className="h-4 w-4 animate-spin" /> - </div> - <div className="max-w-sm space-y-1"> - <h3 className="text-sm font-medium text-gray-900"> - Authentication required - </h3> - <p className="text-sm text-gray-500">{message}</p> - </div> - </div> - ); -} - function ToolListSkeleton({ count, fill = false, diff --git a/frontend/src/app/(pages)/account/page.tsx b/frontend/src/app/(pages)/account/page.tsx index 80453cc..4a90aab 100644 --- a/frontend/src/app/(pages)/account/page.tsx +++ b/frontend/src/app/(pages)/account/page.tsx @@ -7,12 +7,12 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useAuth } from "@/contexts/AuthContext"; import { useUserProfile } from "@/contexts/UserProfileContext"; -import { ConfirmPopup } from "@/app/components/shared/ConfirmPopup"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { MfaVerificationPopup, needsMfaVerification, -} from "@/app/components/shared/MfaVerificationPopup"; -import { WarningPopup } from "@/app/components/shared/WarningPopup"; +} from "@/app/components/popups/MfaVerificationPopup"; +import { WarningPopup } from "@/app/components/popups/WarningPopup"; import { deleteAccount, isMfaRequiredError } from "@/app/lib/mikeApi"; import { accountGlassDangerOutlineButtonClassName, diff --git a/frontend/src/app/(pages)/account/privacy-data/page.tsx b/frontend/src/app/(pages)/account/privacy-data/page.tsx index 0d3e636..936a429 100644 --- a/frontend/src/app/(pages)/account/privacy-data/page.tsx +++ b/frontend/src/app/(pages)/account/privacy-data/page.tsx @@ -4,11 +4,11 @@ import { useState } from "react"; import { Download, Trash2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; -import { ConfirmPopup } from "@/app/components/shared/ConfirmPopup"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { MfaVerificationPopup, needsMfaVerification, -} from "@/app/components/shared/MfaVerificationPopup"; +} from "@/app/components/popups/MfaVerificationPopup"; import { deleteAllChats, deleteAllProjects, diff --git a/frontend/src/app/(pages)/account/security/page.tsx b/frontend/src/app/(pages)/account/security/page.tsx index 585c863..b56c271 100644 --- a/frontend/src/app/(pages)/account/security/page.tsx +++ b/frontend/src/app/(pages)/account/security/page.tsx @@ -12,11 +12,11 @@ import { supabase } from "@/lib/supabase"; import { Button } from "@/components/ui/button"; import { useUserProfile } from "@/contexts/UserProfileContext"; import { isMfaRequiredError } from "@/app/lib/mikeApi"; -import { Modal } from "@/app/components/shared/Modal"; +import { Modal } from "@/app/components/modals/Modal"; import { MfaVerificationPopup, needsMfaVerification, -} from "@/app/components/shared/MfaVerificationPopup"; +} from "@/app/components/popups/MfaVerificationPopup"; import { accountGlassPrimaryButtonClassName, } from "../accountStyles"; @@ -578,7 +578,7 @@ export default function SecurityPage() { <Modal open={setupModalOpen} onClose={() => void closeSetupModal()} - title="Set up authenticator app" + breadcrumbs={["Security", "Set up authenticator app"]} cancelAction={{ label: enrollment ? "Back" : "Cancel", onClick: enrollment @@ -601,7 +601,13 @@ export default function SecurityPage() { } } > - <div className={enrollment ? "space-y-3 pt-2" : "space-y-5 pt-3"}> + <div + className={ + enrollment + ? "min-h-0 flex-1 space-y-3 overflow-y-auto pt-2" + : "min-h-0 flex-1 space-y-5 overflow-y-auto pt-3" + } + > {!enrollment ? ( <> <p className="text-xs font-medium uppercase tracking-wide text-gray-400"> diff --git a/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx b/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx index 58aa85f..7f74bae 100644 --- a/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx @@ -39,9 +39,10 @@ import { AssistantMessage } from "@/app/components/assistant/AssistantMessage"; import { ChatInput } from "@/app/components/assistant/ChatInput"; import type { ChatInputHandle } from "@/app/components/assistant/ChatInput"; import { ProjectExplorer } from "@/app/components/projects/ProjectExplorer"; -import { DocView } from "@/app/components/shared/DocView"; -import { OwnerOnlyModal } from "@/app/components/shared/OwnerOnlyModal"; -import { DocxView } from "@/app/components/shared/DocxView"; +import { PdfView } from "@/app/components/shared/views/PdfView"; +import { SpreadsheetView } from "@/app/components/shared/views/SpreadsheetView"; +import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; +import { DocxView } from "@/app/components/shared/views/DocxView"; import { MikeIcon } from "@/components/chat/mike-icon"; import { useAuth } from "@/contexts/AuthContext"; import { useUserProfile } from "@/contexts/UserProfileContext"; @@ -50,13 +51,16 @@ import { PageHeader } from "@/app/components/shared/PageHeader"; import { HeaderActionsMenu } from "@/app/components/shared/HeaderActionsMenu"; import type { CitationQuote, - CitationAnnotation, + Citation, Document, EditAnnotation, Message, Project, } from "@/app/components/shared/types"; -import { expandCitationToEntries } from "@/app/components/shared/types"; +import { + expandCitationToEntries, + isSpreadsheetFilename, +} from "@/app/components/shared/types"; interface Props { params: Promise<{ id: string; chatId: string }>; @@ -92,6 +96,7 @@ const EXPLORER_MIN = 160; const EXPLORER_DEFAULT = 280; const CHAT_MIN = 320; const CHAT_DEFAULT = 420; +const DEFAULT_ASSISTANT_BOTTOM_PADDING = 116; function AssistantGreeting({ username }: { username: string }) { const { profile } = useUserProfile(); @@ -260,6 +265,11 @@ export default function ProjectAssistantChatPage({ params }: Props) { const [initialMessages] = useState<Message[]>(newChatMessages ?? []); const { messages, isResponseLoading, handleChat, setMessages, cancel } = useAssistantChat({ initialMessages, chatId, projectId }); + const pendingInitialUserMessageRef = useRef<Message | null>( + initialMessages.length === 1 && initialMessages[0].role === "user" + ? initialMessages[0] + : null, + ); const hasLoaded = useRef(false); const hasAutoSent = useRef(false); @@ -349,19 +359,19 @@ export default function ProjectAssistantChatPage({ params }: Props) { }, [chats, chatId]); useEffect(() => { + const pendingMessage = pendingInitialUserMessageRef.current; if ( - newChatMessages && - newChatMessages.length === 1 && - newChatMessages[0].role === "user" && + pendingMessage && !hasAutoSent.current && !isResponseLoading && messages.length === 1 ) { hasAutoSent.current = true; + pendingInitialUserMessageRef.current = null; setNewChatMessages(null); - void handleChat(newChatMessages[0]); + void handleChat(pendingMessage); } - }, [newChatMessages, messages.length, isResponseLoading]); // eslint-disable-line react-hooks/exhaustive-deps + }, [messages.length, isResponseLoading, handleChat, setNewChatMessages]); const scrollLatestUserToTop = useCallback(() => { requestAnimationFrame(() => { @@ -405,10 +415,17 @@ export default function ProjectAssistantChatPage({ params }: Props) { const userEl = latestUserMessageRef.current; const containerEl = messagesContainerRef.current; if (!userEl || !containerEl) return; + const messageGap = window.innerWidth < 768 ? 24 : 32; setMinHeight( - `${Math.max(0, containerEl.clientHeight - 48 - userEl.offsetHeight - 16)}px`, + `${Math.max( + 0, + containerEl.clientHeight - + messageGap * 3 - + userEl.offsetHeight - + DEFAULT_ASSISTANT_BOTTOM_PADDING, + )}px`, ); - }, [messages.length, latestUserMessageRef.current]); // eslint-disable-line react-hooks/exhaustive-deps + }, [messages.length]); useEffect(() => { if (!activeTabId) return; @@ -489,7 +506,7 @@ export default function ProjectAssistantChatPage({ params }: Props) { openTab(doc.id, doc.filename); }; - const handleCitationClick = (citation: CitationAnnotation) => { + const handleCitationClick = (citation: Citation) => { if (citation.kind === "case") return; openTab( citation.document_id, @@ -876,7 +893,7 @@ export default function ProjectAssistantChatPage({ params }: Props) { <input ref={fileInputRef} type="file" - accept=".pdf,.docx,.doc" + accept=".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt" multiple className="hidden" onChange={(e) => @@ -1101,8 +1118,16 @@ export default function ProjectAssistantChatPage({ params }: Props) { rounded={false} bordered={false} /> + ) : isSpreadsheetFilename(activeTab.filename) ? ( + <SpreadsheetView + key={activeTab.documentId} + documentId={activeTab.documentId} + versionId={activeTab.versionId} + rounded={false} + bordered={false} + /> ) : ( - <DocView + <PdfView key={activeTab.documentId} doc={{ document_id: activeTab.documentId }} quotes={activeQuotes ?? undefined} @@ -1132,7 +1157,7 @@ export default function ProjectAssistantChatPage({ params }: Props) { {/* RIGHT: Assistant Panel */} <div style={{ width: chatWidth }} - className="shrink-0 flex flex-col" + className="relative shrink-0 flex flex-col" onDragOver={(e) => e.preventDefault()} onDrop={handleChatDrop} > @@ -1166,8 +1191,11 @@ export default function ProjectAssistantChatPage({ params }: Props) { ) : ( <div ref={messagesContainerRef} - className="flex-1 overflow-y-auto px-4 py-4 space-y-4 min-h-0" - style={{ scrollbarGutter: "stable" }} + className="flex-1 overflow-y-auto px-4 pt-6 md:pt-8 space-y-6 md:space-y-8 min-h-0" + style={{ + paddingBottom: DEFAULT_ASSISTANT_BOTTOM_PADDING, + scrollbarGutter: "stable", + }} > {(() => { const lastUserIdx = messages @@ -1188,20 +1216,20 @@ export default function ProjectAssistantChatPage({ params }: Props) { > <UserMessage content={msg.content ?? ""} - files={(msg as any).files} + files={msg.files} + workflow={msg.workflow} /> </div> ) : ( <AssistantMessage key={i} - content={msg.content ?? ""} events={msg.events} isStreaming={ i === messages.length - 1 && isResponseLoading } - isError={!!(msg as any).error} - annotations={msg.annotations} + isError={!!msg.error} + citations={msg.citations} citationStatus={ msg.citationStatus } @@ -1231,20 +1259,23 @@ export default function ProjectAssistantChatPage({ params }: Props) { )} {/* ChatInput */} - <div className="shrink-0 px-4 pb-4"> - <ChatInput - ref={chatInputRef} - onSubmit={handleSubmit} - onCancel={cancel} - isLoading={isResponseLoading} - hideAddDocButton - projectName={project?.name} - projectCmNumber={project?.cm_number} - /> + <div className="absolute bottom-2 left-0 right-0 z-30 w-full md:bottom-3"> + <div className="pointer-events-none absolute -bottom-2 left-4 right-4 z-0 h-7 bg-white/50 backdrop-blur-[1px] md:-bottom-3" /> + <div className="relative z-20 w-full px-4"> + <ChatInput + ref={chatInputRef} + onSubmit={handleSubmit} + onCancel={cancel} + isLoading={isResponseLoading} + hideAddDocButton + projectName={project?.name} + projectCmNumber={project?.cm_number} + /> + </div> </div> </div> </div> - <OwnerOnlyModal + <OwnerOnlyPopup open={!!ownerOnlyAction} action={ownerOnlyAction ?? undefined} onClose={() => setOwnerOnlyAction(null)} diff --git a/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx b/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx index 91113f2..7792002 100644 --- a/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx @@ -8,6 +8,7 @@ import { updateTabularReview, } from "@/app/lib/mikeApi"; import { ProjectReviewsTable } from "@/app/components/projects/ProjectReviewsTable"; +import { TabularReviewDetailsModal } from "@/app/components/tabular/TabularReviewDetailsModal"; import { ProjectSectionToolbar, useProjectWorkspace, @@ -70,10 +71,9 @@ export default function ProjectTabularReviewsPage({ params }: Props) { setProjectReviews, } = workspace; const [selectedReviewIds, setSelectedReviewIds] = useState<string[]>([]); - const [renamingReviewId, setRenamingReviewId] = useState<string | null>( + const [detailsReview, setDetailsReview] = useState<TabularReview | null>( null, ); - const [renameReviewValue, setRenameReviewValue] = useState(""); const [actionsOpen, setActionsOpen] = useState(false); const docs = project?.documents ?? []; const reviews = useMemo(() => projectReviews ?? [], [projectReviews]); @@ -94,16 +94,35 @@ export default function ProjectTabularReviewsPage({ params }: Props) { !allReviewsSelected && filteredReviews.some((r) => selectedReviewIds.includes(r.id)); - async function submitReviewRename(reviewId: string) { - const trimmed = renameReviewValue.trim(); - setRenamingReviewId(null); - if (!trimmed) return; - await updateTabularReview(reviewId, { title: trimmed }); + function handleOpenDetails(review: TabularReview) { + if (user?.id && review.user_id !== user.id) { + setOwnerOnlyAction("edit tabular review details"); + return; + } + setDetailsReview(review); + } + + async function handleDetailsSave(values: { + title: string; + projectId?: string | null; + }) { + if (!detailsReview) return; + if (user?.id && detailsReview.user_id !== user.id) { + setOwnerOnlyAction("edit tabular review details"); + return; + } + const updated = await updateTabularReview(detailsReview.id, { + title: values.title, + project_id: projectId, + }); setProjectReviews((prev) => (prev ?? []).map((review) => - review.id === reviewId ? { ...review, title: trimmed } : review, + review.id === updated.id ? { ...review, ...updated } : review, ), ); + setDetailsReview((current) => + current?.id === updated.id ? { ...current, ...updated } : current, + ); } async function handleDeleteReviewRow(review: TabularReview) { @@ -164,8 +183,6 @@ export default function ProjectTabularReviewsPage({ params }: Props) { selectedReviewIds={selectedReviewIds} allReviewsSelected={allReviewsSelected} someReviewsSelected={someReviewsSelected} - renamingReviewId={renamingReviewId} - renameReviewValue={renameReviewValue} creatingReview={workspace.creatingReview} currentUserId={user?.id} loading={loading} @@ -175,12 +192,22 @@ export default function ProjectTabularReviewsPage({ params }: Props) { `/projects/${projectId}/tabular-reviews/${reviewId}`, ) } + onOpenDetails={handleOpenDetails} onDeleteReview={handleDeleteReviewRow} onOwnerOnlyAction={setOwnerOnlyAction} - submitReviewRename={submitReviewRename} setSelectedReviewIds={setSelectedReviewIds} - setRenamingReviewId={setRenamingReviewId} - setRenameReviewValue={setRenameReviewValue} + /> + <TabularReviewDetailsModal + open={!!detailsReview} + review={detailsReview} + projects={project ? [project] : []} + canEdit={ + !!detailsReview && + (!user?.id || detailsReview.user_id === user.id) + } + lockProject + onClose={() => setDetailsReview(null)} + onSave={handleDetailsSave} /> </> ); diff --git a/frontend/src/app/(pages)/tabular-reviews/page.tsx b/frontend/src/app/(pages)/tabular-reviews/page.tsx index 8e28fca..98ea83f 100644 --- a/frontend/src/app/(pages)/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/tabular-reviews/page.tsx @@ -16,8 +16,9 @@ import { } from "@/app/lib/mikeApi"; import type { TabularReview, Project } from "@/app/components/shared/types"; import { TableToolbar } from "@/app/components/shared/TableToolbar"; -import { AddNewTRModal } from "@/app/components/tabular/AddNewTRModal"; -import { OwnerOnlyModal } from "@/app/components/shared/OwnerOnlyModal"; +import { NewTRModal } from "@/app/components/tabular/NewTRModal"; +import { TabularReviewDetailsModal } from "@/app/components/tabular/TabularReviewDetailsModal"; +import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import { useAuth } from "@/contexts/AuthContext"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { @@ -62,9 +63,10 @@ export default function TabularReviewsPage() { const [loading, setLoading] = useState(true); const [creating, setCreating] = useState(false); const [newTROpen, setNewTROpen] = useState(false); + const [detailsReview, setDetailsReview] = useState<TabularReview | null>( + null, + ); const [activeScope, setActiveScope] = useState<ReviewScope>("all"); - const [renamingId, setRenamingId] = useState<string | null>(null); - const [renameValue, setRenameValue] = useState(""); const [projectFilter, setProjectFilter] = useState<string | null>(null); const [search, setSearch] = useState(""); const [selectedIds, setSelectedIds] = useState<string[]>([]); @@ -156,23 +158,35 @@ export default function TabularReviewsPage() { } }; - async function handleRenameSubmit(reviewId: string) { - const trimmed = renameValue.trim(); - if (!trimmed) { - setRenamingId(null); + function requestReviewDetails(review: TabularReview) { + if (user?.id && review.user_id !== user.id) { + setOwnerOnlyAction("edit tabular review details"); return; } - const review = reviews.find((r) => r.id === reviewId); - if (review && user?.id && review.user_id !== user.id) { - setRenamingId(null); - setOwnerOnlyAction("rename this tabular review"); + setDetailsReview(review); + } + + async function handleDetailsSave(values: { + title: string; + projectId?: string | null; + }) { + if (!detailsReview) return; + if (user?.id && detailsReview.user_id !== user.id) { + setOwnerOnlyAction("edit tabular review details"); return; } + const updated = await updateTabularReview(detailsReview.id, { + title: values.title, + project_id: values.projectId ?? null, + }); setReviews((prev) => - prev.map((r) => (r.id === reviewId ? { ...r, title: trimmed } : r)), + prev.map((review) => + review.id === updated.id ? { ...review, ...updated } : review, + ), + ); + setDetailsReview((current) => + current?.id === updated.id ? { ...current, ...updated } : current, ); - setRenamingId(null); - await updateTabularReview(reviewId, { title: trimmed }); } async function handleDeleteSelected() { @@ -264,37 +278,40 @@ export default function TabularReviewsPage() { /> {/* Table */} - <TableScrollArea> - <TableHeaderRow> - <TableStickyCell header> - {loading ? ( - <SkeletonDot /> - ) : ( - <input - type="checkbox" - checked={allSelected} - ref={(el) => { - if (el) el.indeterminate = someSelected; - }} - onChange={toggleAll} - className={TABLE_CHECKBOX_CLASS} - /> - )} - <span>Name</span> - </TableStickyCell> - <TableHeaderCell className="ml-auto w-24"> - Columns - </TableHeaderCell> - <TableHeaderCell className="w-24">Documents</TableHeaderCell> - <TableHeaderCell className="w-40"> - <div className="flex items-center gap-1"> - <span>Project</span> - {projectFilterButton} - </div> - </TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> - <TableHeaderCell className="w-8" /> - </TableHeaderRow> + <TableScrollArea + header={ + <TableHeaderRow> + <TableStickyCell header> + {loading ? ( + <SkeletonDot /> + ) : ( + <input + type="checkbox" + checked={allSelected} + ref={(el) => { + if (el) el.indeterminate = someSelected; + }} + onChange={toggleAll} + className={TABLE_CHECKBOX_CLASS} + /> + )} + <span>Name</span> + </TableStickyCell> + <TableHeaderCell className="ml-auto w-24"> + Columns + </TableHeaderCell> + <TableHeaderCell className="w-24">Documents</TableHeaderCell> + <TableHeaderCell className="w-40"> + <div className="flex items-center gap-1"> + <span>Project</span> + {projectFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-32">Created</TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + } + > {loading ? ( <TableBody> @@ -367,21 +384,8 @@ export default function TabularReviewsPage() { rightClickDropdown={(close) => ( <RowActionMenuItems onClose={close} - onRename={() => { - if ( - user?.id && - review.user_id !== user.id - ) { - setOwnerOnlyAction( - "rename this tabular review", - ); - return; - } - setRenameValue( - review.title ?? - "Untitled Review", - ); - setRenamingId(review.id); + onEditDetails={() => { + requestReviewDetails(review); }} onDelete={async () => { if ( @@ -406,7 +410,6 @@ export default function TabularReviewsPage() { /> )} onClick={() => { - if (renamingId === review.id) return; router.push( review.project_id ? `/projects/${review.project_id}/tabular-reviews/${review.id}` @@ -425,13 +428,6 @@ export default function TabularReviewsPage() { label={ review.title ?? "Untitled Review" } - editing={renamingId === review.id} - editValue={renameValue} - onEditValueChange={setRenameValue} - onEditCommit={() => - handleRenameSubmit(review.id) - } - onEditCancel={() => setRenamingId(null)} /> <TableCell className="ml-auto w-24"> {review.columns_config?.length ?? 0} @@ -462,21 +458,8 @@ export default function TabularReviewsPage() { onClick={(e) => e.stopPropagation()} > <RowActions - onRename={() => { - if ( - user?.id && - review.user_id !== user.id - ) { - setOwnerOnlyAction( - "rename this tabular review", - ); - return; - } - setRenameValue( - review.title ?? - "Untitled Review", - ); - setRenamingId(review.id); + onEditDetails={() => { + requestReviewDetails(review); }} onDelete={async () => { if ( @@ -507,14 +490,26 @@ export default function TabularReviewsPage() { )} </TableScrollArea> - <AddNewTRModal + <NewTRModal open={newTROpen} onClose={() => setNewTROpen(false)} onAdd={handleNewReview} projects={projects} /> - <OwnerOnlyModal + <TabularReviewDetailsModal + open={!!detailsReview} + review={detailsReview} + projects={projects} + canEdit={ + !!detailsReview && + (!user?.id || detailsReview.user_id === user.id) + } + onClose={() => setDetailsReview(null)} + onSave={handleDetailsSave} + /> + + <OwnerOnlyPopup open={!!ownerOnlyAction} action={ownerOnlyAction ?? undefined} onClose={() => setOwnerOnlyAction(null)} diff --git a/frontend/src/app/components/assistant/AddDocButton.tsx b/frontend/src/app/components/assistant/AddDocButton.tsx index 5446b9b..b1b8924 100644 --- a/frontend/src/app/components/assistant/AddDocButton.tsx +++ b/frontend/src/app/components/assistant/AddDocButton.tsx @@ -50,7 +50,7 @@ export function AddDocButton({ <input ref={fileInputRef} type="file" - accept=".pdf,.docx,.doc" + accept=".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt" multiple className="hidden" onChange={handleUpload} diff --git a/frontend/src/app/components/assistant/AskInputPopup.tsx b/frontend/src/app/components/assistant/AskInputPopup.tsx new file mode 100644 index 0000000..e993be8 --- /dev/null +++ b/frontend/src/app/components/assistant/AskInputPopup.tsx @@ -0,0 +1,730 @@ +"use client"; + +import { useCallback, useEffect, useRef, useState } from "react"; +import { + AlertCircle, + Check, + CornerDownLeft, + Loader2, + Upload, + X, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import type { AssistantEvent, Document } from "../shared/types"; +import { FileTypeIcon } from "../shared/FileTypeIcon"; +import { + AddDocumentsModal, + invalidateDirectoryCache, +} from "../modals/AddDocumentsModal"; +import { uploadStandaloneDocument } from "@/app/lib/mikeApi"; +import { + SUPPORTED_DOCUMENT_ACCEPT, + formatUnsupportedDocumentWarning, + partitionSupportedDocumentFiles, +} from "@/app/lib/documentUploadValidation"; + +type AskInputsEvent = Extract<AssistantEvent, { type: "ask_inputs" }>; +type AskInputItem = AskInputsEvent["items"][number]; +type AskInputsResponse = Extract< + AssistantEvent, + { type: "ask_inputs_response" } +>; + +export function AskInputPopup({ + event, + onSubmit, + onDismiss, +}: { + event: AskInputsEvent; + onSubmit?: ( + response: AskInputsResponse, + content: string, + files: { filename: string; document_id: string }[], + ) => void; + onDismiss?: () => void; +}) { + const [choiceAnswers, setChoiceAnswers] = useState<Record<string, string>>( + {}, + ); + const [otherOpen, setOtherOpen] = useState<Record<string, boolean>>({}); + const [otherValues, setOtherValues] = useState<Record<string, string>>({}); + const [docsByInput, setDocsByInput] = useState<Record<string, Document[]>>( + {}, + ); + const [skipped, setSkipped] = useState<Set<string>>(() => new Set()); + const [submitted, setSubmitted] = useState(false); + const [dismissed, setDismissed] = useState(false); + const [uploadingInputId, setUploadingInputId] = useState<string | null>( + null, + ); + const [dragActiveInputId, setDragActiveInputId] = useState<string | null>( + null, + ); + const [uploadWarning, setUploadWarning] = useState<string | null>(null); + const [docSelectorInputId, setDocSelectorInputId] = useState<string | null>( + null, + ); + const [activeInputId, setActiveInputId] = useState( + () => event.items[0]?.id ?? "", + ); + const fileInputsRef = useRef<Record<string, HTMLInputElement | null>>({}); + + const itemResolved = useCallback( + (item: AskInputItem) => { + if (skipped.has(item.id)) return true; + if (item.kind === "choice") return !!choiceAnswers[item.id]?.trim(); + return (docsByInput[item.id] ?? []).length > 0; + }, + [choiceAnswers, docsByInput, skipped], + ); + + const firstUnresolvedId = useCallback( + (resolvedId?: string) => + event.items.find((item) => { + if (item.id === resolvedId) return false; + return !itemResolved(item); + })?.id ?? null, + [event.items, itemResolved], + ); + + const goToNextUnresolved = useCallback( + (resolvedId: string) => { + const nextId = firstUnresolvedId(resolvedId); + if (nextId) setActiveInputId(nextId); + }, + [firstUnresolvedId], + ); + + const setSkippedFor = (id: string, shouldSkip = true) => { + setSkipped((prev) => { + const next = new Set(prev); + if (shouldSkip) next.add(id); + else next.delete(id); + return next; + }); + if (shouldSkip) goToNextUnresolved(id); + }; + + const addDocs = (inputId: string, selected: Document[]) => { + if (selected.length === 0) return; + setSkippedFor(inputId, false); + setDocsByInput((prev) => { + const current = prev[inputId] ?? []; + const existing = new Set(current.map((doc) => doc.id)); + return { + ...prev, + [inputId]: [ + ...current, + ...selected.filter((doc) => !existing.has(doc.id)), + ], + }; + }); + goToNextUnresolved(inputId); + }; + + const removeDoc = (inputId: string, docId: string) => { + setDocsByInput((prev) => ({ + ...prev, + [inputId]: (prev[inputId] ?? []).filter((doc) => doc.id !== docId), + })); + }; + + const handleFiles = async (inputId: string, incomingFiles: File[]) => { + if (!incomingFiles.length || submitted) return; + const { supported, unsupported } = + partitionSupportedDocumentFiles(incomingFiles); + setUploadWarning(formatUnsupportedDocumentWarning(unsupported)); + if (supported.length === 0) { + const input = fileInputsRef.current[inputId]; + if (input) input.value = ""; + return; + } + setUploadingInputId(inputId); + try { + const uploaded = await Promise.all( + supported.map((file) => uploadStandaloneDocument(file)), + ); + invalidateDirectoryCache(); + addDocs(inputId, uploaded); + } catch (err) { + console.error("Document upload failed:", err); + } finally { + setUploadingInputId(null); + setDragActiveInputId(null); + const input = fileInputsRef.current[inputId]; + if (input) input.value = ""; + } + }; + + const chooseAnswer = ( + item: Extract<AskInputItem, { kind: "choice" }>, + answer: string, + ) => { + const trimmed = answer.trim(); + if (!trimmed || submitted) return; + setSkippedFor(item.id, false); + setChoiceAnswers((prev) => ({ ...prev, [item.id]: trimmed })); + goToNextUnresolved(item.id); + }; + + const allResolved = + event.items.length > 0 && event.items.every(itemResolved); + const canSubmit = + !submitted && + !uploadingInputId && + allResolved && + !!onSubmit; + + const buildResponse = (): AskInputsResponse => { + const responses = event.items.map((item) => { + if (skipped.has(item.id)) { + return item.kind === "choice" + ? { + id: item.id, + kind: "choice" as const, + question: item.question, + skipped: true, + } + : { + id: item.id, + kind: "documents" as const, + filenames: [], + skipped: true, + }; + } + if (item.kind === "choice") { + return { + id: item.id, + kind: "choice" as const, + question: item.question, + answer: choiceAnswers[item.id]?.trim() ?? "", + }; + } + return { + id: item.id, + kind: "documents" as const, + filenames: (docsByInput[item.id] ?? []).map( + (doc) => doc.filename, + ), + }; + }); + return { type: "ask_inputs_response", responses }; + }; + + const responseFiles = (response: AskInputsResponse) => { + const responseById = new Map(response.responses.map((item) => [item.id, item])); + const docs = event.items.flatMap((item) => { + const responseItem = responseById.get(item.id); + if ( + item.kind !== "documents" || + responseItem?.kind !== "documents" || + responseItem.skipped + ) { + return []; + } + return docsByInput[item.id] ?? []; + }); + const seen = new Set<string>(); + return docs.flatMap((doc) => { + if (seen.has(doc.id)) return []; + seen.add(doc.id); + return [{ filename: doc.filename, document_id: doc.id }]; + }); + }; + + const buildContent = (response: AskInputsResponse) => { + const lines = response.responses.map((item, index) => { + if (item.kind === "choice") { + if (item.skipped) + return `${index + 1}. Skipped: ${item.question}`; + return `${index + 1}. ${item.question}\n${item.answer ?? ""}`; + } + if (item.skipped) return `${index + 1}. Skipped document request.`; + return `${index + 1}. Documents attached: ${item.filenames.join(", ")}`; + }); + return `Responses to Mike's questions:\n${lines.join("\n\n")}`; + }; + + const submit = () => { + if (!canSubmit) return; + const response = buildResponse(); + setSubmitted(true); + onSubmit?.(response, buildContent(response), responseFiles(response)); + }; + + useEffect(() => { + if (canSubmit) submit(); + }); + + const dismiss = useCallback(() => { + if (submitted || dismissed) return; + setDismissed(true); + onDismiss?.(); + }, [dismissed, onDismiss, submitted]); + + useEffect(() => { + if (submitted || dismissed) return; + const handler = (e: KeyboardEvent) => { + if (e.key === "Escape") dismiss(); + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [submitted, dismissed, dismiss]); + + if (dismissed) return null; + + const activeItem = + event.items.find((item) => item.id === activeInputId) ?? event.items[0]; + + return ( + <> + <div className="w-full overflow-hidden rounded-[18px] border border-white/65 bg-white/60 pb-3 font-serif shadow-[0_4px_10px_rgba(15,23,42,0.084),inset_0_1px_0_rgba(255,255,255,0.595),inset_0_-6px_14px_rgba(255,255,255,0.126)] backdrop-blur-2xl md:rounded-[22px]"> + <div className="flex min-w-0 items-center justify-between gap-2 bg-gray-100/70 px-3 py-2"> + <div className="flex min-w-0 items-center"> + <div className="text-sm text-gray-500"> + {submitted ? ( + "Inputs sent" + ) : ( + <div className="flex flex-wrap gap-x-3 gap-y-1"> + {event.items.map((item, index) => { + const isActive = + item.id === activeItem?.id; + const isResolved = itemResolved(item); + const label = + item.kind === "choice" + ? `Question ${index + 1}` + : "Add Documents"; + return ( + <button + key={item.id} + type="button" + disabled={submitted} + onClick={() => + setActiveInputId(item.id) + } + className={cn( + "inline-flex items-center gap-1 rounded-full py-0.5 font-sans text-[10px] transition-colors disabled:cursor-default", + isActive + ? "text-gray-900" + : "text-gray-400 hover:text-gray-700", + )} + > + {label} + {isResolved ? ( + <Check className="h-3 w-3" /> + ) : ( + <span className="h-2.5 w-2.5 rounded-full border border-current opacity-70" /> + )} + </button> + ); + })} + </div> + )} + </div> + </div> + {!submitted && ( + <button + type="button" + onClick={dismiss} + className="shrink-0 rounded-full py-0.5 font-sans text-[10px] text-gray-500 transition-colors hover:text-gray-700" + > + Esc (end response) + </button> + )} + </div> + + <div className="px-3"> + {activeItem && ( + <div className="mt-3 flex min-h-54 flex-col"> + <div className="mt-auto"> + <div className="flex items-start justify-between gap-2"> + <div className="min-w-0 flex-1"> + {activeItem.kind === "choice" ? ( + <p className="text-sm text-gray-800"> + {activeItem.question} + </p> + ) : ( + <DocumentPrompt item={activeItem} /> + )} + </div> + {!submitted && ( + <button + type="button" + onClick={() => + setSkippedFor( + activeItem.id, + !skipped.has(activeItem.id), + ) + } + className="shrink-0 rounded-full py-0.5 font-sans text-[10px] text-gray-500 transition-colors hover:text-gray-800 disabled:cursor-default disabled:opacity-40" + > + {skipped.has(activeItem.id) + ? "Unskip" + : "Skip"} + </button> + )} + </div> + + <div className="pt-3"> + {activeItem.kind === "choice" ? ( + <OptionInput + item={activeItem} + disabled={ + submitted || + skipped.has(activeItem.id) + } + selectedAnswer={ + choiceAnswers[activeItem.id] ?? + null + } + otherOpen={ + !!otherOpen[activeItem.id] + } + otherValue={ + otherValues[activeItem.id] ?? "" + } + onAnswer={(answer) => + chooseAnswer(activeItem, answer) + } + onOtherOpen={() => + setOtherOpen((prev) => ({ + ...prev, + [activeItem.id]: true, + })) + } + onOtherValue={(value) => + setOtherValues((prev) => ({ + ...prev, + [activeItem.id]: value, + })) + } + /> + ) : ( + <DocumentInput + item={activeItem} + disabled={ + submitted || + skipped.has(activeItem.id) + } + docs={ + docsByInput[activeItem.id] ?? [] + } + uploading={ + uploadingInputId === + activeItem.id + } + dragActive={ + dragActiveInputId === + activeItem.id + } + fileInputRef={(node) => { + fileInputsRef.current[ + activeItem.id + ] = node; + }} + onFiles={(files) => + void handleFiles( + activeItem.id, + files, + ) + } + onDragActive={(active) => + setDragActiveInputId( + active + ? activeItem.id + : null, + ) + } + onBrowse={() => + setDocSelectorInputId( + activeItem.id, + ) + } + onRemoveDoc={(docId) => + removeDoc(activeItem.id, docId) + } + /> + )} + </div> + </div> + </div> + )} + + {uploadWarning && ( + <div className="mt-3 flex items-center gap-2 rounded-lg border border-red-100 bg-red-50 px-3 py-2 font-sans text-xs text-gray-900"> + <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-600" /> + <span className="min-w-0 flex-1"> + {uploadWarning} + </span> + <button + type="button" + onClick={() => setUploadWarning(null)} + className="shrink-0 rounded p-0.5 text-black hover:bg-gray-100" + aria-label="Dismiss warning" + > + <X className="h-3.5 w-3.5" /> + </button> + </div> + )} + </div> + </div> + + <AddDocumentsModal + open={!!docSelectorInputId} + onClose={() => setDocSelectorInputId(null)} + onSelect={(selected) => { + if (docSelectorInputId) + addDocs(docSelectorInputId, selected); + }} + breadcrumb={["Assistant", "Add Documents"]} + /> + </> + ); +} + +function OptionInput({ + item, + disabled, + selectedAnswer, + otherOpen, + otherValue, + onAnswer, + onOtherOpen, + onOtherValue, +}: { + item: Extract<AskInputItem, { kind: "choice" }>; + disabled?: boolean; + selectedAnswer: string | null; + otherOpen: boolean; + otherValue: string; + onAnswer: (answer: string) => void; + onOtherOpen: () => void; + onOtherValue: (value: string) => void; +}) { + return ( + <div className="mt-2 grid gap-2"> + {item.options.map((option, idx) => { + const answer = option.value.trim(); + const isSelected = selectedAnswer === answer.trim(); + return ( + <button + key={`${item.id}-${option.value}-${idx}`} + type="button" + disabled={disabled} + onClick={() => onAnswer(answer)} + className={`w-full rounded-lg p-2 text-left transition-colors ${ + isSelected + ? "bg-gray-200/80 text-gray-900" + : "bg-gray-100/70 text-gray-700 hover:bg-gray-200/70 disabled:hover:bg-gray-100/70" + } disabled:cursor-default disabled:opacity-60`} + > + <span className="flex items-start gap-1.5"> + <span className="mt-0.5 w-4 shrink-0 text-xs text-gray-500"> + {idx + 1}. + </span> + <span className="min-w-0 flex-1"> + <span className="block text-sm">{answer}</span> + </span> + {isSelected && ( + <Check className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-700" /> + )} + </span> + </button> + ); + })} + {item.allow_other && ( + <div + className={`w-full rounded-lg p-2 transition-colors ${ + otherOpen + ? "bg-gray-200/80" + : "cursor-pointer bg-gray-100/70 hover:bg-gray-200/70" + } ${disabled ? "cursor-default opacity-60" : ""}`} + onClick={() => !otherOpen && !disabled && onOtherOpen()} + > + <span className="flex items-start gap-1.5"> + <span className="mt-0.5 w-4 shrink-0 text-xs text-gray-500"> + {item.options.length + 1}. + </span> + {otherOpen ? ( + <span className="min-w-0 flex-1 flex items-end gap-2"> + <textarea + name={`other-${item.id}`} + rows={1} + autoFocus + value={otherValue} + disabled={disabled} + onChange={(e) => { + onOtherValue(e.target.value); + e.target.style.height = "auto"; + e.target.style.height = `${e.target.scrollHeight}px`; + }} + onKeyDown={(e) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + onAnswer(otherValue); + } + }} + placeholder="Type your answer..." + className="flex-1 resize-none overflow-hidden bg-transparent text-sm leading-5 text-gray-600 outline-none placeholder:text-gray-400" + /> + <button + type="button" + disabled={disabled || !otherValue.trim()} + onClick={(e) => { + e.stopPropagation(); + onAnswer(otherValue); + }} + className="shrink-0 flex items-center gap-1 rounded-full bg-blue-600 px-3 py-0.5 font-sans text-[10px] text-white transition-colors hover:bg-blue-700 disabled:cursor-default disabled:opacity-40" + > + Set + <CornerDownLeft className="h-3 w-3" /> + </button> + </span> + ) : ( + <span className="min-w-0 flex-1 text-sm text-gray-700"> + {item.other_label || "Other"} + </span> + )} + </span> + </div> + )} + </div> + ); +} + +function DocumentPrompt({ + item, +}: { + item: Extract<AskInputItem, { kind: "documents" }>; +}) { + const documentTypes = item.document_types ?? []; + return ( + <div className="mt-0.5 text-sm text-gray-800"> + <p>Add the following documents if available:</p> + {documentTypes.length > 0 && ( + <div className="mt-1 space-y-0.5 text-gray-700"> + {documentTypes.map((documentType, index) => ( + <p + key={`${documentType}-${index}`} + className="break-words" + > + {index + 1}. {documentType} + </p> + ))} + </div> + )} + </div> + ); +} + +function DocumentInput({ + item, + disabled, + docs, + uploading, + dragActive, + fileInputRef, + onFiles, + onDragActive, + onBrowse, + onRemoveDoc, +}: { + item: Extract<AskInputItem, { kind: "documents" }>; + disabled?: boolean; + docs: Document[]; + uploading: boolean; + dragActive: boolean; + fileInputRef: (node: HTMLInputElement | null) => void; + onFiles: (files: File[]) => void; + onDragActive: (active: boolean) => void; + onBrowse: () => void; + onRemoveDoc: (docId: string) => void; +}) { + return ( + <div className="mt-2"> + <input + ref={fileInputRef} + type="file" + accept={SUPPORTED_DOCUMENT_ACCEPT} + multiple + className="hidden" + onChange={(e) => onFiles(Array.from(e.target.files || []))} + /> + <button + type="button" + disabled={disabled || uploading} + onClick={onBrowse} + onDragEnter={(e) => { + e.preventDefault(); + e.stopPropagation(); + if (!disabled && !uploading) onDragActive(true); + }} + onDragOver={(e) => { + e.preventDefault(); + e.stopPropagation(); + if (!disabled && !uploading) onDragActive(true); + }} + onDragLeave={(e) => { + e.preventDefault(); + e.stopPropagation(); + onDragActive(false); + }} + onDrop={(e) => { + e.preventDefault(); + e.stopPropagation(); + onDragActive(false); + onFiles(Array.from(e.dataTransfer.files || [])); + }} + className={`flex h-[168px] w-full flex-col items-center justify-center gap-1.5 rounded-lg px-3 py-4 font-sans text-xs transition-colors disabled:cursor-default disabled:opacity-50 ${ + dragActive + ? "bg-gray-300 text-gray-900" + : "bg-gray-100/80 text-gray-500 hover:bg-gray-200/80 hover:text-gray-800" + }`} + > + {uploading ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : ( + <Upload className="h-4 w-4" /> + )} + <span className="text-gray-800"> + {uploading + ? "Uploading documents..." + : "Drop files here or click to choose documents"} + </span> + <span className="text-[11px] text-gray-400"> + PDF, Word, Excel, or PowerPoint + </span> + </button> + + {docs.length > 0 && ( + <div className="mt-2 flex flex-wrap gap-1.5"> + {docs.map((doc) => { + return ( + <div + key={`${item.id}-${doc.id}`} + className="inline-flex items-center gap-1 rounded-[10px] border border-white/70 bg-white py-0.5 pl-2 pr-1 text-xs text-gray-800 shadow-[0_2px_6px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-xl" + > + <FileTypeIcon + fileType={doc.file_type} + className="h-2.5 w-2.5" + /> + <span className="max-w-[160px] truncate"> + {doc.filename} + </span> + {!disabled && ( + <button + type="button" + onClick={() => onRemoveDoc(doc.id)} + className="ml-0.5 rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-900/5 hover:text-gray-700" + > + <X className="h-2.5 w-2.5" /> + </button> + )} + </div> + ); + })} + </div> + )} + </div> + ); +} diff --git a/frontend/src/app/components/assistant/AssistantMessage.tsx b/frontend/src/app/components/assistant/AssistantMessage.tsx index bf8b4e6..2c3b74a 100644 --- a/frontend/src/app/components/assistant/AssistantMessage.tsx +++ b/frontend/src/app/components/assistant/AssistantMessage.tsx @@ -1,1589 +1,52 @@ "use client"; -import { useId, useRef, useEffect, useState } from "react"; -import ReactMarkdown, { defaultUrlTransform } from "react-markdown"; -import remarkMath from "remark-math"; -import remarkGfm from "remark-gfm"; -import rehypeKatex from "rehype-katex"; -import "katex/dist/katex.min.css"; +import { useRef, useState } from "react"; +import { Check, Copy } from "lucide-react"; +import type { AssistantEvent, Citation, EditAnnotation } from "../shared/types"; +import { EditCard } from "./EditCard"; +import { PreResponseWrapper } from "./PreResponseWrapper"; +import { ResponseStatus, type StatusState } from "./message/ResponseStatus"; +import { eventErrorMessage, toolCallLabel } from "./message/eventUtils"; +import { preprocessCitations, internalCaseHref } from "./message/citationUtils"; +import { useSmoothedReveal } from "./message/useSmoothedReveal"; +import { MarkdownContent } from "./message/MarkdownContent"; +import { CitationsBlock, buildCitationAppendix } from "./message/CitationSources"; +import { EditCardsSection } from "./message/EditCardsSection"; import { - Copy, - Check, - ChevronDown, - Download, - File, - FileText, - Loader2, - Scale, -} from "lucide-react"; -import { MikeIcon } from "@/components/chat/mike-icon"; -import { displayCitationQuote, formatCitationPage } from "../shared/types"; -import type { - AssistantEvent, - CitationAnnotation, - EditAnnotation, -} from "../shared/types"; -import { EditCard, applyOptimisticResolution } from "./EditCard"; -import { PreResponseWrapper } from "../shared/PreResponseWrapper"; -import { supabase } from "@/lib/supabase"; - -const RESPONSE_GLASS_SURFACE = - "rounded-xl border border-white/70 bg-white/55 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-2xl"; -const RESPONSE_GLASS_ANNOTATION = - "inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-200/60 bg-gray-200/80 text-[12px] font-serif font-medium text-gray-800 shadow-[0_1px_2px_rgba(15,23,42,0.04),inset_0_1px_0_rgba(243,244,246,0.85),inset_0_-2px_4px_rgba(229,231,235,0.65)] backdrop-blur-xl transition-colors hover:bg-gray-200 hover:text-gray-950"; - -function toolCallLabel(name: string): string { - if (name === "generate_docx") return "Creating document..."; - if (name === "edit_document") return "Editing document..."; - if (name === "read_document") return "Reading document..."; - if (name === "fetch_documents") return "Reading documents..."; - if (name === "find_in_document") return "Searching document..."; - if (name === "replicate_document") return "Copying document..."; - if (name === "read_workflow") return "Loading workflow..."; - if (name === "list_workflows") return "Loading workflows..."; - if (name === "list_documents") return "Loading documents..."; - if (name === "courtlistener_search_case_law") - return "Searching case law..."; - if (name === "courtlistener_get_cases") return "Fetching cases..."; - if (name === "courtlistener_find_in_case") return "Searching case..."; - if (name === "courtlistener_read_case") return "Reading case..."; - if (name === "courtlistener_verify_citations") - return "Verifying citations..."; - if (name.startsWith("mcp_")) return "Using connector..."; - return name ? `Running ${name}...` : "Working..."; -} - -/** - * Card rendered above the per-edit EditCards when a message produced - * multiple tracked-change proposals. Lets the user resolve every pending - * edit in one click by firing the per-edit accept/reject endpoint for each - * pending annotation and forwarding each response to `onResolved` so the - * parent can bump the viewer version, persist override URLs, etc. - * - * This intentionally doesn't apply the optimistic DOM mutation that - * EditCard does — bulk operations touch many edits at once and the real - * re-render from the latest version will reconcile within a second or so. - */ -function BulkEditActions({ - pending, - filenameByDocId, - onViewClick, - onResolveStart, - onResolved, - onError, -}: { - pending: { - annotation: EditAnnotation; - filename: string; - }[]; - filenameByDocId: Map<string, string>; - onViewClick?: (ann: EditAnnotation, filename: string) => void; - onResolveStart?: (args: { - editId: string; - documentId: string; - verb: "accept" | "reject"; - }) => void; - onResolved?: (args: { - editId: string; - documentId: string; - status: "accepted" | "rejected"; - versionId: string | null; - downloadUrl: string | null; - }) => void; - onError?: (args: { - editId: string; - documentId: string; - versionId: string | null; - message: string; - }) => void; -}) { - const [busy, setBusy] = useState<"accept" | "reject" | null>(null); - const [progress, setProgress] = useState<{ - done: number; - total: number; - } | null>(null); - - if (pending.length === 0) return null; - - const handleAll = async (verb: "accept" | "reject") => { - if (busy) return; - setBusy(verb); - setProgress({ done: 0, total: pending.length }); - try { - const { - data: { session }, - } = await supabase.auth.getSession(); - const token = session?.access_token; - const apiBase = - process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; - - // Sequential so the per-document version counter advances in a - // predictable order and the viewer doesn't race between bumps. - let done = 0; - for (const { annotation } of pending) { - onResolveStart?.({ - editId: annotation.edit_id, - documentId: annotation.document_id, - verb, - }); - // Optimistically mutate the DOM so the viewer reflects the - // resolution immediately. Revert if the backend call fails. - let revert: (() => void) | null = null; - try { - revert = applyOptimisticResolution(annotation, verb); - } catch (e) { - console.error( - "[BulkEditActions] optimistic update threw", - e, - ); - } - try { - const resp = await fetch( - `${apiBase}/single-documents/${annotation.document_id}/edits/${annotation.edit_id}/${verb}`, - { - method: "POST", - headers: token - ? { Authorization: `Bearer ${token}` } - : undefined, - }, - ); - if (!resp.ok) throw new Error(`HTTP ${resp.status}`); - const data = (await resp.json()) as { - ok: boolean; - status?: "accepted" | "rejected"; - version_id: string | null; - download_url: string | null; - }; - const nextStatus = - data.status ?? - (verb === "accept" ? "accepted" : "rejected"); - onResolved?.({ - editId: annotation.edit_id, - documentId: annotation.document_id, - status: nextStatus, - versionId: data.version_id, - downloadUrl: data.download_url, - }); - } catch (e) { - console.error("[BulkEditActions] resolve failed", e); - try { - revert?.(); - } catch (revertErr) { - console.error( - "[BulkEditActions] revert threw", - revertErr, - ); - } - onError?.({ - editId: annotation.edit_id, - documentId: annotation.document_id, - versionId: annotation.version_id ?? null, - message: - verb === "accept" - ? "Couldn't save one or more accepts." - : "Couldn't save one or more rejects.", - }); - } - done++; - setProgress({ done, total: pending.length }); - } - } finally { - setBusy(null); - setProgress(null); - } - }; - - // Optional: show a tiny "View first" action so bulk doesn't lose the - // in-viewer scroll-to behaviour entirely. - const first = pending[0]; - - return ( - <div className="flex items-center gap-2"> - <button - onClick={() => handleAll("accept")} - disabled={!!busy} - className="px-2 py-1 text-xs rounded border border-gray-900 bg-gray-900 text-white hover:bg-gray-800 disabled:opacity-50 inline-flex items-center gap-1" - > - {busy === "accept" && ( - <Loader2 className="h-3 w-3 animate-spin" /> - )} - Accept all - </button> - <button - onClick={() => handleAll("reject")} - disabled={!!busy} - className="px-2 py-1 text-xs rounded border border-gray-200 bg-white text-gray-700 hover:bg-gray-100 disabled:opacity-50 inline-flex items-center gap-1" - > - {busy === "reject" && ( - <Loader2 className="h-3 w-3 animate-spin" /> - )} - Reject all - </button> - {progress && ( - <span className="text-xs font-serif text-gray-500"> - {progress.done}/{progress.total} - </span> - )} - {onViewClick && first && ( - <button - onClick={() => - onViewClick(first.annotation, first.filename) - } - disabled={!!busy} - className="ml-auto px-2 py-1 text-xs rounded border border-gray-200 bg-white text-gray-700 hover:bg-gray-100 disabled:opacity-50" - > - View - </button> - )} - </div> - ); -} - -/** - * Wraps the bulk accept/reject card and the per-edit EditCards in a single - * minimisable container. The bulk actions and summary stay visible in the - * header; the individual cards collapse via the chevron toggle. - */ -function EditCardsSection({ - pending, - filenameByDocId, - cards, - resolvedCount, - onViewClick, - onResolveStart, - onResolved, - onError, -}: { - pending: { - annotation: EditAnnotation; - filename: string; - }[]; - filenameByDocId: Map<string, string>; - cards: React.ReactNode[]; - resolvedCount: number; - onViewClick?: (ann: EditAnnotation, filename: string) => void; - onResolveStart?: (args: { - editId: string; - documentId: string; - verb: "accept" | "reject"; - }) => void; - onResolved?: (args: { - editId: string; - documentId: string; - status: "accepted" | "rejected"; - versionId: string | null; - downloadUrl: string | null; - }) => void; - onError?: (args: { - editId: string; - documentId: string; - versionId: string | null; - message: string; - }) => void; -}) { - const [isOpen, setIsOpen] = useState(true); - if (cards.length === 0) return null; - - const docCount = filenameByDocId.size; - const summary = - pending.length > 0 - ? docCount > 1 - ? `${pending.length} tracked changes across ${docCount} documents` - : `${pending.length} tracked ${pending.length === 1 ? "change" : "changes"}` - : docCount > 1 - ? `${resolvedCount} resolved tracked changes across ${docCount} documents` - : `${resolvedCount} resolved tracked ${resolvedCount === 1 ? "change" : "changes"}`; - - return ( - <div className="border border-gray-200 rounded-lg bg-white overflow-hidden"> - {/* Row 1: summary + chevron */} - <div className="flex items-center gap-2 px-3 pt-3"> - <p className="flex-1 min-w-0 text-sm font-serif text-gray-700 truncate"> - {summary} - </p> - <button - onClick={() => setIsOpen((v) => !v)} - aria-label={isOpen ? "Collapse edits" : "Expand edits"} - className="shrink-0 rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-800 transition-colors" - > - <ChevronDown - className={`h-4 w-4 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} - /> - </button> - </div> - {/* Row 2: bulk action buttons */} - {pending.length > 0 && ( - <div className="px-3 pt-3"> - <BulkEditActions - pending={pending} - filenameByDocId={filenameByDocId} - onViewClick={onViewClick} - onResolveStart={onResolveStart} - onResolved={onResolved} - onError={onError} - /> - </div> - )} - {/* Row 3: collapsible cards list */} - {isOpen && ( - <div className="flex flex-col gap-2 px-3 pb-3 pt-3"> - {cards} - </div> - )} - {!isOpen && <div className="pb-3" />} - </div> - ); -} - -// --------------------------------------------------------------------------- -// ResponseStatus -// --------------------------------------------------------------------------- - -type StatusState = "active" | "error" | null; - -function ResponseStatus({ status }: { status: StatusState }) { - const [showDone, setShowDone] = useState(false); - const [doneVisible, setDoneVisible] = useState(false); - const wasActiveRef = useRef(false); - - const isActive = status === "active"; - const isError = status === "error"; - - useEffect(() => { - if (wasActiveRef.current && !isActive) { - setShowDone(true); - setDoneVisible(true); - const t = setTimeout(() => setDoneVisible(false), 1500); - return () => clearTimeout(t); - } else if (!wasActiveRef.current && isActive) { - setShowDone(false); - setDoneVisible(false); - } - wasActiveRef.current = isActive; - }, [isActive]); - - return ( - <div className="w-full h-9 flex items-center mb-2"> - <MikeIcon - spin={isActive} - done={showDone && doneVisible} - error={isError} - mike={!isError && !(showDone && doneVisible)} - size={22} - /> - </div> - ); -} - -function eventErrorMessage(event: AssistantEvent): string | null { - if (event.type === "error") return event.message; - if ("error" in event && typeof event.error === "string" && event.error) { - return event.error; - } - return null; -} - -// --------------------------------------------------------------------------- -// Event block components -// --------------------------------------------------------------------------- - -const THINKING_PHRASES = [ - "Thinking...", - "Pondering...", - "Analyzing...", - "Reviewing...", - "Reasoning...", -]; -const REASONING_COLLAPSED_MAX_LINES = 6; -const REASONING_COLLAPSED_MAX_HEIGHT_REM = 9; - -function ReasoningBlock({ - text, - isStreaming, - showConnector, -}: { - text: string; - isStreaming: boolean; - showConnector?: boolean; -}) { - const [isContentOpen, setIsContentOpen] = useState(false); - const [isExpanded, setIsExpanded] = useState(false); - const [userToggledContent, setUserToggledContent] = useState(false); - const [isOverflowing, setIsOverflowing] = useState(false); - const [hasMeasured, setHasMeasured] = useState(false); - const [thinkingIndex, setThinkingIndex] = useState(0); - const contentRef = useRef<HTMLDivElement | null>(null); - - useEffect(() => { - if (!isStreaming) return; - const interval = setInterval(() => { - setThinkingIndex((i) => (i + 1) % THINKING_PHRASES.length); - }, 2000); - return () => clearInterval(interval); - }, [isStreaming]); - - useEffect(() => { - const el = contentRef.current; - if (!el) return; - const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 24; - const maxHeight = lineHeight * REASONING_COLLAPSED_MAX_LINES; - const nextOverflowing = el.scrollHeight > maxHeight + 2; - setIsOverflowing(nextOverflowing); - setHasMeasured(true); - if (!userToggledContent) setIsContentOpen(isStreaming); - if (!nextOverflowing) setIsExpanded(false); - }, [isStreaming, text, userToggledContent]); - - const showContent = isContentOpen || isStreaming || !hasMeasured; - const isCollapsed = isContentOpen && isOverflowing && !isExpanded; - - return ( - <div className="relative"> - {showConnector && ( - <div className="absolute left-0 top-0 bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - <button - onClick={() => { - if (isStreaming) return; - setUserToggledContent(true); - setIsContentOpen((v) => !v); - }} - className="flex items-center text-sm font-serif text-gray-500 hover:text-gray-600 transition-colors" - > - {isStreaming ? ( - <div className="w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div className="w-1.5 h-1.5 rounded-full bg-gray-300 shrink-0" /> - )} - <span className="font-medium ml-2"> - {isStreaming - ? THINKING_PHRASES[thinkingIndex] - : "Thought process"} - </span> - {!isStreaming && ( - <ChevronDown - size={10} - className={`relative top-px ml-1 transition-transform duration-200 ${isContentOpen ? "" : "-rotate-90"}`} - /> - )} - </button> - {showContent && ( - <div className="mt-2 ml-[14px]"> - <div - className={`relative ${isCollapsed ? "overflow-hidden" : ""}`} - style={ - isCollapsed - ? { - maxHeight: `${REASONING_COLLAPSED_MAX_HEIGHT_REM}rem`, - } - : undefined - } - > - <div - ref={contentRef} - className="text-sm font-serif text-gray-400 prose prose-sm max-w-none [&>*]:text-gray-400 [&>*]:text-sm" - > - <ReactMarkdown - remarkPlugins={[remarkGfm]} - components={{ - code: ({ node, ...props }) => ( - <code - className="font-serif text-gray-600" - {...props} - /> - ), - }} - > - {text} - </ReactMarkdown> - </div> - {isCollapsed && ( - <> - <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-white/0 to-white" /> - <button - type="button" - onClick={() => setIsExpanded(true)} - className="absolute left-1/2 bottom-2 z-10 -translate-x-1/2 text-gray-400 transition-colors hover:text-gray-600" - aria-label="Expand thought process" - > - <ChevronDown className="h-3.5 w-3.5" /> - </button> - </> - )} - </div> - {isOverflowing && isContentOpen && isExpanded && ( - <button - type="button" - onClick={() => setIsExpanded(false)} - className="mx-auto mt-2 flex text-gray-400 transition-colors hover:text-gray-600" - aria-label="Minimise thought process" - > - <ChevronDown className="h-3.5 w-3.5 rotate-180" /> - </button> - )} - </div> - )} - </div> - ); -} - -function DocReadBlock({ - filename, - onClick, - showConnector, - isStreaming, -}: { - filename: string; - onClick?: () => void; - showConnector?: boolean; - isStreaming?: boolean; -}) { - return ( - <div className="flex items-start text-sm font-serif text-gray-500 relative"> - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - {isStreaming ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div className="mt-2 w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" /> - )} - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - <span className="font-medium"> - {isStreaming ? "Reading" : "Read"} - </span>{" "} - {isStreaming ? ( - <span>{filename}...</span> - ) : onClick ? ( - <button - onClick={onClick} - className="text-left hover:text-gray-700 transition-colors cursor-pointer" - > - {filename} - </button> - ) : ( - <span>{filename}</span> - )} - </div> - </div> - ); -} - -function DocFindBlock({ - filename, - query, - totalMatches, - isStreaming, - showConnector, -}: { - filename: string; - query: string; - totalMatches: number; - isStreaming?: boolean; - showConnector?: boolean; -}) { - const label = isStreaming ? "Finding" : "Found"; - const matchSuffix = isStreaming - ? "" - : ` (${totalMatches} ${totalMatches === 1 ? "match" : "matches"})`; - return ( - <div className="flex items-start text-sm font-serif text-gray-500 relative"> - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - {isStreaming ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div - className={`mt-2 w-1.5 h-1.5 rounded-full shrink-0 ${totalMatches > 0 ? "bg-green-400" : "bg-gray-300"}`} - /> - )} - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - <span className="font-medium">{label}</span>{" "} - <span> - “{query}”{matchSuffix} - <span className="ml-1 text-gray-400">in {filename}</span> - {isStreaming && "..."} - </span> - </div> - </div> - ); -} - -function DocCreatedBlock({ - filename, - showConnector, - isStreaming, -}: { - filename: string; - showConnector?: boolean; - isStreaming?: boolean; -}) { - return ( - <div className="flex items-start text-sm font-serif text-gray-500 relative"> - {showConnector && ( - <div className="absolute left-0 top-0 bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - {isStreaming ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div className="mt-2 w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" /> - )} - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - <span className="font-medium"> - {isStreaming ? "Creating" : "Created"} - </span>{" "} - <span>{isStreaming ? `${filename}...` : filename}</span> - </div> - </div> - ); -} - -function DocReplicatedBlock({ - filename, - count, - showConnector, - isStreaming, - hasError, -}: { - filename: string; - /** - * How many consecutive replicates of this same source got collapsed - * into this block. ≥ 1; only rendered when > 1. - */ - count: number; - showConnector?: boolean; - isStreaming?: boolean; - hasError?: boolean; -}) { - const label = isStreaming ? "Replicating" : "Replicated"; - const suffix = - !isStreaming && count > 1 - ? ` ${count} times` - : isStreaming - ? "..." - : ""; - return ( - <div className="flex items-start text-sm font-serif text-gray-500 relative"> - {showConnector && ( - <div className="absolute left-0 top-0 bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - {isStreaming ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div - className={`mt-2 w-1.5 h-1.5 rounded-full shrink-0 ${hasError ? "bg-red-400" : "bg-green-400"}`} - /> - )} - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - <span className="font-medium">{label}</span>{" "} - <span> - {filename} - {suffix} - </span> - </div> - </div> - ); -} - -function DocDownloadBlock({ - filename, - download_url, - onOpen, - isReloading = false, - versionNumber, -}: { - filename: string; - download_url: string; - onOpen?: () => void; - isReloading?: boolean; - versionNumber?: number | null; -}) { - const hasVersion = - typeof versionNumber === "number" && - Number.isFinite(versionNumber) && - versionNumber > 0; - const extMatch = filename.match(/\.(\w+)$/); - const ext = extMatch ? extMatch[1].toUpperCase() : "FILE"; - const rawBasename = extMatch - ? filename.slice(0, -extMatch[0].length) - : filename; - // Strip any legacy "[Edited V3]" suffix that may still be baked into - // older saved download filenames — the version is surfaced as a - // separate tag now. - const basename = rawBasename.replace(/\s*\[Edited V\d+\]\s*$/, "").trim(); - // Only backend-relative URLs are accepted. The download fetch carries - // the user's bearer token, so any absolute URL from tool output is - // refused to keep the token from leaking off-origin. - const API_BASE = - process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; - const isSafeHref = download_url.startsWith("/"); - const href = isSafeHref ? `${API_BASE}${download_url}` : null; - const [busy, setBusy] = useState(false); - - const handleDownload = async (e?: { - stopPropagation?: () => void; - preventDefault?: () => void; - }) => { - e?.stopPropagation?.(); - e?.preventDefault?.(); - if (busy || isReloading || !href) return; - setBusy(true); - try { - const { - data: { session }, - } = await supabase.auth.getSession(); - const token = session?.access_token; - const resp = await fetch(href, { - headers: token ? { Authorization: `Bearer ${token}` } : {}, - }); - if (!resp.ok) throw new Error(`HTTP ${resp.status}`); - const blob = await resp.blob(); - const blobUrl = URL.createObjectURL(blob); - const a = document.createElement("a"); - a.href = blobUrl; - a.download = filename; - document.body.appendChild(a); - a.click(); - a.remove(); - setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); - } finally { - setBusy(false); - } - }; - - const spinning = busy || isReloading; - - const body = ( - <div className="flex items-center gap-3 px-4 py-3 min-w-0 flex-1"> - <div className="min-w-0 flex-1"> - <div className="flex items-center gap-2 min-w-0"> - <p className="text-base font-serif text-gray-900 text-wrap"> - {basename} - </p> - {hasVersion && ( - <span className="shrink-0 inline-flex items-center rounded-md border border-white/70 bg-white/55 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] backdrop-blur-xl"> - V{versionNumber} - </span> - )} - </div> - <p className="text-xs text-blue-500 mt-0.5">{ext}</p> - </div> - </div> - ); - - const downloadIcon = spinning ? ( - <div - aria-disabled - className="shrink-0 flex items-center bg-white/25 px-6 text-gray-400 cursor-not-allowed" - > - <Loader2 size={13} className="animate-spin" /> - </div> - ) : ( - <button - type="button" - onClick={handleDownload} - className="shrink-0 flex items-center bg-white/25 px-6 text-gray-500 transition-colors hover:bg-white/55 hover:text-gray-700 cursor-pointer" - > - <Download size={13} /> - </button> - ); - - if (onOpen) { - return ( - <div - className={`flex items-stretch overflow-hidden w-full font-sans ${RESPONSE_GLASS_SURFACE}`} - > - <button - type="button" - onClick={onOpen} - className="flex items-stretch flex-1 min-w-0 text-left transition-colors hover:bg-white/45 cursor-pointer" - > - {body} - </button> - {downloadIcon} - </div> - ); - } - - if (spinning) { - return ( - <div - className={`flex items-stretch overflow-hidden w-full font-sans ${RESPONSE_GLASS_SURFACE}`} - > - {body} - {downloadIcon} - </div> - ); - } - - return ( - <div - className={`flex items-stretch overflow-hidden w-full font-sans ${RESPONSE_GLASS_SURFACE}`} - > - <button - type="button" - onClick={handleDownload} - className="flex items-stretch flex-1 min-w-0 text-left transition-colors hover:bg-white/45 cursor-pointer" - > - {body} - </button> - {downloadIcon} - </div> - ); -} - -function WorkflowAppliedBlock({ - title, - showConnector, - onClick, -}: { - title: string; - showConnector?: boolean; - onClick?: () => void; -}) { - return ( - <div className="flex items-start text-sm font-serif text-gray-500 relative"> - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - <div className="mt-2 w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" /> - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - <span className="font-medium">Applied Workflow</span>{" "} - {onClick ? ( - <button - onClick={onClick} - className="text-left hover:text-gray-700 transition-colors cursor-pointer" - > - {title} - </button> - ) : ( - <span>{title}</span> - )} - </div> - </div> - ); -} - -type CourtListenerBlockItem = { - caseName: string | null; - citation: string | null; - dateFiled?: string | null; - url?: string | null; - query?: string; - totalMatches?: number; - hasError?: boolean; -}; - -function CourtListenerBlock({ - label, - detail, - isStreaming, - hasError, - showConnector, - items, -}: { - label: string; - detail?: string; - isStreaming?: boolean; - hasError?: boolean; - showConnector?: boolean; - items?: CourtListenerBlockItem[]; -}) { - const [isOpen, setIsOpen] = useState(false); - const hasItems = !!items && items.length > 0; - return ( - <div className="relative"> - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - <div className="flex items-start text-sm font-serif text-gray-500"> - {isStreaming ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div - className={`mt-2 w-1.5 h-1.5 rounded-full shrink-0 ${hasError ? "bg-red-500" : "bg-green-400"}`} - /> - )} - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - {hasItems ? ( - <button - onClick={() => setIsOpen((v) => !v)} - className="text-left hover:text-gray-700 transition-colors inline-flex items-center" - > - <span className="font-medium">{label}</span> - {detail ? <span> {detail}</span> : null} - {isStreaming ? <span>...</span> : null} - <ChevronDown - size={10} - className={`relative top-px ml-1 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} - /> - </button> - ) : ( - <> - <span className="font-medium">{label}</span> - {detail ? <span> {detail}</span> : null} - {isStreaming ? <span>...</span> : null} - </> - )} - </div> - </div> - {isOpen && hasItems && ( - <ul className="mt-2 ml-[14px] flex flex-col gap-1 text-sm font-serif text-gray-500"> - {items!.map((item, idx) => { - const label = [item.caseName, item.citation] - .filter(Boolean) - .join(", "); - const primary = label || item.url || "Unknown case"; - const searchText = item.query - ? `Searched for "${item.query}" in ${primary}${ - typeof item.totalMatches === "number" - ? ` (${item.totalMatches} ${ - item.totalMatches === 1 - ? "match" - : "matches" - })` - : "" - }` - : null; - return ( - <li key={idx}> - <div - className={ - item.hasError ? "text-red-500" : "" - } - > - {item.url ? ( - <a - href={item.url} - target="_blank" - rel="noreferrer" - className="hover:text-gray-700 hover:underline underline-offset-2" - > - {searchText ?? primary} - </a> - ) : searchText ? ( - <span>{searchText}</span> - ) : ( - <span>{primary}</span> - )} - </div> - </li> - ); - })} - </ul> - )} - </div> - ); -} - -function DocEditedBlock({ - filename, - showConnector, - isStreaming, - hasError, -}: { - filename: string; - showConnector?: boolean; - isStreaming?: boolean; - hasError?: boolean; -}) { - return ( - <div className="flex items-start text-sm font-serif text-gray-500 relative"> - {showConnector && ( - <div className="absolute left-0 top-0 bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - {isStreaming ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : hasError ? ( - <div className="mt-2 w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" /> - ) : ( - <div className="mt-2 w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" /> - )} - <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> - <span className="font-medium"> - {isStreaming - ? "Editing" - : hasError - ? "Edit failed" - : "Edited"} - </span>{" "} - <span>{isStreaming ? `${filename}...` : filename}</span> - </div> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Citation preprocessing -// --------------------------------------------------------------------------- - -function preprocessCitations( - text: string, - annotations: CitationAnnotation[], - citationsList: CitationAnnotation[], -): string { - // Replace [N] or [N, M, ...] inline markers with internal §idx§ tokens backed by annotations - return text.replace(/\[(\d+(?:,\s*\d+)*)\]/g, (full, refsStr, offset) => { - const refs = (refsStr as string) - .split(",") - .map((s: string) => parseInt(s.trim(), 10)); - const tokens = refs.flatMap((ref: number) => { - const ann = annotations.find((a) => a.ref === ref); - if (!ann) return []; - const idx = citationsList.length; - citationsList.push(ann); - return [`\`§${idx}§\`\u200B`]; - }); - return tokens.length > 0 ? tokens.join("") : full; - }); -} - -// --------------------------------------------------------------------------- -// Markdown renderer (shared config) -// --------------------------------------------------------------------------- - -function internalCaseHref( - value: string | number | null | undefined, -): string | null { - if (typeof value === "number") return `us-case-${value}`; - if (!value) return null; - const match = value.match(/^us-case-(\d+)$/); - return match ? `us-case-${match[1]}` : null; -} - -function MarkdownContent({ - text, - citationsList, - caseCitations, - caseOpinions, - onCitationClick, - onCaseClick, - divRef, -}: { - text: string; - citationsList: CitationAnnotation[]; - caseCitations: Map< - string, - Extract<AssistantEvent, { type: "case_citation" }> - >; - caseOpinions: Map< - number, - Extract<AssistantEvent, { type: "case_opinions" }>["case"] - >; - onCitationClick?: (c: CitationAnnotation) => void; - onCaseClick?: ( - c: Extract<AssistantEvent, { type: "case_citation" }>, - ) => void; - divRef?: React.RefObject<HTMLDivElement | null>; -}) { - function findCaseCitation(href: string) { - return caseCitations.get(internalCaseHref(href) ?? ""); - } - - return ( - <div - ref={divRef} - className="text-gray-900 mb-4 text-base prose prose-sm max-w-none font-serif" - > - <ReactMarkdown - remarkPlugins={[ - [remarkMath, { singleDollarTextMath: false }], - remarkGfm, - ]} - rehypePlugins={[rehypeKatex]} - urlTransform={(url) => - /^us-case-\d+$/.test(url) ? url : defaultUrlTransform(url) - } - components={{ - table: ({ node, ...props }) => ( - <div className="overflow-x-auto my-4 rounded-lg"> - <table - className="min-w-full divide-y divide-gray-300 overflow-hidden" - {...props} - /> - </div> - ), - thead: ({ node, ...props }) => ( - <thead className="bg-gray-100" {...props} /> - ), - tbody: ({ node, ...props }) => ( - <tbody - className="divide-y divide-gray-200" - {...props} - /> - ), - tr: ({ node, ...props }) => <tr {...props} />, - th: ({ node, ...props }) => ( - <th - className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" - {...props} - /> - ), - td: ({ node, ...props }) => ( - <td - className="whitespace-normal px-3 py-4 text-sm text-gray-900" - {...props} - /> - ), - h1: ({ node, ...props }) => ( - <h1 - className="mt-6 mb-4 text-3xl font-serif font-semibold" - {...props} - /> - ), - h2: ({ node, ...props }) => ( - <h2 - className="mt-5 mb-3 text-2xl font-serif font-semibold" - {...props} - /> - ), - h3: ({ node, ...props }) => ( - <h3 - className="text-xl font-semibold mt-4 mb-2" - {...props} - /> - ), - h4: ({ node, ...props }) => ( - <h4 - className="text-lg font-semibold mt-4 mb-2" - {...props} - /> - ), - p: ({ node, ...props }) => { - const parent = (node as any)?.parent; - if (parent?.type === "listItem") { - return ( - <p - className="inline leading-7 m-0" - {...props} - /> - ); - } - return <p className="mb-4 leading-7" {...props} />; - }, - ul: ({ node, ...props }) => ( - <ul - className="list-disc list-outside mb-4 pl-6" - {...props} - /> - ), - ol: ({ node, ...props }) => ( - <ol - className="list-decimal list-outside mb-4 pl-6" - {...props} - /> - ), - li: ({ node, ...props }) => ( - <li className="mb-2 leading-7" {...props} /> - ), - strong: ({ node, ...props }) => ( - <strong className="font-semibold" {...props} /> - ), - em: ({ node, ...props }) => ( - <em className="italic" {...props} /> - ), - code: ({ node, children, ...props }) => { - const text = String(children); - const citMatch = text.match(/^§(\d+)§$/); - if (citMatch) { - const idx = parseInt(citMatch[1]); - const annotation = citationsList[idx]; - if (annotation) { - const tooltipText = `${formatCitationPage(annotation)}: "${displayCitationQuote(annotation)}"`; - return ( - <button - onClick={() => - onCitationClick?.(annotation) - } - data-citation-ref={annotation.ref} - className={`${RESPONSE_GLASS_ANNOTATION} mx-0.5 align-super`} - title={tooltipText} - > - {annotation.ref} - </button> - ); - } - } - return ( - <code - className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-serif" - {...props} - > - {children} - </code> - ); - }, - blockquote: ({ node, ...props }) => ( - <blockquote - className="border-l-4 border-gray-300 pl-4 italic my-4" - {...props} - /> - ), - a: ({ node, href, children, ...props }) => { - if (href) { - const isInternalCaseHref = !!internalCaseHref(href); - const citation = findCaseCitation(href); - if (citation && onCaseClick) { - return ( - <button - type="button" - onClick={() => - onCaseClick({ - ...citation, - case: - citation.cluster_id !== null - ? caseOpinions.get( - citation.cluster_id, - ) - : undefined, - }) - } - className="text-left text-blue-600 hover:text-blue-700 underline" - > - {children} - </button> - ); - } - if (citation) { - return ( - <a - href={citation.url} - className="text-blue-600 hover:text-blue-700 underline" - target="_blank" - rel="noopener noreferrer" - > - {children} - </a> - ); - } - if (isInternalCaseHref) { - return ( - <span className="text-blue-600 underline"> - {children} - </span> - ); - } - return ( - <a - href={href} - className="text-blue-600 hover:text-blue-700 underline" - target="_blank" - rel="noopener noreferrer" - {...props} - > - {children} - </a> - ); - } - return ( - <a - href={href} - className="text-blue-600 hover:text-blue-700 underline" - target="_blank" - rel="noopener noreferrer" - {...props} - > - {children} - </a> - ); - }, - hr: ({ node, ...props }) => ( - <hr className="my-6 border-gray-200" {...props} /> - ), - }} - > - {text} - </ReactMarkdown> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Citations block -// --------------------------------------------------------------------------- - -type CitationSourceRow = { - key: string; - label: string; - source: CitationAnnotation; - entries: { annotation: CitationAnnotation; index: number }[]; -}; - -function citationSourceKey(annotation: CitationAnnotation): string { - if (annotation.kind === "case") { - return `case:${annotation.cluster_id}`; - } - return `document:${annotation.document_id}`; -} - -function citationSourceLabel(annotation: CitationAnnotation): string { - if (annotation.kind === "case") { - const caseName = annotation.case_name?.trim(); - const citation = annotation.citation?.trim(); - if (caseName && citation) return `${caseName}, ${citation}`; - return caseName || citation || `Case ${annotation.cluster_id}`; - } - return annotation.filename; -} - -function documentExtension(filename: string): string { - return filename.split(".").pop()?.toLowerCase() ?? ""; -} - -function CitationSourceIcon({ - annotation, -}: { - annotation: CitationAnnotation; -}) { - if (annotation.kind === "case") { - return <Scale className="h-3.5 w-3.5 text-slate-600" />; - } - const ext = documentExtension(annotation.filename); - if (ext === "pdf") return <File className="h-3.5 w-3.5 text-red-500" />; - return <FileText className="h-3.5 w-3.5 text-blue-500" />; -} - -function buildCitationSourceRows( - citations: CitationAnnotation[], -): CitationSourceRow[] { - const rows = new Map<string, CitationSourceRow>(); - citations.forEach((annotation, index) => { - const key = citationSourceKey(annotation); - const existing = rows.get(key); - if (existing) { - existing.entries.push({ annotation, index }); - return; - } - rows.set(key, { - key, - label: citationSourceLabel(annotation), - source: annotation, - entries: [{ annotation, index }], - }); - }); - return Array.from(rows.values()); -} - -function escapeHtmlText(value: string): string { - return value - .replace(/&/g, "&") - .replace(/</g, "<") - .replace(/>/g, ">") - .replace(/"/g, """) - .replace(/'/g, "'"); -} - -function ensureTerminalPeriod(value: string): string { - return /[.!?]$/.test(value.trim()) ? value.trim() : `${value.trim()}.`; -} - -function buildCitationAppendix(citations: CitationAnnotation[]) { - if (citations.length === 0) return { html: "", text: "" }; - let previousSourceKey: string | null = null; - const entries = citations.map((annotation) => { - const sourceKey = citationSourceKey(annotation); - const label = - sourceKey === previousSourceKey - ? "Id." - : citationSourceLabel(annotation); - previousSourceKey = sourceKey; - return { - number: annotation.ref, - label, - quote: displayCitationQuote(annotation).trim(), - }; - }); - const textLines = [ - "", - "Citations", - ...entries.map((entry) => { - const quote = entry.quote ? ` "${entry.quote}"` : ""; - return `${entry.number} ${ensureTerminalPeriod(entry.label)}${quote}`; - }), - ]; - const html = [ - `<section class="copied-citations">`, - `<h3>Citations</h3>`, - ...entries.map((entry) => { - const label = escapeHtmlText(ensureTerminalPeriod(entry.label)); - const quote = entry.quote - ? ` "${escapeHtmlText(entry.quote)}"` - : ""; - return `<p><sup>${entry.number}</sup> ${label}${quote}</p>`; - }), - `</section>`, - ].join(""); - return { html, text: textLines.join("\n") }; -} - -function CitationsBlock({ - citationsList, - onCitationClick, - onOpenSource, - canOpenSource, - showWhenEmpty = false, - isLoading = false, -}: { - citationsList: CitationAnnotation[]; - onCitationClick?: (citation: CitationAnnotation) => void; - onOpenSource?: (citation: CitationAnnotation) => void; - canOpenSource?: (citation: CitationAnnotation) => boolean; - showWhenEmpty?: boolean; - isLoading?: boolean; -}) { - const rows = buildCitationSourceRows(citationsList); - if (rows.length === 0 && !showWhenEmpty) return null; - - return ( - <div className="mt-2 mb-3"> - <div className={`overflow-hidden ${RESPONSE_GLASS_SURFACE}`}> - <div className="flex items-center justify-between gap-3 bg-white/25 px-3 py-2"> - <h3 className="text-base font-serif text-gray-900"> - Citations - </h3> - {isLoading && ( - <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400" /> - )} - </div> - <div> - {rows.map((row) => { - const sourceIsClickable = - !!onOpenSource && - (canOpenSource?.(row.source) ?? true); - return ( - <div - key={row.key} - className="flex items-center gap-3 px-3 py-3" - > - <button - type="button" - onClick={() => onOpenSource?.(row.source)} - disabled={!sourceIsClickable} - className="flex min-w-0 flex-1 items-center gap-2 rounded-lg text-left text-sm font-serif text-gray-700 transition-colors enabled:hover:text-gray-950 disabled:cursor-default" - > - <CitationSourceIcon - annotation={row.source} - /> - <span className="truncate"> - {row.label} - </span> - </button> - <div className="flex shrink-0 flex-wrap justify-end gap-1"> - {row.entries.map( - ({ annotation, index }) => ( - <button - key={`${row.key}:${index}`} - type="button" - onClick={() => - onCitationClick?.( - annotation, - ) - } - className={ - RESPONSE_GLASS_ANNOTATION - } - title={`${formatCitationPage(annotation)}: "${displayCitationQuote(annotation)}"`} - > - {annotation.ref} - </button> - ), - )} - </div> - </div> - ); - })} - </div> - </div> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Stream smoothing -// --------------------------------------------------------------------------- - -/** - * Hide jitter from arrival of streamed text chunks by revealing characters at - * a smooth, rate-paced clip rather than rendering every chunk verbatim. - * - * Returns a prefix of `text` whose length grows over time toward the full - * length. When `active` is false (stream ended, message replayed from - * history, etc.), snaps to the full text immediately. - * - * Rate adapts to backlog: small backlogs reveal at a 40 cps floor; large - * backlogs catch up within ~0.4s, so the smoothing never lags noticeably - * behind the server. - */ -function useSmoothedReveal(text: string, active: boolean): string { - const [revealedInt, setRevealedInt] = useState(text.length); - const revealedFloat = useRef<number>(text.length); - - useEffect(() => { - if (!active) { - revealedFloat.current = text.length; - setRevealedInt(text.length); - return; - } - - // Defensive clamp in case the text was edited / replaced shorter. - if (revealedFloat.current > text.length) { - revealedFloat.current = text.length; - setRevealedInt(text.length); - } - - let lastTick = performance.now(); - let raf = 0; - let cancelled = false; - - const step = (now: number) => { - if (cancelled) return; - const dt = Math.max(0, (now - lastTick) / 1000); - lastTick = now; - const target = text.length; - const prev = revealedFloat.current; - if (prev < target) { - const backlog = target - prev; - const cps = Math.max(40, backlog / 0.4); - const next = Math.min(target, prev + cps * dt); - revealedFloat.current = next; - const nextInt = Math.floor(next); - setRevealedInt((cur) => (cur === nextInt ? cur : nextInt)); - } - raf = requestAnimationFrame(step); - }; - - raf = requestAnimationFrame(step); - return () => { - cancelled = true; - cancelAnimationFrame(raf); - }; - }, [text.length, active]); - - return text.slice(0, Math.min(revealedInt, text.length)); -} - -// --------------------------------------------------------------------------- -// Main component -// --------------------------------------------------------------------------- + AskInputsBlock, + CourtListenerBlock, + DocCreatedBlock, + DocDownloadBlock, + DocEditedBlock, + DocFindBlock, + DocReadBlock, + DocReplicatedBlock, + EventBlock, + ReasoningBlock, + WorkflowAppliedBlock, + type CourtListenerBlockItem, +} from "./message/EventBlocks"; interface Props { - content: string; events?: AssistantEvent[]; isStreaming?: boolean; isError?: boolean; /** Human-readable error text rendered alongside the red Mike icon. */ errorMessage?: string; - annotations?: CitationAnnotation[]; + citations?: Citation[]; citationStatus?: "started" | "partial" | "final"; - onCitationClick?: (citation: CitationAnnotation) => void; - onOpenCitationSource?: (citation: CitationAnnotation) => void; + onCitationClick?: (citation: Citation) => void; + onOpenCitationSource?: (citation: Citation) => void; onCaseClick?: ( citation: Extract<AssistantEvent, { type: "case_citation" }>, ) => void; minHeight?: string; onWorkflowClick?: (workflowId: string) => void; - onEditViewClick?: (ann: EditAnnotation, filename: string) => void; + onEditViewClick?: ( + ann: EditAnnotation, + filename: string, + changeNumber?: number, + ) => void; /** * Opens the editor panel for a document without auto-highlighting any * specific edit. Used by the download card click — opening a doc to @@ -1636,12 +99,11 @@ interface Props { } export function AssistantMessage({ - content: _content, events, isStreaming = false, isError = false, errorMessage, - annotations = [], + citations = [], citationStatus, onCitationClick, onOpenCitationSource, @@ -1657,7 +119,6 @@ export function AssistantMessage({ isEditReloading, resolvedEditStatuses, }: Props) { - const messageKey = useId(); const contentDivRef = useRef<HTMLDivElement | null>(null); const [isCopied, setIsCopied] = useState(false); // Per-document override of the download URL, set as Accept/Reject resolves @@ -1704,6 +165,7 @@ export function AssistantMessage({ const isRenderableEvent = (event: AssistantEvent) => event.type !== "error" && + event.type !== "ask_inputs_response" && event.type !== "case_citation" && event.type !== "case_opinions"; @@ -1742,9 +204,9 @@ export function AssistantMessage({ ); // Pre-process citations for all content events. Each [N] marker resolves - // to exactly one annotation (models are instructed to use shared refs + // to exactly one citation (models are instructed to use shared refs // only for cross-page continuations via the [[PAGE_BREAK]] sentinel). - const citationsList: CitationAnnotation[] = []; + const inlineCitationTargets: Citation[] = []; const caseCitations = new Map< string, Extract<AssistantEvent, { type: "case_citation" }> @@ -1767,14 +229,14 @@ export function AssistantMessage({ event.type === "content" ? preprocessCitations( i === lastContentIdx ? smoothedLastText : event.text, - annotations, - citationsList, + citations, + inlineCitationTargets, ) : "", ); } } - const handleOpenCitationSource = (citation: CitationAnnotation) => { + const handleOpenCitationSource = (citation: Citation) => { if (onOpenCitationSource) { onOpenCitationSource(citation); return; @@ -1787,12 +249,11 @@ export function AssistantMessage({ versionNumber: citation.version_number ?? null, }); }; - const canOpenCitationSource = (citation: CitationAnnotation) => + const canOpenCitationSource = (citation: Citation) => !!onOpenCitationSource || (citation.kind !== "case" && !!onOpenDocument); - const citationBlockList = citationStatus ? annotations : citationsList; const showCitationBlock = - !!citationStatus || (!isStreaming && citationsList.length > 0); + !!citationStatus || (!isStreaming && citations.length > 0); const handleCopy = async () => { try { let html = ""; @@ -1811,7 +272,7 @@ export function AssistantMessage({ html = clone.innerHTML; plainText = clone.textContent || ""; } - const appendix = buildCitationAppendix(citationBlockList); + const appendix = buildCitationAppendix(citations); html += appendix.html; plainText += appendix.text; const item = new ClipboardItem({ @@ -1867,6 +328,23 @@ export function AssistantMessage({ return false; }; + const askInputsResponseFor = (askInputsIdx: number) => { + if (!events) return undefined; + for (let i = askInputsIdx + 1; i < events.length; i++) { + const candidate = events[i]; + if (candidate.type === "ask_inputs") return undefined; + if (candidate.type === "ask_inputs_response") return candidate; + } + return undefined; + }; + + const hasPendingAskInput = (group: Extract<EventGroup, { kind: "pre" }>) => + group.events.some( + (event, index) => + event.type === "ask_inputs" && + !askInputsResponseFor(group.indices[index]), + ); + const renderEvent = ( event: AssistantEvent, i: number, @@ -1877,23 +355,6 @@ export function AssistantMessage({ const showConnector = nextEvent !== undefined && nextEvent.type !== "content"; - if (event.type === "content") { - const isLastContent = globalIdx === lastContentIdx; - const processed = processedTexts[globalIdx]; - return ( - <div key={globalIdx}> - <MarkdownContent - text={processed} - citationsList={citationsList} - caseCitations={caseCitations} - caseOpinions={caseOpinions} - onCitationClick={onCitationClick} - onCaseClick={onCaseClick} - divRef={isLastContent ? contentDivRef : undefined} - /> - </div> - ); - } if (event.type === "reasoning") { return ( <ReasoningBlock @@ -1906,32 +367,26 @@ export function AssistantMessage({ } if (event.type === "tool_call_start") { return ( - <div + <EventBlock key={globalIdx} - className="flex items-center text-sm font-serif text-gray-500 relative" + showConnector={showConnector} + isStreaming > - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - <div className="w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - <span className="font-medium ml-2"> + <span className="font-medium"> {toolCallLabel(event.name)} </span> - </div> + </EventBlock> ); } if (event.type === "thinking") { return ( - <div + <EventBlock key={globalIdx} - className="flex items-center text-sm font-serif text-gray-500 relative" + showConnector={showConnector} + isStreaming > - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> - )} - <div className="w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - <span className="ml-2">Thinking...</span> - </div> + <span>Thinking...</span> + </EventBlock> ); } if (event.type === "mcp_tool_call") { @@ -1940,37 +395,25 @@ export function AssistantMessage({ ? `${event.connector_name}: ${event.tool_name}` : toolCallLabel(event.openai_tool_name); return ( - <div + <EventBlock key={globalIdx} - className="flex items-start text-sm font-serif text-gray-500 relative" + showConnector={showConnector} + isStreaming={event.isStreaming} + dotColor={isError ? "red" : "gray"} > - {showConnector && ( - <div className="absolute bottom-0 w-[1px] bg-gray-300 top-[13px] left-[2.5px] h-[calc(100%+11px)]" /> + <span className="font-medium"> + {event.isStreaming ? "Using connector..." : label} + </span> + {isError && event.error && ( + <p className="mt-0.5 text-xs text-red-600"> + {event.error} + </p> )} - <div - className={ - event.isStreaming - ? "mt-[7px] h-1.5 w-1.5 shrink-0 animate-spin rounded-full border border-gray-400 border-t-transparent" - : isError - ? "mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" - : "mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400" - } - /> - <div className="ml-2 min-w-0"> - <span className="font-medium"> - {event.isStreaming ? "Using connector..." : label} - </span> - {isError && event.error && ( - <p className="mt-0.5 text-xs text-red-600"> - {event.error} - </p> - )} - </div> - </div> + </EventBlock> ); } if (event.type === "doc_read") { - const ann = annotations.find( + const ann = citations.find( (a) => a.kind !== "case" && a.filename === event.filename, ); return ( @@ -2049,6 +492,17 @@ export function AssistantMessage({ /> ); } + if (event.type === "ask_inputs") { + const response = askInputsResponseFor(globalIdx); + return ( + <AskInputsBlock + key={globalIdx} + event={event} + response={response} + showConnector={showConnector} + /> + ); + } if (event.type === "courtlistener_search_case_law") { const count = event.result_count ?? 0; const detail = event.isStreaming @@ -2286,7 +740,9 @@ export function AssistantMessage({ <div key={`c-${g.index}`}> <MarkdownContent text={processedTexts[g.index]} - citationsList={citationsList} + inlineCitationTargets={ + inlineCitationTargets + } caseCitations={caseCitations} caseOpinions={caseOpinions} onCitationClick={onCitationClick} @@ -2301,17 +757,24 @@ export function AssistantMessage({ ); } const subsequentContent = hasContentAfter(gIdx); - const wrapperIsStreaming = g.events.some( - (event) => - "isStreaming" in event && - !!event.isStreaming, - ); + const pendingAskInput = hasPendingAskInput(g); + const wrapperIsStreaming = + g.events.some( + (event) => + "isStreaming" in event && + !!event.isStreaming, + ) || pendingAskInput; return ( <PreResponseWrapper key={`p-${g.indices[0]}`} stepCount={g.events.length} - shouldMinimize={subsequentContent} + shouldMinimize={ + pendingAskInput + ? false + : subsequentContent + } isStreaming={wrapperIsStreaming} + forceOpen={pendingAskInput} > {g.events.map((event, i) => renderEvent( @@ -2363,29 +826,40 @@ export function AssistantMessage({ } } } + let cardIndex = 0; const cards = editedEvents.flatMap((e) => - e.annotations.map((ann) => ( - <EditCard - key={`editcard-${ann.edit_id}`} - annotation={ann} - resolvedStatus={ - resolvedEditStatuses?.[ - ann.edit_id - ] - } - isReloading={ - isEditReloading?.( - ann.edit_id, - ) ?? false - } - onViewClick={(a) => - onEditViewClick?.(a, e.filename) - } - onResolveStart={onEditResolveStart} - onResolved={handleEditResolved} - onError={onEditError} - /> - )), + e.annotations.map((ann) => { + const changeNumber = ++cardIndex; + return ( + <EditCard + key={`editcard-${ann.edit_id}`} + annotation={ann} + changeNumber={changeNumber} + resolvedStatus={ + resolvedEditStatuses?.[ + ann.edit_id + ] + } + isReloading={ + isEditReloading?.( + ann.edit_id, + ) ?? false + } + onViewClick={(a) => + onEditViewClick?.( + a, + e.filename, + changeNumber, + ) + } + onResolveStart={ + onEditResolveStart + } + onResolved={handleEditResolved} + onError={onEditError} + /> + ); + }), ); const resolvedCount = editedEvents.reduce( (acc, e) => @@ -2537,7 +1011,7 @@ export function AssistantMessage({ {showCitationBlock && ( <CitationsBlock - citationsList={citationBlockList} + citations={citations} onCitationClick={onCitationClick} onOpenSource={handleOpenCitationSource} canOpenSource={canOpenCitationSource} @@ -2550,7 +1024,7 @@ export function AssistantMessage({ )} {/* Copy button */} - <div className="flex items-center gap-2 pt-2 pb-4 md:pb-8 font-sans justify-start"> + <div className="flex items-center gap-2 py-2 font-sans justify-start"> {!isStreaming && ( <button className="p-1.5 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100" diff --git a/frontend/src/app/components/assistant/AssistantSidePanel.tsx b/frontend/src/app/components/assistant/AssistantSidePanel.tsx index 639ab09..2570dcf 100644 --- a/frontend/src/app/components/assistant/AssistantSidePanel.tsx +++ b/frontend/src/app/components/assistant/AssistantSidePanel.tsx @@ -8,9 +8,9 @@ import { type CSSProperties, } from "react"; import { X } from "lucide-react"; -import { DocPanel, type DocPanelMode } from "../shared/DocPanel"; +import { DocPanel, type DocPanelMode } from "./DocPanel"; import type { - CitationAnnotation, + Citation, EditAnnotation, } from "../shared/types"; import { @@ -45,12 +45,13 @@ export type DocumentTab = CommonTab & { kind: "document" }; export type CitationTab = CommonTab & { kind: "citation"; - citation: CitationAnnotation; + citation: Citation; }; export type EditTab = CommonTab & { kind: "edit"; edit: EditAnnotation; + changeNumber?: number; }; export type AssistantSidePanelTab = @@ -307,6 +308,7 @@ export function AssistantSidePanel({ ? { kind: "edit", edit: tab.edit, + changeNumber: tab.changeNumber, isEditReloading: isEditReloading?.(tab.edit.edit_id) ?? false, diff --git a/frontend/src/app/components/assistant/CaseLawPanel.tsx b/frontend/src/app/components/assistant/CaseLawPanel.tsx index 28d8aea..51a04ee 100644 --- a/frontend/src/app/components/assistant/CaseLawPanel.tsx +++ b/frontend/src/app/components/assistant/CaseLawPanel.tsx @@ -18,11 +18,11 @@ import type { CaseCitationQuote } from "../shared/types"; import { clearDocxQuoteHighlights, highlightDocxQuote, -} from "../shared/highlightDocxQuote"; +} from "../shared/views/highlightDocxQuote"; import { - RelevantQuotes, - type RelevantQuoteItem, -} from "../shared/RelevantQuotes"; + CitationQuotesHeader, + type CitationQuoteHeaderItem, +} from "./CitationQuotesHeader"; import { getCourtlistenerOpinions, type CaseLawOpinion, @@ -292,7 +292,7 @@ export function CaseLawPanel({ Math.max(relevantQuotes.length - 1, 0), ) : 0; - const relevantQuoteItems: RelevantQuoteItem[] = relevantQuotes.map( + const relevantQuoteItems: CitationQuoteHeaderItem[] = relevantQuotes.map( (quote, index) => ({ id: relevantQuoteKey(quote, index), quote: quote.quote, @@ -432,7 +432,7 @@ export function CaseLawPanel({ </div> </div> {relevantQuoteItems.length > 0 && ( - <RelevantQuotes + <CitationQuotesHeader quotes={relevantQuoteItems} activeQuoteId={activeQuoteKey} currentIndex={currentQuoteIndex} diff --git a/frontend/src/app/components/assistant/ChatInput.tsx b/frontend/src/app/components/assistant/ChatInput.tsx index e6ded8e..e7739da 100644 --- a/frontend/src/app/components/assistant/ChatInput.tsx +++ b/frontend/src/app/components/assistant/ChatInput.tsx @@ -11,17 +11,16 @@ import { import { ArrowRight, Check, - File, - FileText, FolderOpen, Library, Square, X, } from "lucide-react"; import { AddDocButton } from "./AddDocButton"; -import { AddDocumentsModal } from "../shared/AddDocumentsModal"; +import { FileTypeIcon } from "../shared/FileTypeIcon"; +import { AddDocumentsModal } from "../modals/AddDocumentsModal"; import { AssistantWorkflowModal } from "./AssistantWorkflowModal"; -import { ApiKeyMissingModal } from "../shared/ApiKeyMissingModal"; +import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; import { ModelToggle } from "./ModelToggle"; import { useSelectedModel } from "@/app/hooks/useSelectedModel"; import { useUserProfile } from "@/contexts/UserProfileContext"; @@ -193,18 +192,15 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( </div> )} {attachedDocs.map((doc) => { - const ft = doc.file_type?.toLowerCase(); - const isPdf = ft === "pdf"; return ( <div key={doc.id} className="inline-flex items-center gap-1 rounded-[10px] border border-white/70 bg-white py-0.5 pl-2 pr-1 text-xs text-gray-800 shadow-[0_2px_6px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-xl" > - {isPdf ? ( - <FileText className="h-2.5 w-2.5 shrink-0 text-red-500" /> - ) : ( - <File className="h-2.5 w-2.5 shrink-0 text-blue-500" /> - )} + <FileTypeIcon + fileType={doc.file_type} + className="h-2.5 w-2.5" + /> <span className="max-w-[140px] truncate"> {doc.filename} </span> @@ -348,7 +344,7 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( projectName={projectName} projectCmNumber={projectCmNumber} /> - <ApiKeyMissingModal + <ApiKeyMissingPopup open={apiKeyModalProvider !== null} provider={apiKeyModalProvider} onClose={() => setApiKeyModalProvider(null)} diff --git a/frontend/src/app/components/assistant/ChatView.tsx b/frontend/src/app/components/assistant/ChatView.tsx index 5c4a577..f49e7e4 100644 --- a/frontend/src/app/components/assistant/ChatView.tsx +++ b/frontend/src/app/components/assistant/ChatView.tsx @@ -6,6 +6,8 @@ import { ArrowDown } from "lucide-react"; import { UserMessage } from "./UserMessage"; import { AssistantMessage } from "./AssistantMessage"; import { ChatInput } from "./ChatInput"; +import type { ChatInputHandle } from "./ChatInput"; +import { AskInputPopup } from "./AskInputPopup"; import { AssistantSidePanel, type AssistantSidePanelTab, @@ -13,24 +15,35 @@ import { import { AssistantWorkflowModal } from "./AssistantWorkflowModal"; import type { AssistantEvent, - CitationAnnotation, + Citation, EditAnnotation, Message, } from "../shared/types"; import { useSidebar } from "@/app/contexts/SidebarContext"; import { invalidateDocxBytes } from "@/app/hooks/useFetchDocxBytes"; -import { cn } from "@/lib/utils"; interface Props { chatId?: string | null; messages: Message[]; isResponseLoading: boolean; - handleChat: (message: Message) => Promise<string | null>; + handleChat: ( + message: Message, + opts?: { + displayedDoc?: { filename: string; documentId: string } | null; + askInputsResponse?: Extract< + AssistantEvent, + { type: "ask_inputs_response" } + >; + }, + ) => Promise<string | null>; cancel: () => void; } const ASSISTANT_PANEL_TRANSITION_MS = 500; const MOBILE_BREAKPOINT_PX = 768; +const DEFAULT_ASSISTANT_BOTTOM_PADDING = 116; +const SCROLL_BUTTON_INPUT_GAP = 16; +const CHAT_INPUT_BOTTOM_OFFSET = 12; function isSmallScreen() { return ( @@ -54,6 +67,9 @@ export function ChatView({ const [workflowModalInitialId, setWorkflowModalInitialId] = useState< string | undefined >(); + const [hiddenAskInputKeys, setHiddenAskInputKeys] = useState<Set<string>>( + () => new Set(), + ); const [reloadingDocIds, setReloadingDocIds] = useState<Set<string>>( () => new Set(), ); @@ -66,6 +82,10 @@ export function ChatView({ const { setSidebarOpen } = useSidebar(); const panelCloseTimerRef = useRef<number | null>(null); + useEffect(() => { + setHiddenAskInputKeys(new Set()); + }, [chatId]); + const showPanel = useCallback(() => { if (panelCloseTimerRef.current !== null) { window.clearTimeout(panelCloseTimerRef.current); @@ -199,7 +219,7 @@ export function ChatView({ * AssistantMessage when the user clicks a numbered citation pill. */ const openCitation = useCallback( - (citation: CitationAnnotation, options?: { showQuotes?: boolean }) => { + (citation: Citation, options?: { showQuotes?: boolean }) => { const showQuotes = options?.showQuotes ?? true; if (citation.kind === "case") { if (!chatId) return; @@ -270,7 +290,7 @@ export function ChatView({ * AssistantMessage when the user clicks an EditCard's View button. */ const openEditor = useCallback( - (ann: EditAnnotation, filename: string) => { + (ann: EditAnnotation, filename: string, changeNumber?: number) => { upsertTab({ kind: "edit", id: ann.document_id, @@ -279,6 +299,7 @@ export function ChatView({ versionId: ann.version_id ?? null, versionNumber: ann.version_number ?? null, edit: ann, + changeNumber, }); }, [upsertTab], @@ -450,7 +471,8 @@ export function ChatView({ const messagesContainerRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null); const latestUserMessageRef = useRef<HTMLDivElement>(null); - const chatInputRef = useRef<HTMLDivElement>(null); + const chatInputRef = useRef<ChatInputHandle | null>(null); + const measuredInputRef = useRef<HTMLDivElement>(null); // Seed "already in place" when messages exist at mount (a freshly created // chat arrives with its first message in hand). Otherwise the skeleton + // opacity-0 gate would flash the message out and fade it back in on every @@ -465,28 +487,26 @@ export function ChatView({ const [minHeight, setMinHeight] = useState("0px"); useEffect(() => { - const el = chatInputRef.current; + const el = measuredInputRef.current; if (!el) return; - const observer = new ResizeObserver(() => - setInputHeight(el.offsetHeight), - ); + const update = () => setInputHeight(el.offsetHeight); + const observer = new ResizeObserver(update); observer.observe(el); - setInputHeight(el.offsetHeight); + update(); return () => observer.disconnect(); }, []); useEffect(() => { if (latestUserMessageRef.current) { const headerHeight = window.innerWidth < 768 ? 56 : 0; - const gap = window.innerWidth < 768 ? 16 : 24; - const paddingBottom = 128; - const marginBottom = 48; + const messageGap = window.innerWidth < 768 ? 24 : 32; + const paddingBottom = DEFAULT_ASSISTANT_BOTTOM_PADDING; const userMessageHeight = latestUserMessageRef.current.offsetHeight; setMinHeight( - `calc(100dvh - ${headerHeight + gap + userMessageHeight + paddingBottom + marginBottom}px)`, + `calc(100dvh - ${headerHeight + messageGap * 3 + userMessageHeight + paddingBottom}px)`, ); } - }, [messages.length, latestUserMessageRef.current]); // eslint-disable-line react-hooks/exhaustive-deps + }, [messages.length]); // eslint-disable-line react-hooks/exhaustive-deps const updateScrollButton = useCallback(() => { const c = messagesContainerRef.current; @@ -573,6 +593,41 @@ export function ChatView({ }; }, [panelMounted]); + const rawActiveInput = (() => { + for ( + let messageIndex = messages.length - 1; + messageIndex >= 0; + messageIndex-- + ) { + const message = messages[messageIndex]; + if (message.role === "user") return null; + if (message.role !== "assistant" || !message.events) continue; + for ( + let eventIndex = message.events.length - 1; + eventIndex >= 0; + eventIndex-- + ) { + const event = message.events[eventIndex]; + if (event.type === "ask_inputs_response") { + return null; + } + if (event.type === "ask_inputs") { + return { + key: `${messageIndex}-${eventIndex}`, + event, + }; + } + } + } + return null; + })(); + const activeInput = + rawActiveInput && !hiddenAskInputKeys.has(rawActiveInput.key) + ? rawActiveInput + : null; + + const messagesBottomPadding = DEFAULT_ASSISTANT_BOTTOM_PADDING; + return ( <div className="h-full w-full flex relative"> {/* Chat column */} @@ -583,9 +638,12 @@ export function ChatView({ className="flex-1 w-full overflow-y-auto" style={{ scrollbarGutter: "stable both-edges" }} > - <div className="w-full max-w-4xl mx-auto pb-32 px-6 md:px-8 pt-4 md:pt-6 min-h-full flex flex-col relative"> + <div + className="w-full max-w-4xl mx-auto px-6 pt-6 md:px-8 md:pt-8 min-h-full flex flex-col relative" + style={{ paddingBottom: messagesBottomPadding }} + > {!messagesVisible && ( - <div className="space-y-6 w-full"> + <div className="space-y-6 md:space-y-8 w-full"> <div className="flex justify-end"> <div className="bg-gray-100 rounded-2xl p-4 w-2/5"> <div className="h-4 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] animate-[shimmer_2s_ease-in-out_infinite] rounded w-full" /> @@ -602,7 +660,7 @@ export function ChatView({ </div> )} <div - className="space-y-6 transition-opacity duration-150" + className="space-y-6 md:space-y-8 transition-opacity duration-150" style={{ opacity: messagesVisible ? 1 : 0 }} > {(() => { @@ -629,7 +687,6 @@ export function ChatView({ /> ) : ( <AssistantMessage - content={msg.content ?? ""} events={msg.events} isStreaming={ i === messages.length - 1 && @@ -642,7 +699,7 @@ export function ChatView({ ? (msg as any).error : undefined } - annotations={msg.annotations} + citations={msg.citations} citationStatus={ msg.citationStatus } @@ -702,14 +759,16 @@ export function ChatView({ {showScrollButton && ( <div className="absolute left-1/2 -translate-x-1/2 z-19" - style={{ bottom: inputHeight + 12 }} + style={{ + bottom: + inputHeight + + CHAT_INPUT_BOTTOM_OFFSET + + SCROLL_BUTTON_INPUT_GAP, + }} > <button onClick={scrollToBottom} - className={cn( - "rounded-full p-2 cursor-pointer transition-all", - "bg-white/30 shadow-[0_5px_16px_rgba(15,23,42,0.13),inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-8px_18px_rgba(255,255,255,0.26)] backdrop-blur-xl hover:bg-white/45 hover:shadow-[0_7px_20px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.85),inset_0_-8px_18px_rgba(255,255,255,0.32)]", - )} + className="rounded-full p-2 cursor-pointer transition-all bg-white/30 shadow-[0_5px_16px_rgba(15,23,42,0.13),inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-8px_18px_rgba(255,255,255,0.26)] backdrop-blur-xl hover:bg-white/45 hover:shadow-[0_7px_20px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.85),inset_0_-8px_18px_rgba(255,255,255,0.32)]" > <ArrowDown className="h-6 w-6 text-gray-500" /> </button> @@ -717,34 +776,51 @@ export function ChatView({ )} {/* Chat input */} - <div - ref={chatInputRef} - className="absolute bottom-0 left-0 right-0 w-full z-30" - > + <div className="absolute bottom-3 left-0 right-0 w-full z-30"> + <div className="pointer-events-none absolute -bottom-3 left-0 right-0 z-0"> + <div className="mx-auto h-7 w-full max-w-4xl px-4 md:px-6"> + <div className="h-full rounded-t-[20px] bg-white/50 backdrop-blur-[1px]" /> + </div> + </div> <div - className={cn( - "pointer-events-none absolute bottom-0 left-0 z-0", - "right-4 h-28 bg-gradient-to-t from-white/50 via-white/25 to-transparent backdrop-blur-[1px]", - )} - /> - <div className="relative z-20 w-full max-w-4xl mx-auto px-4 md:px-6"> - <div - className={cn( - "w-full rounded-t-[20px]", - "bg-transparent", + ref={measuredInputRef} + className="relative z-20 w-full max-w-4xl mx-auto px-4 md:px-6" + > + <div className="w-full rounded-t-[20px] bg-transparent"> + {activeInput ? ( + <AskInputPopup + key={activeInput.key} + event={activeInput.event} + onSubmit={(response, content, files) => { + setHiddenAskInputKeys((prev) => { + const next = new Set(prev); + next.add(activeInput.key); + return next; + }); + void handleChat( + { role: "user", content, files }, + { + askInputsResponse: response, + }, + ); + }} + onDismiss={() => { + setHiddenAskInputKeys((prev) => { + const next = new Set(prev); + next.add(activeInput.key); + return next; + }); + cancel(); + }} + /> + ) : ( + <ChatInput + ref={chatInputRef} + onSubmit={handleChat} + onCancel={cancel} + isLoading={isResponseLoading} + /> )} - > - <ChatInput - onSubmit={handleChat} - onCancel={cancel} - isLoading={isResponseLoading} - /> - <div className="py-3 text-center"> - <p className="text-xs text-gray-500"> - AI can make mistakes. Answers are not legal - advice. - </p> - </div> </div> </div> </div> diff --git a/frontend/src/app/components/assistant/EditCard.tsx b/frontend/src/app/components/assistant/EditCard.tsx index ddee3ab..2deee0c 100644 --- a/frontend/src/app/components/assistant/EditCard.tsx +++ b/frontend/src/app/components/assistant/EditCard.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { supabase } from "@/lib/supabase"; +import { PillButton } from "@/components/ui/pill-button"; import type { EditAnnotation } from "../shared/types"; function normalizeText(s: string) { @@ -131,6 +132,7 @@ export function applyOptimisticResolution( interface Props { annotation: EditAnnotation; + changeNumber?: number; /** * External override for this edit's status. When set, takes * precedence over the annotation's DB status and the card's own @@ -183,6 +185,7 @@ interface Props { */ export function EditCard({ annotation, + changeNumber, resolvedStatus, isReloading, onViewClick, @@ -275,13 +278,16 @@ export function EditCard({ }; return ( - <div className="border border-gray-200 rounded-lg p-3 bg-gray-50"> + <div className="rounded-xl bg-white shadow-[0_3px_9px_rgba(15,23,42,0.1),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-2xl p-3"> + {changeNumber !== undefined && ( + <p className="text-xs text-gray-400 mb-1.5">{changeNumber}</p> + )} {annotation.reason && ( <p className="text-xs text-gray-500 mb-2"> {annotation.reason} </p> )} - <div className="text-sm leading-relaxed font-serif bg-white border border-gray-200 rounded-md px-2 py-2"> + <div className="text-sm leading-relaxed font-serif bg-gray-100/70 rounded-lg px-2 py-2"> {annotation.inserted_text && ( <span className="text-green-700"> {annotation.inserted_text} @@ -294,22 +300,26 @@ export function EditCard({ )} </div> <div className="flex gap-2 mt-3"> - <button + <PillButton + tone="black" + size="sm" onClick={() => handle("accept")} disabled={inFlight || resolved} - className="px-2 py-1 text-xs rounded border border-gray-900 bg-gray-900 text-white hover:bg-gray-800 disabled:opacity-50" > {status === "accepted" ? "Accepted" : "Accept"} - </button> - <button + </PillButton> + <PillButton + tone="white" + size="sm" onClick={() => handle("reject")} disabled={inFlight || resolved} - className="px-2 py-1 text-xs rounded border border-gray-200 bg-white text-gray-700 hover:bg-gray-100 disabled:opacity-50" > {status === "rejected" ? "Rejected" : "Reject"} - </button> + </PillButton> {onViewClick && ( - <button + <PillButton + tone="blue" + size="sm" onClick={() => onViewClick(annotation)} disabled={resolved} title={ @@ -317,10 +327,10 @@ export function EditCard({ ? "This change has been resolved and is no longer in the document." : undefined } - className="ml-auto px-2 py-1 text-xs rounded border border-gray-200 bg-white text-gray-700 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white" + className="ml-auto" > View - </button> + </PillButton> )} </div> </div> diff --git a/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx b/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx index 0c8bd94..b6ef660 100644 --- a/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx +++ b/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx @@ -4,8 +4,7 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { useDirectoryData } from "../shared/useDirectoryData"; -import { ProjectPicker } from "../shared/ProjectPicker"; -import { Modal } from "../shared/Modal"; +import { ProjectPickerModal } from "../modals/ProjectPickerModal"; interface Props { open: boolean; @@ -40,22 +39,19 @@ export function SelectAssistantProjectModal({ open, onClose }: Props) { } return ( - <Modal + <ProjectPickerModal open={open} onClose={onClose} breadcrumbs={["Assistant", "Start Chat in a Project"]} + projects={projects} + loading={loading} + selectedId={selectedId} + onSelect={setSelectedId} primaryAction={{ label: creating ? "Creating…" : "Continue", onClick: handleContinue, disabled: !selectedId || creating, }} - > - <ProjectPicker - projects={projects} - loading={loading} - selectedId={selectedId} - onSelect={setSelectedId} - /> - </Modal> + /> ); } diff --git a/frontend/src/app/components/assistant/UserMessage.tsx b/frontend/src/app/components/assistant/UserMessage.tsx index 5f312f7..f6381df 100644 --- a/frontend/src/app/components/assistant/UserMessage.tsx +++ b/frontend/src/app/components/assistant/UserMessage.tsx @@ -1,6 +1,7 @@ "use client"; -import { File, FileText, Library } from "lucide-react"; +import { Library } from "lucide-react"; +import { FileTypeIcon } from "../shared/FileTypeIcon"; interface Props { content: string; @@ -23,22 +24,15 @@ export function UserMessage({ content, files, workflow }: Props) { <span className="max-w-[140px] truncate">{workflow.title}</span> </div> )} - {hasFiles && files.map((f, i) => { - const ext = f.filename.split(".").pop()?.toLowerCase(); - const isPdf = ext === "pdf"; - return ( - <div - key={i} - className="inline-flex items-center gap-1 rounded-[10px] border border-white/70 bg-white py-0.5 pl-2 pr-2.5 text-xs text-gray-800 shadow-[0_2px_6px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-xl" - > - {isPdf - ? <FileText className="h-2.5 w-2.5 shrink-0 text-red-500" /> - : <File className="h-2.5 w-2.5 shrink-0 text-blue-500" /> - } - <span className="max-w-[140px] truncate">{f.filename}</span> - </div> - ); - })} + {hasFiles && files.map((f, i) => ( + <div + key={i} + className="inline-flex items-center gap-1 rounded-[10px] border border-white/70 bg-white py-0.5 pl-2 pr-2.5 text-xs text-gray-800 shadow-[0_2px_6px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-xl" + > + <FileTypeIcon fileType={f.filename} className="h-2.5 w-2.5" /> + <span className="max-w-[140px] truncate">{f.filename}</span> + </div> + ))} </div> )} </div> diff --git a/frontend/src/app/components/modals/credits-exhausted-modal.tsx b/frontend/src/app/components/modals/credits-exhausted-modal.tsx deleted file mode 100644 index 767761d..0000000 --- a/frontend/src/app/components/modals/credits-exhausted-modal.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { X } from "lucide-react"; -import { createPortal } from "react-dom"; - -interface CreditsExhaustedModalProps { - isOpen: boolean; - onClose: () => void; - resetDate: string; -} - -export function CreditsExhaustedModal({ - isOpen, - onClose, - resetDate, -}: CreditsExhaustedModalProps) { - if (!isOpen) return null; - - // Format the reset date - const formatResetDate = (dateString: string) => { - const date = new Date(dateString); - return date.toLocaleDateString("en-US", { - month: "long", - day: "numeric", - year: "numeric", - }); - }; - - return createPortal( - <> - {/* Backdrop */} - <div - className="fixed inset-0 bg-black/50 z-[200]" - onClick={onClose} - /> - - {/* Modal */} - <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[201] w-full max-w-md px-4"> - <div className="relative bg-white rounded-2xl shadow-2xl p-6"> - {/* Header */} - <div className="flex items-start justify-between mb-4"> - <h2 className="text-3xl font-light font-eb-garamond text-gray-900"> - Message Limit Reached - </h2> - </div> - - {/* Content */} - <div className="space-y-4"> - <p className="text-gray-600"> - You've reached your monthly message limit of 100 - messages. - </p> - - <div className="bg-blue-50 border border-blue-200 rounded-lg p-4"> - <p className="text-sm text-blue-900 font-medium mb-1"> - Your credits will reset on: - </p> - <p className="text-lg font-semibold text-blue-700"> - {formatResetDate(resetDate)} - </p> - </div> - - <p className="text-sm text-gray-500"> - Your message credits automatically reset on the - first day of each month. - </p> - </div> - - {/* Actions */} - <div className="mt-6 flex gap-3"> - <button - onClick={onClose} - className="flex-1 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-medium transition-colors" - > - Close - </button> - </div> - </div> - </div> - </>, - document.body, - ); -} diff --git a/frontend/src/app/components/modals/delete-chats-modal.tsx b/frontend/src/app/components/modals/delete-chats-modal.tsx deleted file mode 100644 index 5b6671f..0000000 --- a/frontend/src/app/components/modals/delete-chats-modal.tsx +++ /dev/null @@ -1,97 +0,0 @@ -"use client"; - -import { Button } from "@/components/ui/button"; -import { X, Check } from "lucide-react"; - -interface DeleteChatsModalProps { - isOpen: boolean; - onClose: () => void; - onConfirm: () => void; - chatCount: number; - isDeleting: boolean; - isSuccess?: boolean; -} - -export function DeleteChatsModal({ - isOpen, - onClose, - onConfirm, - chatCount, - isDeleting, - isSuccess = false, -}: DeleteChatsModalProps) { - if (!isOpen) return null; - - return ( - <> - {/* Backdrop */} - <div - className="fixed inset-0 bg-black/50 z-199" - onClick={isDeleting || isSuccess ? undefined : onClose} - /> - - {/* Modal */} - <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-200 w-full max-w-md"> - <div className="bg-white rounded-2xl shadow-2xl p-8"> - {isSuccess ? ( - <> - {/* Success State */} - <div className="text-center"> - <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"> - <Check className="h-8 w-8 text-green-600" /> - </div> - <h2 className="text-3xl font-light font-eb-garamond text-gray-900 mb-2"> - All Chats Deleted - </h2> - <p className="text-gray-600 text-sm"> - Your chat history has been successfully - deleted. - </p> - </div> - </> - ) : ( - <> - {/* Header */} - <div className="flex items-center justify-between mb-6"> - <h2 className="text-4xl font-light font-eb-garamond text-red-700"> - Delete All Chats - </h2> - </div> - - {/* Content */} - <div className="space-y-4"> - <p className="text-gray-600 text-sm leading-relaxed"> - Are you sure you want to delete all{" "} - {chatCount} chat - {chatCount !== 1 ? "s" : ""}? This action is - permanent and cannot be undone. - </p> - - <div className="space-y-3 pt-4"> - <Button - onClick={onConfirm} - disabled={isDeleting} - variant="destructive" - className="w-full bg-red-600 hover:bg-red-700 text-white" - > - {isDeleting - ? "Deleting..." - : "Delete All Chats"} - </Button> - <Button - onClick={onClose} - variant="outline" - disabled={isDeleting} - className="w-full border-gray-300 text-gray-700 hover:bg-gray-50" - > - Cancel - </Button> - </div> - </div> - </> - )} - </div> - </div> - </> - ); -} diff --git a/frontend/src/app/components/modals/simple-link-dialog.tsx b/frontend/src/app/components/modals/simple-link-dialog.tsx deleted file mode 100644 index d3288a9..0000000 --- a/frontend/src/app/components/modals/simple-link-dialog.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { X, Link2, Check } from "lucide-react"; -import { useState } from "react"; -import { createPortal } from "react-dom"; - -interface SimpleLinkDialogProps { - isOpen: boolean; - onClose: () => void; - shareUrl: string | null; -} - -export function SimpleLinkDialog({ - isOpen, - onClose, - shareUrl, -}: SimpleLinkDialogProps) { - const [linkCopied, setLinkCopied] = useState(false); - - if (!isOpen) return null; - - const handleCopyLink = async () => { - if (!shareUrl) return; - try { - await navigator.clipboard.writeText(shareUrl); - setLinkCopied(true); - setTimeout(() => setLinkCopied(false), 2000); - } catch (err) {} - }; - - return createPortal( - <> - {/* Backdrop */} - <div - className="fixed inset-0 bg-black/50 z-[199]" - onClick={onClose} - /> - - {/* Dialog */} - <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[200] w-full max-w-md px-4"> - <div className="relative bg-white rounded-2xl shadow-2xl p-6"> - {/* Close Button */} - <button - onClick={onClose} - className="absolute right-4 top-4 text-gray-400 hover:text-gray-600 transition-colors" - > - <X className="h-5 w-5" /> - </button> - - {/* Header */} - <div className="flex items-center justify-between mb-6"> - <h2 className="text-3xl font-light font-eb-garamond text-gray-900"> - Share Chat - </h2> - </div> - - {/* Content */} - <div className="space-y-4"> - {/* Link display */} - <div className="bg-gray-50 rounded-lg p-3 border border-gray-200"> - <p className="text-sm text-gray-600 mb-2 font-medium"> - Share Link - </p> - <p className="text-sm text-gray-800 break-all font-mono"> - {shareUrl} - </p> - </div> - - {/* Copy button */} - <button - onClick={handleCopyLink} - className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white py-2.5 px-4 rounded-lg transition-colors font-medium" - > - {linkCopied ? ( - <> - <Check className="h-5 w-5" /> - Copied! - </> - ) : ( - <> - <Link2 className="h-5 w-5" /> - Copy Link - </> - )} - </button> - </div> - </div> - </div> - </>, - document.body, - ); -} diff --git a/frontend/src/app/components/projects/DocumentSidePanel.tsx b/frontend/src/app/components/projects/DocumentSidePanel.tsx index 2866734..4126e8e 100644 --- a/frontend/src/app/components/projects/DocumentSidePanel.tsx +++ b/frontend/src/app/components/projects/DocumentSidePanel.tsx @@ -12,10 +12,12 @@ import { Upload, X, } from "lucide-react"; -import { ConfirmPopup } from "@/app/components/shared/ConfirmPopup"; -import { DocView } from "@/app/components/shared/DocView"; -import { WarningPopup } from "@/app/components/shared/WarningPopup"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; +import { PdfView } from "@/app/components/shared/views/PdfView"; +import { SpreadsheetView } from "@/app/components/shared/views/SpreadsheetView"; +import { WarningPopup } from "@/app/components/popups/WarningPopup"; import type { Document } from "@/app/components/shared/types"; +import { isSpreadsheetFilename } from "@/app/components/shared/types"; import type { DocumentVersion } from "@/app/lib/mikeApi"; import { cn } from "@/lib/utils"; import { formatBytes } from "./ProjectPageParts"; @@ -163,7 +165,7 @@ export function DocumentSidePanel({ const activeDoc = doc; const documentId = activeDoc.id; - const newVersionAccept = ".pdf,.docx,.doc"; + const newVersionAccept = ".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt"; const orderedVersions = [...versions].reverse(); const activeVersionCount = versions.filter( (version) => version.deleted_at == null, @@ -481,15 +483,25 @@ export function DocumentSidePanel({ "rounded-xl border border-gray-200 bg-white/55 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] backdrop-blur-xl", )} > - <DocView - key={`${selectedVersionId ?? "current"}:${selectedUploadedAt ?? ""}:${selectedSizeBytes ?? ""}`} - doc={{ - document_id: doc.id, - version_id: selectedVersionId, - }} - rounded={false} - bordered={false} - /> + {isSpreadsheetFilename(selectedFilename) ? ( + <SpreadsheetView + key={`${selectedVersionId ?? "current"}:${selectedUploadedAt ?? ""}:${selectedSizeBytes ?? ""}`} + documentId={doc.id} + versionId={selectedVersionId} + rounded={false} + bordered={false} + /> + ) : ( + <PdfView + key={`${selectedVersionId ?? "current"}:${selectedUploadedAt ?? ""}:${selectedSizeBytes ?? ""}`} + doc={{ + document_id: doc.id, + version_id: selectedVersionId, + }} + rounded={false} + bordered={false} + /> + )} </div> </section> diff --git a/frontend/src/app/components/projects/NewProjectModal.tsx b/frontend/src/app/components/projects/NewProjectModal.tsx index cc2a76e..f23aa08 100644 --- a/frontend/src/app/components/projects/NewProjectModal.tsx +++ b/frontend/src/app/components/projects/NewProjectModal.tsx @@ -1,7 +1,7 @@ "use client"; import { useRef, useState } from "react"; -import { Users, Upload } from "lucide-react"; +import { Upload, User, X } from "lucide-react"; import { addDocumentToProject, createProject, @@ -9,10 +9,14 @@ import { } from "@/app/lib/mikeApi"; import { useDirectoryData } from "../shared/useDirectoryData"; import { FileDirectory } from "../shared/FileDirectory"; -import { EmailPillInput } from "../shared/EmailPillInput"; +import { AddUserInput } from "../shared/AddUserInput"; import type { Project } from "../shared/types"; +import type { UserLookupResult } from "@/app/lib/mikeApi"; import { useAuth } from "@/contexts/AuthContext"; -import { Modal } from "../shared/Modal"; +import { Modal } from "../modals/Modal"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; +import { ModalTextInput } from "../modals/ModalTextInput"; +import { ProjectPracticeField } from "./ProjectPracticeField"; interface Props { open: boolean; @@ -21,10 +25,11 @@ interface Props { } export function NewProjectModal({ open, onClose, onCreated }: Props) { + const [step, setStep] = useState<"details" | "documents">("details"); const [name, setName] = useState(""); const [cmNumber, setCmNumber] = useState(""); - const [sharedEmails, setSharedEmails] = useState<string[]>([]); - const [showMembers, setShowMembers] = useState(false); + const [practice, setPractice] = useState(""); + const [sharedUsers, setSharedUsers] = useState<UserLookupResult[]>([]); const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>(new Set()); const [pendingFiles, setPendingFiles] = useState<File[]>([]); const [loading, setLoading] = useState(false); @@ -38,6 +43,14 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { if (!open) return null; + function submitterValue(e: React.FormEvent<HTMLFormElement>) { + return ( + (e.nativeEvent as SubmitEvent).submitter as + | HTMLButtonElement + | null + )?.value; + } + function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) { const files = Array.from(e.target.files ?? []); e.target.value = ""; @@ -45,18 +58,27 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { setPendingFiles((prev) => [...prev, ...files.filter((f) => !prev.some((p) => p.name === f.name))]); } - async function handleSubmit(e: React.FormEvent) { + async function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault(); if (!name.trim()) return; + if (step === "details" || submitterValue(e) !== "create-project") { + setStep("documents"); + return; + } setLoading(true); setError(""); try { const project = await createProject( name.trim(), cmNumber.trim() || undefined, + practice.trim() && practice.trim() !== "Other" + ? practice.trim() + : undefined, ownEmail - ? sharedEmails.filter((email) => email !== ownEmail) - : sharedEmails, + ? sharedUsers + .map((user) => user.email) + .filter((email) => email !== ownEmail) + : sharedUsers.map((user) => user.email), ); await Promise.all([ ...[...selectedDocIds].map((id) => addDocumentToProject(project.id, id).catch(() => {})), @@ -73,10 +95,11 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { } function resetForm() { + setStep("details"); setName(""); setCmNumber(""); - setSharedEmails([]); - setShowMembers(false); + setPractice(""); + setSharedUsers([]); setSelectedDocIds(new Set()); setPendingFiles([]); setError(""); @@ -87,22 +110,88 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { onClose(); } + function validateShareUser(email: string) { + if (ownEmail && email === ownEmail) { + return "You cannot share a project with yourself."; + } + if ( + sharedUsers.some( + (user) => user.email.trim().toLowerCase() === email, + ) + ) { + return `${email} already has access.`; + } + return null; + } + + function handleAddShareUser(user: UserLookupResult) { + setSharedUsers((prev) => [ + ...prev, + { + ...user, + email: user.email.trim().toLowerCase(), + }, + ]); + } + + function handleRemoveShareUser(email: string) { + setSharedUsers((prev) => + prev.filter( + (user) => + user.email.trim().toLowerCase() !== + email.trim().toLowerCase(), + ), + ); + } + return ( <Modal open={open} onClose={handleClose} - breadcrumbs={["Projects", "New project"]} - secondaryAction={{ - label: `Upload files${pendingFiles.length > 0 ? ` (${pendingFiles.length})` : ""}`, - icon: <Upload className="h-3.5 w-3.5" />, - onClick: () => fileInputRef.current?.click(), - }} - primaryAction={{ - label: loading ? "Creating…" : "Create project", - type: "submit", - form: formId, - disabled: !name.trim() || loading, - }} + breadcrumbs={[ + "Projects", + "New project", + step === "details" ? "Details" : "Documents", + ]} + secondaryAction={ + step === "documents" + ? { + label: `Upload documents${pendingFiles.length > 0 ? ` (${pendingFiles.length})` : ""}`, + icon: <Upload className="h-3.5 w-3.5" />, + onClick: () => fileInputRef.current?.click(), + disabled: loading, + } + : undefined + } + cancelAction={ + step === "documents" + ? { + label: "Back", + onClick: () => setStep("details"), + disabled: loading, + } + : undefined + } + primaryAction={ + step === "details" + ? { + label: "Next", + type: "button", + onClick: (event) => { + event.preventDefault(); + setStep("documents"); + }, + disabled: !name.trim() || loading, + } + : { + label: loading ? "Creating…" : "Create project", + type: "submit", + form: formId, + name: "modalAction", + value: "create-project", + disabled: !name.trim() || loading, + } + } > <input ref={fileInputRef} @@ -116,61 +205,124 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0" > - <input - type="text" - value={name} - onChange={(e) => setName(e.target.value)} - placeholder="Project name" - className="w-full text-2xl font-serif text-gray-800 placeholder-gray-300 focus:outline-none bg-transparent" - autoFocus - /> + {step === "details" ? ( + <div className="space-y-6"> + <div> + <ModalFieldLabel htmlFor="new-project-name"> + Project name + </ModalFieldLabel> + <ModalTextInput + id="new-project-name" + type="text" + value={name} + onChange={(e) => setName(e.target.value)} + placeholder="Add project name" + variant="minimal" + autoFocus + /> + </div> - <input - type="text" - value={cmNumber} - onChange={(e) => setCmNumber(e.target.value)} - placeholder="Add a CM number..." - className="mt-1.5 w-full text-sm text-gray-500 placeholder-gray-300 focus:outline-none bg-transparent" - /> + <div> + <ModalFieldLabel htmlFor="new-project-cm-number"> + CM number + </ModalFieldLabel> + <ModalTextInput + id="new-project-cm-number" + type="text" + value={cmNumber} + onChange={(e) => setCmNumber(e.target.value)} + placeholder="Add a CM number..." + variant="minimal" + className="text-xl text-gray-600" + /> + </div> - <div className="mt-4 flex flex-wrap items-center gap-2"> - <button - type="button" - onClick={() => setShowMembers((v) => !v)} - className="flex items-center gap-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs text-gray-600 hover:bg-gray-50 transition-colors" - > - <Users className="h-3 w-3 text-gray-400" /> - Members{sharedEmails.length > 0 ? ` (${sharedEmails.length})` : ""} - </button> - </div> + <div> + <ModalFieldLabel htmlFor="new-project-practice"> + Practice + </ModalFieldLabel> + <ProjectPracticeField + id="new-project-practice" + value={practice} + onChange={setPractice} + /> + </div> - {showMembers && ( - <div className="mt-3"> - <EmailPillInput - emails={sharedEmails} - onChange={setSharedEmails} - validate={async (email) => - ownEmail && email === ownEmail - ? "You cannot share a project with yourself." - : null - } - placeholder="Add colleagues by email…" + <div className="space-y-2"> + <ModalFieldLabel as="p"> + Share with + </ModalFieldLabel> + <AddUserInput + onAdd={handleAddShareUser} + validateEmail={validateShareUser} + placeholder="Add colleagues by email..." + /> + {sharedUsers.length > 0 && ( + <ul className="space-y-1 pt-1"> + {sharedUsers.map((entry) => { + const displayName = + entry.display_name?.trim(); + const primary = displayName || "User"; + const initial = displayName + ?.charAt(0) + .toUpperCase(); + return ( + <li + key={entry.email} + className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-gray-100/70" + > + <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/80 bg-white text-gray-700 shadow-[0_4px_12px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.92),inset_0_-1px_0_rgba(255,255,255,0.64)]"> + {initial ? ( + <span className="font-serif text-[11px] leading-none"> + {initial} + </span> + ) : ( + <User className="h-2.5 w-2.5" /> + )} + </div> + <div className="min-w-0 flex-1"> + <p className="truncate text-xs text-gray-800"> + {primary} + <span className="text-gray-400"> + {" "} + · {entry.email} + </span> + </p> + </div> + <button + type="button" + onClick={() => + handleRemoveShareUser( + entry.email, + ) + } + className="self-center inline-flex items-center rounded-full px-2 py-1 text-xs text-gray-500 transition-colors hover:text-red-600" + aria-label={`Remove ${entry.email}`} + > + <X className="h-3 w-3" /> + </button> + </li> + ); + })} + </ul> + )} + </div> + </div> + ) : ( + <div className="min-h-0 flex-1"> + <FileDirectory + standaloneDocs={standaloneDocuments} + directoryProjects={dirProjects} + loading={dirLoading} + selectedIds={selectedDocIds} + onChange={setSelectedDocIds} + emptyMessage="No existing documents" + searchable + searchAutoFocus /> </div> )} - <div className="mt-4 space-y-2"> - <p className="text-xs font-medium text-gray-700">Select documents</p> - <FileDirectory - standaloneDocs={standaloneDocuments} - directoryProjects={dirProjects} - loading={dirLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - emptyMessage="No existing documents" - /> - </div> - {error && ( <p className="mt-3 text-sm text-red-500">{error}</p> )} diff --git a/frontend/src/app/components/projects/ProjectAssistantTable.tsx b/frontend/src/app/components/projects/ProjectAssistantTable.tsx index dccb100..aa89177 100644 --- a/frontend/src/app/components/projects/ProjectAssistantTable.tsx +++ b/frontend/src/app/components/projects/ProjectAssistantTable.tsx @@ -67,34 +67,37 @@ export function ProjectAssistantTable({ loading?: boolean; }) { return ( - <TableScrollArea> - <TableHeaderRow className="pr-8 md:pr-8"> - <TableStickyCell header> - {loading ? ( - <SkeletonDot /> - ) : ( - <input - type="checkbox" - checked={allChatsSelected} - ref={(el) => { - if (el) el.indeterminate = someChatsSelected; - }} - onChange={() => { - if (allChatsSelected) setSelectedChatIds([]); - else - setSelectedChatIds( - filteredChats.map((c) => c.id), - ); - }} - className={TABLE_CHECKBOX_CLASS} - /> - )} - <span>Chats</span> - </TableStickyCell> - <TableHeaderCell className="ml-auto w-32">Creator</TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> - <TableHeaderCell className="w-8" /> - </TableHeaderRow> + <TableScrollArea + header={ + <TableHeaderRow className="pr-8 md:pr-8"> + <TableStickyCell header> + {loading ? ( + <SkeletonDot /> + ) : ( + <input + type="checkbox" + checked={allChatsSelected} + ref={(el) => { + if (el) el.indeterminate = someChatsSelected; + }} + onChange={() => { + if (allChatsSelected) setSelectedChatIds([]); + else + setSelectedChatIds( + filteredChats.map((c) => c.id), + ); + }} + className={TABLE_CHECKBOX_CLASS} + /> + )} + <span>Chats</span> + </TableStickyCell> + <TableHeaderCell className="ml-auto w-32">Creator</TableHeaderCell> + <TableHeaderCell className="w-32">Created</TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + } + > {loading ? ( <ProjectAssistantLoadingRows /> ) : chats.length === 0 ? ( diff --git a/frontend/src/app/components/projects/ProjectDetailsModal.tsx b/frontend/src/app/components/projects/ProjectDetailsModal.tsx index 1fbb2ea..5b7396a 100644 --- a/frontend/src/app/components/projects/ProjectDetailsModal.tsx +++ b/frontend/src/app/components/projects/ProjectDetailsModal.tsx @@ -1,38 +1,33 @@ "use client"; -import { type ReactNode, useEffect, useMemo, useState } from "react"; -import { Loader2, Users } from "lucide-react"; -import { Modal } from "@/app/components/shared/Modal"; +import { useEffect, useMemo, useState } from "react"; +import { Users } from "lucide-react"; +import { Modal } from "@/app/components/modals/Modal"; +import { ModalFieldLabel } from "@/app/components/modals/ModalFieldLabel"; +import { ModalTextInput } from "@/app/components/modals/ModalTextInput"; import type { Project } from "@/app/components/shared/types"; -import type { ProjectPeople } from "@/app/lib/mikeApi"; +import { ProjectPracticeField } from "./ProjectPracticeField"; interface ProjectDetailsModalProps { open: boolean; project: Project | null; canEdit: boolean; - currentUserDisplayName?: string | null; - currentUserEmail?: string | null; - fetchPeople: (projectId: string) => Promise<ProjectPeople>; onClose: () => void; - onSave: (values: { name: string; cmNumber: string }) => Promise<void>; - onShareProject: () => void; + onSave: (values: { name: string; cmNumber: string; practice: string }) => Promise<void>; + onShareProject?: () => void; } export function ProjectDetailsModal({ open, project, canEdit, - currentUserDisplayName, - currentUserEmail, - fetchPeople, onClose, onSave, onShareProject, }: ProjectDetailsModalProps) { const [nameDraft, setNameDraft] = useState(""); const [cmDraft, setCmDraft] = useState(""); - const [people, setPeople] = useState<ProjectPeople | null>(null); - const [peopleLoading, setPeopleLoading] = useState(false); + const [practiceDraft, setPracticeDraft] = useState(""); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const [error, setError] = useState<string | null>(null); @@ -41,70 +36,39 @@ export function ProjectDetailsModal({ if (!open || !project) return; setNameDraft(project.name); setCmDraft(project.cm_number ?? ""); + setPracticeDraft(project.practice ?? ""); setSaved(false); setError(null); }, [open, project]); - useEffect(() => { - if (!open || !project) return; - const isPrivateOwnedProject = - project.is_owner !== false && - (!Array.isArray(project.shared_with) || - project.shared_with.length === 0); - if (isPrivateOwnedProject) { - setPeople(null); - setPeopleLoading(false); - return; - } - let cancelled = false; - setPeopleLoading(true); - fetchPeople(project.id) - .then((data) => { - if (!cancelled) setPeople(data); - }) - .catch(() => { - if (!cancelled) setPeople(null); - }) - .finally(() => { - if (!cancelled) setPeopleLoading(false); - }); - return () => { - cancelled = true; - }; - }, [open, project, fetchPeople]); - const trimmedName = nameDraft.trim(); const trimmedCm = cmDraft.trim(); + const trimmedPractice = practiceDraft.trim(); const hasChanges = useMemo(() => { if (!project) return false; return ( trimmedName !== project.name || - trimmedCm !== (project.cm_number ?? "") + trimmedCm !== (project.cm_number ?? "") || + trimmedPractice !== (project.practice ?? "") ); - }, [project, trimmedCm, trimmedName]); + }, [project, trimmedCm, trimmedName, trimmedPractice]); if (!project) return null; - const accessLabel = - Array.isArray(project.shared_with) && project.shared_with.length > 0 - ? "Shared" - : "Private"; - const isPrivateOwnedProject = - project.is_owner !== false && accessLabel === "Private"; - const ownerLabel = - people?.owner.display_name?.trim() || - people?.owner.email?.trim() || - (isPrivateOwnedProject ? currentUserDisplayName?.trim() : "") || - (isPrivateOwnedProject ? currentUserEmail?.trim() : "") || - "Unknown"; - async function handleSave() { if (!canEdit || saving || !hasChanges || !trimmedName) return; setSaving(true); setSaved(false); setError(null); try { - await onSave({ name: trimmedName, cmNumber: trimmedCm }); + await onSave({ + name: trimmedName, + cmNumber: trimmedCm, + practice: + trimmedPractice && trimmedPractice !== "Other" + ? trimmedPractice + : "", + }); setSaved(true); } catch { setError("Could not update project details."); @@ -118,11 +82,15 @@ export function ProjectDetailsModal({ open={open} onClose={onClose} breadcrumbs={["Projects", project.name, "Details"]} - secondaryAction={{ - label: "Share Project", - icon: <Users className="h-4 w-4" />, - onClick: onShareProject, - }} + secondaryAction={ + onShareProject + ? { + label: "Share Project", + icon: <Users className="h-4 w-4" />, + onClick: onShareProject, + } + : undefined + } footerStatus={ error ? ( <span className="text-sm text-red-600">{error}</span> @@ -141,15 +109,12 @@ export function ProjectDetailsModal({ } cancelAction={canEdit ? undefined : false} > - <div className="flex flex-col gap-5 py-1"> - <div className="flex flex-col gap-3"> - <label - htmlFor="project-details-name" - className="text-xs font-medium text-gray-700" - > - Project Name - </label> - <input + <div className="flex min-h-0 flex-1 flex-col gap-6 py-1"> + <div> + <ModalFieldLabel htmlFor="project-details-name"> + Project name + </ModalFieldLabel> + <ModalTextInput id="project-details-name" value={nameDraft} onChange={(e) => { @@ -158,18 +123,16 @@ export function ProjectDetailsModal({ setError(null); }} disabled={!canEdit || saving} - className="h-9 w-full rounded-md border border-gray-200 bg-gray-50 px-3 text-sm text-gray-900 outline-none transition-colors focus:border-gray-300 disabled:cursor-not-allowed disabled:text-gray-400" + placeholder="Add project name" + variant="minimal" /> </div> - <div className="flex flex-col gap-3"> - <label - htmlFor="project-details-cm" - className="text-xs font-medium text-gray-700" - > - CM - </label> - <input + <div> + <ModalFieldLabel htmlFor="project-details-cm"> + CM number + </ModalFieldLabel> + <ModalTextInput id="project-details-cm" value={cmDraft} onChange={(e) => { @@ -178,39 +141,29 @@ export function ProjectDetailsModal({ setError(null); }} disabled={!canEdit || saving} - placeholder="No CM" - className="h-9 w-full rounded-md border border-gray-200 bg-gray-50 px-3 text-sm text-gray-900 outline-none transition-colors focus:border-gray-300 disabled:cursor-not-allowed disabled:text-gray-400" + placeholder="Add a CM number..." + variant="minimal" + className="text-xl text-gray-600" /> </div> - <div className="divide-y divide-gray-100 text-sm"> - <DetailRow label="Ownership" value={accessLabel} /> - <DetailRow - label="Owner" - value={ - peopleLoading && !isPrivateOwnedProject ? ( - <span className="inline-flex items-center gap-1.5 text-gray-400"> - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - Loading - </span> - ) : ( - ownerLabel - ) - } + <div> + <ModalFieldLabel htmlFor="project-details-practice"> + Practice + </ModalFieldLabel> + <ProjectPracticeField + id="project-details-practice" + value={practiceDraft} + onChange={(value) => { + setPracticeDraft(value); + setSaved(false); + setError(null); + }} + disabled={!canEdit || saving} /> </div> + </div> </Modal> ); } - -function DetailRow({ label, value }: { label: string; value: ReactNode }) { - return ( - <div className="flex items-center justify-between gap-4 py-3"> - <span className="text-gray-500">{label}</span> - <span className="min-w-0 truncate text-right text-gray-900"> - {value} - </span> - </div> - ); -} diff --git a/frontend/src/app/components/projects/ProjectDocumentsView.tsx b/frontend/src/app/components/projects/ProjectDocumentsView.tsx index 586350f..d558f45 100644 --- a/frontend/src/app/components/projects/ProjectDocumentsView.tsx +++ b/frontend/src/app/components/projects/ProjectDocumentsView.tsx @@ -43,10 +43,10 @@ import { import { AddDocumentsModal, invalidateDirectoryCache, -} from "@/app/components/shared/AddDocumentsModal"; +} from "@/app/components/modals/AddDocumentsModal"; import { useAuth } from "@/contexts/AuthContext"; -import { WarningPopup } from "@/app/components/shared/WarningPopup"; -import { ConfirmPopup } from "@/app/components/shared/ConfirmPopup"; +import { WarningPopup } from "@/app/components/popups/WarningPopup"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { formatUnsupportedDocumentWarning, partitionSupportedDocumentFiles, @@ -92,9 +92,9 @@ function ProjectTableLoading({ }) { return ( <div className="flex-1 flex flex-col min-h-0"> - <div className="flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none shrink-0"> + <div className={`sticky top-0 z-[70] ${stickyCellBg} flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none shrink-0`}> <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`} + className={`sticky left-0 z-[80] ${DOC_NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`} > <div className="h-2.5 w-2.5 rounded bg-gray-100 animate-pulse" /> <span>Name</span> @@ -1893,7 +1893,7 @@ export function ProjectDocumentsView({ projectId }: Props) { const sidePanelDoc = viewingDoc ? (docs.find((doc) => doc.id === viewingDoc.id) ?? viewingDoc) : null; - const versionUploadAccept = ".pdf,.docx,.doc"; + const versionUploadAccept = ".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt"; const q = search.toLowerCase(); const filteredDocs = q ? docs.filter((d) => d.filename.toLowerCase().includes(q)) @@ -2140,9 +2140,9 @@ export function ProjectDocumentsView({ projectId }: Props) { ) : ( <div className="flex-1 flex flex-col min-h-0"> {/* Table header */} - <div className="flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none shrink-0"> + <div className={`sticky top-0 z-[70] ${stickyCellBg} flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none shrink-0`}> <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`} + className={`sticky left-0 z-[80] ${DOC_NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`} > <input type="checkbox" @@ -2233,7 +2233,7 @@ export function ProjectDocumentsView({ projectId }: Props) { > <Upload className="h-8 w-8 text-gray-200 mb-3" /> <p className="text-sm text-gray-400"> - Drop PDF, DOCX, or DOC files here + Drop PDF, Word, Excel, or PowerPoint files here </p> </div> ) : ( diff --git a/frontend/src/app/components/projects/ProjectExplorer.tsx b/frontend/src/app/components/projects/ProjectExplorer.tsx index 1f2d389..4b1cdd3 100644 --- a/frontend/src/app/components/projects/ProjectExplorer.tsx +++ b/frontend/src/app/components/projects/ProjectExplorer.tsx @@ -2,8 +2,6 @@ import { useEffect, useRef, useState } from "react"; import { - FileText, - File, Folder, FolderOpen, ChevronRight, @@ -16,6 +14,7 @@ import type { Folder as ProjectFolder, } from "@/app/components/shared/types"; import { VersionChip } from "@/app/components/shared/VersionChip"; +import { FileTypeIcon } from "@/app/components/shared/FileTypeIcon"; interface Props { projectName?: string | null; @@ -32,11 +31,7 @@ interface Props { } function DocIcon({ fileType }: { fileType: string | null }) { - if (fileType === "pdf") - return <FileText className="h-3.5 w-3.5 text-red-500 shrink-0" />; - if (fileType === "docx" || fileType === "doc") - return <File className="h-3.5 w-3.5 text-blue-500 shrink-0" />; - return <File className="h-3.5 w-3.5 text-gray-400 shrink-0" />; + return <FileTypeIcon fileType={fileType} className="h-3.5 w-3.5" />; } type ContextMenuState = { diff --git a/frontend/src/app/components/projects/ProjectPageParts.tsx b/frontend/src/app/components/projects/ProjectPageParts.tsx index 6037653..594fdc8 100644 --- a/frontend/src/app/components/projects/ProjectPageParts.tsx +++ b/frontend/src/app/components/projects/ProjectPageParts.tsx @@ -3,9 +3,6 @@ import { type CSSProperties, useRef, useState } from "react"; import { CornerDownRight, - File, - FileText, - Info, Loader2, MessageSquare, Pencil, @@ -14,6 +11,7 @@ import { Users, } from "lucide-react"; import { PageHeader } from "@/app/components/shared/PageHeader"; +import { FileTypeIcon } from "@/app/components/shared/FileTypeIcon"; import type { Project } from "@/app/components/shared/types"; import type { DocumentVersion } from "@/app/lib/mikeApi"; import { RowActions } from "@/app/components/shared/RowActions"; @@ -65,12 +63,7 @@ export function DocIcon({ fileType: string | null; muted?: boolean; }) { - if (muted) return <File className="h-4 w-4 text-gray-300 shrink-0" />; - if (fileType === "pdf") - return <FileText className="h-4 w-4 text-red-600 shrink-0" />; - if (fileType === "docx" || fileType === "doc") - return <File className="h-4 w-4 text-blue-600 shrink-0" />; - return <File className="h-4 w-4 text-gray-500 shrink-0" />; + return <FileTypeIcon fileType={fileType} className="h-4 w-4" muted={muted} />; } export function DocVersionHistory({ @@ -361,7 +354,6 @@ export function ProjectPageHeader({ docsCount, isOwner, onBackToProjects, - onOwnerOnly, onOpenDetails, onDeleteProject, onSearchChange, @@ -376,7 +368,6 @@ export function ProjectPageHeader({ docsCount: number; isOwner: boolean; onBackToProjects: () => void; - onOwnerOnly: (action: string) => void; onOpenDetails: () => void; onDeleteProject: () => void; onSearchChange: (search: string) => void; @@ -384,25 +375,6 @@ export function ProjectPageHeader({ onNewChat: () => void; onNewReview: () => void; }) { - const requestRename = () => { - if (!project) return; - if (!isOwner) { - onOwnerOnly("rename this project"); - return; - } - onOpenDetails(); - }; - - const titleLabel = !project ? undefined : ( - <span - onClick={requestRename} - className="inline-block cursor-text" - title="Rename" - > - {project.name} - </span> - ); - return ( <PageHeader breadcrumbs={[ @@ -414,8 +386,7 @@ export function ProjectPageHeader({ { ...(project ? { - label: titleLabel, - cursor: "text", + label: project.name, } : { loading: true, @@ -443,13 +414,10 @@ export function ProjectPageHeader({ <HeaderActionsMenu items={[ { - label: "Rename", + label: isOwner + ? "Edit details" + : "View details", icon: Pencil, - onSelect: requestRename, - }, - { - label: "Project Details", - icon: Info, onSelect: onOpenDetails, }, { diff --git a/frontend/src/app/components/projects/ProjectReviewsTable.tsx b/frontend/src/app/components/projects/ProjectReviewsTable.tsx index 8cf1742..7f53fe7 100644 --- a/frontend/src/app/components/projects/ProjectReviewsTable.tsx +++ b/frontend/src/app/components/projects/ProjectReviewsTable.tsx @@ -31,18 +31,14 @@ export function ProjectReviewsTable({ selectedReviewIds, allReviewsSelected, someReviewsSelected, - renamingReviewId, - renameReviewValue, creatingReview, currentUserId, onCreateReview, onOpenReview, + onOpenDetails, onDeleteReview, onOwnerOnlyAction, - submitReviewRename, setSelectedReviewIds, - setRenamingReviewId, - setRenameReviewValue, loading = false, }: { docs: Document[]; @@ -51,50 +47,49 @@ export function ProjectReviewsTable({ selectedReviewIds: string[]; allReviewsSelected: boolean; someReviewsSelected: boolean; - renamingReviewId: string | null; - renameReviewValue: string; creatingReview: boolean; currentUserId?: string | null; onCreateReview: () => void; onOpenReview: (reviewId: string) => void; + onOpenDetails: (review: TabularReview) => void; onDeleteReview: (review: TabularReview) => Promise<void> | void; onOwnerOnlyAction: (action: string) => void; - submitReviewRename: (reviewId: string) => Promise<void> | void; setSelectedReviewIds: Dispatch<SetStateAction<string[]>>; - setRenamingReviewId: Dispatch<SetStateAction<string | null>>; - setRenameReviewValue: Dispatch<SetStateAction<string>>; loading?: boolean; }) { return ( - <TableScrollArea> - <TableHeaderRow className="pr-8 md:pr-8"> - <TableStickyCell header> - {loading ? ( - <SkeletonDot /> - ) : ( - <input - type="checkbox" - checked={allReviewsSelected} - ref={(el) => { - if (el) el.indeterminate = someReviewsSelected; - }} - onChange={() => { - if (allReviewsSelected) setSelectedReviewIds([]); - else - setSelectedReviewIds( - filteredReviews.map((r) => r.id), - ); - }} - className={TABLE_CHECKBOX_CLASS} - /> - )} - <span>Name</span> - </TableStickyCell> - <TableHeaderCell className="ml-auto w-24">Columns</TableHeaderCell> - <TableHeaderCell className="w-24">Documents</TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> - <TableHeaderCell className="w-8" /> - </TableHeaderRow> + <TableScrollArea + header={ + <TableHeaderRow className="pr-8 md:pr-8"> + <TableStickyCell header> + {loading ? ( + <SkeletonDot /> + ) : ( + <input + type="checkbox" + checked={allReviewsSelected} + ref={(el) => { + if (el) el.indeterminate = someReviewsSelected; + }} + onChange={() => { + if (allReviewsSelected) setSelectedReviewIds([]); + else + setSelectedReviewIds( + filteredReviews.map((r) => r.id), + ); + }} + className={TABLE_CHECKBOX_CLASS} + /> + )} + <span>Name</span> + </TableStickyCell> + <TableHeaderCell className="ml-auto w-24">Columns</TableHeaderCell> + <TableHeaderCell className="w-24">Documents</TableHeaderCell> + <TableHeaderCell className="w-32">Created</TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + } + > {loading ? ( <ProjectReviewsLoadingRows /> ) : reviews.length === 0 ? ( @@ -122,28 +117,22 @@ export function ProjectReviewsTable({ rightClickDropdown={(close) => ( <RowActionMenuItems onClose={close} - onRename={() => { + onEditDetails={() => { if ( currentUserId && review.user_id !== currentUserId ) { onOwnerOnlyAction( - "rename this tabular review", + "edit tabular review details", ); return; } - setRenameReviewValue( - review.title ?? "Untitled Review", - ); - setRenamingReviewId(review.id); + onOpenDetails(review); }} onDelete={() => onDeleteReview(review)} /> )} - onClick={() => { - if (renamingReviewId === review.id) return; - onOpenReview(review.id); - }} + onClick={() => onOpenReview(review.id)} className="pr-8 md:pr-8" > <TablePrimaryCell @@ -163,13 +152,6 @@ export function ProjectReviewsTable({ ) } label={review.title ?? "Untitled Review"} - editing={renamingReviewId === review.id} - editValue={renameReviewValue} - onEditValueChange={setRenameReviewValue} - onEditCommit={() => - void submitReviewRename(review.id) - } - onEditCancel={() => setRenamingReviewId(null)} /> <TableCell className="ml-auto w-24"> {review.columns_config?.length ?? 0} @@ -189,20 +171,17 @@ export function ProjectReviewsTable({ onClick={(e) => e.stopPropagation()} > <RowActions - onRename={() => { + onEditDetails={() => { if ( currentUserId && review.user_id !== currentUserId ) { onOwnerOnlyAction( - "rename this tabular review", + "edit tabular review details", ); return; } - setRenameReviewValue( - review.title ?? "Untitled Review", - ); - setRenamingReviewId(review.id); + onOpenDetails(review); }} onDelete={() => onDeleteReview(review)} /> diff --git a/frontend/src/app/components/projects/ProjectWorkspace.tsx b/frontend/src/app/components/projects/ProjectWorkspace.tsx index 8a212ea..76fa030 100644 --- a/frontend/src/app/components/projects/ProjectWorkspace.tsx +++ b/frontend/src/app/components/projects/ProjectWorkspace.tsx @@ -29,10 +29,10 @@ import type { TabularReview, } from "@/app/components/shared/types"; import { TableToolbar } from "@/app/components/shared/TableToolbar"; -import { AddNewTRModal } from "@/app/components/tabular/AddNewTRModal"; -import { ConfirmPopup } from "@/app/components/shared/ConfirmPopup"; -import { OwnerOnlyModal } from "@/app/components/shared/OwnerOnlyModal"; -import { PeopleModal } from "@/app/components/shared/PeopleModal"; +import { NewTRModal } from "@/app/components/tabular/NewTRModal"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; +import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; +import { PeopleModal } from "@/app/components/modals/PeopleModal"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { useAuth } from "@/contexts/AuthContext"; import { useUserProfile } from "@/contexts/UserProfileContext"; @@ -305,6 +305,7 @@ export function ProjectWorkspaceProvider({ async function handleProjectDetailsSave(values: { name: string; cmNumber: string; + practice: string; }) { if (project && project.is_owner === false) { setOwnerOnlyAction("edit project details"); @@ -312,10 +313,12 @@ export function ProjectWorkspaceProvider({ } const name = values.name.trim(); const cmNumber = values.cmNumber.trim(); + const practice = values.practice.trim(); if (!name) return; const updated = await updateProject(projectId, { name, cm_number: cmNumber, + practice: practice || null, }); setProject((prev) => prev @@ -323,6 +326,7 @@ export function ProjectWorkspaceProvider({ ...prev, name: updated.name, cm_number: updated.cm_number, + practice: updated.practice, } : updated, ); @@ -417,7 +421,6 @@ export function ProjectWorkspaceProvider({ docsCount={project?.documents?.length ?? 0} isOwner={project?.is_owner !== false} onBackToProjects={() => router.push("/projects")} - onOwnerOnly={setOwnerOnlyAction} onOpenDetails={() => setProjectDetailsOpen(true)} onDeleteProject={requestProjectDelete} onSearchChange={setSearch} @@ -428,7 +431,7 @@ export function ProjectWorkspaceProvider({ {children} - <AddNewTRModal + <NewTRModal open={newTRModalOpen} onClose={() => setNewTRModalOpen(false)} onAdd={handleCreateReview} @@ -439,7 +442,7 @@ export function ProjectWorkspaceProvider({ projectCmNumber={project?.cm_number} /> - <OwnerOnlyModal + <OwnerOnlyPopup open={!!ownerOnlyAction} action={ownerOnlyAction ?? undefined} onClose={() => setOwnerOnlyAction(null)} @@ -449,9 +452,6 @@ export function ProjectWorkspaceProvider({ open={projectDetailsOpen} project={project} canEdit={project?.is_owner !== false} - currentUserDisplayName={profile?.displayName ?? null} - currentUserEmail={user?.email ?? null} - fetchPeople={getProjectPeople} onClose={() => setProjectDetailsOpen(false)} onSave={handleProjectDetailsSave} onShareProject={() => { diff --git a/frontend/src/app/components/projects/ProjectsOverview.tsx b/frontend/src/app/components/projects/ProjectsOverview.tsx index 24c3f0a..01016bf 100644 --- a/frontend/src/app/components/projects/ProjectsOverview.tsx +++ b/frontend/src/app/components/projects/ProjectsOverview.tsx @@ -3,11 +3,16 @@ import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/navigation"; import { FolderOpen, ChevronDown } from "lucide-react"; -import { listProjects, updateProject, deleteProject } from "@/app/lib/mikeApi"; -import { OwnerOnlyModal } from "@/app/components/shared/OwnerOnlyModal"; +import { + listProjects, + updateProject, + deleteProject, +} from "@/app/lib/mikeApi"; +import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import { useAuth } from "@/contexts/AuthContext"; import type { Project } from "@/app/components/shared/types"; import { NewProjectModal } from "./NewProjectModal"; +import { ProjectDetailsModal } from "./ProjectDetailsModal"; import { TableToolbar } from "@/app/components/shared/TableToolbar"; import { RowActionMenuItems, @@ -54,11 +59,8 @@ export function ProjectsOverview() { const [loading, setLoading] = useState(true); const [loadError, setLoadError] = useState<string | null>(null); const [modalOpen, setModalOpen] = useState(false); + const [detailsProject, setDetailsProject] = useState<Project | null>(null); const [activeFilter, setActiveFilter] = useState<ProjectFilter>("all"); - const [renamingId, setRenamingId] = useState<string | null>(null); - const [renameValue, setRenameValue] = useState(""); - const [cmEditingId, setCmEditingId] = useState<string | null>(null); - const [cmValue, setCmValue] = useState(""); const [selectedIds, setSelectedIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); const [search, setSearch] = useState(""); @@ -68,44 +70,45 @@ export function ProjectsOverview() { const { user, isAuthenticated, authLoading } = useAuth(); useEffect(() => { - if (authLoading) { - setLoading(true); - return; - } - if (!isAuthenticated) { - setProjects([]); - setLoadError(null); - setLoading(false); - return; - } - let cancelled = false; - setLoading(true); - setLoadError(null); - listProjects() - .then((loaded) => { + + async function loadProjects() { + await Promise.resolve(); + if (cancelled) return; + if (authLoading) { + setLoading(true); + return; + } + if (!isAuthenticated) { + setProjects([]); + setLoadError(null); + setLoading(false); + return; + } + + setLoading(true); + setLoadError(null); + try { + const loaded = await listProjects(); if (!cancelled) setProjects(loaded); - }) - .catch((err) => { + } catch (err) { console.error("[projects] failed to load projects", err); if (!cancelled) { setProjects([]); setLoadError("Could not load projects."); } - }) - .finally(() => { + } finally { if (!cancelled) setLoading(false); - }); + } + } + + void loadProjects(); return () => { cancelled = true; }; }, [authLoading, isAuthenticated, user?.id]); - useEffect(() => { - setSelectedIds([]); - }, [activeFilter]); - useEffect(() => { function handleClick(e: MouseEvent) { if ( @@ -129,7 +132,8 @@ export function ProjectsOverview() { (p) => !q || p.name.toLowerCase().includes(q) || - (p.cm_number ?? "").toLowerCase().includes(q), + (p.cm_number ?? "").toLowerCase().includes(q) || + (p.practice ?? "").toLowerCase().includes(q), ); const allSelected = @@ -158,25 +162,36 @@ export function ProjectsOverview() { { id: "shared-with-me", label: "Shared with me" }, ]; - async function handleRenameSubmit(projectId: string) { - const trimmed = renameValue.trim(); - setRenamingId(null); - if (!trimmed) return; + async function handleProjectDetailsSave(values: { + name: string; + cmNumber: string; + practice: string; + }) { + if (!detailsProject) return; + if ( + detailsProject.is_owner === false || + (user?.id && detailsProject.user_id !== user.id) + ) { + setOwnerOnlyAction("edit project details"); + return; + } + const name = values.name.trim(); + const cmNumber = values.cmNumber.trim(); + const practice = values.practice.trim(); + if (!name) return; + const updated = await updateProject(detailsProject.id, { + name, + cm_number: cmNumber, + practice: practice || null, + }); setProjects((prev) => - prev.map((p) => (p.id === projectId ? { ...p, name: trimmed } : p)), - ); - await updateProject(projectId, { name: trimmed }); - } - - async function handleCmSubmit(projectId: string) { - const trimmed = cmValue.trim(); - setCmEditingId(null); - setProjects((prev) => - prev.map((p) => - p.id === projectId ? { ...p, cm_number: trimmed || null } : p, + prev.map((project) => + project.id === updated.id ? { ...project, ...updated } : project, ), ); - await updateProject(projectId, { cm_number: trimmed || undefined }); + setDetailsProject((current) => + current?.id === updated.id ? { ...current, ...updated } : current, + ); } async function handleDeleteSelected() { @@ -253,40 +268,46 @@ export function ProjectsOverview() { <TableToolbar items={filters} active={activeFilter} - onChange={setActiveFilter} + onChange={(nextFilter) => { + setActiveFilter(nextFilter); + setSelectedIds([]); + }} actions={toolbarActions} /> {/* Table */} - <TableScrollArea> - {/* Column headers */} - <TableHeaderRow> - <TableStickyCell header> - {loading ? ( - <SkeletonDot /> - ) : ( - <input - type="checkbox" - checked={allSelected} - ref={(el) => { - if (el) el.indeterminate = someSelected; - }} - onChange={toggleAll} - className={TABLE_CHECKBOX_CLASS} - /> - )} - <span>Name</span> - </TableStickyCell> - <TableHeaderCell className="ml-auto w-32">CM</TableHeaderCell> - <TableHeaderCell className="w-32">Owner</TableHeaderCell> - <TableHeaderCell className="w-24">Files</TableHeaderCell> - <TableHeaderCell className="w-24">Chats</TableHeaderCell> - <TableHeaderCell className="w-36"> - Tabular Reviews - </TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> - <TableHeaderCell className="w-8" /> - </TableHeaderRow> + <TableScrollArea + header={ + <TableHeaderRow> + <TableStickyCell header> + {loading ? ( + <SkeletonDot /> + ) : ( + <input + type="checkbox" + checked={allSelected} + ref={(el) => { + if (el) el.indeterminate = someSelected; + }} + onChange={toggleAll} + className={TABLE_CHECKBOX_CLASS} + /> + )} + <span>Name</span> + </TableStickyCell> + <TableHeaderCell className="ml-auto w-32">CM</TableHeaderCell> + <TableHeaderCell className="w-36">Practice</TableHeaderCell> + <TableHeaderCell className="w-32">Owner</TableHeaderCell> + <TableHeaderCell className="w-24">Files</TableHeaderCell> + <TableHeaderCell className="w-24">Chats</TableHeaderCell> + <TableHeaderCell className="w-36"> + Tabular Reviews + </TableHeaderCell> + <TableHeaderCell className="w-32">Created</TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + } + > {loading ? ( <TableBody> @@ -305,6 +326,9 @@ export function ProjectsOverview() { <TableCell className="ml-auto w-32"> <SkeletonLine className="w-20" /> </TableCell> + <TableCell className="w-36"> + <SkeletonLine className="w-20" /> + </TableCell> <TableCell className="w-32"> <SkeletonLine className="w-16" /> </TableCell> @@ -375,20 +399,8 @@ export function ProjectsOverview() { ? (close) => ( <RowActionMenuItems onClose={close} - onRename={() => { - setRenameValue( - project.name, - ); - setRenamingId(project.id); - }} - onUpdateCmNumber={() => { - setCmValue( - project.cm_number ?? - "", - ); - setCmEditingId( - project.id, - ); + onEditDetails={() => { + setDetailsProject(project); }} onDelete={async () => { await deleteProject( @@ -407,7 +419,6 @@ export function ProjectsOverview() { : undefined } onClick={() => { - if (renamingId === project.id) return; router.push(`/projects/${project.id}`); }} > @@ -419,44 +430,20 @@ export function ProjectsOverview() { toggleOne(project.id) } label={project.name} - editing={renamingId === project.id} - editValue={renameValue} - onEditValueChange={setRenameValue} - onEditCommit={() => - handleRenameSubmit(project.id) - } - onEditCancel={() => setRenamingId(null)} /> - <TableCell - className="ml-auto w-32" - onClick={(e) => e.stopPropagation()} - > - {cmEditingId === project.id ? ( - <input - autoFocus - value={cmValue} - onChange={(e) => - setCmValue(e.target.value) - } - onKeyDown={(e) => { - if (e.key === "Enter") - handleCmSubmit(project.id); - if (e.key === "Escape") - setCmEditingId(null); - }} - onBlur={() => - handleCmSubmit(project.id) - } - placeholder="CM #" - className="w-full text-sm text-gray-800 bg-transparent outline-none" - /> - ) : ( - (project.cm_number ?? ( - <span className="text-gray-300"> - — - </span> - )) + <TableCell className="ml-auto w-32"> + {project.cm_number ?? ( + <span className="text-gray-300"> + — + </span> + )} + </TableCell> + <TableCell className="w-36"> + {project.practice ?? ( + <span className="text-gray-300"> + — + </span> )} </TableCell> <TableCell className="w-32"> @@ -482,15 +469,8 @@ export function ProjectsOverview() { {(project.is_owner ?? project.user_id === user?.id) && ( <RowActions - onRename={() => { - setRenameValue(project.name); - setRenamingId(project.id); - }} - onUpdateCmNumber={() => { - setCmValue( - project.cm_number ?? "", - ); - setCmEditingId(project.id); + onEditDetails={() => { + setDetailsProject(project); }} onDelete={async () => { await deleteProject(project.id); @@ -520,7 +500,19 @@ export function ProjectsOverview() { }} /> - <OwnerOnlyModal + <ProjectDetailsModal + open={!!detailsProject} + project={detailsProject} + canEdit={ + !!detailsProject && + detailsProject.is_owner !== false && + (!user?.id || detailsProject.user_id === user.id) + } + onClose={() => setDetailsProject(null)} + onSave={handleProjectDetailsSave} + /> + + <OwnerOnlyPopup open={!!ownerOnlyAction} action={ownerOnlyAction ?? undefined} onClose={() => setOwnerOnlyAction(null)} diff --git a/frontend/src/app/components/shared/AddDocumentsModal.tsx b/frontend/src/app/components/shared/AddDocumentsModal.tsx deleted file mode 100644 index b87caac..0000000 --- a/frontend/src/app/components/shared/AddDocumentsModal.tsx +++ /dev/null @@ -1,316 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import { AlertCircle, Upload, Search, Loader2, X } from "lucide-react"; -import { - uploadStandaloneDocument, - uploadProjectDocument, - addDocumentToProject, - deleteDocument, -} from "@/app/lib/mikeApi"; -import type { Document } from "./types"; -import { FileDirectory } from "./FileDirectory"; -import { useDirectoryData, invalidateDirectoryCache } from "./useDirectoryData"; -import { OwnerOnlyModal } from "./OwnerOnlyModal"; -import { useAuth } from "@/contexts/AuthContext"; -import { Modal } from "./Modal"; -import { - SUPPORTED_DOCUMENT_ACCEPT, - formatUnsupportedDocumentWarning, - partitionSupportedDocumentFiles, -} from "@/app/lib/documentUploadValidation"; - -export { invalidateDirectoryCache }; - -interface Props { - open: boolean; - onClose: () => void; - onSelect: (documents: Document[], projectId?: string) => void; - breadcrumb: string[]; - allowMultiple?: boolean; - projectId?: string; -} - -export function AddDocumentsModal({ - open, - onClose, - onSelect, - breadcrumb, - allowMultiple = true, - projectId, -}: Props) { - const { loading, standaloneDocuments, projects } = useDirectoryData(open); - const { user } = useAuth(); - const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set()); - const [uploading, setUploading] = useState(false); - const [uploadingFilenames, setUploadingFilenames] = useState<string[]>([]); - const [uploadWarning, setUploadWarning] = useState<string | null>(null); - const [search, setSearch] = useState(""); - const [extraUploadedDocs, setExtraUploadedDocs] = useState<Document[]>([]); - // IDs deleted in this session — hidden locally since `useDirectoryData`'s - // cached state won't re-fetch until the modal reopens. - const [deletedIds, setDeletedIds] = useState<Set<string>>(new Set()); - const [ownerOnlyAction, setOwnerOnlyAction] = useState<string | null>(null); - const fileInputRef = useRef<HTMLInputElement>(null); - - useEffect(() => { - if (!open) return; - setSearch(""); - setSelectedIds(new Set()); - setExtraUploadedDocs([]); - setDeletedIds(new Set()); - setUploadingFilenames([]); - setUploadWarning(null); - }, [open]); - - if (!open) return null; - - const q = search.toLowerCase().trim(); - - const allStandalone = [ - ...extraUploadedDocs.filter( - (u) => !standaloneDocuments.some((d) => d.id === u.id), - ), - ...standaloneDocuments, - ].filter((d) => !deletedIds.has(d.id)); - - const filteredStandalone = q - ? allStandalone.filter((d) => - d.filename.toLowerCase().includes(q), - ) - : allStandalone; - - const filteredProjects = projects - .filter((p) => p.id !== projectId) - .map((p) => ({ - ...p, - documents: (p.documents || []).filter( - (d) => - !deletedIds.has(d.id) && - (!q || - d.filename.toLowerCase().includes(q)), - ), - })) - .filter( - (p) => - !q || - p.name.toLowerCase().includes(q) || - p.documents.length > 0, - ); - - const allDocs = [ - ...allStandalone, - ...projects.flatMap((p) => p.documents || []), - ]; - - async function handleConfirm() { - const selected = allDocs.filter((d) => selectedIds.has(d.id)); - - if (projectId) { - const toAssign = selected.filter((d) => d.project_id !== projectId); - const alreadyHere = selected.filter( - (d) => d.project_id === projectId, - ); - if (toAssign.length > 0) { - setUploading(true); - try { - const assigned = await Promise.all( - toAssign.map((d) => - addDocumentToProject(projectId, d.id), - ), - ); - onSelect([...alreadyHere, ...assigned], projectId); - } catch (err) { - console.error("Failed to assign documents:", err); - } finally { - setUploading(false); - } - } else { - onSelect(alreadyHere, projectId); - } - onClose(); - return; - } - - const projectIds = new Set( - selected.map((d) => d.project_id).filter(Boolean), - ); - const singleProjectId = - projectIds.size === 1 ? [...projectIds][0]! : undefined; - onSelect(selected, singleProjectId); - onClose(); - } - - async function handleDelete(ids: string[]) { - // Server only allows the doc creator to delete. Filter to owned - // and warn for the rest. - const docsById = new Map<string, Document>(); - for (const d of [ - ...standaloneDocuments, - ...extraUploadedDocs, - ...projects.flatMap((p) => p.documents ?? []), - ]) { - docsById.set(d.id, d); - } - const owned = ids.filter((id) => { - const d = docsById.get(id); - return !d || !d.user_id || !user?.id || d.user_id === user.id; - }); - const blocked = ids.length - owned.length; - if (owned.length === 0 && blocked > 0) { - setOwnerOnlyAction( - "delete these documents — only the document creator can delete a document", - ); - return; - } - const idSet = new Set(owned); - try { - await Promise.all(owned.map((id) => deleteDocument(id))); - } catch (err) { - console.error("Delete failed:", err); - return; - } - invalidateDirectoryCache(); - setExtraUploadedDocs((prev) => prev.filter((d) => !idSet.has(d.id))); - setDeletedIds((prev) => { - const next = new Set(prev); - owned.forEach((id) => next.add(id)); - return next; - }); - if (blocked > 0) { - setOwnerOnlyAction( - `delete ${blocked} of the selected documents — only the document creator can delete a document`, - ); - } - } - - async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) { - const files = Array.from(e.target.files || []); - if (!files.length) return; - const { supported, unsupported } = partitionSupportedDocumentFiles(files); - setUploadWarning(formatUnsupportedDocumentWarning(unsupported)); - if (supported.length === 0) { - if (fileInputRef.current) fileInputRef.current.value = ""; - return; - } - setUploadingFilenames(supported.map((file) => file.name)); - setUploading(true); - try { - const uploaded = await Promise.all( - supported.map((f) => - projectId - ? uploadProjectDocument(projectId, f) - : uploadStandaloneDocument(f), - ), - ); - invalidateDirectoryCache(); - setExtraUploadedDocs((prev) => [...uploaded, ...prev]); - uploaded.forEach((d) => - setSelectedIds((prev) => new Set([...prev, d.id])), - ); - } catch (err) { - console.error("Upload failed:", err); - } finally { - setUploading(false); - setUploadingFilenames([]); - if (fileInputRef.current) fileInputRef.current.value = ""; - } - } - - return ( - <> - <Modal - open={open} - onClose={onClose} - breadcrumbs={breadcrumb} - secondaryAction={{ - label: uploading ? "Uploading…" : "Upload", - icon: uploading ? ( - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - ) : ( - <Upload className="h-3.5 w-3.5" /> - ), - onClick: () => fileInputRef.current?.click(), - disabled: uploading, - }} - footerStatus={ - selectedIds.size > 0 ? ( - <span className="text-xs text-gray-400"> - {selectedIds.size} selected - </span> - ) : null - } - primaryAction={{ - label: uploading ? "Saving…" : "Confirm", - onClick: handleConfirm, - disabled: selectedIds.size === 0 || uploading, - }} - > - <input - ref={fileInputRef} - type="file" - accept={SUPPORTED_DOCUMENT_ACCEPT} - multiple - className="hidden" - onChange={handleUpload} - /> - {/* Search bar */} - <div className="pt-1 pb-2"> - <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"> - <Search className="h-3.5 w-3.5 text-gray-400 shrink-0" /> - <input - type="text" - placeholder="Search…" - value={search} - onChange={(e) => setSearch(e.target.value)} - className="flex-1 bg-transparent text-sm text-gray-700 placeholder:text-gray-400 outline-none" - autoFocus - /> - {search && ( - <button - onClick={() => setSearch("")} - className="text-gray-400 hover:text-gray-600" - > - <X className="h-3.5 w-3.5" /> - </button> - )} - </div> - </div> - - {uploadWarning && ( - <div className="mb-2 flex items-center gap-2 rounded-lg border border-red-100 bg-red-50 px-3 py-2 text-xs text-gray-900"> - <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-600" /> - <span className="min-w-0 flex-1">{uploadWarning}</span> - <button - type="button" - onClick={() => setUploadWarning(null)} - className="shrink-0 rounded p-0.5 text-black hover:bg-gray-100" - aria-label="Dismiss warning" - > - <X className="h-3.5 w-3.5" /> - </button> - </div> - )} - - {/* File browser */} - <FileDirectory - standaloneDocs={filteredStandalone} - directoryProjects={filteredProjects} - loading={loading} - selectedIds={selectedIds} - onChange={setSelectedIds} - allowMultiple={allowMultiple} - forceExpanded={!!q} - emptyMessage={q ? "No matches found" : "No documents yet"} - onDelete={handleDelete} - uploadingFilenames={uploadingFilenames} - /> - </Modal> - <OwnerOnlyModal - open={!!ownerOnlyAction} - action={ownerOnlyAction ?? undefined} - onClose={() => setOwnerOnlyAction(null)} - /> - </> - ); -} diff --git a/frontend/src/app/components/shared/AddProjectDocsModal.tsx b/frontend/src/app/components/shared/AddProjectDocsModal.tsx deleted file mode 100644 index 88fe3b6..0000000 --- a/frontend/src/app/components/shared/AddProjectDocsModal.tsx +++ /dev/null @@ -1,261 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import { Check, Loader2, Search, Upload, X } from "lucide-react"; -import { getProject, uploadProjectDocument } from "@/app/lib/mikeApi"; -import type { Document } from "./types"; -import { DocFileIcon } from "./FileDirectory"; -import { VersionChip } from "./VersionChip"; -import { Modal } from "./Modal"; - -interface Props { - open: boolean; - onClose: () => void; - onSelect: (documents: Document[]) => void; - breadcrumb: string[]; - projectId: string; - /** Docs already in the target list — rendered checked + disabled. */ - excludeDocIds?: Set<string>; - allowMultiple?: boolean; -} - -function formatDate(iso: string | null) { - if (!iso) return null; - return new Date(iso).toLocaleDateString(undefined, { - day: "numeric", - month: "short", - year: "numeric", - }); -} - -export function AddProjectDocsModal({ - open, - onClose, - onSelect, - breadcrumb, - projectId, - excludeDocIds, - allowMultiple = true, -}: Props) { - const [docs, setDocs] = useState<Document[]>([]); - const [loading, setLoading] = useState(false); - const [search, setSearch] = useState(""); - const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set()); - const [uploading, setUploading] = useState(false); - const fileInputRef = useRef<HTMLInputElement>(null); - - useEffect(() => { - if (!open) return; - setSearch(""); - setSelectedIds(new Set()); - let cancelled = false; - setLoading(true); - getProject(projectId) - .then((p) => { - if (!cancelled) setDocs(p.documents ?? []); - }) - .catch(() => { - if (!cancelled) setDocs([]); - }) - .finally(() => { - if (!cancelled) setLoading(false); - }); - return () => { - cancelled = true; - }; - }, [open, projectId]); - - if (!open) return null; - - const q = search.toLowerCase().trim(); - const filtered = q - ? docs.filter((d) => d.filename.toLowerCase().includes(q)) - : docs; - - const isExcluded = (id: string) => !!excludeDocIds?.has(id); - - function toggle(id: string) { - if (isExcluded(id)) return; - if (!allowMultiple) { - setSelectedIds(new Set([id])); - return; - } - setSelectedIds((prev) => { - const next = new Set(prev); - next.has(id) ? next.delete(id) : next.add(id); - return next; - }); - } - - function handleConfirm() { - const selected = docs.filter((d) => selectedIds.has(d.id)); - onSelect(selected); - onClose(); - } - - async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) { - const files = Array.from(e.target.files || []); - if (!files.length) return; - setUploading(true); - try { - const uploaded = await Promise.all( - files.map((f) => uploadProjectDocument(projectId, f)), - ); - setDocs((prev) => [...uploaded, ...prev]); - setSelectedIds((prev) => { - const next = new Set(prev); - uploaded.forEach((d) => next.add(d.id)); - return next; - }); - } catch (err) { - console.error("Upload failed:", err); - } finally { - setUploading(false); - if (fileInputRef.current) fileInputRef.current.value = ""; - } - } - - return ( - <Modal - open={open} - onClose={onClose} - breadcrumbs={breadcrumb} - secondaryAction={{ - label: uploading ? "Uploading…" : "Upload", - icon: uploading ? ( - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - ) : ( - <Upload className="h-3.5 w-3.5" /> - ), - onClick: () => fileInputRef.current?.click(), - disabled: uploading, - }} - footerStatus={ - selectedIds.size > 0 ? ( - <span className="text-xs text-gray-400"> - {selectedIds.size} selected - </span> - ) : null - } - primaryAction={{ - label: "Confirm", - onClick: handleConfirm, - disabled: selectedIds.size === 0 || uploading, - }} - > - <input - ref={fileInputRef} - type="file" - accept=".pdf,.docx,.doc" - multiple - className="hidden" - onChange={handleUpload} - /> - {/* Search */} - <div className="pt-1 pb-2"> - <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"> - <Search className="h-3.5 w-3.5 text-gray-400 shrink-0" /> - <input - type="text" - placeholder="Search…" - value={search} - onChange={(e) => setSearch(e.target.value)} - className="flex-1 bg-transparent text-sm text-gray-700 placeholder:text-gray-400 outline-none" - autoFocus - /> - {search && ( - <button - onClick={() => setSearch("")} - className="text-gray-400 hover:text-gray-600" - > - <X className="h-3.5 w-3.5" /> - </button> - )} - </div> - </div> - - {/* File list */} - {loading ? ( - <div className="rounded-sm border border-gray-100 overflow-hidden"> - {[60, 45, 75, 55, 40].map((w, i) => ( - <div - key={i} - className="flex items-center gap-2 px-2 py-2" - > - <div className="h-3.5 w-3.5 rounded border border-gray-200 shrink-0" /> - <div className="h-3.5 w-3.5 rounded bg-gray-200 animate-pulse shrink-0" /> - <div - className="h-3 rounded bg-gray-200 animate-pulse" - style={{ width: `${w}%` }} - /> - </div> - ))} - </div> - ) : filtered.length === 0 ? ( - <p className="text-center text-sm text-gray-400 py-8"> - {q ? "No matches found" : "No documents in this project"} - </p> - ) : ( - <div className="rounded-sm border border-gray-100 overflow-hidden"> - {filtered.map((doc) => { - const excluded = isExcluded(doc.id); - const checked = excluded || selectedIds.has(doc.id); - return ( - <button - type="button" - key={doc.id} - disabled={excluded} - onClick={() => toggle(doc.id)} - className={`w-full flex items-center gap-2 px-2 py-2 text-xs text-left transition-colors ${ - excluded - ? "opacity-50 cursor-not-allowed" - : checked - ? "bg-gray-100" - : "hover:bg-gray-50" - }`} - > - <span - className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ - checked - ? "bg-gray-900 border-gray-900" - : "border-gray-300" - }`} - > - {checked && ( - <Check className="h-2.5 w-2.5 text-white" /> - )} - </span> - <DocFileIcon fileType={doc.file_type} /> - <span - className={`flex-1 truncate ${ - checked - ? "text-gray-900" - : "text-gray-700" - }`} - > - {doc.filename} - </span> - {excluded && ( - <span className="text-[10px] text-gray-400 shrink-0"> - Already added - </span> - )} - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number - } - /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate(doc.created_at)} - </span> - )} - </button> - ); - })} - </div> - )} - </Modal> - ); -} diff --git a/frontend/src/app/components/shared/ApiKeyMissingModal.tsx b/frontend/src/app/components/shared/ApiKeyMissingModal.tsx deleted file mode 100644 index d5f4676..0000000 --- a/frontend/src/app/components/shared/ApiKeyMissingModal.tsx +++ /dev/null @@ -1,45 +0,0 @@ -"use client"; - -import { useRouter } from "next/navigation"; -import { AlertTriangle } from "lucide-react"; -import { providerLabel, type ModelProvider } from "@/app/lib/modelAvailability"; -import { WarningPopup } from "./WarningPopup"; - -interface Props { - open: boolean; - onClose: () => void; - provider: ModelProvider | null; - /** Optional override for the body sentence. */ - message?: string; -} - -export function ApiKeyMissingModal({ open, onClose, provider, message }: Props) { - const router = useRouter(); - if (!open) return null; - - const providerName = provider ? providerLabel(provider) : "this provider"; - const body = - message ?? - `You haven't added a ${providerName} API key yet. Add one in your account settings to use this model.`; - - const handleGoToAccount = () => { - onClose(); - router.push("/account/models"); - }; - - return ( - <WarningPopup - open={open} - onClose={onClose} - title="API key required" - message={body} - icon={ - <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-red-600" /> - } - primaryAction={{ - label: "Go to account settings", - onClick: handleGoToAccount, - }} - /> - ); -} diff --git a/frontend/src/app/components/shared/AppSidebar.tsx b/frontend/src/app/components/shared/AppSidebar.tsx index 6b9f7d8..2dc6e35 100644 --- a/frontend/src/app/components/shared/AppSidebar.tsx +++ b/frontend/src/app/components/shared/AppSidebar.tsx @@ -126,7 +126,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { isOpen ? "w-64 h-[calc(100dvh-1rem)] md:h-[calc(100dvh-1.5rem)] bg-white/65" : "max-md:hidden w-14 md:h-[calc(100dvh-1.5rem)] md:bg-white/65 h-auto bg-transparent pointer-events-none md:pointer-events-auto", - "my-2 ml-2 mr-0 md:my-3 md:ml-3 md:mr-0 rounded-2xl border border-white/70 shadow-[0_-2px_7px_rgba(15,23,42,0.044),0_5px_12px_rgba(15,23,42,0.095),inset_0_1px_0_rgba(255,255,255,0.85)] backdrop-blur-2xl overflow-visible", + "my-2 ml-2 mr-0 md:my-3 md:ml-3 md:mr-0 rounded-2xl border border-white/70 shadow-[0_-1px_6px_rgba(15,23,42,0.034),0_4px_9px_rgba(15,23,42,0.074),inset_0_1px_0_rgba(255,255,255,0.85)] backdrop-blur-2xl overflow-visible", "flex flex-col transition-all duration-300 absolute md:relative z-[99]", )} > diff --git a/frontend/src/app/components/shared/ConfirmPopup.tsx b/frontend/src/app/components/shared/ConfirmPopup.tsx deleted file mode 100644 index 22be684..0000000 --- a/frontend/src/app/components/shared/ConfirmPopup.tsx +++ /dev/null @@ -1,117 +0,0 @@ -"use client"; - -import { createPortal } from "react-dom"; -import type { ReactNode } from "react"; -import { Loader2, Trash2 } from "lucide-react"; -import { cn } from "@/lib/utils"; - -type ConfirmStatus = "idle" | "loading" | "complete"; - -interface ConfirmPopupProps { - open: boolean; - title?: ReactNode; - message?: ReactNode; - confirmLabel?: ReactNode; - confirmStatus?: ConfirmStatus; - cancelLabel?: ReactNode; - onConfirm: () => void; - onCancel: () => void; - confirmDisabled?: boolean; - className?: string; -} - -export function ConfirmPopup({ - open, - title, - message, - confirmLabel = "Confirm", - confirmStatus = "idle", - cancelLabel = "Cancel", - onConfirm, - onCancel, - confirmDisabled = false, - className, -}: ConfirmPopupProps) { - if (!open) return null; - const confirmBusy = confirmStatus === "loading"; - const resolvedConfirmDisabled = confirmDisabled || confirmStatus !== "idle"; - const normalizedConfirmLabel = - typeof confirmLabel === "string" ? confirmLabel : "Confirm"; - const isDeleteAction = normalizedConfirmLabel.toLowerCase() === "delete"; - const resolvedConfirmLabel = - confirmStatus === "loading" ? ( - <span className="inline-flex h-full items-center gap-1.5"> - <Loader2 className="h-3 w-3 shrink-0 animate-spin" /> - {progressiveLabel(normalizedConfirmLabel)} - </span> - ) : confirmStatus === "complete" ? ( - completedLabel(normalizedConfirmLabel) - ) : isDeleteAction ? ( - <span className="inline-flex h-full items-center gap-1.5"> - <Trash2 className="h-3 w-3 shrink-0" /> - {confirmLabel} - </span> - ) : ( - confirmLabel - ); - - return createPortal( - <div className="pointer-events-none fixed inset-x-0 bottom-5 z-[230] flex justify-center px-4"> - <div - className={cn( - "pointer-events-auto w-[min(92vw,520px)] rounded-2xl border border-white/70 bg-white px-4 py-3 text-sm shadow-[0_4px_14px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.92)] backdrop-blur-2xl", - className, - )} - > - {title && ( - <div className="text-sm font-medium text-gray-950 mb-3"> - {title} - </div> - )} - {message && ( - <div - className={cn("text-xs text-gray-700", title && "mt-1")} - > - {message} - </div> - )} - <div className="mt-3 flex items-center justify-end gap-2"> - <button - type="button" - onClick={onCancel} - className="px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:text-gray-950" - > - {cancelLabel} - </button> - <button - type="button" - onClick={onConfirm} - disabled={resolvedConfirmDisabled} - className={cn( - "inline-flex h-7 items-center justify-center rounded-full px-3.5 text-xs font-medium leading-none text-white backdrop-blur-xl transition-all active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100", - isDeleteAction - ? "border border-red-700/35 bg-red-600/90 shadow-[0_3px_9px_rgba(127,29,29,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(127,29,29,0.18)] hover:bg-red-600" - : "border border-gray-700/40 bg-gray-950/88 shadow-[0_3px_9px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(15,23,42,0.2)] hover:bg-gray-900/90", - )} - aria-busy={confirmBusy} - > - {resolvedConfirmLabel} - </button> - </div> - </div> - </div>, - document.body, - ); -} - -function progressiveLabel(label: string) { - const lower = label.toLowerCase(); - if (lower.endsWith("e")) return `${label.slice(0, -1)}ing...`; - return `${label}ing...`; -} - -function completedLabel(label: string) { - const lower = label.toLowerCase(); - if (lower.endsWith("e")) return `${label}d`; - return `${label}ed`; -} diff --git a/frontend/src/app/components/shared/DocPanel.tsx b/frontend/src/app/components/shared/DocPanel.tsx deleted file mode 100644 index 5a7f8ec..0000000 --- a/frontend/src/app/components/shared/DocPanel.tsx +++ /dev/null @@ -1,559 +0,0 @@ -"use client"; - -import { useCallback, useEffect, useMemo, useState } from "react"; -import { Download, Loader2 } from "lucide-react"; -import { supabase } from "@/lib/supabase"; -import { applyOptimisticResolution } from "../assistant/EditCard"; -import { DocView } from "./DocView"; -import { DocxView } from "./DocxView"; -import { - RelevantQuotes, - type RelevantQuoteItem, -} from "./RelevantQuotes"; -import { - expandCitationToEntries, - formatCitationPage, - getDocumentCitationQuotes, -} from "./types"; -import type { - CitationQuote, - CitationAnnotation, - DocumentCitationAnnotation, - EditAnnotation, -} from "./types"; - -function isDocxFilename(name: string): boolean { - const ext = name.split(".").pop()?.toLowerCase(); - return ext === "docx" || ext === "doc"; -} - -/** - * Discriminated-union describing what the panel is showing above the viewer. - * - "document": title row + viewer. - * - "citation": title row + relevant quote + viewer. - * - "edit": title row + tracked change + viewer. - */ -export type DocPanelMode = - | { kind: "document" } - | { kind: "citation"; citation: CitationAnnotation } - | { - kind: "edit"; - edit: EditAnnotation; - /** - * True while an accept/reject request for this exact edit is in - * flight. Scoped per-edit (not per-document) so sibling edits on - * the same doc stay clickable. - */ - isEditReloading?: boolean; - onResolveStart?: (args: { - editId: string; - documentId: string; - verb: "accept" | "reject"; - }) => void; - onResolved?: (args: { - editId: string; - documentId: string; - status: "accepted" | "rejected"; - versionId: string | null; - downloadUrl: string | null; - }) => void; - onError?: (args: { - editId: string; - documentId: string; - versionId: string | null; - message: string; - }) => void; - }; - -interface Props { - documentId: string; - filename: string; - versionId: string | null; - versionNumber: number | null; - mode: DocPanelMode; - /** Spinner on the Download button while an accept/reject is in flight. */ - isReloading?: boolean; - warning?: string | null; - onWarningDismiss?: () => void; - initialScrollTop?: number | null; - onScrollChange?: (scrollTop: number) => void; -} - -/** - * Unified side-panel body for the assistant. Renders a single document - * with optionally a citation quote OR a tracked change highlighted above - * the viewer. No selector UI — caller picks the one thing to show; if the - * user wants a different citation/edit, the panel gets a new tab. - */ -export function DocPanel({ - documentId, - filename, - versionId, - versionNumber, - mode, - isReloading = false, - warning, - onWarningDismiss, - initialScrollTop, - onScrollChange, -}: Props) { - // Pick the viewer from the filename only, not from mode. Switching - // headers (citation ↔ edit ↔ document) for the same document must - // not unmount and remount the body — otherwise the user sees a full - // re-fetch every time they toggle. Tracked-change rendering still - // only lives in DocxView, which is fine because edits are DOCX-only. - const useDocxView = isDocxFilename(filename); - const citationQuoteId = - mode.kind === "citation" ? `document:${mode.citation.ref}:0` : null; - const [activeCitationQuoteId, setActiveCitationQuoteId] = useState< - string | null - >(citationQuoteId); - const [quoteFocusKey, setQuoteFocusKey] = useState(0); - - const quotes: CitationQuote[] | undefined = useMemo(() => { - if (mode.kind !== "citation") return undefined; - if (!activeCitationQuoteId) return []; - const selectedIndex = Number(activeCitationQuoteId.split(":").at(-1)); - if (!Number.isFinite(selectedIndex)) return []; - const selectedQuote = - getDocumentCitationQuotes(mode.citation)[selectedIndex]; - if (!selectedQuote) return []; - const documentCitation = mode.citation as DocumentCitationAnnotation; - return expandCitationToEntries({ - ...documentCitation, - page: selectedQuote.page, - quote: selectedQuote.quote, - quotes: [selectedQuote], - }); - }, [activeCitationQuoteId, citationQuoteId, mode]); - - useEffect(() => { - setActiveCitationQuoteId(citationQuoteId); - }, [citationQuoteId]); - - const handleCitationQuoteSelect = useCallback( - (quoteId: string) => { - const shouldSelect = activeCitationQuoteId !== quoteId; - setActiveCitationQuoteId(shouldSelect ? quoteId : null); - if (shouldSelect) setQuoteFocusKey((current) => current + 1); - }, - [activeCitationQuoteId], - ); - - const highlightEdit = useMemo(() => { - if (mode.kind !== "edit") return null; - return { - key: `${mode.edit.edit_id}`, - inserted_text: mode.edit.inserted_text, - deleted_text: mode.edit.deleted_text, - ins_w_id: mode.edit.ins_w_id ?? null, - del_w_id: mode.edit.del_w_id ?? null, - }; - }, [mode]); - - return ( - <div className="flex h-full flex-col"> - <DocumentTitleRow - documentId={documentId} - filename={filename} - versionId={versionId} - versionNumber={versionNumber} - isReloading={isReloading} - /> - - {mode.kind === "citation" && ( - <RelevantQuoteSection - citation={mode.citation} - filename={filename} - activeQuoteId={activeCitationQuoteId} - onQuoteSelect={handleCitationQuoteSelect} - /> - )} - - {mode.kind === "edit" && <TrackedChangeHeader mode={mode} />} - - <div className="flex flex-1 min-h-0 flex-col px-3 py-3"> - {useDocxView ? ( - <DocxView - documentId={documentId} - versionId={versionId ?? undefined} - quotes={quotes} - quoteFocusKey={quoteFocusKey} - highlightEdit={highlightEdit} - warning={warning ?? null} - onWarningDismiss={onWarningDismiss} - initialScrollTop={initialScrollTop ?? null} - onScrollChange={onScrollChange} - /> - ) : ( - <DocView - doc={{ - document_id: documentId, - version_id: versionId, - }} - quotes={quotes} - quoteFocusKey={quoteFocusKey} - /> - )} - </div> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Header variants -// --------------------------------------------------------------------------- - -function DocumentTitleRow({ - documentId, - filename, - versionId, - versionNumber, - isReloading, -}: { - documentId: string; - filename: string; - versionId: string | null; - versionNumber: number | null; - isReloading: boolean; -}) { - return ( - <div className="flex items-start gap-3 px-3 pt-4 pb-3"> - <div className="min-w-0 flex-1"> - <div className="flex min-w-0 flex-wrap items-center gap-2"> - <h2 - className="min-w-0 break-words font-serif text-xl text-gray-900" - title={filename} - > - {filename} - </h2> - {versionNumber && versionNumber > 0 && ( - <span className="shrink-0 inline-flex items-center rounded-md border border-gray-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-gray-600"> - V{versionNumber} - </span> - )} - </div> - </div> - <div className="shrink-0"> - <DownloadButton - documentId={documentId} - versionId={versionId} - filename={filename} - isReloading={isReloading} - /> - </div> - </div> - ); -} - -function SectionLabel({ children }: { children: React.ReactNode }) { - return <p className="text-xs font-medium text-gray-700">{children}</p>; -} - -function RelevantQuoteSection({ - citation, - filename, - activeQuoteId, - onQuoteSelect, -}: { - citation: CitationAnnotation; - filename: string; - activeQuoteId: string | null; - onQuoteSelect: (quoteId: string) => void; -}) { - const citationQuotes = getDocumentCitationQuotes(citation); - const pagesLabel = formatCitationPage(citation); - const citationText = [filename, pagesLabel].filter(Boolean).join(", "); - const relevantQuotes: RelevantQuoteItem[] = citationQuotes.map( - (quote, index) => { - const pageLabel = `Page ${quote.page}`; - return { - id: `document:${citation.ref}:${index}`, - quote: quote.quote.replaceAll("[[PAGE_BREAK]]", "..."), - inlineDetail: pageLabel, - citationText: [filename, pageLabel].filter(Boolean).join(", "), - }; - }, - ); - const currentIndex = Math.max( - 0, - relevantQuotes.findIndex((quote) => quote.id === activeQuoteId), - ); - - return ( - <RelevantQuotes - quotes={relevantQuotes} - activeQuoteId={activeQuoteId} - currentIndex={currentIndex} - citationRef={citation.ref} - citationText={citationText} - onSelect={(quote) => onQuoteSelect(quote.id)} - onIndexChange={(index) => { - const quote = relevantQuotes[index]; - if (quote) onQuoteSelect(quote.id); - }} - /> - ); -} - -function TrackedChangeHeader({ - mode, -}: { - mode: Extract<DocPanelMode, { kind: "edit" }>; -}) { - const { edit, isEditReloading, onResolveStart, onResolved, onError } = mode; - return ( - <div className="px-3 pb-3"> - <div className="flex items-center gap-2 mb-2"> - <SectionLabel>Tracked Change</SectionLabel> - <div className="ml-auto flex items-center gap-2 shrink-0"> - <EditResolveButtons - edit={edit} - isReloading={isEditReloading} - onResolveStart={onResolveStart} - onResolved={onResolved} - onError={onError} - /> - </div> - </div> - {edit.reason && ( - <p className="mb-2 text-xs text-gray-500">{edit.reason}</p> - )} - <div className="w-full rounded-md bg-gray-50 border border-gray-200 px-2 py-2"> - <div className="text-sm leading-relaxed font-serif"> - {edit.inserted_text && ( - <span className="text-green-700"> - {edit.inserted_text} - </span> - )} - {edit.deleted_text && ( - <span className="text-red-600 line-through"> - {edit.deleted_text} - </span> - )} - </div> - </div> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Accept / Reject controls -// --------------------------------------------------------------------------- - -function EditResolveButtons({ - edit, - isReloading, - onResolveStart, - onResolved, - onError, -}: { - edit: EditAnnotation; - /** - * True while an accept/reject for any edit on this document is in - * flight (triggered from here, the inline EditCard, the bulk bar, or - * elsewhere). Disables both buttons so the user can't double-submit - * while a resolution is racing to change the status. - */ - isReloading?: boolean; - onResolveStart?: (args: { - editId: string; - documentId: string; - verb: "accept" | "reject"; - }) => void; - onResolved?: (args: { - editId: string; - documentId: string; - status: "accepted" | "rejected"; - versionId: string | null; - downloadUrl: string | null; - }) => void; - onError?: (args: { - editId: string; - documentId: string; - versionId: string | null; - message: string; - }) => void; -}) { - const [busy, setBusy] = useState(false); - const [status, setStatus] = useState<"pending" | "accepted" | "rejected">( - edit.status, - ); - // Sync with the prop when this edit is resolved elsewhere (bulk - // accept/reject, inline per-edit card, another open panel for the same - // edit). Skips while our own request is in flight so we don't flicker. - useEffect(() => { - if (busy) return; - setStatus(edit.status); - }, [edit.status, edit.edit_id, busy]); - const resolved = status !== "pending"; - - const handle = useCallback( - async (verb: "accept" | "reject") => { - if (busy || resolved) return; - setBusy(true); - onResolveStart?.({ - editId: edit.edit_id, - documentId: edit.document_id, - verb, - }); - // Optimistically mutate the DOM in the open viewer so the - // change reflects immediately. Revert if the backend errors. - let revert: (() => void) | null = null; - try { - revert = applyOptimisticResolution(edit, verb); - } catch (e) { - console.error( - "[DocPanel] optimistic update threw", - e, - ); - } - try { - const { - data: { session }, - } = await supabase.auth.getSession(); - const token = session?.access_token; - const apiBase = - process.env.NEXT_PUBLIC_API_BASE_URL ?? - "http://localhost:3001"; - const resp = await fetch( - `${apiBase}/single-documents/${edit.document_id}/edits/${edit.edit_id}/${verb}`, - { - method: "POST", - headers: token - ? { Authorization: `Bearer ${token}` } - : undefined, - }, - ); - if (!resp.ok) throw new Error(`HTTP ${resp.status}`); - const data = (await resp.json()) as { - ok: boolean; - status?: "accepted" | "rejected"; - version_id: string | null; - download_url: string | null; - }; - const nextStatus = - data.status ?? - (verb === "accept" ? "accepted" : "rejected"); - setStatus(nextStatus); - onResolved?.({ - editId: edit.edit_id, - documentId: edit.document_id, - status: nextStatus, - versionId: data.version_id, - downloadUrl: data.download_url, - }); - } catch (e) { - console.error("[DocPanel] resolve failed", e); - try { - revert?.(); - } catch (revertErr) { - console.error( - "[DocPanel] revert threw", - revertErr, - ); - } - onError?.({ - editId: edit.edit_id, - documentId: edit.document_id, - versionId: edit.version_id ?? null, - message: - verb === "accept" - ? "Couldn't save accept — please retry." - : "Couldn't save reject — please retry.", - }); - } finally { - setBusy(false); - } - }, - [busy, resolved, edit, onResolveStart, onResolved, onError], - ); - - const inFlight = busy || !!isReloading; - return ( - <div className="flex items-center gap-2"> - <button - onClick={() => handle("accept")} - disabled={inFlight || resolved} - className="inline-flex items-center gap-1 rounded-lg border border-gray-900 bg-gray-900 px-2 py-1.5 text-xs font-medium text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed" - > - {status === "accepted" ? "Accepted" : "Accept"} - </button> - <button - onClick={() => handle("reject")} - disabled={inFlight || resolved} - className="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed" - > - {status === "rejected" ? "Rejected" : "Reject"} - </button> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Download button -// --------------------------------------------------------------------------- - -function DownloadButton({ - documentId, - versionId, - filename, - isReloading, -}: { - documentId: string; - versionId: string | null; - filename: string; - isReloading?: boolean; -}) { - const [busy, setBusy] = useState(false); - - const handleClick = async () => { - if (busy || isReloading) return; - setBusy(true); - try { - const { - data: { session }, - } = await supabase.auth.getSession(); - const token = session?.access_token; - const apiBase = - process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; - const qs = versionId - ? `?version_id=${encodeURIComponent(versionId)}` - : ""; - const resp = await fetch( - `${apiBase}/single-documents/${documentId}/docx${qs}`, - { - headers: token ? { Authorization: `Bearer ${token}` } : {}, - }, - ); - if (!resp.ok) throw new Error(`HTTP ${resp.status}`); - const blob = await resp.blob(); - const blobUrl = URL.createObjectURL(blob); - const a = document.createElement("a"); - a.href = blobUrl; - a.download = filename; - document.body.appendChild(a); - a.click(); - a.remove(); - setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); - } finally { - setBusy(false); - } - }; - - const spinning = busy || isReloading; - return ( - <button - onClick={handleClick} - disabled={spinning} - className="inline-flex items-center gap-1 rounded-lg border border-gray-200 px-2 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed" - > - {spinning ? ( - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - ) : ( - <Download className="h-3.5 w-3.5" /> - )} - Download - </button> - ); -} diff --git a/frontend/src/app/components/shared/DocView.tsx b/frontend/src/app/components/shared/DocView.tsx deleted file mode 100644 index 49ffa15..0000000 --- a/frontend/src/app/components/shared/DocView.tsx +++ /dev/null @@ -1,601 +0,0 @@ -"use client"; - -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { Loader2, ZoomIn, ZoomOut } from "lucide-react"; -import { useFetchSingleDoc } from "@/app/hooks/useFetchSingleDoc"; -import { DocxView } from "./DocxView"; -import type { CitationQuote } from "./types"; -import { - clearHighlights, - getPdfJs, - highlightQuote, - STANDARD_FONT_DATA_URL, -} from "./highlightQuote"; - -interface Props { - doc: { document_id: string; version_id?: string | null } | null; - /** Preferred: one or more (page, quote) pairs to highlight. */ - quotes?: CitationQuote[]; - /** Changes when the parent wants the current quote re-focused. */ - quoteFocusKey?: string | number; - /** Back-compat single-quote API. Ignored if `quotes` is provided. */ - quote?: string; - fallbackPage?: number; - rounded?: boolean; - bordered?: boolean; -} - -type QuoteEntry = { page?: number; quote: string }; - -const SIDE_PADDING = 20; -const ZOOM_MIN = 0.5; -const ZOOM_MAX = 3.0; -const ZOOM_STEP = 0.25; - -type RenderedPage = { - page: import("pdfjs-dist").PDFPageProxy; - viewport: import("pdfjs-dist").PageViewport; - wrapper: HTMLDivElement; - canvas: HTMLCanvasElement; - textDivs: HTMLElement[]; -}; - -export function DocView({ - doc, - quotes, - quoteFocusKey, - quote, - fallbackPage, - rounded = true, - bordered = true, -}: Props) { - const containerRef = useRef<HTMLDivElement>(null); - const scrollContainerRef = useRef<HTMLDivElement>(null); - const pdfDocRef = useRef<import("pdfjs-dist").PDFDocumentProxy | null>( - null, - ); - const renderedPagesRef = useRef<RenderedPage[]>([]); - const quoteListRef = useRef<QuoteEntry[]>([]); - const zoomRef = useRef(1.0); - const currentPageRef = useRef(1); - - const quoteList: QuoteEntry[] = useMemo(() => { - if (quotes?.length) - return quotes.map((q) => ({ page: q.page, quote: q.quote })); - if (quote) return [{ page: fallbackPage, quote }]; - return []; - }, [quotes, quote, fallbackPage]); - - // Stable string key so effects can depend on quote-list identity - const quoteKey = quoteList - .map((q) => `${q.page ?? ""}:${q.quote}`) - .join("|"); - - const [containerWidth, setContainerWidth] = useState(0); - const [zoom, setZoom] = useState(1.0); - const [currentPage, setCurrentPage] = useState(1); - const [numPages, setNumPages] = useState(0); - - const { result, loading, error } = useFetchSingleDoc( - doc?.document_id ?? null, - doc?.version_id ?? null, - ); - - // /display returned DOCX bytes — the active version has no PDF - // rendition, so fall back to docx-preview (still applies citation - // highlighting via the same `quotes` API). - const fallbackToDocx = result?.type === "docx"; - - // Track container width via ResizeObserver so re-renders fire on resize - useEffect(() => { - const el = scrollContainerRef.current; - if (!el) return; - const ro = new ResizeObserver((entries) => { - setContainerWidth(entries[0]?.contentRect.width ?? 0); - }); - ro.observe(el); - return () => ro.disconnect(); - }, []); - - // Track current page via scroll position - useEffect(() => { - const scrollEl = scrollContainerRef.current; - if (!scrollEl) return; - - const handleScroll = () => { - const pages = renderedPagesRef.current; - if (!pages.length) return; - const scrollCenter = scrollEl.scrollTop + scrollEl.clientHeight / 2; - let closest = 0; - let closestDist = Infinity; - pages.forEach((p, i) => { - const pageCenter = - p.wrapper.offsetTop + p.wrapper.clientHeight / 2; - const dist = Math.abs(pageCenter - scrollCenter); - if (dist < closestDist) { - closestDist = dist; - closest = i; - } - }); - currentPageRef.current = closest + 1; - setCurrentPage(closest + 1); - }; - - scrollEl.addEventListener("scroll", handleScroll, { passive: true }); - return () => scrollEl.removeEventListener("scroll", handleScroll); - }, []); - - // Highlights all entries in `list` across the already-rendered pages. - // Returns the 1-based page number of the first successfully highlighted entry, or null. - const applyHighlights = useCallback( - async (list: QuoteEntry[]): Promise<number | null> => { - // Clear any prior highlights across all pages - for (const p of renderedPagesRef.current) - clearHighlights(p.textDivs); - - let firstHitPage: number | null = null; - for (const entry of list) { - let hitPage: number | null = null; - - if (entry.page) { - const target = renderedPagesRef.current[entry.page - 1]; - if (target) { - const found = await highlightQuote( - target.textDivs, - entry.quote, - ); - if (found) hitPage = entry.page; - } - } - - // Fall back to scanning all pages for this quote - if (hitPage === null) { - console.warn( - `Quote not found on hinted page, scanning all pages: "${entry.quote.slice(0, 60)}..."`, - ); - for (let i = 0; i < renderedPagesRef.current.length; i++) { - const p = renderedPagesRef.current[i]; - const found = await highlightQuote( - p.textDivs, - entry.quote, - ); - if (found) { - hitPage = i + 1; - break; - } - } - } - - if (hitPage !== null && firstHitPage === null) { - firstHitPage = hitPage; - } - } - return firstHitPage; - }, - [], - ); - - const renderPDF = useCallback( - async ( - doc: import("pdfjs-dist").PDFDocumentProxy, - list: QuoteEntry[], - scrollToPage?: number, - ) => { - if (!containerRef.current) return; - containerRef.current.innerHTML = ""; - renderedPagesRef.current = []; - const lib = await getPdfJs(); - lib.TextLayer.cleanup(); - - setNumPages(doc.numPages); - setCurrentPage(1); - currentPageRef.current = 1; - - const hasCitation = list.length > 0; - if (hasCitation && scrollContainerRef.current) { - scrollContainerRef.current.style.opacity = "0"; - } - - const reveal = () => { - if (scrollContainerRef.current) - scrollContainerRef.current.style.opacity = "1"; - }; - - const panelW = containerRef.current.clientWidth; - const firstPage = await doc.getPage(1); - const naturalWidth = firstPage.getViewport({ scale: 1 }).width; - const baseScale = Math.max( - 0.5, - (panelW - SIDE_PADDING) / naturalWidth, - ); - const scale = baseScale * zoomRef.current; - - for (let pageNum = 1; pageNum <= doc.numPages; pageNum++) { - const page = await doc.getPage(pageNum); - const viewport = page.getViewport({ scale }); - - const wrapper = document.createElement("div"); - wrapper.style.position = "relative"; - wrapper.style.margin = "0 auto 8px"; - wrapper.style.width = "fit-content"; - wrapper.className = "shadow-md"; - - const canvas = document.createElement("canvas"); - canvas.width = viewport.width; - canvas.height = viewport.height; - canvas.style.display = "block"; - wrapper.appendChild(canvas); - containerRef.current?.appendChild(wrapper); - - const ctx = canvas.getContext("2d"); - if (!ctx) continue; - - const task = page.render({ canvasContext: ctx, viewport }); - try { - await task.promise; - } catch (e: unknown) { - if ( - (e as { name?: string })?.name !== - "RenderingCancelledException" - ) { - console.error("PDF render error", e); - } - continue; - } - - const textLayerDiv = document.createElement("div"); - textLayerDiv.className = "pdf-text-layer"; - textLayerDiv.style.position = "absolute"; - textLayerDiv.style.left = "0"; - textLayerDiv.style.top = "0"; - textLayerDiv.style.width = `${viewport.width}px`; - textLayerDiv.style.height = `${viewport.height}px`; - textLayerDiv.style.setProperty("--scale-factor", String(scale)); - wrapper.appendChild(textLayerDiv); - - const textLayer = new lib.TextLayer({ - textContentSource: page.streamTextContent(), - container: textLayerDiv, - viewport, - }); - await textLayer.render(); - const textDivs = textLayer.textDivs; - - renderedPagesRef.current.push({ - page, - viewport, - wrapper, - canvas, - textDivs, - }); - } - - // Apply highlights across all entries, then scroll to the first hit. - let targetPage: number | null = null; - if (list.length) { - targetPage = await applyHighlights(list); - if (targetPage === null) { - // Fallback: scroll to the first entry's page hint, even without a highlight - const hint = list.find((e) => e.page)?.page ?? null; - targetPage = hint; - } - } - if (targetPage && targetPage >= 1) { - scrollToHighlightOnPage(targetPage); - } else if (!hasCitation && scrollToPage && scrollToPage > 1) { - // Restore scroll position after zoom re-render - const pageEntry = renderedPagesRef.current[scrollToPage - 1]; - if (pageEntry) - pageEntry.wrapper.scrollIntoView({ - behavior: "instant" as ScrollBehavior, - block: "start", - }); - } - - reveal(); - }, - [applyHighlights], - ); - - // Scroll so the first highlight on `pageNum` lands at the vertical center - // of the viewer. We compute the scroll position explicitly on the scroll - // container — calling `scrollIntoView` on a child of the absolutely- - // positioned text layer can scroll just the overlay while leaving the - // canvas untouched, which is why we don't use it here. - function scrollToHighlightOnPage(pageNum: number) { - const pageEntry = renderedPagesRef.current[pageNum - 1]; - const scrollEl = scrollContainerRef.current; - if (!pageEntry || !scrollEl) return; - - const highlightEl = pageEntry.wrapper.querySelector<HTMLElement>( - ".pdf-text-highlight", - ); - if (highlightEl) { - const containerRect = scrollEl.getBoundingClientRect(); - const highlightRect = highlightEl.getBoundingClientRect(); - const offsetWithinContainer = highlightRect.top - containerRect.top; - const targetTop = - scrollEl.scrollTop + - offsetWithinContainer - - scrollEl.clientHeight / 2 + - highlightRect.height / 2; - scrollEl.scrollTo({ - top: Math.max(0, targetTop), - behavior: "instant" as ScrollBehavior, - }); - } else { - const wrapperRect = pageEntry.wrapper.getBoundingClientRect(); - const containerRect = scrollEl.getBoundingClientRect(); - const targetTop = - scrollEl.scrollTop + (wrapperRect.top - containerRect.top); - scrollEl.scrollTo({ - top: Math.max(0, targetTop), - behavior: "instant" as ScrollBehavior, - }); - } - } - - const rehighlightQuotes = useCallback( - async (list: QuoteEntry[]) => { - const targetPage = await applyHighlights(list); - const scrollPage = - targetPage ?? list.find((e) => e.page)?.page ?? null; - if (scrollPage && scrollPage >= 1) { - scrollToHighlightOnPage(scrollPage); - } - }, - [applyHighlights], - ); - - // Trackpad pinch-to-zoom (wheel + ctrlKey) - useEffect(() => { - const el = scrollContainerRef.current; - if (!el) return; - let debounceTimer: ReturnType<typeof setTimeout> | null = null; - - const handleWheel = (e: WheelEvent) => { - if (!e.ctrlKey) return; - e.preventDefault(); - const delta = e.deltaMode === 0 ? e.deltaY / 300 : e.deltaY * 0.1; - const next = Math.min( - ZOOM_MAX, - Math.max( - ZOOM_MIN, - Math.round(zoomRef.current * Math.exp(-delta) * 100) / 100, - ), - ); - if (next === zoomRef.current) return; - zoomRef.current = next; - setZoom(next); - if (debounceTimer) clearTimeout(debounceTimer); - debounceTimer = setTimeout(() => { - if (pdfDocRef.current) { - renderPDF( - pdfDocRef.current, - quoteListRef.current, - currentPageRef.current, - ); - } - }, 150); - }; - - el.addEventListener("wheel", handleWheel, { passive: false }); - return () => { - el.removeEventListener("wheel", handleWheel); - if (debounceTimer) clearTimeout(debounceTimer); - }; - }, [renderPDF]); - - // Touch pinch-to-zoom - useEffect(() => { - const el = scrollContainerRef.current; - if (!el) return; - let initialDist = 0; - let initialZoom = 1.0; - - function getTouchDist(touches: TouchList) { - const dx = touches[0].clientX - touches[1].clientX; - const dy = touches[0].clientY - touches[1].clientY; - return Math.hypot(dx, dy); - } - - const handleTouchStart = (e: TouchEvent) => { - if (e.touches.length === 2) { - initialDist = getTouchDist(e.touches); - initialZoom = zoomRef.current; - } - }; - - const handleTouchMove = (e: TouchEvent) => { - if (e.touches.length !== 2 || initialDist === 0) return; - e.preventDefault(); - const next = Math.min( - ZOOM_MAX, - Math.max( - ZOOM_MIN, - Math.round( - initialZoom * - (getTouchDist(e.touches) / initialDist) * - 100, - ) / 100, - ), - ); - zoomRef.current = next; - setZoom(next); - }; - - const handleTouchEnd = (e: TouchEvent) => { - if (e.touches.length < 2 && initialDist > 0) { - initialDist = 0; - if (pdfDocRef.current) { - renderPDF( - pdfDocRef.current, - quoteListRef.current, - currentPageRef.current, - ); - } - } - }; - - el.addEventListener("touchstart", handleTouchStart, { passive: true }); - el.addEventListener("touchmove", handleTouchMove, { passive: false }); - el.addEventListener("touchend", handleTouchEnd, { passive: true }); - return () => { - el.removeEventListener("touchstart", handleTouchStart); - el.removeEventListener("touchmove", handleTouchMove); - el.removeEventListener("touchend", handleTouchEnd); - }; - }, [renderPDF]); - - // Clean up PDF.js static font-measurement canvases on unmount - useEffect(() => { - return () => { - getPdfJs().then((lib) => lib.TextLayer.cleanup()); - }; - }, []); - - // Render PDF when fetch result arrives - useEffect(() => { - if (!result || result.type !== "pdf") return; - pdfDocRef.current = null; - renderedPagesRef.current = []; - quoteListRef.current = quoteList; - zoomRef.current = 1.0; - setZoom(1.0); - setNumPages(0); - const list = quoteList; - - let cancelled = false; - (async () => { - const lib = await getPdfJs(); - if (cancelled) return; - const pdfDoc = await lib.getDocument({ - data: new Uint8Array(result.buffer), - standardFontDataUrl: STANDARD_FONT_DATA_URL, - }).promise; - if (cancelled) return; - pdfDocRef.current = pdfDoc; - await renderPDF(pdfDoc, list); - })(); - return () => { - cancelled = true; - }; - }, [result, renderPDF]); // eslint-disable-line react-hooks/exhaustive-deps - - // Re-render at new scale when container is resized (debounced 150ms) - useEffect(() => { - if (!pdfDocRef.current) return; - const timer = setTimeout(() => { - if (pdfDocRef.current) { - renderPDF(pdfDocRef.current, quoteListRef.current); - } - }, 150); - return () => clearTimeout(timer); - }, [containerWidth, renderPDF]); // eslint-disable-line react-hooks/exhaustive-deps - - // Re-highlight when quotes change without full re-render - useEffect(() => { - if (!pdfDocRef.current) return; - quoteListRef.current = quoteList; - rehighlightQuotes(quoteList); - }, [quoteKey, quoteFocusKey, rehighlightQuotes]); // eslint-disable-line react-hooks/exhaustive-deps - - function handleZoomIn() { - const next = Math.min( - ZOOM_MAX, - Math.round((zoomRef.current + ZOOM_STEP) * 100) / 100, - ); - zoomRef.current = next; - setZoom(next); - if (pdfDocRef.current) { - renderPDF( - pdfDocRef.current, - quoteListRef.current, - currentPageRef.current, - ); - } - } - - function handleZoomOut() { - const next = Math.max( - ZOOM_MIN, - Math.round((zoomRef.current - ZOOM_STEP) * 100) / 100, - ); - zoomRef.current = next; - setZoom(next); - if (pdfDocRef.current) { - renderPDF( - pdfDocRef.current, - quoteListRef.current, - currentPageRef.current, - ); - } - } - - if (fallbackToDocx && doc?.document_id) { - return ( - <DocxView - documentId={doc.document_id} - versionId={doc.version_id ?? null} - quotes={quotes} - quoteFocusKey={quoteFocusKey} - rounded={rounded} - bordered={bordered} - /> - ); - } - - return ( - <div - className={`relative flex flex-col flex-1 overflow-hidden ${bordered ? "border border-gray-200" : ""} ${rounded ? "rounded-lg" : ""}`} - > - <div - ref={scrollContainerRef} - className="flex-1 overflow-auto bg-gray-100 px-3 pt-5 pb-3" - > - {loading && ( - <div className="flex h-full items-center justify-center"> - <Loader2 className="h-7 w-7 animate-spin text-gray-400" /> - </div> - )} - {error && ( - <div className="flex h-full items-center justify-center"> - <p className="text-sm text-red-500">{error}</p> - </div> - )} - <div ref={containerRef} /> - </div> - {numPages > 0 && ( - <> - {/* Page counter — bottom left */} - <div className="absolute bottom-4 left-4 pointer-events-none"> - <span className="flex items-center px-3 py-1.5 rounded-full text-xs font-medium tabular-nums text-gray-700 bg-white/25 backdrop-blur-md border border-white/30 shadow-md"> - {currentPage}/{numPages} - </span> - </div> - - {/* Zoom controls — bottom right */} - <div className="absolute bottom-4 right-4 flex items-center gap-px rounded-full bg-white/25 backdrop-blur-md border border-white/30 shadow-md px-1 py-1"> - <button - onClick={handleZoomOut} - disabled={zoom <= ZOOM_MIN} - className="flex items-center justify-center w-7 h-7 rounded-full text-gray-600 hover:bg-white/80 disabled:opacity-30 transition-colors" - > - <ZoomOut className="h-3.5 w-3.5" /> - </button> - <span className="text-xs font-medium text-gray-600 tabular-nums w-9 text-center select-none"> - {Math.round(zoom * 100)}% - </span> - <button - onClick={handleZoomIn} - disabled={zoom >= ZOOM_MAX} - className="flex items-center justify-center w-7 h-7 rounded-full text-gray-600 hover:bg-white/80 disabled:opacity-30 transition-colors" - > - <ZoomIn className="h-3.5 w-3.5" /> - </button> - </div> - </> - )} - </div> - ); -} diff --git a/frontend/src/app/components/shared/DocViewModal.tsx b/frontend/src/app/components/shared/DocViewModal.tsx deleted file mode 100644 index 0fb57e7..0000000 --- a/frontend/src/app/components/shared/DocViewModal.tsx +++ /dev/null @@ -1,101 +0,0 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { createPortal } from "react-dom"; -import { Download, Trash2, X } from "lucide-react"; -import { DocView } from "./DocView"; -import { getDocumentUrl } from "@/app/lib/mikeApi"; -import type { Document } from "./types"; - -interface Props { - doc: Document | null; - /** Optional specific version to display. Only honoured for DOCX. */ - versionId?: string | null; - /** Optional label suffix for the header (e.g. "V3"). */ - versionLabel?: string | null; - onClose: () => void; - onDelete?: (doc: Document) => void; -} - -export function DocViewModal({ - doc, - versionId, - versionLabel, - onClose, - onDelete, -}: Props) { - const [mounted, setMounted] = useState(false); - useEffect(() => setMounted(true), []); - - if (!doc || !mounted) return null; - - async function handleDownload() { - if (!doc) return; - const { url, filename } = await getDocumentUrl(doc.id, versionId ?? null); - const a = document.createElement("a"); - a.href = url; - a.download = filename; - a.click(); - } - - return createPortal( - <div - className="fixed inset-0 z-100 flex items-center justify-center bg-black/40" - onClick={onClose} - > - <div - className="relative flex flex-col bg-white rounded-xl shadow-2xl w-[800px] max-w-[90vw] h-[90vh]" - onClick={(e) => e.stopPropagation()} - > - {/* Header */} - <div className="flex items-center justify-between px-5 py-3 shrink-0"> - <span className="text-base font-medium font-serif text-gray-800 truncate pr-4"> - {doc.filename} - {versionLabel && ( - <span className="ml-2 text-xs font-normal text-gray-500"> - {versionLabel} - </span> - )} - </span> - <div className="flex items-center gap-1 shrink-0"> - <button - onClick={handleDownload} - className="flex items-center justify-center w-6 h-6 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-700 transition-colors" - > - <Download className="h-4 w-4" /> - </button> - {onDelete && ( - <button - onClick={() => { onDelete(doc); onClose(); }} - className="flex items-center justify-center w-6 h-6 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors" - > - <Trash2 className="h-4 w-4" /> - </button> - )} - <button - onClick={onClose} - className="flex items-center justify-center w-6 h-6 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-700 transition-colors" - > - <X className="h-4 w-4" /> - </button> - </div> - </div> - - {/* DocView serves PDF when available and falls back to - docx-preview internally if the active version has no - PDF rendition. Passing no versionId tells the backend - to resolve the latest tracked-changes version. */} - <div className="flex flex-col flex-1 overflow-hidden px-3 pb-3"> - <DocView - key={versionId ?? "current"} - doc={{ - document_id: doc.id, - version_id: versionId ?? null, - }} - /> - </div> - </div> - </div>, - document.body, - ); -} diff --git a/frontend/src/app/components/shared/DocumentCard.tsx b/frontend/src/app/components/shared/DocumentCard.tsx deleted file mode 100644 index abd01c6..0000000 --- a/frontend/src/app/components/shared/DocumentCard.tsx +++ /dev/null @@ -1,87 +0,0 @@ -"use client"; - -import { FileText, File, X, AlertCircle, Loader2 } from "lucide-react"; -import type { Document } from "./types"; - -interface Props { - document: Document; - onRemove?: (id: string) => void; - onClick?: (doc: Document) => void; - selected?: boolean; -} - -function FileIcon({ fileType }: { fileType: string | null }) { - if (fileType === "pdf") { - return <FileText className="h-4 w-4 text-red-600 shrink-0" />; - } - if (fileType === "docx" || fileType === "doc") { - return <File className="h-4 w-4 text-blue-600 shrink-0" />; - } - return <File className="h-4 w-4 text-gray-500 shrink-0" />; -} - -function formatBytes(bytes: number): string { - if (bytes < 1024) return `${bytes} B`; - if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; - return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; -} - -export function DocumentCard({ document, onRemove, onClick, selected }: Props) { - const isError = document.status === "error"; - const isProcessing = document.status === "pending" || document.status === "processing"; - const filename = document.filename; - - return ( - <div - onClick={() => onClick?.(document)} - className={[ - "flex items-center gap-2.5 rounded-lg border px-3 py-2.5 text-sm transition-colors", - onClick ? "cursor-pointer" : "", - selected - ? "border-blue-500 bg-blue-50" - : isError - ? "border-red-200 bg-red-50" - : "border-gray-200 bg-white hover:border-gray-300", - ].join(" ")} - > - {isProcessing ? ( - <Loader2 className="h-4 w-4 animate-spin text-gray-400 shrink-0" /> - ) : isError ? ( - <AlertCircle className="h-4 w-4 text-red-500 shrink-0" /> - ) : ( - <FileIcon fileType={document.file_type} /> - )} - - <div className="min-w-0 flex-1"> - <p className="truncate font-medium text-gray-800" title={filename}> - {filename} - </p> - <p className="text-xs text-gray-400"> - {isProcessing - ? "Processing…" - : isError - ? "Upload failed" - : [ - document.size_bytes != null ? formatBytes(document.size_bytes) : null, - document.page_count ? `${document.page_count}p` : null, - ] - .filter(Boolean) - .join(" · ")} - </p> - </div> - - {onRemove && !isProcessing && ( - <button - onClick={(e) => { - e.stopPropagation(); - onRemove(document.id); - }} - className="shrink-0 rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600" - aria-label="Remove document" - > - <X className="h-3.5 w-3.5" /> - </button> - )} - </div> - ); -} diff --git a/frontend/src/app/components/shared/DocxView.tsx b/frontend/src/app/components/shared/DocxView.tsx deleted file mode 100644 index c378f9d..0000000 --- a/frontend/src/app/components/shared/DocxView.tsx +++ /dev/null @@ -1,505 +0,0 @@ -"use client"; - -import { useEffect, useMemo, useRef } from "react"; -import { Loader2 } from "lucide-react"; -import { useFetchDocxBytes } from "@/app/hooks/useFetchDocxBytes"; -import { supabase } from "@/lib/supabase"; -import { - clearDocxQuoteHighlights, - highlightDocxQuote, -} from "./highlightDocxQuote"; -import type { CitationQuote } from "./types"; - -interface Props { - documentId: string; - versionId?: string | null; - /** - * Called once the document has been rendered to the DOM. Handy for - * scrolling to a particular tracked change after a re-render. - */ - onReady?: () => void; - /** - * Tracked-change to scroll to + briefly flash after each render. The - * `key` is used to re-trigger scrolling when the same edit is clicked - * twice in a row. - */ - highlightEdit?: { - key: string; - inserted_text?: string; - deleted_text?: string; - /** - * Numeric w:id values of the <w:ins>/<w:del> wrappers in - * document.xml. Preferred over text matching — uniquely identifies - * the right DOM element even when multiple edits share identical - * inserted/deleted text. `docx-preview` drops these during parsing, - * so we re-tag each rendered <ins>/<del> with data-w-id after load. - */ - ins_w_id?: string | null; - del_w_id?: string | null; - } | null; - /** - * Forces a byte re-fetch when it changes, even if documentId/versionId - * are stable. Used after accept/reject: the backend overwrites bytes at - * the same storage path (no new version row), so the hook has no other - * signal that the file changed. - */ - refetchKey?: number; - /** - * Citation quotes to highlight in the rendered output. The first match - * is scrolled into view. Page numbers are ignored — DOCX has no explicit - * pagination the renderer can match against. - */ - quotes?: CitationQuote[]; - /** Changes when the parent wants the current quote re-focused. */ - quoteFocusKey?: string | number; - /** - * Warning banner copy rendered in the top-left of the viewer. Used - * for non-blocking errors (e.g. "Accept failed — reverted"). - */ - warning?: string | null; - /** - * Called when the user dismisses the warning banner. - */ - onWarningDismiss?: () => void; - /** - * Scroll position to restore after the first render — used by parents - * that track per-tab scroll and want to re-enter at the same spot. - * Null/undefined means "no override" (preserve the pre-render scroll). - */ - initialScrollTop?: number | null; - /** - * Fires on scroll (throttled by rAF) so the parent can persist the - * current scrollTop against its tab state. - */ - onScrollChange?: (scrollTop: number) => void; - rounded?: boolean; - bordered?: boolean; -} - -function findEditElement( - root: HTMLElement, - tag: "ins" | "del", - opts: { w_id?: string | null; text?: string }, -): HTMLElement | null { - if (opts.w_id) { - const byId = root.querySelector( - `${tag}[data-w-id="${CSS.escape(opts.w_id)}"]`, - ) as HTMLElement | null; - if (byId) return byId; - } - const text = opts.text ?? ""; - const normalize = (s: string) => s.replace(/\s+/g, " ").trim(); - const target = normalize(text); - if (!target) return null; - const candidates = Array.from(root.querySelectorAll(tag)) as HTMLElement[]; - return ( - candidates.find((el) => normalize(el.textContent ?? "") === target) ?? - candidates.find((el) => - normalize(el.textContent ?? "").includes(target), - ) ?? - null - ); -} - -function scrollToHighlight( - container: HTMLElement, - scrollEl: HTMLElement, - edit: { - inserted_text?: string; - deleted_text?: string; - ins_w_id?: string | null; - del_w_id?: string | null; - }, -) { - const insEl = findEditElement(container, "ins", { - w_id: edit.ins_w_id, - text: edit.inserted_text, - }); - const delEl = findEditElement(container, "del", { - w_id: edit.del_w_id, - text: edit.deleted_text, - }); - const anchor = insEl ?? delEl; - if (!anchor) return; - - const scrollRect = scrollEl.getBoundingClientRect(); - const targetRect = anchor.getBoundingClientRect(); - const offset = targetRect.top - scrollRect.top + scrollEl.scrollTop - 80; - scrollEl.scrollTo({ top: Math.max(0, offset), behavior: "smooth" }); - - const flashed = [insEl, delEl].filter((el): el is HTMLElement => !!el); - flashed.forEach((el) => el.classList.add("docx-edit-flash")); - window.setTimeout(() => { - flashed.forEach((el) => el.classList.remove("docx-edit-flash")); - }, 2000); -} - -/** - * Fetch the ordered list of w:ids for every w:ins/w:del in the current - * version and tag each rendered <ins>/<del> with data-w-id. The backend - * returns ids in document order, and docx-preview emits <ins>/<del> - * in the same order, so we can align by index. - */ -async function tagWIdsOnRenderedDom( - container: HTMLElement, - documentId: string, - versionId: string | null | undefined, -): Promise<void> { - try { - const { - data: { session }, - } = await supabase.auth.getSession(); - const token = session?.access_token; - const apiBase = - process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; - const qs = versionId - ? `?version_id=${encodeURIComponent(versionId)}` - : ""; - const resp = await fetch( - `${apiBase}/single-documents/${documentId}/tracked-change-ids${qs}`, - { headers: token ? { Authorization: `Bearer ${token}` } : {} }, - ); - if (!resp.ok) { - console.warn( - "[DocxView] tracked-change-ids fetch failed", - resp.status, - ); - return; - } - const data = (await resp.json()) as { - ids: { kind: "ins" | "del"; w_id: string }[]; - }; - const domEls = Array.from( - container.querySelectorAll("ins, del"), - ) as HTMLElement[]; - const ids = data.ids ?? []; - let tagged = 0; - let mismatched = 0; - for (let i = 0; i < Math.min(domEls.length, ids.length); i++) { - const el = domEls[i]; - const info = ids[i]; - if (el.tagName.toLowerCase() !== info.kind) { - mismatched++; - continue; - } - el.setAttribute("data-w-id", info.w_id); - tagged++; - } - } catch (e) { - console.warn("[DocxView] tagWIdsOnRenderedDom failed", e); - } -} - -/** - * Renders a .docx in the browser using `docx-preview`. Tracked changes - * (`w:ins` / `w:del`) show up automatically with coloured strike/underline - * styling. Scroll position is preserved across re-renders so Accept/Reject - * doesn't jump the user back to the top. - */ -export function DocxView({ - documentId, - versionId, - onReady, - highlightEdit, - refetchKey, - quotes, - quoteFocusKey, - warning, - onWarningDismiss, - initialScrollTop, - onScrollChange, - rounded = true, - bordered = true, -}: Props) { - const scrollRef = useRef<HTMLDivElement>(null); - const containerRef = useRef<HTMLDivElement>(null); - const lastScrollTopRef = useRef(0); - const renderKeyRef = useRef(0); - // Ref-stabilize onReady and highlightEdit so the render effect only - // re-fires when `bytes` actually change. Without this, any parent - // re-render (e.g. clicking a new highlight) creates a new onReady - // identity, triggers a full re-render, and snaps scroll back to top. - const onReadyRef = useRef(onReady); - onReadyRef.current = onReady; - const highlightEditRef = useRef(highlightEdit); - highlightEditRef.current = highlightEdit; - const quotesRef = useRef(quotes); - quotesRef.current = quotes; - const initialScrollTopRef = useRef(initialScrollTop ?? null); - initialScrollTopRef.current = initialScrollTop ?? null; - const onScrollChangeRef = useRef(onScrollChange); - onScrollChangeRef.current = onScrollChange; - - // Stable key for the quote list so the re-highlight effect re-fires - // only when the actual text/order of quotes changes. - const quoteKey = useMemo( - () => (quotes ?? []).map((q) => q.quote).join("||"), - [quotes], - ); - - const { bytes, loading, error } = useFetchDocxBytes( - documentId, - versionId, - refetchKey, - ); - - /** - * Highlight every quote in `list` inside the rendered DOM and scroll - * the first match into view. Returns true if any match was found. - */ - const applyQuoteHighlights = ( - containerEl: HTMLElement, - scrollEl: HTMLElement, - list: CitationQuote[] | undefined, - ): boolean => { - clearDocxQuoteHighlights(containerEl); - if (!list || list.length === 0) return false; - - let firstMatch: HTMLElement | null = null; - for (const q of list) { - const match = highlightDocxQuote(containerEl, q.quote); - if (match && !firstMatch) firstMatch = match; - } - if (!firstMatch) return false; - - const scrollRect = scrollEl.getBoundingClientRect(); - const targetRect = firstMatch.getBoundingClientRect(); - const offset = - targetRect.top - - scrollRect.top + - scrollEl.scrollTop - - scrollEl.clientHeight / 2 + - targetRect.height / 2; - scrollEl.scrollTo({ - top: Math.max(0, offset), - behavior: "instant" as ScrollBehavior, - }); - return true; - }; - - /** - * docx-preview renders pages at their natural Word page width (e.g. - * ~816px for US Letter). When the side-panel is narrower than that, - * the page overflows horizontally. Apply CSS `zoom` on each - * section.docx so the document shrinks to fit — `zoom` (unlike - * `transform: scale`) also shrinks the layout box, so the scroll - * container's scrollHeight adapts. We zoom each page rather than the - * wrapper because docx-preview injects flex styles on `.docx-wrapper` - * that can interfere with wrapper-level zoom. - */ - const applyDocxScale = () => { - const containerEl = containerRef.current; - const scrollEl = scrollRef.current; - if (!containerEl || !scrollEl) return; - const wrapper = containerEl.querySelector<HTMLElement>(".docx-wrapper"); - if (!wrapper) return; - const sections = Array.from( - wrapper.querySelectorAll<HTMLElement>("section.docx"), - ); - if (sections.length === 0) return; - // Reset zoom on every page before measuring so offsetWidth reports - // each page's natural width (pages can have different widths — e.g. - // mixed portrait/landscape sections). - sections.forEach((s) => { - s.style.zoom = "1"; - }); - // Use the scroll container's content box (clientWidth - padding) - // as the available width. - const styles = window.getComputedStyle(scrollEl); - const padX = - (parseFloat(styles.paddingLeft) || 0) + - (parseFloat(styles.paddingRight) || 0); - const available = scrollEl.clientWidth - padX; - if (available <= 0) return; - // Scale each page independently against its own natural width so - // landscape/custom-size pages still fit without distorting the - // page dividers. - sections.forEach((s) => { - const w = s.offsetWidth; - if (!w) return; - const scale = Math.min(1, available / w); - s.style.zoom = String(scale); - }); - }; - - // Observe the scroll container (which tracks the side panel's width) - // and re-scale whenever it resizes. Also observe the docx container so - // we re-scale once docx-preview finishes inserting pages. - useEffect(() => { - const scrollEl = scrollRef.current; - const containerEl = containerRef.current; - if (!scrollEl || !containerEl) return; - let raf = 0; - const schedule = () => { - if (raf) cancelAnimationFrame(raf); - raf = requestAnimationFrame(() => applyDocxScale()); - }; - const ro = new ResizeObserver(schedule); - ro.observe(scrollEl); - ro.observe(containerEl); - return () => { - if (raf) cancelAnimationFrame(raf); - ro.disconnect(); - }; - }, []); - - useEffect(() => { - let cancelled = false; - if (!bytes || !containerRef.current || !scrollRef.current) return; - - const scrollEl = scrollRef.current; - const containerEl = containerRef.current; - - // Remember scroll position across re-renders so Accept/Reject stays put. - lastScrollTopRef.current = scrollEl.scrollTop; - const thisRender = ++renderKeyRef.current; - - (async () => { - try { - const { renderAsync } = await import("docx-preview"); - if (cancelled) return; - containerEl.innerHTML = ""; - await renderAsync(bytes, containerEl, undefined, { - inWrapper: true, - ignoreWidth: false, - ignoreHeight: false, - renderChanges: true, - experimental: true, - }); - if (cancelled) return; - await tagWIdsOnRenderedDom( - containerEl, - documentId, - versionId ?? null, - ); - if (cancelled) return; - // Scale to fit before scrolling so offsets are computed - // against the post-zoom layout. - applyDocxScale(); - requestAnimationFrame(() => { - if ( - !scrollRef.current || - thisRender !== renderKeyRef.current - ) - return; - const pendingHighlight = highlightEditRef.current; - const pendingQuotes = quotesRef.current; - const pendingInitialScroll = initialScrollTopRef.current; - if (pendingHighlight) { - scrollToHighlight( - containerEl, - scrollRef.current, - pendingHighlight, - ); - // Highlight quotes too, but don't override the edit scroll - if (pendingQuotes?.length) { - for (const q of pendingQuotes) - highlightDocxQuote(containerEl, q.quote); - } - } else if ( - pendingQuotes && - applyQuoteHighlights( - containerEl, - scrollRef.current, - pendingQuotes, - ) - ) { - // scrolled inside applyQuoteHighlights - } else if (typeof pendingInitialScroll === "number") { - scrollRef.current.scrollTop = pendingInitialScroll; - } else { - scrollRef.current.scrollTop = lastScrollTopRef.current; - } - onReadyRef.current?.(); - }); - } catch (e) { - console.error("docx-preview render failed", e); - } - })(); - - return () => { - cancelled = true; - }; - }, [bytes]); - - // Re-scroll/highlight if the target edit changes without a re-render - // (e.g. same doc, different edit clicked). - useEffect(() => { - if (!highlightEdit || !containerRef.current || !scrollRef.current) - return; - scrollToHighlight( - containerRef.current, - scrollRef.current, - highlightEdit, - ); - }, [highlightEdit?.key]); // eslint-disable-line react-hooks/exhaustive-deps - - // Re-apply quote highlights when the quote list changes without a full - // re-render (e.g. clicking a different citation on the same doc). - useEffect(() => { - if (!containerRef.current || !scrollRef.current) return; - applyQuoteHighlights( - containerRef.current, - scrollRef.current, - quotesRef.current, - ); - }, [quoteKey, quoteFocusKey]); // eslint-disable-line react-hooks/exhaustive-deps - - // Fire onScrollChange (rAF-throttled) so parents can persist scroll - // per-tab. We still maintain lastScrollTopRef locally for same-mount - // re-renders (Accept/Reject preserving scroll within one view). - useEffect(() => { - const el = scrollRef.current; - if (!el) return; - let scheduled = false; - const onScroll = () => { - lastScrollTopRef.current = el.scrollTop; - if (scheduled) return; - scheduled = true; - requestAnimationFrame(() => { - scheduled = false; - onScrollChangeRef.current?.(el.scrollTop); - }); - }; - el.addEventListener("scroll", onScroll, { passive: true }); - return () => el.removeEventListener("scroll", onScroll); - }, []); - - return ( - <div - className={`relative flex flex-col flex-1 overflow-hidden ${bordered ? "border border-gray-200" : ""} ${rounded ? "rounded-lg" : ""}`} - > - {warning && ( - <div className="absolute top-2 left-2 z-10 flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-2 py-1 text-xs text-amber-800 shadow-sm"> - <span>{warning}</span> - <button - type="button" - onClick={() => onWarningDismiss?.()} - className="text-amber-600 hover:text-amber-900" - aria-label="Dismiss warning" - > - × - </button> - </div> - )} - <div - ref={scrollRef} - className="flex-1 overflow-auto bg-gray-100 px-5 pt-5 pb-3 docx-view-scroll" - data-document-id={documentId} - data-version-id={versionId ?? ""} - > - {loading && !bytes && ( - <div className="flex h-full items-center justify-center"> - <Loader2 className="h-7 w-7 animate-spin text-gray-400" /> - </div> - )} - {error && ( - <div className="flex h-full items-center justify-center"> - <p className="text-sm text-red-500">{error}</p> - </div> - )} - <div ref={containerRef} className="docx-view-container" /> - </div> - </div> - ); -} diff --git a/frontend/src/app/components/shared/EmailPillInput.tsx b/frontend/src/app/components/shared/EmailPillInput.tsx deleted file mode 100644 index a74e158..0000000 --- a/frontend/src/app/components/shared/EmailPillInput.tsx +++ /dev/null @@ -1,117 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { X } from "lucide-react"; - -const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - -interface Props { - emails: string[]; - onChange: (emails: string[]) => void; - validate?: (email: string) => Promise<string | null>; - onValidatingChange?: (validating: boolean) => void; - placeholder?: string; - autoFocus?: boolean; -} - -export function EmailPillInput({ - emails, - onChange, - validate, - onValidatingChange, - placeholder = "Add by email…", - autoFocus = false, -}: Props) { - const [input, setInput] = useState(""); - const [validating, setValidating] = useState(false); - const [error, setError] = useState<string | null>(null); - - function setValidatingState(v: boolean) { - setValidating(v); - onValidatingChange?.(v); - } - - function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) { - if (e.key === "Enter" || e.key === ",") { - e.preventDefault(); - addEmail(); - } else if (e.key === "Backspace" && !input && emails.length > 0) { - onChange(emails.slice(0, -1)); - } - } - - async function addEmail() { - const email = input.trim().toLowerCase(); - if (!email) return; - if (emails.includes(email)) { - setInput(""); - return; - } - if (!EMAIL_RE.test(email)) { - setError("Enter a valid email address."); - return; - } - if (validate) { - setValidatingState(true); - setError(null); - try { - const err = await validate(email); - if (err) { - setError(err); - return; - } - } catch { - setError("Could not verify email. Try again."); - return; - } finally { - setValidatingState(false); - } - } - onChange([...emails, email]); - setInput(""); - setError(null); - } - - return ( - <div> - <div - className={`flex flex-wrap gap-1.5 rounded-lg border bg-gray-50 px-3 py-2 min-h-[40px] transition-colors ${ - error - ? "border-red-300 focus-within:border-red-400" - : "border-gray-200 focus-within:border-gray-400" - }`} - > - {emails.map((email) => ( - <span - key={email} - className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2.5 py-0.5 text-xs text-gray-700" - > - {email} - <button - type="button" - onClick={() => onChange(emails.filter((e) => e !== email))} - className="text-gray-400 hover:text-gray-700 transition-colors" - > - <X className="h-3 w-3" /> - </button> - </span> - ))} - <input - type="email" - value={input} - onChange={(e) => { - setInput(e.target.value); - setError(null); - }} - onKeyDown={handleKeyDown} - onBlur={addEmail} - placeholder={emails.length === 0 ? placeholder : ""} - className="flex-1 min-w-[160px] bg-transparent text-sm text-gray-700 placeholder:text-gray-400 outline-none" - autoFocus={autoFocus} - /> - </div> - {error && <p className="mt-1.5 text-xs text-red-500">{error}</p>} - {validating && <p className="mt-1.5 text-xs text-gray-400">Checking…</p>} - </div> - ); -} diff --git a/frontend/src/app/components/shared/FileDirectory.tsx b/frontend/src/app/components/shared/FileDirectory.tsx index ae81817..40e707c 100644 --- a/frontend/src/app/components/shared/FileDirectory.tsx +++ b/frontend/src/app/components/shared/FileDirectory.tsx @@ -5,14 +5,15 @@ import { Check, ChevronDown, ChevronRight, - File, - FileText, Folder, + FolderOpen, Trash2, Loader2, } from "lucide-react"; import type { Document, Project } from "./types"; import { VersionChip } from "./VersionChip"; +import { FileTypeIcon } from "./FileTypeIcon"; +import { SearchBar } from "@/components/ui/search-bar"; function formatDate(iso: string | null) { if (!iso) return null; @@ -24,9 +25,7 @@ function formatDate(iso: string | null) { } export function DocFileIcon({ fileType }: { fileType: string | null }) { - if (fileType === "pdf") - return <FileText className="h-3.5 w-3.5 text-red-500 shrink-0" />; - return <File className="h-3.5 w-3.5 text-blue-500 shrink-0" />; + return <FileTypeIcon fileType={fileType} className="h-3.5 w-3.5" />; } interface FileDirectoryProps { @@ -41,6 +40,10 @@ interface FileDirectoryProps { heading?: string; onDelete?: (ids: string[]) => void | Promise<void>; uploadingFilenames?: string[]; + searchable?: boolean; + searchPlaceholder?: string; + searchAutoFocus?: boolean; + searchNoResultsMessage?: string; } export function FileDirectory({ @@ -55,13 +58,52 @@ export function FileDirectory({ heading = "Documents", onDelete, uploadingFilenames = [], + searchable = false, + searchPlaceholder = "Search...", + searchAutoFocus = false, + searchNoResultsMessage = "No matches found", }: FileDirectoryProps) { const [expandedProjects, setExpandedProjects] = useState<Set<string>>( new Set(), ); const [deleting, setDeleting] = useState(false); + const [search, setSearch] = useState(""); const selectedCount = selectedIds.size; + const q = search.trim().toLowerCase(); + const visibleStandaloneDocs = q + ? standaloneDocs.filter((doc) => doc.filename.toLowerCase().includes(q)) + : standaloneDocs; + const visibleUploadingFilenames = q + ? uploadingFilenames.filter((filename) => + filename.toLowerCase().includes(q), + ) + : uploadingFilenames; + const visibleDirectoryProjects = q + ? directoryProjects + .map((project) => { + const docs = project.documents ?? []; + const projectMatches = + project.name.toLowerCase().includes(q) || + (project.cm_number ?? "").toLowerCase().includes(q); + return { + ...project, + documents: projectMatches + ? docs + : docs.filter((doc) => + doc.filename.toLowerCase().includes(q), + ), + }; + }) + .filter((project) => { + const docs = project.documents ?? []; + return ( + docs.length > 0 || + project.name.toLowerCase().includes(q) || + (project.cm_number ?? "").toLowerCase().includes(q) + ); + }) + : directoryProjects; async function handleDelete() { if (!onDelete || selectedCount === 0 || deleting) return; @@ -83,8 +125,8 @@ export function FileDirectory({ ]; const allStandaloneSelected = - standaloneDocs.length > 0 && - standaloneDocs.every((d) => selectedIds.has(d.id)); + visibleStandaloneDocs.length > 0 && + visibleStandaloneDocs.every((d) => selectedIds.has(d.id)); function toggle(docId: string) { if (!allowMultiple) { @@ -92,18 +134,22 @@ export function FileDirectory({ return; } const next = new Set(selectedIds); - next.has(docId) ? next.delete(docId) : next.add(docId); + if (next.has(docId)) { + next.delete(docId); + } else { + next.add(docId); + } onChange(next); } function toggleAll() { if (allStandaloneSelected) { const next = new Set(selectedIds); - standaloneDocs.forEach((d) => next.delete(d.id)); + visibleStandaloneDocs.forEach((d) => next.delete(d.id)); onChange(next); } else { const next = new Set(selectedIds); - standaloneDocs.forEach((d) => next.add(d.id)); + visibleStandaloneDocs.forEach((d) => next.add(d.id)); onChange(next); } } @@ -112,30 +158,43 @@ export function FileDirectory({ if (forceExpanded) return; setExpandedProjects((prev) => { const next = new Set(prev); - next.has(projectId) ? next.delete(projectId) : next.add(projectId); + if (next.has(projectId)) { + next.delete(projectId); + } else { + next.add(projectId); + } return next; }); } if (loading) { return ( - <div className="rounded-sm border border-gray-100 overflow-hidden"> + <div className="space-y-px"> + {searchable && ( + <SearchBar + value={search} + onValueChange={setSearch} + placeholder={searchPlaceholder} + autoFocus={searchAutoFocus} + wrapperClassName="mb-2" + /> + )} {/* Documents header skeleton */} - <div className="flex items-center justify-between px-2 py-2"> - <div className="h-3 w-20 rounded bg-gray-200 animate-pulse" /> - <div className="h-3 w-12 rounded bg-gray-200 animate-pulse" /> + <div className="flex items-center justify-between rounded-md px-2 py-2"> + <div className="h-3 w-20 rounded bg-gray-100 animate-pulse" /> + <div className="h-3 w-12 rounded bg-gray-100 animate-pulse" /> </div> {/* File rows skeleton */} <div> {[60, 45, 75, 55, 40].map((w, i) => ( <div key={i} - className="flex items-center gap-2 px-2 py-2" + className="flex items-center gap-2 rounded-md px-2 py-2" > <div className="h-3.5 w-3.5 rounded border border-gray-200 shrink-0" /> - <div className="h-3.5 w-3.5 rounded bg-gray-200 animate-pulse shrink-0" /> + <div className="h-3.5 w-3.5 rounded bg-gray-100 animate-pulse shrink-0" /> <div - className="h-3 rounded bg-gray-200 animate-pulse" + className="h-3 rounded bg-gray-100 animate-pulse" style={{ width: `${w}%` }} /> </div> @@ -151,215 +210,255 @@ export function FileDirectory({ uploadingFilenames.length === 0 ) { return ( - <p className="text-center text-sm text-gray-400 py-8"> - {emptyMessage} - </p> + <div> + {searchable && ( + <SearchBar + value={search} + onValueChange={setSearch} + placeholder={searchPlaceholder} + autoFocus={searchAutoFocus} + wrapperClassName="mb-2" + /> + )} + <p className="text-center text-sm text-gray-400 py-8"> + {emptyMessage} + </p> + </div> ); } return ( - <div className="rounded-sm border border-gray-100 overflow-hidden"> - <div> - {(standaloneDocs.length > 0 || - uploadingFilenames.length > 0 || - (onDelete && selectedCount > 0)) && ( - <div className="flex items-center justify-between px-2 py-2"> - <p className="text-xs font-medium text-gray-400"> - {heading} - </p> - <div className="flex items-center gap-3"> - {onDelete && selectedCount > 0 && ( - <button - type="button" - onClick={handleDelete} - disabled={deleting} - className="inline-flex items-center gap-1 text-xs text-red-500 hover:text-red-700 transition-colors disabled:opacity-50" - > - <Trash2 className="h-3 w-3" /> - Delete - </button> - )} - {standaloneDocs.length > 0 && ( - <button - type="button" - onClick={toggleAll} - className="text-xs text-gray-400 hover:text-gray-600 transition-colors" - > - {allStandaloneSelected - ? "Deselect all" - : "Select all"} - </button> - )} - </div> - </div> - )} - {uploadingFilenames.map((filename) => ( - <div - key={`uploading-${filename}`} - className="w-full flex items-center gap-2 px-2 py-2 text-xs text-left" - > - <span className="shrink-0 h-3.5 w-3.5 rounded border border-gray-300" /> - <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 shrink-0" /> - <span className="flex-1 truncate text-gray-400"> - {filename} - </span> - <span className="shrink-0 text-gray-300"> - Uploading - </span> - </div> - ))} - {standaloneDocs.map((doc) => { - const selected = selectedIds.has(doc.id); - return ( - <button - type="button" - key={doc.id} - onClick={() => toggle(doc.id)} - className={`w-full flex items-center gap-2 px-2 py-2 text-xs transition-colors text-left ${ - selected ? "bg-gray-100" : "hover:bg-gray-50" - }`} - > - <span - className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ - selected - ? "bg-gray-900 border-gray-900" - : "border-gray-300" - }`} - > - {selected && ( - <Check className="h-2.5 w-2.5 text-white" /> + <div className="space-y-2 rounded-sm"> + {searchable && ( + <SearchBar + value={search} + onValueChange={setSearch} + placeholder={searchPlaceholder} + autoFocus={searchAutoFocus} + /> + )} + {q && + visibleStandaloneDocs.length === 0 && + visibleDirectoryProjects.length === 0 && + visibleUploadingFilenames.length === 0 ? ( + <p className="text-center text-sm text-gray-400 py-8"> + {searchNoResultsMessage} + </p> + ) : ( + <div> + {(visibleStandaloneDocs.length > 0 || + visibleUploadingFilenames.length > 0 || + (onDelete && selectedCount > 0)) && ( + <div className="flex items-center justify-between px-2 py-2"> + <p className="text-xs font-medium text-gray-400"> + {heading} + </p> + <div className="flex items-center gap-3"> + {onDelete && selectedCount > 0 && ( + <button + type="button" + onClick={handleDelete} + disabled={deleting} + className="inline-flex items-center gap-1 text-xs text-red-500 hover:text-red-700 transition-colors disabled:opacity-50" + > + <Trash2 className="h-3 w-3" /> + Delete + </button> )} + {visibleStandaloneDocs.length > 0 && ( + <button + type="button" + onClick={toggleAll} + className="text-xs text-gray-400 hover:text-gray-600 transition-colors" + > + {allStandaloneSelected + ? "Deselect all" + : "Select all"} + </button> + )} + </div> + </div> + )} + {visibleUploadingFilenames.map((filename) => ( + <div + key={`uploading-${filename}`} + className="w-full flex items-center gap-2 px-2 py-2 text-xs text-left" + > + <span className="shrink-0 h-3.5 w-3.5 rounded border border-gray-300" /> + <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 shrink-0" /> + <span className="flex-1 truncate text-gray-400"> + {filename} </span> - <DocFileIcon fileType={doc.file_type} /> - <span - className={`flex-1 truncate ${ - selected ? "text-gray-900" : "text-gray-700" - }`} - > - {doc.filename} + <span className="shrink-0 text-gray-300"> + Uploading </span> - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number - } - /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate(doc.created_at)} - </span> - )} - </button> - ); - })} - - {standaloneDocs.length > 0 && directoryProjects.length > 0 && ( - <div className="border-t border-gray-100 py-2 px-2"> - <p className="text-xs font-medium text-gray-400"> - Projects - </p> - </div> - )} - - {directoryProjects.map((project) => { - const isExpanded = - forceExpanded || expandedProjects.has(project.id); - const docs = project.documents ?? []; - return ( - <div key={project.id}> + </div> + ))} + {visibleStandaloneDocs.map((doc) => { + const selected = selectedIds.has(doc.id); + return ( <button type="button" - onClick={() => toggleFolder(project.id)} - className="w-full flex items-center gap-2 px-2 py-2 text-xs hover:bg-gray-50 transition-colors text-left" + key={doc.id} + onClick={() => toggle(doc.id)} + className={`w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left ${ + selected + ? "bg-gray-100" + : "hover:bg-gray-100/70" + }`} > - {isExpanded ? ( - <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" /> - ) : ( - <ChevronRight className="h-3 w-3 text-gray-400 shrink-0" /> - )} - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - <span className="flex-1 truncate font-medium text-gray-700"> - {project.name} - {project.cm_number && ( - <span className="ml-1 font-normal text-gray-400"> - (#{project.cm_number}) - </span> + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + selected + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {selected && ( + <Check className="h-2.5 w-2.5 text-white" /> )} </span> - <span className="text-xs text-gray-400 shrink-0"> - {docs.length} + <DocFileIcon fileType={doc.file_type} /> + <span + className={`flex-1 truncate ${ + selected + ? "text-gray-900" + : "text-gray-700" + }`} + > + {doc.filename} </span> + <VersionChip + n={ + doc.active_version_number ?? + doc.latest_version_number + } + /> + {doc.created_at && ( + <span className="shrink-0 text-gray-300"> + {formatDate(doc.created_at)} + </span> + )} </button> - {isExpanded && ( - <div> - {docs.length === 0 ? ( - <p className="pl-7 py-1 text-xs text-gray-400"> - Empty - </p> + ); + })} + + {visibleStandaloneDocs.length > 0 && + visibleDirectoryProjects.length > 0 && ( + <div className="py-2 px-2 mt-2"> + <p className="text-xs font-medium text-gray-400"> + Projects + </p> + </div> + )} + + {visibleDirectoryProjects.map((project) => { + const isExpanded = + forceExpanded || + !!q || + expandedProjects.has(project.id); + const docs = project.documents ?? []; + return ( + <div key={project.id}> + <button + type="button" + onClick={() => toggleFolder(project.id)} + className="w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left hover:bg-gray-100/70" + > + {isExpanded ? ( + <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" /> ) : ( - docs.map((doc) => { - const selected = selectedIds.has( - doc.id, - ); - return ( - <button - type="button" - key={doc.id} - onClick={() => - toggle(doc.id) - } - className={`w-full flex items-center gap-2 pl-7 pr-2 py-2 text-xs transition-colors text-left ${ - selected - ? "bg-gray-100" - : "hover:bg-gray-50" - }`} - > - <span - className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ - selected - ? "bg-gray-900 border-gray-900" - : "border-gray-300" - }`} - > - {selected && ( - <Check className="h-2.5 w-2.5 text-white" /> - )} - </span> - <DocFileIcon - fileType={doc.file_type} - /> - <span - className={`flex-1 truncate min-w-0 ${ - selected - ? "text-gray-900 font-medium" - : "text-gray-700" - }`} - > - {doc.filename} - </span> - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number + <ChevronRight className="h-3 w-3 text-gray-400 shrink-0" /> + )} + {isExpanded ? ( + <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + ) : ( + <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + )} + <span className="flex-1 truncate font-medium text-gray-700"> + {project.name} + {project.cm_number && ( + <span className="ml-1 font-normal text-gray-400"> + (#{project.cm_number}) + </span> + )} + </span> + <span className="text-xs text-gray-400 shrink-0"> + {docs.length} + </span> + </button> + {isExpanded && ( + <div> + {docs.length === 0 ? ( + <p className="pl-7 py-1 text-xs text-gray-400"> + Empty + </p> + ) : ( + docs.map((doc) => { + const selected = + selectedIds.has(doc.id); + return ( + <button + type="button" + key={doc.id} + onClick={() => + toggle(doc.id) } - /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate( - doc.created_at, + className={`w-full rounded-md flex items-center gap-2 pl-7 pr-2 py-2 text-xs transition-all text-left ${ + selected + ? "bg-gray-100" + : "hover:bg-gray-100/70" + }`} + > + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + selected + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {selected && ( + <Check className="h-2.5 w-2.5 text-white" /> )} </span> - )} - </button> - ); - }) - )} - </div> - )} - </div> - ); - })} - </div> + <DocFileIcon + fileType={ + doc.file_type + } + /> + <span + className={`flex-1 truncate min-w-0 ${ + selected + ? "text-gray-900" + : "text-gray-700" + }`} + > + {doc.filename} + </span> + <VersionChip + n={ + doc.active_version_number ?? + doc.latest_version_number + } + /> + {doc.created_at && ( + <span className="shrink-0 text-gray-300"> + {formatDate( + doc.created_at, + )} + </span> + )} + </button> + ); + }) + )} + </div> + )} + </div> + ); + })} + </div> + )} </div> ); } diff --git a/frontend/src/app/components/shared/FileTypeIcon.tsx b/frontend/src/app/components/shared/FileTypeIcon.tsx new file mode 100644 index 0000000..0687e06 --- /dev/null +++ b/frontend/src/app/components/shared/FileTypeIcon.tsx @@ -0,0 +1,49 @@ +import { File, FileChartPie, FileSpreadsheet, FileText } from "lucide-react"; + +export type FileTypeKind = "pdf" | "word" | "excel" | "ppt" | "other"; + +/** + * Normalize a file_type value (e.g. "pdf") or a filename (e.g. "deck.pptx") + * into a coarse kind used to pick an icon. Accepts both because some call + * sites only have the filename (user-message files, citations) while others + * carry the document's `file_type` field. + */ +export function fileTypeKind(value: string | null | undefined): FileTypeKind { + const raw = (value ?? "").toLowerCase().trim(); + const ext = raw.includes(".") ? (raw.split(".").pop() ?? "") : raw; + if (ext === "pdf") return "pdf"; + if (ext === "docx" || ext === "doc") return "word"; + if (ext === "xlsx" || ext === "xlsm" || ext === "xls") return "excel"; + if (ext === "pptx" || ext === "ppt") return "ppt"; + return "other"; +} + +/** + * Canonical document file-type icon. Size and any extra classes come from + * `className`; `shrink-0` is always applied. `muted` renders a neutral grey + * placeholder (used for loading/disabled rows). + */ +export function FileTypeIcon({ + fileType, + className = "h-3.5 w-3.5", + muted = false, +}: { + fileType: string | null | undefined; + className?: string; + muted?: boolean; +}) { + const cls = `${className} shrink-0`; + if (muted) return <File className={`${cls} text-gray-300`} />; + switch (fileTypeKind(fileType)) { + case "pdf": + return <FileText className={`${cls} text-red-500`} />; + case "word": + return <File className={`${cls} text-blue-500`} />; + case "excel": + return <FileSpreadsheet className={`${cls} text-emerald-500`} />; + case "ppt": + return <FileChartPie className={`${cls} text-red-500`} />; + default: + return <File className={`${cls} text-gray-500`} />; + } +} diff --git a/frontend/src/app/components/shared/MfaLoginGate.tsx b/frontend/src/app/components/shared/MfaLoginGate.tsx index 1cf06b5..4cf242c 100644 --- a/frontend/src/app/components/shared/MfaLoginGate.tsx +++ b/frontend/src/app/components/shared/MfaLoginGate.tsx @@ -4,7 +4,7 @@ import { useEffect, useState, type ReactNode } from "react"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useAuth } from "@/contexts/AuthContext"; import { useUserProfile } from "@/contexts/UserProfileContext"; -import { needsMfaVerification } from "./MfaVerificationPopup"; +import { needsMfaVerification } from "../popups/MfaVerificationPopup"; type GateState = "idle" | "checking" | "required" | "verified"; const MFA_VERIFIED_AT_KEY = "mike:mfa-verified-at"; diff --git a/frontend/src/app/components/shared/MfaVerificationPopup.tsx b/frontend/src/app/components/shared/MfaVerificationPopup.tsx deleted file mode 100644 index 2bd3e0e..0000000 --- a/frontend/src/app/components/shared/MfaVerificationPopup.tsx +++ /dev/null @@ -1,294 +0,0 @@ -"use client"; - -import { - useEffect, - useRef, - useState, - type ClipboardEvent, - type KeyboardEvent, -} from "react"; -import { Loader2 } from "lucide-react"; -import { supabase } from "@/lib/supabase"; -import { Modal } from "@/app/components/shared/Modal"; - -type MfaFactor = { - id: string; - friendly_name?: string | null; - factor_type: string; -}; - -const isDev = process.env.NODE_ENV !== "production"; -const devLog = (...args: Parameters<typeof console.log>) => { - if (isDev) console.log(...args); -}; - -export async function needsMfaVerification() { - const { data, error } = - await supabase.auth.mfa.getAuthenticatorAssuranceLevel(); - if (error) throw error; - return data.nextLevel === "aal2" && data.currentLevel !== "aal2"; -} - -interface MfaVerificationPopupProps { - open: boolean; - onCancel: () => void; - onVerified: () => void; - title?: string; - message?: string; -} - -export function MfaVerificationPopup({ - open, - onCancel, - onVerified, - title = "Two-factor verification required", - message = "Enter a code from your authenticator app to continue.", -}: MfaVerificationPopupProps) { - const [factors, setFactors] = useState<MfaFactor[]>([]); - const [selectedFactorId, setSelectedFactorId] = useState(""); - const [code, setCode] = useState(""); - const [loading, setLoading] = useState(false); - const [verifying, setVerifying] = useState(false); - const [error, setError] = useState<string | null>(null); - const canVerify = - !verifying && - !loading && - !!selectedFactorId && - code.trim().length === 6; - - useEffect(() => { - if (!open) return; - let cancelled = false; - devLog("[mfa-popup] opened"); - - async function loadFactors() { - setLoading(true); - setError(null); - setCode(""); - const { data, error: listError } = - await supabase.auth.mfa.listFactors(); - if (cancelled) return; - if (listError) { - devLog("[mfa-popup] list factors failed", { - error: listError.message, - }); - setError(listError.message); - setFactors([]); - setSelectedFactorId(""); - } else { - const verified = (data.totp ?? []) as MfaFactor[]; - devLog("[mfa-popup] factors loaded", { - totpCount: verified.length, - selectedFactorId: verified[0]?.id ?? null, - }); - setFactors(verified); - setSelectedFactorId(verified[0]?.id ?? ""); - } - setLoading(false); - } - - void loadFactors(); - return () => { - cancelled = true; - }; - }, [open]); - - async function verify() { - if (!canVerify) return; - - setVerifying(true); - setError(null); - devLog("[mfa-popup] verifying code", { factorId: selectedFactorId }); - const { error: verifyError } = - await supabase.auth.mfa.challengeAndVerify({ - factorId: selectedFactorId, - code: code.trim(), - }); - setVerifying(false); - - if (verifyError) { - devLog("[mfa-popup] verification failed", { - error: verifyError.message, - }); - setError(verifyError.message); - return; - } - - devLog("[mfa-popup] verification succeeded"); - setCode(""); - onVerified(); - } - - if (!open) return null; - - return ( - <Modal - open={open} - onClose={onCancel} - title={title} - size="sm" - className="h-auto min-h-[310px] max-h-[min(92vh,400px)]" - cancelAction={{ - label: "Cancel", - onClick: onCancel, - disabled: verifying, - }} - primaryAction={{ - label: verifying ? ( - <span className="inline-flex items-center gap-1.5"> - <Loader2 className="h-3 w-3 animate-spin" /> - Verifying... - </span> - ) : ( - "Verify" - ), - onClick: () => void verify(), - disabled: !canVerify, - }} - > - <div className="space-y-5 pb-2 pt-0"> - <p className="text-sm text-gray-500 pb-6">{message}</p> - {loading ? ( - <div className="flex h-13 items-center justify-center text-sm text-gray-500"> - <Loader2 className="mr-2 h-4 w-4 animate-spin" /> - Loading authenticator... - </div> - ) : factors.length === 0 ? ( - <p className="rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600"> - No verified authenticator factor is available for this - session. - </p> - ) : ( - <div className="space-y-4"> - {factors.length > 1 && ( - <select - value={selectedFactorId} - onChange={(event) => - setSelectedFactorId(event.target.value) - } - className="h-9 w-full rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none focus-visible:ring-2 focus-visible:ring-gray-300/45" - > - {factors.map((factor) => ( - <option key={factor.id} value={factor.id}> - {factor.friendly_name || - "Authenticator app"} - </option> - ))} - </select> - )} - <VerificationCodeInput - value={code} - onChange={setCode} - disabled={verifying} - autoFocus={open && !loading} - onSubmit={() => void verify()} - canSubmit={canVerify} - /> - </div> - )} - {error && <p className="text-xs text-red-600">{error}</p>} - </div> - </Modal> - ); -} - -export function VerificationCodeInput({ - value, - onChange, - disabled, - autoFocus, - onSubmit, - canSubmit, -}: { - value: string; - onChange: (value: string) => void; - disabled?: boolean; - autoFocus?: boolean; - onSubmit?: () => void; - canSubmit?: boolean; -}) { - const inputsRef = useRef<Array<HTMLInputElement | null>>([]); - const digits = Array.from({ length: 6 }, (_, index) => value[index] ?? ""); - - useEffect(() => { - if (!autoFocus || disabled) return; - const focusTimer = window.setTimeout(() => { - const firstEmptyIndex = digits.findIndex((digit) => !digit); - inputsRef.current[ - firstEmptyIndex === -1 ? 0 : firstEmptyIndex - ]?.focus(); - }, 0); - return () => window.clearTimeout(focusTimer); - }, [autoFocus, disabled]); - - function updateDigit(index: number, nextValue: string) { - const digit = nextValue.replace(/\D/g, "").slice(-1); - const nextDigits = [...digits]; - nextDigits[index] = digit; - onChange(nextDigits.join("")); - if (digit && index < inputsRef.current.length - 1) { - inputsRef.current[index + 1]?.focus(); - } - } - - function handlePaste(event: ClipboardEvent<HTMLInputElement>) { - event.preventDefault(); - const pasted = event.clipboardData - .getData("text") - .replace(/\D/g, "") - .slice(0, 6); - if (!pasted) return; - onChange(pasted); - inputsRef.current[Math.min(pasted.length, 6) - 1]?.focus(); - } - - function handleKeyDown( - event: KeyboardEvent<HTMLInputElement>, - index: number, - ) { - if (event.key === "Enter") { - event.preventDefault(); - if (canSubmit) onSubmit?.(); - return; - } - if (event.key === "Backspace" && !digits[index] && index > 0) { - inputsRef.current[index - 1]?.focus(); - } - if (event.key === "ArrowLeft" && index > 0) { - event.preventDefault(); - inputsRef.current[index - 1]?.focus(); - } - if (event.key === "ArrowRight" && index < digits.length - 1) { - event.preventDefault(); - inputsRef.current[index + 1]?.focus(); - } - } - - return ( - <div - className="flex justify-center gap-2" - role="group" - aria-label="Six digit verification code" - > - {digits.map((digit, index) => ( - <input - key={index} - ref={(element) => { - inputsRef.current[index] = element; - }} - type="text" - inputMode="numeric" - autoComplete={index === 0 ? "one-time-code" : "off"} - value={digit} - disabled={disabled} - onChange={(event) => updateDigit(index, event.target.value)} - onPaste={handlePaste} - onKeyDown={(event) => handleKeyDown(event, index)} - className="h-13 w-12 rounded-lg border border-gray-300 bg-gray-50 text-center text-2xl font-medium font-serif text-gray-950 shadow-none outline-none transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-300/45 disabled:cursor-not-allowed disabled:opacity-45" - aria-label={`Verification code digit ${index + 1}`} - maxLength={1} - /> - ))} - </div> - ); -} diff --git a/frontend/src/app/components/shared/Modal.tsx b/frontend/src/app/components/shared/Modal.tsx deleted file mode 100644 index b5b518d..0000000 --- a/frontend/src/app/components/shared/Modal.tsx +++ /dev/null @@ -1,208 +0,0 @@ -"use client"; - -import { createPortal } from "react-dom"; -import type { ButtonHTMLAttributes, ReactNode } from "react"; -import { X } from "lucide-react"; -import { cn } from "@/lib/utils"; - -type ModalSize = "sm" | "md" | "lg" | "xl"; -type ModalAction = Omit< - ButtonHTMLAttributes<HTMLButtonElement>, - "className" -> & { - label: ReactNode; - icon?: ReactNode; - variant?: "primary" | "secondary" | "danger"; -}; - -interface ModalProps { - open: boolean; - onClose: () => void; - children: ReactNode; - breadcrumbs?: ReactNode[]; - title?: ReactNode; - icon?: ReactNode; - headerAction?: ReactNode; - size?: ModalSize; - className?: string; - footerInfo?: ReactNode; - footerStatus?: ReactNode; - primaryAction?: ModalAction; - secondaryAction?: ModalAction; - cancelAction?: ModalAction | false; -} - -const sizeClassName: Record<ModalSize, string> = { - sm: "max-w-md", - md: "max-w-xl", - lg: "max-w-2xl", - xl: "max-w-4xl", -}; - -export function Modal({ - open, - onClose, - children, - breadcrumbs, - title, - icon, - headerAction, - size = "lg", - className, - footerInfo, - footerStatus, - primaryAction, - secondaryAction, - cancelAction, -}: ModalProps) { - const hasHeader = breadcrumbs?.length || title || icon; - const hasFooter = - footerInfo || - footerStatus || - primaryAction || - secondaryAction || - cancelAction; - const resolvedCancelAction = - cancelAction === undefined && primaryAction - ? { label: "Cancel", onClick: onClose } - : cancelAction; - - if (!open) return null; - - return createPortal( - <div - className={cn( - "fixed inset-0 z-[200] flex items-center justify-center px-4", - "bg-white/30 backdrop-blur-[2px]", - )} - onClick={onClose} - > - <div - className={cn( - "w-full rounded-3xl flex h-[600px] flex-col", - sizeClassName[size], - "border border-white/70 bg-white/94 shadow-[0_12px_36px_rgba(15,23,42,0.1)] backdrop-blur-2xl", - className, - )} - onClick={(e) => e.stopPropagation()} - > - {hasHeader && ( - <div className="flex items-start justify-between gap-3 px-4 py-4"> - {breadcrumbs?.length ? ( - <div className="flex min-w-0 flex-1 items-center justify-between gap-3"> - <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs text-gray-400"> - {breadcrumbs.map((segment, index) => ( - <span - key={index} - className="flex items-center gap-1.5" - > - {index > 0 && <span>›</span>} - <span className="truncate"> - {segment} - </span> - </span> - ))} - </div> - {headerAction} - </div> - ) : ( - <div className="flex min-w-0 flex-1 items-center justify-between gap-3"> - <div className="flex min-w-0 items-center gap-2"> - {icon} - <h2 className="truncate text-base font-medium text-gray-900"> - {title} - </h2> - </div> - {headerAction} - </div> - )} - <button - onClick={onClose} - className="shrink-0 text-gray-400 transition-colors hover:text-gray-600" - aria-label="Close" - > - <X className="h-4 w-4" /> - </button> - </div> - )} - <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4"> - {children} - </div> - {hasFooter && ( - <div - className={cn( - "flex items-center gap-3 p-3", - secondaryAction || footerInfo - ? "justify-between" - : "justify-end", - "border-t border-white/60", - )} - > - {(secondaryAction || footerInfo) && ( - <div className="flex min-w-0 items-center gap-2"> - {secondaryAction && ( - <ModalActionButton - action={secondaryAction} - fallbackVariant="secondary" - /> - )} - {footerInfo} - </div> - )} - <div className="flex items-center gap-2"> - {footerStatus} - {resolvedCancelAction && ( - <ModalActionButton - action={resolvedCancelAction} - fallbackVariant="cancel" - /> - )} - {primaryAction && ( - <ModalActionButton - action={primaryAction} - fallbackVariant="primary" - /> - )} - </div> - </div> - )} - </div> - </div>, - document.body, - ); -} - -function ModalActionButton({ - action, - fallbackVariant, -}: { - action: ModalAction; - fallbackVariant: "primary" | "secondary" | "danger" | "cancel"; -}) { - const { - label, - icon, - variant = fallbackVariant === "cancel" ? "secondary" : fallbackVariant, - ...props - } = action; - - return ( - <button - className={cn( - "inline-flex items-center justify-center gap-1.5 px-4 py-1.5 text-sm font-medium transition-all disabled:cursor-not-allowed disabled:opacity-40", - variant === "primary" && - "rounded-full border border-gray-700/40 bg-gray-950/88 text-white shadow-[0_3px_9px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl hover:bg-gray-900/90 active:scale-[0.98] disabled:active:scale-100", - variant === "secondary" && "text-gray-600 hover:text-gray-950", - fallbackVariant === "secondary" && - variant === "secondary" && - "rounded-full border border-blue-500/35 bg-blue-600/90 text-white shadow-[0_3px_9px_rgba(37,99,235,0.16),inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl hover:bg-blue-600 hover:text-white active:scale-[0.98] disabled:active:scale-100", - variant === "danger" && - "px-1 text-red-600 hover:text-red-700 active:scale-[0.98] disabled:active:scale-100", - )} - {...props} - > - {icon} - {label} - </button> - ); -} diff --git a/frontend/src/app/components/shared/OwnerOnlyModal.tsx b/frontend/src/app/components/shared/OwnerOnlyModal.tsx deleted file mode 100644 index 48c606c..0000000 --- a/frontend/src/app/components/shared/OwnerOnlyModal.tsx +++ /dev/null @@ -1,57 +0,0 @@ -"use client"; - -import { Lock } from "lucide-react"; -import { WarningPopup } from "./WarningPopup"; - -interface Props { - open: boolean; - onClose: () => void; - /** Short headline above the body, e.g. "Owner-only action". */ - title?: string; - /** Sentence describing what the user tried to do. */ - action?: string; - /** Email of the project/resource owner, shown so the user knows who to ask. */ - ownerEmail?: string | null; - /** Override the default message entirely. */ - message?: string; -} - -/** - * Lightweight "you don't have permission" modal shown when a non-owner - * attempts an owner-only action (manage people, rename, delete, …) on a - * shared project. Replaces the silent 404 the backend would otherwise - * return so the user understands why the action didn't go through. - */ -export function OwnerOnlyModal({ - open, - onClose, - title = "Owner-only action", - action, - ownerEmail, - message, -}: Props) { - if (!open) return null; - - const body = - message ?? - (action - ? `Only the project owner can ${action}.` - : "Only the project owner can perform this action."); - - return ( - <WarningPopup - open={open} - onClose={onClose} - title={title} - message={body} - icon={<Lock className="h-3.5 w-3.5 shrink-0 text-red-600" />} - > - {ownerEmail && ( - <p className="mt-1 text-xs text-gray-600"> - Ask <span className="text-gray-600">{ownerEmail}</span> if - you need access. - </p> - )} - </WarningPopup> - ); -} diff --git a/frontend/src/app/components/shared/PeopleModal.tsx b/frontend/src/app/components/shared/PeopleModal.tsx deleted file mode 100644 index fba63ef..0000000 --- a/frontend/src/app/components/shared/PeopleModal.tsx +++ /dev/null @@ -1,362 +0,0 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { User, UserPlus, Loader2, Plus } from "lucide-react"; -import type { ProjectPeople } from "@/app/lib/mikeApi"; -import { Modal } from "./Modal"; - -/** - * Any resource the modal can manage members for — projects today, tabular - * reviews now, anything else with a `shared_with` email list later. - */ -export interface SharedResource { - id: string; - shared_with?: string[] | null; -} - -interface Props { - open: boolean; - onClose: () => void; - /** The thing being shared (project, review, …). */ - resource: SharedResource | null; - /** - * Resolve the owner + members roster for the given resource. Different - * resource types hit different endpoints (`/projects/:id/people`, - * `/tabular-review/:id/people`, …) so the caller passes the appropriate - * fetcher. - */ - fetchPeople: (id: string) => Promise<ProjectPeople>; - /** Currently signed-in user's email — gets the "You" tag if it matches. */ - currentUserEmail?: string | null; - breadcrumb: string[]; - /** - * Persist a new shared_with list. Parent should PATCH the resource and - * sync its local state on success. Throw to surface an error inline. - */ - onSharedWithChange?: (sharedWith: string[]) => Promise<void> | void; -} - -const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - -type RosterRow = { - email: string; - display_name: string | null; - role: "owner" | "member"; -}; - -/** - * Roster of every Mike member with access to the project, with controls to - * add/remove members. Mirrors AddDocumentsModal's frame. - */ -export function PeopleModal({ - open, - onClose, - resource, - fetchPeople, - currentUserEmail, - breadcrumb, - onSharedWithChange, -}: Props) { - const [newEmail, setNewEmail] = useState(""); - const [busy, setBusy] = useState<"add" | "remove" | null>(null); - const [removingEmail, setRemovingEmail] = useState<string | null>(null); - const [error, setError] = useState<string | null>(null); - - // Server-resolved roster: owner email/display_name + members' - // display_names. We keep `resource.shared_with` as the source of truth - // for membership and just merge display_names from this fetch. - const [people, setPeople] = useState<ProjectPeople | null>(null); - const [peopleLoading, setPeopleLoading] = useState(false); - - const resourceId = resource?.id ?? null; - const sharedWith: string[] = Array.isArray(resource?.shared_with) - ? (resource!.shared_with as string[]) - : []; - - useEffect(() => { - if (!open) return; - setNewEmail(""); - setError(null); - setBusy(null); - setRemovingEmail(null); - }, [open]); - - // Re-fetch roster whenever the modal opens or membership changes — - // keyed by the joined shared_with list so add/remove triggers a refresh. - const sharedKey = sharedWith - .map((e) => e.toLowerCase()) - .sort() - .join(","); - - useEffect(() => { - if (!open || !resourceId) return; - let cancelled = false; - setPeopleLoading(true); - fetchPeople(resourceId) - .then((data) => { - if (cancelled) return; - setPeople(data); - }) - .catch(() => { - /* keep stale data; modal still works on emails alone */ - }) - .finally(() => { - if (!cancelled) setPeopleLoading(false); - }); - return () => { - cancelled = true; - }; - }, [open, resourceId, sharedKey, fetchPeople]); - - if (!open || !resource) return null; - - const memberDisplayByEmail = new Map<string, string | null>(); - for (const m of people?.members ?? []) { - memberDisplayByEmail.set(m.email.toLowerCase(), m.display_name); - } - const ownerEmail = people?.owner.email ?? null; - const ownerDisplayName = people?.owner.display_name ?? null; - - const roster: RosterRow[] = []; - if (ownerEmail) { - roster.push({ - email: ownerEmail, - display_name: ownerDisplayName, - role: "owner", - }); - } - for (const email of sharedWith) { - const lower = email.toLowerCase(); - if (ownerEmail && lower === ownerEmail.toLowerCase()) continue; - roster.push({ - email, - display_name: memberDisplayByEmail.get(lower) ?? null, - role: "member", - }); - } - - const trimmedNewEmail = newEmail.trim().toLowerCase(); - const normalizedCurrentUserEmail = - currentUserEmail?.trim().toLowerCase() ?? null; - const isValidEmail = EMAIL_RE.test(trimmedNewEmail); - const sharedLower = sharedWith.map((e) => e.toLowerCase()); - const alreadyShared = sharedLower.includes(trimmedNewEmail); - const isOwnerEmail = - !!ownerEmail && trimmedNewEmail === ownerEmail.toLowerCase(); - const isSelfEmail = - !!normalizedCurrentUserEmail && - trimmedNewEmail === normalizedCurrentUserEmail; - const canAdd = - isValidEmail && - !alreadyShared && - !isOwnerEmail && - !isSelfEmail && - busy === null; - - async function handleAdd() { - if (!canAdd || !onSharedWithChange) return; - setBusy("add"); - setError(null); - try { - const next = [...sharedWith, trimmedNewEmail]; - await onSharedWithChange(next); - setNewEmail(""); - } catch (e) { - setError( - e instanceof Error - ? e.message - : "Couldn't add the member. Try again.", - ); - } finally { - setBusy(null); - } - } - - async function handleRemove(email: string) { - if (!onSharedWithChange || busy !== null) return; - setBusy("remove"); - setRemovingEmail(email); - setError(null); - try { - const next = sharedWith.filter( - (e) => e.toLowerCase() !== email.toLowerCase(), - ); - await onSharedWithChange(next); - } catch (e) { - setError( - e instanceof Error - ? e.message - : "Couldn't remove the member. Try again.", - ); - } finally { - setBusy(null); - setRemovingEmail(null); - } - } - - return ( - <Modal - open={open} - onClose={onClose} - breadcrumbs={breadcrumb} - footerInfo={ - roster.length === 0 - ? "No one has access yet." - : `${roster.length} ${ - roster.length === 1 ? "person" : "people" - } with access.` - } - > - <div className="flex min-h-0 flex-1 flex-col gap-6"> - {/* Add-member row */} - {onSharedWithChange && ( - <section className="space-y-2"> - <div className="flex items-center gap-2"> - <div className="flex flex-1 items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"> - <UserPlus className="h-3.5 w-3.5 text-gray-400 shrink-0" /> - <input - type="email" - placeholder="Add by email…" - value={newEmail} - onChange={(e) => - setNewEmail(e.target.value) - } - onKeyDown={(e) => { - if (e.key === "Enter") void handleAdd(); - }} - className="flex-1 bg-transparent text-sm text-gray-700 placeholder:text-gray-400 outline-none" - autoFocus - /> - </div> - <button - onClick={() => void handleAdd()} - disabled={!canAdd} - title="Add member" - className="inline-flex items-center justify-center rounded-lg border border-gray-900 bg-gray-900 p-2 text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed" - > - {busy === "add" ? ( - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - ) : ( - <Plus className="h-3.5 w-3.5" /> - )} - </button> - </div> - {alreadyShared && trimmedNewEmail && ( - <p className="mt-1.5 text-xs text-gray-400"> - {trimmedNewEmail} already has access. - </p> - )} - {isOwnerEmail && trimmedNewEmail && ( - <p className="mt-1.5 text-xs text-gray-400"> - {trimmedNewEmail} is the owner. - </p> - )} - {isSelfEmail && !isOwnerEmail && trimmedNewEmail && ( - <p className="mt-1.5 text-xs text-gray-400"> - You cannot share this with yourself. - </p> - )} - {trimmedNewEmail && - !isValidEmail && - !alreadyShared && - !isOwnerEmail && - !isSelfEmail && ( - <p className="mt-1.5 text-xs text-gray-400"> - Enter a valid email. - </p> - )} - {error && ( - <p className="mt-1.5 text-xs text-red-500"> - {error} - </p> - )} - </section> - )} - - <section className="min-h-0 flex-1"> - <div className="mb-2 flex items-center gap-2"> - <h3 className="text-xs font-medium text-gray-500"> - People with Access - </h3> - {peopleLoading && ( - <Loader2 className="h-3 w-3 animate-spin text-gray-400" /> - )} - </div> - - {/* Member list */} - {roster.length === 0 ? ( - <div className="flex h-full items-center justify-center text-sm text-gray-400"> - No one has access yet. - </div> - ) : ( - <ul className="divide-y divide-gray-100 [&>li:nth-child(2)]:border-t-0"> - {roster.map((entry) => { - const isYou = - !!currentUserEmail && - entry.email.toLowerCase() === - currentUserEmail.toLowerCase(); - const isRemoving = - busy === "remove" && - removingEmail === entry.email; - const primary = - entry.display_name?.trim() || entry.email; - const showSecondary = - !!entry.display_name?.trim() && - primary !== entry.email; - return ( - <li - key={`${entry.role}-${entry.email}`} - className="flex items-center gap-3 py-3" - > - <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-900 text-white"> - <User className="h-3 w-3" /> - </div> - <div className="min-w-0 flex-1"> - <p className="truncate text-sm text-gray-800"> - {primary} - {isYou && ( - <span className="ml-1.5 text-xs text-gray-400"> - (You) - </span> - )} - {entry.role === "owner" && ( - <span className="ml-1.5 text-[10px] text-gray-400"> - Owner - </span> - )} - </p> - {showSecondary && ( - <p className="truncate text-xs text-gray-400"> - {entry.email} - </p> - )} - </div> - {entry.role === "member" && - onSharedWithChange && ( - <button - onClick={() => - void handleRemove( - entry.email, - ) - } - disabled={busy !== null} - title="Remove access" - className="self-center inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-500 hover:bg-red-50 hover:text-red-600 disabled:opacity-50" - > - {isRemoving && ( - <Loader2 className="h-3 w-3 animate-spin" /> - )} - Remove - </button> - )} - </li> - ); - })} - </ul> - )} - </section> - </div> - - </Modal> - ); -} diff --git a/frontend/src/app/components/shared/PreResponseWrapper.tsx b/frontend/src/app/components/shared/PreResponseWrapper.tsx deleted file mode 100644 index f5a26a3..0000000 --- a/frontend/src/app/components/shared/PreResponseWrapper.tsx +++ /dev/null @@ -1,74 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import { ChevronDown } from "lucide-react"; - -export function PreResponseWrapper({ - children, - stepCount, - shouldMinimize, - isStreaming, - compact = false, -}: { - children: React.ReactNode; - stepCount: number; - shouldMinimize: boolean; - isStreaming: boolean; - /** Tighter typography + child gap for narrow side panels (e.g. TR chat). */ - compact?: boolean; -}) { - const [userToggled, setUserToggled] = useState(false); - const [isOpen, setIsOpen] = useState(!shouldMinimize); - // Once content has streamed in (shouldMinimize=true even once), stay - // minimized even if a later render briefly evaluates shouldMinimize=false. - // Without this latch, the wrapper visibly pops open when isStreaming - // flips off at the end of the response. - const hasMinimizedRef = useRef(shouldMinimize); - - useEffect(() => { - if (shouldMinimize) hasMinimizedRef.current = true; - if (userToggled) return; - setIsOpen(!shouldMinimize && !hasMinimizedRef.current); - }, [shouldMinimize, userToggled]); - - const stepWord = `step${stepCount === 1 ? "" : "s"}`; - const label = isStreaming - ? "Working" - : `Completed in ${stepCount} ${stepWord}`; - - const buttonTextClass = compact ? "text-xs" : "text-sm"; - const childrenGapClass = compact ? "gap-2.5" : "gap-4"; - - return ( - <div className="rounded-xl border border-white/70 bg-white/55 px-3 py-2 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-2xl"> - <button - type="button" - onClick={() => { - setUserToggled(true); - setIsOpen((v) => !v); - }} - className={`w-full flex items-center justify-between font-serif text-gray-500 hover:text-gray-700 transition-colors ${buttonTextClass}`} - > - <span className="flex items-baseline min-w-0"> - <span className="truncate">{label}</span> - {isStreaming && ( - <span className="inline-flex ml-1 shrink-0 items-baseline"> - <span className="w-0.5 h-0.5 rounded-full bg-gray-400 mr-0.5 animate-[bounce_1.4s_infinite_0s]" /> - <span className="w-0.5 h-0.5 rounded-full bg-gray-400 mr-0.5 animate-[bounce_1.4s_infinite_0.2s]" /> - <span className="w-0.5 h-0.5 rounded-full bg-gray-400 animate-[bounce_1.4s_infinite_0.4s]" /> - </span> - )} - </span> - <ChevronDown - size={12} - className={`relative top-px shrink-0 ml-2 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} - /> - </button> - {isOpen && ( - <div className={`mt-3 flex flex-col ${childrenGapClass}`}> - {children} - </div> - )} - </div> - ); -} diff --git a/frontend/src/app/components/shared/ProjectPicker.tsx b/frontend/src/app/components/shared/ProjectPicker.tsx deleted file mode 100644 index 05a945c..0000000 --- a/frontend/src/app/components/shared/ProjectPicker.tsx +++ /dev/null @@ -1,91 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { Folder, Search, X } from "lucide-react"; -import type { Project } from "./types"; - -interface Props { - projects: Project[]; - loading: boolean; - selectedId: string | null; - onSelect: (id: string | null) => void; -} - -export function ProjectPicker({ projects, loading, selectedId, onSelect }: Props) { - const [search, setSearch] = useState(""); - const q = search.toLowerCase().trim(); - const filtered = q ? projects.filter((p) => p.name.toLowerCase().includes(q)) : projects; - - return ( - <> - <div className="pt-1 pb-2"> - <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"> - <Search className="h-3.5 w-3.5 text-gray-400 shrink-0" /> - <input - type="text" - placeholder="Search projects…" - value={search} - onChange={(e) => setSearch(e.target.value)} - className="flex-1 bg-transparent text-sm text-gray-700 placeholder:text-gray-400 outline-none" - autoFocus - /> - {search && ( - <button onClick={() => setSearch("")} className="text-gray-400 hover:text-gray-600"> - <X className="h-3.5 w-3.5" /> - </button> - )} - </div> - </div> - <div className="flex-1 overflow-y-auto pb-2"> - {loading ? ( - <div className="rounded-sm border border-gray-100 overflow-hidden"> - <div className="flex items-center px-2 py-2"> - <div className="h-3 w-14 rounded bg-gray-200 animate-pulse" /> - </div> - {[65, 45, 80, 55, 70].map((w, i) => ( - <div key={i} className="flex items-center gap-2 px-2 py-2"> - <div className="h-3.5 w-3.5 rounded-full border border-gray-200 shrink-0" /> - <div className="h-3.5 w-3.5 rounded bg-gray-200 animate-pulse shrink-0" /> - <div className="h-3 rounded bg-gray-200 animate-pulse" style={{ width: `${w}%` }} /> - </div> - ))} - </div> - ) : filtered.length === 0 ? ( - <p className="text-center text-sm text-gray-400 py-8"> - {q ? "No matches found" : "No projects yet"} - </p> - ) : ( - <div className="rounded-sm border border-gray-100 overflow-hidden"> - <div className="flex items-center justify-between px-2 py-2"> - <p className="text-xs font-medium text-gray-400">Projects</p> - </div> - <div className="space-y-px"> - {filtered.map((project) => { - const isSelected = selectedId === project.id; - return ( - <button - key={project.id} - onClick={() => onSelect(isSelected ? null : project.id)} - className={`w-full flex items-center gap-2 px-2 py-2 text-xs transition-colors text-left ${isSelected ? "bg-gray-100" : "hover:bg-gray-50"}`} - > - <span className={`shrink-0 h-3.5 w-3.5 rounded-full border flex items-center justify-center ${isSelected ? "bg-gray-900 border-gray-900" : "border-gray-300"}`}> - {isSelected && <span className="h-1.5 w-1.5 rounded-full bg-white" />} - </span> - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - <span className={`flex-1 truncate ${isSelected ? "text-gray-900 font-medium" : "text-gray-700"}`}> - {project.name} - {project.cm_number && ( - <span className="ml-1 font-normal text-gray-400">(#{project.cm_number})</span> - )} - </span> - <span className="shrink-0 text-gray-400">{project.document_count ?? 0}</span> - </button> - ); - })} - </div> - </div> - )} - </div> - </> - ); -} diff --git a/frontend/src/app/components/shared/RelevantQuotes.tsx b/frontend/src/app/components/shared/RelevantQuotes.tsx deleted file mode 100644 index faf4d63..0000000 --- a/frontend/src/app/components/shared/RelevantQuotes.tsx +++ /dev/null @@ -1,297 +0,0 @@ -"use client"; - -import { useEffect, useState, type ReactNode } from "react"; -import { Minus, RectangleHorizontal, Rows3 } from "lucide-react"; -import { CiteButton } from "@/components/ui/cite-button"; - -export type RelevantQuoteItem = { - id: string; - quote: string; - eyebrow?: string | null; - inlineDetail?: string | null; - detail?: string | null; - citationText?: string | null; -}; - -interface Props { - quotes: RelevantQuoteItem[]; - error?: string | null; - isLoading?: boolean; - activeQuoteId?: string | null; - currentIndex?: number; - citationRef?: number; - citationText?: string; - onSelect?: (quote: RelevantQuoteItem, index: number) => void; - onIndexChange?: (index: number) => void; -} - -export function RelevantQuotes({ - quotes, - error = null, - isLoading = false, - activeQuoteId = null, - currentIndex = 0, - citationRef, - citationText, - onSelect, - onIndexChange, -}: Props) { - const [isExpanded, setIsExpanded] = useState(true); - const [viewMode, setViewMode] = useState<"single" | "list">("single"); - const hasMultipleQuotes = quotes.length > 1; - const currentQuote = quotes[currentIndex]; - - useEffect(() => { - if (!hasMultipleQuotes && viewMode === "list") { - setViewMode("single"); - } - }, [hasMultipleQuotes, viewMode]); - - return ( - <div className="px-3"> - <div className="rounded-lg border border-gray-200"> - <div className="flex h-10 items-center justify-between px-2"> - <div className="flex items-center gap-2"> - <p className="text-xs font-medium text-gray-700"> - {typeof citationRef === "number" - ? `Citation ${citationRef}` - : "Citation"} - </p> - {hasMultipleQuotes && ( - <div className="flex items-center gap-1"> - {quotes.map((quote, index) => ( - <button - key={quote.id} - type="button" - onClick={() => - onIndexChange?.(index) - } - className={`flex h-4 w-4 items-center justify-center rounded-full text-[9px] transition-colors ${ - currentIndex === index - ? "bg-white font-medium text-gray-800 shadow-[0_1px_3px_rgba(0,0,0,0.22)]" - : "bg-gray-200 text-gray-500 hover:bg-gray-300 hover:text-gray-700" - }`} - > - {index + 1} - </button> - ))} - </div> - )} - </div> - <div className="flex items-center gap-2"> - {currentQuote && ( - <CiteButton - quoteText={currentQuote.quote} - citationText={ - currentQuote.citationText ?? - citationText ?? - "" - } - className="rounded-sm bg-white px-2 h-6 text-gray-600 shadow-[0_1px_3px_rgba(0,0,0,0.22)] hover:bg-gray-50" - showText - /> - )} - <div - className={`relative flex h-6 items-center justify-start gap-1 rounded-sm bg-gray-200 p-1 ${ - hasMultipleQuotes ? "w-16" : "w-11" - }`} - > - <div - className={`absolute top-1 h-4 w-4 rounded bg-white shadow-sm transition-all ${ - !isExpanded - ? "left-1" - : hasMultipleQuotes && - viewMode === "list" - ? "left-11" - : "left-6" - }`} - /> - <button - type="button" - onClick={() => setIsExpanded(false)} - className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ - !isExpanded - ? "text-gray-800" - : "text-gray-500 hover:text-gray-700" - }`} - title="Minimize" - > - <Minus className="h-3 w-3" /> - </button> - <button - type="button" - onClick={() => { - setIsExpanded(true); - setViewMode("single"); - }} - className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ - isExpanded && viewMode === "single" - ? "text-gray-800" - : "text-gray-500 hover:text-gray-700" - }`} - title="Single quote" - > - <RectangleHorizontal className="h-3 w-3" /> - </button> - {hasMultipleQuotes && ( - <button - type="button" - onClick={() => { - setIsExpanded(true); - setViewMode("list"); - }} - className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ - isExpanded && viewMode === "list" - ? "text-gray-800" - : "text-gray-500 hover:text-gray-700" - }`} - title="Quote list" - > - <Rows3 className="h-3 w-3" /> - </button> - )} - </div> - </div> - </div> - {isExpanded && ( - <div className="px-2 pb-2"> - {isLoading ? ( - <RelevantQuoteSkeleton /> - ) : error ? ( - <RelevantQuoteMessage tone="error"> - {error} - </RelevantQuoteMessage> - ) : quotes.length > 0 ? ( - viewMode === "list" ? ( - <div className="space-y-2"> - {quotes.map((quote, index) => ( - <QuoteItem - key={quote.id} - quote={quote} - isActive={ - activeQuoteId === quote.id - } - onClick={() => - onSelect?.(quote, index) - } - /> - ))} - </div> - ) : currentQuote ? ( - <div className="flex flex-col gap-2"> - <QuoteItem - quote={currentQuote} - isActive={ - activeQuoteId === currentQuote.id - } - onClick={() => - onSelect?.( - currentQuote, - currentIndex, - ) - } - /> - </div> - ) : null - ) : ( - <RelevantQuoteMessage> - No relevant quotes. - </RelevantQuoteMessage> - )} - </div> - )} - </div> - </div> - ); -} - -function RelevantQuoteSkeleton() { - return ( - <div className="animate-pulse rounded-md border border-gray-200 bg-gray-50 px-3 py-2.5"> - <div className="h-3 w-28 rounded bg-gray-200" /> - <div className="mt-2.5 h-3 w-full rounded bg-gray-200" /> - <div className="mt-2 h-3 w-11/12 rounded bg-gray-200" /> - <div className="mt-2 h-3 w-2/3 rounded bg-gray-200" /> - </div> - ); -} - -function RelevantQuoteMessage({ - children, - tone = "neutral", -}: { - children: ReactNode; - tone?: "neutral" | "error"; -}) { - return ( - <div className="rounded-md border border-gray-200 bg-gray-50 px-3 py-2.5"> - <p - className={`font-serif text-sm leading-6 ${ - tone === "error" ? "text-red-700" : "text-gray-600" - }`} - > - {children} - </p> - </div> - ); -} - -function QuoteItem({ - quote, - isActive, - onClick, -}: { - quote: RelevantQuoteItem; - isActive: boolean; - onClick: () => void; -}) { - return ( - <button - type="button" - onClick={onClick} - className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${ - isActive - ? "border-blue-300 bg-blue-50" - : "border-gray-200 bg-gray-50 hover:border-blue-300 hover:bg-blue-50/50" - }`} - > - <div className="flex flex-col gap-1.5"> - {quote.eyebrow && ( - <p - className={`font-serif text-xs ${ - isActive ? "text-blue-900" : "text-gray-500" - }`} - > - {quote.eyebrow} - </p> - )} - <p - className={`font-serif text-sm leading-6 ${ - isActive ? "text-blue-950" : "text-gray-700" - }`} - > - “{quote.quote.replace(/"/g, "'")}” - {quote.inlineDetail && ( - <span - className={`text-sm ${ - isActive ? "text-blue-900" : "text-gray-500" - }`} - > - {" "} - ({quote.inlineDetail}) - </span> - )} - </p> - {quote.detail && ( - <p - className={`font-serif text-xs ${ - isActive ? "text-blue-900" : "text-gray-500" - }`} - > - {quote.detail} - </p> - )} - </div> - </button> - ); -} diff --git a/frontend/src/app/components/shared/RenameableTitle.tsx b/frontend/src/app/components/shared/RenameableTitle.tsx deleted file mode 100644 index db1560c..0000000 --- a/frontend/src/app/components/shared/RenameableTitle.tsx +++ /dev/null @@ -1,91 +0,0 @@ -"use client"; - -import { useRef, useState } from "react"; - -interface Props { - value: string; - onCommit: (newValue: string) => void; - suffix?: React.ReactNode; -} - -type CaretDocument = Document & { - caretPositionFromPoint?: ( - x: number, - y: number, - ) => { offset: number } | null; - caretRangeFromPoint?: (x: number, y: number) => Range | null; -}; - -export function RenameableTitle({ value, onCommit, suffix }: Props) { - const [editing, setEditing] = useState(false); - const [draft, setDraft] = useState(""); - const caretPos = useRef<number | null>(null); - const escaped = useRef(false); - const committed = useRef(false); - - function startEditing(e: React.MouseEvent) { - const doc = document as CaretDocument; - const caret = doc.caretPositionFromPoint?.(e.clientX, e.clientY); - const range = !caret && doc.caretRangeFromPoint?.(e.clientX, e.clientY); - caretPos.current = caret - ? caret.offset - : range - ? range.startOffset - : null; - escaped.current = false; - committed.current = false; - setDraft(value); - setEditing(true); - } - - function commit() { - if (committed.current) return; - if (escaped.current) { - escaped.current = false; - return; - } - committed.current = true; - setEditing(false); - onCommit(draft.trim()); - } - - if (editing) { - return ( - <input - ref={(el) => { - if (!el) return; - el.focus(); - if (caretPos.current !== null) { - el.setSelectionRange(caretPos.current, caretPos.current); - } - }} - value={draft} - onChange={(e) => setDraft(e.target.value)} - onKeyDown={(e) => { - if (e.key === "Enter") { - e.preventDefault(); - commit(); - } - if (e.key === "Escape") { - escaped.current = true; - committed.current = true; - setEditing(false); - } - }} - onBlur={commit} - className="text-gray-900 bg-transparent outline-none min-w-0" - style={{ width: `${draft.length + 1}ch` }} - /> - ); - } - - return ( - <span - className="inline-block cursor-text text-gray-900 transition-colors hover:text-gray-600" - onClick={startEditing} - > - {value} - {suffix} - </span> - ); -} diff --git a/frontend/src/app/components/shared/RowActions.tsx b/frontend/src/app/components/shared/RowActions.tsx index 999e359..375997b 100644 --- a/frontend/src/app/components/shared/RowActions.tsx +++ b/frontend/src/app/components/shared/RowActions.tsx @@ -35,6 +35,7 @@ interface Props { onNewSubfolder?: () => void; deleting?: boolean; deleteDisabled?: boolean; + onEditDetails?: () => void; onRename?: () => void; onUpdateCmNumber?: () => void; newSubfolderLabel?: string; @@ -53,6 +54,7 @@ export function RowActionMenuItems({ onNewSubfolder, deleting, deleteDisabled = false, + onEditDetails, onRename, onUpdateCmNumber, newSubfolderLabel = "New subfolder", @@ -80,6 +82,15 @@ export function RowActionMenuItems({ {renameLabel} </button> )} + {onEditDetails && ( + <button + onClick={() => { onClose(); onEditDetails(); }} + className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + > + <Pencil className="h-3.5 w-3.5" /> + Edit details + </button> + )} {onUpdateCmNumber && ( <button onClick={() => { onClose(); onUpdateCmNumber(); }} @@ -131,7 +142,7 @@ export function RowActionMenuItems({ className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} > <Eye className="h-3.5 w-3.5" /> - Unhide + Activate </button> )} {onHide && ( @@ -140,7 +151,7 @@ export function RowActionMenuItems({ className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} > <EyeOff className="h-3.5 w-3.5" /> - Hide + Deactivate </button> )} {onDelete && ( diff --git a/frontend/src/app/components/shared/SidebarChatItem.tsx b/frontend/src/app/components/shared/SidebarChatItem.tsx index 8e9a606..24e1c9d 100644 --- a/frontend/src/app/components/shared/SidebarChatItem.tsx +++ b/frontend/src/app/components/shared/SidebarChatItem.tsx @@ -10,7 +10,7 @@ import { } from "@/components/ui/dropdown-menu"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { useAuth } from "@/contexts/AuthContext"; -import { OwnerOnlyModal } from "@/app/components/shared/OwnerOnlyModal"; +import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import type { Chat } from "@/app/components/shared/types"; import { cn } from "@/lib/utils"; @@ -146,7 +146,7 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props </DropdownMenu> </> )} - <OwnerOnlyModal + <OwnerOnlyPopup open={!!ownerOnlyAction} action={ownerOnlyAction ?? undefined} onClose={() => setOwnerOnlyAction(null)} diff --git a/frontend/src/app/components/shared/TablePrimitive.tsx b/frontend/src/app/components/shared/TablePrimitive.tsx index 73d30e6..4692c73 100644 --- a/frontend/src/app/components/shared/TablePrimitive.tsx +++ b/frontend/src/app/components/shared/TablePrimitive.tsx @@ -2,6 +2,7 @@ import { useEffect, + useRef, useState, type HTMLAttributes, type MouseEvent, @@ -45,13 +46,32 @@ export function TableScrollArea({ children, className, innerClassName, -}: DivProps & { innerClassName?: string }) { + header, +}: DivProps & { innerClassName?: string; header?: ReactNode }) { + const bodyRef = useRef<HTMLDivElement>(null); + const headerRef = useRef<HTMLDivElement>(null); + + function syncHeader() { + if (headerRef.current && bodyRef.current) { + headerRef.current.scrollLeft = bodyRef.current.scrollLeft; + } + } + return ( - <div className={cn("w-full min-h-0 flex-1 overflow-auto", className)}> + <div className={cn("w-full min-h-0 flex-1 flex flex-col overflow-hidden", className)}> + {header !== undefined && ( + <div ref={headerRef} className="shrink-0 overflow-hidden"> + {header} + </div> + )} <div - className={cn("flex min-h-full min-w-max flex-col", innerClassName)} + ref={bodyRef} + className="min-h-0 flex-1 overflow-auto" + onScroll={header !== undefined ? syncHeader : undefined} > - {children} + <div className={cn("flex min-h-full min-w-max flex-col", innerClassName)}> + {children} + </div> </div> </div> ); @@ -61,7 +81,7 @@ export function TableHeaderRow({ children, className, ...props }: DivProps) { return ( <div className={cn( - "flex h-8 items-center border-b border-gray-200 pr-3 text-xs font-medium text-gray-500 select-none md:pr-10", + "sticky top-0 z-[70] flex h-8 items-center border-b border-gray-200 bg-[#fafbfc] pr-3 text-xs font-medium text-gray-500 select-none md:pr-10", className, )} {...props} @@ -176,7 +196,7 @@ export function TableStickyCell({ widthClassName, bgClassName, header - ? "items-center self-stretch" + ? "z-[80] items-center self-stretch" : "py-2 transition-colors", !header && hover && "group-hover:bg-gray-100", className, diff --git a/frontend/src/app/components/shared/UploadNewVersionModal.tsx b/frontend/src/app/components/shared/UploadNewVersionModal.tsx deleted file mode 100644 index fddc5c9..0000000 --- a/frontend/src/app/components/shared/UploadNewVersionModal.tsx +++ /dev/null @@ -1,123 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import { Upload } from "lucide-react"; -import { listDocumentVersions } from "@/app/lib/mikeApi"; -import type { Document } from "./types"; -import { Modal } from "./Modal"; - -interface Props { - open: boolean; - onClose: () => void; - doc: Document | null; - onSubmit: (file: File, filename: string) => Promise<void>; -} - -export function UploadNewVersionModal({ open, onClose, doc, onSubmit }: Props) { - const [name, setName] = useState(""); - const [stagedFile, setStagedFile] = useState<File | null>(null); - const [submitting, setSubmitting] = useState(false); - const [currentVersion, setCurrentVersion] = useState<number | null>(null); - const fileInputRef = useRef<HTMLInputElement>(null); - - useEffect(() => { - if (!open || !doc) return; - setName(doc.filename); - setStagedFile(null); - setSubmitting(false); - setCurrentVersion(null); - let cancelled = false; - (async () => { - try { - const { current_version_id, versions } = - await listDocumentVersions(doc.id); - const current = versions.find( - (v) => v.id === current_version_id, - ); - const initial = - (current?.filename && current.filename.trim()) || - doc.filename; - if (!cancelled) { - setName(initial); - setCurrentVersion(current?.version_number ?? null); - } - } catch { - /* keep fallback */ - } - })(); - return () => { - cancelled = true; - }; - }, [open, doc]); - - if (!open || !doc) return null; - - const accept = ".pdf,.docx,.doc"; - - function handleFilePick(e: React.ChangeEvent<HTMLInputElement>) { - const file = e.target.files?.[0] ?? null; - setStagedFile(file); - if (fileInputRef.current) fileInputRef.current.value = ""; - } - - async function handleSubmit() { - if (!stagedFile || submitting || !doc) return; - const finalName = name.trim() || doc.filename; - setSubmitting(true); - try { - await onSubmit(stagedFile, finalName); - onClose(); - } finally { - setSubmitting(false); - } - } - - return ( - <Modal - open={open} - onClose={onClose} - breadcrumbs={["Upload new version", doc.filename]} - secondaryAction={{ - label: stagedFile ? "Change file" : "Upload", - icon: <Upload className="h-3.5 w-3.5" />, - onClick: () => fileInputRef.current?.click(), - disabled: submitting, - }} - primaryAction={{ - label: submitting ? "Saving…" : "Save", - onClick: handleSubmit, - disabled: !stagedFile || submitting, - }} - > - <input - ref={fileInputRef} - type="file" - accept={accept} - className="hidden" - onChange={handleFilePick} - /> - <label className="block text-xs font-medium text-gray-500 mb-1"> - New version name - </label> - <input - type="text" - value={name} - onChange={(e) => setName(e.target.value)} - placeholder="Version name" - className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-gray-400" - /> - <div className="mt-2 text-xs text-gray-500"> - Current Version:{" "} - <span className="text-gray-700 font-medium"> - {currentVersion ?? "—"} - </span> - </div> - {stagedFile && ( - <div className="mt-2 text-xs text-gray-500 truncate"> - New Version File:{" "} - <span className="text-gray-700">{stagedFile.name}</span> - </div> - )} - </Modal> - ); -} diff --git a/frontend/src/app/components/shared/WarningPopup.tsx b/frontend/src/app/components/shared/WarningPopup.tsx deleted file mode 100644 index eb6e238..0000000 --- a/frontend/src/app/components/shared/WarningPopup.tsx +++ /dev/null @@ -1,117 +0,0 @@ -"use client"; - -import { createPortal } from "react-dom"; -import type { ReactNode } from "react"; -import { AlertCircle, X } from "lucide-react"; -import { cn } from "@/lib/utils"; - -interface WarningPopupAction { - label: ReactNode; - onClick: () => void; - disabled?: boolean; -} - -interface WarningPopupProps { - open: boolean; - onClose: () => void; - title?: ReactNode; - message?: ReactNode; - children?: ReactNode; - icon?: ReactNode; - primaryAction?: WarningPopupAction; - secondaryAction?: WarningPopupAction; - className?: string; -} - -export function WarningPopup({ - open, - onClose, - title, - message, - children, - icon, - primaryAction, - secondaryAction, - className, -}: WarningPopupProps) { - if (!open) return null; - - const warningIcon = icon ?? ( - <AlertCircle className="h-3 w-3 shrink-0 text-red-600" /> - ); - - return createPortal( - <div className="pointer-events-none fixed left-1/2 top-5 z-[220] w-[min(92vw,520px)] -translate-x-1/2 px-4"> - <div - className={cn( - "pointer-events-auto flex items-start gap-2 rounded-2xl border border-white/70 bg-red-50/75 px-3 py-2 text-xs shadow-[0_4px_12px_rgba(15,23,42,0.11),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-6px_12px_rgba(255,255,255,0.2)] backdrop-blur-2xl", - className, - )} - > - <div className="min-w-0 flex-1 self-center text-red-600"> - {title && ( - <div className="flex items-center gap-1.5 font-medium mb-1"> - {warningIcon} - {title} - </div> - )} - {message && ( - <div - className={cn(!title && "flex items-start gap-1.5")} - > - {!title && warningIcon} - <span className="min-w-0">{message}</span> - </div> - )} - {children} - {(primaryAction || secondaryAction) && ( - <div className="mt-2 flex items-center gap-2"> - {secondaryAction && ( - <WarningPopupButton action={secondaryAction} /> - )} - {primaryAction && ( - <WarningPopupButton - action={primaryAction} - primary - /> - )} - </div> - )} - </div> - <button - type="button" - onClick={onClose} - className="shrink-0 text-red-700 transition-colors hover:text-red-500" - aria-label="Dismiss warning" - > - <X className="h-3.5 w-3.5" /> - </button> - </div> - </div>, - document.body, - ); -} - -function WarningPopupButton({ - action, - primary = false, -}: { - action: WarningPopupAction; - primary?: boolean; -}) { - return ( - <button - type="button" - onClick={action.onClick} - disabled={action.disabled} - className={cn( - "rounded-lg px-3 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40", - primary - ? "bg-gray-900 text-white hover:bg-gray-700" - : "text-gray-700 hover:bg-white/70", - )} - > - {action.label} - </button> - ); -} diff --git a/frontend/src/app/components/shared/highlightDocxQuote.ts b/frontend/src/app/components/shared/highlightDocxQuote.ts deleted file mode 100644 index c0d1d19..0000000 --- a/frontend/src/app/components/shared/highlightDocxQuote.ts +++ /dev/null @@ -1,130 +0,0 @@ -const HIGHLIGHT_CLASS = "docx-text-highlight"; -const IGNORED_TEXT_SELECTOR = ".star-pagination,.case-page-number"; - -function onlyLetters(s: string): string { - return s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(); -} - -function toOrigPos(text: string, strippedPos: number): number { - let count = 0; - for (let k = 0; k < text.length; k++) { - if (/[a-zA-Z0-9]/.test(text[k])) { - if (count === strippedPos) return k; - count++; - } - } - return text.length; -} - -function collectTextNodes(root: HTMLElement): Text[] { - const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { - acceptNode(node: Node) { - const p = node.parentElement; - if (!p) return NodeFilter.FILTER_REJECT; - const tag = p.tagName; - if (tag === "STYLE" || tag === "SCRIPT") - return NodeFilter.FILTER_REJECT; - if (p.closest(IGNORED_TEXT_SELECTOR)) - return NodeFilter.FILTER_REJECT; - return NodeFilter.FILTER_ACCEPT; - }, - }); - const out: Text[] = []; - let cur = walker.nextNode() as Text | null; - while (cur) { - out.push(cur); - cur = walker.nextNode() as Text | null; - } - return out; -} - -export function clearDocxQuoteHighlights(root: HTMLElement): void { - root.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((span) => { - const parent = span.parentNode; - if (!parent) return; - while (span.firstChild) parent.insertBefore(span.firstChild, span); - parent.removeChild(span); - }); - root.normalize(); -} - -/** - * Highlight the given quote text inside `root` (a docx-preview output). - * Quote is split on ellipsis variants; each segment is located via - * letters-only substring matching, so whitespace/punctuation differences - * between the LLM's quote and the rendered text don't break matching. - * - * Returns the first highlight span if any match was found, for - * scroll-into-view by the caller. - */ -export function highlightDocxQuote( - root: HTMLElement, - quote: string, -): HTMLElement | null { - clearDocxQuoteHighlights(root); - if (!quote) return null; - const segments = quote - .split(/\.{3}|…/) - .map(onlyLetters) - .filter((s) => s.length > 0); - if (segments.length === 0) return null; - - const textNodes = collectTextNodes(root); - const nodeStartInFull: number[] = []; - const nodeStrippedLen: number[] = []; - let fullStripped = ""; - for (const node of textNodes) { - const stripped = onlyLetters(node.data); - nodeStartInFull.push(fullStripped.length); - nodeStrippedLen.push(stripped.length); - fullStripped += stripped; - } - - type Range = { nodeIdx: number; origStart: number; origEnd: number }; - const ranges: Range[] = []; - - for (const segment of segments) { - const searchKey = segment.slice(0, 30); - const matchPos = fullStripped.indexOf(searchKey); - if (matchPos < 0) continue; - const matchEnd = matchPos + segment.length; - - for (let i = 0; i < textNodes.length; i++) { - const start = nodeStartInFull[i]; - const end = start + nodeStrippedLen[i]; - if (matchPos >= end || matchEnd <= start) continue; - - const localStart = Math.max(0, matchPos - start); - const localEnd = Math.min(nodeStrippedLen[i], matchEnd - start); - const text = textNodes[i].data; - const origStart = toOrigPos(text, localStart); - const origEnd = toOrigPos(text, localEnd); - if (origStart >= origEnd) continue; - ranges.push({ nodeIdx: i, origStart, origEnd }); - } - } - - if (ranges.length === 0) return null; - - // Apply in reverse document order so splits don't shift earlier ranges. - ranges.sort((a, b) => { - if (a.nodeIdx !== b.nodeIdx) return b.nodeIdx - a.nodeIdx; - return b.origStart - a.origStart; - }); - - const spans: HTMLElement[] = []; - for (const r of ranges) { - const node = textNodes[r.nodeIdx]; - const mid = node.splitText(r.origStart); - mid.splitText(r.origEnd - r.origStart); - const span = document.createElement("span"); - span.className = HIGHLIGHT_CLASS; - mid.parentNode?.insertBefore(span, mid); - span.appendChild(mid); - spans.push(span); - } - - // Because we processed ranges in reverse order, the earliest-in-document - // highlight is the last one we pushed. - return spans[spans.length - 1] ?? null; -} diff --git a/frontend/src/app/components/shared/highlightQuote.ts b/frontend/src/app/components/shared/highlightQuote.ts deleted file mode 100644 index d71f5b0..0000000 --- a/frontend/src/app/components/shared/highlightQuote.ts +++ /dev/null @@ -1,124 +0,0 @@ -let pdfjsLib: typeof import("pdfjs-dist") | null = null; - -export async function getPdfJs() { - if (pdfjsLib) return pdfjsLib; - pdfjsLib = await import("pdfjs-dist"); - pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( - "pdfjs-dist/build/pdf.worker.min.mjs", - import.meta.url, - ).toString(); - return pdfjsLib; -} - -export const STANDARD_FONT_DATA_URL = - "https://unpkg.com/pdfjs-dist@4.10.38/standard_fonts/"; - -const HIGHLIGHT_CLASS = "pdf-text-highlight"; -const ORIGINAL_TEXT_ATTR = "data-original-text"; - -// Strip everything except alphanumerics (a-z A-Z 0-9) for robust matching -function onlyLetters(s: string): string { - return s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(); -} - -function escapeHtml(str: string): string { - return str - .replace(/&/g, "&") - .replace(/</g, "<") - .replace(/>/g, ">"); -} - -// Given a position in the stripped (letters-only) version of `original`, -// return the corresponding index in `original`. -function strippedPosToOriginal(original: string, strippedPos: number): number { - let count = 0; - for (let i = 0; i < original.length; i++) { - if (/[a-zA-Z0-9]/.test(original[i])) { - if (count === strippedPos) return i; - count++; - } - } - return original.length; -} - -export function clearHighlights(textDivs: HTMLElement[]) { - for (const div of textDivs) { - if (div.hasAttribute(ORIGINAL_TEXT_ATTR)) { - div.textContent = div.getAttribute(ORIGINAL_TEXT_ATTR)!; - div.removeAttribute(ORIGINAL_TEXT_ATTR); - } - } -} - -export async function highlightQuote( - textDivs: HTMLElement[], - quote: string, -): Promise<boolean> { - clearHighlights(textDivs); - - // Split on ellipsis variants to highlight each segment separately - const segments = quote - .split(/\.{3}|…/) - .map((s) => onlyLetters(s)) - .filter((s) => s.length > 0); - - // Build the stripped full text and track each div's start position within it. - // Also keep original div texts for display. - const divOrigTexts: string[] = []; // original text for innerHTML slicing - const divStripped: string[] = []; // letters-only version for matching - const divStartInFull: number[] = []; // start index in fullStripped - let fullStripped = ""; - - for (let i = 0; i < textDivs.length; i++) { - const orig = textDivs[i].textContent ?? ""; - divOrigTexts.push(orig); - const stripped = onlyLetters(orig); - divStripped.push(stripped); - divStartInFull.push(fullStripped.length); - fullStripped += stripped; - } - - // Map: divIndex -> [strippedLocalStart, strippedLocalEnd] - const divHighlightRanges = new Map<number, [number, number]>(); - - for (const segment of segments) { - const searchKey = segment.slice(0, 30); - const matchPos = fullStripped.indexOf(searchKey); - if (matchPos === -1) { - continue; - } - const matchEnd = matchPos + segment.length; - - for (let i = 0; i < textDivs.length; i++) { - const divStart = divStartInFull[i]; - const divEnd = divStart + divStripped[i].length; - if (matchPos >= divEnd || matchEnd <= divStart) continue; - - const localStart = Math.max(0, matchPos - divStart); - const localEnd = Math.min( - divStripped[i].length, - matchEnd - divStart, - ); - divHighlightRanges.set(i, [localStart, localEnd]); - } - } - - if (divHighlightRanges.size === 0) return false; - - for (const [idx, [strStart, strEnd]] of divHighlightRanges) { - const div = textDivs[idx]; - const orig = divOrigTexts[idx]; - - // Map stripped positions back to original character positions - const origStart = strippedPosToOriginal(orig, strStart); - const origEnd = strippedPosToOriginal(orig, strEnd); - - div.setAttribute(ORIGINAL_TEXT_ATTR, orig); - div.innerHTML = - escapeHtml(orig.slice(0, origStart)) + - `<span class="${HIGHLIGHT_CLASS}">${escapeHtml(orig.slice(origStart, origEnd))}</span>` + - escapeHtml(orig.slice(origEnd)); - } - - return true; -} diff --git a/frontend/src/app/components/shared/types.ts b/frontend/src/app/components/shared/types.ts index c3b9806..d7f239f 100644 --- a/frontend/src/app/components/shared/types.ts +++ b/frontend/src/app/components/shared/types.ts @@ -18,6 +18,7 @@ export interface Project { owner_email?: string | null; name: string; cm_number: string | null; + practice: string | null; shared_with: string[]; created_at: string; updated_at: string; @@ -36,7 +37,7 @@ export interface Document { filename: string; owner_email?: string | null; owner_display_name?: string | null; - file_type: string | null; // pdf | docx | doc + file_type: string | null; // pdf | docx | doc | xlsx | xlsm | xls | pptx | ppt storage_path: string | null; pdf_storage_path: string | null; size_bytes: number | null; @@ -105,6 +106,46 @@ export type AssistantEvent = error?: string; isStreaming?: boolean; } + | { + type: "ask_inputs"; + items: ( + | { + id: string; + kind: "choice"; + question: string; + options: { + value: string; + }[]; + allow_other: boolean; + other_label: string; + response_prefix?: string; + } + | { + id: string; + kind: "documents"; + document_types: string[]; + response_prefix?: string; + } + )[]; + } + | { + type: "ask_inputs_response"; + responses: ( + | { + id: string; + kind: "choice"; + question: string; + answer?: string; + skipped?: boolean; + } + | { + id: string; + kind: "documents"; + filenames: string[]; + skipped?: boolean; + } + )[]; + } | { type: "thinking"; isStreaming?: boolean } | { type: "doc_read"; @@ -255,12 +296,13 @@ export type CaseCitationQuote = { }; export interface Message { + id?: string; role: "user" | "assistant"; content: string; files?: { filename: string; document_id?: string }[]; workflow?: { id: string; title: string }; model?: string; - annotations?: CitationAnnotation[]; + citations?: Citation[]; citationStatus?: "started" | "partial" | "final"; events?: AssistantEvent[]; /** Set when streaming failed; rendered as a red error block. */ @@ -275,9 +317,15 @@ export interface CitationQuote { export type DocumentCitationQuote = { page: number | string; quote: string; + /** + * Spreadsheet citations are located by cell, not page: `sheet` is the + * worksheet name and `cell` is an A1 address or range (e.g. "B7", "B7:C9"). + */ + sheet?: string; + cell?: string; }; -export type DocumentCitationAnnotation = { +export type DocumentCitation = { type: "citation_data"; kind?: "document"; ref: number; @@ -286,13 +334,15 @@ export type DocumentCitationAnnotation = { version_id?: string | null; version_number?: number | null; filename: string; - /** Legacy single-quote fields. Prefer `quotes` for new annotations. */ + /** Legacy single-quote fields. Prefer `quotes` for new citations. */ page: number | string; quote: string; + sheet?: string; + cell?: string; quotes?: DocumentCitationQuote[]; }; -export type CaseCitationAnnotation = { +export type CaseCitation = { type: "citation_data"; kind: "case"; ref: number; @@ -310,12 +360,49 @@ export type CaseCitationAnnotation = { * anchors. Case citations anchor to a CourtListener cluster and include a * quoted opinion passage. */ -export type CitationAnnotation = - | DocumentCitationAnnotation - | CaseCitationAnnotation; +export type Citation = + | DocumentCitation + | CaseCitation; const PAGE_BREAK_SENTINEL = "[[PAGE_BREAK]]"; +export function isSpreadsheetFilename(filename: string): boolean { + const ext = filename.split(".").pop()?.toLowerCase(); + return ext === "xlsx" || ext === "xlsm" || ext === "xls"; +} + +/** + * Human-readable cell locator for a spreadsheet citation, e.g. "Sheet1!B7". + * Falls back to whichever of `sheet`/`cell` is present. + */ +function formatCellLocator(sheet?: string, cell?: string): string { + if (sheet && cell) return `${sheet}!${cell}`; + return cell ?? sheet ?? ""; +} + +/** + * Reader-friendly cell locator, e.g. "Sheet1, cell B7" (or "cells B7:C9" for a + * range). Unlike `formatCellLocator`, this avoids the Excel `!` notation, which + * reads poorly in prose. Used for the single-quote detail shown to the reader; + * the machine-style `Sheet1!B7` form is kept where locators are joined together. + */ +function formatCellLocatorReadable(sheet?: string, cell?: string): string { + if (!cell) return sheet ?? ""; + const cellWord = cell.includes(":") ? "cells" : "cell"; + const cellPart = `${cellWord} ${cell}`; + return sheet ? `${sheet}, ${cellPart}` : cellPart; +} + +/** `{sheet, cell}` locators for a citation's quotes (spreadsheet sources). */ +export function getCitationCells( + a: Citation, +): { sheet?: string; cell?: string }[] { + if (a.kind === "case") return []; + return getDocumentCitationQuotes(a) + .filter((q) => q.cell || q.sheet) + .map((q) => ({ sheet: q.sheet, cell: q.cell })); +} + function expandDocumentQuoteEntry(entry: DocumentCitationQuote): CitationQuote[] { const rangeMatch = typeof entry.page === "string" @@ -339,13 +426,13 @@ function expandDocumentQuoteEntry(entry: DocumentCitationQuote): CitationQuote[] } export function getDocumentCitationQuotes( - a: CitationAnnotation, + a: Citation, ): DocumentCitationQuote[] { if (a.kind === "case") return []; if (Array.isArray(a.quotes) && a.quotes.length) { return a.quotes.filter((entry) => entry.quote.trim().length > 0); } - return [{ page: a.page, quote: a.quote }]; + return [{ page: a.page, quote: a.quote, sheet: a.sheet, cell: a.cell }]; } /** @@ -354,36 +441,72 @@ export function getDocumentCitationQuotes( * cross-page citation with page "N-M" and a `[[PAGE_BREAK]]` split yields two. */ export function expandCitationToEntries( - a: CitationAnnotation, + a: Citation, ): CitationQuote[] { if (a.kind === "case") return []; return getDocumentCitationQuotes(a).flatMap(expandDocumentQuoteEntry); } -/** Format the page(s) of a citation for display, e.g. "Page 3" or "Page 41-42". */ -export function formatCitationPage(a: CitationAnnotation): string { +/** + * Format the page(s) of a citation for display, e.g. "Page 3" or "Page 41-42". + * Spreadsheets have no meaningful page locator, so this returns "" for them — + * callers join with `.filter(Boolean)` so the locator is simply omitted. + */ +export function formatCitationPage(a: Citation): string { if (a.kind === "case") { return a.citation || a.case_name || `Case ${a.cluster_id}`; } const quotes = getDocumentCitationQuotes(a); + // Spreadsheets are located by cell, e.g. "Sheet1!B7" (or several). + if (isSpreadsheetFilename(a.filename)) { + const cells = Array.from( + new Set( + quotes.map((q) => formatCellLocator(q.sheet, q.cell)).filter(Boolean), + ), + ); + return cells.join(", "); + } const pages = Array.from( new Set(quotes.map((q) => String(q.page)).filter(Boolean)), ); if (pages.length > 1) return `Pages ${pages.join(", ")}`; if (pages.length === 1) return `Page ${pages[0]}`; - if (typeof a.page === "string") return `Page ${a.page}`; return `Page ${a.page}`; } +/** Locator label for a single quote — "Page 3" for docs, "Sheet1, cell B7" for cells. */ +export function formatCitationQuotePage( + a: Citation, + page: number | string, + quote?: DocumentCitationQuote, +): string { + if (a.kind !== "case" && isSpreadsheetFilename(a.filename)) { + return formatCellLocatorReadable(quote?.sheet, quote?.cell); + } + return `Page ${page}`; +} + +/** + * Reader-friendly version of a single raw quote: replaces [[PAGE_BREAK]] with + * "...". Spreadsheet quotes now carry plain cell values, so no stripping. + */ +export function cleanCitationQuoteText( + _a: Citation, + rawQuote: string, +): string { + return rawQuote.replaceAll(PAGE_BREAK_SENTINEL, "..."); +} + /** Produce a reader-friendly version of the quote (replaces [[PAGE_BREAK]] with "..."). */ -export function displayCitationQuote(a: CitationAnnotation): string { +export function displayCitationQuote(a: Citation): string { if (a.kind === "case") { return a.quotes .map((q) => q.quote.replaceAll(PAGE_BREAK_SENTINEL, "...")) .join(" / "); } return getDocumentCitationQuotes(a) - .map((q) => q.quote.replaceAll(PAGE_BREAK_SENTINEL, "...")) + .map((q) => cleanCitationQuoteText(a, q.quote)) + .filter(Boolean) .join(" / "); } @@ -442,6 +565,28 @@ export interface TabularCell { // Workflows +export interface WorkflowOpenSourceSubmission { + id: string; + status: "pending" | "approved" | "rejected"; + submitted_at: string; + updated_at: string; + reviewed_at?: string | null; +} + +export interface OpenSourceWorkflowResponse + extends WorkflowOpenSourceSubmission { + mode: "created" | "updated"; +} + +export type OpenSourceWorkflowContributorMode = "named" | "anonymous"; + +export interface WorkflowContributor { + name: string; + organisation: string | null; + role: string | null; + linkedin: string | null; +} + export interface Workflow { id: string; user_id: string | null; @@ -451,10 +596,14 @@ export interface Workflow { columns_config: ColumnConfig[] | null; is_system: boolean; created_at: string; + language?: string | null; + version?: string | null; practice?: string | null; + jurisdictions?: string[] | null; shared_by_name?: string | null; allow_edit?: boolean; is_owner?: boolean; + open_source_submission?: WorkflowOpenSourceSubmission | null; } // API helpers diff --git a/frontend/src/app/components/shared/useDirectoryData.ts b/frontend/src/app/components/shared/useDirectoryData.ts index 8e96094..a572232 100644 --- a/frontend/src/app/components/shared/useDirectoryData.ts +++ b/frontend/src/app/components/shared/useDirectoryData.ts @@ -42,13 +42,23 @@ export function useDirectoryData(enabled: boolean) { ); return Promise.all(ps.map((p) => getProject(p.id))).then( (fullProjects) => { + const projectCounts = new Map( + ps.map((p) => [p.id, p.document_count ?? 0]), + ); + const projectsWithCounts = fullProjects.map((project) => ({ + ...project, + document_count: + project.documents?.length ?? + projectCounts.get(project.id) ?? + 0, + })); cache = { standaloneDocuments: sorted, - projects: fullProjects, + projects: projectsWithCounts, fetchedAt: Date.now(), }; setStandaloneDocuments(sorted); - setProjects(fullProjects); + setProjects(projectsWithCounts); }, ); }) diff --git a/frontend/src/app/components/tabular/AddColumnModal.tsx b/frontend/src/app/components/tabular/AddColumnModal.tsx index 48be4a6..c622060 100644 --- a/frontend/src/app/components/tabular/AddColumnModal.tsx +++ b/frontend/src/app/components/tabular/AddColumnModal.tsx @@ -8,6 +8,7 @@ import { generateTabularColumnPrompt } from "@/app/lib/mikeApi"; import { FORMAT_OPTIONS, formatLabel, formatIcon } from "./columnFormat"; import { TAG_COLORS } from "./pillUtils"; import { getPresetConfig, PROMPT_PRESETS } from "./columnPresets"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; import { DropdownMenu, DropdownMenuContent, @@ -328,9 +329,9 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol {/* Format */} <div className="mt-4"> - <label className="text-sm font-medium text-gray-500"> + <ModalFieldLabel className="text-gray-500"> Format - </label> + </ModalFieldLabel> <DropdownMenu> <DropdownMenuTrigger asChild> <button className="mt-1 flex items-center justify-between rounded-md border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-700 hover:border-gray-400 focus:outline-none"> @@ -379,9 +380,9 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol {/* Tag input */} {column.format === "tag" && ( <div className="mt-3"> - <label className="text-sm font-medium text-gray-500"> + <ModalFieldLabel className="text-gray-500"> Tags - </label> + </ModalFieldLabel> <div className="mt-1 flex flex-wrap gap-1.5 rounded-md border border-gray-200 px-2 py-1.5 focus-within:border-gray-400"> {column.tags.map((tag, tagIdx) => ( <span @@ -434,9 +435,9 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol {/* Prompt */} <div className="mt-4 flex items-center justify-between"> - <label className="text-sm font-medium text-gray-500"> + <ModalFieldLabel className="mb-0 text-gray-500"> Prompt - </label> + </ModalFieldLabel> <button type="button" onClick={() => diff --git a/frontend/src/app/components/tabular/AddNewTRModal.tsx b/frontend/src/app/components/tabular/AddNewTRModal.tsx deleted file mode 100644 index ff142c3..0000000 --- a/frontend/src/app/components/tabular/AddNewTRModal.tsx +++ /dev/null @@ -1,488 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState } from "react"; -import { Check, ChevronDown, Loader2, Upload } from "lucide-react"; -import type { Document, Project, Workflow } from "../shared/types"; -import { - getProject, - listProjects, - listStandaloneDocuments, - listWorkflows, - uploadProjectDocument, - uploadStandaloneDocument, -} from "@/app/lib/mikeApi"; -import { FileDirectory } from "../shared/FileDirectory"; -import { BUILT_IN_WORKFLOWS } from "../workflows/builtinWorkflows"; -import { Modal } from "../shared/Modal"; - -interface Props { - open: boolean; - onClose: () => void; - onAdd: ( - title: string, - projectId?: string, - documentIds?: string[], - columnsConfig?: Workflow["columns_config"], - ) => void; - projects?: Project[]; - /** When provided, skip the project/directory picker and show only these docs */ - projectDocs?: Document[]; - projectName?: string; - projectCmNumber?: string | null; -} - -export function AddNewTRModal({ - open, - onClose, - onAdd, - projects = [], - projectDocs: fixedProjectDocs, - projectName, - projectCmNumber, -}: Props) { - const isProjectMode = fixedProjectDocs !== undefined; - const [title, setTitle] = useState(""); - const [underProject, setUnderProject] = useState(false); - const [selectedProjectId, setSelectedProjectId] = useState(""); - const [projectDropdownOpen, setProjectDropdownOpen] = useState(false); - - // Project-scoped docs (when underProject is true and no fixedProjectDocs) - const [projectDocs, setProjectDocs] = useState<Document[]>([]); - const [loadingDocs, setLoadingDocs] = useState(false); - - // Full directory (when underProject is false) - const [standaloneDocs, setStandaloneDocs] = useState<Document[]>([]); - const [directoryProjects, setDirectoryProjects] = useState<Project[]>( - [], - ); - const [loadingDirectory, setLoadingDirectory] = useState(false); - - const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>( - new Set(), - ); - const [uploading, setUploading] = useState(false); - const fileInputRef = useRef<HTMLInputElement>(null); - - // Workflow templates - const [workflows, setWorkflows] = useState<Workflow[]>([]); - const [loadingWorkflows, setLoadingWorkflows] = useState(false); - const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | null>( - null, - ); - const [workflowDropdownOpen, setWorkflowDropdownOpen] = useState(false); - const formId = "new-tabular-review-modal-form"; - - useEffect(() => { - if (!open) return; - - setLoadingWorkflows(true); - const builtinTabular = BUILT_IN_WORKFLOWS.filter( - (w) => w.type === "tabular", - ); - listWorkflows("tabular") - .then((custom) => setWorkflows([...builtinTabular, ...custom])) - .catch(() => setWorkflows(builtinTabular)) - .finally(() => setLoadingWorkflows(false)); - - if (isProjectMode) { - setSelectedDocIds( - new Set((fixedProjectDocs ?? []).map((d) => d.id)), - ); - return; - } - - setLoadingDirectory(true); - // /projects only returns counts, not the documents array — fetch - // each project in parallel so FileDirectory can render the docs - // when the user expands a folder. - Promise.all([listStandaloneDocuments(), listProjects()]) - .then(async ([docs, projs]) => { - setStandaloneDocs( - [...docs].sort((a, b) => - (b.created_at ?? "").localeCompare(a.created_at ?? ""), - ), - ); - const fullProjects = await Promise.all( - projs.map((p) => getProject(p.id)), - ); - setDirectoryProjects(fullProjects); - }) - .catch(() => { - setStandaloneDocs([]); - setDirectoryProjects([]); - }) - .finally(() => setLoadingDirectory(false)); - }, [open]); // eslint-disable-line react-hooks/exhaustive-deps - - if (!open) return null; - - function handleClose() { - setTitle(""); - setUnderProject(false); - setSelectedProjectId(""); - setProjectDropdownOpen(false); - setProjectDocs([]); - setStandaloneDocs([]); - setDirectoryProjects([]); - setSelectedDocIds(new Set()); - setSelectedWorkflowId(null); - setWorkflowDropdownOpen(false); - onClose(); - } - - function handleSubmit(e: React.FormEvent) { - e.preventDefault(); - if (!title.trim()) return; - if (underProject && !selectedProjectId) return; - const selectedWorkflow = workflows.find( - (w) => w.id === selectedWorkflowId, - ); - onAdd( - title.trim(), - underProject ? selectedProjectId : undefined, - selectedDocIds.size > 0 ? [...selectedDocIds] : undefined, - selectedWorkflow?.columns_config ?? undefined, - ); - handleClose(); - } - - async function handleSelectProject(projectId: string) { - setSelectedProjectId(projectId); - setProjectDropdownOpen(false); - setProjectDocs([]); - setSelectedDocIds(new Set()); - setLoadingDocs(true); - try { - const proj = await getProject(projectId); - const docs = (proj.documents ?? []).filter( - (d) => d.status === "ready", - ); - setProjectDocs(docs); - setSelectedDocIds(new Set(docs.map((d) => d.id))); - } finally { - setLoadingDocs(false); - } - } - - async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) { - const files = Array.from(e.target.files ?? []); - if (!files.length) return; - setUploading(true); - try { - const uploaded = await Promise.all( - files.map((f) => - underProject && selectedProjectId - ? uploadProjectDocument(selectedProjectId, f) - : uploadStandaloneDocument(f), - ), - ); - if (underProject && selectedProjectId) { - setProjectDocs((prev) => [...uploaded, ...prev]); - } else { - setStandaloneDocs((prev) => [...uploaded, ...prev]); - } - uploaded.forEach((d) => - setSelectedDocIds((prev) => new Set([...prev, d.id])), - ); - } catch (err) { - console.error("Upload failed:", err); - } finally { - setUploading(false); - if (fileInputRef.current) fileInputRef.current.value = ""; - } - } - - const selectedProject = projects.find((p) => p.id === selectedProjectId); - const selectedWorkflow = workflows.find((w) => w.id === selectedWorkflowId); - - // What to show in the directory depends on mode and toggle state - const directoryStandalone = isProjectMode - ? (fixedProjectDocs ?? []) - : underProject - ? [] - : standaloneDocs; - const directoryFolders = isProjectMode - ? [] - : underProject - ? [] - : directoryProjects; - const flatProjectDocs: Document[] = - !isProjectMode && underProject ? projectDocs : []; - const directoryLoading = isProjectMode - ? false - : underProject - ? loadingDocs - : loadingDirectory; - const showDirectory = isProjectMode || !underProject || !!selectedProjectId; - const breadcrumbs = - isProjectMode && projectName - ? [ - "Projects", - `${projectName}${projectCmNumber ? ` (#${projectCmNumber})` : ""}`, - "New Tabular Review", - ] - : ["Tabular Reviews", "New Tabular Review"]; - - return ( - <Modal - open={open} - onClose={handleClose} - breadcrumbs={breadcrumbs} - secondaryAction={{ - label: uploading ? "Uploading…" : "Upload", - icon: uploading ? ( - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - ) : ( - <Upload className="h-3.5 w-3.5" /> - ), - onClick: () => fileInputRef.current?.click(), - disabled: uploading, - }} - primaryAction={{ - label: "Create", - type: "submit", - form: formId, - disabled: !title.trim() || (underProject && !selectedProjectId), - }} - > - <input - ref={fileInputRef} - type="file" - accept=".pdf,.docx,.doc" - multiple - className="hidden" - onChange={handleUpload} - /> - <form - id={formId} - onSubmit={handleSubmit} - className="flex flex-col min-h-0 flex-1" - > - <div className="space-y-5"> - <input - type="text" - value={title} - onChange={(e) => setTitle(e.target.value)} - placeholder="Review name" - className="w-full text-2xl font-serif text-gray-800 placeholder-gray-400 focus:outline-none bg-transparent" - autoFocus - /> - - {/* Workflow template */} - <div className="space-y-2"> - <p className="text-xs font-medium text-gray-700"> - Workflow Template - </p> - <div className="relative"> - <button - type="button" - onClick={() => - setWorkflowDropdownOpen((o) => !o) - } - disabled={loadingWorkflows} - className="flex items-center justify-between w-full rounded-lg border border-gray-200 px-3 py-2 text-sm hover:border-gray-400 focus:outline-none bg-white transition-colors" - > - <div className="flex items-center gap-2 min-w-0"> - {loadingWorkflows && ( - <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 shrink-0" /> - )} - <span - className={ - selectedWorkflow - ? "text-gray-800 truncate" - : "text-gray-400" - } - > - {loadingWorkflows - ? "Loading templates…" - : selectedWorkflow - ? selectedWorkflow.title - : "No template — start from scratch"} - </span> - </div> - <ChevronDown className="h-3.5 w-3.5 text-gray-400 shrink-0 ml-2" /> - </button> - {workflowDropdownOpen && !loadingWorkflows && ( - <div className="absolute left-0 top-full z-20 mt-1 w-full rounded-xl border border-gray-100 bg-white shadow-lg overflow-y-auto max-h-52"> - <button - type="button" - onClick={() => { - setSelectedWorkflowId(null); - setWorkflowDropdownOpen(false); - }} - className={`w-full text-left flex items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-gray-50 ${!selectedWorkflowId ? "bg-gray-50 text-gray-900" : "text-gray-500"}`} - > - <span className="flex-1"> - No template — start from scratch - </span> - {!selectedWorkflowId && ( - <Check className="h-3.5 w-3.5 text-gray-500 shrink-0" /> - )} - </button> - {workflows.length > 0 && ( - <div className="border-t border-gray-100" /> - )} - {workflows.map((wf) => ( - <button - key={wf.id} - type="button" - onClick={() => { - setSelectedWorkflowId( - wf.id, - ); - setWorkflowDropdownOpen( - false, - ); - }} - className={`w-full text-left flex items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-gray-50 ${selectedWorkflowId === wf.id ? "bg-gray-50 text-gray-900" : "text-gray-700"}`} - > - <span className="flex-1 truncate"> - {wf.title} - </span> - {selectedWorkflowId === - wf.id && ( - <Check className="h-3.5 w-3.5 text-gray-500 shrink-0" /> - )} - </button> - ))} - </div> - )} - </div> - </div> - - {/* Create under a project toggle */} - {!isProjectMode && <div className="space-y-3"> - <button - type="button" - onClick={() => { - const next = !underProject; - setUnderProject(next); - if (!next) { - setSelectedProjectId(""); - setProjectDropdownOpen(false); - setProjectDocs([]); - setSelectedDocIds(new Set()); - } - }} - className="flex items-center gap-2.5 w-fit" - > - <span - className={`relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200 ${underProject ? "bg-gray-900" : "bg-gray-200"}`} - > - <span - className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${underProject ? "translate-x-4" : "translate-x-0"}`} - /> - </span> - <span className="text-sm text-gray-600"> - Create under a project - </span> - </button> - - {underProject && ( - <div className="relative"> - <button - type="button" - onClick={() => - setProjectDropdownOpen((o) => !o) - } - className="flex items-center justify-between w-full rounded-lg border border-gray-200 px-3 py-2 text-sm hover:border-gray-400 focus:outline-none bg-white transition-colors" - > - <span - className={ - selectedProject - ? "text-gray-800" - : "text-gray-400" - } - > - {selectedProject - ? selectedProject.name + - (selectedProject.cm_number - ? ` (#${selectedProject.cm_number})` - : "") - : "Select project…"} - </span> - <ChevronDown className="h-3.5 w-3.5 text-gray-400 shrink-0" /> - </button> - {projectDropdownOpen && ( - <div className="absolute left-0 top-full z-20 mt-1 w-full rounded-xl border border-gray-100 bg-white shadow-lg overflow-y-auto max-h-48"> - {projects.length === 0 ? ( - <p className="px-3 py-2 text-xs text-gray-400"> - No projects found - </p> - ) : ( - projects.map((p) => ( - <button - key={p.id} - type="button" - onClick={() => - handleSelectProject( - p.id, - ) - } - className={`w-full text-left flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-gray-50 ${selectedProjectId === p.id ? "bg-gray-50 text-gray-900" : "text-gray-700"}`} - > - <span className="truncate"> - {p.name} - {p.cm_number && ( - <span className="ml-1 text-gray-400"> - (# - { - p.cm_number - } - ) - </span> - )} - </span> - {selectedProjectId === - p.id && ( - <Check className="h-3.5 w-3.5 text-gray-500 shrink-0" /> - )} - </button> - )) - )} - </div> - )} - </div> - )} - </div>} - - {/* File directory */} - {showDirectory && ( - <div className="space-y-2"> - <p className="text-xs font-medium text-gray-700"> - Select Documents - </p> - <div> - <FileDirectory - standaloneDocs={ - isProjectMode - ? directoryStandalone - : underProject - ? flatProjectDocs - : directoryStandalone - } - directoryProjects={ - isProjectMode - ? [] - : underProject - ? [] - : directoryFolders - } - loading={directoryLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - heading={isProjectMode ? "Project Documents" : "Documents"} - emptyMessage={ - isProjectMode || underProject - ? "No ready documents in this project" - : "No documents yet" - } - /> - </div> - </div> - )} - </div> - </form> - </Modal> - ); -} diff --git a/frontend/src/app/components/tabular/TRChatPanel.tsx b/frontend/src/app/components/tabular/TRChatPanel.tsx index 5c5ffc2..f0eb612 100644 --- a/frontend/src/app/components/tabular/TRChatPanel.tsx +++ b/frontend/src/app/components/tabular/TRChatPanel.tsx @@ -25,8 +25,8 @@ import { } from "@/app/lib/mikeApi"; import type { AssistantEvent, ColumnConfig, Document } from "../shared/types"; import { ModelToggle } from "../assistant/ModelToggle"; -import { ApiKeyMissingModal } from "../shared/ApiKeyMissingModal"; -import { PreResponseWrapper } from "../shared/PreResponseWrapper"; +import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; +import { PreResponseWrapper } from "../assistant/PreResponseWrapper"; import { useUserProfile } from "@/contexts/UserProfileContext"; import { getModelProvider, @@ -1444,9 +1444,7 @@ export function TRChatPanel({ continue; } - if ( - data.type === "courtlistener_find_in_case_start" - ) { + if (data.type === "courtlistener_find_in_case_start") { const searches = parseCourtlistenerCaseSearches( data.searches, ); @@ -1472,8 +1470,7 @@ export function TRChatPanel({ ); updateMatchingEvent( (e) => - e.type === - "courtlistener_find_in_case" && + e.type === "courtlistener_find_in_case" && (searches?.length ? Array.isArray(e.searches) : e.cluster_id === @@ -1481,8 +1478,7 @@ export function TRChatPanel({ "number" ? (data.cluster_id as number) : null) && - e.query === - (data.query as string)) && + e.query === (data.query as string)) && !!e.isStreaming, () => ({ type: "courtlistener_find_in_case", @@ -1917,7 +1913,7 @@ export function TRChatPanel({ onHeightChange={setInputHeight} /> - <ApiKeyMissingModal + <ApiKeyMissingPopup open={apiKeyModalProvider !== null} provider={apiKeyModalProvider} onClose={() => setApiKeyModalProvider(null)} diff --git a/frontend/src/app/components/tabular/TRSidePanel.tsx b/frontend/src/app/components/tabular/TRSidePanel.tsx index 9bcac49..bb7ce3f 100644 --- a/frontend/src/app/components/tabular/TRSidePanel.tsx +++ b/frontend/src/app/components/tabular/TRSidePanel.tsx @@ -17,10 +17,12 @@ import type { Document, TabularCell, } from "../shared/types"; +import { isSpreadsheetFilename } from "../shared/types"; import { preprocessCitations, type ParsedCitation } from "./citation-utils"; import { getPillClass } from "./pillUtils"; -import { DocView } from "../shared/DocView"; -import { DocxView } from "../shared/DocxView"; +import { PdfView } from "../shared/views/PdfView"; +import { SpreadsheetView } from "../shared/views/SpreadsheetView"; +import { DocxView } from "../shared/views/DocxView"; import { cn } from "@/lib/utils"; function isDocxDocument(d: { @@ -176,8 +178,10 @@ export function TRSidePanel({ }, ]} /> + ) : isSpreadsheetFilename(doc.filename ?? "") ? ( + <SpreadsheetView documentId={doc.id} /> ) : ( - <DocView + <PdfView doc={{ document_id: doc.id }} quote={docCitation.quote} fallbackPage={docCitation.page} diff --git a/frontend/src/app/components/tabular/TRTable.tsx b/frontend/src/app/components/tabular/TRTable.tsx index 2181a9a..8f82d79 100644 --- a/frontend/src/app/components/tabular/TRTable.tsx +++ b/frontend/src/app/components/tabular/TRTable.tsx @@ -74,6 +74,13 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( ) { const stickyCellBg = "bg-[#fafbfc]"; const scrollContainerRef = useRef<HTMLDivElement>(null); + const headerRef = useRef<HTMLDivElement>(null); + + function syncHeader() { + if (headerRef.current && scrollContainerRef.current) { + headerRef.current.scrollLeft = scrollContainerRef.current.scrollLeft; + } + } const sortedColumns = [...columns].sort((a, b) => a.index - b.index); const totalContentWidth = DOC_COL_W_PX + sortedColumns.length * DATA_COL_W_PX + 32; @@ -139,48 +146,52 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( return ( <div className="flex flex-1 flex-col overflow-hidden"> {/* Header */} - <div - className={`flex h-8 ${stickyCellBg}`} - style={{ minWidth: skeletonContentWidth }} - > + <div className="shrink-0 overflow-hidden"> <div - className={`${DOC_COL_W} flex items-center gap-4 border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500`} - > - <SkeletonDot /> - <span>Document</span> - </div> - {Array.from({ length: SKELETON_COLS }).map((_, i) => ( - <div - key={i} - className={`${COL_W} flex items-center border-b border-r border-gray-200 p-2`} - > - <SkeletonLine className="h-4 w-28" /> - </div> - ))} - <div className="flex-1 border-b border-gray-200 min-w-8" /> - </div> - {/* Rows */} - {Array.from({ length: SKELETON_ROWS }).map((_, row) => ( - <div - key={row} - className={`flex h-10 ${row % 2 === 0 ? stickyCellBg : "bg-gray-50"}`} + className={`flex h-8 ${stickyCellBg}`} style={{ minWidth: skeletonContentWidth }} > - <div className={`${DOC_COL_W} flex items-center gap-4 border-b border-r border-gray-200 py-2 pl-4 pr-2`}> + <div + className={`${DOC_COL_W} flex items-center gap-4 border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500`} + > <SkeletonDot /> - <SkeletonLine className="h-4 w-32" /> + <span>Document</span> </div> - {Array.from({ length: SKELETON_COLS }).map((_, col) => ( + {Array.from({ length: SKELETON_COLS }).map((_, i) => ( <div - key={col} + key={i} className={`${COL_W} flex items-center border-b border-r border-gray-200 p-2`} > - <SkeletonLine className="h-4" /> + <SkeletonLine className="h-4 w-28" /> </div> ))} <div className="flex-1 border-b border-gray-200 min-w-8" /> </div> - ))} + </div> + {/* Rows */} + <div className="flex flex-1 flex-col overflow-auto min-h-0"> + {Array.from({ length: SKELETON_ROWS }).map((_, row) => ( + <div + key={row} + className={`flex h-10 ${row % 2 === 0 ? stickyCellBg : "bg-gray-50"}`} + style={{ minWidth: skeletonContentWidth }} + > + <div className={`${DOC_COL_W} flex items-center gap-4 border-b border-r border-gray-200 py-2 pl-4 pr-2`}> + <SkeletonDot /> + <SkeletonLine className="h-4 w-32" /> + </div> + {Array.from({ length: SKELETON_COLS }).map((_, col) => ( + <div + key={col} + className={`${COL_W} flex items-center border-b border-r border-gray-200 p-2`} + > + <SkeletonLine className="h-4" /> + </div> + ))} + <div className="flex-1 border-b border-gray-200 min-w-8" /> + </div> + ))} + </div> </div> ); } @@ -192,7 +203,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( ) { return ( <div className="flex flex-1 flex-col overflow-hidden"> - <div className="flex items-center border-b border-gray-200"> + <div className={`shrink-0 flex items-center border-b border-gray-200 ${stickyCellBg}`}> <div className={`${DOC_COL_W} border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500 select-none`} > @@ -234,57 +245,61 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( } return ( - <div - className="flex flex-1 flex-col overflow-auto" - ref={scrollContainerRef} - > + <div className="flex flex-1 flex-col overflow-hidden"> {/* Header */} - <div - className={`sticky top-0 z-20 flex h-8 ${stickyCellBg}`} - style={{ minWidth: totalContentWidth }} - > + <div ref={headerRef} className="shrink-0 overflow-hidden"> <div - className={`sticky left-0 z-30 ${DOC_COL_W} ${stickyCellBg} border-b border-r border-gray-200 flex items-center gap-4 py-2 pl-4 pr-2 text-left text-xs font-medium text-gray-500 select-none`} + className={`flex h-8 ${stickyCellBg}`} + style={{ minWidth: totalContentWidth }} > - <input - type="checkbox" - checked={allSelected} - ref={(el) => { - if (el) el.indeterminate = someSelected; - }} - onChange={toggleAll} - className={TABLE_CHECKBOX_CLASS} - /> - <span>Document</span> - </div> - {columns.map((col) => ( <div - key={col.index} - className={`${COL_W} border-b border-r border-gray-200 p-2 text-left text-xs font-medium text-gray-500 select-none`} + className={`sticky left-0 z-[80] ${DOC_COL_W} ${stickyCellBg} border-b border-r border-gray-200 flex items-center gap-4 py-2 pl-4 pr-2 text-left text-xs font-medium text-gray-500 select-none`} > - <div className="flex items-center justify-between gap-3"> - <span className="truncate">{col.name}</span> - <TREditColumnMenu - column={col} - disabled={savingColumn || savingColumnsConfig} - onSave={onUpdateColumn} - onDelete={onDeleteColumn} - /> - </div> + <input + type="checkbox" + checked={allSelected} + ref={(el) => { + if (el) el.indeterminate = someSelected; + }} + onChange={toggleAll} + className={TABLE_CHECKBOX_CLASS} + /> + <span>Document</span> + </div> + {columns.map((col) => ( + <div + key={col.index} + className={`${COL_W} border-b border-r border-gray-200 p-2 text-left text-xs font-medium text-gray-500 select-none`} + > + <div className="flex items-center justify-between gap-3"> + <span className="truncate">{col.name}</span> + <TREditColumnMenu + column={col} + disabled={savingColumn || savingColumnsConfig} + onSave={onUpdateColumn} + onDelete={onDeleteColumn} + /> + </div> + </div> + ))} + <div className="flex-1 border-b border-gray-200 flex items-center justify-start p-2 min-w-8"> + <button + onClick={onAddColumn} + disabled={savingColumn || savingColumnsConfig} + className="flex items-center justify-center text-gray-400 hover:text-gray-700 transition-colors disabled:text-gray-200" + > + <Plus className="h-4 w-4" /> + </button> </div> - ))} - <div className="flex-1 border-b border-gray-200 flex items-center justify-start p-2 min-w-8"> - <button - onClick={onAddColumn} - disabled={savingColumn || savingColumnsConfig} - className="flex items-center justify-center text-gray-400 hover:text-gray-700 transition-colors disabled:text-gray-200" - > - <Plus className="h-4 w-4" /> - </button> </div> </div> {/* Rows */} + <div + className="flex flex-1 flex-col overflow-auto min-h-0" + ref={scrollContainerRef} + onScroll={syncHeader} + > <div className="relative min-h-0 flex-1"> {dragOverFiles && ( <div className="absolute inset-0 z-[90] border-2 border-blue-400 bg-blue-50/40 pointer-events-none" /> @@ -385,6 +400,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( ); })} </div> + </div> </div> ); }); diff --git a/frontend/src/app/components/tabular/TabularReviewView.tsx b/frontend/src/app/components/tabular/TabularReviewView.tsx index ebbbeaf..bcc7171 100644 --- a/frontend/src/app/components/tabular/TabularReviewView.tsx +++ b/frontend/src/app/components/tabular/TabularReviewView.tsx @@ -23,6 +23,7 @@ import { getTabularReview, getProject, getTabularReviewPeople, + listProjects, regenerateTabularCell, streamTabularGeneration, updateTabularReview, @@ -38,12 +39,12 @@ import type { } from "../shared/types"; import { AddColumnModal } from "./AddColumnModal"; import { TRWorkflowModal } from "./TRWorkflowModal"; -import { AddDocumentsModal } from "../shared/AddDocumentsModal"; -import { AddProjectDocsModal } from "../shared/AddProjectDocsModal"; -import { PeopleModal } from "../shared/PeopleModal"; -import { OwnerOnlyModal } from "../shared/OwnerOnlyModal"; -import { ApiKeyMissingModal } from "../shared/ApiKeyMissingModal"; -import { ConfirmPopup } from "../shared/ConfirmPopup"; +import { AddDocumentsModal } from "../modals/AddDocumentsModal"; +import { AddProjectDocsModal } from "../modals/AddProjectDocsModal"; +import { PeopleModal } from "../modals/PeopleModal"; +import { OwnerOnlyPopup } from "../popups/OwnerOnlyPopup"; +import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; +import { ConfirmPopup } from "../popups/ConfirmPopup"; import { HeaderActionsMenu } from "../shared/HeaderActionsMenu"; import { useAuth } from "@/contexts/AuthContext"; import { useUserProfile } from "@/contexts/UserProfileContext"; @@ -56,6 +57,7 @@ import { TRSidePanel } from "./TRSidePanel"; import { TRTable } from "./TRTable"; import type { TRTableHandle } from "./TRTable"; import { TRChatPanel } from "./TRChatPanel"; +import { TabularReviewDetailsModal } from "./TabularReviewDetailsModal"; import { exportTabularReviewToExcel } from "./exportToExcel"; import { useSidebar } from "@/app/contexts/SidebarContext"; import { PageHeader } from "../shared/PageHeader"; @@ -79,6 +81,8 @@ export function TRView({ reviewId, projectId }: Props) { const [savingColumnsConfig, setSavingColumnsConfig] = useState(false); const [addColOpen, setAddColOpen] = useState(false); const [addDocsOpen, setAddDocsOpen] = useState(false); + const [detailsOpen, setDetailsOpen] = useState(false); + const [availableProjects, setAvailableProjects] = useState<Project[]>([]); const [peopleModalOpen, setPeopleModalOpen] = useState(false); const [workflowModalOpen, setWorkflowModalOpen] = useState(false); const [applyingWorkflow, setApplyingWorkflow] = useState(false); @@ -161,6 +165,12 @@ export function TRView({ reviewId, projectId }: Props) { .then(setProject) .catch(() => {}), ); + } else { + fetches.push( + listProjects() + .then(setAvailableProjects) + .catch(() => setAvailableProjects([])), + ); } Promise.all(fetches).finally(() => setLoading(false)); }, [reviewId, projectId]); @@ -546,28 +556,40 @@ export function TRView({ reviewId, projectId }: Props) { await clearResultsForDocuments(documents.map((document) => document.id)); } - async function handleTitleCommit(newTitle: string) { - if (!newTitle || newTitle === review?.title) return; + function requestReviewDetails() { if (review?.is_owner === false) { - setOwnerOnlyAction("rename this tabular review"); + setOwnerOnlyAction("edit tabular review details"); return; } - setReview((prev) => (prev ? { ...prev, title: newTitle } : prev)); - await updateTabularReview(reviewId, { title: newTitle }); + setDetailsOpen(true); } - function requestReviewRename() { - if (review?.is_owner === false) { - setOwnerOnlyAction("rename this tabular review"); + async function handleDetailsSave(values: { + title: string; + projectId?: string | null; + }) { + if (!review || review.is_owner === false) { + setOwnerOnlyAction("edit tabular review details"); return; } - const nextTitle = window.prompt( - "Rename tabular review", - review?.title ?? "Untitled Review", + const updated = await updateTabularReview(reviewId, { + title: values.title, + project_id: values.projectId ?? null, + }); + setReview((prev) => + prev + ? { + ...prev, + ...updated, + } + : updated, ); - const trimmed = nextTitle?.trim(); - if (!trimmed) return; - void handleTitleCommit(trimmed); + if (!projectId && updated.project_id) { + setDetailsOpen(false); + router.push( + `/projects/${updated.project_id}/tabular-reviews/${reviewId}`, + ); + } } function requestReviewDelete() { @@ -716,9 +738,9 @@ export function TRView({ reviewId, projectId }: Props) { <HeaderActionsMenu items={[ { - label: "Rename", + label: "Edit details", icon: Pencil, - onSelect: requestReviewRename, + onSelect: requestReviewDetails, }, { label: "Apply workflow", @@ -1046,6 +1068,16 @@ export function TRView({ reviewId, projectId }: Props) { /> )} + <TabularReviewDetailsModal + open={detailsOpen} + review={review} + projects={project ? [project] : availableProjects} + canEdit={review?.is_owner !== false} + lockProject={Boolean(projectId)} + onClose={() => setDetailsOpen(false)} + onSave={handleDetailsSave} + /> + <PeopleModal open={peopleModalOpen} onClose={() => setPeopleModalOpen(false)} @@ -1124,13 +1156,13 @@ export function TRView({ reviewId, projectId }: Props) { onConfirm={() => void confirmReviewDelete()} /> - <OwnerOnlyModal + <OwnerOnlyPopup open={!!ownerOnlyAction} action={ownerOnlyAction ?? undefined} onClose={() => setOwnerOnlyAction(null)} /> - <ApiKeyMissingModal + <ApiKeyMissingPopup open={apiKeyModalProvider !== null} provider={apiKeyModalProvider} onClose={() => setApiKeyModalProvider(null)} diff --git a/frontend/src/app/components/tabular/prompt-generator.ts b/frontend/src/app/components/tabular/prompt-generator.ts deleted file mode 100644 index 76b6441..0000000 --- a/frontend/src/app/components/tabular/prompt-generator.ts +++ /dev/null @@ -1,60 +0,0 @@ -const PROMPT_PRESETS: Array<{ - matches: RegExp; - prompt: (title: string) => string; -}> = [ - { - matches: /\bpart(y|ies)\b/i, - prompt: () => - 'Identify all parties referenced in the document. List their full names and describe each party\'s role or capacity in the agreement. If a party is not clearly identified, state "Not addressed".', - }, - { - matches: /\bchange of control\b/i, - prompt: () => - 'Identify any change of control provisions in the document. Summarize the trigger, the consequences, any consent requirements, and any related termination, acceleration, or notice obligations. If not addressed, state "Not addressed".', - }, - { - matches: /\bterminat(e|ion|ing)\b/i, - prompt: () => - 'Extract the termination provisions in the document. Summarize who may terminate, the termination triggers, any notice requirements, cure periods, and the consequences of termination. If not addressed, state "Not addressed".', - }, - { - matches: /\bgoverning law\b|\bjurisdiction\b/i, - prompt: () => - 'Identify the governing law and jurisdiction provisions in the document. State the governing law, the forum for disputes, and any submission to jurisdiction or venue requirements. If not addressed, state "Not addressed".', - }, - { - matches: /\bconfidential(ity)?\b|\bnon-?disclosure\b/i, - prompt: () => - 'Extract the confidentiality provisions in the document. Summarize the scope of confidential information, permitted disclosures, use restrictions, duration, and any carve-outs or exceptions. If not addressed, state "Not addressed".', - }, - { - matches: /\bassign(ment|ability)?\b/i, - prompt: () => - 'Identify any assignment provisions in the document. Summarize whether assignment is permitted, restricted, or requires consent, and note any exceptions or deemed assignments. If not addressed, state "Not addressed".', - }, - { - matches: /\bpayment\b|\bfees?\b/i, - prompt: () => - 'Extract the payment and fee terms in the document. Summarize payment obligations, amounts, timing, currencies, fee types, and any consequences for late or missed payment. If not addressed, state "Not addressed".', - }, -]; - -export function getPresetTabularPrompt(title: string): string | null { - const trimmedTitle = title.trim(); - if (!trimmedTitle) return null; - - const preset = PROMPT_PRESETS.find(({ matches }) => matches.test(trimmedTitle)); - return preset ? preset.prompt(trimmedTitle) : null; -} - -export function buildFallbackTabularPrompt(title: string): string { - const trimmedTitle = title.trim(); - if (!trimmedTitle) return ""; - - return ( - `Review each document and extract the information relevant to "${trimmedTitle}". ` + - `Provide a concise, document-specific summary for this column. ` + - `Include the key facts, dates, thresholds, parties, and conditions where applicable. ` + - `If the document does not contain relevant information, return "Not addressed".` - ); -} diff --git a/frontend/src/app/components/workflows/DisplayWorkflowModal.tsx b/frontend/src/app/components/workflows/DisplayWorkflowModal.tsx deleted file mode 100644 index 54a6b2c..0000000 --- a/frontend/src/app/components/workflows/DisplayWorkflowModal.tsx +++ /dev/null @@ -1,577 +0,0 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { Folder, Search, X } from "lucide-react"; -import type { Document, Workflow } from "../shared/types"; -import { createTabularReview } from "@/app/lib/mikeApi"; -import { useRouter } from "next/navigation"; -import { useDirectoryData } from "../shared/useDirectoryData"; -import { FileDirectory } from "../shared/FileDirectory"; -import type { Project } from "../shared/types"; -import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; -import { Modal } from "../shared/Modal"; -import { WorkflowPickerContent } from "./WorkflowPickerContent"; -import { workflowDetailPath } from "./workflowRoutes"; - -interface Props { - workflows: Workflow[]; - workflow: Workflow | null; - onClose: () => void; -} - -// --------------------------------------------------------------------------- -// Toggle switch -// --------------------------------------------------------------------------- -function Toggle({ on, onToggle }: { on: boolean; onToggle: () => void }) { - return ( - <button - type="button" - onClick={onToggle} - className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ${on ? "bg-gray-900" : "bg-gray-200"}`} - > - <span - className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${on ? "translate-x-4" : "translate-x-0"}`} - /> - </button> - ); -} - -// --------------------------------------------------------------------------- -// Simple project picker (input + dropdown) -// --------------------------------------------------------------------------- -function SimpleProjectPicker({ - projects, - selectedId, - onSelect, -}: { - projects: Project[]; - selectedId: string | null; - onSelect: (id: string | null) => void; -}) { - const [search, setSearch] = useState(""); - const [open, setOpen] = useState(false); - const selected = projects.find((p) => p.id === selectedId); - const filtered = search - ? projects.filter((p) => - p.name.toLowerCase().includes(search.toLowerCase()), - ) - : projects; - - return ( - <div className="relative"> - <input - type="text" - value={selectedId ? (selected?.name ?? "") : search} - onChange={(e) => { - setSearch(e.target.value); - setOpen(true); - onSelect(null); - }} - onFocus={() => setOpen(true)} - onBlur={() => setTimeout(() => setOpen(false), 150)} - placeholder="Select a project…" - className="w-full text-xs text-gray-700 placeholder:text-gray-400 bg-gray-50 border border-gray-200 rounded-md px-3 py-2 outline-none" - /> - {selectedId && ( - <button - onMouseDown={() => { - onSelect(null); - setSearch(""); - }} - className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" - > - <X className="h-3 w-3" /> - </button> - )} - {open && !selectedId && ( - <div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-sm overflow-y-auto max-h-40"> - {filtered.length === 0 ? ( - <p className="px-3 py-3 text-xs text-gray-400 text-center"> - No projects found - </p> - ) : ( - filtered.map((p) => ( - <button - key={p.id} - onMouseDown={() => { - onSelect(p.id); - setSearch(""); - setOpen(false); - }} - className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left hover:bg-gray-50 text-gray-700" - > - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - {p.name} - </button> - )) - )} - </div> - )} - </div> - ); -} - -// --------------------------------------------------------------------------- -// DisplayWorkflowModal -// --------------------------------------------------------------------------- -export function DisplayWorkflowModal({ workflows, workflow, onClose }: Props) { - const [screen, setScreen] = useState<"select" | "configure">("select"); - const [selected, setSelected] = useState<Workflow | null>(workflow); - const [listSearch, setListSearch] = useState(""); - - // Configure screen state - const [inProject, setInProject] = useState(false); - const [selectedProjectId, setSelectedProjectId] = useState<string | null>( - null, - ); - const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>( - new Set(), - ); - const [docSearch, setDocSearch] = useState(""); - const [assistantPrompt, setAssistantPrompt] = useState(""); - const [saving, setSaving] = useState(false); - - const router = useRouter(); - const { saveChat, setNewChatMessages } = useChatHistoryContext(); - const { - loading: dirLoading, - projects, - standaloneDocuments, - } = useDirectoryData(screen === "configure"); - - useEffect(() => { - if (workflow) { - setSelected(workflow); - setScreen("select"); - setListSearch(""); - } else { - setSelected(null); - } - }, [workflow?.id]); - - // Reset configure state on back - useEffect(() => { - if (screen === "select") { - setInProject(false); - setSelectedProjectId(null); - setSelectedDocIds(new Set()); - setDocSearch(""); - setAssistantPrompt(""); - } - }, [screen]); - - function handleClose() { - setSelected(null); - setScreen("select"); - onClose(); - } - - if (!workflow) return null; - const wf = selected ?? workflow; - - // --------------------------------------------------------------------------- - // Handlers - // --------------------------------------------------------------------------- - async function handleStartChat() { - setSaving(true); - try { - const projectId = inProject ? selectedProjectId! : undefined; - const chatId = await saveChat(projectId); - if (!chatId) return; - const allDocs: Document[] = [ - ...standaloneDocuments, - ...projects.flatMap((p) => p.documents || []), - ]; - const files = allDocs - .filter((d) => selectedDocIds.has(d.id)) - .map((d) => ({ - filename: d.filename, - document_id: d.id, - })); - const content = assistantPrompt.trim() - ? `implement workflow\n\n${assistantPrompt.trim()}` - : "implement workflow"; - setNewChatMessages([ - { - role: "user", - content, - files: files.length > 0 ? files : undefined, - }, - ]); - handleClose(); - router.push( - projectId - ? `/projects/${projectId}/assistant/chat/${chatId}` - : `/assistant/chat/${chatId}`, - ); - } finally { - setSaving(false); - } - } - - async function handleCreateReview() { - const allDocs: Document[] = [ - ...standaloneDocuments, - ...projects.flatMap((p) => p.documents || []), - ]; - const docIds = allDocs - .filter((d) => selectedDocIds.has(d.id)) - .map((d) => d.id); - const projectId = inProject ? selectedProjectId! : undefined; - - setSaving(true); - try { - const review = await createTabularReview({ - title: wf.title, - document_ids: docIds, - columns_config: wf.columns_config || [], - workflow_id: wf.is_system ? undefined : wf.id, - project_id: projectId, - }); - handleClose(); - router.push( - projectId - ? `/projects/${projectId}/tabular-reviews/${review.id}` - : `/tabular-reviews/${review.id}`, - ); - } finally { - setSaving(false); - } - } - - // --------------------------------------------------------------------------- - // Tabular doc browser helpers - // --------------------------------------------------------------------------- - const q = docSearch.toLowerCase().trim(); - const selectedProject = projects.find((p) => p.id === selectedProjectId); - const projectDocs = selectedProject?.documents ?? []; - - const filteredProjectDocs = q - ? projectDocs.filter((d) => - d.filename.toLowerCase().includes(q), - ) - : projectDocs; - - const filteredStandalone = q - ? standaloneDocuments.filter((d) => - d.filename.toLowerCase().includes(q), - ) - : standaloneDocuments; - - const filteredAllProjects = projects - .map((p) => ({ - ...p, - documents: (p.documents || []).filter( - (d) => - !q || d.filename.toLowerCase().includes(q), - ), - })) - .filter( - (p) => - !q || - p.name.toLowerCase().includes(q) || - p.documents.length > 0, - ); - - const breadcrumbs = - screen === "select" - ? ["Workflows", "Select workflow"] - : [ - <button - key="workflows" - type="button" - onClick={() => setScreen("select")} - className="transition-colors hover:text-gray-700" - > - Workflows - </button>, - wf.title, - wf.type === "assistant" ? "New Chat" : "New Review", - ]; - - const selectPageAction = () => { - router.push(workflowDetailPath(wf)); - handleClose(); - }; - - // --------------------------------------------------------------------------- - // Render - // --------------------------------------------------------------------------- - return ( - <Modal - open={!!workflow} - onClose={handleClose} - size={screen === "select" ? "xl" : "lg"} - breadcrumbs={breadcrumbs} - secondaryAction={ - screen === "select" - ? { - label: wf.is_system ? "View Page" : "Edit", - onClick: selectPageAction, - } - : undefined - } - footerStatus={ - screen === "configure" && - (wf.type === "assistant" - ? !inProject && selectedDocIds.size > 0 - : selectedDocIds.size > 0) ? ( - <span className="text-xs text-gray-400"> - {selectedDocIds.size} selected - </span> - ) : null - } - primaryAction={ - screen === "select" - ? { - label: "Use", - onClick: () => setScreen("configure"), - } - : wf.type === "assistant" - ? { - label: saving ? "Starting…" : "Start Chat", - onClick: handleStartChat, - disabled: - saving || (inProject && !selectedProjectId), - } - : { - label: saving ? "Creating…" : "Create Review", - onClick: handleCreateReview, - disabled: - saving || - selectedDocIds.size === 0 || - (inProject && !selectedProjectId), - } - } - cancelAction={false} - > - - {/* ── SELECT SCREEN ── */} - {screen === "select" && ( - <WorkflowPickerContent - workflows={workflows} - selected={wf} - onSelect={(next) => { - if (next) setSelected(next); - }} - search={listSearch} - onSearchChange={setListSearch} - workflowType="all" - previewMode="auto" - showTypeIcon - allowClearPreview={false} - /> - )} - - {/* ── ASSISTANT CONFIGURE SCREEN ── */} - {screen === "configure" && wf.type === "assistant" && ( - <div className="flex-1 min-h-0 flex flex-col overflow-hidden"> - {/* Add-on prompt */} - <div className="pb-3 shrink-0"> - <p className="text-xs font-medium text-gray-700 mb-2"> - Message (optional) - </p> - <textarea - rows={3} - value={assistantPrompt} - onChange={(e) => - setAssistantPrompt(e.target.value) - } - placeholder="Add any additional instructions to the workflow prompt…" - className="w-full text-sm text-gray-700 placeholder:text-gray-400 bg-gray-50 border border-gray-200 rounded-md px-3 py-2 resize-none outline-none leading-relaxed" - /> - </div> - - {/* Toggle row */} - <div className="py-3 flex flex-col gap-2 shrink-0"> - <span className="text-xs font-medium text-gray-700"> - Create in a project - </span> - <Toggle - on={inProject} - onToggle={() => { - setInProject(!inProject); - setSelectedProjectId(null); - setSelectedDocIds(new Set()); - setDocSearch(""); - }} - /> - </div> - - {inProject ? ( - <> - <div className="pt-1 pb-1 shrink-0"> - <p className="text-xs font-medium text-gray-700"> - Select project - </p> - </div> - <div className="pb-2 shrink-0"> - <SimpleProjectPicker - projects={projects} - selectedId={selectedProjectId} - onSelect={setSelectedProjectId} - /> - </div> - </> - ) : ( - <> - <div className="pt-1 pb-1 shrink-0"> - <p className="text-xs font-medium text-gray-700"> - Select documents - </p> - </div> - - {/* Search */} - <div className="pt-1.5 pb-1 shrink-0"> - <div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5 py-1"> - <Search className="h-3 w-3 text-gray-400 shrink-0" /> - <input - type="text" - placeholder="Search…" - value={docSearch} - onChange={(e) => - setDocSearch(e.target.value) - } - className="flex-1 bg-transparent text-xs text-gray-700 placeholder:text-gray-400 outline-none" - /> - {docSearch && ( - <button - onClick={() => - setDocSearch("") - } - className="text-gray-400 hover:text-gray-600" - > - <X className="h-3 w-3" /> - </button> - )} - </div> - </div> - - {/* File browser */} - <div className="flex-1 overflow-y-auto pb-2"> - <FileDirectory - standaloneDocs={filteredStandalone} - directoryProjects={ - filteredAllProjects - } - loading={dirLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - allowMultiple - forceExpanded={!!q} - emptyMessage={ - q - ? "No matches found" - : "No documents yet" - } - /> - </div> - </> - )} - </div> - )} - - {/* ── TABULAR CONFIGURE SCREEN ── */} - {screen === "configure" && wf.type === "tabular" && ( - <div className="flex-1 min-h-0 flex flex-col overflow-hidden"> - {/* Toggle stacked */} - <div className="pb-3 flex flex-col gap-2 shrink-0"> - <span className="text-xs font-medium text-gray-700"> - Create in a project - </span> - <Toggle - on={inProject} - onToggle={() => { - setInProject(!inProject); - setSelectedProjectId(null); - setDocSearch(""); - setSelectedDocIds(new Set()); - }} - /> - </div> - - {/* Project section */} - {inProject && ( - <> - <div className="pt-1 pb-1 shrink-0"> - <p className="text-xs font-medium text-gray-700"> - Select Project - </p> - </div> - <div className="pb-2 shrink-0"> - <SimpleProjectPicker - projects={projects} - selectedId={selectedProjectId} - onSelect={(id) => { - setSelectedProjectId(id); - if (!id) - setSelectedDocIds( - new Set(), - ); - }} - /> - </div> - </> - )} - - {/* Documents section */} - <div className="pt-3 pb-1 shrink-0"> - <p className="text-xs font-medium text-gray-700"> - Select Documents - </p> - </div> - - {/* Search */} - <div className="pt-1.5 pb-1 shrink-0"> - <div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5 py-1"> - <Search className="h-3 w-3 text-gray-400 shrink-0" /> - <input - type="text" - placeholder="Search…" - value={docSearch} - onChange={(e) => - setDocSearch(e.target.value) - } - className="flex-1 bg-transparent text-xs text-gray-700 placeholder:text-gray-400 outline-none" - /> - {docSearch && ( - <button - onClick={() => setDocSearch("")} - className="text-gray-400 hover:text-gray-600" - > - <X className="h-3 w-3" /> - </button> - )} - </div> - </div> - - {/* File browser */} - <div className="flex-1 overflow-y-auto pb-2"> - <FileDirectory - standaloneDocs={ - inProject - ? filteredProjectDocs - : filteredStandalone - } - directoryProjects={ - inProject ? [] : filteredAllProjects - } - loading={dirLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - allowMultiple - forceExpanded={!!q || inProject} - emptyMessage={ - q - ? "No matches found" - : inProject - ? "No documents in this project" - : "No documents yet" - } - /> - </div> - </div> - )} - </Modal> - ); -} diff --git a/frontend/src/app/components/workflows/NewWorkflowModal.tsx b/frontend/src/app/components/workflows/NewWorkflowModal.tsx index 82e44f1..17c0e82 100644 --- a/frontend/src/app/components/workflows/NewWorkflowModal.tsx +++ b/frontend/src/app/components/workflows/NewWorkflowModal.tsx @@ -1,11 +1,163 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { MessageSquare, Table2 } from "lucide-react"; import { createWorkflow, updateWorkflow } from "@/app/lib/mikeApi"; import type { Workflow } from "../shared/types"; import { PRACTICE_OPTIONS } from "./practices"; -import { Modal } from "../shared/Modal"; +import { Modal } from "../modals/Modal"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; +import { ModalSegmentedToggle } from "../modals/ModalSegmentedToggle"; +import { ModalSelect } from "../modals/ModalSelect"; +import { ModalTextInput } from "../modals/ModalTextInput"; + +const DEFAULT_LANGUAGE = "English"; +const DEFAULT_PRACTICE = "General Transactions"; +const DEFAULT_JURISDICTION = "General"; +const LANGUAGE_OPTIONS = [ + "English", + "Chinese", + "Spanish", + "French", + "German", + "Japanese", + "Korean", + "Portuguese", + "Italian", + "Dutch", + "Arabic", + "Hebrew", + "Persian", + "Urdu", + "Hindi", + "Bengali", + "Tamil", + "Telugu", + "Indonesian", + "Malay", + "Filipino", + "Vietnamese", + "Thai", + "Burmese", + "Khmer", + "Lao", + "Russian", + "Ukrainian", + "Turkish", + "Polish", + "Czech", + "Romanian", + "Greek", + "Danish", + "Finnish", + "Norwegian", + "Swedish", + "Afrikaans", + "Swahili", + "Other", +] as const; +const JURISDICTION_OPTIONS = [ + "General", + "United States", + "England and Wales", + "European Union", + "Singapore", + "Hong Kong", + "Australia", + "Canada", + "India", + "Malaysia", + "Indonesia", + "Philippines", + "Thailand", + "Vietnam", + "Japan", + "South Korea", + "China", + "Taiwan", + "Germany", + "France", + "Netherlands", + "Ireland", + "Scotland", + "Luxembourg", + "Switzerland", + "Cayman Islands", + "British Virgin Islands", + "United Arab Emirates", + "Saudi Arabia", + "Brazil", + "Mexico", + "Other", +] as const; +const US_STATE_OPTIONS = [ + "Alabama", + "Alaska", + "Arizona", + "Arkansas", + "California", + "Colorado", + "Connecticut", + "Delaware", + "Florida", + "Georgia", + "Hawaii", + "Idaho", + "Illinois", + "Indiana", + "Iowa", + "Kansas", + "Kentucky", + "Louisiana", + "Maine", + "Maryland", + "Massachusetts", + "Michigan", + "Minnesota", + "Mississippi", + "Missouri", + "Montana", + "Nebraska", + "Nevada", + "New Hampshire", + "New Jersey", + "New Mexico", + "New York", + "North Carolina", + "North Dakota", + "Ohio", + "Oklahoma", + "Oregon", + "Pennsylvania", + "Rhode Island", + "South Carolina", + "South Dakota", + "Tennessee", + "Texas", + "Utah", + "Vermont", + "Virginia", + "Washington", + "West Virginia", + "Wisconsin", + "Wyoming", + "District of Columbia", +] as const; +const CANADA_PROVINCE_OPTIONS = [ + "Alberta", + "British Columbia", + "Manitoba", + "New Brunswick", + "Newfoundland and Labrador", + "Northwest Territories", + "Nova Scotia", + "Nunavut", + "Ontario", + "Prince Edward Island", + "Quebec", + "Saskatchewan", + "Yukon", +] as const; interface Props { open: boolean; @@ -15,42 +167,153 @@ interface Props { onUpdated?: (workflow: Workflow) => void; } -export function NewWorkflowModal({ open, onClose, onCreated, editWorkflow, onUpdated }: Props) { +export function NewWorkflowModal({ + open, + onClose, + onCreated, + editWorkflow, + onUpdated, +}: Props) { const [title, setTitle] = useState(""); const [type, setType] = useState<"assistant" | "tabular">("assistant"); - const [practice, setPractice] = useState<string>(""); + const [language, setLanguage] = useState(DEFAULT_LANGUAGE); + const [customLanguage, setCustomLanguage] = useState(""); + const [practice, setPractice] = useState<string>(DEFAULT_PRACTICE); const [customPractice, setCustomPractice] = useState(""); + const [jurisdiction, setJurisdiction] = useState(DEFAULT_JURISDICTION); + const [jurisdictionRegion, setJurisdictionRegion] = useState(""); + const [customJurisdiction, setCustomJurisdiction] = useState(""); + const [openDropdown, setOpenDropdown] = useState< + "language" | "practice" | "jurisdiction" | "jurisdictionRegion" | null + >(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const customLanguageInputRef = useRef<HTMLInputElement>(null); const customInputRef = useRef<HTMLInputElement>(null); + const customJurisdictionInputRef = useRef<HTMLInputElement>(null); const isEditing = !!editWorkflow; - const isOthers = practice === "Others"; - const effectivePractice = isOthers ? (customPractice.trim() || null) : (practice || null); + const isOtherLanguage = language === "Other"; + const isOtherPractice = practice === "Other"; + const isOtherJurisdiction = jurisdiction === "Other"; + const effectiveLanguage = isOtherLanguage + ? customLanguage.trim() + : language.trim(); + const effectivePractice = isOtherPractice ? (customPractice.trim() || null) : (practice || null); + const effectiveJurisdiction = isOtherJurisdiction + ? customJurisdiction.trim() + : jurisdictionRegion.trim() || jurisdiction; + const languageOptions = ( + (LANGUAGE_OPTIONS as readonly string[]).includes(language) + ? LANGUAGE_OPTIONS + : [language, ...LANGUAGE_OPTIONS] + ).filter(Boolean); + const baseJurisdictionOptions = + (JURISDICTION_OPTIONS as readonly string[]).includes(jurisdiction) + ? JURISDICTION_OPTIONS + : [jurisdiction, ...JURISDICTION_OPTIONS]; + const jurisdictionOptions = baseJurisdictionOptions.filter(Boolean); + const jurisdictionRegionOptions = + jurisdiction === "United States" + ? US_STATE_OPTIONS + : jurisdiction === "Canada" + ? CANADA_PROVINCE_OPTIONS + : []; + const effectiveJurisdictions = effectiveJurisdiction + .split(",") + .map((item) => item.trim()) + .filter(Boolean); const formId = "workflow-modal-form"; + const resetForm = useCallback(() => { + setTitle(""); + setType("assistant"); + setLanguage(DEFAULT_LANGUAGE); + setCustomLanguage(""); + setPractice(DEFAULT_PRACTICE); + setCustomPractice(""); + setJurisdiction(DEFAULT_JURISDICTION); + setJurisdictionRegion(""); + setCustomJurisdiction(""); + setOpenDropdown(null); + setError(""); + }, []); + useEffect(() => { if (open && editWorkflow) { setTitle(editWorkflow.title); setType(editWorkflow.type); - const saved = editWorkflow.practice ?? ""; + const savedLanguage = editWorkflow.language ?? DEFAULT_LANGUAGE; + const isKnownLanguage = (LANGUAGE_OPTIONS as readonly string[]).includes(savedLanguage); + if (!isKnownLanguage && savedLanguage) { + setLanguage("Other"); + setCustomLanguage(savedLanguage); + } else { + setLanguage(savedLanguage); + setCustomLanguage(""); + } + const savedJurisdiction = editWorkflow.jurisdictions?.length + ? editWorkflow.jurisdictions.join(", ") + : DEFAULT_JURISDICTION; + const isKnownJurisdiction = + (JURISDICTION_OPTIONS as readonly string[]).includes(savedJurisdiction); + const isUsState = (US_STATE_OPTIONS as readonly string[]).includes( + savedJurisdiction, + ); + const isCanadaProvince = ( + CANADA_PROVINCE_OPTIONS as readonly string[] + ).includes(savedJurisdiction); + if (!isKnownJurisdiction && savedJurisdiction) { + if (isUsState) { + setJurisdiction("United States"); + setJurisdictionRegion(savedJurisdiction); + setCustomJurisdiction(""); + } else if (isCanadaProvince) { + setJurisdiction("Canada"); + setJurisdictionRegion(savedJurisdiction); + setCustomJurisdiction(""); + } else { + setJurisdiction("Other"); + setJurisdictionRegion(""); + setCustomJurisdiction(savedJurisdiction); + } + } else { + setJurisdiction(savedJurisdiction); + setJurisdictionRegion(""); + setCustomJurisdiction(""); + } + const saved = editWorkflow.practice ?? DEFAULT_PRACTICE; const isKnown = (PRACTICE_OPTIONS as readonly string[]).includes(saved); if (!isKnown && saved) { - setPractice("Others"); + setPractice("Other"); setCustomPractice(saved); } else { setPractice(saved); setCustomPractice(""); } setError(""); + } else if (open) { + resetForm(); } - }, [open, editWorkflow?.id]); + }, [open, editWorkflow, resetForm]); useEffect(() => { - if (isOthers) { + if (isOtherLanguage) { + customLanguageInputRef.current?.focus(); + } + }, [isOtherLanguage]); + + useEffect(() => { + if (isOtherPractice) { customInputRef.current?.focus(); } - }, [isOthers]); + }, [isOtherPractice]); + + useEffect(() => { + if (isOtherJurisdiction) { + customJurisdictionInputRef.current?.focus(); + } + }, [isOtherJurisdiction]); if (!open) return null; @@ -63,14 +326,22 @@ export function NewWorkflowModal({ open, onClose, onCreated, editWorkflow, onUpd if (isEditing && editWorkflow) { const updated = await updateWorkflow(editWorkflow.id, { title: title.trim(), + language: effectiveLanguage || null, practice: effectivePractice, + jurisdictions: effectiveJurisdictions.length + ? effectiveJurisdictions + : null, }); onUpdated?.(updated); } else { const workflow = await createWorkflow({ title: title.trim(), type, + language: effectiveLanguage || null, practice: effectivePractice, + jurisdictions: effectiveJurisdictions.length + ? effectiveJurisdictions + : null, }); onCreated(workflow); } @@ -83,14 +354,6 @@ export function NewWorkflowModal({ open, onClose, onCreated, editWorkflow, onUpd } } - function resetForm() { - setTitle(""); - setType("assistant"); - setPractice(""); - setCustomPractice(""); - setError(""); - } - function handleClose() { resetForm(); onClose(); @@ -120,82 +383,198 @@ export function NewWorkflowModal({ open, onClose, onCreated, editWorkflow, onUpd <form id={formId} onSubmit={handleSubmit} - className="flex flex-col flex-1 min-h-0" + className="flex min-h-0 flex-1 flex-col" > - <input - type="text" - value={title} - onChange={(e) => setTitle(e.target.value)} - placeholder="Workflow name" - className="w-full text-2xl font-serif text-gray-800 placeholder-gray-300 focus:outline-none bg-transparent" - autoFocus - /> + <div className="space-y-6"> + <div> + <ModalFieldLabel htmlFor="workflow-title"> + Title + </ModalFieldLabel> + <ModalTextInput + id="workflow-title" + type="text" + value={title} + onChange={(e) => setTitle(e.target.value)} + placeholder="Add workflow name" + variant="minimal" + autoFocus + /> + </div> - {!isEditing && ( - <div className="mt-5"> - <p className="mb-2 text-sm font-medium text-gray-500">Type</p> - <div className="flex items-center gap-2"> - <button - type="button" - onClick={() => setType("assistant")} - className={`flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors ${ - type === "assistant" - ? "border-gray-900 bg-gray-900 text-white" - : "border-gray-200 text-gray-600 hover:bg-gray-50" - }`} - > - <MessageSquare className="h-3 w-3" /> - Assistant - </button> - <button - type="button" - onClick={() => setType("tabular")} - className={`flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors ${ - type === "tabular" - ? "border-gray-900 bg-gray-900 text-white" - : "border-gray-200 text-gray-600 hover:bg-gray-50" - }`} - > - <Table2 className="h-3 w-3" /> - Tabular - </button> + {!isEditing && ( + <div> + <ModalFieldLabel as="p">Type</ModalFieldLabel> + <ModalSegmentedToggle + value={type} + onChange={setType} + options={[ + { + value: "assistant", + label: "Assistant", + icon: MessageSquare, + }, + { + value: "tabular", + label: "Tabular", + icon: Table2, + }, + ]} + /> + </div> + )} + + <div className="grid gap-5 md:grid-cols-2"> + <div> + <ModalFieldLabel htmlFor="workflow-language"> + Language + </ModalFieldLabel> + <ModalSelect + id="workflow-language" + value={language} + options={languageOptions} + open={openDropdown === "language"} + onOpenChange={(nextOpen) => + setOpenDropdown((current) => + nextOpen + ? "language" + : current === "language" + ? null + : current, + ) + } + onChange={(value) => { + setLanguage(value); + if (value !== "Other") { + setCustomLanguage(""); + } + setOpenDropdown(null); + }} + /> + {isOtherLanguage && ( + <ModalTextInput + ref={customLanguageInputRef} + type="text" + value={customLanguage} + onChange={(e) => + setCustomLanguage(e.target.value) + } + placeholder="Enter language…" + className="mt-2" + /> + )} + </div> + + <div> + <ModalFieldLabel htmlFor="workflow-practice"> + Practice area + </ModalFieldLabel> + <ModalSelect + id="workflow-practice" + value={practice} + options={PRACTICE_OPTIONS} + open={openDropdown === "practice"} + onOpenChange={(nextOpen) => + setOpenDropdown((current) => + nextOpen + ? "practice" + : current === "practice" + ? null + : current, + ) + } + onChange={(value) => { + setPractice(value); + if (value !== "Other") { + setCustomPractice(""); + } + setOpenDropdown(null); + }} + /> + {isOtherPractice && ( + <ModalTextInput + ref={customInputRef} + type="text" + value={customPractice} + onChange={(e) => + setCustomPractice(e.target.value) + } + placeholder="Enter practice area…" + className="mt-2" + /> + )} </div> </div> - )} - <div className="mt-5"> - <p className="mb-2 text-sm font-medium text-gray-500">Practice Area</p> - <div className="flex flex-wrap gap-2"> - {PRACTICE_OPTIONS.map((p) => ( - <button - key={p} - type="button" - onClick={() => setPractice(practice === p ? "" : p)} - className={`rounded-full border px-3 py-1 text-xs transition-colors ${ - practice === p - ? "border-gray-900 bg-gray-900 text-white" - : "border-gray-200 text-gray-600 hover:bg-gray-50" - }`} - > - {p} - </button> - ))} - </div> - {isOthers && ( - <input - ref={customInputRef} - type="text" - value={customPractice} - onChange={(e) => setCustomPractice(e.target.value)} - placeholder="Enter practice area…" - className="mt-3 w-full rounded-md border border-gray-200 px-3 py-1.5 text-sm text-gray-700 placeholder-gray-400 focus:border-gray-400 focus:outline-none" + <div> + <ModalFieldLabel htmlFor="workflow-jurisdiction"> + Jurisdiction + </ModalFieldLabel> + <ModalSelect + id="workflow-jurisdiction" + value={jurisdiction} + options={jurisdictionOptions} + open={openDropdown === "jurisdiction"} + onOpenChange={(nextOpen) => + setOpenDropdown((current) => + nextOpen + ? "jurisdiction" + : current === "jurisdiction" + ? null + : current, + ) + } + onChange={(value) => { + setJurisdiction(value); + setJurisdictionRegion(""); + if (value !== "Other") { + setCustomJurisdiction(""); + } + setOpenDropdown(null); + }} /> - )} - </div> + {jurisdictionRegionOptions.length > 0 && ( + <ModalSelect + id="workflow-jurisdiction-region" + className="mt-2" + value={jurisdictionRegion} + options={jurisdictionRegionOptions} + placeholder={ + jurisdiction === "United States" + ? "Select state..." + : "Select province..." + } + open={openDropdown === "jurisdictionRegion"} + onOpenChange={(nextOpen) => + setOpenDropdown((current) => + nextOpen + ? "jurisdictionRegion" + : current === "jurisdictionRegion" + ? null + : current, + ) + } + onChange={(value) => { + setJurisdictionRegion(value); + setOpenDropdown(null); + }} + /> + )} + {isOtherJurisdiction && ( + <ModalTextInput + ref={customJurisdictionInputRef} + type="text" + value={customJurisdiction} + onChange={(e) => + setCustomJurisdiction(e.target.value) + } + placeholder="Enter jurisdiction…" + className="mt-2" + /> + )} + </div> - {error && ( - <p className="mt-4 text-sm text-red-500">{error}</p> - )} + {error && <p className="text-sm text-red-500">{error}</p>} + </div> </form> </Modal> ); diff --git a/frontend/src/app/components/workflows/ShareWorkflowModal.tsx b/frontend/src/app/components/workflows/ShareWorkflowModal.tsx deleted file mode 100644 index b2e1459..0000000 --- a/frontend/src/app/components/workflows/ShareWorkflowModal.tsx +++ /dev/null @@ -1,156 +0,0 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { X } from "lucide-react"; -import { - deleteWorkflowShare, - listWorkflowShares, - shareWorkflow, -} from "@/app/lib/mikeApi"; -import { useAuth } from "@/contexts/AuthContext"; -import { EmailPillInput } from "../shared/EmailPillInput"; -import { Modal } from "../shared/Modal"; - -interface Share { - id: string; - shared_with_email: string; - allow_edit: boolean; - created_at: string; -} - -interface Props { - workflowId: string; - workflowName: string; - onClose: () => void; -} - -export function ShareWorkflowModal({ - workflowId, - workflowName, - onClose, -}: Props) { - const [pendingEmails, setPendingEmails] = useState<string[]>([]); - const [allowEdit, setAllowEdit] = useState(false); - const [existingShares, setExistingShares] = useState<Share[]>([]); - const [loading, setLoading] = useState(true); - const [saving, setSaving] = useState(false); - const [error, setError] = useState<string | null>(null); - const { user } = useAuth(); - const ownEmail = user?.email?.trim().toLowerCase() ?? null; - - useEffect(() => { - listWorkflowShares(workflowId) - .then(setExistingShares) - .catch(() => {}) - .finally(() => setLoading(false)); - }, [workflowId]); - - async function handleRemoveShare(shareId: string) { - await deleteWorkflowShare(workflowId, shareId).catch(() => {}); - setExistingShares((prev) => prev.filter((s) => s.id !== shareId)); - } - - async function handleConfirm() { - const emails = ownEmail - ? pendingEmails.filter((email) => email !== ownEmail) - : pendingEmails; - if (emails.length === 0) return; - setSaving(true); - setError(null); - try { - await shareWorkflow(workflowId, { emails, allow_edit: allowEdit }); - const updated = await listWorkflowShares(workflowId); - setExistingShares(updated); - setPendingEmails([]); - } catch (err) { - setError( - err instanceof Error && err.message - ? err.message - : "Unable to share this workflow. Please try again.", - ); - } finally { - setSaving(false); - } - } - - return ( - <Modal - open - onClose={onClose} - breadcrumbs={["Workflows", workflowName, "People"]} - primaryAction={{ - label: saving ? "Sharing…" : "Share", - onClick: handleConfirm, - disabled: saving || pendingEmails.length === 0, - }} - > - <div className="flex min-h-0 flex-1 flex-col gap-6"> - <section className="space-y-3"> - <EmailPillInput - emails={pendingEmails} - onChange={setPendingEmails} - validate={async (email) => - ownEmail && email === ownEmail - ? "You cannot share a workflow with yourself." - : null - } - placeholder="Add people by email…" - autoFocus - /> - - {error ? ( - <div className="rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700"> - {error} - </div> - ) : null} - </section> - - {/* Permission toggle */} - <section className="flex flex-col gap-3"> - <span className="text-xs font-medium text-gray-700">Allow editing by share recipients</span> - <button - type="button" - onClick={() => setAllowEdit((v) => !v)} - className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ${allowEdit ? "bg-gray-900" : "bg-gray-200"}`} - > - <span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transition-transform duration-200 ${allowEdit ? "translate-x-4" : "translate-x-0"}`} /> - </button> - </section> - - {/* Existing access */} - <section className="min-h-0 flex-1"> - <p className="text-xs font-medium text-gray-700 mb-2">People with access</p> - {loading ? ( - <div className="space-y-2"> - {[1, 2].map((i) => ( - <div key={i} className="flex items-center justify-between"> - <div className="h-3 w-40 rounded bg-gray-100 animate-pulse" /> - <div className="h-3 w-16 rounded bg-gray-100 animate-pulse" /> - </div> - ))} - </div> - ) : existingShares.length === 0 ? ( - <p className="text-sm text-gray-400">None</p> - ) : ( - <div className="space-y-1"> - {existingShares.map((share) => ( - <div key={share.id} className="flex items-center justify-between py-1"> - <span className="text-sm text-gray-700 truncate">{share.shared_with_email}</span> - <div className="flex items-center gap-3 shrink-0"> - <span className="text-xs text-gray-400">{share.allow_edit ? "Can edit" : "Read-only"}</span> - <button - onClick={() => handleRemoveShare(share.id)} - className="text-gray-300 hover:text-red-500 transition-colors" - > - <X className="h-3.5 w-3.5" /> - </button> - </div> - </div> - ))} - </div> - )} - </section> - </div> - </Modal> - ); -} diff --git a/frontend/src/app/components/workflows/WFColumnViewModal.tsx b/frontend/src/app/components/workflows/WFColumnViewModal.tsx index 31c03a2..32382e2 100644 --- a/frontend/src/app/components/workflows/WFColumnViewModal.tsx +++ b/frontend/src/app/components/workflows/WFColumnViewModal.tsx @@ -1,10 +1,12 @@ "use client"; +import { createElement } from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import type { ColumnConfig } from "../shared/types"; import { formatIcon, formatLabel } from "../tabular/columnFormat"; -import { Modal } from "../shared/Modal"; +import { Modal } from "../modals/Modal"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; interface Props { col: ColumnConfig; @@ -12,7 +14,9 @@ interface Props { } export function WFColumnViewModal({ col, onClose }: Props) { - const FormatIcon = formatIcon(col.format ?? "text"); + const formatIconElement = createElement(formatIcon(col.format ?? "text"), { + className: "h-3.5 w-3.5 text-gray-400", + }); return ( <Modal open @@ -24,21 +28,21 @@ export function WFColumnViewModal({ col, onClose }: Props) { }} cancelAction={false} > - <div className="flex flex-col gap-4"> + <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto"> <div> - <p className="text-sm font-medium text-gray-500 mb-2">Column Title</p> + <ModalFieldLabel as="p" className="text-gray-500">Column Title</ModalFieldLabel> <p className="text-sm text-gray-800">{col.name}</p> </div> <div> - <p className="text-sm font-medium text-gray-500 mb-2">Format</p> + <ModalFieldLabel as="p" className="text-gray-500">Format</ModalFieldLabel> <span className="inline-flex items-center gap-1.5 text-sm text-gray-700"> - <FormatIcon className="h-3.5 w-3.5 text-gray-400" /> + {formatIconElement} {formatLabel(col.format ?? "text")} </span> </div> {col.tags && col.tags.length > 0 && ( <div> - <p className="text-sm font-medium text-gray-500 mb-2.5">Tags</p> + <ModalFieldLabel as="p" className="text-gray-500">Tags</ModalFieldLabel> <div className="flex flex-wrap gap-1.5"> {col.tags.map((tag) => ( <span key={tag} className="inline-block rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{tag}</span> @@ -47,7 +51,7 @@ export function WFColumnViewModal({ col, onClose }: Props) { </div> )} <div> - <p className="text-sm font-medium text-gray-500 mb-2">Prompt</p> + <ModalFieldLabel as="p" className="text-gray-500">Prompt</ModalFieldLabel> <div className="text-base text-gray-700 leading-relaxed font-serif prose prose-base max-w-none"> <ReactMarkdown remarkPlugins={[remarkGfm]}>{col.prompt || "_No prompt defined._"}</ReactMarkdown> </div> diff --git a/frontend/src/app/components/workflows/WFEditColumnModal.tsx b/frontend/src/app/components/workflows/WFEditColumnModal.tsx index b66ab2d..dea3e01 100644 --- a/frontend/src/app/components/workflows/WFEditColumnModal.tsx +++ b/frontend/src/app/components/workflows/WFEditColumnModal.tsx @@ -8,6 +8,7 @@ import { generateTabularColumnPrompt } from "@/app/lib/mikeApi"; import { FORMAT_OPTIONS, formatLabel, formatIcon } from "../tabular/columnFormat"; import { TAG_COLORS } from "../tabular/pillUtils"; import { getPresetConfig, PROMPT_PRESETS } from "../tabular/columnPresets"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; import { DropdownMenu, DropdownMenuContent, @@ -128,7 +129,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) </div> <button onClick={onClose} - className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors" + className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100/70 hover:text-gray-600 transition-colors" > <X className="h-4 w-4" /> </button> @@ -164,7 +165,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) type="button" onClick={() => setPresetsOpen((v) => !v)} title="Column presets" - className="mt-1.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700" + className="mt-1.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100/70 hover:text-gray-700" > <ChevronDown className={`h-4 w-4 transition-transform ${presetsOpen ? "rotate-180" : ""}`} /> </button> @@ -173,7 +174,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) <button type="button" onClick={() => { update({ name: "", prompt: "", format: "text", tags: [], tagInput: "" }); setPresetsOpen(false); }} - className="w-full px-3 py-2 text-left text-sm text-gray-400 hover:bg-gray-50 transition-colors border-b border-gray-100" + className="w-full px-3 py-2 text-left text-sm text-gray-400 transition-all hover:bg-gray-100/70 border-b border-gray-100" > No Preset </button> @@ -185,7 +186,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) update({ name: preset.name, prompt: preset.prompt, format: preset.format, tags: preset.tags ?? [], tagInput: "" }); setPresetsOpen(false); }} - className="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 transition-colors" + className="w-full px-3 py-2 text-left text-sm text-gray-700 transition-all hover:bg-gray-100/70" > {preset.name} </button> @@ -197,7 +198,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) {/* Format */} <div className="mt-4"> - <label className="text-sm font-medium text-gray-500">Format</label> + <ModalFieldLabel className="text-gray-500">Format</ModalFieldLabel> <DropdownMenu> <DropdownMenuTrigger asChild> <button className="mt-1 flex items-center justify-between rounded-md border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-700 hover:border-gray-400 focus:outline-none"> @@ -227,7 +228,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) {/* Tag input */} {draft.format === "tag" && ( <div className="mt-3"> - <label className="text-sm font-medium text-gray-500">Tags</label> + <ModalFieldLabel className="text-gray-500">Tags</ModalFieldLabel> <div className="mt-1 flex flex-wrap gap-1.5 rounded-md border border-gray-200 px-2 py-1.5 focus-within:border-gray-400"> {draft.tags.map((tag, tagIdx) => ( <span @@ -260,7 +261,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) {/* Prompt */} <div className="mt-4 flex items-center justify-between"> - <label className="text-sm font-medium text-gray-500">Prompt</label> + <ModalFieldLabel className="mb-0 text-gray-500">Prompt</ModalFieldLabel> <button type="button" onClick={autoGeneratePrompt} @@ -297,7 +298,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) <button type="button" onClick={onClose} - className="rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-100 transition-colors" + className="rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-100/70 transition-colors" > Cancel </button> diff --git a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx index b4f1eed..a3aad44 100644 --- a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx +++ b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx @@ -6,25 +6,38 @@ import dynamic from "next/dynamic"; import { Check, ChevronDown, - Info, + Globe, Pencil, Plus, Trash2, Users, X, } from "lucide-react"; -import { deleteWorkflow, getWorkflow, updateWorkflow } from "@/app/lib/mikeApi"; -import { ShareWorkflowModal } from "@/app/components/workflows/ShareWorkflowModal"; +import { + deleteWorkflowShare, + deleteWorkflow, + getWorkflow, + listWorkflowShares, + lookupUserByEmail, + shareWorkflow, + updateWorkflow, + type ProjectPeople, +} from "@/app/lib/mikeApi"; +import { UseWorkflowModal } from "@/app/components/workflows/UseWorkflowModal"; import { WFEditColumnModal } from "@/app/components/workflows/WFEditColumnModal"; import { WFColumnViewModal } from "@/app/components/workflows/WFColumnViewModal"; import { AddColumnModal } from "@/app/components/tabular/AddColumnModal"; -import type { ColumnConfig, Workflow } from "@/app/components/shared/types"; -import { BUILT_IN_WORKFLOWS } from "@/app/components/workflows/builtinWorkflows"; +import type { + ColumnConfig, + Workflow, +} from "@/app/components/shared/types"; import { formatIcon, formatLabel } from "@/app/components/tabular/columnFormat"; -import { ConfirmPopup } from "@/app/components/shared/ConfirmPopup"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { HeaderActionsMenu } from "@/app/components/shared/HeaderActionsMenu"; +import { PeopleModal } from "@/app/components/modals/PeopleModal"; +import { OpenSourceWorkflowModal } from "@/app/components/workflows/OpenSourceWorkflowModal"; import { PageHeader } from "@/app/components/shared/PageHeader"; -import { WorkflowDetailsModal } from "@/app/components/workflows/WorkflowDetailsModal"; +import { NewWorkflowModal } from "@/app/components/workflows/NewWorkflowModal"; import { useAuth } from "@/contexts/AuthContext"; import { useUserProfile } from "@/contexts/UserProfileContext"; // dynamic import keeps Tiptap (browser-only) out of the SSR bundle @@ -43,8 +56,11 @@ interface Props { type SaveStatus = "idle" | "saving" | "saved"; type DeleteStatus = "idle" | "loading" | "complete"; +type WorkflowShare = Awaited<ReturnType<typeof listWorkflowShares>>[number]; const NAME_COL_W = "w-[332px] shrink-0"; +const WORKFLOW_CONTRIBUTIONS_ENABLED = + process.env.NEXT_PUBLIC_WORKFLOW_CONTRIBUTIONS_ENABLED === "true"; // --------------------------------------------------------------------------- // Page @@ -54,20 +70,19 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { const { user } = useAuth(); const { profile } = useUserProfile(); const stickyCellBg = "bg-[#fafbfc]"; - const builtinWorkflow = - BUILT_IN_WORKFLOWS.find((w) => w.id === id && w.type === workflowType) ?? - null; - const isBuiltin = builtinWorkflow !== null; const [workflow, setWorkflow] = useState<Workflow | null>(null); const [loading, setLoading] = useState(true); const [notFound, setNotFound] = useState(false); const readOnly = - isBuiltin || (workflow?.is_system ?? false) || workflow?.allow_edit === false; const canShare = !readOnly && (workflow?.is_owner ?? true); + const canOpenSource = + WORKFLOW_CONTRIBUTIONS_ENABLED && + canShare && + workflow?.is_system !== true; // Editor state const [promptMd, setPromptMd] = useState(""); @@ -85,11 +100,14 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { const [editingColumn, setEditingColumn] = useState<ColumnConfig | null>(null); const [viewingColumn, setViewingColumn] = useState<ColumnConfig | null>(null); - // Share popover + // Share / use / details popovers const [shareOpen, setShareOpen] = useState(false); + const [workflowSharedWith, setWorkflowSharedWith] = useState<string[]>([]); const [detailsOpen, setDetailsOpen] = useState(false); + const [useOpen, setUseOpen] = useState(false); const [deleteOpen, setDeleteOpen] = useState(false); const [deleteStatus, setDeleteStatus] = useState<DeleteStatus>("idle"); + const [openSourceOpen, setOpenSourceOpen] = useState(false); // Column actions dropdown const [colActionsOpen, setColActionsOpen] = useState(false); @@ -109,19 +127,6 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { // Load workflow // --------------------------------------------------------------------------- useEffect(() => { - if (isBuiltin) { - const wf = builtinWorkflow; - if (!wf) { - setNotFound(true); - } else { - setWorkflow(wf); - setPromptMd(wf.prompt_md ?? ""); - setColumns(wf.columns_config ?? []); - } - setLoading(false); - return; - } - getWorkflow(id) .then((wf) => { if (wf.type !== workflowType) { @@ -138,7 +143,83 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { }) .catch(() => setNotFound(true)) .finally(() => setLoading(false)); - }, [id, isBuiltin, builtinWorkflow, workflowType]); + }, [id, workflowType]); + + const fetchWorkflowShares = useCallback(async () => { + const shares = await listWorkflowShares(id); + setWorkflowSharedWith( + shares.map((share) => share.shared_with_email.trim().toLowerCase()), + ); + return shares; + }, [id]); + + const fetchWorkflowPeople = useCallback(async (): Promise<ProjectPeople> => { + const shares = await fetchWorkflowShares(); + const members = await Promise.all( + shares.map(async (share) => { + const email = share.shared_with_email.trim().toLowerCase(); + const userResult = await lookupUserByEmail(email).catch( + () => null, + ); + return { + email, + display_name: + userResult?.exists === true + ? userResult.display_name + : null, + }; + }), + ); + return { + owner: { + user_id: user?.id ?? workflow?.user_id ?? "", + email: user?.email ?? null, + display_name: profile?.displayName ?? null, + }, + members, + }; + }, [ + fetchWorkflowShares, + profile?.displayName, + user?.email, + user?.id, + workflow?.user_id, + ]); + + async function handleWorkflowSharedWithChange(nextSharedWith: string[]) { + const nextEmails = [ + ...new Set( + nextSharedWith + .map((email) => email.trim().toLowerCase()) + .filter(Boolean), + ), + ]; + const currentShares = await listWorkflowShares(id); + const currentByEmail = new Map<string, WorkflowShare>(); + for (const share of currentShares) { + currentByEmail.set( + share.shared_with_email.trim().toLowerCase(), + share, + ); + } + + const added = nextEmails.filter((email) => !currentByEmail.has(email)); + const removed = currentShares.filter( + (share) => + !nextEmails.includes( + share.shared_with_email.trim().toLowerCase(), + ), + ); + + await Promise.all([ + ...removed.map((share) => deleteWorkflowShare(id, share.id)), + ...(added.length > 0 + ? [shareWorkflow(id, { emails: added, allow_edit: false })] + : []), + ]); + + await fetchWorkflowShares(); + } // --------------------------------------------------------------------------- // Debounced auto-save for prompt @@ -161,17 +242,6 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { [id, readOnly], ); - async function handleWorkflowDetailsSave(values: { title: string }) { - if (!workflow || readOnly || !values.title) return; - if (values.title === workflow.title) return; - const updated = await updateWorkflow(id, { title: values.title }); - setWorkflow({ - ...updated, - shared_by_name: - updated.shared_by_name ?? workflow.shared_by_name ?? null, - }); - } - async function handleDeleteWorkflow() { if (!workflow || readOnly || workflow.is_owner === false) return; setDeleteStatus("loading"); @@ -198,7 +268,13 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { setSaveStatus("saving"); try { const updated = await updateWorkflow(id, { columns_config: next }); - setWorkflow(updated); + setWorkflow((current) => ({ + ...updated, + open_source_submission: + updated.open_source_submission ?? + current?.open_source_submission ?? + null, + })); setSaveStatus("saved"); setTimeout(() => setSaveStatus("idle"), 2000); } catch { @@ -243,6 +319,7 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { ]} /> <div className="flex min-h-0 flex-1 flex-col"> + <WorkflowMetadataSkeleton /> {workflowType === "tabular" ? ( <TabularWorkflowEditorSkeleton /> ) : ( @@ -261,6 +338,11 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { ); } + const defaultContributorName = + profile?.displayName?.trim() || user?.email || "your account name"; + const openSourcePending = + workflow.open_source_submission?.status === "pending"; + return ( <div className="flex flex-col h-full"> {/* Page header */} @@ -281,6 +363,10 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { }, ]} actions={[ + { + label: "Use", + onClick: () => setUseOpen(true), + }, saveStatus !== "idle" ? { type: "custom", @@ -312,17 +398,24 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { title="Workflow actions" items={[ { - label: "Rename", + label: "Edit details", icon: Pencil, onSelect: () => setDetailsOpen(true), }, - { - label: "Workflow Details", - icon: Info, - onSelect: () => - setDetailsOpen(true), - }, + ...(canOpenSource + ? [ + { + label: + "Open source this", + icon: Globe, + onSelect: () => + setOpenSourceOpen( + true, + ), + }, + ] + : []), { label: "Delete", icon: Trash2, @@ -341,25 +434,50 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { : null, ]} /> - <WorkflowDetailsModal + <UseWorkflowModal + workflows={[]} + workflow={useOpen ? workflow : null} + onClose={() => setUseOpen(false)} + skipSelect + /> + <NewWorkflowModal open={detailsOpen} - workflow={workflow} - canEdit={!readOnly} - canShare={canShare} - currentUserDisplayName={profile?.displayName} - currentUserEmail={user?.email} + editWorkflow={workflow} onClose={() => setDetailsOpen(false)} - onSave={handleWorkflowDetailsSave} - onShareWorkflow={() => { + onCreated={() => undefined} + onUpdated={(updated) => { + setWorkflow((current) => + current + ? { + ...current, + ...updated, + shared_by_name: + updated.shared_by_name ?? + current.shared_by_name ?? + null, + open_source_submission: + updated.open_source_submission ?? + current.open_source_submission ?? + null, + } + : updated, + ); setDetailsOpen(false); - setShareOpen(true); }} /> {shareOpen && ( - <ShareWorkflowModal - workflowId={id} - workflowName={workflow.title} + <PeopleModal + open={shareOpen} onClose={() => setShareOpen(false)} + resource={{ id, shared_with: workflowSharedWith }} + fetchPeople={fetchWorkflowPeople} + currentUserEmail={user?.email ?? null} + breadcrumb={[ + "Workflows", + workflow.title, + "People", + ]} + onSharedWithChange={handleWorkflowSharedWithChange} /> )} <ConfirmPopup @@ -375,9 +493,29 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { setDeleteStatus("idle"); }} /> + <OpenSourceWorkflowModal + open={openSourceOpen} + onClose={() => setOpenSourceOpen(false)} + workflowId={id} + defaultContributorName={defaultContributorName} + pending={openSourcePending} + onSubmitted={(submission) => + setWorkflow((current) => + current + ? { + ...current, + open_source_submission: submission, + } + : current, + ) + } + /> {/* Body */} <div className="flex-1 min-h-0 flex flex-col"> + {/* Metadata */} + <WorkflowMetadata workflow={workflow} /> + {workflow.type === "assistant" ? ( /* ── Assistant: WYSIWYG editor ── */ <div className="flex-1 min-h-0 px-4 pb-2 pt-0 md:px-10 md:pb-3"> @@ -488,9 +626,9 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { <div key={col.index} onClick={() => readOnly ? setViewingColumn(col) : setEditingColumn(col)} - className="group flex items-center h-10 pr-3 md:pr-10 border-b border-gray-50 hover:bg-gray-100 cursor-pointer transition-colors" + className="group flex items-center h-10 pr-3 md:pr-10 border-b border-gray-50 hover:bg-gray-100/70 cursor-pointer transition-colors" > - <div className={`sticky left-0 z-[60] ${NAME_COL_W} py-2 pl-4 pr-2 ${isChecked ? "bg-gray-50" : stickyCellBg} transition-colors group-hover:bg-gray-100`}> + <div className={`sticky left-0 z-[60] ${NAME_COL_W} py-2 pl-4 pr-2 ${isChecked ? "bg-gray-50" : stickyCellBg} transition-colors group-hover:bg-gray-100/70`}> <div className="flex min-w-0 items-center gap-4"> <input type="checkbox" @@ -576,6 +714,77 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { ); } +function WorkflowMetadata({ workflow }: { workflow: Workflow }) { + const fields: { label: string; value: string }[] = [ + { label: "Type", value: workflow.type === "tabular" ? "Tabular" : "Assistant" }, + { label: "Source", value: getWorkflowSourceLabel(workflow) }, + ]; + if (workflow.language) fields.push({ label: "Language", value: workflow.language }); + if (workflow.version) fields.push({ label: "Version", value: workflow.version }); + if (workflow.practice) fields.push({ label: "Practice", value: workflow.practice }); + if (workflow.jurisdictions?.length) { + fields.push({ label: "Jurisdiction", value: workflow.jurisdictions.join(", ") }); + } + if (workflow.open_source_submission) { + const statusLabels: Record< + NonNullable<Workflow["open_source_submission"]>["status"], + string + > = { + pending: "Pending review", + approved: "Approved", + rejected: "Rejected", + }; + fields.push({ + label: "Open source", + value: statusLabels[workflow.open_source_submission.status], + }); + } + + return ( + <div className="flex flex-wrap gap-x-8 gap-y-3 px-4 py-3 text-xs shrink-0 md:px-10"> + {fields.map(({ label, value }) => ( + <div key={label} className="flex flex-col gap-0.5"> + <span className="text-gray-400">{label}</span> + <span className="text-gray-700">{value}</span> + </div> + ))} + </div> + ); +} + +function WorkflowMetadataSkeleton() { + const fields = [ + { labelWidth: "w-8", valueWidth: "w-16" }, + { labelWidth: "w-10", valueWidth: "w-14" }, + { labelWidth: "w-12", valueWidth: "w-20" }, + { labelWidth: "w-10", valueWidth: "w-12" }, + { labelWidth: "w-12", valueWidth: "w-24" }, + ]; + + return ( + <div className="flex shrink-0 flex-wrap gap-x-8 gap-y-3 px-4 py-3 md:px-10"> + {fields.map((field, index) => ( + <div key={index} className="flex flex-col gap-1"> + <div + className={`h-2.5 ${field.labelWidth} animate-pulse rounded bg-gray-100`} + /> + <div + className={`h-3 ${field.valueWidth} animate-pulse rounded bg-gray-100`} + /> + </div> + ))} + </div> + ); +} + +function getWorkflowSourceLabel(workflow: Workflow) { + if (workflow.is_system) return "System"; + if (workflow.is_owner === false) { + return workflow.shared_by_name?.trim() || "Shared"; + } + return "User"; +} + function AssistantWorkflowEditorSkeleton() { return ( <div className="min-h-0 flex-1 px-4 pb-2 pt-0 md:px-10 md:pb-3"> diff --git a/frontend/src/app/components/workflows/WorkflowDetailsModal.tsx b/frontend/src/app/components/workflows/WorkflowDetailsModal.tsx deleted file mode 100644 index 957afe3..0000000 --- a/frontend/src/app/components/workflows/WorkflowDetailsModal.tsx +++ /dev/null @@ -1,190 +0,0 @@ -"use client"; - -import { type ReactNode, useEffect, useMemo, useState } from "react"; -import { Users } from "lucide-react"; -import { Modal } from "@/app/components/shared/Modal"; -import type { Workflow } from "@/app/components/shared/types"; -import { listWorkflowShares } from "@/app/lib/mikeApi"; - -interface WorkflowDetailsModalProps { - open: boolean; - workflow: Workflow | null; - canEdit: boolean; - canShare: boolean; - currentUserDisplayName?: string | null; - currentUserEmail?: string | null; - onClose: () => void; - onSave: (values: { title: string }) => Promise<void>; - onShareWorkflow: () => void; -} - -export function WorkflowDetailsModal({ - open, - workflow, - canEdit, - canShare, - currentUserDisplayName, - currentUserEmail, - onClose, - onSave, - onShareWorkflow, -}: WorkflowDetailsModalProps) { - const [titleDraft, setTitleDraft] = useState(""); - const [shareCount, setShareCount] = useState<number | null>(null); - const [sharesLoading, setSharesLoading] = useState(false); - const [saving, setSaving] = useState(false); - const [saved, setSaved] = useState(false); - const [error, setError] = useState<string | null>(null); - - useEffect(() => { - if (!open || !workflow) return; - setTitleDraft(workflow.title); - setShareCount(null); - setSaved(false); - setError(null); - }, [open, workflow]); - - useEffect(() => { - if (!open || !workflow || !canShare) { - setSharesLoading(false); - return; - } - - let cancelled = false; - setSharesLoading(true); - listWorkflowShares(workflow.id) - .then((shares) => { - if (!cancelled) setShareCount(shares.length); - }) - .catch(() => { - if (!cancelled) setShareCount(null); - }) - .finally(() => { - if (!cancelled) setSharesLoading(false); - }); - - return () => { - cancelled = true; - }; - }, [canShare, open, workflow]); - - const trimmedTitle = titleDraft.trim(); - const hasChanges = useMemo(() => { - if (!workflow) return false; - return trimmedTitle !== workflow.title; - }, [trimmedTitle, workflow]); - - if (!workflow) return null; - - const typeLabel = workflow.type === "tabular" ? "Tabular" : "Assistant"; - const ownershipLabel = workflow.is_system - ? "Built-in" - : workflow.is_owner === false - ? "Shared with you" - : shareCount && shareCount > 0 - ? "Shared" - : "Private"; - const ownerLabel = - workflow.is_owner === false - ? workflow.shared_by_name?.trim() || "Unknown" - : currentUserDisplayName?.trim() || - currentUserEmail?.trim() || - "You"; - - async function handleSave() { - if (!canEdit || saving || !hasChanges || !trimmedTitle) return; - setSaving(true); - setSaved(false); - setError(null); - try { - await onSave({ title: trimmedTitle }); - setSaved(true); - } catch { - setError("Could not update workflow details."); - } finally { - setSaving(false); - } - } - - return ( - <Modal - open={open} - onClose={onClose} - breadcrumbs={["Workflows", workflow.title, "Details"]} - secondaryAction={ - canShare - ? { - label: "Share Workflow", - icon: <Users className="h-4 w-4" />, - onClick: onShareWorkflow, - } - : undefined - } - footerStatus={ - error ? ( - <span className="text-sm text-red-600">{error}</span> - ) : saved ? ( - <span className="text-sm text-gray-400">Updated</span> - ) : null - } - primaryAction={ - canEdit - ? { - label: saving ? "Updating..." : "Update", - onClick: () => void handleSave(), - disabled: saving || !hasChanges || !trimmedTitle, - } - : undefined - } - cancelAction={canEdit ? undefined : false} - > - <div className="flex flex-col gap-5 py-1"> - <div className="flex flex-col gap-3"> - <label - htmlFor="workflow-details-title" - className="text-xs font-medium text-gray-700" - > - Workflow Name - </label> - <input - id="workflow-details-title" - value={titleDraft} - onChange={(e) => { - setTitleDraft(e.target.value); - setSaved(false); - setError(null); - }} - disabled={!canEdit || saving} - className="h-9 w-full rounded-md border border-gray-200 bg-gray-50 px-3 text-sm text-gray-900 outline-none transition-colors focus:border-gray-300 disabled:cursor-not-allowed disabled:text-gray-400" - /> - </div> - - <div className="divide-y divide-gray-100 text-sm"> - <DetailRow label="Type" value={typeLabel} /> - <DetailRow - label="Ownership" - value={ - sharesLoading ? ( - <span className="inline-block h-4 w-14 rounded bg-gray-100 animate-pulse" /> - ) : ( - ownershipLabel - ) - } - /> - <DetailRow label="Owner" value={ownerLabel} /> - </div> - </div> - </Modal> - ); -} - -function DetailRow({ label, value }: { label: string; value: ReactNode }) { - return ( - <div className="flex items-center justify-between gap-4 py-3"> - <span className="text-gray-500">{label}</span> - <span className="min-w-0 truncate text-right text-gray-900"> - {value} - </span> - </div> - ); -} diff --git a/frontend/src/app/components/workflows/WorkflowList.tsx b/frontend/src/app/components/workflows/WorkflowList.tsx index 5d94c73..9ffddc6 100644 --- a/frontend/src/app/components/workflows/WorkflowList.tsx +++ b/frontend/src/app/components/workflows/WorkflowList.tsx @@ -17,13 +17,11 @@ import { unhideWorkflow, } from "@/app/lib/mikeApi"; import type { Workflow } from "../shared/types"; -import { BUILT_IN_WORKFLOWS, BUILT_IN_IDS } from "./builtinWorkflows"; -import { DisplayWorkflowModal } from "./DisplayWorkflowModal"; +import { UseWorkflowModal } from "./UseWorkflowModal"; import { NewWorkflowModal } from "./NewWorkflowModal"; import { TableToolbar } from "../shared/TableToolbar"; import { RowActionMenuItems, RowActions } from "../shared/RowActions"; import { MikeIcon } from "@/components/chat/mike-icon"; -import { useAuth } from "@/contexts/AuthContext"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { workflowDetailPath } from "./workflowRoutes"; import { @@ -47,24 +45,31 @@ import { TableStickyCell, } from "../shared/TablePrimitive"; -type WorkflowScope = "all" | "builtin" | "custom" | "hidden"; +type WorkflowScope = "all" | "system" | "user" | "shared"; const WORKFLOW_SCOPES: { id: WorkflowScope; label: string }[] = [ { id: "all", label: "All" }, - { id: "builtin", label: "Built-in" }, - { id: "custom", label: "Custom" }, - { id: "hidden", label: "Hidden" }, + { id: "user", label: "User" }, + { id: "shared", label: "Shared with me" }, + { id: "system", label: "System" }, ]; +const isDev = process.env.NODE_ENV !== "production"; +const devLog = (...args: Parameters<typeof console.log>) => { + if (isDev) console.log(...args); +}; + export function WorkflowList() { const router = useRouter(); - const { user } = useAuth(); - const [custom, setCustom] = useState<Workflow[]>([]); + const [workflows, setWorkflows] = useState<Workflow[]>([]); const [loading, setLoading] = useState(true); const [selected, setSelected] = useState<Workflow | null>(null); const [activeScope, setActiveScope] = useState<WorkflowScope>("all"); const [newModalOpen, setNewModalOpen] = useState(false); - const [hiddenBuiltinIds, setHiddenBuiltinIds] = useState<string[]>([]); + const [editingWorkflow, setEditingWorkflow] = useState<Workflow | null>( + null, + ); + const [hiddenSystemIds, setHiddenSystemIds] = useState<string[]>([]); const [selectedIds, setSelectedIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); const [practiceFilter, setPracticeFilter] = useState<string | null>(null); @@ -81,18 +86,37 @@ export function WorkflowList() { listHiddenWorkflows(), ]) .then(([assistant, tabular, hidden]) => { - setCustom([...assistant, ...tabular]); - setHiddenBuiltinIds(hidden); + devLog("[workflows/ui:list] loaded", { + assistantCount: assistant.length, + tabularCount: tabular.length, + hiddenCount: hidden.length, + assistantSample: assistant.slice(0, 5).map((workflow) => ({ + id: workflow.id, + title: workflow.title, + type: workflow.type, + user_id: workflow.user_id, + is_system: workflow.is_system, + is_owner: workflow.is_owner, + })), + tabularSample: tabular.slice(0, 5).map((workflow) => ({ + id: workflow.id, + title: workflow.title, + type: workflow.type, + user_id: workflow.user_id, + is_system: workflow.is_system, + is_owner: workflow.is_owner, + })), + }); + setWorkflows([...assistant, ...tabular]); + setHiddenSystemIds(hidden); + }) + .catch((error) => { + devLog("[workflows/ui:list] failed; showing no workflows", error); + setWorkflows([]); }) - .catch(() => setCustom([])) .finally(() => setLoading(false)); }, []); - useEffect(() => { - setSelectedIds([]); - setActionsOpen(false); - }, [activeScope, practiceFilter, typeFilter]); - useEffect(() => { function handleClick(e: MouseEvent) { if ( @@ -106,21 +130,30 @@ export function WorkflowList() { return () => document.removeEventListener("mousedown", handleClick); }, [actionsOpen]); - const hiddenBuiltins = BUILT_IN_WORKFLOWS.filter((wf) => - hiddenBuiltinIds.includes(wf.id), + const systemWorkflows = workflows.filter((wf) => wf.is_system); + const userWorkflows = workflows.filter( + (wf) => !wf.is_system && wf.is_owner !== false, ); - const visibleBuiltins = BUILT_IN_WORKFLOWS.filter( - (wf) => !hiddenBuiltinIds.includes(wf.id), + const sharedWorkflows = workflows.filter( + (wf) => !wf.is_system && wf.is_owner === false, ); - const all = [...visibleBuiltins, ...custom]; + const hiddenSystem = systemWorkflows.filter((wf) => + hiddenSystemIds.includes(wf.id), + ); + const visibleSystem = systemWorkflows.filter( + (wf) => !hiddenSystemIds.includes(wf.id), + ); + const systemRows = [...visibleSystem, ...hiddenSystem]; + const activeRows = [...visibleSystem, ...userWorkflows, ...sharedWorkflows]; + const allRows = [...systemRows, ...userWorkflows, ...sharedWorkflows]; const byScope = - activeScope === "builtin" - ? visibleBuiltins - : activeScope === "custom" - ? custom - : activeScope === "hidden" - ? hiddenBuiltins - : all; + activeScope === "all" + ? activeRows + : activeScope === "system" + ? systemRows + : activeScope === "user" + ? userWorkflows + : sharedWorkflows; const practices = Array.from( new Set( byScope.map((wf) => wf.practice).filter((p): p is string => !!p), @@ -149,17 +182,37 @@ export function WorkflowList() { ); } + function clearSelection() { + setSelectedIds([]); + setActionsOpen(false); + } + + function handleScopeChange(scope: WorkflowScope) { + setActiveScope(scope); + clearSelection(); + } + + function handleTypeFilterChange(value: Workflow["type"] | null) { + setTypeFilter(value); + clearSelection(); + } + + function handlePracticeFilterChange(value: string | null) { + setPracticeFilter(value); + clearSelection(); + } + async function handleHideWorkflow(id: string) { - setHiddenBuiltinIds((prev) => [...prev, id]); + setHiddenSystemIds((prev) => [...prev, id]); await hideWorkflow(id).catch(() => { - setHiddenBuiltinIds((prev) => prev.filter((x) => x !== id)); + setHiddenSystemIds((prev) => prev.filter((x) => x !== id)); }); } async function handleUnhideWorkflow(id: string) { - setHiddenBuiltinIds((prev) => prev.filter((x) => x !== id)); + setHiddenSystemIds((prev) => prev.filter((x) => x !== id)); await unhideWorkflow(id).catch(() => { - setHiddenBuiltinIds((prev) => [...prev, id]); + setHiddenSystemIds((prev) => [...prev, id]); }); } @@ -167,22 +220,26 @@ export function WorkflowList() { const ids = [...selectedIds]; setActionsOpen(false); setSelectedIds([]); - const builtinIds = ids.filter((id) => BUILT_IN_IDS.has(id)); - const customIds = ids.filter((id) => !BUILT_IN_IDS.has(id)); - if (builtinIds.length > 0) { - setHiddenBuiltinIds((prev) => [ + const systemIds = ids.filter( + (id) => workflows.find((workflow) => workflow.id === id)?.is_system, + ); + const customIds = ids.filter((id) => !systemIds.includes(id)); + if (systemIds.length > 0) { + setHiddenSystemIds((prev) => [ ...prev, - ...builtinIds.filter((id) => !prev.includes(id)), + ...systemIds.filter((id) => !prev.includes(id)), ]); await Promise.all( - builtinIds.map((id) => hideWorkflow(id).catch(() => {})), + systemIds.map((id) => hideWorkflow(id).catch(() => {})), ); } if (customIds.length > 0) { await Promise.all( customIds.map((id) => deleteWorkflow(id).catch(() => {})), ); - setCustom((prev) => prev.filter((w) => !customIds.includes(w.id))); + setWorkflows((prev) => + prev.filter((w) => !customIds.includes(w.id)), + ); } } @@ -190,7 +247,7 @@ export function WorkflowList() { const ids = [...selectedIds]; setActionsOpen(false); setSelectedIds([]); - setHiddenBuiltinIds((prev) => prev.filter((id) => !ids.includes(id))); + setHiddenSystemIds((prev) => prev.filter((id) => !ids.includes(id))); await Promise.all(ids.map((id) => unhideWorkflow(id).catch(() => {}))); } @@ -218,7 +275,7 @@ export function WorkflowList() { className, }; })} - onChange={setTypeFilter} + onChange={handleTypeFilterChange} /> ); @@ -231,10 +288,22 @@ export function WorkflowList() { value: practice, label: practice, }))} - onChange={setPracticeFilter} + onChange={handlePracticeFilterChange} /> ); + const selectedHiddenSystemIds = selectedIds.filter((id) => + hiddenSystemIds.includes(id), + ); + const selectedSystemIds = selectedIds.filter( + (id) => workflows.find((workflow) => workflow.id === id)?.is_system, + ); + const selectedOnlySystem = + selectedIds.length > 0 && selectedIds.length === selectedSystemIds.length; + const selectedOnlyHiddenSystem = + selectedIds.length > 0 && + selectedIds.length === selectedHiddenSystemIds.length; + const toolbarActions = selectedIds.length > 0 ? ( <div ref={actionsRef} className="relative"> @@ -247,19 +316,19 @@ export function WorkflowList() { </button> {actionsOpen && ( <div className={`absolute top-full right-0 mt-1 z-[100] w-36 overflow-hidden ${GLASS_DROPDOWN}`}> - {activeScope === "hidden" ? ( + {selectedOnlyHiddenSystem ? ( <button onClick={handleBulkUnhide} className={`w-full px-3 py-1.5 text-left text-xs text-gray-700 ${GLASS_MENU_ITEM}`} > - Unhide + Activate </button> ) : ( <button onClick={handleBulkRemove} className="w-full px-3 py-1.5 text-left text-xs text-red-600 transition-colors hover:bg-red-500/10" > - Delete + {selectedOnlySystem ? "Deactivate" : "Delete"} </button> )} </div> @@ -295,14 +364,14 @@ export function WorkflowList() { <TableToolbar items={WORKFLOW_SCOPES} active={activeScope} - onChange={setActiveScope} + onChange={handleScopeChange} actions={toolbarActions} /> {/* Table */} - <TableScrollArea> - {/* Column headers */} - <TableHeaderRow> + <TableScrollArea + header={ + <TableHeaderRow> <TableStickyCell header> {loading ? ( <SkeletonDot /> @@ -331,11 +400,13 @@ export function WorkflowList() { {practiceFilterButton} </div> </TableHeaderCell> - <TableHeaderCell className="w-28">Source</TableHeaderCell> + <TableHeaderCell className="w-44">Source</TableHeaderCell> <TableHeaderCell className="w-8" /> - </TableHeaderRow> + </TableHeaderRow> + } + > - {loading && activeScope !== "builtin" ? ( + {loading ? ( <TableBody> {[1, 2, 3].map((i) => ( <TableRow @@ -356,7 +427,7 @@ export function WorkflowList() { <TableCell className="w-40"> <SkeletonLine className="w-24" /> </TableCell> - <TableCell className="w-28"> + <TableCell className="w-44"> <SkeletonLine className="w-14" /> </TableCell> <TableCell className="w-8" /> @@ -365,11 +436,11 @@ export function WorkflowList() { </TableBody> ) : filtered.length === 0 ? ( <TableEmptyState> - {activeScope === "custom" ? ( + {activeScope === "user" ? ( <> <Library className="h-8 w-8 text-gray-300 mb-4" /> <p className="text-2xl font-medium font-serif text-gray-900"> - Custom Workflows + User Workflows </p> <p className="mt-1 text-xs text-gray-400 text-left"> Build reusable prompts and tabular @@ -383,16 +454,15 @@ export function WorkflowList() { + Create New </button> </> - ) : activeScope === "hidden" ? ( + ) : activeScope === "shared" ? ( <> <Library className="h-8 w-8 text-gray-300 mb-4" /> <p className="text-2xl font-medium font-serif text-gray-900"> - Hidden Workflows + Shared Workflows </p> <p className="mt-1 text-xs text-gray-400 text-left"> - Built-in workflows you've hidden will - appear here. You can unhide them at any - time. + Workflows shared with you by other users + will appear here. </p> </> ) : ( @@ -411,15 +481,17 @@ export function WorkflowList() { ) : ( <TableBody> {filtered.map((wf) => { + const isHiddenSystem = hiddenSystemIds.includes(wf.id); const rowBg = selectedIds.includes(wf.id) ? "bg-gray-50" : TABLE_STICKY_CELL_BG; return ( <TableRow key={wf.id} + className={isHiddenSystem ? "opacity-45" : undefined} rightClickDropdown={ wf.is_system - ? activeScope === "hidden" + ? isHiddenSystem ? (close) => ( <RowActionMenuItems onClose={close} @@ -445,11 +517,14 @@ export function WorkflowList() { : (close) => ( <RowActionMenuItems onClose={close} + onEditDetails={() => + setEditingWorkflow(wf) + } onDelete={async () => { await deleteWorkflow( wf.id, ); - setCustom((prev) => + setWorkflows((prev) => prev.filter( (w) => w.id !== @@ -493,22 +568,22 @@ export function WorkflowList() { </span> )} </TableCell> - <TableCell className="w-28"> + <TableCell className="w-44"> {wf.is_system ? ( <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600"> <MikeIcon size={14} /> - Mike + System </span> - ) : wf.user_id === user?.id ? ( + ) : wf.is_owner !== false ? ( <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600"> <User className="h-3.5 w-3.5 text-gray-500" /> - Myself + User </span> ) : ( <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 truncate max-w-full"> <User className="h-3.5 w-3.5 text-gray-400 shrink-0" /> <span className="truncate"> - {wf.shared_by_name ?? "Shared"} + {getSharedByLabel(wf)} </span> </span> )} @@ -518,7 +593,7 @@ export function WorkflowList() { onClick={(e) => e.stopPropagation()} > {wf.is_system ? ( - activeScope === "hidden" ? ( + isHiddenSystem ? ( <RowActions onUnhide={() => handleUnhideWorkflow(wf.id) @@ -533,9 +608,12 @@ export function WorkflowList() { ) ) : wf.is_owner === false ? null : ( <RowActions + onEditDetails={() => + setEditingWorkflow(wf) + } onDelete={async () => { await deleteWorkflow(wf.id); - setCustom((prev) => + setWorkflows((prev) => prev.filter( (w) => w.id !== wf.id, ), @@ -551,8 +629,8 @@ export function WorkflowList() { )} </TableScrollArea> - <DisplayWorkflowModal - workflows={all} + <UseWorkflowModal + workflows={allRows} workflow={selected} onClose={() => setSelected(null)} /> @@ -561,11 +639,32 @@ export function WorkflowList() { open={newModalOpen} onClose={() => setNewModalOpen(false)} onCreated={(wf) => { - setCustom((prev) => [wf, ...prev]); + setWorkflows((prev) => [wf, ...prev]); setNewModalOpen(false); router.push(workflowDetailPath(wf)); }} /> + + <NewWorkflowModal + open={!!editingWorkflow} + onClose={() => setEditingWorkflow(null)} + onCreated={() => undefined} + editWorkflow={editingWorkflow ?? undefined} + onUpdated={(updated) => { + setWorkflows((prev) => + prev.map((workflow) => + workflow.id === updated.id + ? { ...workflow, ...updated } + : workflow, + ), + ); + setEditingWorkflow(null); + }} + /> </div> ); } + +function getSharedByLabel(workflow: Workflow) { + return workflow.shared_by_name?.trim() || "Shared"; +} diff --git a/frontend/src/app/components/workflows/WorkflowPickerContent.tsx b/frontend/src/app/components/workflows/WorkflowPickerContent.tsx index 3d01211..4cb08b6 100644 --- a/frontend/src/app/components/workflows/WorkflowPickerContent.tsx +++ b/frontend/src/app/components/workflows/WorkflowPickerContent.tsx @@ -1,13 +1,8 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { - ChevronDown, - MessageSquare, - Search, - Table2, - X, -} from "lucide-react"; +import { ChevronDown, MessageSquare, Table2, X } from "lucide-react"; +import { SearchBar } from "@/components/ui/search-bar"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import type { ColumnConfig, Workflow } from "../shared/types"; @@ -47,9 +42,23 @@ export function WorkflowPickerContent({ allowClearPreview = true, }: WorkflowPickerContentProps) { const selectedRowRef = useRef<HTMLButtonElement>(null); - const [mobilePane, setMobilePane] = useState<MobilePickerPane>( - selected ? "details" : "list", - ); + const selectedId = selected?.id ?? null; + const [mobilePaneState, setMobilePaneState] = useState<{ + selectedId: string | null; + pane: MobilePickerPane; + }>({ + selectedId, + pane: selected ? "details" : "list", + }); + const mobilePane = + mobilePaneState.selectedId === selectedId + ? mobilePaneState.pane + : selected + ? "details" + : "list"; + const setMobilePane = (pane: MobilePickerPane) => { + setMobilePaneState({ selectedId, pane }); + }; useEffect(() => { if (selectedRowRef.current) { @@ -57,17 +66,13 @@ export function WorkflowPickerContent({ } }, [selected?.id]); - useEffect(() => { - setMobilePane(selected ? "details" : "list"); - }, [selected?.id]); - const normalizedSearch = search.trim().toLowerCase(); const filteredWorkflows = normalizedSearch ? workflows.filter((workflow) => [ workflow.title, workflow.practice ?? "", - workflow.is_system ? "Built-in" : "Custom", + workflow.is_system ? "System" : "Custom", ] .join(" ") .toLowerCase() @@ -91,44 +96,26 @@ export function WorkflowPickerContent({ }; return ( - <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden md:flex-row"> + <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3 overflow-visible md:flex-row"> <div - className={`min-h-0 flex-1 flex-col overflow-hidden ${ - selected ? "md:w-80 md:flex-none md:shrink-0" : "" + className={`min-h-0 min-w-0 flex-1 flex-col overflow-visible ${ + selected ? "md:w-64 md:flex-none md:shrink-0" : "" } ${mobilePane === "details" && selected ? "hidden md:flex" : "flex"}`} > - <div className="shrink-0 pb-2 pt-3"> - <div className="flex h-9 items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3"> - <Search className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - <input - type="text" - placeholder="Search workflows..." - value={search} - onChange={(event) => - onSearchChange(event.target.value) - } - className="flex-1 bg-transparent text-sm text-gray-700 outline-none placeholder:text-gray-400" - /> - {search && ( - <button - type="button" - onClick={() => onSearchChange("")} - className="text-gray-400 hover:text-gray-600" - > - <X className="h-3.5 w-3.5" /> - </button> - )} - </div> - </div> + <SearchBar + value={search} + onValueChange={onSearchChange} + placeholder="Search workflows..." + /> - <div className="min-h-0 flex-1 overflow-y-auto rounded-md border border-gray-200 bg-white"> + <div className="min-h-0 min-w-0 flex-1 rounded-sm pt-2"> {loading ? ( - <div> + <div className="space-y-px"> {[60, 45, 75, 50, 65, 40, 55].map( (width, index) => ( <div key={index} - className="flex items-center justify-between gap-3 px-3 py-2.5" + className="flex items-center justify-between gap-3 rounded-md px-3 py-2.5" > <div className="h-3 animate-pulse rounded bg-gray-100" @@ -144,7 +131,7 @@ export function WorkflowPickerContent({ {resolvedEmptyMessage} </p> ) : ( - <div> + <div className="space-y-px"> {filteredWorkflows.map((workflow) => { const disabled = disabledWorkflow?.(workflow) ?? false; @@ -164,14 +151,14 @@ export function WorkflowPickerContent({ isSelected ? null : workflow, ) } - className={`flex w-full items-center gap-3 px-3 py-2 text-left text-xs transition-colors ${ + className={`flex min-w-0 w-full items-center gap-3 rounded-md px-3 py-2 text-left text-xs transition-all ${ isSelected - ? "bg-gray-50 text-gray-900" - : "hover:bg-gray-50" + ? "bg-gray-100 text-gray-900" + : "hover:bg-gray-100/70" } ${disabled ? "cursor-not-allowed opacity-45" : ""}`} > <span - className={`flex-1 truncate ${ + className={`min-w-0 flex-1 truncate ${ isSelected ? "font-medium text-gray-900" : "text-gray-700" @@ -184,7 +171,7 @@ export function WorkflowPickerContent({ ) : ( <span className="shrink-0 text-xs text-gray-400"> {workflow.is_system - ? "Built-in" + ? "System" : "Custom"} </span> )} @@ -232,32 +219,36 @@ function WorkflowPreview({ : mode; return ( <div - className={`${className} min-h-0 flex-1 flex-col overflow-hidden pt-3`} + className={`${className} min-h-0 min-w-0 flex-1 flex-col overflow-visible`} > - <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-gray-200 bg-white"> - <div className="flex h-10 shrink-0 items-center justify-between border-b border-gray-200 bg-white px-3"> - <p className="truncate text-sm font-medium text-gray-700"> + <div className="flex min-h-0 min-w-0 flex-1 flex-col rounded-2xl border border-white/70 bg-white/55 shadow-[0_3px_9px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl"> + <div className="flex h-9 shrink-0 items-center justify-between px-3"> + <p className="min-w-0 flex-1 truncate text-xs font-medium text-gray-700"> {workflow.title} </p> {allowClear ? ( <button type="button" onClick={onClear} - className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600" + className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100/70 hover:text-gray-600" > <X className="h-3.5 w-3.5" /> </button> ) : null} </div> - {resolvedMode === "columns" ? ( - <WorkflowColumnPreview - columns={workflow.columns_config ?? []} - /> - ) : ( - <WorkflowPromptPreview - content={workflow.prompt_md ?? "_No prompt defined._"} - /> - )} + <div className="flex min-h-0 min-w-0 flex-1 flex-col"> + {resolvedMode === "columns" ? ( + <WorkflowColumnPreview + columns={workflow.columns_config ?? []} + /> + ) : ( + <WorkflowPromptPreview + content={ + workflow.prompt_md ?? "_No prompt defined._" + } + /> + )} + </div> </div> </div> ); @@ -267,7 +258,7 @@ function WorkflowPromptPreview({ content }: { content: string }) { const previewContent = stripLeadingMarkdownHeading(content); return ( - <div className="flex-1 overflow-y-auto bg-gray-50 px-4 py-3 font-serif text-sm leading-relaxed text-gray-600"> + <div className="min-w-0 flex-1 break-words rounded-md px-3 py-3 font-serif text-sm leading-relaxed text-gray-600"> <WorkflowPromptMarkdown content={previewContent} /> </div> ); @@ -312,6 +303,34 @@ function WorkflowPromptMarkdown({ content }: { content: string }) { </ol> ), li: ({ children }) => <li>{children}</li>, + table: ({ children }) => ( + <div className="my-3 overflow-x-auto rounded-md border border-gray-200 first:mt-0 last:mb-0"> + <table className="min-w-full border-collapse text-left text-xs"> + {children} + </table> + </div> + ), + thead: ({ children }) => ( + <thead className="bg-gray-50">{children}</thead> + ), + tbody: ({ children }) => ( + <tbody className="divide-y divide-gray-100"> + {children} + </tbody> + ), + tr: ({ children }) => ( + <tr className="divide-x divide-gray-100">{children}</tr> + ), + th: ({ children }) => ( + <th className="px-3 py-2 font-medium text-gray-700"> + {children} + </th> + ), + td: ({ children }) => ( + <td className="px-3 py-2 align-top text-gray-600"> + {children} + </td> + ), strong: ({ children }) => ( <strong className="font-semibold text-gray-800"> {children} @@ -329,7 +348,7 @@ function WorkflowColumnPreview({ columns }: { columns: ColumnConfig[] }) { const [expandedIndex, setExpandedIndex] = useState<number | null>(null); const sortedColumns = [...columns].sort((a, b) => a.index - b.index); return ( - <div className="flex-1 overflow-y-auto bg-gray-50"> + <div className="min-w-0 flex-1 space-y-px rounded-sm"> {sortedColumns.length === 0 ? ( <p className="px-4 py-6 text-center text-xs text-gray-400"> No columns defined @@ -339,10 +358,7 @@ function WorkflowColumnPreview({ columns }: { columns: ColumnConfig[] }) { const isExpanded = expandedIndex === column.index; const FormatIcon = formatIcon(column.format ?? "text"); return ( - <div - key={column.index} - className="border-b border-gray-200 last:border-b-0" - > + <div key={column.index} className="rounded-md"> <button type="button" onClick={() => @@ -350,13 +366,17 @@ function WorkflowColumnPreview({ columns }: { columns: ColumnConfig[] }) { isExpanded ? null : column.index, ) } - className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-xs transition-colors hover:bg-white" + className={`flex min-w-0 w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left text-xs transition-all ${ + isExpanded + ? "bg-gray-100" + : "hover:bg-gray-100/70" + }`} > <FormatIcon className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - <span className="flex-1 truncate text-gray-800"> + <span className="min-w-0 flex-1 truncate text-gray-800"> {column.name} </span> - <span className="shrink-0 text-gray-400"> + <span className="max-w-24 shrink-0 truncate text-gray-400"> {formatLabel(column.format ?? "text")} </span> <ChevronDown @@ -364,21 +384,23 @@ function WorkflowColumnPreview({ columns }: { columns: ColumnConfig[] }) { /> </button> {isExpanded ? ( - <div className="space-y-3 border-t border-gray-200 bg-white px-4 py-3 font-serif text-sm leading-relaxed text-gray-600"> + <div className="mt-1 min-w-0 space-y-3 break-words rounded-md bg-white/60 px-4 py-3 font-serif text-sm leading-relaxed text-gray-600"> {column.tags && column.tags.length > 0 ? ( <div> <p className="mb-1.5 font-sans text-[11px] font-medium text-gray-600"> Tags </p> <div className="flex flex-wrap gap-1.5"> - {column.tags.map((tag, tagIdx) => ( - <span - key={tag} - className={`inline-block rounded-full px-1.5 py-0.5 font-sans text-[10px] ${TAG_COLORS[tagIdx % TAG_COLORS.length]}`} - > - {tag} - </span> - ))} + {column.tags.map( + (tag, tagIdx) => ( + <span + key={tag} + className={`inline-block rounded-full px-1.5 py-0.5 font-sans text-[10px] ${TAG_COLORS[tagIdx % TAG_COLORS.length]}`} + > + {tag} + </span> + ), + )} </div> </div> ) : null} diff --git a/frontend/src/app/components/workflows/WorkflowPickerModal.tsx b/frontend/src/app/components/workflows/WorkflowPickerModal.tsx index 327dd42..8bf698a 100644 --- a/frontend/src/app/components/workflows/WorkflowPickerModal.tsx +++ b/frontend/src/app/components/workflows/WorkflowPickerModal.tsx @@ -2,11 +2,15 @@ import { useEffect, useState, type ReactNode } from "react"; import { listWorkflows } from "@/app/lib/mikeApi"; -import { Modal } from "../shared/Modal"; +import { Modal } from "../modals/Modal"; import type { Workflow } from "../shared/types"; -import { BUILT_IN_WORKFLOWS } from "./builtinWorkflows"; import { WorkflowPickerContent } from "./WorkflowPickerContent"; +const isDev = process.env.NODE_ENV !== "production"; +const devLog = (...args: Parameters<typeof console.log>) => { + if (isDev) console.log(...args); +}; + interface WorkflowPickerModalProps { open: boolean; onClose: () => void; @@ -42,44 +46,49 @@ export function WorkflowPickerModal({ useEffect(() => { if (!open) return; let cancelled = false; - const builtins = BUILT_IN_WORKFLOWS.filter( - (workflow) => workflow.type === workflowType, - ); const frame = requestAnimationFrame(() => { if (cancelled) return; - setWorkflows(builtins); + setWorkflows([]); setLoading(true); - setSelected( - initialWorkflowId - ? builtins.find((workflow) => workflow.id === initialWorkflowId) ?? - null - : null, - ); + setSelected(null); setSearch(""); }); listWorkflows(workflowType) - .then((custom) => { + .then((workflows) => { if (cancelled) return; - const all = [...builtins, ...custom]; - setWorkflows(all); + devLog("[workflows/ui:picker] loaded", { + workflowType, + workflowCount: workflows.length, + systemCount: workflows.filter((workflow) => workflow.is_system) + .length, + sample: workflows.slice(0, 5).map((workflow) => ({ + id: workflow.id, + title: workflow.title, + type: workflow.type, + user_id: workflow.user_id, + is_system: workflow.is_system, + is_owner: workflow.is_owner, + })), + }); + setWorkflows(workflows); if (initialWorkflowId) { setSelected( - all.find((workflow) => workflow.id === initialWorkflowId) ?? - null, - ); - } - }) - .catch(() => { - if (cancelled) return; - if (initialWorkflowId) { - setSelected( - builtins.find( + workflows.find( (workflow) => workflow.id === initialWorkflowId, ) ?? null, ); } }) + .catch((error) => { + if (cancelled) return; + devLog("[workflows/ui:picker] failed", { + workflowType, + error, + }); + setWorkflows([]); + setSelected(null); + }) .finally(() => { if (!cancelled) setLoading(false); }); diff --git a/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx b/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx index 4ea6f09..55e0a9a 100644 --- a/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx +++ b/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx @@ -2,6 +2,7 @@ import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; +import { TableKit } from "@tiptap/extension-table"; import { Markdown } from "tiptap-markdown"; import { useEffect, useRef } from "react"; import { @@ -66,6 +67,11 @@ export function WorkflowPromptEditor({ blockquote: false, horizontalRule: false, }), + TableKit.configure({ + table: { + renderWrapper: true, + }, + }), Markdown.configure({ html: false, transformPastedText: true, diff --git a/frontend/src/app/components/workflows/builtinWorkflows.ts b/frontend/src/app/components/workflows/builtinWorkflows.ts deleted file mode 100644 index 9abe217..0000000 --- a/frontend/src/app/components/workflows/builtinWorkflows.ts +++ /dev/null @@ -1,1246 +0,0 @@ -import type { Workflow } from "../shared/types"; - -export const BUILT_IN_WORKFLOWS: Workflow[] = [ - { - id: "builtin-cp-checklist", - user_id: null, - is_system: true, - created_at: "", - title: "Generate CP Checklist", - type: "assistant", - practice: "General Transactions", - prompt_md: - "## Generate Conditions Precedent Checklist\n\n" + - "Review the uploaded credit agreement or financing document and generate a comprehensive " + - "Conditions Precedent (CP) checklist.\n\n" + - "You MUST use the generate_docx tool to produce the checklist as a downloadable Word document. " + - "You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. " + - "Do not display the checklist inline — generate the .docx file and provide the download link.\n\n" + - "Structure the document as follows:\n" + - "- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n" + - "- Under each category heading, include a table with exactly these four columns in this order:\n" + - " 1. Index — sequential number within the category (1, 2, 3…)\n" + - " 2. Clause Number — the clause or schedule reference from the agreement\n" + - " 3. Clause — a concise description of the condition precedent\n" + - " 4. Status — leave blank (empty string) for the user to fill in\n\n" + - "Use the table field in the section object (not content) for each category's rows.", - columns_config: null, - }, - { - id: "builtin-coc-dd", - user_id: null, - is_system: true, - created_at: "", - title: "Change of Control Review", - type: "tabular", - practice: "Corporate", - prompt_md: - "## Change of Control Due Diligence Review\n\n" + - "This workflow performs a change of control due diligence review across the selected documents.", - columns_config: [ - { - index: 0, - name: "Parties", - format: "bulleted_list", - prompt: "Identify all parties to this agreement. For each party state their full legal name and their role (e.g. counterparty, licensor, lender, supplier).", - }, - { - index: 1, - name: "Date", - format: "date", - prompt: "What is the date of this agreement? If a commencement date differs from the signing date, state both.", - }, - { - index: 2, - name: "Term", - format: "text", - prompt: "What is the term or duration of this agreement? State the start and end dates or the length of the term.", - }, - { - index: 3, - name: "Change of Control Clause", - prompt: "Identify and summarize the change of control clause(s) in this document. Quote the exact triggering language and specify what constitutes a 'change of control'.", - }, - { - index: 4, - name: "Consent Required", - prompt: "Does a change of control require prior consent from any party? Identify who must consent, the notice period, and any conditions.", - }, - { - index: 5, - name: "Termination Rights", - prompt: "What termination rights arise upon a change of control? Who can terminate, and what are the notice requirements?", - }, - { - index: 6, - name: "Put/Call Options", - prompt: "Are there any put or call options triggered by a change of control? Summarize the terms, pricing, and exercise period.", - }, - { - index: 7, - name: "Financial Implications", - prompt: "What are the financial implications of a change of control? Include any fees, payments, accelerated obligations, or pricing adjustments.", - }, - ], - }, - { - id: "builtin-credit-summary", - user_id: null, - is_system: true, - created_at: "", - title: "Credit Agreement Summary", - type: "assistant", - practice: "Finance", - prompt_md: - "## Credit Agreement Summary\n\n" + - "Review the uploaded credit agreement and produce a comprehensive legal summary covering the following topics. " + - "For each section, identify the key provisions, quote the relevant clause or schedule references, and flag any unusual, onerous, or non-market terms.\n\n" + - "1. **Lenders** — All lenders or members of the lender syndicate, including their full legal name and role (e.g. mandated lead arranger, original lender, agent bank)\n" + - "2. **Borrowers** — All borrowers, including their full legal name and jurisdiction of incorporation\n" + - "3. **Guarantors** — All guarantors, including their full legal name and the scope of their guarantee obligation\n" + - "4. **Other Parties** — Any other material parties (e.g. facility agent, security agent, hedge counterparties, issuing bank) and their roles\n" + - "5. **Date of Agreement** — Date of the credit agreement\n" + - "6. **Facilities** — Each facility available (e.g. Revolving Credit Facility, Term Loan A, Term Loan B, Term Loan C), the facility type, tranche name, and any key structural features\n" + - "7. **Amount** — Total committed amount across all facilities, the currency, and breakdown by tranche if applicable\n" + - "8. **Purpose** — Stated purpose for which borrowings may be used and any restrictions on use of proceeds\n" + - "9. **Interest** — Applicable reference rate (e.g. SOFR, EURIBOR, base rate), the margin, any margin ratchet mechanism, and how interest periods are structured\n" + - "10. **Commitment Fee** — Commitment or utilisation fees, the applicable rate, how they are calculated, and the basis (e.g. undrawn commitment, average utilisation)\n" + - "11. **Repayment Schedule** — Repayment profile for each facility, whether by scheduled instalments or bullet repayment, and the repayment dates and amounts\n" + - "12. **Maturity** — Final maturity date for each facility\n" + - "13. **Security** — Each class of security granted or required (e.g. share pledges, fixed and floating charges, real estate mortgages, account pledges) and the assets or entities over which security is taken\n" + - "14. **Guarantees** — Guarantee obligations, the guarantors, the scope of the guarantee, and any limitations (e.g. up-stream guarantee limitations, guarantor coverage test)\n" + - "15. **Financial Covenants** — Each financial covenant, the metric (e.g. leverage ratio, interest cover, cashflow cover), the applicable test, testing frequency, and any equity cure rights\n" + - "16. **Events of Default** — Each event of default, noting any grace periods, materiality thresholds, or cross-default provisions\n" + - "17. **Assignment** — Restrictions or permissions on assignment or transfer (e.g. white/blacklists, borrower consent for lender transfers; restrictions on borrower assignment)\n" + - "18. **Change of Control** — What constitutes a change of control, what obligations it triggers (e.g. mandatory prepayment, cancellation, lender consent), and any cure period\n" + - "19. **Prepayment Fee** — Any prepayment fees, make-whole premiums, or soft-call protections, the applicable fee, the period during which it applies, and any exceptions (e.g. prepayment from insurance proceeds or asset disposals)\n" + - "20. **Governing Law** — Governing law of the agreement\n" + - "21. **Dispute Resolution** — Whether disputes go to litigation or arbitration, the chosen forum or seat, and any submission to jurisdiction provisions\n\n" + - "Deliver the summary inline in your chat response — do NOT call generate_docx. Only produce a downloadable Word document if the user explicitly asks for one.", - columns_config: null, - }, - - // ─── Commercial Agreement ─────────────────────────────────────────────────── - { - id: "builtin-commercial-agreement", - user_id: null, - is_system: true, - created_at: "", - title: "Commercial Agreement Review", - type: "tabular", - practice: "General Transactions", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Parties", - format: "bulleted_list", - prompt: "Identify all parties to this agreement. For each party state their full legal name, jurisdiction of incorporation (if stated), and their role in the agreement (e.g. supplier, customer, licensor).", - }, - { - index: 1, - name: "Scope of Work", - format: "text", - prompt: "Summarise the scope of work or services to be provided under this agreement. What are the key deliverables, obligations, or services? Identify any limitations or exclusions to the scope.", - }, - { - index: 2, - name: "Amends Earlier Agreement", - format: "yes_no", - prompt: "Does this agreement amend, restate, supplement, or replace an earlier agreement? If yes, identify the earlier agreement by name and date.", - }, - { - index: 3, - name: "Effective Date", - format: "date", - prompt: "What is the effective date or commencement date of this agreement? If no explicit date is stated, note when it is deemed to take effect.", - }, - { - index: 4, - name: "Term", - format: "text", - prompt: "What is the duration or term of this agreement? State the initial term length and any conditions that affect the duration.", - }, - { - index: 5, - name: "Renewal", - format: "text", - prompt: "What renewal provisions apply? Specify whether renewal is automatic or requires notice, the renewal period, and any conditions or notice periods required to prevent automatic renewal.", - }, - { - index: 6, - name: "Pricing", - format: "text", - prompt: "What is the pricing structure under this agreement? Identify all fees, rates, charges, and payment terms including currency, payment schedule, and invoicing requirements.", - }, - { - index: 7, - name: "Price Adjustments", - format: "text", - prompt: "Are there any price adjustment mechanisms in this agreement? Identify any indexation, CPI/RPI linkage, benchmarking, volume-based adjustments, or other mechanisms that allow prices to change over the term.", - }, - { - index: 8, - name: "Penalties for Late Payment", - format: "text", - prompt: "What penalties or consequences apply for late payment? Include any interest rates on overdue amounts, suspension rights, or other remedies available to the payee.", - }, - { - index: 9, - name: "Estimated Contract Value", - format: "monetary_amount", - prompt: "What is the total estimated or stated contract value? If no single figure is given, calculate or estimate based on stated rates and term. State the currency and any assumptions made.", - }, - { - index: 10, - name: "Limitation of Liability", - format: "text", - prompt: "What limitations of liability apply? Identify any caps on liability (including how they are calculated), exclusions of consequential or indirect loss, and any carve-outs from the cap (e.g. fraud, death, IP infringement).", - }, - { - index: 11, - name: "IP Ownership and Licensing", - format: "text", - prompt: "How is intellectual property ownership and licensing addressed? Identify who owns pre-existing IP, who owns newly created IP, and what licences are granted to each party. Note any restrictions on use.", - }, - { - index: 12, - name: "Change of Control", - format: "text", - prompt: "Is there a change of control provision? If so, describe what constitutes a change of control, whether consent is required, and what rights (e.g. termination, assignment) are triggered.", - }, - { - index: 13, - name: "Force Majeure", - format: "text", - prompt: "Summarise the force majeure clause. What events qualify, what obligations are suspended, how long must the event persist before termination is permitted, and what notice is required?", - }, - { - index: 14, - name: "Termination Rights", - format: "text", - prompt: "What are the termination rights of each party? Identify termination for convenience (including notice period), termination for cause (including cure periods), and the consequences of termination (e.g. payment obligations, survival of terms).", - }, - { - index: 15, - name: "Liquidated Damages", - format: "text", - prompt: "Are there any liquidated damages provisions? If so, identify what triggers them, the applicable rate or formula, any cap on aggregate liquidated damages, and whether they are the exclusive remedy.", - }, - { - index: 16, - name: "Governing Law", - format: "text", - prompt: "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced.", - }, - { - index: 17, - name: "Dispute Resolution", - format: "text", - prompt: "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, any escalation or mediation steps required before formal proceedings, and the language of proceedings.", - }, - ], - }, - - // ─── Credit Agreement ──────────────────────────────────────────────────────── - { - id: "builtin-credit-agreement", - user_id: null, - is_system: true, - created_at: "", - title: "Credit Agreement Review", - type: "tabular", - practice: "Finance", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Lenders", - format: "bulleted_list", - prompt: "Identify all lenders (or the lender syndicate) named in this agreement. For each, state their full legal name and role (e.g. mandated lead arranger, original lender, agent bank).", - }, - { - index: 1, - name: "Borrowers", - format: "bulleted_list", - prompt: "Identify all borrowers named in this agreement, including their full legal name and jurisdiction of incorporation.", - }, - { - index: 2, - name: "Guarantors", - format: "bulleted_list", - prompt: "Identify all guarantors named in this agreement, including their full legal name and the scope of their guarantee obligation.", - }, - { - index: 3, - name: "Other Parties", - format: "bulleted_list", - prompt: "Identify any other material parties to this agreement (e.g. facility agent, security agent, hedge counterparties, issuing bank). State their name and role.", - }, - { - index: 4, - name: "Date of Agreement", - format: "date", - prompt: "What is the date of this credit agreement?", - }, - { - index: 5, - name: "Facility", - format: "bulleted_list", - prompt: "List each facility available under this agreement (e.g. Revolving Credit Facility, Term Loan A, Term Loan B, Term Loan C). For each, state the facility type, tranche name, and any key structural features.", - }, - { - index: 6, - name: "Amount", - format: "monetary_amount", - prompt: "What is the total committed amount available under this agreement across all facilities? State the amount, currency, and breakdown by tranche if applicable.", - }, - { - index: 7, - name: "Purpose", - format: "text", - prompt: "What is the stated purpose for which borrowings under this agreement may be used? Identify any restrictions on use of proceeds.", - }, - { - index: 8, - name: "Interest", - format: "text", - prompt: "What interest rate applies to borrowings under this agreement? Identify the applicable rate (e.g. SOFR, EURIBOR, base rate), the margin, any margin ratchet mechanism, and how interest periods are structured.", - }, - { - index: 9, - name: "Commitment Fee", - format: "text", - prompt: "Is there a commitment fee or utilisation fee? If so, state the applicable rate, how it is calculated, and on what basis (e.g. undrawn commitment, average utilisation).", - }, - { - index: 10, - name: "Repayment Schedule", - format: "text", - prompt: "Summarise the repayment schedule for each facility. Identify whether repayment is by scheduled instalments or bullet repayment, and state the repayment dates and amounts where specified.", - }, - { - index: 11, - name: "Maturity", - format: "date", - prompt: "What is the final maturity date of the facilities under this agreement? If different facilities have different maturities, state each.", - }, - { - index: 12, - name: "Security", - format: "bulleted_list", - prompt: "What security is granted or required to be granted under this agreement? List each class of security (e.g. share pledges, fixed and floating charges, real estate mortgages, account pledges) and the assets or entities over which security is taken.", - }, - { - index: 13, - name: "Guarantees", - format: "bulleted_list", - prompt: "What guarantee obligations are given under or in connection with this agreement? Identify the guarantors, the scope of the guarantee, and any limitations (e.g. up-stream guarantee limitations, guarantor coverage test).", - }, - { - index: 14, - name: "Financial Covenants", - format: "bulleted_list", - prompt: "What financial covenants are included in this agreement? For each covenant identify the metric (e.g. leverage ratio, interest cover, cashflow cover), the applicable test, the testing frequency, and any equity cure rights.", - }, - { - index: 15, - name: "Events of Default", - format: "bulleted_list", - prompt: "List the events of default under this agreement. For each, note any grace periods, materiality thresholds, or cross-default provisions.", - }, - { - index: 16, - name: "Assignment", - format: "text", - prompt: "What restrictions or permissions apply to assignment or transfer of rights under this agreement? Identify restrictions on lender transfers (e.g. white/blacklists, borrower consent) and on borrower assignment.", - }, - { - index: 17, - name: "Change of Control", - format: "text", - prompt: "Is there a change of control provision? If so, what constitutes a change of control, what obligations does it trigger (e.g. mandatory prepayment, cancellation, lender consent), and is there any cure period?", - }, - { - index: 18, - name: "Prepayment Fee", - format: "text", - prompt: "Are there any prepayment fees, make-whole premiums, or soft-call protections? If so, state the applicable fee, the period during which it applies, and any exceptions (e.g. prepayment from insurance proceeds or asset disposal).", - }, - { - index: 19, - name: "Governing Law", - format: "text", - prompt: "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced.", - }, - { - index: 20, - name: "Dispute Resolution", - format: "text", - prompt: "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, and any submission to jurisdiction provisions.", - }, - ], - }, - - // ─── E-Discovery ───────────────────────────────────────────────────────────── - { - id: "builtin-ediscovery", - user_id: null, - is_system: true, - created_at: "", - title: "E-Discovery Review", - type: "tabular", - practice: "Litigation", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Date", - format: "date", - prompt: "What is the date of this document? For emails or correspondence, use the date sent. For other documents, use the date of creation, signature, or the most prominent date shown.", - }, - { - index: 1, - name: "Type of Document", - format: "text", - prompt: "What type of document is this? (e.g. email, memorandum, letter, contract, report, meeting minutes, text message, invoice, presentation). Be specific.", - }, - { - index: 2, - name: "Sender", - format: "text", - prompt: "Who is the sender or author of this document? State their full name, title, and organisation where identifiable.", - }, - { - index: 3, - name: "Recipient(s)", - format: "bulleted_list", - prompt: "Who are the recipients of this document? List all To, CC, and BCC recipients where identifiable. State their full name, title, and organisation for each. Note whether they appear in To, CC, or BCC fields.", - }, - { - index: 4, - name: "Summary", - format: "text", - prompt: "Provide a concise factual summary of the content of this document in 2–4 sentences. Focus on the key subject matter, any decisions made, actions requested, or information conveyed. Do not include legal conclusions.", - }, - { - index: 5, - name: "Persons Mentioned", - format: "bulleted_list", - prompt: "List all individuals mentioned in this document (other than the sender and recipients already identified). For each person, state their name and, if discernible, their role or organisation.", - }, - { - index: 6, - name: "Privileged?", - format: "yes_no", - prompt: "Does this document appear to be legally privileged? Answer Yes if it appears to be a communication between a lawyer and client made for the dominant purpose of obtaining or giving legal advice, or created for the dominant purpose of litigation. Answer No otherwise. If uncertain, note the basis for uncertainty.", - }, - ], - }, - - // ─── Supply Agreement ──────────────────────────────────────────────────────── - { - id: "builtin-supply-agreement", - user_id: null, - is_system: true, - created_at: "", - title: "Supply Agreement Review", - type: "tabular", - practice: "General Transactions", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Parties", - format: "bulleted_list", - prompt: "Identify all parties to this supply agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. supplier, buyer, distributor).", - }, - { - index: 1, - name: "Effective Date", - format: "date", - prompt: "What is the effective date or commencement date of this agreement? If no explicit date is stated, note the date it is deemed to take effect.", - }, - { - index: 2, - name: "Products", - format: "bulleted_list", - prompt: "What products are to be supplied under this agreement? List each product or product category, including any relevant specifications, part numbers, or standards referenced.", - }, - { - index: 3, - name: "Term", - format: "text", - prompt: "What is the initial term or duration of this agreement? State the start date (or reference to when it commences) and the end date or duration.", - }, - { - index: 4, - name: "Renewal", - format: "text", - prompt: "What renewal provisions apply? Is renewal automatic or by agreement? State the renewal period, notice requirements to prevent renewal, and any conditions on renewal.", - }, - { - index: 5, - name: "Delivery", - format: "text", - prompt: "What delivery obligations and terms apply? Identify the delivery terms (e.g. Incoterms), delivery lead times, delivery locations, risk of loss, and any consequences for late or failed delivery.", - }, - { - index: 6, - name: "Quality", - format: "text", - prompt: "What quality standards or specifications apply to the products? Identify any applicable standards (e.g. ISO, regulatory requirements), inspection rights, acceptance procedures, and consequences of non-conformance.", - }, - { - index: 7, - name: "Warranties", - format: "text", - prompt: "What warranties does the supplier give in relation to the products? State the warranty period, the scope of the warranty (e.g. free from defects, conformance to specifications), the remedy for breach (e.g. repair, replacement, refund), and any exclusions.", - }, - { - index: 8, - name: "Liquidated Damages", - format: "text", - prompt: "Are there any liquidated damages provisions? If so, identify what triggers them (e.g. late delivery, failure to meet quality standards), the applicable rate or formula, any aggregate cap, and whether they are stated to be the exclusive remedy.", - }, - { - index: 9, - name: "Limitation of Liability", - format: "text", - prompt: "What limitations of liability apply? Identify any caps on liability (and how they are calculated, e.g. contract value, fees paid), exclusions of consequential or indirect loss, and any carve-outs from the limitation (e.g. fraud, wilful misconduct, death or personal injury).", - }, - { - index: 10, - name: "Force Majeure", - format: "text", - prompt: "Summarise the force majeure clause. What events qualify, what obligations are suspended, what notice must be given, how long must the event persist before either party may terminate, and what are the consequences of termination for force majeure?", - }, - { - index: 11, - name: "Termination Rights", - format: "text", - prompt: "What are the termination rights of each party? Distinguish between termination for convenience (including notice period) and termination for cause (including cure periods and triggers). Note what happens on termination, including any outstanding purchase orders or payment obligations.", - }, - { - index: 12, - name: "Governing Law", - format: "text", - prompt: "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced.", - }, - { - index: 13, - name: "Dispute Resolution", - format: "text", - prompt: "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, and any mandatory escalation steps (e.g. negotiation, mediation) before formal proceedings.", - }, - ], - }, - - // ─── SPA ───────────────────────────────────────────────────────────────────── - { - id: "builtin-spa", - user_id: null, - is_system: true, - created_at: "", - title: "SPA Review", - type: "tabular", - practice: "Corporate", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Parties", - format: "bulleted_list", - prompt: "Identify all parties to this share purchase agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. seller, buyer, target company, warrantor, guarantor).", - }, - { - index: 1, - name: "Date", - format: "date", - prompt: "What is the date of this share purchase agreement?", - }, - { - index: 2, - name: "Transaction", - format: "text", - prompt: "Summarise the transaction. What shares or interests are being acquired, in which target company or companies, and what is the nature of the transaction (e.g. 100% acquisition, majority stake, minority investment)?", - }, - { - index: 3, - name: "Consideration", - format: "monetary_amount", - prompt: "What is the consideration payable under this agreement? State the total headline price, the currency, and the structure (e.g. cash, shares, loan notes, deferred consideration, earnout). If the price is subject to adjustment (e.g. locked box, completion accounts), describe the mechanism.", - }, - { - index: 4, - name: "Key Conditions Precedent", - format: "bulleted_list", - prompt: "List the key conditions precedent (CPs) to completion. For each CP, state what must be satisfied or waived and by whom. Identify any long-stop date by which CPs must be satisfied.", - }, - { - index: 5, - name: "Completion Date", - format: "text", - prompt: "When does completion occur? State how many business days after satisfaction or waiver of all CPs completion must occur, and/or any fixed outside date for completion. Note whether there is any obligation to complete by a specific date after signing.", - }, - { - index: 6, - name: "Warranties", - format: "text", - prompt: "Summarise the warranty package. Who gives the warranties (e.g. seller, management, all sellers jointly and severally)? Are there business warranties and/or title warranties? Identify the scope of any warranty disclosure process and any limitations on warranty claims (e.g. time limits, minimum claim thresholds, aggregate cap).", - }, - { - index: 7, - name: "Indemnities", - format: "text", - prompt: "Are there specific indemnities in this agreement? If so, list the key indemnities given, by whom, and for what potential liabilities (e.g. tax indemnity, environmental indemnity, litigation indemnity). Note any time limits or caps applicable to indemnity claims.", - }, - { - index: 8, - name: "Limitation of Liability", - format: "text", - prompt: "What limitations on liability apply to warranty and indemnity claims? Identify the aggregate cap (and how it is calculated, e.g. as a percentage of consideration), any separate cap for fundamental warranties or indemnities, minimum claim thresholds (de minimis and basket/deductible), and time limits for bringing claims.", - }, - { - index: 9, - name: "Covenants", - format: "text", - prompt: "What restrictive or other covenants are given by the seller or management? Include non-compete, non-solicitation, and non-dealing covenants, stating the scope (activities and geography) and duration of each.", - }, - { - index: 10, - name: "Exclusivity", - format: "text", - prompt: "Is there an exclusivity or no-shop provision in this agreement? If so, state the period of exclusivity, what activities are restricted (e.g. soliciting competing offers, engaging with third parties), and any carve-outs or break fee arrangements.", - }, - { - index: 11, - name: "Governing Law and Jurisdiction", - format: "text", - prompt: "What governing law applies to this agreement and what courts or arbitral tribunals have jurisdiction? State the chosen law, the forum for disputes, and whether jurisdiction is exclusive or non-exclusive.", - }, - { - index: 12, - name: "Dispute Resolution", - format: "text", - prompt: "How are disputes to be resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen seat or forum, the applicable rules (if arbitration), and any mandatory pre-dispute escalation steps.", - }, - ], - }, - - // ─── NDA ───────────────────────────────────────────────────────────────────── - { - id: "builtin-nda", - user_id: null, - is_system: true, - created_at: "", - title: "NDA Review", - type: "tabular", - practice: "General Transactions", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Direction", - format: "tag", - tags: ["Mutual", "Unilateral"], - prompt: "Is this NDA mutual (both parties owe confidentiality obligations to each other) or unilateral (only one party owes confidentiality obligations)? Identify the direction and name the disclosing and receiving party or parties.", - }, - { - index: 1, - name: "Definition of Confidential Information", - format: "text", - prompt: "How is 'Confidential Information' defined in this agreement? Is it broadly or narrowly drafted? Does it require information to be marked as confidential, or is all information shared in connection with the purpose automatically covered? Note any express inclusions or exclusions.", - }, - { - index: 2, - name: "Obligations of Receiving Party", - format: "bulleted_list", - prompt: "What are the key obligations of the receiving party in respect of the confidential information? List each obligation (e.g. keep confidential, not disclose to third parties, use only for the permitted purpose, apply a specific standard of care, restrict access to need-to-know personnel).", - }, - { - index: 3, - name: "Standard Carveouts Present?", - format: "yes_no", - prompt: "Does the agreement include the standard carveouts to confidentiality obligations? Answer Yes if the agreement excludes information that: (a) is or becomes publicly available without breach; (b) was already known to the receiving party; (c) is independently developed; and (d) is received from a third party without restriction. Note any carveouts that are missing or are drafted differently from the standard formulation.", - }, - { - index: 4, - name: "Permitted Disclosures", - format: "bulleted_list", - prompt: "To whom may the receiving party disclose confidential information? List each category of permitted recipient (e.g. employees, professional advisers, affiliates, financing parties, regulatory authorities). Note whether onward disclosure requires the recipient to be bound by equivalent obligations.", - }, - { - index: 5, - name: "Term and Duration", - format: "text", - prompt: "What is the term of this NDA and how long do the confidentiality obligations last? State the initial term of the agreement and the duration of the confidentiality obligations (noting whether they survive termination and for how long).", - }, - { - index: 6, - name: "Return and Destruction", - format: "text", - prompt: "What obligations apply on expiry or termination regarding return or destruction of confidential information? Is there a choice between return and destruction? Must destruction be certified? Are there any retention exceptions (e.g. for regulatory purposes, IT backup systems)?", - }, - { - index: 7, - name: "Remedies", - format: "text", - prompt: "What remedies are available for breach of the confidentiality obligations? Does the agreement acknowledge that damages may be inadequate and that injunctive relief or specific performance is available? Are there any agreed liquidated damages or indemnities for breach?", - }, - { - index: 8, - name: "Governing Law and Jurisdiction", - format: "text", - prompt: "What governing law applies to this agreement and which courts have jurisdiction? State the chosen law, the forum, and whether jurisdiction is exclusive or non-exclusive.", - }, - ], - }, - - // ─── Commercial Lease ───────────────────────────────────────────────────────── - { - id: "builtin-commercial-lease", - user_id: null, - is_system: true, - created_at: "", - title: "Commercial Lease Review", - type: "tabular", - practice: "Real Estate", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Landlord", - format: "text", - prompt: "Who is the landlord under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address or title number stated.", - }, - { - index: 1, - name: "Tenant", - format: "text", - prompt: "Who is the tenant under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address stated.", - }, - { - index: 2, - name: "Guarantor", - format: "text", - prompt: "Is there a guarantor under this lease? If so, state the guarantor's full legal name and the scope of the guarantee (e.g. full guarantee of the tenant's obligations, or limited to specific obligations). If there is no guarantor, state this explicitly.", - }, - { - index: 3, - name: "Premises", - format: "text", - prompt: "Describe the premises demised under this lease. Include the address, floor(s), unit reference, net internal area (if stated), and any areas included or excluded from the demise (e.g. common parts, roof, structure, car parking).", - }, - { - index: 4, - name: "Date of Lease", - format: "date", - prompt: "What is the date of this lease? If the lease is undated or if the term commencement date differs from the execution date, note both.", - }, - { - index: 5, - name: "Term", - format: "text", - prompt: "What is the contractual term of this lease? State the length of the term and the term commencement and expiry dates.", - }, - { - index: 6, - name: "Rent", - format: "monetary_amount", - prompt: "What is the initial annual rent payable under this lease? State the amount, the currency, the payment frequency (e.g. quarterly in advance), and the payment dates. Note any rent-free period or initial concessionary rent.", - }, - { - index: 7, - name: "Rent Review", - format: "text", - prompt: "Are there rent review provisions? If so, state the review dates or frequency, the review mechanism (e.g. open market rent review, RPI/CPI indexation, fixed uplift), whether the review is upward-only, any assumptions and disregards applicable to an open market review, and the dispute resolution mechanism if the parties cannot agree the reviewed rent.", - }, - { - index: 8, - name: "Service Charge", - format: "text", - prompt: "Is the tenant liable for a service charge? If so, describe what costs are included within the service charge, the tenant's apportionment or percentage share, any cap on the service charge, and how the service charge is administered and reconciled.", - }, - { - index: 9, - name: "Insurance", - format: "text", - prompt: "What are the insurance obligations under this lease? State who insures (landlord or tenant), what risks must be insured, who bears the insurance premium cost, and the tenant's obligations in respect of the landlord's insurance (e.g. not to vitiate the policy, to pay the premium as additional rent).", - }, - { - index: 10, - name: "Permitted Use", - format: "text", - prompt: "What is the permitted use of the premises under this lease? State the use class or specific use permitted and identify any restrictions on use. Note whether the landlord's consent is required to change use and on what basis consent may be withheld.", - }, - { - index: 11, - name: "Repair & Maintenance", - format: "text", - prompt: "Who is responsible for repair and maintenance of the premises? Describe the extent of the tenant's repairing obligation (e.g. full repairing, internal repairing only, subject to a schedule of condition). State the landlord's repairing obligations, if any, in respect of the structure, exterior, or common parts.", - }, - { - index: 12, - name: "Alterations", - format: "text", - prompt: "What alterations may the tenant make to the premises? Distinguish between structural and non-structural alterations. Is landlord consent required, and if so on what basis may it be withheld? Must the tenant reinstate alterations at the end of the term?", - }, - { - index: 13, - name: "Assignment & Subletting", - format: "text", - prompt: "What rights does the tenant have to assign or sublet the premises? State whether assignment and subletting are permitted with landlord consent, on what grounds consent may be withheld, any conditions to be satisfied (e.g. an authorised guarantee agreement on assignment, rent at no less than the passing rent on subletting), and whether any dealings are prohibited outright.", - }, - { - index: 14, - name: "Break Rights", - format: "text", - prompt: "Are there any break rights in this lease? If so, identify who holds the break right (landlord, tenant, or both), the break date(s), the notice period and form required to exercise the break, and any pre-conditions to effective exercise (e.g. no material breach, vacant possession, payment of all sums due).", - }, - { - index: 15, - name: "Security of Tenure", - format: "yes_no", - prompt: "Does the tenant have statutory security of tenure (e.g. under the Landlord and Tenant Act 1954 in England and Wales, or equivalent legislation in another jurisdiction)? Answer Yes if the lease is contracted in or benefits from security of tenure. Answer No if the lease has been contracted out or if security of tenure does not apply. State the basis for your answer.", - }, - { - index: 16, - name: "Dilapidations", - format: "text", - prompt: "What dilapidations obligations apply at the end of the term? Describe the tenant's yield-up obligations (e.g. to deliver the premises in repair, to reinstate alterations, to redecorate). Is there a schedule of condition limiting the tenant's liability? Note any dilapidations cap or other limitation on the landlord's claim.", - }, - { - index: 17, - name: "Rent Deposit", - format: "monetary_amount", - prompt: "Is a rent deposit required? If so, state the amount, the period for which it is held, the conditions under which the landlord may draw on it, and the circumstances in which it is returned to the tenant.", - }, - { - index: 18, - name: "Forfeiture & Termination", - format: "text", - prompt: "What are the landlord's forfeiture or termination rights? Identify the events that entitle the landlord to forfeit the lease (e.g. non-payment of rent after a grace period, material breach of covenant, insolvency) and any notice requirements before forfeiture can be exercised.", - }, - { - index: 19, - name: "Governing Law", - format: "text", - prompt: "What governing law applies to this lease and which courts have jurisdiction over disputes?", - }, - ], - }, - - // ─── Limited Partnership Agreement ─────────────────────────────────────────── - { - id: "builtin-lpa", - user_id: null, - is_system: true, - created_at: "", - title: "Limited Partnership Agreement Review", - type: "tabular", - practice: "Private Equity", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "General Partner", - format: "text", - prompt: "Identify the General Partner(s) of the fund. State the full legal name, jurisdiction of establishment, and any affiliated management entity (e.g. the fund manager or investment adviser) named in the agreement.", - }, - { - index: 1, - name: "Fund Name & Jurisdiction", - format: "text", - prompt: "What is the full name of the fund and in which jurisdiction is the limited partnership established or registered?", - }, - { - index: 2, - name: "Total Committed Capital", - format: "monetary_amount", - prompt: "What is the total committed capital of the fund? State the target size, any hard cap, the currency, and the closing date or dates if specified.", - }, - { - index: 3, - name: "Capital Calls & Drawdowns", - format: "text", - prompt: "How and when may the GP call capital from LPs? State the notice period for capital calls, the mechanics for issuing a call notice, any limit on the frequency or size of calls, and whether undrawn commitments can be recalled after repayment.", - }, - { - index: 4, - name: "Penalties for Failure to Fund", - format: "text", - prompt: "What are the consequences if an LP fails to fund a capital call? Describe any penalties (e.g. interest on the shortfall, dilution of interest, forced transfer at a discount, loss of voting or distribution rights, exclusion from future investments). Are there any cure periods before penalties apply?", - }, - { - index: 5, - name: "Investment Scope & Restrictions", - format: "text", - prompt: "What is the fund's stated investment strategy, scope, and any restrictions? Include permitted sectors, geographies, investment stages, instrument types, and any concentration limits (e.g. maximum % of committed capital per single investment). Note how much discretion the GP has to deviate from the stated strategy.", - }, - { - index: 6, - name: "Fund Term", - format: "text", - prompt: "What is the term of the fund? State the initial term (e.g. 10 years from final closing), any permitted extension periods (e.g. 2 × 1-year extensions), who has the right to approve extensions (GP alone or with LP/LPAC consent), and any early termination mechanics.", - }, - { - index: 7, - name: "Management Fee", - format: "text", - prompt: "What management fee is payable to the GP or manager? State the fee rate, the basis on which it is calculated (e.g. committed capital during the investment period, then invested or net asset value thereafter), any step-downs over the fund life, and the payment frequency.", - }, - { - index: 8, - name: "Carried Interest", - format: "text", - prompt: "What carried interest (carry) is payable to the GP? State the carry percentage, the structure (European/fund-level waterfall vs American/deal-by-deal), and identify each step of the distribution waterfall in sequence (e.g. return of capital, preferred return, GP catch-up, then profit split).", - }, - { - index: 9, - name: "Preferred Return (Hurdle Rate)", - format: "percentage", - prompt: "Is there a preferred return or hurdle rate that LPs must receive before the GP earns carry? State the rate, whether it is compounded (and on what basis), and how it is calculated (e.g. on invested capital, on contributed capital). If there is no preferred return, state this explicitly.", - }, - { - index: 10, - name: "GP Catch-Up", - format: "text", - prompt: "Is there a GP catch-up mechanism after the preferred return is met? If so, describe how it operates: what percentage of distributions go to the GP during the catch-up, and what economic result the catch-up is designed to achieve (e.g. the GP receives 20% of all profits to date).", - }, - { - index: 11, - name: "Clawback", - format: "text", - prompt: "Is there a clawback obligation on the GP if it receives excess carry? State whether the clawback is calculated at fund level or individual partner level, when it is triggered, any cap or limit on the clawback obligation, and whether there is any escrow or security arrangement to support the GP's clawback obligation.", - }, - { - index: 12, - name: "Fees & Expenses (Beyond Management Fee)", - format: "bulleted_list", - prompt: "What fees and expenses are charged to the fund or LPs beyond the management fee? List each category (e.g. transaction fees, monitoring fees, broken deal costs, formation expenses, legal fees, fund administration costs, organisational expenses). For each, state who bears the cost and whether any amounts are offset against the management fee.", - }, - { - index: 13, - name: "Distributions", - format: "text", - prompt: "How and when are distributions made to LPs? Describe the timing of distributions (e.g. upon realisation of investments or at the GP's discretion), whether the GP can reinvest proceeds within the investment period, and whether distributions may be made in-kind (i.e. as securities rather than cash).", - }, - { - index: 14, - name: "Key Person Clause", - format: "text", - prompt: "Is there a key person clause? Identify the designated key persons. What triggers the key person event (e.g. departure, incapacity, reduced time commitment below a threshold)? What are the consequences (e.g. suspension of the investment period)? Do LPs have any right to terminate or vote on continuation following a key person event?", - }, - { - index: 15, - name: "Removal of the GP", - format: "text", - prompt: "Under what circumstances can the GP be removed? Distinguish between removal for cause (e.g. fraud, gross negligence, wilful misconduct — state the LP voting threshold required) and removal without cause (state the LP voting threshold and any associated consequences such as carried interest treatment on removal).", - }, - { - index: 16, - name: "Advisory Committee (LPAC)", - format: "text", - prompt: "Is there an LP Advisory Committee (LPAC) or similar governance body? If so, describe its composition, how members are selected, its key powers and responsibilities (e.g. approving conflicts of interest, valuations, extensions, related-party transactions), and whether its approval is binding or merely advisory.", - }, - { - index: 17, - name: "Transfer Restrictions", - format: "text", - prompt: "What restrictions apply to an LP transferring or assigning its interest in the fund? Is GP consent required? Are there any permitted transfer exceptions (e.g. to affiliates)? Are secondary market sales permitted and, if so, subject to what conditions or rights of first refusal?", - }, - { - index: 18, - name: "Conflicts of Interest", - format: "text", - prompt: "How does the agreement address conflicts of interest? Describe the deal allocation policy across funds, any co-investment rights granted to LPs, restrictions on related-party transactions, and the role of the LPAC in reviewing or approving conflicts. Note any specific conflict scenarios expressly contemplated.", - }, - { - index: 19, - name: "Governing Law", - format: "text", - prompt: "What governing law applies to this agreement and which courts or arbitral tribunals have jurisdiction over disputes?", - }, - ], - }, - - // ─── Shareholder Agreement (Assistant) ─────────────────────────────────────── - { - id: "builtin-sha-summary", - user_id: null, - is_system: true, - created_at: "", - title: "Shareholder Agreement Summary", - type: "assistant", - practice: "Corporate", - prompt_md: - "## Shareholder Agreement Summary\n\n" + - "Review the uploaded shareholder agreement and produce a comprehensive legal summary covering the following topics. " + - "For each section, identify the key provisions, quote the relevant clause references, and flag any unusual, onerous, or market-standard deviations.\n\n" + - "1. **Parties & Shareholdings** — Full legal names, roles, share classes held, and percentage interests (on a fully diluted basis if stated)\n" + - "2. **Share Classes & Rights** — For each class: voting rights, dividend rights, liquidation preference, conversion or redemption features\n" + - "3. **Board Composition & Governance** — Board size, director appointment rights (and the shareholding thresholds required to maintain them), quorum, and casting vote\n" + - "4. **Reserved Matters** — Decisions requiring a special majority, unanimity, or a specific shareholder's consent; note the threshold and whose consent is required for each\n" + - "5. **Pre-emption on New Shares** — Who holds pre-emption rights, procedure, timeline, and any carve-outs (e.g. employee option schemes)\n" + - "6. **Transfer Restrictions** — Lock-up periods, prohibited transfers, permitted transfers (e.g. to affiliates), and any board or shareholder approval requirements\n" + - "7. **Right of First Refusal / Pre-emption on Transfer** — Trigger, procedure, pricing mechanics, and any exceptions\n" + - "8. **Drag-Along Rights** — Who holds the right, threshold to trigger, conditions (e.g. minimum price, independent valuation), and minority protections\n" + - "9. **Tag-Along Rights** — Who holds the right, triggering threshold, exercise procedure, and price terms\n" + - "10. **Anti-Dilution Protections** — Type (full ratchet, weighted average), trigger events, calculation mechanics, and exceptions\n" + - "11. **Dividend Policy** — Any obligation or target to pay dividends, preferential dividend rights, and restrictions on distributions\n" + - "12. **Exit & Liquidity** — Agreed exit routes (trade sale, IPO, drag sale), timelines, and liquidation preferences on exit\n" + - "13. **Deadlock** — Deadlock definition, escalation and resolution mechanisms (e.g. Russian roulette, put/call options), and consequences if unresolved\n" + - "14. **Non-Compete & Non-Solicitation** — Who is bound, scope of activities and geography, duration, and carve-outs\n" + - "15. **Governing Law & Dispute Resolution** — Applicable law, forum, arbitration or litigation, and any mandatory escalation steps\n\n" + - "Generate the summary as a downloadable Word document.", - columns_config: null, - }, - - // ─── Shareholder Agreement ──────────────────────────────────────────────────── - { - id: "builtin-shareholder-agreement", - user_id: null, - is_system: true, - created_at: "", - title: "Shareholder Agreement Review", - type: "tabular", - practice: "Corporate", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Parties", - format: "bulleted_list", - prompt: "Identify all parties to this shareholder agreement. For each, state their full legal name, jurisdiction of incorporation or establishment (if stated), and their role (e.g. company, majority shareholder, minority shareholder, investor, founder, management shareholder).", - }, - { - index: 1, - name: "Date", - format: "date", - prompt: "What is the date of this shareholder agreement?", - }, - { - index: 2, - name: "Share Capital & Classes", - format: "bulleted_list", - prompt: "What classes of shares are in issue or contemplated by this agreement? For each class, describe the key rights attaching to it including voting rights, dividend rights, liquidation preference (if any), and any conversion or redemption features.", - }, - { - index: 3, - name: "Shareholdings", - format: "bulleted_list", - prompt: "What are the shareholdings of each party as set out or contemplated in this agreement? For each shareholder, state the number of shares held, the class, and the percentage of total share capital (on a fully diluted basis if stated).", - }, - { - index: 4, - name: "Board Composition", - format: "text", - prompt: "How is the board of directors constituted under this agreement? State the total number of directors, each shareholder's or class of shareholders' right to appoint or nominate directors (and the threshold shareholding required to maintain that right), and any provisions for a chairman or casting vote.", - }, - { - index: 5, - name: "Reserved Matters", - format: "bulleted_list", - prompt: "What are the reserved matters or veto rights set out in this agreement? List each matter that requires shareholder or director approval beyond an ordinary majority (e.g. special majority, unanimity, or the consent of a specific shareholder). Identify the applicable threshold or whose consent is required for each.", - }, - { - index: 6, - name: "Pre-emption on New Shares", - format: "text", - prompt: "What pre-emption rights apply on the issuance of new shares? Describe who holds pre-emption rights, the procedure for offering new shares to existing shareholders, the timeline for acceptance, and any carve-outs or exceptions (e.g. shares issued under an employee option scheme, permitted issuances).", - }, - { - index: 7, - name: "Transfer Restrictions", - format: "text", - prompt: "What restrictions apply to the transfer of shares? Identify any lock-up periods (and their duration), which transfers are prohibited outright, and which transfers are permitted without consent (e.g. transfers to affiliates or family trusts). Note any board or shareholder approval requirements for transfers.", - }, - { - index: 8, - name: "Right of First Refusal / Pre-emption on Transfer", - format: "text", - prompt: "Is there a right of first refusal or pre-emption right on a proposed transfer of shares? If so, describe who holds the right, the procedure for triggering and exercising it (including notice periods and pricing mechanics), and any exceptions.", - }, - { - index: 9, - name: "Drag-Along Rights", - format: "text", - prompt: "Are there drag-along rights? If so, identify who holds the drag right (e.g. majority shareholders above a specified threshold), the threshold required to trigger a drag, the obligations imposed on dragged shareholders, any conditions on the drag (e.g. minimum price, independent valuation), and any protections for minority shareholders.", - }, - { - index: 10, - name: "Tag-Along Rights", - format: "text", - prompt: "Are there tag-along rights? If so, identify who holds the tag right, the threshold transfer that triggers the tag, the procedure for exercising the tag (including notice periods), the price and terms on which the tagging shareholder may sell, and any exceptions.", - }, - { - index: 11, - name: "Anti-Dilution Protections", - format: "text", - prompt: "Are there any anti-dilution protections for any class of shareholders? If so, describe the type of protection (e.g. full ratchet, weighted average, broad-based or narrow-based), the trigger events, how the adjusted price or entitlement is calculated, and any exceptions (e.g. permitted issuances excluded from the calculation).", - }, - { - index: 12, - name: "Dividend Policy", - format: "text", - prompt: "What dividend provisions are set out in this agreement? Describe any obligation or policy to pay dividends (e.g. a minimum percentage of distributable profits), any preferential dividend rights attaching to a particular class of shares, and any restrictions on dividend payments (e.g. subject to available profits, board or shareholder approval, lender consent).", - }, - { - index: 13, - name: "Exit & Liquidity Provisions", - format: "text", - prompt: "What exit or liquidity provisions are included? Describe any agreed exit mechanisms (e.g. trade sale, IPO, drag-along sale), any timelines or milestones by which an exit is targeted, any shareholder rights to initiate or compel an exit process after a specified period, and any preference on exit proceeds attaching to a particular class of shares.", - }, - { - index: 14, - name: "Deadlock", - format: "text", - prompt: "How is deadlock addressed? Describe any deadlock resolution mechanisms (e.g. escalation to senior management, mediation, Russian roulette / shoot-out provisions, put/call options). For each mechanism, state the trigger conditions, the procedure, and the consequences if deadlock is not resolved.", - }, - { - index: 15, - name: "Non-Compete & Non-Solicitation", - format: "text", - prompt: "Are any shareholders subject to non-compete or non-solicitation obligations? If so, identify which shareholders are bound, the scope of the restriction (activities and geography), and the duration (during the term of the agreement and/or for a period after a shareholder ceases to hold shares). Note any carve-outs.", - }, - { - index: 16, - name: "Confidentiality", - format: "text", - prompt: "What confidentiality obligations are imposed on the shareholders? State the scope of confidential information covered, the permitted disclosures (e.g. to professional advisers, affiliates, lenders), and the duration of the obligation. Note whether the obligation survives termination of the agreement.", - }, - { - index: 17, - name: "Warranties", - format: "text", - prompt: "What warranties are given by the shareholders under this agreement? Identify who gives warranties, the subject matter (e.g. title to shares, capacity, no encumbrances, no conflicts), any limitations on warranty claims (e.g. time limits, caps, knowledge qualifications), and any indemnities given alongside the warranties.", - }, - { - index: 18, - name: "Governing Law", - format: "text", - prompt: "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced.", - }, - { - index: 19, - name: "Dispute Resolution", - format: "text", - prompt: "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, any mandatory escalation steps, and whether jurisdiction is exclusive.", - }, - ], - }, - - // ─── Employment Agreement ───────────────────────────────────────────────────── - { - id: "builtin-employment-agreement", - user_id: null, - is_system: true, - created_at: "", - title: "Employment Agreement Review", - type: "tabular", - practice: "Employment", - prompt_md: null, - columns_config: [ - { - index: 0, - name: "Employer", - format: "text", - prompt: "Who is the employer under this agreement? State the full legal name and jurisdiction of incorporation or establishment.", - }, - { - index: 1, - name: "Employee", - format: "text", - prompt: "Who is the employee under this agreement? State their full name and, if provided, their address or location.", - }, - { - index: 2, - name: "Date", - format: "date", - prompt: "What is the date of this employment agreement? If a commencement date or start date differs from the signing date, state both.", - }, - { - index: 3, - name: "Title", - format: "text", - prompt: "What is the employee's job title or position as stated in this agreement? If a reporting line is specified, include it.", - }, - { - index: 4, - name: "Compensation", - format: "text", - prompt: "What is the employee's compensation under this agreement? State the base salary or wage, the currency, and the payment frequency (e.g. monthly, bi-weekly). Include any guaranteed bonus, commission, or other fixed remuneration elements.", - }, - { - index: 5, - name: "Full Time / Part Time", - format: "tag", - tags: ["Full Time", "Part Time"], - prompt: "Is this a full-time or part-time position? If part-time, state the number of days or hours per week where specified.", - }, - { - index: 6, - name: "Independent Contractor?", - format: "yes_no", - prompt: "Does the agreement characterise the worker as an independent contractor rather than an employee? Answer Yes if the agreement uses contractor, consultant, or self-employed language. Note any provisions that address the nature of the relationship.", - }, - { - index: 7, - name: "Benefits", - format: "bulleted_list", - prompt: "What benefits are the employee entitled to under this agreement? List each benefit (e.g. health insurance, pension/retirement contributions, life assurance, car allowance, share options, expense reimbursement). Note any eligibility conditions or limits.", - }, - { - index: 8, - name: "Notice Period (Employer to Employee)", - format: "text", - prompt: "What notice must the employer give to terminate the employee's employment (other than for cause)? State the notice period and any provisions for payment in lieu of notice.", - }, - { - index: 9, - name: "Notice Period (Employee to Employer)", - format: "text", - prompt: "What notice must the employee give to resign? State the notice period and any provisions for payment in lieu of notice or garden leave.", - }, - { - index: 10, - name: "Overtime", - format: "text", - prompt: "What provisions apply to overtime? Is the employee eligible for overtime pay, and if so at what rate? Or does the agreement state that the salary is inclusive of any overtime? Note any opt-out of statutory working time limits.", - }, - { - index: 11, - name: "Working Hours", - format: "text", - prompt: "What working hours are specified in this agreement? State the normal hours of work, any flexibility provisions, and whether the employee is expected to work additional hours as required.", - }, - { - index: 12, - name: "Variation", - format: "text", - prompt: "What provisions govern variation of the terms of this agreement? Can the employer unilaterally vary terms, or is the employee's consent required? Note any specific terms that are stated to be variable without consent.", - }, - { - index: 13, - name: "Intellectual Property Assignment", - format: "text", - prompt: "What intellectual property assignment provisions are included? Does the employee assign to the employer all IP created in the course of employment? Are there any carve-outs for pre-existing IP or inventions created outside working hours? Note any moral rights waiver.", - }, - { - index: 14, - name: "Grounds for Termination", - format: "bulleted_list", - prompt: "What grounds for summary dismissal or termination for cause are set out in the agreement? List each ground (e.g. gross misconduct, breach of confidentiality, insolvency, criminal conviction). Note whether summary dismissal is without notice or payment in lieu.", - }, - { - index: 15, - name: "Annual Leave Entitlement", - format: "text", - prompt: "What is the employee's annual leave entitlement? State the number of days (or weeks) per year, whether this is inclusive of or in addition to public holidays, and any provisions for accrual, carry-over, or payment of untaken leave on termination.", - }, - ], - }, -]; - -export const BUILT_IN_IDS = new Set(BUILT_IN_WORKFLOWS.map((wf) => wf.id)); diff --git a/frontend/src/app/components/workflows/practices.ts b/frontend/src/app/components/workflows/practices.ts index 54a2c17..3ecb5ab 100644 --- a/frontend/src/app/components/workflows/practices.ts +++ b/frontend/src/app/components/workflows/practices.ts @@ -17,7 +17,7 @@ export const PRACTICE_OPTIONS = [ "DCM", "Lev Fin", "Arbitration", - "Others", + "Other", ] as const; export type Practice = (typeof PRACTICE_OPTIONS)[number]; diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx index 2a9da5d..9c948c7 100644 --- a/frontend/src/app/error.tsx +++ b/frontend/src/app/error.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import { useEffect } from "react"; +import { PillButton } from "@/components/ui/pill-button"; export default function Error({ error, @@ -23,12 +24,9 @@ export default function Error({ our team will look into it. </p> - <Link - href="/" - className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium text-white bg-gray-900 hover:bg-gray-700 transition-colors" - > - Home - </Link> + <PillButton asChild tone="black" size="normal"> + <Link href="/">Home</Link> + </PillButton> </div> </div> ); diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx index ccc1d3d..d54b87f 100644 --- a/frontend/src/app/global-error.tsx +++ b/frontend/src/app/global-error.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect } from "react"; +import { PillButton } from "@/components/ui/pill-button"; export default function GlobalError({ error, @@ -51,30 +52,7 @@ export default function GlobalError({ margin-bottom: 2rem; } - .btn-back { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.625rem 1.25rem; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - font-family: 'Inter', sans-serif; - cursor: pointer; - transition: all 0.15s ease; - text-decoration: none; - border: none; - background-color: rgb(0, 136, 255); - color: white; - } - - .btn-back:hover { - background-color: rgb(0, 120, 230); - } - - .btn-back:active { - transform: scale(0.98); - } + .btn-back { font-family: 'Inter', sans-serif; } `}</style> </head> <body> @@ -84,12 +62,14 @@ export default function GlobalError({ We encountered an unexpected error. This has been logged and our team will look into it. </p> - <button + <PillButton + tone="blue" + size="normal" className="btn-back" onClick={() => window.history.back()} > Back - </button> + </PillButton> </div> </body> </html> diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index f383967..6ceea8a 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -343,27 +343,30 @@ } .workflow-editor-content h1 { - font-size: 1rem; + font-size: 1.25rem; font-weight: 600; color: #111827; margin-top: 1.25rem; margin-bottom: 0.375rem; + line-height: 1.25; } .workflow-editor-content h2 { - font-size: 0.875rem; + font-size: 1.0625rem; font-weight: 600; color: #111827; margin-top: 0.875rem; margin-bottom: 0.25rem; + line-height: 1.3; } .workflow-editor-content h3 { - font-size: 0.8125rem; + font-size: 0.9375rem; font-weight: 600; color: #111827; margin-top: 0.625rem; margin-bottom: 0.125rem; + line-height: 1.35; } .workflow-editor-content h1:first-child, @@ -409,6 +412,63 @@ font-style: italic; } +.workflow-editor-content .tableWrapper { + margin: 0.75rem 0; + overflow-x: auto; + border: 1px solid #e5e7eb; + border-radius: 0.375rem; +} + +.workflow-editor-content .tableWrapper:first-child { + margin-top: 0; +} + +.workflow-editor-content .tableWrapper:last-child { + margin-bottom: 0; +} + +.workflow-editor-content table { + min-width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 0.75rem; +} + +.workflow-editor-content thead { + background: #f9fafb; +} + +.workflow-editor-content th, +.workflow-editor-content td { + border-right: 1px solid #f3f4f6; + border-bottom: 1px solid #f3f4f6; + padding: 0.5rem 0.75rem; + vertical-align: top; +} + +.workflow-editor-content th:last-child, +.workflow-editor-content td:last-child { + border-right: 0; +} + +.workflow-editor-content tr:last-child td { + border-bottom: 0; +} + +.workflow-editor-content th { + color: #374151; + font-weight: 600; +} + +.workflow-editor-content td { + color: #4b5563; +} + +.workflow-editor-content th p, +.workflow-editor-content td p { + margin-bottom: 0; +} + /* ChatBox Animation Styles */ /* PDF text layer */ diff --git a/frontend/src/app/hooks/useAssistantChat.ts b/frontend/src/app/hooks/useAssistantChat.ts index 7afef1c..62a0085 100644 --- a/frontend/src/app/hooks/useAssistantChat.ts +++ b/frontend/src/app/hooks/useAssistantChat.ts @@ -10,7 +10,7 @@ import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { useGenerateChatTitle } from "./useGenerateChatTitle"; import type { AssistantEvent, - CitationAnnotation, + Citation, Message, } from "@/app/components/shared/types"; @@ -99,6 +99,21 @@ export function useAssistantChat({ const eventsRef = useRef<AssistantEvent[]>([]); + const updateLatestAssistantMessage = ( + updater: (message: Message) => Message, + ) => { + setMessages((prev) => { + const assistantIndex = [...prev] + .map((message, index) => ({ message, index })) + .reverse() + .find(({ message }) => message.role === "assistant")?.index; + if (assistantIndex === undefined) return prev; + const updated = [...prev]; + updated[assistantIndex] = updater(updated[assistantIndex]); + return updated; + }); + }; + /** * Finalize any in-flight streaming content event so the next * content_delta starts a fresh block. Called @@ -115,17 +130,10 @@ export function useAssistantChat({ { type: "content", text: last.text }, ]; const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const lastMsg = updated[updated.length - 1]; - if (lastMsg?.role === "assistant") { - updated[updated.length - 1] = { - ...lastMsg, - events: snapshot, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: snapshot, + })); } }; @@ -141,17 +149,10 @@ export function useAssistantChat({ { type: "reasoning", text: last.text }, ]; const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const lastMsg = updated[updated.length - 1]; - if (lastMsg?.role === "assistant") { - updated[updated.length - 1] = { - ...lastMsg, - events: snapshot, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: snapshot, + })); }; // Transient placeholder events (tool_call_start, thinking) fill the @@ -183,17 +184,10 @@ export function useAssistantChat({ abortControllerRef.current.abort(); const snapshot = cancelStreamingEvents(eventsRef.current); eventsRef.current = snapshot; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - events: cancelStreamingEvents(last.events ?? snapshot), - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: cancelStreamingEvents(message.events ?? snapshot), + })); setIsResponseLoading(false); setIsLoadingCitations(false); } @@ -205,14 +199,7 @@ export function useAssistantChat({ if (after.length === before.length) return; eventsRef.current = after; const snapshot = [...after]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { ...last, events: snapshot }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ ...message, events: snapshot })); }; const pushThinkingPlaceholder = () => { @@ -225,14 +212,7 @@ export function useAssistantChat({ { type: "thinking" as const, isStreaming: true }, ]; const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const lastMsg = updated[updated.length - 1]; - if (lastMsg?.role === "assistant") { - updated[updated.length - 1] = { ...lastMsg, events: snapshot }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ ...message, events: snapshot })); }; const pushEvent = (event: AssistantEvent) => { @@ -243,14 +223,7 @@ export function useAssistantChat({ const next = eventsRef.current.filter((e) => !isStreamingPlaceholder(e)); eventsRef.current = [...next, event]; const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { ...last, events: snapshot }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ ...message, events: snapshot })); }; const updateMatchingEvent = ( @@ -267,14 +240,7 @@ export function useAssistantChat({ newEvents[idx] = updater(events[idx]); eventsRef.current = newEvents; const snapshot = [...newEvents]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { ...last, events: snapshot }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ ...message, events: snapshot })); return true; }; @@ -282,6 +248,10 @@ export function useAssistantChat({ message: Message, opts?: { displayedDoc?: { filename: string; documentId: string } | null; + askInputsResponse?: Extract< + AssistantEvent, + { type: "ask_inputs_response" } + >; }, ): Promise<string | null> => { if (!message.content.trim()) return null; @@ -294,24 +264,62 @@ export function useAssistantChat({ lastMessage.role === "user" && lastMessage.content === message.content; - const newMessages: Message[] = isMessageAlreadyAdded + const apiMessagesForTurn: Message[] = isMessageAlreadyAdded ? messages : [...messages, message]; + const askInputsResponseEvent = opts?.askInputsResponse ?? null; + const optimisticResponseEvent = askInputsResponseEvent; + const userInputThinkingEvent = optimisticResponseEvent + ? ({ + type: "thinking" as const, + isStreaming: true, + } satisfies AssistantEvent) + : null; + const displayMessages: Message[] = optimisticResponseEvent + ? (() => { + const updated = messages.map((item) => ({ + ...item, + events: item.events ? [...item.events] : item.events, + })); + for (let i = updated.length - 1; i >= 0; i--) { + const current = updated[i]; + if (current.role !== "assistant") continue; + updated[i] = { + ...current, + events: [ + ...(current.events ?? []), + optimisticResponseEvent, + ...(userInputThinkingEvent ? [userInputThinkingEvent] : []), + ], + }; + return updated; + } + return updated; + })() + : apiMessagesForTurn; - setMessages([ - ...newMessages, - { role: "assistant", content: "", annotations: [], events: [] }, - ]); + setMessages( + optimisticResponseEvent + ? displayMessages + : [ + ...displayMessages, + { role: "assistant", content: "", citations: [], events: [] }, + ], + ); let streamedChatId: string | null = null; - eventsRef.current = []; + eventsRef.current = optimisticResponseEvent + ? ([...displayMessages] + .reverse() + .find((item) => item.role === "assistant")?.events ?? []) + : []; const controller = new AbortController(); abortControllerRef.current = controller; try { - const apiMessages = newMessages.map((currentMessage) => ({ + const apiMessages = apiMessagesForTurn.map((currentMessage) => ({ role: currentMessage.role, content: currentMessage.content, files: currentMessage.files, @@ -348,12 +356,14 @@ export function useAssistantChat({ : undefined, attached_documents: attachedDocs.length > 0 ? attachedDocs : undefined, + ask_inputs_response: opts?.askInputsResponse, signal: controller.signal, }) : streamChat({ messages: apiMessages, chat_id: chatId, model, + ask_inputs_response: opts?.askInputsResponse, signal: controller.signal, })); @@ -408,18 +418,11 @@ export function useAssistantChat({ { type: "error", message }, ]; const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - events: snapshot, - error: message, - }; - } - return updated; - }); + updateLatestAssistantMessage((assistantMessage) => ({ + ...assistantMessage, + events: snapshot, + error: message, + })); setIsResponseLoading(false); setIsLoadingCitations(false); continue; @@ -451,17 +454,10 @@ export function useAssistantChat({ }, ]; const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - events: snapshot, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: snapshot, + })); } else { const nextEvents = [...events]; nextEvents[nextEvents.length - 1] = { @@ -471,17 +467,10 @@ export function useAssistantChat({ }; eventsRef.current = nextEvents; const snapshot = [...nextEvents]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - events: snapshot, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: snapshot, + })); } continue; } @@ -516,17 +505,10 @@ export function useAssistantChat({ ]; } const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - events: snapshot, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: snapshot, + })); continue; } @@ -543,17 +525,10 @@ export function useAssistantChat({ ]; } const snapshot = [...eventsRef.current]; - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - events: snapshot, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + events: snapshot, + })); pushThinkingPlaceholder(); continue; } @@ -904,6 +879,85 @@ export function useAssistantChat({ continue; } + if (data.type === "ask_inputs") { + const rawItems = Array.isArray(data.items) + ? (data.items as unknown[]) + : []; + const items = rawItems.reduce<Extract< + AssistantEvent, + { type: "ask_inputs" } + >["items"]>((acc, item, index) => { + if (!item || typeof item !== "object") return acc; + const row = item as Record<string, unknown>; + const id = + typeof row.id === "string" && row.id.trim() + ? row.id.trim() + : `input-${index + 1}`; + if (row.kind === "choice") { + const options = Array.isArray(row.options) + ? (row.options as unknown[]).flatMap((option) => { + if (!option || typeof option !== "object") return []; + const optionRow = option as Record<string, unknown>; + const value = + typeof optionRow.value === "string" + ? optionRow.value + : typeof optionRow.label === "string" + ? optionRow.label + : ""; + if (!value.trim()) return []; + return [ + { + value, + }, + ]; + }) + : []; + acc.push({ + id, + kind: "choice" as const, + question: + typeof row.question === "string" + ? row.question + : "Please choose an option.", + options, + allow_other: row.allow_other !== false, + other_label: + typeof row.other_label === "string" + ? row.other_label + : "Other", + response_prefix: + typeof row.response_prefix === "string" + ? row.response_prefix + : undefined, + }); + return acc; + } + if (row.kind === "documents") { + const documentTypes = Array.isArray(row.document_types) + ? (row.document_types as unknown[]) + .filter((type): type is string => typeof type === "string") + .map((type) => type.trim()) + .filter(Boolean) + : []; + acc.push({ + id, + kind: "documents" as const, + document_types: documentTypes, + response_prefix: + typeof row.response_prefix === "string" + ? row.response_prefix + : undefined, + }); + return acc; + } + return acc; + }, []); + if (items.length > 0) { + pushEvent({ type: "ask_inputs", items }); + } + continue; + } + if (data.type === "doc_read") { updateMatchingEvent( (e) => @@ -1096,41 +1150,27 @@ export function useAssistantChat({ ? data.status : "final"; const incoming = (data.citations ?? - []) as CitationAnnotation[]; + []) as Citation[]; if (status === "started" || status === "partial") { - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - annotations: incoming, - citationStatus: status, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + citations: incoming, + citationStatus: status, + })); continue; } // End-of-stream signal — scrub any lingering // placeholders so they don't persist into the // finalised message. First finalize content so adding - // annotations cannot re-render the markdown/citation view + // citations cannot re-render the markdown/citation view // against a streaming block. finalizeStreamingContent(); clearStreamingPlaceholders(); - setMessages((prev) => { - const updated = [...prev]; - const last = updated[updated.length - 1]; - if (last?.role === "assistant") { - updated[updated.length - 1] = { - ...last, - annotations: incoming, - citationStatus: incoming.length ? "final" : undefined, - }; - } - return updated; - }); + updateLatestAssistantMessage((message) => ({ + ...message, + citations: incoming, + citationStatus: incoming.length ? "final" : undefined, + })); continue; } } catch (e) { @@ -1166,7 +1206,7 @@ export function useAssistantChat({ await loadChats(); const finalChatIdForTitle = streamedChatId || chatId || null; - if (finalChatIdForTitle && newMessages.length === 1) { + if (finalChatIdForTitle && apiMessagesForTurn.length === 1) { const titleParts = [message.content]; if (message.workflow) titleParts.push(`Workflow: ${message.workflow.title}`); @@ -1184,15 +1224,19 @@ export function useAssistantChat({ finalizeStreamingReasoning(); eventsRef.current = appendCancellationEvent(eventsRef.current); setMessages((prev) => { - const last = prev[prev.length - 1]; - if (last?.role === "assistant") { - const updated = [...prev]; + const assistantIndex = [...prev] + .map((message, index) => ({ message, index })) + .reverse() + .find(({ message }) => message.role === "assistant")?.index; + if (assistantIndex !== undefined) { + const assistantMessage = prev[assistantIndex]; const events = appendCancellationEvent( - last.events ?? eventsRef.current, + assistantMessage.events ?? eventsRef.current, ); eventsRef.current = events; - updated[updated.length - 1] = { - ...last, + const updated = [...prev]; + updated[assistantIndex] = { + ...assistantMessage, events, }; return updated; @@ -1214,11 +1258,14 @@ export function useAssistantChat({ ? error.message : "Sorry, something went wrong."; setMessages((prev) => { - const last = prev[prev.length - 1]; - if (last?.role === "assistant") { + const assistantIndex = [...prev] + .map((message, index) => ({ message, index })) + .reverse() + .find(({ message }) => message.role === "assistant")?.index; + if (assistantIndex !== undefined) { const updated = [...prev]; - updated[updated.length - 1] = { - ...last, + updated[assistantIndex] = { + ...updated[assistantIndex], error: errorMessage, }; return updated; diff --git a/frontend/src/app/hooks/useDocumentVersions.ts b/frontend/src/app/hooks/useDocumentVersions.ts deleted file mode 100644 index b5f3af2..0000000 --- a/frontend/src/app/hooks/useDocumentVersions.ts +++ /dev/null @@ -1,98 +0,0 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { supabase } from "@/lib/supabase"; - -export interface DocumentVersionRow { - id: string; - version_number: number | null; - source: - | "upload" - | "assistant_edit" - | "user_accept" - | "user_reject" - | "generated"; - created_at: string; -} - -export interface DocumentVersionsResult { - versions: DocumentVersionRow[]; - currentVersionId: string | null; - loading: boolean; - error: string | null; - /** Refetch externally; used after accept/reject or new assistant edits. */ - refresh: () => void; -} - -/** - * Fetch the list of tracked versions for a document, with the numeric - * version_number we use in UI labels ("V1", "V2", …). - */ -export function useDocumentVersions( - documentId: string | null | undefined, - refreshKey?: number, -): DocumentVersionsResult { - const [versions, setVersions] = useState<DocumentVersionRow[]>([]); - const [currentVersionId, setCurrentVersionId] = useState<string | null>( - null, - ); - const [loading, setLoading] = useState(false); - const [error, setError] = useState<string | null>(null); - const [tick, setTick] = useState(0); - - useEffect(() => { - if (!documentId) { - setVersions([]); - setCurrentVersionId(null); - return; - } - let cancelled = false; - setLoading(true); - setError(null); - - (async () => { - try { - const { - data: { session }, - } = await supabase.auth.getSession(); - const token = session?.access_token; - const apiBase = - process.env.NEXT_PUBLIC_API_BASE_URL ?? - "http://localhost:3001"; - const resp = await fetch( - `${apiBase}/single-documents/${documentId}/versions`, - { - headers: token - ? { Authorization: `Bearer ${token}` } - : {}, - }, - ); - if (!resp.ok) throw new Error(`HTTP ${resp.status}`); - const data = (await resp.json()) as { - versions: DocumentVersionRow[]; - current_version_id: string | null; - }; - if (cancelled) return; - setVersions(data.versions ?? []); - setCurrentVersionId(data.current_version_id ?? null); - } catch (e) { - if (!cancelled) - setError(e instanceof Error ? e.message : String(e)); - } finally { - if (!cancelled) setLoading(false); - } - })(); - - return () => { - cancelled = true; - }; - }, [documentId, refreshKey, tick]); - - return { - versions, - currentVersionId, - loading, - error, - refresh: () => setTick((t) => t + 1), - }; -} diff --git a/frontend/src/app/hooks/useFetchSingleDoc.ts b/frontend/src/app/hooks/useFetchSingleDoc.ts index c2630c6..c6fc616 100644 --- a/frontend/src/app/hooks/useFetchSingleDoc.ts +++ b/frontend/src/app/hooks/useFetchSingleDoc.ts @@ -4,16 +4,25 @@ import { useEffect, useRef, useState } from "react"; import { supabase } from "@/lib/supabase"; /** - * /display returns either PDF bytes (when the active version has a PDF - * rendition) or raw DOCX bytes otherwise. Reporting the type lets the - * caller swap between DocView (PDF.js) and DocxView (docx-preview) - * accordingly. + * /display returns PDF bytes (when the active version has a PDF rendition), + * raw spreadsheet bytes (xlsx/xlsm/xls — never converted to PDF), or raw DOCX + * bytes otherwise. Reporting the type lets the caller swap between PdfView + * (PDF.js), SpreadsheetView (Fortune-sheet), and DocxView (docx-preview). */ export type DocResult = | { type: "pdf"; buffer: ArrayBuffer } + | { type: "spreadsheet"; buffer: ArrayBuffer } | { type: "docx" } | null; +/** Office spreadsheet content types served raw by /display. */ +function isSpreadsheetContentType(contentType: string): boolean { + return ( + contentType.includes("spreadsheetml") || // .xlsx + contentType.includes("ms-excel") // .xls / .xlsm + ); +} + export function useFetchSingleDoc( documentId: string | null | undefined, versionId?: string | null, @@ -65,6 +74,9 @@ export function useFetchSingleDoc( if (contentType.includes("application/pdf")) { const buffer = await response.arrayBuffer(); if (!cancelled) setResult({ type: "pdf", buffer }); + } else if (isSpreadsheetContentType(contentType)) { + const buffer = await response.arrayBuffer(); + if (!cancelled) setResult({ type: "spreadsheet", buffer }); } else { // Drain the body so the connection is reusable, but the // bytes are useless to the PDF viewer — the caller will diff --git a/frontend/src/app/lib/documentUploadValidation.ts b/frontend/src/app/lib/documentUploadValidation.ts index 5866a0e..aa80197 100644 --- a/frontend/src/app/lib/documentUploadValidation.ts +++ b/frontend/src/app/lib/documentUploadValidation.ts @@ -1,8 +1,18 @@ -export const SUPPORTED_DOCUMENT_ACCEPT = ".pdf,.docx,.doc"; +export const SUPPORTED_DOCUMENT_ACCEPT = + ".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt"; export const UNSUPPORTED_DOCUMENT_WARNING_MESSAGE = - "Unsupported file type. Only PDF, DOCX, and DOC files can be uploaded."; + "Unsupported file type. Only PDF, Word, Excel, and PowerPoint files can be uploaded."; -const SUPPORTED_DOCUMENT_EXTENSIONS = new Set(["pdf", "docx", "doc"]); +const SUPPORTED_DOCUMENT_EXTENSIONS = new Set([ + "pdf", + "docx", + "doc", + "xlsx", + "xlsm", + "xls", + "pptx", + "ppt", +]); export function isSupportedDocumentFile(file: File): boolean { const extension = file.name.split(".").pop()?.toLowerCase(); diff --git a/frontend/src/app/lib/mikeApi.ts b/frontend/src/app/lib/mikeApi.ts index 0356a4b..7b56ffa 100644 --- a/frontend/src/app/lib/mikeApi.ts +++ b/frontend/src/app/lib/mikeApi.ts @@ -8,12 +8,15 @@ import type { AssistantEvent, Chat, ChatDetailOut, - CitationAnnotation, + Citation, Document, Folder, Message, + OpenSourceWorkflowContributorMode, + OpenSourceWorkflowResponse, Project, Workflow, + WorkflowContributor, TabularReview, TabularReviewDetailOut, } from "@/app/components/shared/types"; @@ -26,7 +29,7 @@ interface ServerMessage { content: string | AssistantEvent[] | null; files?: { filename: string; document_id?: string }[] | null; workflow?: { id: string; title: string } | null; - annotations?: CitationAnnotation[] | null; + citations?: Citation[] | null; created_at: string; } interface ServerChatDetailOut { @@ -166,12 +169,13 @@ export async function listProjects(): Promise<Project[]> { export async function createProject( name: string, cm_number?: string, + practice?: string, shared_with?: string[], ): Promise<Project> { return apiRequest<Project>("/projects", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ name, cm_number, shared_with }), + body: JSON.stringify({ name, cm_number, practice, shared_with }), }); } @@ -226,10 +230,24 @@ export interface UserProfile { apiKeyStatus: ApiKeyStatus; } +export interface UserLookupResult { + exists: boolean; + email: string; + display_name: string | null; +} + export async function getUserProfile(): Promise<UserProfile> { return apiRequest<UserProfile>("/user/profile"); } +export async function lookupUserByEmail( + email: string, +): Promise<UserLookupResult> { + return apiRequest<UserLookupResult>( + `/user/lookup?email=${encodeURIComponent(email)}`, + ); +} + export async function updateUserProfile(payload: { displayName?: string | null; organisation?: string | null; @@ -411,6 +429,7 @@ export async function updateProject( payload: { name?: string; cm_number?: string; + practice?: string | null; shared_with?: string[]; }, ): Promise<Project> { @@ -750,6 +769,7 @@ export async function getChat(chatId: string): Promise<ChatDetailOut> { const messages: Message[] = raw.messages.map((m) => { if (m.role === "user") { return { + id: m.id, role: "user", content: typeof m.content === "string" ? m.content : "", files: m.files ?? undefined, @@ -760,13 +780,14 @@ export async function getChat(chatId: string): Promise<ChatDetailOut> { ? (m.content as AssistantEvent[]) : undefined; return { + id: m.id, role: "assistant", content: events ?.filter((e) => e.type === "content") .map((e) => (e as { type: "content"; text: string }).text) .join("") ?? "", - annotations: m.annotations ?? undefined, + citations: m.citations ?? undefined, events, }; }); @@ -832,6 +853,23 @@ export async function streamChat(payload: { chat_id?: string; project_id?: string; model?: string; + ask_inputs_response?: { + responses: ( + | { + id: string; + kind: "choice"; + question: string; + answer?: string; + skipped?: boolean; + } + | { + id: string; + kind: "documents"; + filenames: string[]; + skipped?: boolean; + } + )[]; + }; signal?: AbortSignal; }): Promise<Response> { const { signal, ...body } = payload; @@ -862,6 +900,23 @@ export async function streamProjectChat(payload: { model?: string; displayed_doc?: { filename: string; document_id: string }; attached_documents?: { filename: string; document_id: string }[]; + ask_inputs_response?: { + responses: ( + | { + id: string; + kind: "choice"; + question: string; + answer?: string; + skipped?: boolean; + } + | { + id: string; + kind: "documents"; + filenames: string[]; + skipped?: boolean; + } + )[]; + }; signal?: AbortSignal; }): Promise<Response> { const { projectId, signal, ...body } = payload; @@ -1138,7 +1193,9 @@ export async function createWorkflow(payload: { type: "assistant" | "tabular"; prompt_md?: string; columns_config?: { index: number; name: string; prompt: string }[]; + language?: string | null; practice?: string | null; + jurisdictions?: string[] | null; }): Promise<Workflow> { return apiRequest<Workflow>("/workflows", { method: "POST", @@ -1153,7 +1210,9 @@ export async function updateWorkflow( title?: string; prompt_md?: string; columns_config?: { index: number; name: string; prompt: string }[]; + language?: string | null; practice?: string | null; + jurisdictions?: string[] | null; }, ): Promise<Workflow> { return apiRequest<Workflow>(`/workflows/${workflowId}`, { @@ -1167,6 +1226,23 @@ export async function deleteWorkflow(workflowId: string): Promise<void> { await apiRequest(`/workflows/${workflowId}`, { method: "DELETE" }); } +export async function openSourceWorkflow( + workflowId: string, + payload: { + contributor_mode: OpenSourceWorkflowContributorMode; + contributor?: WorkflowContributor | null; + }, +): Promise<OpenSourceWorkflowResponse> { + return apiRequest<OpenSourceWorkflowResponse>( + `/workflows/${workflowId}/open-source`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(payload), + }, + ); +} + export async function listHiddenWorkflows(): Promise<string[]> { return apiRequest<string[]>("/workflows/hidden"); } diff --git a/frontend/src/app/verify-mfa/page.tsx b/frontend/src/app/verify-mfa/page.tsx index 5fdb600..40ce74f 100644 --- a/frontend/src/app/verify-mfa/page.tsx +++ b/frontend/src/app/verify-mfa/page.tsx @@ -10,7 +10,7 @@ import { supabase } from "@/lib/supabase"; import { needsMfaVerification, VerificationCodeInput, -} from "@/app/components/shared/MfaVerificationPopup"; +} from "@/app/components/popups/MfaVerificationPopup"; import { markMfaVerifiedForGate } from "@/app/components/shared/MfaLoginGate"; type MfaFactor = { diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx deleted file mode 100644 index fd3a406..0000000 --- a/frontend/src/components/ui/badge.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" - -import { cn } from "@/lib/utils" - -const badgeVariants = cva( - "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", - { - variants: { - variant: { - default: - "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", - secondary: - "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", - destructive: - "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", - outline: - "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", - }, - }, - defaultVariants: { - variant: "default", - }, - } -) - -function Badge({ - className, - variant, - asChild = false, - ...props -}: React.ComponentProps<"span"> & - VariantProps<typeof badgeVariants> & { asChild?: boolean }) { - const Comp = asChild ? Slot : "span" - - return ( - <Comp - data-slot="badge" - className={cn(badgeVariants({ variant }), className)} - {...props} - /> - ) -} - -export { Badge, badgeVariants } diff --git a/frontend/src/components/ui/pill-button.tsx b/frontend/src/components/ui/pill-button.tsx new file mode 100644 index 0000000..89c4bdf --- /dev/null +++ b/frontend/src/components/ui/pill-button.tsx @@ -0,0 +1,50 @@ +"use client"; + +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { cn } from "@/lib/utils"; + +type PillButtonTone = "black" | "white" | "blue" | "danger"; +type PillButtonSize = "sm" | "normal"; + +type PillButtonProps = React.ComponentProps<"button"> & { + asChild?: boolean; + tone: PillButtonTone; + size?: PillButtonSize; +}; + +const toneClasses: Record<PillButtonTone, string> = { + black: "border-gray-700/40 bg-gray-950/88 text-white shadow-[0_3px_9px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(255,255,255,0.12),inset_0_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl hover:bg-gray-900/90 disabled:hover:bg-gray-950/88", + white: "border-transparent bg-transparent text-gray-700 shadow-[0_1px_3px_rgba(0,0,0,0.22),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(255,255,255,0.7)] hover:bg-gray-100 disabled:hover:bg-transparent", + blue: "border-blue-500/35 bg-blue-600/90 text-white shadow-[0_3px_9px_rgba(37,99,235,0.10),inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(255,255,255,0.16),inset_0_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl hover:bg-blue-600 disabled:hover:bg-blue-600/90", + danger: "border-red-700/35 bg-red-600/90 text-white shadow-[0_3px_9px_rgba(127,29,29,0.10),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(255,255,255,0.14),inset_0_-4px_9px_rgba(127,29,29,0.18)] backdrop-blur-xl hover:bg-red-600 disabled:hover:bg-red-600/90", +}; + +const sizeClasses: Record<PillButtonSize, string> = { + sm: "px-2 py-1 text-xs", + normal: "px-4 py-1.5 text-sm", +}; + +export function PillButton({ + asChild = false, + tone, + size = "sm", + type = "button", + className, + ...props +}: PillButtonProps) { + const Comp = asChild ? Slot : "button"; + + return ( + <Comp + type={asChild ? undefined : type} + className={cn( + "inline-flex items-center justify-center gap-1.5 rounded-full border font-medium transition-all active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100", + toneClasses[tone], + sizeClasses[size], + className, + )} + {...props} + /> + ); +} diff --git a/frontend/src/components/ui/text-search-widget.tsx b/frontend/src/components/ui/text-search-widget.tsx deleted file mode 100644 index 4740f45..0000000 --- a/frontend/src/components/ui/text-search-widget.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { Input } from "@/components/ui/input"; -import { ArrowUp, ArrowDown, X } from "lucide-react"; -import { useRef } from "react"; - -interface TextSearchWidgetProps { - isOpen: boolean; - onClose: () => void; - searchQuery: string; - onSearchChange: (query: string) => void; - currentMatchIdx: number; - matchCount: number; - setCurrentMatchIdx: (idx: number | ((prev: number) => number)) => void; - className?: string; -} - -export function TextSearchWidget({ - isOpen, - onClose, - searchQuery, - onSearchChange, - currentMatchIdx, - matchCount, - setCurrentMatchIdx, - className = "", -}: TextSearchWidgetProps) { - const searchInputRef = useRef<HTMLInputElement>(null); - - const handleNext = () => { - if (matchCount === 0) return; - setCurrentMatchIdx((prev) => (prev + 1) % matchCount); - }; - - const handlePrev = () => { - if (matchCount === 0) return; - setCurrentMatchIdx((prev) => (prev - 1 + matchCount) % matchCount); - }; - - if (!isOpen) return null; - - return ( - <div - className={`flex flex-col bg-white shadow-lg border border-gray-200 rounded-md overflow-hidden min-w-[300px] ${className}`} - > - <div className="flex items-center gap-1 p-1"> - <div className="flex-1 relative"> - <Input - ref={searchInputRef} - autoFocus - placeholder="Find" - value={searchQuery} - onChange={(e) => onSearchChange(e.target.value)} - className="h-8 text-sm w-full pr-[80px] rounded-sm border-gray-200 bg-gray-100/50 focus-visible:ring-0 focus-visible:border-blue-600 placeholder:text-gray-500" - onKeyDown={(e) => { - if (e.key === "Escape") { - onClose(); - onSearchChange(""); - } else if (e.key === "Enter") { - if (e.shiftKey) handlePrev(); - else handleNext(); - } - }} - /> - </div> - </div> - - {/* Results count and navigation */} - {searchQuery && ( - <div className="flex items-center justify-between px-2 pb-1 pt-0.5 text-xs text-gray-500"> - <span> - {matchCount > 0 - ? `${currentMatchIdx + 1} of ${matchCount}` - : "No results"} - </span> - <div className="flex items-center gap-1"> - <button - onClick={handlePrev} - disabled={matchCount === 0} - className="p-1 hover:bg-gray-100 rounded disabled:opacity-50" - > - <ArrowUp className="h-4 w-4" /> - </button> - <button - onClick={handleNext} - disabled={matchCount === 0} - className="p-1 hover:bg-gray-100 rounded disabled:opacity-50" - > - <ArrowDown className="h-4 w-4" /> - </button> - </div> - </div> - )} - </div> - ); -} diff --git a/frontend/src/lib/auth.ts b/frontend/src/lib/auth.ts deleted file mode 100644 index 6199490..0000000 --- a/frontend/src/lib/auth.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { NextRequest } from 'next/server'; - -/** - * Extract and validate user from Supabase JWT token - * Returns user info if valid, null if invalid or missing - * - * @param request NextRequest with Authorization header - * @returns User object with email and id, or null - */ -export async function getUserFromRequest(request: NextRequest): Promise<{ - email: string; - id: string; -} | null> { - try { - const authHeader = request.headers.get('Authorization'); - - if (!authHeader?.startsWith('Bearer ')) { - return null; - } - - const token = authHeader.substring(7); - - if (!token) { - return null; - } - - // Validate with Supabase - const { createClient } = await import('@supabase/supabase-js'); - const supabase = createClient( - process.env.NEXT_PUBLIC_SUPABASE_URL!, - process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY! - ); - - const { data: { user }, error } = await supabase.auth.getUser(token); - - if (error || !user) { - console.warn('[Auth] Invalid or expired token:', error?.message); - return null; - } - - if (!user.email) { - console.warn('[Auth] User has no email'); - return null; - } - - return { - email: user.email, - id: user.id - }; - } catch (error) { - console.error('[Auth] Error validating token:', error); - return null; - } -} diff --git a/frontend/src/lib/fileConverter.ts b/frontend/src/lib/fileConverter.ts deleted file mode 100644 index 6644133..0000000 --- a/frontend/src/lib/fileConverter.ts +++ /dev/null @@ -1,65 +0,0 @@ -import mammoth from "mammoth"; - -// Helper function to convert File to base64 data URL -const fileToBase64 = (file: File): Promise<string> => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = () => { - const result = reader.result as string; - resolve(result); - }; - reader.onerror = (error) => reject(error); - }); -}; - -export async function processFiles( - files: { name: string; file?: File }[] -): Promise<{ filename: string; data: string }[]> { - const processedFilesPromises = files - .filter((f) => f.file) - .map(async (f) => { - const file = f.file!; - let processedFile: File = file; - - // Apply conversions if needed - if ( - file.type === - "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || - file.name.endsWith(".docx") - ) { - processedFile = await convertDocxToText(file); - } else if ( - file.type === "text/plain" || - file.name.endsWith(".txt") || - file.name.endsWith(".doc") - ) { - processedFile = await convertToTextFile(file); - } - // PDFs and others are left as-is - - return { - filename: processedFile.name, - data: await fileToBase64(processedFile), - }; - }); - - return Promise.all(processedFilesPromises); -} - -async function convertDocxToText(file: File): Promise<File> { - const arrayBuffer = await file.arrayBuffer(); - const result = await mammoth.extractRawText({ arrayBuffer }); - const text = result.value; - return createTextFile(text, file.name); -} - -async function convertToTextFile(file: File): Promise<File> { - const text = await file.text(); - return createTextFile(text, file.name); -} - -function createTextFile(content: string, fileName: string): File { - const blob = new Blob([content], { type: "text/plain" }); - return new File([blob], fileName, { type: "text/plain" }); -} diff --git a/frontend/src/lib/label.ts b/frontend/src/lib/label.ts deleted file mode 100644 index e46cc23..0000000 --- a/frontend/src/lib/label.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Compute a display label from node components. - * This mirrors the backend format_lineage_label function. - */ - -const STRUCTURE_NODE_TYPES = [ - "subtitle", - "division", - "chapter", - "subchapter", - "part", - "subpart", - "article", - "subarticle", - "appendix", -] as const; - -type StructureNodeType = (typeof STRUCTURE_NODE_TYPES)[number]; -type CodeType = "title" | "section" | StructureNodeType | string; - -export interface NodeComponents { - code_type: CodeType; - identifier: string; -} - -export function computeLabel({ code_type, identifier }: NodeComponents): string { - return `${code_type} ${identifier}`; -} diff --git a/frontend/src/lib/slug.ts b/frontend/src/lib/slug.ts deleted file mode 100644 index bf9a47f..0000000 --- a/frontend/src/lib/slug.ts +++ /dev/null @@ -1,57 +0,0 @@ -/** Encode a tree slug containing `/` so it can live inside a Next.js dynamic segment. */ -export function encodeNodeSlug(slug: string): string { - if (!slug) { - return ""; - } - return slug.replace(/\//g, "~"); -} - -/** Decode the slug from the route segment back into its canonical form. */ -export function decodeNodeSlug(segment: string): string { - return segment.replace(/~/g, "/"); -} - -/** - * Convert a backend slug to a frontend URL path. - * Backend slugs match frontend URLs exactly now. - * Examples: - * "usc/title-49" -> "/usc/title-49" - * "usc/title-49/subtitle-IV/part-B/chapter-145" -> "/usc/title-49/subtitle-IV/part-B/chapter-145" - * "usc/title-49/14501" -> "/usc/title-49/14501" - */ -const UNICODE_DASH_REGEX = - /[\u2010\u2011\u2012\u2013\u2014\u2015\u2212\uFE58\uFE63\uFF0D]/g; - -function normalizeSlugDashes(value: string): string { - return value.replace(UNICODE_DASH_REGEX, "-"); -} - -export function slugToPath(slug: string): string { - if (!slug) { - return ""; - } - const normalized = normalizeSlugDashes(slug); - - // Handle CFR slugs: "cfr/title-1/..." -> "/sources/cfr/title-1/..." - if (normalized.startsWith("cfr/")) { - const cleanSlug = normalized.replace(/^cfr\//, ""); - return `/sources/cfr/${cleanSlug}`; - } - - // Handle USC slugs: "usc/title-05" -> "/sources/usc/title-05" - const cleanSlug = normalized.replace(/^usc\//, ""); - return `/sources/usc/${cleanSlug}`; -} - -/** - * Build a section URL from title and section numbers. - * Format: "/sources/usc/title-{number}/{section_number}" - */ -export function buildSectionUrl( - titleNumber: number, - sectionNumber: string, -): string { - const paddedTitle = titleNumber.toString().padStart(2, "0"); - const normalizedSection = normalizeSlugDashes(sectionNumber); - return `/sources/usc/title-${paddedTitle}/${normalizedSection}`; -} diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts deleted file mode 100644 index 1983c75..0000000 --- a/frontend/src/lib/types.ts +++ /dev/null @@ -1,81 +0,0 @@ -export interface TitleSummary { - title_number: number; - heading: string; - citation: string; - slug: string; -} - -export interface SectionNeighbor { - slug: string; - citation?: string | null; - heading?: string | null; - title_number: number; - section_number?: string | null; -} - -export interface ChapterNavigation { - label: string; - slug: string; - sections: SectionNeighbor[]; -} - -export interface CrossReference { - to_citation: string; - resolved: boolean; - to_slug?: string | null; - context_snippet?: string | null; -} - -export interface SectionNote { - title: string; - html: string; -} - -export interface BreadcrumbNode { - id: string; - slug: string; - code_type: string; - identifier?: string | null; - heading?: string | null; -} - -export interface SectionDetail { - id: string; - slug: string; - citation: string; - heading?: string | null; - title_number: number; - section_number: string; - path: BreadcrumbNode[]; - text_html: string; - text_plain?: string | null; - text_markdown?: string | null; - effective_start: string; - effective_end?: string | null; - source_document?: string | null; - source_note?: string | null; - neighbors: { - previous?: SectionNeighbor | null; - next?: SectionNeighbor | null; - }; - chapter_navigation?: ChapterNavigation | null; - cross_references: CrossReference[]; - notes: SectionNote[]; - chapter_number?: string | null; -} - -export interface SearchResultItem { - slug: string; - citation: string; - heading?: string | null; - title_number: number; - section_number: string; - snippet?: string | null; -} - -export interface SearchResponse { - total: number; - limit: number; - offset: number; - results: SearchResultItem[]; -} diff --git a/frontend/src/scripts/convert-courts-to-ts.js b/frontend/src/scripts/convert-courts-to-ts.js deleted file mode 100644 index 6f469e2..0000000 --- a/frontend/src/scripts/convert-courts-to-ts.js +++ /dev/null @@ -1,89 +0,0 @@ -const fs = require("fs"); -const path = require("path"); - -// Read the JSON file with comments -const jsonPath = path.join(__dirname, "../hooks/google-scholar-courts.json"); -const content = fs.readFileSync(jsonPath, "utf8"); - -// Remove comments from JSON (simple approach - remove lines starting with //) -const lines = content.split("\n"); -const cleanedLines = lines.filter((line) => { - const trimmed = line.trim(); - return !trimmed.startsWith("//"); -}); - -// Also remove trailing commas before closing braces/brackets (common JSON issue) -let cleanedContent = cleanedLines.join("\n"); -cleanedContent = cleanedContent.replace(/,(\s*[}\]])/g, "$1"); - -// Parse the cleaned JSON -const data = JSON.parse(cleanedContent); - -// Generate TypeScript file content -let tsContent = `// Court data types and constants -// This file is auto-generated from google-scholar-courts.json - -export interface SubCourt { - id: string; - value: string; - label: string; -} - -export interface StateCourt { - id: string; - value: string; - label: string; - subCourts: SubCourt[]; -} - -export interface Circuit { - id: string; - value: string; - label: string; - subCourts: SubCourt[]; -} - -export interface FederalCourts { - supreme: SubCourt[]; - specialist: SubCourt[]; - circuits: Circuit[]; -} - -export interface CourtsData { - stateCourts: StateCourt[]; - federalCourts: FederalCourts; -} - -// Court data -export const courtsData: CourtsData = ${JSON.stringify(data, null, 4)}; - -export const stateCourtsData = courtsData.stateCourts; -export const federalCourtsData = courtsData.federalCourts; - -// Helper functions -export function getCircuits(): Circuit[] { - return federalCourtsData.circuits; -} - -export function getCircuitCourts(circuitLabel: string): SubCourt[] { - const circuit = federalCourtsData.circuits.find( - (c) => c.label === circuitLabel - ); - return circuit?.subCourts || []; -} - -export function getNationalCourts(): SubCourt[] { - return federalCourtsData.supreme; -} - -export function getSpecialistCourts(): SubCourt[] { - return federalCourtsData.specialist || []; -} -`; - -// Write to court-data.ts -const outputPath = path.join(__dirname, "../data/court-data.ts"); -fs.writeFileSync(outputPath, tsContent, "utf8"); - -console.log("Successfully converted court data to TypeScript!"); -console.log(`Output: ${outputPath}`); diff --git a/frontend/src/types/luckyexcel.d.ts b/frontend/src/types/luckyexcel.d.ts new file mode 100644 index 0000000..b64468f --- /dev/null +++ b/frontend/src/types/luckyexcel.d.ts @@ -0,0 +1,30 @@ +declare module "luckyexcel" { + export interface LuckyExcelSheet { + name: string; + celldata?: unknown[]; + index?: string; + order?: number; + [key: string]: unknown; + } + + export interface LuckyExcelJson { + sheets: LuckyExcelSheet[]; + info?: { name?: string; creator?: string }; + } + + type TransformCallback = ( + exportJson: LuckyExcelJson, + luckysheetfile: string, + ) => void; + + const LuckyExcel: { + transformExcelToLucky(file: File | Blob, callback: TransformCallback): void; + transformExcelToLuckyByUrl( + url: string, + name: string, + callback: TransformCallback, + ): void; + }; + + export default LuckyExcel; +} diff --git a/scripts/build-workflows.js b/scripts/build-workflows.js new file mode 100644 index 0000000..f2a4087 --- /dev/null +++ b/scripts/build-workflows.js @@ -0,0 +1,300 @@ +#!/usr/bin/env node + +const fs = require("fs"); +const path = require("path"); + +const ROOT_DIR = path.resolve(__dirname, ".."); +const WORKSPACE_DIR = path.resolve(ROOT_DIR, ".."); +const WORKFLOWS_DIR = path.join(WORKSPACE_DIR, "mike-workflows"); +const BACKEND_OUT = path.join(ROOT_DIR, "backend/src/lib/systemWorkflows.ts"); +const LANDING_OUT = path.join(ROOT_DIR, "landing/app/generated-workflows.ts"); + +function readText(filePath) { + return fs.readFileSync(filePath, "utf8"); +} + +function readJson(filePath) { + try { + return JSON.parse(readText(filePath)); + } catch (error) { + throw new Error(`${relative(filePath)} is not valid JSON: ${error.message}`); + } +} + +function relative(filePath) { + return path.relative(WORKSPACE_DIR, filePath); +} + +function fail(message) { + throw new Error(message); +} + +function assertString(value, label) { + if (typeof value !== "string" || value.trim() === "") { + fail(`${label} must be a non-empty string`); + } +} + +function assertOptionalString(value, label) { + if (value === undefined || value === null) return; + if (typeof value !== "string") fail(`${label} must be a string`); +} + +function assertOptionalStringArray(value, label) { + if (value === undefined || value === null) return; + if (!Array.isArray(value) || value.some((item) => typeof item !== "string")) { + fail(`${label} must be an array of strings`); + } +} + +function normalizeContributors(value, label) { + if (!Array.isArray(value) || value.length === 0) { + fail(`${label} must be a non-empty array`); + } + return value.map((contributor, index) => { + const contributorLabel = `${label}[${index}]`; + if (!contributor || typeof contributor !== "object" || Array.isArray(contributor)) { + fail(`${contributorLabel} must be an object`); + } + assertString(contributor.name, `${contributorLabel}.name`); + assertOptionalString(contributor.organisation, `${contributorLabel}.organisation`); + assertOptionalString(contributor.role, `${contributorLabel}.role`); + assertOptionalString(contributor.linkedin, `${contributorLabel}.linkedin`); + return { + name: contributor.name.trim(), + organisation: contributor.organisation?.trim() || null, + role: contributor.role?.trim() || null, + linkedin: contributor.linkedin?.trim() || null, + }; + }); +} + +function assertColumnConfig(columns, label) { + if (!Array.isArray(columns) || columns.length === 0) { + fail(`${label}.columns_config must be a non-empty array`); + } + + columns.forEach((column, index) => { + const columnLabel = `${label}.columns_config[${index}]`; + if (!column || typeof column !== "object" || Array.isArray(column)) { + fail(`${columnLabel} must be an object`); + } + if (!Number.isInteger(column.index)) { + fail(`${columnLabel}.index must be an integer`); + } + assertString(column.name, `${columnLabel}.name`); + assertString(column.prompt, `${columnLabel}.prompt`); + assertOptionalString(column.format, `${columnLabel}.format`); + }); +} + +function readWorkflow(category, dirent) { + const slug = dirent.name; + const workflowDir = path.join(WORKFLOWS_DIR, category, slug); + const metadataPath = path.join(workflowDir, "metadata.json"); + if (!fs.existsSync(metadataPath)) { + fail(`${relative(metadataPath)} is required`); + } + const metadata = readJson(metadataPath); + const label = relative(metadataPath); + const id = `builtin-${slug}`; + + if (metadata.id !== undefined) { + fail(`${label}.id is not supported; the ID is generated from the directory name`); + } + const expectedSchema = "../../schema/workflow-metadata.schema.json"; + if (metadata.$schema !== expectedSchema) { + fail(`${label}.$schema must be "${expectedSchema}"`); + } + assertString(metadata.title, `${label}.title`); + const contributors = normalizeContributors( + metadata.contributors, + `${label}.contributors`, + ); + assertString(metadata.language, `${label}.language`); + assertString(metadata.version, `${label}.version`); + if (metadata.type !== category) { + fail(`${label}.type must be "${category}"`); + } + if (metadata.category !== undefined) { + fail(`${label}.category is not supported`); + } + if (metadata.action !== undefined) { + fail(`${label}.action is not supported`); + } + assertOptionalString(metadata.practice, `${label}.practice`); + assertOptionalStringArray(metadata.jurisdictions, `${label}.jurisdictions`); + if (metadata.order !== undefined && !Number.isInteger(metadata.order)) { + fail(`${label}.order must be an integer`); + } + + if (category === "assistant") { + if (metadata.prompt !== undefined) { + fail(`${label}.prompt is not supported; use SKILL.md`); + } + const promptPath = path.join(workflowDir, "SKILL.md"); + if (!fs.existsSync(promptPath)) { + fail(`${relative(promptPath)} is required for assistant workflows`); + } + + if (metadata.execution_prompt !== undefined) { + fail(`${label}.execution_prompt is not supported; use SKILL.md`); + } + const tableConfigPath = path.join(workflowDir, "table-config.json"); + if (fs.existsSync(tableConfigPath)) { + fail(`${relative(tableConfigPath)} is only supported for tabular workflows`); + } + const promptMd = readText(promptPath).trimEnd(); + return { + id, + title: metadata.title, + type: metadata.type, + contributors, + language: metadata.language, + version: metadata.version, + practice: metadata.practice ?? null, + jurisdictions: metadata.jurisdictions ?? null, + order: metadata.order ?? 0, + prompt_md: promptMd, + columns_config: null, + }; + } + + let promptMd = null; + if (metadata.prompt !== undefined) { + fail(`${label}.prompt is not supported; use SKILL.md`); + } + const promptPath = path.join(workflowDir, "SKILL.md"); + if (fs.existsSync(promptPath)) { + promptMd = readText(promptPath).trimEnd(); + } + if (metadata.execution_prompt !== undefined) { + fail(`${label}.execution_prompt is not supported; use SKILL.md`); + } + if (metadata.columns_config !== undefined) { + fail(`${label}.columns_config is not supported; use table-config.json`); + } + const tableConfigPath = path.join(workflowDir, "table-config.json"); + if (!fs.existsSync(tableConfigPath)) { + fail(`${relative(tableConfigPath)} is required for tabular workflows`); + } + const tableConfig = readJson(tableConfigPath); + const tableConfigLabel = relative(tableConfigPath); + const expectedTableConfigSchema = "../../schema/table-config.schema.json"; + if (tableConfig.$schema !== expectedTableConfigSchema) { + fail(`${tableConfigLabel}.$schema must be "${expectedTableConfigSchema}"`); + } + assertColumnConfig(tableConfig.columns_config, tableConfigLabel); + + return { + id, + title: metadata.title, + type: metadata.type, + contributors, + language: metadata.language, + version: metadata.version, + practice: metadata.practice ?? null, + jurisdictions: metadata.jurisdictions ?? null, + order: metadata.order ?? 0, + prompt_md: promptMd, + columns_config: tableConfig.columns_config, + }; +} + +function loadWorkflows() { + const workflows = []; + const seenIds = new Set(); + + for (const category of ["assistant", "tabular"]) { + const categoryDir = path.join(WORKFLOWS_DIR, category); + if (!fs.existsSync(categoryDir)) continue; + + const entries = fs + .readdirSync(categoryDir, { withFileTypes: true }) + .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith(".")) + .sort((a, b) => a.name.localeCompare(b.name)); + + for (const entry of entries) { + const workflow = readWorkflow(category, entry); + if (seenIds.has(workflow.id)) { + fail(`Duplicate workflow id: ${workflow.id}`); + } + seenIds.add(workflow.id); + workflows.push(workflow); + } + } + + return workflows.sort((a, b) => { + if (a.order !== b.order) return a.order - b.order; + return a.id.localeCompare(b.id); + }); +} + +function stripGeneratorFields(workflow) { + const { order, ...publicWorkflow } = workflow; + return { + user_id: null, + is_system: true, + created_at: "", + ...publicWorkflow, + }; +} + +function formatTs(value) { + return JSON.stringify(value, null, 4); +} + +function writeGeneratedFiles(workflows) { + const systemWorkflows = workflows.map(stripGeneratorFields); + const systemAssistantWorkflows = workflows + .filter((workflow) => workflow.type === "assistant") + .map((workflow) => ({ + id: workflow.id, + title: workflow.title, + prompt_md: workflow.prompt_md, + })); + const landingWorkflows = workflows.map((workflow) => ({ + id: workflow.id, + title: workflow.title, + type: workflow.type, + contributors: workflow.contributors, + language: workflow.language, + version: workflow.version, + practice: workflow.practice, + jurisdictions: workflow.jurisdictions, + order: workflow.order, + skill: workflow.prompt_md, + columnCount: workflow.columns_config?.length ?? 0, + columns: workflow.columns_config ?? [], + })); + + const backendText = `// This file is generated by scripts/build-workflows.js. Do not edit it directly.\n\nexport type SystemWorkflowContributor = {\n name: string;\n organisation: string | null;\n role: string | null;\n linkedin: string | null;\n};\n\nexport type SystemWorkflow = {\n id: string;\n user_id: null;\n is_system: true;\n created_at: string;\n title: string;\n type: "assistant" | "tabular";\n contributors: SystemWorkflowContributor[];\n language: string;\n version: string;\n practice: string | null;\n jurisdictions: string[] | null;\n prompt_md: string | null;\n columns_config: { index: number; name: string; format?: string; prompt: string; tags?: string[] }[] | null;\n};\n\nexport const SYSTEM_WORKFLOWS: SystemWorkflow[] = ${formatTs(systemWorkflows)};\n\nexport const SYSTEM_WORKFLOW_IDS = new Set(SYSTEM_WORKFLOWS.map((wf) => wf.id));\n\nexport const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; prompt_md: string }[] = ${formatTs(systemAssistantWorkflows)};\n`; + + const landingText = `// This file is generated by scripts/build-workflows.js. Do not edit it directly.\nimport type { LandingWorkflow } from "./workflow-browser";\n\nexport const LANDING_WORKFLOWS: LandingWorkflow[] = ${formatTs(landingWorkflows)};\n`; + + fs.writeFileSync(BACKEND_OUT, backendText); + if (fs.existsSync(path.dirname(LANDING_OUT))) { + fs.writeFileSync(LANDING_OUT, landingText); + } +} + +function main() { + if (!fs.existsSync(WORKFLOWS_DIR)) { + fail(`Workflow source directory not found: ${relative(WORKFLOWS_DIR)}`); + } + + const workflows = loadWorkflows(); + if (workflows.length === 0) { + fail("No workflows found"); + } + + writeGeneratedFiles(workflows); + console.log(`Generated ${workflows.length} system workflows.`); +} + +try { + main(); +} catch (error) { + console.error(error.message); + process.exit(1); +} From 82dcaefc430fe823499480a2ad669d51dad738d4 Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Wed, 8 Jul 2026 18:27:28 +0800 Subject: [PATCH 03/21] feat: workflow, UI and document support updates --- CONTRIBUTING.md | 7 +- backend/bun.lock | 3 + ...29_01_workflow_open_source_submissions.sql | 1 - .../20260703_01_user_profile_email.sql | 41 + .../20260703_02_project_practice.sql | 84 + .../20260704_01_chat_message_citations.sql | 19 + backend/package.json | 1 - backend/src/lib/chat/contextBuilders.ts | 6 +- backend/src/lib/chat/prompts.ts | 1 + backend/src/lib/chat/tools/toolDispatcher.ts | 2 +- backend/src/lib/chat/types.ts | 2 +- backend/src/lib/spreadsheet.ts | 25 +- backend/src/lib/systemWorkflows.ts | 1666 +++++++++-------- backend/src/lib/userLookup.ts | 113 ++ backend/src/routes/workflows.ts | 138 +- frontend/bun.lock | 35 +- frontend/package.json | 1 - .../app/(pages)/account/AccountSection.tsx | 2 +- .../src/app/(pages)/account/AccountToggle.tsx | 2 +- .../src/app/(pages)/account/accountStyles.ts | 2 +- .../src/app/(pages)/account/api-keys/page.tsx | 4 +- .../app/(pages)/account/connectors/page.tsx | 2 +- .../src/app/(pages)/account/features/page.tsx | 2 +- frontend/src/app/(pages)/account/layout.tsx | 2 +- .../src/app/(pages)/account/models/page.tsx | 4 +- frontend/src/app/(pages)/account/page.tsx | 8 +- .../app/(pages)/account/privacy-data/page.tsx | 2 +- .../src/app/(pages)/account/security/page.tsx | 6 +- frontend/src/app/(pages)/layout.tsx | 2 +- .../[id]/assistant/chat/[chatId]/page.tsx | 9 +- .../(pages)/projects/[id]/assistant/page.tsx | 2 +- .../projects/[id]/tabular-reviews/page.tsx | 2 +- .../src/app/(pages)/tabular-reviews/page.tsx | 2 +- .../app/components/account/NewMcpModal.tsx | 333 ++++ .../app/components/assistant/AddDocButton.tsx | 122 +- .../components/assistant/AskInputPopup.tsx | 2 +- .../assistant/AssistantSidePanel.tsx | 2 +- .../app/components/assistant/CaseLawPanel.tsx | 4 +- .../app/components/assistant/ChatInput.tsx | 17 +- .../assistant/CitationQuotesHeader.tsx | 303 +++ .../src/app/components/assistant/DocPanel.tsx | 402 ++++ .../src/app/components/assistant/EditCard.tsx | 4 +- .../app/components/assistant/InitialView.tsx | 6 +- .../app/components/assistant/ModelToggle.tsx | 2 +- .../assistant/PreResponseWrapper.tsx | 80 + .../assistant/TrackedChangeHeader.tsx | 229 +++ .../assistant/message/CitationSources.tsx | 206 ++ .../assistant/message/EditCardsSection.tsx | 289 +++ .../assistant/message/EventBlocks.tsx | 701 +++++++ .../assistant/message/MarkdownContent.tsx | 278 +++ .../assistant/message/ResponseStatus.tsx | 53 + .../assistant/message/citationUtils.ts | 36 + .../assistant/message/eventUtils.ts | 33 + .../assistant/message/messageStyles.ts | 12 + .../assistant/message/useSmoothedReveal.ts | 60 + .../{ => app}/components/chat/mike-icon.tsx | 0 .../components/modals/AddDocumentsModal.tsx | 221 +++ .../components/modals/AddProjectDocsModal.tsx | 250 +++ frontend/src/app/components/modals/Modal.tsx | 203 ++ .../app/components/modals/ModalFieldLabel.tsx | 35 + .../modals/ModalSegmentedToggle.tsx | 71 + .../src/app/components/modals/ModalSelect.tsx | 146 ++ .../app/components/modals/ModalTextInput.tsx | 28 + .../app/components/modals/ModalTextarea.tsx | 22 + .../src/app/components/modals/PeopleModal.tsx | 435 +++++ .../components/modals/ProjectPickerModal.tsx | 136 ++ .../components/popups/ApiKeyMissingPopup.tsx | 45 + .../app/components/popups/ConfirmPopup.tsx | 114 ++ .../popups/MfaVerificationPopup.tsx | 294 +++ .../app/components/popups/OwnerOnlyPopup.tsx | 57 + .../app/components/popups/WarningPopup.tsx | 117 ++ .../components/projects/DocumentSidePanel.tsx | 4 +- .../components/projects/NewProjectModal.tsx | 9 +- .../projects/ProjectDocumentsView.tsx | 2 +- .../projects/ProjectPracticeField.tsx | 73 + .../components/projects/ProjectWorkspace.tsx | 4 +- .../components/projects/ProjectsOverview.tsx | 2 +- .../src/{ => app}/components/providers.tsx | 4 +- .../app/components/shared/AddUserInput.tsx | 123 ++ .../src/app/components/shared/AppSidebar.tsx | 607 +++--- .../app/components/shared/FileDirectory.tsx | 517 +++-- .../components/shared/HeaderActionsMenu.tsx | 4 +- .../app/components/shared/MfaLoginGate.tsx | 4 +- .../src/app/components/shared/PageHeader.tsx | 2 +- .../app/components/shared/SidebarChatItem.tsx | 6 +- .../app/components/shared/TablePrimitive.tsx | 2 +- frontend/src/app/components/shared/types.ts | 18 +- .../app/components/shared/views/DocxView.tsx | 503 +++++ .../app/components/shared/views/PdfView.tsx | 598 ++++++ .../shared/views/SpreadsheetView.tsx | 518 +++++ .../shared/views/highlightDocxQuote.ts | 130 ++ .../components/shared/views/highlightQuote.ts | 124 ++ .../src/{ => app}/components/site-logo.tsx | 2 +- .../app/components/tabular/AddColumnModal.tsx | 284 +-- .../src/app/components/tabular/NewTRModal.tsx | 465 +++++ .../app/components/tabular/TRChatPanel.tsx | 6 +- .../components/tabular/TREditColumnMenu.tsx | 157 +- .../app/components/tabular/TRSidePanel.tsx | 2 +- .../src/app/components/tabular/TRTable.tsx | 22 +- .../app/components/tabular/TabularCell.tsx | 10 +- .../tabular/TabularReviewDetailsModal.tsx | 206 ++ .../components/tabular/TabularReviewView.tsx | 4 +- .../app/components/tabular/columnFormat.ts | 24 +- .../src/{ => app}/components/ui/button.tsx | 2 +- .../{ => app}/components/ui/cite-button.tsx | 0 .../{ => app}/components/ui/dropdown-menu.tsx | 2 +- .../src/{ => app}/components/ui/input.tsx | 2 +- .../{ => app}/components/ui/pill-button.tsx | 4 +- frontend/src/app/components/ui/search-bar.tsx | 102 + .../components/workflows/NewWorkflowModal.tsx | 119 +- .../workflows/OpenSourceWorkflowModal.tsx | 336 ++++ .../components/workflows/UseWorkflowModal.tsx | 392 ++++ .../workflows/WFColumnViewModal.tsx | 8 +- .../workflows/WFEditColumnModal.tsx | 173 +- .../workflows/WorkflowDetailPage.tsx | 255 +-- .../app/components/workflows/WorkflowList.tsx | 116 +- .../workflows/WorkflowPickerContent.tsx | 34 +- .../workflows/WorkflowPickerModal.tsx | 6 +- .../workflows/WorkflowPromptEditor.tsx | 505 ++++- .../components/workflows/workflowRoutes.ts | 6 +- .../components/workflows/workflowZipExport.ts | 277 +++ .../src/{ => app}/contexts/AuthContext.tsx | 2 +- .../src/app/contexts/ChatHistoryContext.tsx | 2 +- .../{ => app}/contexts/UserProfileContext.tsx | 2 +- frontend/src/app/error.tsx | 2 +- frontend/src/app/global-error.tsx | 2 +- frontend/src/app/globals.css | 4 + frontend/src/app/hooks/useFetchDocxBytes.ts | 2 +- frontend/src/app/hooks/useFetchSingleDoc.ts | 2 +- frontend/src/app/layout.tsx | 2 +- frontend/src/app/lib/mikeApi.ts | 30 +- frontend/src/{ => app}/lib/supabase.ts | 0 frontend/src/{ => app}/lib/utils.ts | 0 frontend/src/app/login/page.tsx | 20 +- frontend/src/app/signup/page.tsx | 10 +- frontend/src/app/support/page.tsx | 2 +- frontend/src/{ => app}/types/luckyexcel.d.ts | 0 frontend/src/app/verify-mfa/page.tsx | 8 +- scripts/build-workflows.js | 376 +++- 139 files changed, 12554 insertions(+), 2233 deletions(-) create mode 100644 backend/migrations/20260703_01_user_profile_email.sql create mode 100644 backend/migrations/20260703_02_project_practice.sql create mode 100644 backend/migrations/20260704_01_chat_message_citations.sql create mode 100644 backend/src/lib/userLookup.ts create mode 100644 frontend/src/app/components/account/NewMcpModal.tsx create mode 100644 frontend/src/app/components/assistant/CitationQuotesHeader.tsx create mode 100644 frontend/src/app/components/assistant/DocPanel.tsx create mode 100644 frontend/src/app/components/assistant/PreResponseWrapper.tsx create mode 100644 frontend/src/app/components/assistant/TrackedChangeHeader.tsx create mode 100644 frontend/src/app/components/assistant/message/CitationSources.tsx create mode 100644 frontend/src/app/components/assistant/message/EditCardsSection.tsx create mode 100644 frontend/src/app/components/assistant/message/EventBlocks.tsx create mode 100644 frontend/src/app/components/assistant/message/MarkdownContent.tsx create mode 100644 frontend/src/app/components/assistant/message/ResponseStatus.tsx create mode 100644 frontend/src/app/components/assistant/message/citationUtils.ts create mode 100644 frontend/src/app/components/assistant/message/eventUtils.ts create mode 100644 frontend/src/app/components/assistant/message/messageStyles.ts create mode 100644 frontend/src/app/components/assistant/message/useSmoothedReveal.ts rename frontend/src/{ => app}/components/chat/mike-icon.tsx (100%) create mode 100644 frontend/src/app/components/modals/AddDocumentsModal.tsx create mode 100644 frontend/src/app/components/modals/AddProjectDocsModal.tsx create mode 100644 frontend/src/app/components/modals/Modal.tsx create mode 100644 frontend/src/app/components/modals/ModalFieldLabel.tsx create mode 100644 frontend/src/app/components/modals/ModalSegmentedToggle.tsx create mode 100644 frontend/src/app/components/modals/ModalSelect.tsx create mode 100644 frontend/src/app/components/modals/ModalTextInput.tsx create mode 100644 frontend/src/app/components/modals/ModalTextarea.tsx create mode 100644 frontend/src/app/components/modals/PeopleModal.tsx create mode 100644 frontend/src/app/components/modals/ProjectPickerModal.tsx create mode 100644 frontend/src/app/components/popups/ApiKeyMissingPopup.tsx create mode 100644 frontend/src/app/components/popups/ConfirmPopup.tsx create mode 100644 frontend/src/app/components/popups/MfaVerificationPopup.tsx create mode 100644 frontend/src/app/components/popups/OwnerOnlyPopup.tsx create mode 100644 frontend/src/app/components/popups/WarningPopup.tsx create mode 100644 frontend/src/app/components/projects/ProjectPracticeField.tsx rename frontend/src/{ => app}/components/providers.tsx (84%) create mode 100644 frontend/src/app/components/shared/AddUserInput.tsx create mode 100644 frontend/src/app/components/shared/views/DocxView.tsx create mode 100644 frontend/src/app/components/shared/views/PdfView.tsx create mode 100644 frontend/src/app/components/shared/views/SpreadsheetView.tsx create mode 100644 frontend/src/app/components/shared/views/highlightDocxQuote.ts create mode 100644 frontend/src/app/components/shared/views/highlightQuote.ts rename frontend/src/{ => app}/components/site-logo.tsx (96%) create mode 100644 frontend/src/app/components/tabular/NewTRModal.tsx create mode 100644 frontend/src/app/components/tabular/TabularReviewDetailsModal.tsx rename frontend/src/{ => app}/components/ui/button.tsx (98%) rename frontend/src/{ => app}/components/ui/cite-button.tsx (100%) rename frontend/src/{ => app}/components/ui/dropdown-menu.tsx (99%) rename frontend/src/{ => app}/components/ui/input.tsx (96%) rename frontend/src/{ => app}/components/ui/pill-button.tsx (95%) create mode 100644 frontend/src/app/components/ui/search-bar.tsx create mode 100644 frontend/src/app/components/workflows/OpenSourceWorkflowModal.tsx create mode 100644 frontend/src/app/components/workflows/UseWorkflowModal.tsx create mode 100644 frontend/src/app/components/workflows/workflowZipExport.ts rename frontend/src/{ => app}/contexts/AuthContext.tsx (98%) rename frontend/src/{ => app}/contexts/UserProfileContext.tsx (99%) rename frontend/src/{ => app}/lib/supabase.ts (100%) rename frontend/src/{ => app}/lib/utils.ts (100%) rename frontend/src/{ => app}/types/luckyexcel.d.ts (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3ab6e1c..18bfb6f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -22,10 +22,9 @@ Thanks for helping improve Mike. Please keep contributions small, focused, and e ## System Workflows -System workflows live in `workflows/`. Update `metadata.json` for structured -metadata like author, language, version, practice area, or jurisdictions, -update `SKILL.md` for workflow instructions, and use `table-config.json` for -tabular review columns. +System workflows live in `mike-workflows/system/`. Put structured metadata in +the YAML frontmatter at the top of `SKILL.md`, put workflow instructions in the +body of `SKILL.md`, and use `table-config.yaml` for tabular review columns. After changing system workflows, regenerate the app files: diff --git a/backend/bun.lock b/backend/bun.lock index 50c811c..745ff4a 100644 --- a/backend/bun.lock +++ b/backend/bun.lock @@ -25,6 +25,7 @@ "multer": "^1.4.5-lts.2", "pdfjs-dist": "^4.10.38", "resend": "^4.5.1", + "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", "zod": "^3.25.76", }, "devDependencies": { @@ -769,6 +770,8 @@ "ws": ["ws@8.20.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA=="], + "xlsx": ["xlsx@https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz", { "bin": { "xlsx": "./bin/xlsx.njs" } }], + "xml": ["xml@1.0.1", "", {}, "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="], "xml-js": ["xml-js@1.6.11", "", { "dependencies": { "sax": "^1.2.4" }, "bin": "bin/cli.js" }, "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g=="], diff --git a/backend/migrations/20260629_01_workflow_open_source_submissions.sql b/backend/migrations/20260629_01_workflow_open_source_submissions.sql index 5cf1f99..f2a11ee 100644 --- a/backend/migrations/20260629_01_workflow_open_source_submissions.sql +++ b/backend/migrations/20260629_01_workflow_open_source_submissions.sql @@ -15,7 +15,6 @@ create table if not exists public.workflow_open_source_submissions ( submitted_at timestamptz not null default now(), updated_at timestamptz not null default now(), reviewed_at timestamptz, - reviewed_by_user_id text, review_notes text, constraint workflow_open_source_submissions_status_check check (status in ('pending', 'approved', 'rejected')), diff --git a/backend/migrations/20260703_01_user_profile_email.sql b/backend/migrations/20260703_01_user_profile_email.sql new file mode 100644 index 0000000..27e5a53 --- /dev/null +++ b/backend/migrations/20260703_01_user_profile_email.sql @@ -0,0 +1,41 @@ +-- Mirror auth.users.email into user_profiles so backend sharing checks can +-- resolve one email without scanning Supabase Auth users. + +alter table public.user_profiles + add column if not exists email text; + +update public.user_profiles up +set email = lower(au.email) +from auth.users au +where up.user_id = au.id + and au.email is not null + and ( + up.email is null + or up.email <> lower(au.email) + ); + +create unique index if not exists user_profiles_email_lower_unique + on public.user_profiles (lower(email)) + where email is not null and btrim(email) <> ''; + +create index if not exists idx_user_profiles_email + on public.user_profiles(email); + +create or replace function public.handle_new_user() +returns trigger +language plpgsql +security definer +set search_path = public +as $$ +begin + insert into public.user_profiles (user_id, email) + values (new.id, lower(new.email)) + on conflict (user_id) do update + set email = excluded.email, + updated_at = now(); + return new; +exception when others then + -- Never block signup if the profile insert fails. + return new; +end; +$$; diff --git a/backend/migrations/20260703_02_project_practice.sql b/backend/migrations/20260703_02_project_practice.sql new file mode 100644 index 0000000..22c811e --- /dev/null +++ b/backend/migrations/20260703_02_project_practice.sql @@ -0,0 +1,84 @@ +-- Add optional practice metadata to projects and expose it in the overview RPC. + +alter table public.projects + add column if not exists practice text; + +drop function if exists public.get_projects_overview(text, text); + +create or replace function public.get_projects_overview( + p_user_id text, + p_user_email text default null +) +returns table ( + id uuid, + user_id text, + name text, + cm_number text, + practice text, + shared_with jsonb, + created_at timestamptz, + updated_at timestamptz, + is_owner boolean, + owner_display_name text, + owner_email text, + document_count integer, + chat_count integer, + review_count integer +) +language sql +stable +as $$ + with visible_projects as ( + select p.* + from public.projects p + where p.user_id = p_user_id + or ( + coalesce(p_user_email, '') <> '' + and p.user_id <> p_user_id + and p.shared_with @> jsonb_build_array(p_user_email) + ) + ), + document_counts as ( + select d.project_id, count(*)::integer as document_count + from public.documents d + where d.project_id in (select vp.id from visible_projects vp) + group by d.project_id + ), + chat_counts as ( + select c.project_id, count(*)::integer as chat_count + from public.chats c + where c.project_id in (select vp.id from visible_projects vp) + group by c.project_id + ), + review_counts as ( + select tr.project_id, count(*)::integer as review_count + from public.tabular_reviews tr + where tr.project_id in (select vp.id from visible_projects vp) + group by tr.project_id + ) + select + vp.id, + vp.user_id, + vp.name, + vp.cm_number, + vp.practice, + vp.shared_with, + vp.created_at, + vp.updated_at, + vp.user_id = p_user_id as is_owner, + nullif(trim(up.display_name), '') as owner_display_name, + null::text as owner_email, + coalesce(dc.document_count, 0) as document_count, + coalesce(cc.chat_count, 0) as chat_count, + coalesce(rc.review_count, 0) as review_count + from visible_projects vp + left join public.user_profiles up + on up.user_id::text = vp.user_id + left join document_counts dc + on dc.project_id = vp.id + left join chat_counts cc + on cc.project_id = vp.id + left join review_counts rc + on rc.project_id = vp.id + order by vp.created_at desc; +$$; diff --git a/backend/migrations/20260704_01_chat_message_citations.sql b/backend/migrations/20260704_01_chat_message_citations.sql new file mode 100644 index 0000000..adf6108 --- /dev/null +++ b/backend/migrations/20260704_01_chat_message_citations.sql @@ -0,0 +1,19 @@ +do $$ +begin + if exists ( + select 1 + from information_schema.columns + where table_schema = 'public' + and table_name = 'chat_messages' + and column_name = 'annotations' + ) and not exists ( + select 1 + from information_schema.columns + where table_schema = 'public' + and table_name = 'chat_messages' + and column_name = 'citations' + ) then + alter table public.chat_messages + rename column annotations to citations; + end if; +end $$; diff --git a/backend/package.json b/backend/package.json index 5ef2f07..195a6ac 100644 --- a/backend/package.json +++ b/backend/package.json @@ -4,7 +4,6 @@ "private": true, "scripts": { "dev": "tsx watch src/index.ts", - "prebuild": "node ../scripts/build-workflows.js", "build": "tsc", "start": "node dist/index.js" }, diff --git a/backend/src/lib/chat/contextBuilders.ts b/backend/src/lib/chat/contextBuilders.ts index c1794fa..e580113 100644 --- a/backend/src/lib/chat/contextBuilders.ts +++ b/backend/src/lib/chat/contextBuilders.ts @@ -539,7 +539,7 @@ export async function buildWorkflowStore( // Seed system workflows first. for (const wf of SYSTEM_ASSISTANT_WORKFLOWS) { - store.set(wf.id, { title: wf.title, prompt_md: wf.prompt_md }); + store.set(wf.id, { title: wf.title, skill_md: wf.skill_md }); } // Then overlay user-owned assistant workflows. @@ -550,7 +550,7 @@ export async function buildWorkflowStore( .eq("type", "assistant"); for (const wf of workflows ?? []) { if (wf.prompt_md) { - store.set(wf.id, { title: wf.title, prompt_md: wf.prompt_md }); + store.set(wf.id, { title: wf.title, skill_md: wf.prompt_md }); } } @@ -573,7 +573,7 @@ export async function buildWorkflowStore( if (wf.prompt_md) { store.set(wf.id, { title: wf.title, - prompt_md: wf.prompt_md, + skill_md: wf.prompt_md, }); } } diff --git a/backend/src/lib/chat/prompts.ts b/backend/src/lib/chat/prompts.ts index ddbec34..d7f7b88 100644 --- a/backend/src/lib/chat/prompts.ts +++ b/backend/src/lib/chat/prompts.ts @@ -32,6 +32,7 @@ Citation rules: - Keep quotes short, ideally 25 words or fewer, and tightly matched to the claim. - "page" means the sequential [Page N] marker in the provided text, not printed page numbers inside the document. Non-spreadsheet unpaginated files may have no [Page N] markers; omit "page" (or use 1) when none is present. - For spreadsheet sources (content shown as "## Sheet: <name>" markdown tables with a "Row" column and column-letter headers), cite by cell instead of page: set "sheet" to the sheet name and "cell" to the A1 address or range you are quoting (e.g. "B7" or "B7:C9", combining the column-letter header with the "Row" number). Put the plain cell value in "quote" with no "Row"/column-letter labels or "|" separators. Omit "page" for spreadsheet citations. +- A cell tagged "⟨merged A1:C1⟩" spans that whole range: its value belongs to the anchor cell and the other covered cells are shown blank. When citing anything in a merged range, set "cell" to the full range from the tag (e.g. "A1:C1"), not a covered cell like "B1". Do not include the "⟨merged ...⟩" tag text in "quote". - For a continuous quote crossing two pages, set "page" to "N-M" and include [[PAGE_BREAK]] at the page break. Otherwise, use separate quote objects. - For legacy compatibility, you may also include top-level "page" and "quote" matching the first quote. - Omit the <CITATIONS> block when there are no citations. diff --git a/backend/src/lib/chat/tools/toolDispatcher.ts b/backend/src/lib/chat/tools/toolDispatcher.ts index 118227c..3e6f674 100644 --- a/backend/src/lib/chat/tools/toolDispatcher.ts +++ b/backend/src/lib/chat/tools/toolDispatcher.ts @@ -777,7 +777,7 @@ export async function runToolCalls( toolResults.push({ role: "tool", tool_call_id: tc.id, - content: wf ? wf.prompt_md : `Workflow '${wfId}' not found.`, + content: wf ? wf.skill_md : `Workflow '${wfId}' not found.`, }); } else if (tc.function.name === "read_table_cells" && tabularStore) { const colIndices = args.col_indices as number[] | undefined; diff --git a/backend/src/lib/chat/types.ts b/backend/src/lib/chat/types.ts index 1ddecbf..60c10fb 100644 --- a/backend/src/lib/chat/types.ts +++ b/backend/src/lib/chat/types.ts @@ -23,7 +23,7 @@ export type DocStore = Map< { storage_path: string; file_type: string; filename: string } >; -export type WorkflowStore = Map<string, { title: string; prompt_md: string }>; +export type WorkflowStore = Map<string, { title: string; skill_md: string }>; export type DocIndex = Record< string, diff --git a/backend/src/lib/spreadsheet.ts b/backend/src/lib/spreadsheet.ts index e5d061b..57896fb 100644 --- a/backend/src/lib/spreadsheet.ts +++ b/backend/src/lib/spreadsheet.ts @@ -33,6 +33,16 @@ function renderSheet(sheetName: string, ws: XLSX.WorkSheet): string | null { if (!ref) return null; const range = XLSX.utils.decode_range(ref); + // Map each merged range's top-left (anchor) address to its encoded range so we + // can tag the anchor inline (e.g. `Amount ⟨merged B2:C2⟩`). The covered cells + // stay blank, so the model never reads a covered address (e.g. B1 inside + // A1:C1) as its own value; the tag tells it the anchor spans that range, and + // to cite the whole range for anything in it. + const mergeAnchors = new Map<string, string>(); + for (const m of ws["!merges"] ?? []) { + mergeAnchors.set(XLSX.utils.encode_cell(m.s), XLSX.utils.encode_range(m)); + } + // Build a trimmed grid: capture formatted text for every cell in the used // range, then drop trailing empty columns and fully empty rows so we don't // emit oceans of blank cells. @@ -44,7 +54,13 @@ function renderSheet(sheetName: string, ws: XLSX.WorkSheet): string | null { let rowHasContent = false; for (let c = range.s.c; c <= range.e.c; c++) { const addr = XLSX.utils.encode_cell({ r, c }); - const text = sanitizeCellText(cellDisplayText(ws[addr])); + let text = sanitizeCellText(cellDisplayText(ws[addr])); + const mergeRange = mergeAnchors.get(addr); + if (mergeRange) { + text = text + ? `${text} ⟨merged ${mergeRange}⟩` + : `⟨merged ${mergeRange}⟩`; + } cells[c - range.s.c] = text; if (text) { rowHasContent = true; @@ -72,13 +88,6 @@ function renderSheet(sheetName: string, ws: XLSX.WorkSheet): string | null { const lines = [`## Sheet: ${sheetName}`, "", headerRow, separator, ...bodyRows]; - // Note merged ranges once so the model understands spanned headers/labels. - const merges = ws["!merges"]; - if (merges && merges.length > 0) { - const encoded = merges.map((m) => XLSX.utils.encode_range(m)); - lines.push("", `Merged ranges: ${encoded.join(", ")}`); - } - return lines.join("\n"); } diff --git a/backend/src/lib/systemWorkflows.ts b/backend/src/lib/systemWorkflows.ts index a2caad5..96b5e16 100644 --- a/backend/src/lib/systemWorkflows.ts +++ b/backend/src/lib/systemWorkflows.ts @@ -7,19 +7,24 @@ export type SystemWorkflowContributor = { linkedin: string | null; }; -export type SystemWorkflow = { - id: string; - user_id: null; - is_system: true; - created_at: string; +export type SystemWorkflowMetadata = { title: string; + description: string; type: "assistant" | "tabular"; contributors: SystemWorkflowContributor[]; language: string; version: string; practice: string | null; jurisdictions: string[] | null; - prompt_md: string | null; +}; + +export type SystemWorkflow = { + id: string; + user_id: null; + is_system: true; + created_at: string; + metadata: SystemWorkflowMetadata; + skill_md: string | null; columns_config: { index: number; name: string; format?: string; prompt: string; tags?: string[] }[] | null; }; @@ -28,48 +33,27 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-cp-checklist", - "title": "Draft CP Checklist", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status).", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-coc-dd", - "title": "Change of Control Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Corporate", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Change of Control Due Diligence Review\n\nThis workflow performs a change of control due diligence review across the selected documents.", + "id": "builtin-coc-dd-tabular-review", + "metadata": { + "title": "Change of Control Tabular Review", + "description": "This workflow performs a change of control due diligence review across the selected documents.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Change of Control Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents for change of control provisions and extract structured diligence findings into the columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, notice periods, party names, and defined terms where available.\n- For change of control triggers, capture the exact triggering language and summarize the practical effect in plain English.\n- For consent, termination, option, and financial consequence columns, identify who holds the right or obligation, when it is triggered, and any timing or procedural requirements.\n- If a document does not contain responsive change of control language, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context for legal diligence review.\n- Do not infer a change of control restriction from general assignment, transfer, merger, or affiliate provisions unless the document text supports that connection.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.", "columns_config": [ { "index": 0, @@ -120,72 +104,27 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-draft-issues-list", - "title": "Draft Issues List", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder.", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-credit-summary", - "title": "Credit Agreement Review", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Finance", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-commercial-agreement", - "title": "Commercial Agreement Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + "id": "builtin-commercial-agreement-tabular-review", + "metadata": { + "title": "Commercial Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Commercial Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, @@ -301,72 +240,256 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-proofread", - "title": "Proofread", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections.", + "id": "builtin-commercial-lease-review", + "metadata": { + "title": "Commercial Lease Review", + "description": "Review the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Real Estate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-commercial-lease-tabular-review", + "metadata": { + "title": "Commercial Lease Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Real Estate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Commercial Lease Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "columns_config": [ + { + "index": 0, + "name": "Landlord", + "format": "text", + "prompt": "Who is the landlord under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address or title number stated." + }, + { + "index": 1, + "name": "Tenant", + "format": "text", + "prompt": "Who is the tenant under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address stated." + }, + { + "index": 2, + "name": "Guarantor", + "format": "text", + "prompt": "Is there a guarantor under this lease? If so, state the guarantor's full legal name and the scope of the guarantee (e.g. full guarantee of the tenant's obligations, or limited to specific obligations). If there is no guarantor, state this explicitly." + }, + { + "index": 3, + "name": "Premises", + "format": "text", + "prompt": "Describe the premises demised under this lease. Include the address, floor(s), unit reference, net internal area (if stated), and any areas included or excluded from the demise (e.g. common parts, roof, structure, car parking)." + }, + { + "index": 4, + "name": "Date of Lease", + "format": "date", + "prompt": "What is the date of this lease? If the lease is undated or if the term commencement date differs from the execution date, note both." + }, + { + "index": 5, + "name": "Term", + "format": "text", + "prompt": "What is the contractual term of this lease? State the length of the term and the term commencement and expiry dates." + }, + { + "index": 6, + "name": "Rent", + "format": "monetary_amount", + "prompt": "What is the initial annual rent payable under this lease? State the amount, the currency, the payment frequency (e.g. quarterly in advance), and the payment dates. Note any rent-free period or initial concessionary rent." + }, + { + "index": 7, + "name": "Rent Review", + "format": "text", + "prompt": "Are there rent review provisions? If so, state the review dates or frequency, the review mechanism (e.g. open market rent review, RPI/CPI indexation, fixed uplift), whether the review is upward-only, any assumptions and disregards applicable to an open market review, and the dispute resolution mechanism if the parties cannot agree the reviewed rent." + }, + { + "index": 8, + "name": "Service Charge", + "format": "text", + "prompt": "Is the tenant liable for a service charge? If so, describe what costs are included within the service charge, the tenant's apportionment or percentage share, any cap on the service charge, and how the service charge is administered and reconciled." + }, + { + "index": 9, + "name": "Insurance", + "format": "text", + "prompt": "What are the insurance obligations under this lease? State who insures (landlord or tenant), what risks must be insured, who bears the insurance premium cost, and the tenant's obligations in respect of the landlord's insurance (e.g. not to vitiate the policy, to pay the premium as additional rent)." + }, + { + "index": 10, + "name": "Permitted Use", + "format": "text", + "prompt": "What is the permitted use of the premises under this lease? State the use class or specific use permitted and identify any restrictions on use. Note whether the landlord's consent is required to change use and on what basis consent may be withheld." + }, + { + "index": 11, + "name": "Repair & Maintenance", + "format": "text", + "prompt": "Who is responsible for repair and maintenance of the premises? Describe the extent of the tenant's repairing obligation (e.g. full repairing, internal repairing only, subject to a schedule of condition). State the landlord's repairing obligations, if any, in respect of the structure, exterior, or common parts." + }, + { + "index": 12, + "name": "Alterations", + "format": "text", + "prompt": "What alterations may the tenant make to the premises? Distinguish between structural and non-structural alterations. Is landlord consent required, and if so on what basis may it be withheld? Must the tenant reinstate alterations at the end of the term?" + }, + { + "index": 13, + "name": "Assignment & Subletting", + "format": "text", + "prompt": "What rights does the tenant have to assign or sublet the premises? State whether assignment and subletting are permitted with landlord consent, on what grounds consent may be withheld, any conditions to be satisfied (e.g. an authorised guarantee agreement on assignment, rent at no less than the passing rent on subletting), and whether any dealings are prohibited outright." + }, + { + "index": 14, + "name": "Break Rights", + "format": "text", + "prompt": "Are there any break rights in this lease? If so, identify who holds the break right (landlord, tenant, or both), the break date(s), the notice period and form required to exercise the break, and any pre-conditions to effective exercise (e.g. no material breach, vacant possession, payment of all sums due)." + }, + { + "index": 15, + "name": "Security of Tenure", + "format": "yes_no", + "prompt": "Does the tenant have statutory security of tenure (e.g. under the Landlord and Tenant Act 1954 in England and Wales, or equivalent legislation in another jurisdiction)? Answer Yes if the lease is contracted in or benefits from security of tenure. Answer No if the lease has been contracted out or if security of tenure does not apply. State the basis for your answer." + }, + { + "index": 16, + "name": "Dilapidations", + "format": "text", + "prompt": "What dilapidations obligations apply at the end of the term? Describe the tenant's yield-up obligations (e.g. to deliver the premises in repair, to reinstate alterations, to redecorate). Is there a schedule of condition limiting the tenant's liability? Note any dilapidations cap or other limitation on the landlord's claim." + }, + { + "index": 17, + "name": "Rent Deposit", + "format": "monetary_amount", + "prompt": "Is a rent deposit required? If so, state the amount, the period for which it is held, the conditions under which the landlord may draw on it, and the circumstances in which it is returned to the tenant." + }, + { + "index": 18, + "name": "Forfeiture & Termination", + "format": "text", + "prompt": "What are the landlord's forfeiture or termination rights? Identify the events that entitle the landlord to forfeit the lease (e.g. non-payment of rent after a grace period, material breach of covenant, insolvency) and any notice requirements before forfeiture can be exercised." + }, + { + "index": 19, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this lease and which courts have jurisdiction over disputes?" + } + ] + }, { "user_id": null, "is_system": true, "created_at": "", "id": "builtin-corporate-approvals-review", - "title": "Corporate Approvals Review", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Corporate", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one.", + "metadata": { + "title": "Corporate Approvals Review", + "description": "Review the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally cons...", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one.", "columns_config": null }, { "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-credit-agreement", - "title": "Credit Agreement Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Finance", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + "id": "builtin-cp-checklist", + "metadata": { + "title": "Draft CP Checklist", + "description": "Review the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status).", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-credit-agreement-tabular-review", + "metadata": { + "title": "Credit Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Credit Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, @@ -500,24 +623,81 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-ediscovery", - "title": "E-Discovery Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Litigation", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + "id": "builtin-credit-summary", + "metadata": { + "title": "Credit Agreement Review", + "description": "Review the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-draft-issues-list", + "metadata": { + "title": "Draft Issues List", + "description": "Review the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-ediscovery-tabular-review", + "metadata": { + "title": "E-Discovery Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Litigation", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# E-Discovery Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, @@ -567,439 +747,154 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-supply-agreement", - "title": "Supply Agreement Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": null, - "columns_config": [ - { - "index": 0, - "name": "Parties", - "format": "bulleted_list", - "prompt": "Identify all parties to this supply agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. supplier, buyer, distributor)." - }, - { - "index": 1, - "name": "Effective Date", - "format": "date", - "prompt": "What is the effective date or commencement date of this agreement? If no explicit date is stated, note the date it is deemed to take effect." - }, - { - "index": 2, - "name": "Products", - "format": "bulleted_list", - "prompt": "What products are to be supplied under this agreement? List each product or product category, including any relevant specifications, part numbers, or standards referenced." - }, - { - "index": 3, - "name": "Term", - "format": "text", - "prompt": "What is the initial term or duration of this agreement? State the start date (or reference to when it commences) and the end date or duration." - }, - { - "index": 4, - "name": "Renewal", - "format": "text", - "prompt": "What renewal provisions apply? Is renewal automatic or by agreement? State the renewal period, notice requirements to prevent renewal, and any conditions on renewal." - }, - { - "index": 5, - "name": "Delivery", - "format": "text", - "prompt": "What delivery obligations and terms apply? Identify the delivery terms (e.g. Incoterms), delivery lead times, delivery locations, risk of loss, and any consequences for late or failed delivery." - }, - { - "index": 6, - "name": "Quality", - "format": "text", - "prompt": "What quality standards or specifications apply to the products? Identify any applicable standards (e.g. ISO, regulatory requirements), inspection rights, acceptance procedures, and consequences of non-conformance." - }, - { - "index": 7, - "name": "Warranties", - "format": "text", - "prompt": "What warranties does the supplier give in relation to the products? State the warranty period, the scope of the warranty (e.g. free from defects, conformance to specifications), the remedy for breach (e.g. repair, replacement, refund), and any exclusions." - }, - { - "index": 8, - "name": "Liquidated Damages", - "format": "text", - "prompt": "Are there any liquidated damages provisions? If so, identify what triggers them (e.g. late delivery, failure to meet quality standards), the applicable rate or formula, any aggregate cap, and whether they are stated to be the exclusive remedy." - }, - { - "index": 9, - "name": "Limitation of Liability", - "format": "text", - "prompt": "What limitations of liability apply? Identify any caps on liability (and how they are calculated, e.g. contract value, fees paid), exclusions of consequential or indirect loss, and any carve-outs from the limitation (e.g. fraud, wilful misconduct, death or personal injury)." - }, - { - "index": 10, - "name": "Force Majeure", - "format": "text", - "prompt": "Summarise the force majeure clause. What events qualify, what obligations are suspended, what notice must be given, how long must the event persist before either party may terminate, and what are the consequences of termination for force majeure?" - }, - { - "index": 11, - "name": "Termination Rights", - "format": "text", - "prompt": "What are the termination rights of each party? Distinguish between termination for convenience (including notice period) and termination for cause (including cure periods and triggers). Note what happens on termination, including any outstanding purchase orders or payment obligations." - }, - { - "index": 12, - "name": "Governing Law", - "format": "text", - "prompt": "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced." - }, - { - "index": 13, - "name": "Dispute Resolution", - "format": "text", - "prompt": "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, and any mandatory escalation steps (e.g. negotiation, mediation) before formal proceedings." - } - ] + "id": "builtin-employment-agreement-review", + "metadata": { + "title": "Employment Agreement Review", + "description": "Review the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Employment", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null }, { "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-spa", - "title": "SPA Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Corporate", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + "id": "builtin-employment-agreement-tabular-review", + "metadata": { + "title": "Employment Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Employment", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Employment Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, - "name": "Parties", - "format": "bulleted_list", - "prompt": "Identify all parties to this share purchase agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. seller, buyer, target company, warrantor, guarantor)." + "name": "Employer", + "format": "text", + "prompt": "Who is the employer under this agreement? State the full legal name and jurisdiction of incorporation or establishment." }, { "index": 1, + "name": "Employee", + "format": "text", + "prompt": "Who is the employee under this agreement? State their full name and, if provided, their address or location." + }, + { + "index": 2, "name": "Date", "format": "date", - "prompt": "What is the date of this share purchase agreement?" - }, - { - "index": 2, - "name": "Transaction", - "format": "text", - "prompt": "Summarise the transaction. What shares or interests are being acquired, in which target company or companies, and what is the nature of the transaction (e.g. 100% acquisition, majority stake, minority investment)?" + "prompt": "What is the date of this employment agreement? If a commencement date or start date differs from the signing date, state both." }, { "index": 3, - "name": "Consideration", - "format": "monetary_amount", - "prompt": "What is the consideration payable under this agreement? State the total headline price, the currency, and the structure (e.g. cash, shares, loan notes, deferred consideration, earnout). If the price is subject to adjustment (e.g. locked box, completion accounts), describe the mechanism." + "name": "Title", + "format": "text", + "prompt": "What is the employee's job title or position as stated in this agreement? If a reporting line is specified, include it." }, { "index": 4, - "name": "Key Conditions Precedent", - "format": "bulleted_list", - "prompt": "List the key conditions precedent (CPs) to completion. For each CP, state what must be satisfied or waived and by whom. Identify any long-stop date by which CPs must be satisfied." + "name": "Compensation", + "format": "text", + "prompt": "What is the employee's compensation under this agreement? State the base salary or wage, the currency, and the payment frequency (e.g. monthly, bi-weekly). Include any guaranteed bonus, commission, or other fixed remuneration elements." }, { "index": 5, - "name": "Completion Date", - "format": "text", - "prompt": "When does completion occur? State how many business days after satisfaction or waiver of all CPs completion must occur, and/or any fixed outside date for completion. Note whether there is any obligation to complete by a specific date after signing." - }, - { - "index": 6, - "name": "Warranties", - "format": "text", - "prompt": "Summarise the warranty package. Who gives the warranties (e.g. seller, management, all sellers jointly and severally)? Are there business warranties and/or title warranties? Identify the scope of any warranty disclosure process and any limitations on warranty claims (e.g. time limits, minimum claim thresholds, aggregate cap)." - }, - { - "index": 7, - "name": "Indemnities", - "format": "text", - "prompt": "Are there specific indemnities in this agreement? If so, list the key indemnities given, by whom, and for what potential liabilities (e.g. tax indemnity, environmental indemnity, litigation indemnity). Note any time limits or caps applicable to indemnity claims." - }, - { - "index": 8, - "name": "Limitation of Liability", - "format": "text", - "prompt": "What limitations on liability apply to warranty and indemnity claims? Identify the aggregate cap (and how it is calculated, e.g. as a percentage of consideration), any separate cap for fundamental warranties or indemnities, minimum claim thresholds (de minimis and basket/deductible), and time limits for bringing claims." - }, - { - "index": 9, - "name": "Covenants", - "format": "text", - "prompt": "What restrictive or other covenants are given by the seller or management? Include non-compete, non-solicitation, and non-dealing covenants, stating the scope (activities and geography) and duration of each." - }, - { - "index": 10, - "name": "Exclusivity", - "format": "text", - "prompt": "Is there an exclusivity or no-shop provision in this agreement? If so, state the period of exclusivity, what activities are restricted (e.g. soliciting competing offers, engaging with third parties), and any carve-outs or break fee arrangements." - }, - { - "index": 11, - "name": "Governing Law and Jurisdiction", - "format": "text", - "prompt": "What governing law applies to this agreement and what courts or arbitral tribunals have jurisdiction? State the chosen law, the forum for disputes, and whether jurisdiction is exclusive or non-exclusive." - }, - { - "index": 12, - "name": "Dispute Resolution", - "format": "text", - "prompt": "How are disputes to be resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen seat or forum, the applicable rules (if arbitration), and any mandatory pre-dispute escalation steps." - } - ] - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-nda", - "title": "NDA Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": null, - "columns_config": [ - { - "index": 0, - "name": "Direction", + "name": "Full Time / Part Time", "format": "tag", "tags": [ - "Mutual", - "Unilateral" + "Full Time", + "Part Time" ], - "prompt": "Is this NDA mutual (both parties owe confidentiality obligations to each other) or unilateral (only one party owes confidentiality obligations)? Identify the direction and name the disclosing and receiving party or parties." + "prompt": "Is this a full-time or part-time position? If part-time, state the number of days or hours per week where specified." }, { - "index": 1, - "name": "Definition of Confidential Information", - "format": "text", - "prompt": "How is 'Confidential Information' defined in this agreement? Is it broadly or narrowly drafted? Does it require information to be marked as confidential, or is all information shared in connection with the purpose automatically covered? Note any express inclusions or exclusions." - }, - { - "index": 2, - "name": "Obligations of Receiving Party", - "format": "bulleted_list", - "prompt": "What are the key obligations of the receiving party in respect of the confidential information? List each obligation (e.g. keep confidential, not disclose to third parties, use only for the permitted purpose, apply a specific standard of care, restrict access to need-to-know personnel)." - }, - { - "index": 3, - "name": "Standard Carveouts Present?", + "index": 6, + "name": "Independent Contractor?", "format": "yes_no", - "prompt": "Does the agreement include the standard carveouts to confidentiality obligations? Answer Yes if the agreement excludes information that: (a) is or becomes publicly available without breach; (b) was already known to the receiving party; (c) is independently developed; and (d) is received from a third party without restriction. Note any carveouts that are missing or are drafted differently from the standard formulation." + "prompt": "Does the agreement characterise the worker as an independent contractor rather than an employee? Answer Yes if the agreement uses contractor, consultant, or self-employed language. Note any provisions that address the nature of the relationship." }, { - "index": 4, - "name": "Permitted Disclosures", + "index": 7, + "name": "Benefits", "format": "bulleted_list", - "prompt": "To whom may the receiving party disclose confidential information? List each category of permitted recipient (e.g. employees, professional advisers, affiliates, financing parties, regulatory authorities). Note whether onward disclosure requires the recipient to be bound by equivalent obligations." - }, - { - "index": 5, - "name": "Term and Duration", - "format": "text", - "prompt": "What is the term of this NDA and how long do the confidentiality obligations last? State the initial term of the agreement and the duration of the confidentiality obligations (noting whether they survive termination and for how long)." - }, - { - "index": 6, - "name": "Return and Destruction", - "format": "text", - "prompt": "What obligations apply on expiry or termination regarding return or destruction of confidential information? Is there a choice between return and destruction? Must destruction be certified? Are there any retention exceptions (e.g. for regulatory purposes, IT backup systems)?" - }, - { - "index": 7, - "name": "Remedies", - "format": "text", - "prompt": "What remedies are available for breach of the confidentiality obligations? Does the agreement acknowledge that damages may be inadequate and that injunctive relief or specific performance is available? Are there any agreed liquidated damages or indemnities for breach?" + "prompt": "What benefits are the employee entitled to under this agreement? List each benefit (e.g. health insurance, pension/retirement contributions, life assurance, car allowance, share options, expense reimbursement). Note any eligibility conditions or limits." }, { "index": 8, - "name": "Governing Law and Jurisdiction", + "name": "Notice Period (Employer to Employee)", "format": "text", - "prompt": "What governing law applies to this agreement and which courts have jurisdiction? State the chosen law, the forum, and whether jurisdiction is exclusive or non-exclusive." - } - ] - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-commercial-lease", - "title": "Commercial Lease Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Real Estate", - "jurisdictions": [ - "General" - ], - "prompt_md": null, - "columns_config": [ - { - "index": 0, - "name": "Landlord", - "format": "text", - "prompt": "Who is the landlord under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address or title number stated." - }, - { - "index": 1, - "name": "Tenant", - "format": "text", - "prompt": "Who is the tenant under this lease? State the full legal name, jurisdiction of incorporation or registration (if applicable), and any registered address stated." - }, - { - "index": 2, - "name": "Guarantor", - "format": "text", - "prompt": "Is there a guarantor under this lease? If so, state the guarantor's full legal name and the scope of the guarantee (e.g. full guarantee of the tenant's obligations, or limited to specific obligations). If there is no guarantor, state this explicitly." - }, - { - "index": 3, - "name": "Premises", - "format": "text", - "prompt": "Describe the premises demised under this lease. Include the address, floor(s), unit reference, net internal area (if stated), and any areas included or excluded from the demise (e.g. common parts, roof, structure, car parking)." - }, - { - "index": 4, - "name": "Date of Lease", - "format": "date", - "prompt": "What is the date of this lease? If the lease is undated or if the term commencement date differs from the execution date, note both." - }, - { - "index": 5, - "name": "Term", - "format": "text", - "prompt": "What is the contractual term of this lease? State the length of the term and the term commencement and expiry dates." - }, - { - "index": 6, - "name": "Rent", - "format": "monetary_amount", - "prompt": "What is the initial annual rent payable under this lease? State the amount, the currency, the payment frequency (e.g. quarterly in advance), and the payment dates. Note any rent-free period or initial concessionary rent." - }, - { - "index": 7, - "name": "Rent Review", - "format": "text", - "prompt": "Are there rent review provisions? If so, state the review dates or frequency, the review mechanism (e.g. open market rent review, RPI/CPI indexation, fixed uplift), whether the review is upward-only, any assumptions and disregards applicable to an open market review, and the dispute resolution mechanism if the parties cannot agree the reviewed rent." - }, - { - "index": 8, - "name": "Service Charge", - "format": "text", - "prompt": "Is the tenant liable for a service charge? If so, describe what costs are included within the service charge, the tenant's apportionment or percentage share, any cap on the service charge, and how the service charge is administered and reconciled." + "prompt": "What notice must the employer give to terminate the employee's employment (other than for cause)? State the notice period and any provisions for payment in lieu of notice." }, { "index": 9, - "name": "Insurance", + "name": "Notice Period (Employee to Employer)", "format": "text", - "prompt": "What are the insurance obligations under this lease? State who insures (landlord or tenant), what risks must be insured, who bears the insurance premium cost, and the tenant's obligations in respect of the landlord's insurance (e.g. not to vitiate the policy, to pay the premium as additional rent)." + "prompt": "What notice must the employee give to resign? State the notice period and any provisions for payment in lieu of notice or garden leave." }, { "index": 10, - "name": "Permitted Use", + "name": "Overtime", "format": "text", - "prompt": "What is the permitted use of the premises under this lease? State the use class or specific use permitted and identify any restrictions on use. Note whether the landlord's consent is required to change use and on what basis consent may be withheld." + "prompt": "What provisions apply to overtime? Is the employee eligible for overtime pay, and if so at what rate? Or does the agreement state that the salary is inclusive of any overtime? Note any opt-out of statutory working time limits." }, { "index": 11, - "name": "Repair & Maintenance", + "name": "Working Hours", "format": "text", - "prompt": "Who is responsible for repair and maintenance of the premises? Describe the extent of the tenant's repairing obligation (e.g. full repairing, internal repairing only, subject to a schedule of condition). State the landlord's repairing obligations, if any, in respect of the structure, exterior, or common parts." + "prompt": "What working hours are specified in this agreement? State the normal hours of work, any flexibility provisions, and whether the employee is expected to work additional hours as required." }, { "index": 12, - "name": "Alterations", + "name": "Variation", "format": "text", - "prompt": "What alterations may the tenant make to the premises? Distinguish between structural and non-structural alterations. Is landlord consent required, and if so on what basis may it be withheld? Must the tenant reinstate alterations at the end of the term?" + "prompt": "What provisions govern variation of the terms of this agreement? Can the employer unilaterally vary terms, or is the employee's consent required? Note any specific terms that are stated to be variable without consent." }, { "index": 13, - "name": "Assignment & Subletting", + "name": "Intellectual Property Assignment", "format": "text", - "prompt": "What rights does the tenant have to assign or sublet the premises? State whether assignment and subletting are permitted with landlord consent, on what grounds consent may be withheld, any conditions to be satisfied (e.g. an authorised guarantee agreement on assignment, rent at no less than the passing rent on subletting), and whether any dealings are prohibited outright." + "prompt": "What intellectual property assignment provisions are included? Does the employee assign to the employer all IP created in the course of employment? Are there any carve-outs for pre-existing IP or inventions created outside working hours? Note any moral rights waiver." }, { "index": 14, - "name": "Break Rights", - "format": "text", - "prompt": "Are there any break rights in this lease? If so, identify who holds the break right (landlord, tenant, or both), the break date(s), the notice period and form required to exercise the break, and any pre-conditions to effective exercise (e.g. no material breach, vacant possession, payment of all sums due)." + "name": "Grounds for Termination", + "format": "bulleted_list", + "prompt": "What grounds for summary dismissal or termination for cause are set out in the agreement? List each ground (e.g. gross misconduct, breach of confidentiality, insolvency, criminal conviction). Note whether summary dismissal is without notice or payment in lieu." }, { "index": 15, - "name": "Security of Tenure", - "format": "yes_no", - "prompt": "Does the tenant have statutory security of tenure (e.g. under the Landlord and Tenant Act 1954 in England and Wales, or equivalent legislation in another jurisdiction)? Answer Yes if the lease is contracted in or benefits from security of tenure. Answer No if the lease has been contracted out or if security of tenure does not apply. State the basis for your answer." - }, - { - "index": 16, - "name": "Dilapidations", + "name": "Annual Leave Entitlement", "format": "text", - "prompt": "What dilapidations obligations apply at the end of the term? Describe the tenant's yield-up obligations (e.g. to deliver the premises in repair, to reinstate alterations, to redecorate). Is there a schedule of condition limiting the tenant's liability? Note any dilapidations cap or other limitation on the landlord's claim." - }, - { - "index": 17, - "name": "Rent Deposit", - "format": "monetary_amount", - "prompt": "Is a rent deposit required? If so, state the amount, the period for which it is held, the conditions under which the landlord may draw on it, and the circumstances in which it is returned to the tenant." - }, - { - "index": 18, - "name": "Forfeiture & Termination", - "format": "text", - "prompt": "What are the landlord's forfeiture or termination rights? Identify the events that entitle the landlord to forfeit the lease (e.g. non-payment of rent after a grace period, material breach of covenant, insolvency) and any notice requirements before forfeiture can be exercised." - }, - { - "index": 19, - "name": "Governing Law", - "format": "text", - "prompt": "What governing law applies to this lease and which courts have jurisdiction over disputes?" + "prompt": "What is the employee's annual leave entitlement? State the number of days (or weeks) per year, whether this is inclusive of or in addition to public holidays, and any provisions for accrual, carry-over, or payment of untaken leave on termination." } ] }, @@ -1007,24 +902,54 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-lpa", - "title": "Limited Partnership Agreement Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Private Equity", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + "id": "builtin-guarantee-agreement-review", + "metadata": { + "title": "Guarantee Agreement Review", + "description": "Review the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented...", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-lpa-tabular-review", + "metadata": { + "title": "Limited Partnership Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Private Equity", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Limited Partnership Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, @@ -1152,48 +1077,194 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-sha-summary", - "title": "Shareholder Agreement Review", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Corporate", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "id": "builtin-nda-review", + "metadata": { + "title": "NDA Review", + "description": "Review the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, { "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-shareholder-agreement", - "title": "Shareholder Agreement Review", - "type": "tabular", - "contributors": [ + "id": "builtin-nda-tabular-review", + "metadata": { + "title": "NDA Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# NDA Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "columns_config": [ { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null + "index": 0, + "name": "Direction", + "format": "tag", + "tags": [ + "Mutual", + "Unilateral" + ], + "prompt": "Is this NDA mutual (both parties owe confidentiality obligations to each other) or unilateral (only one party owes confidentiality obligations)? Identify the direction and name the disclosing and receiving party or parties." + }, + { + "index": 1, + "name": "Definition of Confidential Information", + "format": "text", + "prompt": "How is 'Confidential Information' defined in this agreement? Is it broadly or narrowly drafted? Does it require information to be marked as confidential, or is all information shared in connection with the purpose automatically covered? Note any express inclusions or exclusions." + }, + { + "index": 2, + "name": "Obligations of Receiving Party", + "format": "bulleted_list", + "prompt": "What are the key obligations of the receiving party in respect of the confidential information? List each obligation (e.g. keep confidential, not disclose to third parties, use only for the permitted purpose, apply a specific standard of care, restrict access to need-to-know personnel)." + }, + { + "index": 3, + "name": "Standard Carveouts Present?", + "format": "yes_no", + "prompt": "Does the agreement include the standard carveouts to confidentiality obligations? Answer Yes if the agreement excludes information that: (a) is or becomes publicly available without breach; (b) was already known to the receiving party; (c) is independently developed; and (d) is received from a third party without restriction. Note any carveouts that are missing or are drafted differently from the standard formulation." + }, + { + "index": 4, + "name": "Permitted Disclosures", + "format": "bulleted_list", + "prompt": "To whom may the receiving party disclose confidential information? List each category of permitted recipient (e.g. employees, professional advisers, affiliates, financing parties, regulatory authorities). Note whether onward disclosure requires the recipient to be bound by equivalent obligations." + }, + { + "index": 5, + "name": "Term and Duration", + "format": "text", + "prompt": "What is the term of this NDA and how long do the confidentiality obligations last? State the initial term of the agreement and the duration of the confidentiality obligations (noting whether they survive termination and for how long)." + }, + { + "index": 6, + "name": "Return and Destruction", + "format": "text", + "prompt": "What obligations apply on expiry or termination regarding return or destruction of confidential information? Is there a choice between return and destruction? Must destruction be certified? Are there any retention exceptions (e.g. for regulatory purposes, IT backup systems)?" + }, + { + "index": 7, + "name": "Remedies", + "format": "text", + "prompt": "What remedies are available for breach of the confidentiality obligations? Does the agreement acknowledge that damages may be inadequate and that injunctive relief or specific performance is available? Are there any agreed liquidated damages or indemnities for breach?" + }, + { + "index": 8, + "name": "Governing Law and Jurisdiction", + "format": "text", + "prompt": "What governing law applies to this agreement and which courts have jurisdiction? State the chosen law, the forum, and whether jurisdiction is exclusive or non-exclusive." } - ], - "language": "English", - "version": "1.0.0", - "practice": "Corporate", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + ] + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-proofread", + "metadata": { + "title": "Proofread", + "description": "Review the uploaded document for drafting quality, internal consistency, and mechanical errors.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-sha-summary", + "metadata": { + "title": "Shareholder Agreement Review", + "description": "Review the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-shareholder-agreement-tabular-review", + "metadata": { + "title": "Shareholder Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Shareholder Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, @@ -1321,124 +1392,105 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-employment-agreement", - "title": "Employment Agreement Review", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Employment", - "jurisdictions": [ - "General" - ], - "prompt_md": null, + "id": "builtin-spa-tabular-review", + "metadata": { + "title": "SPA Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Corporate", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# SPA Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", "columns_config": [ { "index": 0, - "name": "Employer", - "format": "text", - "prompt": "Who is the employer under this agreement? State the full legal name and jurisdiction of incorporation or establishment." + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this share purchase agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. seller, buyer, target company, warrantor, guarantor)." }, { "index": 1, - "name": "Employee", - "format": "text", - "prompt": "Who is the employee under this agreement? State their full name and, if provided, their address or location." + "name": "Date", + "format": "date", + "prompt": "What is the date of this share purchase agreement?" }, { "index": 2, - "name": "Date", - "format": "date", - "prompt": "What is the date of this employment agreement? If a commencement date or start date differs from the signing date, state both." + "name": "Transaction", + "format": "text", + "prompt": "Summarise the transaction. What shares or interests are being acquired, in which target company or companies, and what is the nature of the transaction (e.g. 100% acquisition, majority stake, minority investment)?" }, { "index": 3, - "name": "Title", - "format": "text", - "prompt": "What is the employee's job title or position as stated in this agreement? If a reporting line is specified, include it." + "name": "Consideration", + "format": "monetary_amount", + "prompt": "What is the consideration payable under this agreement? State the total headline price, the currency, and the structure (e.g. cash, shares, loan notes, deferred consideration, earnout). If the price is subject to adjustment (e.g. locked box, completion accounts), describe the mechanism." }, { "index": 4, - "name": "Compensation", - "format": "text", - "prompt": "What is the employee's compensation under this agreement? State the base salary or wage, the currency, and the payment frequency (e.g. monthly, bi-weekly). Include any guaranteed bonus, commission, or other fixed remuneration elements." + "name": "Key Conditions Precedent", + "format": "bulleted_list", + "prompt": "List the key conditions precedent (CPs) to completion. For each CP, state what must be satisfied or waived and by whom. Identify any long-stop date by which CPs must be satisfied." }, { "index": 5, - "name": "Full Time / Part Time", - "format": "tag", - "tags": [ - "Full Time", - "Part Time" - ], - "prompt": "Is this a full-time or part-time position? If part-time, state the number of days or hours per week where specified." + "name": "Completion Date", + "format": "text", + "prompt": "When does completion occur? State how many business days after satisfaction or waiver of all CPs completion must occur, and/or any fixed outside date for completion. Note whether there is any obligation to complete by a specific date after signing." }, { "index": 6, - "name": "Independent Contractor?", - "format": "yes_no", - "prompt": "Does the agreement characterise the worker as an independent contractor rather than an employee? Answer Yes if the agreement uses contractor, consultant, or self-employed language. Note any provisions that address the nature of the relationship." + "name": "Warranties", + "format": "text", + "prompt": "Summarise the warranty package. Who gives the warranties (e.g. seller, management, all sellers jointly and severally)? Are there business warranties and/or title warranties? Identify the scope of any warranty disclosure process and any limitations on warranty claims (e.g. time limits, minimum claim thresholds, aggregate cap)." }, { "index": 7, - "name": "Benefits", - "format": "bulleted_list", - "prompt": "What benefits are the employee entitled to under this agreement? List each benefit (e.g. health insurance, pension/retirement contributions, life assurance, car allowance, share options, expense reimbursement). Note any eligibility conditions or limits." + "name": "Indemnities", + "format": "text", + "prompt": "Are there specific indemnities in this agreement? If so, list the key indemnities given, by whom, and for what potential liabilities (e.g. tax indemnity, environmental indemnity, litigation indemnity). Note any time limits or caps applicable to indemnity claims." }, { "index": 8, - "name": "Notice Period (Employer to Employee)", + "name": "Limitation of Liability", "format": "text", - "prompt": "What notice must the employer give to terminate the employee's employment (other than for cause)? State the notice period and any provisions for payment in lieu of notice." + "prompt": "What limitations on liability apply to warranty and indemnity claims? Identify the aggregate cap (and how it is calculated, e.g. as a percentage of consideration), any separate cap for fundamental warranties or indemnities, minimum claim thresholds (de minimis and basket/deductible), and time limits for bringing claims." }, { "index": 9, - "name": "Notice Period (Employee to Employer)", + "name": "Covenants", "format": "text", - "prompt": "What notice must the employee give to resign? State the notice period and any provisions for payment in lieu of notice or garden leave." + "prompt": "What restrictive or other covenants are given by the seller or management? Include non-compete, non-solicitation, and non-dealing covenants, stating the scope (activities and geography) and duration of each." }, { "index": 10, - "name": "Overtime", + "name": "Exclusivity", "format": "text", - "prompt": "What provisions apply to overtime? Is the employee eligible for overtime pay, and if so at what rate? Or does the agreement state that the salary is inclusive of any overtime? Note any opt-out of statutory working time limits." + "prompt": "Is there an exclusivity or no-shop provision in this agreement? If so, state the period of exclusivity, what activities are restricted (e.g. soliciting competing offers, engaging with third parties), and any carve-outs or break fee arrangements." }, { "index": 11, - "name": "Working Hours", + "name": "Governing Law and Jurisdiction", "format": "text", - "prompt": "What working hours are specified in this agreement? State the normal hours of work, any flexibility provisions, and whether the employee is expected to work additional hours as required." + "prompt": "What governing law applies to this agreement and what courts or arbitral tribunals have jurisdiction? State the chosen law, the forum for disputes, and whether jurisdiction is exclusive or non-exclusive." }, { "index": 12, - "name": "Variation", + "name": "Dispute Resolution", "format": "text", - "prompt": "What provisions govern variation of the terms of this agreement? Can the employer unilaterally vary terms, or is the employee's consent required? Note any specific terms that are stated to be variable without consent." - }, - { - "index": 13, - "name": "Intellectual Property Assignment", - "format": "text", - "prompt": "What intellectual property assignment provisions are included? Does the employee assign to the employer all IP created in the course of employment? Are there any carve-outs for pre-existing IP or inventions created outside working hours? Note any moral rights waiver." - }, - { - "index": 14, - "name": "Grounds for Termination", - "format": "bulleted_list", - "prompt": "What grounds for summary dismissal or termination for cause are set out in the agreement? List each ground (e.g. gross misconduct, breach of confidentiality, insolvency, criminal conviction). Note whether summary dismissal is without notice or payment in lieu." - }, - { - "index": 15, - "name": "Annual Leave Entitlement", - "format": "text", - "prompt": "What is the employee's annual leave entitlement? State the number of days (or weeks) per year, whether this is inclusive of or in addition to public holidays, and any provisions for accrual, carry-over, or payment of untaken leave on termination." + "prompt": "How are disputes to be resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen seat or forum, the applicable rules (if arbitration), and any mandatory pre-dispute escalation steps." } ] }, @@ -1446,151 +1498,167 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-nda-review", - "title": "NDA Review", - "type": "assistant", - "contributors": [ + "id": "builtin-supply-agreement-tabular-review", + "metadata": { + "title": "Supply Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Supply Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "columns_config": [ { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ], - "prompt_md": "## NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-employment-agreement-review", - "title": "Employment Agreement Review", - "type": "assistant", - "contributors": [ + "index": 0, + "name": "Parties", + "format": "bulleted_list", + "prompt": "Identify all parties to this supply agreement. For each, state their full legal name, jurisdiction of incorporation (if stated), and their role (e.g. supplier, buyer, distributor)." + }, { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Employment", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-guarantee-agreement-review", - "title": "Guarantee Agreement Review", - "type": "assistant", - "contributors": [ + "index": 1, + "name": "Effective Date", + "format": "date", + "prompt": "What is the effective date or commencement date of this agreement? If no explicit date is stated, note the date it is deemed to take effect." + }, { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Finance", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-commercial-lease-review", - "title": "Commercial Lease Review", - "type": "assistant", - "contributors": [ + "index": 2, + "name": "Products", + "format": "bulleted_list", + "prompt": "What products are to be supplied under this agreement? List each product or product category, including any relevant specifications, part numbers, or standards referenced." + }, { - "name": "Mike", - "organisation": null, - "role": null, - "linkedin": null + "index": 3, + "name": "Term", + "format": "text", + "prompt": "What is the initial term or duration of this agreement? State the start date (or reference to when it commences) and the end date or duration." + }, + { + "index": 4, + "name": "Renewal", + "format": "text", + "prompt": "What renewal provisions apply? Is renewal automatic or by agreement? State the renewal period, notice requirements to prevent renewal, and any conditions on renewal." + }, + { + "index": 5, + "name": "Delivery", + "format": "text", + "prompt": "What delivery obligations and terms apply? Identify the delivery terms (e.g. Incoterms), delivery lead times, delivery locations, risk of loss, and any consequences for late or failed delivery." + }, + { + "index": 6, + "name": "Quality", + "format": "text", + "prompt": "What quality standards or specifications apply to the products? Identify any applicable standards (e.g. ISO, regulatory requirements), inspection rights, acceptance procedures, and consequences of non-conformance." + }, + { + "index": 7, + "name": "Warranties", + "format": "text", + "prompt": "What warranties does the supplier give in relation to the products? State the warranty period, the scope of the warranty (e.g. free from defects, conformance to specifications), the remedy for breach (e.g. repair, replacement, refund), and any exclusions." + }, + { + "index": 8, + "name": "Liquidated Damages", + "format": "text", + "prompt": "Are there any liquidated damages provisions? If so, identify what triggers them (e.g. late delivery, failure to meet quality standards), the applicable rate or formula, any aggregate cap, and whether they are stated to be the exclusive remedy." + }, + { + "index": 9, + "name": "Limitation of Liability", + "format": "text", + "prompt": "What limitations of liability apply? Identify any caps on liability (and how they are calculated, e.g. contract value, fees paid), exclusions of consequential or indirect loss, and any carve-outs from the limitation (e.g. fraud, wilful misconduct, death or personal injury)." + }, + { + "index": 10, + "name": "Force Majeure", + "format": "text", + "prompt": "Summarise the force majeure clause. What events qualify, what obligations are suspended, what notice must be given, how long must the event persist before either party may terminate, and what are the consequences of termination for force majeure?" + }, + { + "index": 11, + "name": "Termination Rights", + "format": "text", + "prompt": "What are the termination rights of each party? Distinguish between termination for convenience (including notice period) and termination for cause (including cure periods and triggers). Note what happens on termination, including any outstanding purchase orders or payment obligations." + }, + { + "index": 12, + "name": "Governing Law", + "format": "text", + "prompt": "What governing law applies to this agreement? State the jurisdiction and any specific legal system referenced." + }, + { + "index": 13, + "name": "Dispute Resolution", + "format": "text", + "prompt": "How are disputes resolved under this agreement? Identify whether disputes go to litigation or arbitration, the chosen forum or seat, and any mandatory escalation steps (e.g. negotiation, mediation) before formal proceedings." } - ], - "language": "English", - "version": "1.0.0", - "practice": "Real Estate", - "jurisdictions": [ - "General" - ], - "prompt_md": "## Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", - "columns_config": null + ] } ]; export const SYSTEM_WORKFLOW_IDS = new Set(SYSTEM_WORKFLOWS.map((wf) => wf.id)); -export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; prompt_md: string }[] = [ +export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: string }[] = [ { - "id": "builtin-cp-checklist", - "title": "Draft CP Checklist", - "prompt_md": "## Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status)." - }, - { - "id": "builtin-draft-issues-list", - "title": "Draft Issues List", - "prompt_md": "## Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder." - }, - { - "id": "builtin-credit-summary", - "title": "Credit Agreement Review", - "prompt_md": "## Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." - }, - { - "id": "builtin-proofread", - "title": "Proofread", - "prompt_md": "## Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections." + "id": "builtin-commercial-lease-review", + "title": "Commercial Lease Review", + "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { "id": "builtin-corporate-approvals-review", "title": "Corporate Approvals Review", - "prompt_md": "## Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one." + "skill_md": "# Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one." }, { - "id": "builtin-sha-summary", - "title": "Shareholder Agreement Review", - "prompt_md": "## Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "id": "builtin-cp-checklist", + "title": "Draft CP Checklist", + "skill_md": "# Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status)." }, { - "id": "builtin-nda-review", - "title": "NDA Review", - "prompt_md": "## NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "id": "builtin-credit-summary", + "title": "Credit Agreement Review", + "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-draft-issues-list", + "title": "Draft Issues List", + "skill_md": "# Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder." }, { "id": "builtin-employment-agreement-review", "title": "Employment Agreement Review", - "prompt_md": "## Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { "id": "builtin-guarantee-agreement-review", "title": "Guarantee Agreement Review", - "prompt_md": "## Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { - "id": "builtin-commercial-lease-review", - "title": "Commercial Lease Review", - "prompt_md": "## Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "id": "builtin-nda-review", + "title": "NDA Review", + "skill_md": "# NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + }, + { + "id": "builtin-proofread", + "title": "Proofread", + "skill_md": "# Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections." + }, + { + "id": "builtin-sha-summary", + "title": "Shareholder Agreement Review", + "skill_md": "# Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." } ]; diff --git a/backend/src/lib/userLookup.ts b/backend/src/lib/userLookup.ts new file mode 100644 index 0000000..de74729 --- /dev/null +++ b/backend/src/lib/userLookup.ts @@ -0,0 +1,113 @@ +import type { SupabaseClient } from "@supabase/supabase-js"; + +type Db = SupabaseClient<any, "public", any>; + +export type ProfileUserInfo = { + id: string; + email: string; + display_name: string | null; +}; + +export function normalizeEmail(value: unknown) { + return typeof value === "string" ? value.trim().toLowerCase() : ""; +} + +export function normalizeDisplayName(value: unknown) { + return typeof value === "string" && value.trim() ? value.trim() : null; +} + +export async function loadProfileUsersByEmail(db: Db) { + const { data, error } = await db + .from("user_profiles") + .select("user_id, email, display_name") + .not("email", "is", null); + if (error) throw error; + + const userByEmail = new Map<string, ProfileUserInfo>(); + const userById = new Map<string, ProfileUserInfo>(); + for (const row of data ?? []) { + const email = normalizeEmail(row.email); + if (!email) continue; + const info = { + id: row.user_id as string, + email, + display_name: normalizeDisplayName(row.display_name), + }; + userByEmail.set(email, info); + userById.set(info.id, info); + } + + return { userByEmail, userById }; +} + +export async function findProfileUserByEmail(db: Db, email: string) { + const normalized = normalizeEmail(email); + if (!normalized) return null; + + const { data, error } = await db + .from("user_profiles") + .select("user_id, email, display_name") + .eq("email", normalized) + .maybeSingle(); + if (error) throw error; + if (!data) return null; + + return { + id: data.user_id as string, + email: normalized, + display_name: normalizeDisplayName(data.display_name), + }; +} + +export async function findMissingUserEmails(db: Db, emails: string[]) { + const normalizedEmails = [...new Set(emails.map(normalizeEmail).filter(Boolean))]; + if (normalizedEmails.length === 0) return []; + + const { data, error } = await db + .from("user_profiles") + .select("email") + .in("email", normalizedEmails); + if (error) throw error; + + const found = new Set( + (data ?? []) + .map((row) => normalizeEmail(row.email)) + .filter(Boolean), + ); + return normalizedEmails.filter((email) => !found.has(email)); +} + +export async function syncProfileEmail( + db: Db, + userId: string, + email: string | null | undefined, +) { + const normalizedEmail = normalizeEmail(email); + if (!userId || !normalizedEmail) return null; + + const { data: existing, error: loadError } = await db + .from("user_profiles") + .select("email") + .eq("user_id", userId) + .maybeSingle(); + if (loadError) return loadError; + + if (!existing) { + const { error } = await db.from("user_profiles").insert({ + user_id: userId, + email: normalizedEmail, + }); + return error; + } + + if (normalizeEmail(existing.email) === normalizedEmail) return null; + + const { error } = await db + .from("user_profiles") + .update({ + email: normalizedEmail, + updated_at: new Date().toISOString(), + }) + .eq("user_id", userId); + return error; +} diff --git a/backend/src/routes/workflows.ts b/backend/src/routes/workflows.ts index a28e7eb..62b28d4 100644 --- a/backend/src/routes/workflows.ts +++ b/backend/src/routes/workflows.ts @@ -32,12 +32,25 @@ type WorkflowRecord = { [key: string]: unknown; }; +type WorkflowType = "assistant" | "tabular"; + type WorkflowContributor = { name: string; organisation: string | null; role: string | null; linkedin: string | null; }; + +type WorkflowMetadata = { + title: string; + description: string | null; + type: WorkflowType; + contributors: WorkflowContributor[]; + language: string; + version: string | null; + practice: string | null; + jurisdictions: string[] | null; +}; type OpenSourceSubmissionStatus = "pending" | "approved" | "rejected"; type OpenSourceSubmissionRow = { @@ -52,7 +65,6 @@ type OpenSourceSubmissionRow = { submitted_at: string; updated_at: string; reviewed_at?: string | null; - reviewed_by_user_id?: string | null; review_notes?: string | null; }; @@ -120,9 +132,42 @@ function withSystemWorkflowAccess(workflow: SystemWorkflow) { }); } -function withDatabaseWorkflow<T extends object>(workflow: T) { +function workflowTypeFrom(value: unknown): WorkflowType { + return value === "tabular" ? "tabular" : "assistant"; +} + +function metadataFromWorkflowRecord(workflow: WorkflowRecord): WorkflowMetadata { return { - ...workflow, + title: workflow.title ?? "", + description: null, + type: workflowTypeFrom(workflow.type), + contributors: + normalizeContributors(workflow.contributors) ?? [ + DEFAULT_WORKFLOW_CONTRIBUTOR, + ], + language: workflow.language ?? DEFAULT_WORKFLOW_LANGUAGE, + version: workflow.version ?? null, + practice: workflow.practice ?? DEFAULT_WORKFLOW_PRACTICE, + jurisdictions: workflow.jurisdictions ?? DEFAULT_WORKFLOW_JURISDICTIONS, + }; +} + +function withDatabaseWorkflow(workflow: WorkflowRecord) { + const { + title: _title, + type: _type, + contributors: _contributors, + language: _language, + version: _version, + practice: _practice, + jurisdictions: _jurisdictions, + prompt_md, + ...rest + } = workflow; + return { + ...rest, + metadata: metadataFromWorkflowRecord(workflow), + skill_md: prompt_md ?? null, is_system: false, }; } @@ -179,7 +224,7 @@ async function resolveWorkflowAccess( .eq("id", workflowId) .single(); if (!workflow) return null; - const workflowRecord = withDatabaseWorkflow(workflow as WorkflowRecord); + const workflowRecord = workflow as WorkflowRecord; if (workflowRecord.user_id === userId) { return { workflow: workflowRecord, allowEdit: true, isOwner: true }; } @@ -234,16 +279,13 @@ function buildOpenSourceSnapshot( ) { return { workflow_id: workflow.id, - title: workflow.title ?? "", - type: workflow.type ?? "", - prompt_md: workflow.prompt_md ?? null, + metadata: { + ...metadataFromWorkflowRecord(workflow), + contributors, + }, + skill_md: workflow.prompt_md ?? null, columns_config: workflow.columns_config ?? null, - contributors, contributor_mode: contributorMode, - language: workflow.language ?? DEFAULT_WORKFLOW_LANGUAGE, - version: workflow.version ?? null, - practice: workflow.practice ?? DEFAULT_WORKFLOW_PRACTICE, - jurisdictions: workflow.jurisdictions ?? DEFAULT_WORKFLOW_JURISDICTIONS, created_at: workflow.created_at ?? null, }; } @@ -280,11 +322,11 @@ workflowsRouter.get("/", requireAuth, asyncRoute(async (req, res) => { } const systemWorkflows = SYSTEM_WORKFLOWS.filter( - (workflow) => !workflowType || workflow.type === workflowType, + (workflow) => !workflowType || workflow.metadata.type === workflowType, ).map(withSystemWorkflowAccess); const databaseWorkflows = ((data ?? []) as WorkflowRecord[]).filter( (workflow) => !SYSTEM_WORKFLOW_IDS.has(workflow.id), - ); + ).map(withDatabaseWorkflow); res.json([...systemWorkflows, ...databaseWorkflows]); })); @@ -293,40 +335,36 @@ workflowsRouter.get("/", requireAuth, asyncRoute(async (req, res) => { workflowsRouter.post("/", requireAuth, asyncRoute(async (req, res) => { const userId = res.locals.userId as string; const { - title, - type, - prompt_md, + metadata, + skill_md, columns_config, - language, - practice, - jurisdictions, } = req.body as { - title: string; - type: string; - prompt_md?: string; + metadata?: Partial<WorkflowMetadata>; + skill_md?: string; columns_config?: unknown; - language?: unknown; - practice?: string | null; - jurisdictions?: unknown; }; + const title = metadata?.title; + const type = metadata?.type; if (!title?.trim()) - return void res.status(400).json({ detail: "title is required" }); - if (!["assistant", "tabular"].includes(type)) + return void res.status(400).json({ detail: "metadata.title is required" }); + if (type !== "assistant" && type !== "tabular") return void res .status(400) - .json({ detail: "type must be 'assistant' or 'tabular'" }); + .json({ detail: "metadata.type must be 'assistant' or 'tabular'" }); const db = createServerSupabase(); devLog("[workflows/create] request", { userId, title: title.trim(), type, - hasPrompt: typeof prompt_md === "string" && prompt_md.length > 0, + hasSkill: typeof skill_md === "string" && skill_md.length > 0, columnCount: Array.isArray(columns_config) ? columns_config.length : null, - language: normalizeOptionalString(language) ?? DEFAULT_WORKFLOW_LANGUAGE, - practice: practice ?? null, + language: + normalizeOptionalString(metadata?.language) ?? DEFAULT_WORKFLOW_LANGUAGE, + practice: metadata?.practice ?? null, jurisdictions: - normalizeJurisdictions(jurisdictions) ?? DEFAULT_WORKFLOW_JURISDICTIONS, + normalizeJurisdictions(metadata?.jurisdictions) ?? + DEFAULT_WORKFLOW_JURISDICTIONS, }); const { data, error } = await db .from("workflows") @@ -334,13 +372,15 @@ workflowsRouter.post("/", requireAuth, asyncRoute(async (req, res) => { user_id: userId, title: title.trim(), type, - prompt_md: prompt_md ?? null, + prompt_md: skill_md ?? null, columns_config: columns_config ?? null, - language: normalizeOptionalString(language) ?? DEFAULT_WORKFLOW_LANGUAGE, + language: + normalizeOptionalString(metadata?.language) ?? DEFAULT_WORKFLOW_LANGUAGE, practice: - normalizeOptionalString(practice) ?? DEFAULT_WORKFLOW_PRACTICE, + normalizeOptionalString(metadata?.practice) ?? DEFAULT_WORKFLOW_PRACTICE, jurisdictions: - normalizeJurisdictions(jurisdictions) ?? DEFAULT_WORKFLOW_JURISDICTIONS, + normalizeJurisdictions(metadata?.jurisdictions) ?? + DEFAULT_WORKFLOW_JURISDICTIONS, }) .select("*") .single(); @@ -362,7 +402,7 @@ workflowsRouter.post("/", requireAuth, asyncRoute(async (req, res) => { title: data?.title, type: data?.type, }); - res.status(201).json(withDatabaseWorkflow(data)); + res.status(201).json(withDatabaseWorkflow(data as WorkflowRecord)); })); async function handleWorkflowUpdate(req: Request, res: Response) { @@ -370,15 +410,17 @@ async function handleWorkflowUpdate(req: Request, res: Response) { const userEmail = res.locals.userEmail as string | undefined; const { workflowId } = req.params; const updates: Record<string, unknown> = {}; - if (req.body.title != null) updates.title = req.body.title; - if (req.body.prompt_md != null) updates.prompt_md = req.body.prompt_md; + const metadata = req.body.metadata as Partial<WorkflowMetadata> | undefined; + if (metadata?.title != null) updates.title = metadata.title; + if (req.body.skill_md != null) updates.prompt_md = req.body.skill_md; if (req.body.columns_config != null) updates.columns_config = req.body.columns_config; - if ("language" in req.body) - updates.language = normalizeOptionalString(req.body.language); - if ("practice" in req.body) updates.practice = req.body.practice ?? null; - if ("jurisdictions" in req.body) - updates.jurisdictions = normalizeJurisdictions(req.body.jurisdictions); + if (metadata && "language" in metadata) + updates.language = normalizeOptionalString(metadata.language); + if (metadata && "practice" in metadata) + updates.practice = metadata.practice ?? null; + if (metadata && "jurisdictions" in metadata) + updates.jurisdictions = normalizeJurisdictions(metadata.jurisdictions); const db = createServerSupabase(); const access = await resolveWorkflowAccess(workflowId, userId, userEmail, db); @@ -398,7 +440,7 @@ async function handleWorkflowUpdate(req: Request, res: Response) { .status(404) .json({ detail: "Workflow not found or not editable" }); res.json( - withWorkflowAccess(withDatabaseWorkflow(data), { + withWorkflowAccess(withDatabaseWorkflow(data as WorkflowRecord), { allowEdit: access.allowEdit, isOwner: access.isOwner, }), @@ -506,7 +548,7 @@ workflowsRouter.post("/:workflowId/open-source", requireAuth, asyncRoute(async ( .json({ detail: "Workflow not found or not open-sourceable" }); } - const workflowRecord = withDatabaseWorkflow(workflow as WorkflowRecord); + const workflowRecord = workflow as WorkflowRecord; const validationError = validateOpenSourceWorkflow(workflowRecord); if (validationError) { return void res.status(400).json({ detail: validationError }); @@ -620,7 +662,7 @@ workflowsRouter.get("/:workflowId", requireAuth, asyncRoute(async (req, res) => : null; res.json( withOpenSourceSubmission( - withWorkflowAccess(access.workflow, { + withWorkflowAccess(withDatabaseWorkflow(access.workflow), { allowEdit: access.allowEdit, isOwner: access.isOwner, }), diff --git a/frontend/bun.lock b/frontend/bun.lock index 30af134..9d95d1e 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -7,6 +7,8 @@ "dependencies": { "@aws-sdk/client-s3": "^3.1025.0", "@aws-sdk/s3-request-presigner": "^3.1025.0", + "@fortune-sheet/core": "^1.0.4", + "@fortune-sheet/react": "^1.0.4", "@opennextjs/cloudflare": "^1.19.9", "@openrouter/sdk": "^0.3.11", "@radix-ui/react-dropdown-menu": "^2.1.16", @@ -15,6 +17,8 @@ "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/auth-js": "^2.101.1", "@supabase/supabase-js": "^2.81.1", + "@tiptap/core": "^3.22.3", + "@tiptap/extension-table": "^3.22.3", "@tiptap/pm": "^3.22.3", "@tiptap/react": "^3.22.3", "@tiptap/starter-kit": "^3.22.3", @@ -28,6 +32,7 @@ "exceljs": "^4.4.0", "katex": "^0.16.27", "lucide-react": "^0.553.0", + "luckyexcel": "^1.0.1", "mammoth": "^1.11.0", "marked": "^17.0.1", "next": "^16.2.6", @@ -329,6 +334,14 @@ "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="], + "@formulajs/formulajs": ["@formulajs/formulajs@2.9.3", "", { "dependencies": { "bessel": "^1.0.2", "jstat": "^1.9.2" }, "bin": { "implementation-stats": "bin/implementation-stats" } }, "sha512-WpgiuJaBl/Hcda9Ti8a7mlnw/vUZkJrtjABvojz6P6mo6d8EscudyA7iAt/kTLsgi0c8zfmzQd/Yjb4ASFkw+g=="], + + "@fortune-sheet/core": ["@fortune-sheet/core@1.0.4", "", { "dependencies": { "@fortune-sheet/formula-parser": "^0.2.13", "dayjs": "^1.11.0", "immer": "^9.0.12", "lodash": "^4.17.21", "numeral": "^2.0.6", "uuid": "^8.3.2" } }, "sha512-CDnUVebfvtT++CymNRw0qnY4sz6zYO3KZazlH+nG6otkRkZ05Bvt7NXqVhmKKSSxIvJR4R6h50abu/dVGBpjpw=="], + + "@fortune-sheet/formula-parser": ["@fortune-sheet/formula-parser@0.2.13", "", { "dependencies": { "@formulajs/formulajs": "^2.9.3", "tiny-emitter": "^2.1.0" } }, "sha512-za2ZVQ5ZfMSPCtL8MdqhCthPip7AoeU4MPyd5UDo4RCl9/arrv1Jz0y755mACVVi4suSZxrzWoJGDkLmofoSmw=="], + + "@fortune-sheet/react": ["@fortune-sheet/react@1.0.4", "", { "dependencies": { "@fortune-sheet/core": "^1.0.4", "@types/regenerator-runtime": "^0.13.6", "immer": "^9.0.12", "lodash": "^4.17.21", "regenerator-runtime": "^0.14.1" }, "peerDependencies": { "react": ">= 18.2", "react-dom": ">= 18.2" } }, "sha512-v+BU5mmp2hhUe4gRF+vOJ3j8zZkzHU0kzhTZzp+Nn00wA/RArMr+CO+SAluKlCPAsTZgPwmgOEK685WPqJ5XNw=="], + "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="], "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="], @@ -745,6 +758,8 @@ "@tiptap/extension-strike": ["@tiptap/extension-strike@3.22.4", "", { "peerDependencies": { "@tiptap/core": "3.22.4" } }, "sha512-aRHWQj42HiailXSC9LkKYM3jWMcSeGwOjbqM4PiuxQZmHVDRFmeHkfJItOdn2cSHaO0vuEVK+TvrWUWsBFi3pg=="], + "@tiptap/extension-table": ["@tiptap/extension-table@3.27.3", "", { "peerDependencies": { "@tiptap/core": "3.27.3", "@tiptap/pm": "3.27.3" } }, "sha512-P7iQ0SkkDWZwnXzQDOVFLXktXlX67VQ3s2YxoJYKTHlc8rPZ4UCaSogFq0G2APyBlizlY3LbMNrDeZAVFOD8wQ=="], + "@tiptap/extension-text": ["@tiptap/extension-text@3.22.4", "", { "peerDependencies": { "@tiptap/core": "3.22.4" } }, "sha512-mM69uUW5cSxIhyEpWXi/YcfyupcJMDLCPEfYi62awH0iOP/LRoCv/nHjJq4Hyj/KxRJbe8HKwIUnqaCUf7m5Pg=="], "@tiptap/extension-underline": ["@tiptap/extension-underline@3.22.4", "", { "peerDependencies": { "@tiptap/core": "3.22.4" } }, "sha512-08kGdbhIrA6h10GWXqOkqIveaBj5tmxclK208/nUIAlonI9hPd739vu7fmVtpnmqCnSSNpoRtU4u6Gj5at0ZpA=="], @@ -819,6 +834,8 @@ "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="], + "@types/regenerator-runtime": ["@types/regenerator-runtime@0.13.8", "", {}, "sha512-jjKoBekfYDH331060tZhosdJVDnXIXx+T8Iw2h2T4HEds6Ddb2lr0JxD15+XPKlXwRHRNgZoY+4Fb2ykoqzHBg=="], + "@types/tough-cookie": ["@types/tough-cookie@4.0.5", "", {}, "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA=="], "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="], @@ -973,6 +990,8 @@ "bcp-47-match": ["bcp-47-match@2.0.3", "", {}, "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ=="], + "bessel": ["bessel@1.0.2", "", {}, "sha512-Al3nHGQGqDYqqinXhQzmwmcRToe/3WyBv4N8aZc5Pef8xw2neZlR9VPi84Sa23JtgWcucu18HxVZrnI0fn2etw=="], + "big-integer": ["big-integer@1.6.52", "", {}, "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg=="], "binary": ["binary@0.3.0", "", { "dependencies": { "buffers": "~0.1.1", "chainsaw": "~0.1.0" } }, "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg=="], @@ -1429,7 +1448,7 @@ "immediate": ["immediate@3.0.6", "", {}, "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="], - "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="], + "immer": ["immer@9.0.21", "", {}, "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="], "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="], @@ -1541,6 +1560,8 @@ "json5": ["json5@1.0.2", "", { "dependencies": { "minimist": "^1.2.0" }, "bin": { "json5": "lib/cli.js" } }, "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA=="], + "jstat": ["jstat@1.9.6", "", {}, "sha512-rPBkJbK2TnA8pzs93QcDDPlKcrtZWuuCo2dVR0TFLOJSxhqfWOVCSp8aV3/oSbn+4uY4yw1URtLpHQedtmXfug=="], + "jsx-ast-utils": ["jsx-ast-utils@3.3.5", "", { "dependencies": { "array-includes": "^3.1.6", "array.prototype.flat": "^1.3.1", "object.assign": "^4.1.4", "object.values": "^1.1.6" } }, "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ=="], "jszip": ["jszip@3.10.1", "", { "dependencies": { "lie": "~3.3.0", "pako": "~1.0.2", "readable-stream": "~2.3.6", "setimmediate": "^1.0.5" } }, "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g=="], @@ -1593,6 +1614,8 @@ "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="], + "lodash": ["lodash@4.18.1", "", {}, "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="], + "lodash.defaults": ["lodash.defaults@4.2.0", "", {}, "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="], "lodash.difference": ["lodash.difference@4.5.0", "", {}, "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="], @@ -1631,6 +1654,8 @@ "lucide-react": ["lucide-react@0.553.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-BRgX5zrWmNy/lkVAe0dXBgd7XQdZ3HTf+Hwe3c9WK6dqgnj9h+hxV+MDncM88xDWlCq27+TKvHGE70ViODNILw=="], + "luckyexcel": ["luckyexcel@1.0.1", "", { "dependencies": { "jszip": "^3.5.0" } }, "sha512-hvbJmCXNp/vST/huA6sieDn32Ib8bd80L9aIu5ZGxniJvZle7VlpHZrl6weLGaEnX99+t7cPAoYGqrqbfZp/AQ=="], + "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="], "mammoth": ["mammoth@1.11.0", "", { "dependencies": { "@xmldom/xmldom": "^0.8.6", "argparse": "~1.0.3", "base64-js": "^1.5.1", "bluebird": "~3.4.0", "dingbat-to-unicode": "^1.0.1", "jszip": "^3.7.1", "lop": "^0.4.2", "path-is-absolute": "^1.0.0", "underscore": "^1.13.1", "xmlbuilder": "^10.0.0" }, "bin": { "mammoth": "bin/mammoth" } }, "sha512-BcEqqY/BOwIcI1iR5tqyVlqc3KIaMRa4egSoK83YAVrBf6+yqdAAbtUcFDCWX8Zef8/fgNZ6rl4VUv+vVX8ddQ=="], @@ -1795,6 +1820,8 @@ "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="], + "numeral": ["numeral@2.0.6", "", {}, "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="], + "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="], "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="], @@ -1951,6 +1978,8 @@ "refractor": ["refractor@5.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/prismjs": "^1.0.0", "hastscript": "^9.0.0", "parse-entities": "^4.0.0" } }, "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw=="], + "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="], + "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="], "rehype": ["rehype@13.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "rehype-parse": "^9.0.0", "rehype-stringify": "^10.0.0", "unified": "^11.0.0" } }, "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A=="], @@ -2131,6 +2160,8 @@ "terser": ["terser@5.16.9", "", { "dependencies": { "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, "bin": { "terser": "bin/terser" } }, "sha512-HPa/FdTB9XGI2H1/keLFZHxl6WNvAI4YalHGtDQTlMnJcoqSab1UwL4l1hGEhs6/GmLHBZIg/YgB++jcbzoOEg=="], + "tiny-emitter": ["tiny-emitter@2.1.0", "", {}, "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="], + "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="], "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="], @@ -2511,6 +2542,8 @@ "readdir-glob/minimatch": ["minimatch@5.1.9", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw=="], + "recharts/immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="], + "rehype-attr/unist-util-visit": ["unist-util-visit@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg=="], "rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="], diff --git a/frontend/package.json b/frontend/package.json index 1877d7b..a76e08c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,7 +4,6 @@ "private": true, "scripts": { "dev": "next dev", - "prebuild": "node ../scripts/build-workflows.js", "build": "next build", "start": "next start", "lint": "eslint", diff --git a/frontend/src/app/(pages)/account/AccountSection.tsx b/frontend/src/app/(pages)/account/AccountSection.tsx index 5858593..5fc48c9 100644 --- a/frontend/src/app/(pages)/account/AccountSection.tsx +++ b/frontend/src/app/(pages)/account/AccountSection.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; import { accountGlassSectionClassName } from "./accountStyles"; export function AccountSection({ diff --git a/frontend/src/app/(pages)/account/AccountToggle.tsx b/frontend/src/app/(pages)/account/AccountToggle.tsx index 89918a2..94df639 100644 --- a/frontend/src/app/(pages)/account/AccountToggle.tsx +++ b/frontend/src/app/(pages)/account/AccountToggle.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; import { Loader2 } from "lucide-react"; type AccountToggleSize = "sm" | "md"; diff --git a/frontend/src/app/(pages)/account/accountStyles.ts b/frontend/src/app/(pages)/account/accountStyles.ts index 82d1856..acdb84d 100644 --- a/frontend/src/app/(pages)/account/accountStyles.ts +++ b/frontend/src/app/(pages)/account/accountStyles.ts @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; export const accountGlassInputClassName = cn( "rounded-lg px-3 text-gray-900 placeholder:text-gray-400", diff --git a/frontend/src/app/(pages)/account/api-keys/page.tsx b/frontend/src/app/(pages)/account/api-keys/page.tsx index 8ed5f85..f9da3d3 100644 --- a/frontend/src/app/(pages)/account/api-keys/page.tsx +++ b/frontend/src/app/(pages)/account/api-keys/page.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from "react"; import { Eye, EyeOff } from "lucide-react"; -import { Input } from "@/components/ui/input"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { Input } from "@/app/components/ui/input"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { MfaVerificationPopup, needsMfaVerification, diff --git a/frontend/src/app/(pages)/account/connectors/page.tsx b/frontend/src/app/(pages)/account/connectors/page.tsx index 03e6fb0..a983065 100644 --- a/frontend/src/app/(pages)/account/connectors/page.tsx +++ b/frontend/src/app/(pages)/account/connectors/page.tsx @@ -9,7 +9,7 @@ import { Plus, RefreshCw, } from "lucide-react"; -import { Input } from "@/components/ui/input"; +import { Input } from "@/app/components/ui/input"; import { Modal } from "@/app/components/modals/Modal"; import { NewMcpModal } from "@/app/components/account/NewMcpModal"; import { diff --git a/frontend/src/app/(pages)/account/features/page.tsx b/frontend/src/app/(pages)/account/features/page.tsx index 73742fb..4ecfa4e 100644 --- a/frontend/src/app/(pages)/account/features/page.tsx +++ b/frontend/src/app/(pages)/account/features/page.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react"; import { Check } from "lucide-react"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { AccountSection } from "../AccountSection"; export default function FeaturesPage() { diff --git a/frontend/src/app/(pages)/account/layout.tsx b/frontend/src/app/(pages)/account/layout.tsx index 558396a..8c4a187 100644 --- a/frontend/src/app/(pages)/account/layout.tsx +++ b/frontend/src/app/(pages)/account/layout.tsx @@ -3,7 +3,7 @@ import { useEffect } from "react"; import { usePathname, useRouter } from "next/navigation"; import { Loader2 } from "lucide-react"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { accountTabButtonClassName } from "./accountStyles"; interface TabDef { diff --git a/frontend/src/app/(pages)/account/models/page.tsx b/frontend/src/app/(pages)/account/models/page.tsx index 274f977..64e6a57 100644 --- a/frontend/src/app/(pages)/account/models/page.tsx +++ b/frontend/src/app/(pages)/account/models/page.tsx @@ -9,8 +9,8 @@ import { DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +} from "@/app/components/ui/dropdown-menu"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import type { ApiKeyState } from "@/app/lib/mikeApi"; import { MODELS, diff --git a/frontend/src/app/(pages)/account/page.tsx b/frontend/src/app/(pages)/account/page.tsx index 4a90aab..5592052 100644 --- a/frontend/src/app/(pages)/account/page.tsx +++ b/frontend/src/app/(pages)/account/page.tsx @@ -3,10 +3,10 @@ import { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { LogOut, Trash2 } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { Button } from "@/app/components/ui/button"; +import { Input } from "@/app/components/ui/input"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { MfaVerificationPopup, diff --git a/frontend/src/app/(pages)/account/privacy-data/page.tsx b/frontend/src/app/(pages)/account/privacy-data/page.tsx index 936a429..2347ede 100644 --- a/frontend/src/app/(pages)/account/privacy-data/page.tsx +++ b/frontend/src/app/(pages)/account/privacy-data/page.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { Download, Trash2 } from "lucide-react"; -import { Button } from "@/components/ui/button"; +import { Button } from "@/app/components/ui/button"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { diff --git a/frontend/src/app/(pages)/account/security/page.tsx b/frontend/src/app/(pages)/account/security/page.tsx index b56c271..18d332a 100644 --- a/frontend/src/app/(pages)/account/security/page.tsx +++ b/frontend/src/app/(pages)/account/security/page.tsx @@ -8,9 +8,9 @@ import { type KeyboardEvent, } from "react"; import { Copy, Loader2 } from "lucide-react"; -import { supabase } from "@/lib/supabase"; -import { Button } from "@/components/ui/button"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { supabase } from "@/app/lib/supabase"; +import { Button } from "@/app/components/ui/button"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { isMfaRequiredError } from "@/app/lib/mikeApi"; import { Modal } from "@/app/components/modals/Modal"; import { diff --git a/frontend/src/app/(pages)/layout.tsx b/frontend/src/app/(pages)/layout.tsx index d088b06..059af46 100644 --- a/frontend/src/app/(pages)/layout.tsx +++ b/frontend/src/app/(pages)/layout.tsx @@ -3,7 +3,7 @@ import { useCallback, useState, useEffect } from "react"; import { useRouter } from "next/navigation"; import { PanelLeft } from "lucide-react"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { ChatHistoryProvider } from "@/app/contexts/ChatHistoryContext"; import { SidebarContext } from "@/app/contexts/SidebarContext"; import { PageChromeContext } from "@/app/contexts/PageChromeContext"; diff --git a/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx b/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx index 7f74bae..d892292 100644 --- a/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx @@ -43,9 +43,9 @@ import { PdfView } from "@/app/components/shared/views/PdfView"; import { SpreadsheetView } from "@/app/components/shared/views/SpreadsheetView"; import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import { DocxView } from "@/app/components/shared/views/DocxView"; -import { MikeIcon } from "@/components/chat/mike-icon"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { useSidebar } from "@/app/contexts/SidebarContext"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { HeaderActionsMenu } from "@/app/components/shared/HeaderActionsMenu"; @@ -1116,7 +1116,6 @@ export default function ProjectAssistantChatPage({ params }: Props) { ) } rounded={false} - bordered={false} /> ) : isSpreadsheetFilename(activeTab.filename) ? ( <SpreadsheetView @@ -1124,7 +1123,6 @@ export default function ProjectAssistantChatPage({ params }: Props) { documentId={activeTab.documentId} versionId={activeTab.versionId} rounded={false} - bordered={false} /> ) : ( <PdfView @@ -1132,7 +1130,6 @@ export default function ProjectAssistantChatPage({ params }: Props) { doc={{ document_id: activeTab.documentId }} quotes={activeQuotes ?? undefined} rounded={false} - bordered={false} /> ) ) : ( diff --git a/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx b/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx index 6565bd9..4ca0401 100644 --- a/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx @@ -10,7 +10,7 @@ import { useProjectWorkspace, } from "@/app/components/projects/ProjectWorkspace"; import type { Chat } from "@/app/components/shared/types"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; interface Props { params: Promise<{ id: string }>; diff --git a/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx b/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx index 7792002..bc3c511 100644 --- a/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx @@ -14,7 +14,7 @@ import { useProjectWorkspace, } from "@/app/components/projects/ProjectWorkspace"; import type { TabularReview } from "@/app/components/shared/types"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; interface Props { params: Promise<{ id: string }>; diff --git a/frontend/src/app/(pages)/tabular-reviews/page.tsx b/frontend/src/app/(pages)/tabular-reviews/page.tsx index 98ea83f..669028a 100644 --- a/frontend/src/app/(pages)/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/tabular-reviews/page.tsx @@ -19,7 +19,7 @@ import { TableToolbar } from "@/app/components/shared/TableToolbar"; import { NewTRModal } from "@/app/components/tabular/NewTRModal"; import { TabularReviewDetailsModal } from "@/app/components/tabular/TabularReviewDetailsModal"; import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { GLASS_DROPDOWN, diff --git a/frontend/src/app/components/account/NewMcpModal.tsx b/frontend/src/app/components/account/NewMcpModal.tsx new file mode 100644 index 0000000..74ca36e --- /dev/null +++ b/frontend/src/app/components/account/NewMcpModal.tsx @@ -0,0 +1,333 @@ +"use client"; + +import { Check, ChevronDown, Eye, EyeOff, Loader2 } from "lucide-react"; +import { Input } from "@/app/components/ui/input"; +import { Modal } from "@/app/components/modals/Modal"; +import type { McpConnectorSummary } from "@/app/lib/mikeApi"; +import { + accountGlassIconButtonClassName, + accountGlassInputClassName, +} from "@/app/(pages)/account/accountStyles"; + +export type NewMcpDraft = { + name: string; + serverUrl: string; + bearerToken: string; + customHeaders: string; +}; + +export type NewMcpStep = "form" | "working" | "auth" | "success"; + +interface NewMcpModalProps { + open: boolean; + draft: NewMcpDraft; + step: NewMcpStep; + result: McpConnectorSummary | null; + error: string | null; + authMessage: string | null; + showToken: boolean; + showAdvanced: boolean; + onDraftChange: (draft: NewMcpDraft) => void; + onShowTokenChange: (show: boolean) => void; + onShowAdvancedChange: (show: boolean) => void; + onClose: () => void; + onSubmit: () => Promise<void>; + onOpenConnector: (connectorId: string) => void; +} + +export function NewMcpModal({ + open, + draft, + step, + result, + error, + authMessage, + showToken, + showAdvanced, + onDraftChange, + onShowTokenChange, + onShowAdvancedChange, + onClose, + onSubmit, + onOpenConnector, +}: NewMcpModalProps) { + const canSubmit = + draft.name.trim().length > 0 && + draft.serverUrl.trim().length > 0 && + step !== "working" && + step !== "auth"; + + return ( + <Modal + open={open} + onClose={onClose} + breadcrumbs={[ + "Connectors", + step === "success" + ? "Connector added" + : step === "auth" + ? "Authenticate connector" + : "New MCP connector", + ]} + size="lg" + primaryAction={ + step === "success" && result + ? { + label: "View connector", + onClick: () => onOpenConnector(result.id), + } + : { + label: + step === "working" + ? "Connecting..." + : step === "auth" + ? "Authorizing..." + : "Connect", + icon: + step === "working" || step === "auth" ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : undefined, + onClick: () => void onSubmit(), + disabled: !canSubmit, + } + } + cancelAction={ + step === "working" || step === "auth" + ? false + : { + label: step === "success" ? "Done" : "Cancel", + onClick: onClose, + } + } + footerStatus={ + error ? ( + <div className="rounded-xl border border-white/70 bg-white/75 px-3 py-2 text-sm text-red-600 shadow-[0_12px_32px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.75)] backdrop-blur-xl"> + {error} + </div> + ) : null + } + > + {step === "success" && result ? ( + <NewMcpSuccess connector={result} /> + ) : step === "auth" ? ( + <NewMcpAuth + message={ + authMessage ?? + "Complete authorization in the popup to finish connecting this MCP server." + } + /> + ) : ( + <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pb-4"> + <p className="text-sm text-gray-500"> + The assistant will have access to this MCP server and + its enabled tools. + </p> + <NewMcpForm + draft={draft} + showToken={showToken} + showAdvanced={showAdvanced} + disabled={step === "working"} + onDraftChange={onDraftChange} + onShowTokenChange={onShowTokenChange} + onShowAdvancedChange={onShowAdvancedChange} + /> + </div> + )} + </Modal> + ); +} + +function NewMcpForm({ + draft, + showToken, + showAdvanced, + disabled, + onDraftChange, + onShowTokenChange, + onShowAdvancedChange, +}: { + draft: NewMcpDraft; + showToken: boolean; + showAdvanced: boolean; + disabled: boolean; + onDraftChange: (draft: NewMcpDraft) => void; + onShowTokenChange: (show: boolean) => void; + onShowAdvancedChange: (show: boolean) => void; +}) { + return ( + <div className="grid gap-3 pt-1"> + <label className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)] sm:items-center"> + <span className="text-xs font-medium text-gray-500"> + Label + </span> + <Input + value={draft.name} + onChange={(event) => + onDraftChange({ ...draft, name: event.target.value }) + } + placeholder="Connector label" + className={`h-8 text-sm ${accountGlassInputClassName}`} + disabled={disabled} + /> + </label> + <label className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)] sm:items-center"> + <span className="text-xs font-medium text-gray-500"> + URL endpoint + </span> + <Input + value={draft.serverUrl} + onChange={(event) => + onDraftChange({ + ...draft, + serverUrl: event.target.value, + }) + } + placeholder="https://mcp.example.com/mcp" + className={`h-8 text-sm ${accountGlassInputClassName}`} + disabled={disabled} + /> + </label> + <div className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)] sm:items-start"> + <span className="pt-2 text-xs font-medium text-gray-500"> + Bearer token + </span> + <div className="min-w-0"> + <div className="relative"> + <Input + value={draft.bearerToken} + onChange={(event) => + onDraftChange({ + ...draft, + bearerToken: event.target.value, + }) + } + type={showToken ? "text" : "password"} + placeholder="Bearer token" + className={`h-8 pr-10 text-sm ${accountGlassInputClassName}`} + autoComplete="off" + spellCheck={false} + disabled={disabled} + /> + {draft.bearerToken && ( + <button + type="button" + className={`absolute inset-y-1 right-1.5 flex items-center ${accountGlassIconButtonClassName}`} + onClick={() => onShowTokenChange(!showToken)} + aria-label={ + showToken ? "Hide token" : "Show token" + } + disabled={disabled} + > + {showToken ? ( + <EyeOff className="h-4 w-4" /> + ) : ( + <Eye className="h-4 w-4" /> + )} + </button> + )} + </div> + <p className="mt-1 text-right text-xs text-gray-500"> + Tokens are stored encrypted. + </p> + </div> + </div> + <div className="grid gap-2"> + <button + type="button" + onClick={() => onShowAdvancedChange(!showAdvanced)} + className="inline-flex items-center gap-1 justify-self-start text-xs font-medium text-gray-500 transition-colors hover:text-gray-900" + disabled={disabled} + > + Advanced + <ChevronDown + className={`h-3.5 w-3.5 transition-transform ${ + showAdvanced ? "" : "-rotate-90" + }`} + /> + </button> + {showAdvanced && ( + <label className="grid gap-2 sm:grid-cols-[96px_minmax(0,1fr)] sm:items-start"> + <span className="text-xs font-medium text-gray-500"> + Custom headers + </span> + <div className="min-w-0"> + <textarea + value={draft.customHeaders} + onChange={(event) => + onDraftChange({ + ...draft, + customHeaders: event.target.value, + }) + } + placeholder='{"X-API-Key":"secret"}' + className={`min-h-20 w-full resize-y rounded-lg px-3 py-2 text-sm outline-none ${accountGlassInputClassName}`} + autoComplete="off" + spellCheck={false} + disabled={disabled} + /> + <p className="mt-1 text-right text-xs text-gray-500"> + Secrets are stored encrypted. + </p> + </div> + </label> + )} + </div> + </div> + ); +} + +function NewMcpSuccess({ connector }: { connector: McpConnectorSummary }) { + return ( + <div className="flex h-full min-h-0 flex-1 flex-col gap-4 pb-4"> + <div className="flex items-start gap-3 rounded-xl border border-green-100/80 bg-green-50/80 px-3 py-3 text-green-800 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-xl"> + <Check className="mt-0.5 h-4 w-4 shrink-0 text-green-600" /> + <p className="min-w-0 truncate text-sm font-medium"> + {connector.name} is connected.{" "} + <span className="font-normal text-green-700"> + {connector.tools.length} tools discovered. + </span> + </p> + </div> + <div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-gray-100 bg-white/60"> + <div className="max-h-full overflow-y-auto divide-y divide-gray-100"> + {connector.tools.map((tool) => ( + <div + key={tool.openaiToolName} + className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 px-3 py-2" + > + <div className="min-w-0"> + <p className="truncate text-sm font-medium text-gray-800"> + {tool.title ?? tool.openaiToolName} + </p> + {tool.description && ( + <p className="truncate text-xs text-gray-500"> + {tool.description} + </p> + )} + </div> + <span className="text-xs text-gray-400"> + {tool.enabled ? "Enabled" : "Disabled"} + </span> + </div> + ))} + </div> + </div> + </div> + ); +} + +function NewMcpAuth({ message }: { message: string }) { + return ( + <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3 pb-4 text-center"> + <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/70 bg-white/75 text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-xl"> + <Loader2 className="h-4 w-4 animate-spin" /> + </div> + <div className="max-w-sm space-y-1"> + <h3 className="text-sm font-medium text-gray-900"> + Authentication required + </h3> + <p className="text-sm text-gray-500">{message}</p> + </div> + </div> + ); +} diff --git a/frontend/src/app/components/assistant/AddDocButton.tsx b/frontend/src/app/components/assistant/AddDocButton.tsx index b1b8924..ee80089 100644 --- a/frontend/src/app/components/assistant/AddDocButton.tsx +++ b/frontend/src/app/components/assistant/AddDocButton.tsx @@ -1,116 +1,40 @@ "use client"; -import { useRef, useState } from "react"; -import { PlusIcon, Upload, LayoutGridIcon, Loader2Icon } from "lucide-react"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { uploadStandaloneDocument } from "@/app/lib/mikeApi"; -import type { Document } from "../shared/types"; +import { PlusIcon } from "lucide-react"; interface Props { - onSelectDoc: (doc: Document) => void; onBrowseAll: () => void; selectedDocIds?: string[]; hideLabel?: boolean; } export function AddDocButton({ - onSelectDoc, onBrowseAll, selectedDocIds = [], hideLabel = false, }: Props) { - const [isOpen, setIsOpen] = useState(false); - const [uploading, setUploading] = useState(false); - const fileInputRef = useRef<HTMLInputElement>(null); - - const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => { - const files = Array.from(e.target.files || []); - if (!files.length) return; - setUploading(true); - try { - const uploaded = await Promise.all( - files.map((f) => uploadStandaloneDocument(f)), - ); - uploaded.forEach((doc) => onSelectDoc(doc)); - } catch (err) { - console.error("Upload failed:", err); - } finally { - setUploading(false); - if (fileInputRef.current) fileInputRef.current.value = ""; - } - }; - return ( - <> - <input - ref={fileInputRef} - type="file" - accept=".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt" - multiple - className="hidden" - onChange={handleUpload} - /> - <DropdownMenu onOpenChange={setIsOpen}> - <DropdownMenuTrigger asChild> - <button - className={`flex items-center gap-1 px-2 h-8 rounded-lg text-sm transition-colors cursor-pointer ${ - selectedDocIds.length > 0 - ? "text-black hover:bg-gray-100" - : "text-gray-400 hover:text-gray-700 hover:bg-gray-100" - } ${isOpen ? "bg-gray-100" : ""}`} - title="Add documents" - aria-label="Add documents" - > - {selectedDocIds.length > 0 ? ( - <span className="font-medium tabular-nums">{selectedDocIds.length}</span> - ) : ( - <PlusIcon - className={`h-4 w-4 shrink-0 transition-transform duration-300 ${isOpen ? "rotate-[135deg]" : ""}`} - /> - )} - <span className={hideLabel ? "hidden" : "hidden sm:inline"}> - {selectedDocIds.length === 1 - ? "Document" - : "Documents"} - </span> - </button> - </DropdownMenuTrigger> - <DropdownMenuContent - className="w-44 z-50" - side="bottom" - align="start" - > - <DropdownMenuItem - className="cursor-pointer" - disabled={uploading} - onSelect={(e) => { - e.preventDefault(); - fileInputRef.current?.click(); - }} - > - {uploading ? ( - <Loader2Icon className="h-4 w-4 mr-2 animate-spin text-gray-400" /> - ) : ( - <Upload className="h-4 w-4 mr-2 text-gray-500" /> - )} - <span className="text-sm"> - {uploading ? "Uploading…" : "Upload files"} - </span> - </DropdownMenuItem> - <DropdownMenuItem - className="cursor-pointer" - onClick={onBrowseAll} - > - <LayoutGridIcon className="h-4 w-4 mr-2 text-gray-500" /> - <span className="text-sm">Browse all</span> - </DropdownMenuItem> - </DropdownMenuContent> - </DropdownMenu> - </> + <button + type="button" + onClick={onBrowseAll} + className={`flex items-center gap-1 px-2 h-8 rounded-lg text-sm transition-colors cursor-pointer ${ + selectedDocIds.length > 0 + ? "text-black hover:bg-gray-100" + : "text-gray-400 hover:text-gray-700 hover:bg-gray-100" + }`} + title="Add documents" + aria-label="Add documents" + > + {selectedDocIds.length > 0 ? ( + <span className="font-medium tabular-nums"> + {selectedDocIds.length} + </span> + ) : ( + <PlusIcon className="h-4 w-4 shrink-0" /> + )} + <span className={hideLabel ? "hidden" : "hidden sm:inline"}> + {selectedDocIds.length === 1 ? "Document" : "Documents"} + </span> + </button> ); } diff --git a/frontend/src/app/components/assistant/AskInputPopup.tsx b/frontend/src/app/components/assistant/AskInputPopup.tsx index e993be8..35a9d33 100644 --- a/frontend/src/app/components/assistant/AskInputPopup.tsx +++ b/frontend/src/app/components/assistant/AskInputPopup.tsx @@ -9,7 +9,7 @@ import { Upload, X, } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; import type { AssistantEvent, Document } from "../shared/types"; import { FileTypeIcon } from "../shared/FileTypeIcon"; import { diff --git a/frontend/src/app/components/assistant/AssistantSidePanel.tsx b/frontend/src/app/components/assistant/AssistantSidePanel.tsx index 2570dcf..eb22b23 100644 --- a/frontend/src/app/components/assistant/AssistantSidePanel.tsx +++ b/frontend/src/app/components/assistant/AssistantSidePanel.tsx @@ -17,7 +17,7 @@ import { CaseLawPanel, type CaseTab, } from "./CaseLawPanel"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; // --------------------------------------------------------------------------- // Tab data diff --git a/frontend/src/app/components/assistant/CaseLawPanel.tsx b/frontend/src/app/components/assistant/CaseLawPanel.tsx index 51a04ee..e60e536 100644 --- a/frontend/src/app/components/assistant/CaseLawPanel.tsx +++ b/frontend/src/app/components/assistant/CaseLawPanel.tsx @@ -13,7 +13,7 @@ import { Download, ExternalLink, } from "lucide-react"; -import { MikeIcon } from "@/components/chat/mike-icon"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; import type { CaseCitationQuote } from "../shared/types"; import { clearDocxQuoteHighlights, @@ -27,7 +27,7 @@ import { getCourtlistenerOpinions, type CaseLawOpinion, } from "@/app/lib/mikeApi"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; export type CaseTab = { kind: "case"; diff --git a/frontend/src/app/components/assistant/ChatInput.tsx b/frontend/src/app/components/assistant/ChatInput.tsx index e7739da..206ef38 100644 --- a/frontend/src/app/components/assistant/ChatInput.tsx +++ b/frontend/src/app/components/assistant/ChatInput.tsx @@ -23,14 +23,14 @@ import { AssistantWorkflowModal } from "./AssistantWorkflowModal"; import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; import { ModelToggle } from "./ModelToggle"; import { useSelectedModel } from "@/app/hooks/useSelectedModel"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { getModelProvider, isModelAvailable, type ModelProvider, } from "@/app/lib/modelAvailability"; import type { Document, Message } from "../shared/types"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; export interface ChatInputHandle { addDoc: (doc: Document) => void; @@ -96,13 +96,6 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( return () => observer.disconnect(); }, []); - const handleAddDocFromProject = useCallback((doc: Document) => { - setAttachedDocs((prev) => { - if (prev.some((d) => d.id === doc.id)) return prev; - return [...prev, doc]; - }); - }, []); - const handleAddDocsFromSelector = useCallback( (selectedDocs: Document[]) => { setAttachedDocs((prev) => { @@ -244,7 +237,6 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( <div className="flex items-center gap-1"> {!hideAddDocButton && ( <AddDocButton - onSelectDoc={handleAddDocFromProject} onBrowseAll={() => setDocSelectorOpen(true)} selectedDocIds={attachedDocs.map( (d) => d.id, @@ -338,7 +330,10 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( open={workflowModalOpen} onClose={() => setWorkflowModalOpen(false)} onSelect={(wf) => { - setSelectedWorkflow({ id: wf.id, title: wf.title }); + setSelectedWorkflow({ + id: wf.id, + title: wf.metadata.title, + }); setWorkflowModalOpen(false); }} projectName={projectName} diff --git a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx new file mode 100644 index 0000000..5858a7f --- /dev/null +++ b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx @@ -0,0 +1,303 @@ +"use client"; + +import { useEffect, useState, type ReactNode } from "react"; +import { Minus, RectangleHorizontal, Rows3 } from "lucide-react"; +import { CiteButton } from "@/app/components/ui/cite-button"; + +export type CitationQuoteHeaderItem = { + id: string; + quote: string; + eyebrow?: string | null; + inlineDetail?: string | null; + detail?: string | null; + citationText?: string | null; +}; + +const QUOTE_GLASS_SURFACE = + "rounded-2xl bg-white/58 shadow-[0_5px_15px_rgba(15,23,42,0.095),inset_0_1px_0_rgba(255,255,255,0.88),inset_0_-8px_16px_rgba(255,255,255,0.16)] backdrop-blur-2xl"; +const QUOTE_CARD_SURFACE = "rounded-2xl bg-gray-100"; + +interface Props { + quotes: CitationQuoteHeaderItem[]; + error?: string | null; + isLoading?: boolean; + activeQuoteId?: string | null; + currentIndex?: number; + citationRef?: number; + citationText?: string; + onSelect?: (quote: CitationQuoteHeaderItem, index: number) => void; + onIndexChange?: (index: number) => void; +} + +export function CitationQuotesHeader({ + quotes, + error = null, + isLoading = false, + activeQuoteId = null, + currentIndex = 0, + citationRef, + citationText, + onSelect, + onIndexChange, +}: Props) { + const [isExpanded, setIsExpanded] = useState(true); + const [viewMode, setViewMode] = useState<"single" | "list">("single"); + const hasMultipleQuotes = quotes.length > 1; + const currentQuote = quotes[currentIndex]; + + useEffect(() => { + if (!hasMultipleQuotes && viewMode === "list") { + setViewMode("single"); + } + }, [hasMultipleQuotes, viewMode]); + + return ( + <div className="px-3"> + <div className={QUOTE_GLASS_SURFACE}> + <div className="flex h-10 items-center justify-between px-2"> + <div className="flex items-center gap-2"> + <p className="flex items-center gap-1.5 text-xs font-medium text-gray-700"> + <span>Citation</span> + {typeof citationRef === "number" && ( + <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-gray-200 px-1 text-[9px] font-medium text-gray-600"> + {citationRef} + </span> + )} + </p> + </div> + <div className="flex items-center gap-2"> + {hasMultipleQuotes && ( + <div className="flex items-center gap-1"> + <span className="mr-0.5 text-xs font-medium text-gray-500"> + Quotes + </span> + {quotes.map((quote, index) => ( + <button + key={quote.id} + type="button" + onClick={() => onIndexChange?.(index)} + className={`flex h-4 w-4 items-center justify-center rounded-full text-[9px] transition-colors ${ + currentIndex === index + ? "bg-white font-medium text-gray-800 shadow-[0_1px_3px_rgba(0,0,0,0.22)]" + : "bg-gray-200 text-gray-500 hover:bg-gray-300 hover:text-gray-700" + }`} + > + {index + 1} + </button> + ))} + </div> + )} + {currentQuote && ( + <CiteButton + quoteText={currentQuote.quote} + citationText={ + currentQuote.citationText ?? + citationText ?? + "" + } + className="rounded-sm bg-white px-2 h-6 text-gray-600 shadow-[0_1px_3px_rgba(0,0,0,0.22)] hover:bg-gray-50" + showText + /> + )} + <div + className={`relative flex h-6 items-center justify-start gap-1 rounded-sm bg-gray-200 p-1 ${ + hasMultipleQuotes ? "w-16" : "w-11" + }`} + > + <div + className={`absolute top-1 h-4 w-4 rounded bg-white shadow-sm transition-all ${ + !isExpanded + ? "left-1" + : hasMultipleQuotes && + viewMode === "list" + ? "left-11" + : "left-6" + }`} + /> + <button + type="button" + onClick={() => setIsExpanded(false)} + className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ + !isExpanded + ? "text-gray-800" + : "text-gray-500 hover:text-gray-700" + }`} + title="Minimize" + > + <Minus className="h-3 w-3" /> + </button> + <button + type="button" + onClick={() => { + setIsExpanded(true); + setViewMode("single"); + }} + className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ + isExpanded && viewMode === "single" + ? "text-gray-800" + : "text-gray-500 hover:text-gray-700" + }`} + title="Single quote" + > + <RectangleHorizontal className="h-3 w-3" /> + </button> + {hasMultipleQuotes && ( + <button + type="button" + onClick={() => { + setIsExpanded(true); + setViewMode("list"); + }} + className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ + isExpanded && viewMode === "list" + ? "text-gray-800" + : "text-gray-500 hover:text-gray-700" + }`} + title="Quote list" + > + <Rows3 className="h-3 w-3" /> + </button> + )} + </div> + </div> + </div> + {isExpanded && ( + <div className="px-2 pb-2"> + {isLoading ? ( + <RelevantQuoteSkeleton /> + ) : error ? ( + <RelevantQuoteMessage tone="error"> + {error} + </RelevantQuoteMessage> + ) : quotes.length > 0 ? ( + viewMode === "list" ? ( + <div className="space-y-2"> + {quotes.map((quote, index) => ( + <QuoteItem + key={quote.id} + quote={quote} + isActive={ + activeQuoteId === quote.id + } + onClick={() => + onSelect?.(quote, index) + } + /> + ))} + </div> + ) : currentQuote ? ( + <div className="flex flex-col gap-2"> + <QuoteItem + quote={currentQuote} + isActive={ + activeQuoteId === currentQuote.id + } + onClick={() => + onSelect?.( + currentQuote, + currentIndex, + ) + } + /> + </div> + ) : null + ) : ( + <RelevantQuoteMessage> + No relevant quotes. + </RelevantQuoteMessage> + )} + </div> + )} + </div> + </div> + ); +} + +function RelevantQuoteSkeleton() { + return ( + <div className={`animate-pulse px-3 py-2.5 ${QUOTE_CARD_SURFACE}`}> + <div className="h-3 w-28 rounded bg-gray-200" /> + <div className="mt-2.5 h-3 w-full rounded bg-gray-200" /> + <div className="mt-2 h-3 w-11/12 rounded bg-gray-200" /> + <div className="mt-2 h-3 w-2/3 rounded bg-gray-200" /> + </div> + ); +} + +function RelevantQuoteMessage({ + children, + tone = "neutral", +}: { + children: ReactNode; + tone?: "neutral" | "error"; +}) { + return ( + <div className={`px-3 py-2.5 ${QUOTE_CARD_SURFACE}`}> + <p + className={`font-serif text-sm leading-6 ${ + tone === "error" ? "text-red-700" : "text-gray-600" + }`} + > + {children} + </p> + </div> + ); +} + +function QuoteItem({ + quote, + isActive, + onClick, +}: { + quote: CitationQuoteHeaderItem; + isActive: boolean; + onClick: () => void; +}) { + return ( + <button + type="button" + onClick={onClick} + className={`w-full rounded-xl px-3 py-2.5 text-left transition-colors ${ + isActive ? "bg-blue-100/70" : "bg-gray-100 hover:bg-gray-200/70" + }`} + > + <div className="flex flex-col gap-1.5"> + {quote.eyebrow && ( + <p + className={`font-serif text-xs ${ + isActive ? "text-blue-900" : "text-gray-500" + }`} + > + {quote.eyebrow} + </p> + )} + <p + className={`font-serif text-sm leading-6 ${ + isActive ? "text-blue-950" : "text-gray-700" + }`} + > + “{quote.quote.replace(/"/g, "'")}” + {quote.inlineDetail && ( + <span + className={`text-sm ${ + isActive ? "text-blue-900" : "text-gray-500" + }`} + > + {" "} + ({quote.inlineDetail}) + </span> + )} + </p> + {quote.detail && ( + <p + className={`font-serif text-xs ${ + isActive ? "text-blue-900" : "text-gray-500" + }`} + > + {quote.detail} + </p> + )} + </div> + </button> + ); +} diff --git a/frontend/src/app/components/assistant/DocPanel.tsx b/frontend/src/app/components/assistant/DocPanel.tsx new file mode 100644 index 0000000..0d1f626 --- /dev/null +++ b/frontend/src/app/components/assistant/DocPanel.tsx @@ -0,0 +1,402 @@ +"use client"; + +import { useCallback, useEffect, useMemo, useState } from "react"; +import { Download, Loader2 } from "lucide-react"; +import { supabase } from "@/app/lib/supabase"; +import { PdfView } from "../shared/views/PdfView"; +import { DocxView } from "../shared/views/DocxView"; +import { SpreadsheetView } from "../shared/views/SpreadsheetView"; +import { + CitationQuotesHeader, + type CitationQuoteHeaderItem, +} from "./CitationQuotesHeader"; +import { TrackedChangeHeader } from "./TrackedChangeHeader"; +import { + cleanCitationQuoteText, + expandCitationToEntries, + formatCitationPage, + formatCitationQuotePage, + getDocumentCitationQuotes, + isSpreadsheetFilename, +} from "../shared/types"; +import type { + CitationQuote, + Citation, + DocumentCitation, + EditAnnotation, +} from "../shared/types"; + +function isDocxFilename(name: string): boolean { + const ext = name.split(".").pop()?.toLowerCase(); + return ext === "docx" || ext === "doc"; +} + +/** + * Discriminated-union describing what the panel is showing above the viewer. + * - "document": title row + viewer. + * - "citation": title row + relevant quote + viewer. + * - "edit": title row + tracked change + viewer. + */ +export type DocPanelMode = + | { kind: "document" } + | { kind: "citation"; citation: Citation } + | { + kind: "edit"; + edit: EditAnnotation; + changeNumber?: number; + /** + * True while an accept/reject request for this exact edit is in + * flight. Scoped per-edit (not per-document) so sibling edits on + * the same doc stay clickable. + */ + isEditReloading?: boolean; + onResolveStart?: (args: { + editId: string; + documentId: string; + verb: "accept" | "reject"; + }) => void; + onResolved?: (args: { + editId: string; + documentId: string; + status: "accepted" | "rejected"; + versionId: string | null; + downloadUrl: string | null; + }) => void; + onError?: (args: { + editId: string; + documentId: string; + versionId: string | null; + message: string; + }) => void; + }; + +interface Props { + documentId: string; + filename: string; + versionId: string | null; + versionNumber: number | null; + mode: DocPanelMode; + /** Spinner on the Download button while an accept/reject is in flight. */ + isReloading?: boolean; + warning?: string | null; + onWarningDismiss?: () => void; + initialScrollTop?: number | null; + onScrollChange?: (scrollTop: number) => void; +} + +/** + * Unified side-panel body for the assistant. Renders a single document + * with optionally a citation quote OR a tracked change highlighted above + * the viewer. No selector UI — caller picks the one thing to show; if the + * user wants a different citation/edit, the panel gets a new tab. + */ +export function DocPanel({ + documentId, + filename, + versionId, + versionNumber, + mode, + isReloading = false, + warning, + onWarningDismiss, + initialScrollTop, + onScrollChange, +}: Props) { + // Pick the viewer from the filename only, not from mode. Switching + // headers (citation ↔ edit ↔ document) for the same document must + // not unmount and remount the body — otherwise the user sees a full + // re-fetch every time they toggle. Tracked-change rendering still + // only lives in DocxView, which is fine because edits are DOCX-only. + const useDocxView = isDocxFilename(filename); + const useSheetView = isSpreadsheetFilename(filename); + const citationQuoteId = + mode.kind === "citation" ? `document:${mode.citation.ref}:0` : null; + const [activeCitationQuoteId, setActiveCitationQuoteId] = useState< + string | null + >(citationQuoteId); + const [quoteFocusKey, setQuoteFocusKey] = useState(0); + const [editFocusKey, setEditFocusKey] = useState(0); + + const quotes: CitationQuote[] | undefined = useMemo(() => { + if (mode.kind !== "citation") return undefined; + if (!activeCitationQuoteId) return []; + const selectedIndex = Number(activeCitationQuoteId.split(":").at(-1)); + if (!Number.isFinite(selectedIndex)) return []; + const selectedQuote = + getDocumentCitationQuotes(mode.citation)[selectedIndex]; + if (!selectedQuote) return []; + const documentCitation = mode.citation as DocumentCitation; + return expandCitationToEntries({ + ...documentCitation, + page: selectedQuote.page, + quote: selectedQuote.quote, + quotes: [selectedQuote], + }); + }, [activeCitationQuoteId, citationQuoteId, mode]); + + // Cell locator(s) for the selected quote, used to highlight the cited cell + // when the document is a spreadsheet. + const highlightCells = useMemo(() => { + if (mode.kind !== "citation") return undefined; + if (!activeCitationQuoteId) return []; + const selectedIndex = Number(activeCitationQuoteId.split(":").at(-1)); + if (!Number.isFinite(selectedIndex)) return []; + const selectedQuote = + getDocumentCitationQuotes(mode.citation)[selectedIndex]; + if (!selectedQuote || (!selectedQuote.cell && !selectedQuote.sheet)) + return []; + return [{ sheet: selectedQuote.sheet, cell: selectedQuote.cell }]; + }, [activeCitationQuoteId, mode]); + + useEffect(() => { + setActiveCitationQuoteId(citationQuoteId); + }, [citationQuoteId]); + + const handleCitationQuoteSelect = useCallback( + (quoteId: string) => { + const shouldSelect = activeCitationQuoteId !== quoteId; + setActiveCitationQuoteId(shouldSelect ? quoteId : null); + if (shouldSelect) setQuoteFocusKey((current) => current + 1); + }, + [activeCitationQuoteId], + ); + + const highlightEdit = useMemo(() => { + if (mode.kind !== "edit") return null; + return { + key: `${mode.edit.edit_id}:${editFocusKey}`, + inserted_text: mode.edit.inserted_text, + deleted_text: mode.edit.deleted_text, + ins_w_id: mode.edit.ins_w_id ?? null, + del_w_id: mode.edit.del_w_id ?? null, + }; + }, [editFocusKey, mode]); + + return ( + <div className="flex h-full flex-col"> + <DocumentTitleRow + documentId={documentId} + filename={filename} + versionId={versionId} + versionNumber={versionNumber} + isReloading={isReloading} + /> + + {mode.kind === "citation" && ( + <RelevantQuoteSection + citation={mode.citation} + filename={filename} + activeQuoteId={activeCitationQuoteId} + onQuoteSelect={handleCitationQuoteSelect} + /> + )} + + {mode.kind === "edit" && ( + <TrackedChangeHeader + edit={mode.edit} + changeNumber={mode.changeNumber} + isEditReloading={mode.isEditReloading} + onResolveStart={mode.onResolveStart} + onResolved={mode.onResolved} + onError={mode.onError} + onHighlight={() => setEditFocusKey((current) => current + 1)} + /> + )} + + <div className="flex flex-1 min-h-0 flex-col px-3 py-3"> + {useDocxView ? ( + <DocxView + documentId={documentId} + versionId={versionId ?? undefined} + quotes={quotes} + quoteFocusKey={quoteFocusKey} + highlightEdit={highlightEdit} + warning={warning ?? null} + onWarningDismiss={onWarningDismiss} + initialScrollTop={initialScrollTop ?? null} + onScrollChange={onScrollChange} + /> + ) : useSheetView ? ( + <SpreadsheetView + documentId={documentId} + versionId={versionId} + highlightCells={highlightCells} + /> + ) : ( + <PdfView + doc={{ + document_id: documentId, + version_id: versionId, + }} + quotes={quotes} + quoteFocusKey={quoteFocusKey} + /> + )} + </div> + </div> + ); +} + +// --------------------------------------------------------------------------- +// Header variants +// --------------------------------------------------------------------------- + +function DocumentTitleRow({ + documentId, + filename, + versionId, + versionNumber, + isReloading, +}: { + documentId: string; + filename: string; + versionId: string | null; + versionNumber: number | null; + isReloading: boolean; +}) { + return ( + <div className="flex items-start gap-3 px-3 pt-4 pb-3"> + <div className="min-w-0 flex-1"> + <div className="flex min-w-0 flex-wrap items-center gap-2"> + <h2 + className="min-w-0 break-words font-serif text-xl text-gray-900" + title={filename} + > + {filename} + </h2> + {versionNumber && versionNumber > 0 && ( + <span className="shrink-0 inline-flex items-center rounded-md border border-gray-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-gray-600"> + V{versionNumber} + </span> + )} + </div> + </div> + <div className="shrink-0"> + <DownloadButton + documentId={documentId} + versionId={versionId} + filename={filename} + isReloading={isReloading} + /> + </div> + </div> + ); +} + +function RelevantQuoteSection({ + citation, + filename, + activeQuoteId, + onQuoteSelect, +}: { + citation: Citation; + filename: string; + activeQuoteId: string | null; + onQuoteSelect: (quoteId: string) => void; +}) { + const citationQuotes = getDocumentCitationQuotes(citation); + const pagesLabel = formatCitationPage(citation); + const citationText = [filename, pagesLabel].filter(Boolean).join(", "); + const relevantQuotes: CitationQuoteHeaderItem[] = citationQuotes.map( + (quote, index) => { + const pageLabel = formatCitationQuotePage( + citation, + quote.page, + quote, + ); + return { + id: `document:${citation.ref}:${index}`, + quote: cleanCitationQuoteText(citation, quote.quote), + inlineDetail: pageLabel || null, + citationText: [filename, pageLabel].filter(Boolean).join(", "), + }; + }, + ); + const currentIndex = Math.max( + 0, + relevantQuotes.findIndex((quote) => quote.id === activeQuoteId), + ); + + return ( + <CitationQuotesHeader + quotes={relevantQuotes} + activeQuoteId={activeQuoteId} + currentIndex={currentIndex} + citationRef={citation.ref} + citationText={citationText} + onSelect={(quote) => onQuoteSelect(quote.id)} + onIndexChange={(index) => { + const quote = relevantQuotes[index]; + if (quote) onQuoteSelect(quote.id); + }} + /> + ); +} + +// --------------------------------------------------------------------------- +// Download button +// --------------------------------------------------------------------------- + +function DownloadButton({ + documentId, + versionId, + filename, + isReloading, +}: { + documentId: string; + versionId: string | null; + filename: string; + isReloading?: boolean; +}) { + const [busy, setBusy] = useState(false); + + const handleClick = async () => { + if (busy || isReloading) return; + setBusy(true); + try { + const { + data: { session }, + } = await supabase.auth.getSession(); + const token = session?.access_token; + const apiBase = + process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; + const qs = versionId + ? `?version_id=${encodeURIComponent(versionId)}` + : ""; + const resp = await fetch( + `${apiBase}/single-documents/${documentId}/docx${qs}`, + { + headers: token ? { Authorization: `Bearer ${token}` } : {}, + }, + ); + if (!resp.ok) throw new Error(`HTTP ${resp.status}`); + const blob = await resp.blob(); + const blobUrl = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = blobUrl; + a.download = filename; + document.body.appendChild(a); + a.click(); + a.remove(); + setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); + } finally { + setBusy(false); + } + }; + + const spinning = busy || isReloading; + return ( + <button + onClick={handleClick} + disabled={spinning} + className="inline-flex items-center gap-1 rounded-lg border border-gray-200 px-2 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed" + > + {spinning ? ( + <Loader2 className="h-3.5 w-3.5 animate-spin" /> + ) : ( + <Download className="h-3.5 w-3.5" /> + )} + Download + </button> + ); +} diff --git a/frontend/src/app/components/assistant/EditCard.tsx b/frontend/src/app/components/assistant/EditCard.tsx index 2deee0c..9fc8be9 100644 --- a/frontend/src/app/components/assistant/EditCard.tsx +++ b/frontend/src/app/components/assistant/EditCard.tsx @@ -1,8 +1,8 @@ "use client"; import { useState } from "react"; -import { supabase } from "@/lib/supabase"; -import { PillButton } from "@/components/ui/pill-button"; +import { supabase } from "@/app/lib/supabase"; +import { PillButton } from "@/app/components/ui/pill-button"; import type { EditAnnotation } from "../shared/types"; function normalizeText(s: string) { diff --git a/frontend/src/app/components/assistant/InitialView.tsx b/frontend/src/app/components/assistant/InitialView.tsx index 93ca60f..07a0794 100644 --- a/frontend/src/app/components/assistant/InitialView.tsx +++ b/frontend/src/app/components/assistant/InitialView.tsx @@ -1,9 +1,9 @@ "use client"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; -import { MikeIcon } from "@/components/chat/mike-icon"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; import { ChatInput } from "./ChatInput"; import { SelectAssistantProjectModal } from "./SelectAssistantProjectModal"; import type { Message } from "../shared/types"; diff --git a/frontend/src/app/components/assistant/ModelToggle.tsx b/frontend/src/app/components/assistant/ModelToggle.tsx index e51d343..d52fca2 100644 --- a/frontend/src/app/components/assistant/ModelToggle.tsx +++ b/frontend/src/app/components/assistant/ModelToggle.tsx @@ -9,7 +9,7 @@ import { DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; +} from "@/app/components/ui/dropdown-menu"; import { isModelAvailable } from "@/app/lib/modelAvailability"; import type { ApiKeyState } from "@/app/lib/mikeApi"; diff --git a/frontend/src/app/components/assistant/PreResponseWrapper.tsx b/frontend/src/app/components/assistant/PreResponseWrapper.tsx new file mode 100644 index 0000000..77f3255 --- /dev/null +++ b/frontend/src/app/components/assistant/PreResponseWrapper.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { ChevronDown } from "lucide-react"; + +export function PreResponseWrapper({ + children, + stepCount, + shouldMinimize, + isStreaming, + compact = false, + forceOpen = false, +}: { + children: React.ReactNode; + stepCount: number; + shouldMinimize: boolean; + isStreaming: boolean; + /** Tighter typography + child gap for narrow side panels (e.g. TR chat). */ + compact?: boolean; + forceOpen?: boolean; +}) { + const [userToggled, setUserToggled] = useState(false); + const [isOpen, setIsOpen] = useState(!shouldMinimize); + // Once content has streamed in (shouldMinimize=true even once), stay + // minimized even if a later render briefly evaluates shouldMinimize=false. + // Without this latch, the wrapper visibly pops open when isStreaming + // flips off at the end of the response. + const hasMinimizedRef = useRef(shouldMinimize); + + useEffect(() => { + if (forceOpen) { + setIsOpen(true); + return; + } + if (shouldMinimize) hasMinimizedRef.current = true; + if (userToggled) return; + setIsOpen(!shouldMinimize && !hasMinimizedRef.current); + }, [forceOpen, shouldMinimize, userToggled]); + + const stepWord = `step${stepCount === 1 ? "" : "s"}`; + const label = isStreaming + ? "Working" + : `Completed in ${stepCount} ${stepWord}`; + + const buttonTextClass = compact ? "text-xs" : "text-sm"; + const childrenGapClass = compact ? "gap-2.5" : "gap-4"; + + return ( + <div className="rounded-xl border border-white/70 bg-white/55 px-3 py-2 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-2xl"> + <button + type="button" + onClick={() => { + setUserToggled(true); + setIsOpen((v) => !v); + }} + className={`w-full flex items-center justify-between font-serif text-gray-500 hover:text-gray-700 transition-colors ${buttonTextClass}`} + > + <span className="flex items-baseline min-w-0"> + <span className="truncate">{label}</span> + {isStreaming && ( + <span className="inline-flex ml-1 shrink-0 items-baseline"> + <span className="w-0.5 h-0.5 rounded-full bg-gray-400 mr-0.5 animate-[bounce_1.4s_infinite_0s]" /> + <span className="w-0.5 h-0.5 rounded-full bg-gray-400 mr-0.5 animate-[bounce_1.4s_infinite_0.2s]" /> + <span className="w-0.5 h-0.5 rounded-full bg-gray-400 animate-[bounce_1.4s_infinite_0.4s]" /> + </span> + )} + </span> + <ChevronDown + size={12} + className={`relative top-px shrink-0 ml-2 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} + /> + </button> + {isOpen && ( + <div className={`mt-3 flex flex-col ${childrenGapClass}`}> + {children} + </div> + )} + </div> + ); +} diff --git a/frontend/src/app/components/assistant/TrackedChangeHeader.tsx b/frontend/src/app/components/assistant/TrackedChangeHeader.tsx new file mode 100644 index 0000000..2e28445 --- /dev/null +++ b/frontend/src/app/components/assistant/TrackedChangeHeader.tsx @@ -0,0 +1,229 @@ +"use client"; + +import { useCallback, useEffect, useState } from "react"; +import { supabase } from "@/app/lib/supabase"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { applyOptimisticResolution } from "./EditCard"; +import type { EditAnnotation } from "../shared/types"; + +const PANEL_GLASS_SURFACE = + "rounded-2xl bg-white/58 shadow-[0_5px_15px_rgba(15,23,42,0.095),inset_0_1px_0_rgba(255,255,255,0.88),inset_0_-8px_16px_rgba(255,255,255,0.16)] backdrop-blur-2xl"; +const PANEL_CARD_SURFACE = "rounded-lg bg-gray-100"; + +type ResolveArgs = { + editId: string; + documentId: string; + verb: "accept" | "reject"; +}; + +type ResolvedArgs = { + editId: string; + documentId: string; + status: "accepted" | "rejected"; + versionId: string | null; + downloadUrl: string | null; +}; + +type ErrorArgs = { + editId: string; + documentId: string; + versionId: string | null; + message: string; +}; + +export function TrackedChangeHeader({ + edit, + changeNumber, + isEditReloading, + onResolveStart, + onResolved, + onError, + onHighlight, +}: { + edit: EditAnnotation; + changeNumber?: number; + isEditReloading?: boolean; + onResolveStart?: (args: ResolveArgs) => void; + onResolved?: (args: ResolvedArgs) => void; + onError?: (args: ErrorArgs) => void; + onHighlight?: () => void; +}) { + return ( + <div className="px-3 pb-3"> + <div className={`${PANEL_GLASS_SURFACE} px-2 py-2`}> + <div className="mb-1 flex items-center gap-2"> + <p className="text-xs font-medium text-gray-700"> + Tracked Change + {changeNumber !== undefined ? ` ${changeNumber}` : ""} + </p> + <div className="ml-auto flex shrink-0 items-center gap-2"> + <EditResolveButtons + edit={edit} + isReloading={isEditReloading} + onResolveStart={onResolveStart} + onResolved={onResolved} + onError={onError} + /> + </div> + </div> + {edit.reason && ( + <p className="mb-3 text-xs text-gray-500">{edit.reason}</p> + )} + <div + className={`w-full px-3 py-2.5 text-left transition-colors ${PANEL_CARD_SURFACE} ${ + onHighlight ? "cursor-pointer hover:bg-gray-200/70" : "" + }`} + role={onHighlight ? "button" : undefined} + tabIndex={onHighlight ? 0 : undefined} + onClick={onHighlight} + onKeyDown={(event) => { + if (!onHighlight) return; + if (event.key !== "Enter" && event.key !== " ") return; + event.preventDefault(); + onHighlight(); + }} + > + <div className="font-serif text-sm leading-relaxed"> + {edit.inserted_text && ( + <span className="text-green-700"> + {edit.inserted_text} + </span> + )} + {edit.deleted_text && ( + <span className="text-red-600 line-through"> + {edit.deleted_text} + </span> + )} + </div> + </div> + </div> + </div> + ); +} + +function EditResolveButtons({ + edit, + isReloading, + onResolveStart, + onResolved, + onError, +}: { + edit: EditAnnotation; + isReloading?: boolean; + onResolveStart?: (args: ResolveArgs) => void; + onResolved?: (args: ResolvedArgs) => void; + onError?: (args: ErrorArgs) => void; +}) { + const [busy, setBusy] = useState(false); + const [status, setStatus] = useState<"pending" | "accepted" | "rejected">( + edit.status, + ); + + useEffect(() => { + if (busy) return; + setStatus(edit.status); + }, [edit.status, edit.edit_id, busy]); + + const resolved = status !== "pending"; + + const handle = useCallback( + async (verb: "accept" | "reject") => { + if (busy || resolved) return; + setBusy(true); + onResolveStart?.({ + editId: edit.edit_id, + documentId: edit.document_id, + verb, + }); + let revert: (() => void) | null = null; + try { + revert = applyOptimisticResolution(edit, verb); + } catch (e) { + console.error( + "[TrackedChangeHeader] optimistic update threw", + e, + ); + } + try { + const { + data: { session }, + } = await supabase.auth.getSession(); + const token = session?.access_token; + const apiBase = + process.env.NEXT_PUBLIC_API_BASE_URL ?? + "http://localhost:3001"; + const resp = await fetch( + `${apiBase}/single-documents/${edit.document_id}/edits/${edit.edit_id}/${verb}`, + { + method: "POST", + headers: token + ? { Authorization: `Bearer ${token}` } + : undefined, + }, + ); + if (!resp.ok) throw new Error(`HTTP ${resp.status}`); + const data = (await resp.json()) as { + ok: boolean; + status?: "accepted" | "rejected"; + version_id: string | null; + download_url: string | null; + }; + const nextStatus = + data.status ?? + (verb === "accept" ? "accepted" : "rejected"); + setStatus(nextStatus); + onResolved?.({ + editId: edit.edit_id, + documentId: edit.document_id, + status: nextStatus, + versionId: data.version_id, + downloadUrl: data.download_url, + }); + } catch (e) { + console.error("[TrackedChangeHeader] resolve failed", e); + try { + revert?.(); + } catch (revertErr) { + console.error( + "[TrackedChangeHeader] revert threw", + revertErr, + ); + } + onError?.({ + editId: edit.edit_id, + documentId: edit.document_id, + versionId: edit.version_id ?? null, + message: + verb === "accept" + ? "Couldn't save accept — please retry." + : "Couldn't save reject — please retry.", + }); + } finally { + setBusy(false); + } + }, + [busy, resolved, edit, onResolveStart, onResolved, onError], + ); + + const inFlight = busy || !!isReloading; + return ( + <div className="flex items-center gap-2"> + <PillButton + tone="black" + size="sm" + onClick={() => handle("accept")} + disabled={inFlight || resolved} + > + {status === "accepted" ? "Accepted" : "Accept"} + </PillButton> + <PillButton + tone="white" + size="sm" + onClick={() => handle("reject")} + disabled={inFlight || resolved} + > + {status === "rejected" ? "Rejected" : "Reject"} + </PillButton> + </div> + ); +} diff --git a/frontend/src/app/components/assistant/message/CitationSources.tsx b/frontend/src/app/components/assistant/message/CitationSources.tsx new file mode 100644 index 0000000..dd6ac4f --- /dev/null +++ b/frontend/src/app/components/assistant/message/CitationSources.tsx @@ -0,0 +1,206 @@ +import { Loader2, Scale } from "lucide-react"; +import { FileTypeIcon } from "../../shared/FileTypeIcon"; +import { displayCitationQuote, formatCitationPage } from "../../shared/types"; +import type { Citation } from "../../shared/types"; +import { RESPONSE_GLASS_ANNOTATION, RESPONSE_GLASS_SURFACE } from "./messageStyles"; + +type CitationSourceRow = { + key: string; + label: string; + source: Citation; + entries: { annotation: Citation; index: number }[]; +}; + +function citationSourceKey(annotation: Citation): string { + if (annotation.kind === "case") { + return `case:${annotation.cluster_id}`; + } + return `document:${annotation.document_id}`; +} + +function citationSourceLabel(annotation: Citation): string { + if (annotation.kind === "case") { + const caseName = annotation.case_name?.trim(); + const citation = annotation.citation?.trim(); + if (caseName && citation) return `${caseName}, ${citation}`; + return caseName || citation || `Case ${annotation.cluster_id}`; + } + return annotation.filename; +} + +export function citationTooltip(annotation: Citation): string { + const locator = formatCitationPage(annotation); + const quote = displayCitationQuote(annotation); + return locator ? `${locator}: "${quote}"` : `"${quote}"`; +} + +function CitationSourceIcon({ + annotation, +}: { + annotation: Citation; +}) { + if (annotation.kind === "case") { + return <Scale className="h-3.5 w-3.5 text-slate-600" />; + } + return ( + <FileTypeIcon fileType={annotation.filename} className="h-3.5 w-3.5" /> + ); +} + +function buildCitationSourceRows( + citations: Citation[], +): CitationSourceRow[] { + const rows = new Map<string, CitationSourceRow>(); + citations.forEach((annotation, index) => { + const key = citationSourceKey(annotation); + const existing = rows.get(key); + if (existing) { + existing.entries.push({ annotation, index }); + return; + } + rows.set(key, { + key, + label: citationSourceLabel(annotation), + source: annotation, + entries: [{ annotation, index }], + }); + }); + return Array.from(rows.values()); +} + +function escapeHtmlText(value: string): string { + return value + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + +function ensureTerminalPeriod(value: string): string { + return /[.!?]$/.test(value.trim()) ? value.trim() : `${value.trim()}.`; +} + +export function buildCitationAppendix(citations: Citation[]) { + if (citations.length === 0) return { html: "", text: "" }; + let previousSourceKey: string | null = null; + const entries = citations.map((annotation) => { + const sourceKey = citationSourceKey(annotation); + const label = + sourceKey === previousSourceKey + ? "Id." + : citationSourceLabel(annotation); + previousSourceKey = sourceKey; + return { + number: annotation.ref, + label, + quote: displayCitationQuote(annotation).trim(), + }; + }); + const textLines = [ + "", + "Citations", + ...entries.map((entry) => { + const quote = entry.quote ? ` "${entry.quote}"` : ""; + return `${entry.number} ${ensureTerminalPeriod(entry.label)}${quote}`; + }), + ]; + const html = [ + `<section class="copied-citations">`, + `<h3>Citations</h3>`, + ...entries.map((entry) => { + const label = escapeHtmlText(ensureTerminalPeriod(entry.label)); + const quote = entry.quote + ? ` "${escapeHtmlText(entry.quote)}"` + : ""; + return `<p><sup>${entry.number}</sup> ${label}${quote}</p>`; + }), + `</section>`, + ].join(""); + return { html, text: textLines.join("\n") }; +} + +export function CitationsBlock({ + citations, + onCitationClick, + onOpenSource, + canOpenSource, + showWhenEmpty = false, + isLoading = false, +}: { + citations: Citation[]; + onCitationClick?: (citation: Citation) => void; + onOpenSource?: (citation: Citation) => void; + canOpenSource?: (citation: Citation) => boolean; + showWhenEmpty?: boolean; + isLoading?: boolean; +}) { + const rows = buildCitationSourceRows(citations); + if (rows.length === 0 && !showWhenEmpty) return null; + + return ( + <div className="mt-2 mb-3"> + <div className={`overflow-hidden ${RESPONSE_GLASS_SURFACE}`}> + <div className="flex items-center justify-between gap-3 bg-white/25 px-3 py-2"> + <h3 className="text-base font-serif text-gray-900"> + Citations + </h3> + {isLoading && ( + <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400" /> + )} + </div> + <div> + {rows.map((row) => { + const sourceIsClickable = + !!onOpenSource && + (canOpenSource?.(row.source) ?? true); + return ( + <div + key={row.key} + className="flex items-center gap-3 px-3 py-3" + > + <button + type="button" + onClick={() => onOpenSource?.(row.source)} + disabled={!sourceIsClickable} + className="flex min-w-0 flex-1 items-center gap-2 rounded-lg text-left text-sm font-serif text-gray-700 transition-colors enabled:hover:text-gray-950 disabled:cursor-default" + > + <CitationSourceIcon + annotation={row.source} + /> + <span className="truncate"> + {row.label} + </span> + </button> + <div className="flex shrink-0 flex-wrap justify-end gap-1"> + {row.entries.map( + ({ annotation, index }) => ( + <button + key={`${row.key}:${index}`} + type="button" + onClick={() => + onCitationClick?.( + annotation, + ) + } + className={ + RESPONSE_GLASS_ANNOTATION + } + title={citationTooltip( + annotation, + )} + > + {annotation.ref} + </button> + ), + )} + </div> + </div> + ); + })} + </div> + </div> + </div> + ); +} + diff --git a/frontend/src/app/components/assistant/message/EditCardsSection.tsx b/frontend/src/app/components/assistant/message/EditCardsSection.tsx new file mode 100644 index 0000000..3489fdf --- /dev/null +++ b/frontend/src/app/components/assistant/message/EditCardsSection.tsx @@ -0,0 +1,289 @@ +import { useState, type ReactNode } from "react"; +import { ChevronDown, Loader2 } from "lucide-react"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { supabase } from "@/app/lib/supabase"; +import type { EditAnnotation } from "../../shared/types"; +import { applyOptimisticResolution } from "../EditCard"; + +/** + * Card rendered above the per-edit EditCards when a message produced + * multiple tracked-change proposals. Lets the user resolve every pending + * edit in one click by firing the per-edit accept/reject endpoint for each + * pending annotation and forwarding each response to `onResolved` so the + * parent can bump the viewer version, persist override URLs, etc. + * + * This intentionally doesn't apply the optimistic DOM mutation that + * EditCard does — bulk operations touch many edits at once and the real + * re-render from the latest version will reconcile within a second or so. + */ +function BulkEditActions({ + pending, + onViewClick, + onResolveStart, + onResolved, + onError, +}: { + pending: { + annotation: EditAnnotation; + filename: string; + }[]; + onViewClick?: (ann: EditAnnotation, filename: string) => void; + onResolveStart?: (args: { + editId: string; + documentId: string; + verb: "accept" | "reject"; + }) => void; + onResolved?: (args: { + editId: string; + documentId: string; + status: "accepted" | "rejected"; + versionId: string | null; + downloadUrl: string | null; + }) => void; + onError?: (args: { + editId: string; + documentId: string; + versionId: string | null; + message: string; + }) => void; +}) { + const [busy, setBusy] = useState<"accept" | "reject" | null>(null); + const [progress, setProgress] = useState<{ + done: number; + total: number; + } | null>(null); + + if (pending.length === 0) return null; + + const handleAll = async (verb: "accept" | "reject") => { + if (busy) return; + setBusy(verb); + setProgress({ done: 0, total: pending.length }); + try { + const { + data: { session }, + } = await supabase.auth.getSession(); + const token = session?.access_token; + const apiBase = + process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; + + // Sequential so the per-document version counter advances in a + // predictable order and the viewer doesn't race between bumps. + let done = 0; + for (const { annotation } of pending) { + onResolveStart?.({ + editId: annotation.edit_id, + documentId: annotation.document_id, + verb, + }); + // Optimistically mutate the DOM so the viewer reflects the + // resolution immediately. Revert if the backend call fails. + let revert: (() => void) | null = null; + try { + revert = applyOptimisticResolution(annotation, verb); + } catch (e) { + console.error( + "[BulkEditActions] optimistic update threw", + e, + ); + } + try { + const resp = await fetch( + `${apiBase}/single-documents/${annotation.document_id}/edits/${annotation.edit_id}/${verb}`, + { + method: "POST", + headers: token + ? { Authorization: `Bearer ${token}` } + : undefined, + }, + ); + if (!resp.ok) throw new Error(`HTTP ${resp.status}`); + const data = (await resp.json()) as { + ok: boolean; + status?: "accepted" | "rejected"; + version_id: string | null; + download_url: string | null; + }; + const nextStatus = + data.status ?? + (verb === "accept" ? "accepted" : "rejected"); + onResolved?.({ + editId: annotation.edit_id, + documentId: annotation.document_id, + status: nextStatus, + versionId: data.version_id, + downloadUrl: data.download_url, + }); + } catch (e) { + console.error("[BulkEditActions] resolve failed", e); + try { + revert?.(); + } catch (revertErr) { + console.error( + "[BulkEditActions] revert threw", + revertErr, + ); + } + onError?.({ + editId: annotation.edit_id, + documentId: annotation.document_id, + versionId: annotation.version_id ?? null, + message: + verb === "accept" + ? "Couldn't save one or more accepts." + : "Couldn't save one or more rejects.", + }); + } + done++; + setProgress({ done, total: pending.length }); + } + } finally { + setBusy(null); + setProgress(null); + } + }; + + // Optional: show a tiny "View first" action so bulk doesn't lose the + // in-viewer scroll-to behaviour entirely. + const first = pending[0]; + + return ( + <div className="flex items-center gap-2"> + <PillButton + tone="black" + size="sm" + onClick={() => handleAll("accept")} + disabled={!!busy} + > + {busy === "accept" && ( + <Loader2 className="h-3 w-3 animate-spin" /> + )} + Accept all + </PillButton> + <PillButton + tone="white" + size="sm" + onClick={() => handleAll("reject")} + disabled={!!busy} + > + {busy === "reject" && ( + <Loader2 className="h-3 w-3 animate-spin" /> + )} + Reject all + </PillButton> + {progress && ( + <span className="text-xs font-serif text-gray-500"> + {progress.done}/{progress.total} + </span> + )} + {onViewClick && first && ( + <PillButton + tone="blue" + size="sm" + onClick={() => + onViewClick(first.annotation, first.filename) + } + disabled={!!busy} + className="ml-auto" + > + View + </PillButton> + )} + </div> + ); +} + +/** + * Wraps the bulk accept/reject card and the per-edit EditCards in a single + * minimisable container. The bulk actions and summary stay visible in the + * header; the individual cards collapse via the chevron toggle. + */ +export function EditCardsSection({ + pending, + filenameByDocId, + cards, + resolvedCount, + onViewClick, + onResolveStart, + onResolved, + onError, +}: { + pending: { + annotation: EditAnnotation; + filename: string; + }[]; + filenameByDocId: Map<string, string>; + cards: ReactNode[]; + resolvedCount: number; + onViewClick?: (ann: EditAnnotation, filename: string) => void; + onResolveStart?: (args: { + editId: string; + documentId: string; + verb: "accept" | "reject"; + }) => void; + onResolved?: (args: { + editId: string; + documentId: string; + status: "accepted" | "rejected"; + versionId: string | null; + downloadUrl: string | null; + }) => void; + onError?: (args: { + editId: string; + documentId: string; + versionId: string | null; + message: string; + }) => void; +}) { + const [isOpen, setIsOpen] = useState(true); + if (cards.length === 0) return null; + + const docCount = filenameByDocId.size; + const summary = + pending.length > 0 + ? docCount > 1 + ? `${pending.length} tracked changes across ${docCount} documents` + : `${pending.length} tracked ${pending.length === 1 ? "change" : "changes"}` + : docCount > 1 + ? `${resolvedCount} resolved tracked changes across ${docCount} documents` + : `${resolvedCount} resolved tracked ${resolvedCount === 1 ? "change" : "changes"}`; + + return ( + <div className="rounded-xl bg-white shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-2xl overflow-hidden"> + {/* Row 1: summary + chevron */} + <div className="flex items-center gap-2 px-3 pt-3"> + <p className="flex-1 min-w-0 text-sm font-serif text-gray-700 truncate"> + {summary} + </p> + <button + onClick={() => setIsOpen((v) => !v)} + aria-label={isOpen ? "Collapse edits" : "Expand edits"} + className="shrink-0 rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-800 transition-colors" + > + <ChevronDown + className={`h-4 w-4 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} + /> + </button> + </div> + {/* Row 2: bulk action buttons */} + {pending.length > 0 && ( + <div className="px-3 pt-3"> + <BulkEditActions + pending={pending} + onViewClick={onViewClick} + onResolveStart={onResolveStart} + onResolved={onResolved} + onError={onError} + /> + </div> + )} + {/* Row 3: collapsible cards list */} + {isOpen && ( + <div className="flex flex-col gap-2 px-3 pb-3 pt-3"> + {cards} + </div> + )} + {!isOpen && <div className="pb-3" />} + </div> + ); +} diff --git a/frontend/src/app/components/assistant/message/EventBlocks.tsx b/frontend/src/app/components/assistant/message/EventBlocks.tsx new file mode 100644 index 0000000..d40f1b4 --- /dev/null +++ b/frontend/src/app/components/assistant/message/EventBlocks.tsx @@ -0,0 +1,701 @@ +import { useEffect, useRef, useState, type ReactNode } from "react"; +import ReactMarkdown from "react-markdown"; +import remarkGfm from "remark-gfm"; +import { ChevronDown, Download, Loader2 } from "lucide-react"; +import { supabase } from "@/app/lib/supabase"; +import type { AssistantEvent } from "../../shared/types"; +import { FileTypeIcon } from "../../shared/FileTypeIcon"; +import { RESPONSE_GLASS_SURFACE, withoutMarkdownNode } from "./messageStyles"; + +const THINKING_PHRASES = [ + "Thinking...", + "Pondering...", + "Analyzing...", + "Reviewing...", + "Reasoning...", +]; +const REASONING_COLLAPSED_MAX_LINES = 6; +const REASONING_COLLAPSED_MAX_HEIGHT_REM = 9; + +// --------------------------------------------------------------------------- +// Event block primitives +// --------------------------------------------------------------------------- + +function EventConnector() { + return ( + <div className="absolute w-[1px] bg-gray-300 top-[14px] left-[3px] translate-x-[-50%] h-[calc(100%+10px)]" /> + ); +} + +export function EventBlock({ + showConnector, + isStreaming, + dotColor = "green", + children, +}: { + showConnector?: boolean; + isStreaming?: boolean; + dotColor?: "green" | "gray" | "red"; + children: ReactNode; +}) { + const dotColorClass = + dotColor === "green" + ? "bg-green-400 shadow-[0_1px_3px_rgba(15,23,42,0.15),inset_0_1px_0_rgba(255,255,255,0.5)]" + : dotColor === "red" + ? "bg-red-400 shadow-[0_1px_3px_rgba(15,23,42,0.15),inset_0_1px_0_rgba(255,255,255,0.5)]" + : "bg-gray-300 shadow-[0_1px_3px_rgba(15,23,42,0.15),inset_0_1px_0_rgba(255,255,255,0.35)]"; + return ( + <div className="flex items-start text-sm font-serif text-gray-500 relative"> + {showConnector && <EventConnector />} + {isStreaming ? ( + <div className="mt-2 w-1.5 h-1.5 shrink-0 rounded-full border border-gray-400 border-t-transparent animate-spin" /> + ) : ( + <div + className={`mt-2 w-1.5 h-1.5 shrink-0 rounded-full ${dotColorClass}`} + /> + )} + <div className="ml-2 min-w-0 flex-1 whitespace-normal break-words"> + {children} + </div> + </div> + ); +} + +// --------------------------------------------------------------------------- + +export function ReasoningBlock({ + text, + isStreaming, + showConnector, +}: { + text: string; + isStreaming: boolean; + showConnector?: boolean; +}) { + const [isContentOpen, setIsContentOpen] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); + const [userToggledContent, setUserToggledContent] = useState(false); + const [isOverflowing, setIsOverflowing] = useState(false); + const [hasMeasured, setHasMeasured] = useState(false); + const [thinkingIndex, setThinkingIndex] = useState(0); + const contentRef = useRef<HTMLDivElement | null>(null); + + useEffect(() => { + if (!isStreaming) return; + const interval = setInterval(() => { + setThinkingIndex((i) => (i + 1) % THINKING_PHRASES.length); + }, 2000); + return () => clearInterval(interval); + }, [isStreaming]); + + useEffect(() => { + const el = contentRef.current; + if (!el) return; + const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 24; + const maxHeight = lineHeight * REASONING_COLLAPSED_MAX_LINES; + const nextOverflowing = el.scrollHeight > maxHeight + 2; + setIsOverflowing(nextOverflowing); + setHasMeasured(true); + if (!userToggledContent) setIsContentOpen(isStreaming); + if (!nextOverflowing) setIsExpanded(false); + }, [isStreaming, text, userToggledContent]); + + const showContent = isContentOpen || isStreaming || !hasMeasured; + const isCollapsed = isContentOpen && isOverflowing && !isExpanded; + + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor="gray" + > + <button + onClick={() => { + if (isStreaming) return; + setUserToggledContent(true); + setIsContentOpen((v) => !v); + }} + className="flex items-center text-sm font-serif text-gray-500 hover:text-gray-600 transition-colors" + > + <span className="font-medium"> + {isStreaming + ? THINKING_PHRASES[thinkingIndex] + : "Thought process"} + </span> + {!isStreaming && ( + <ChevronDown + size={10} + className={`relative top-px ml-1 transition-transform duration-200 ${isContentOpen ? "" : "-rotate-90"}`} + /> + )} + </button> + {showContent && ( + <div className="mt-2"> + <div + className={`relative ${isCollapsed ? "overflow-hidden" : ""}`} + style={ + isCollapsed + ? { + maxHeight: `${REASONING_COLLAPSED_MAX_HEIGHT_REM}rem`, + } + : undefined + } + > + <div + ref={contentRef} + className="text-sm font-serif text-gray-400 prose prose-sm max-w-none [&>*]:text-gray-400 [&>*]:text-sm" + > + <ReactMarkdown + remarkPlugins={[remarkGfm]} + components={{ + code: (props) => ( + <code + className="font-serif text-gray-600" + {...withoutMarkdownNode(props)} + /> + ), + }} + > + {text} + </ReactMarkdown> + </div> + {isCollapsed && ( + <> + <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-white/0 to-white" /> + <button + type="button" + onClick={() => setIsExpanded(true)} + className="absolute left-1/2 bottom-2 z-10 -translate-x-1/2 text-gray-400 transition-colors hover:text-gray-600" + aria-label="Expand thought process" + > + <ChevronDown className="h-3.5 w-3.5" /> + </button> + </> + )} + </div> + {isOverflowing && isContentOpen && isExpanded && ( + <button + type="button" + onClick={() => setIsExpanded(false)} + className="mx-auto mt-2 flex text-gray-400 transition-colors hover:text-gray-600" + aria-label="Minimise thought process" + > + <ChevronDown className="h-3.5 w-3.5 rotate-180" /> + </button> + )} + </div> + )} + </EventBlock> + ); +} + +export function DocReadBlock({ + filename, + onClick, + showConnector, + isStreaming, +}: { + filename: string; + onClick?: () => void; + showConnector?: boolean; + isStreaming?: boolean; +}) { + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor="green" + > + <div className="flex min-w-0 items-center gap-1.5"> + <span className="shrink-0 font-medium"> + {isStreaming ? "Reading" : "Read"} + </span> + {isStreaming ? ( + <span className="flex min-w-0 items-center gap-1.5"> + <FileTypeIcon + fileType={filename} + className="h-3.5 w-3.5" + /> + <span className="truncate">{filename}...</span> + </span> + ) : onClick ? ( + <button + onClick={onClick} + className="flex min-w-0 items-center gap-1.5 text-left transition-colors hover:text-gray-700 cursor-pointer" + > + <FileTypeIcon + fileType={filename} + className="h-3.5 w-3.5" + /> + <span className="truncate">{filename}</span> + </button> + ) : ( + <span className="flex min-w-0 items-center gap-1.5"> + <FileTypeIcon + fileType={filename} + className="h-3.5 w-3.5" + /> + <span className="truncate">{filename}</span> + </span> + )} + </div> + </EventBlock> + ); +} + +export function DocFindBlock({ + filename, + query, + totalMatches, + isStreaming, + showConnector, +}: { + filename: string; + query: string; + totalMatches: number; + isStreaming?: boolean; + showConnector?: boolean; +}) { + const matchSuffix = isStreaming + ? "" + : ` (${totalMatches} ${totalMatches === 1 ? "match" : "matches"})`; + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor={totalMatches > 0 ? "green" : "gray"} + > + <span className="font-medium"> + {isStreaming ? "Finding" : "Found"} + </span>{" "} + <span> + “{query}”{matchSuffix} + <span className="ml-1 text-gray-400">in {filename}</span> + {isStreaming && "..."} + </span> + </EventBlock> + ); +} + +export function DocCreatedBlock({ + filename, + showConnector, + isStreaming, +}: { + filename: string; + showConnector?: boolean; + isStreaming?: boolean; +}) { + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor="green" + > + <span className="font-medium"> + {isStreaming ? "Creating" : "Created"} + </span>{" "} + <span>{isStreaming ? `${filename}...` : filename}</span> + </EventBlock> + ); +} + +export function DocReplicatedBlock({ + filename, + count, + showConnector, + isStreaming, + hasError, +}: { + filename: string; + /** + * How many consecutive replicates of this same source got collapsed + * into this block. ≥ 1; only rendered when > 1. + */ + count: number; + showConnector?: boolean; + isStreaming?: boolean; + hasError?: boolean; +}) { + const label = isStreaming ? "Replicating" : "Replicated"; + const suffix = + !isStreaming && count > 1 + ? ` ${count} times` + : isStreaming + ? "..." + : ""; + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor={hasError ? "red" : "green"} + > + <span className="font-medium">{label}</span>{" "} + <span> + {filename} + {suffix} + </span> + </EventBlock> + ); +} + +export function DocDownloadBlock({ + filename, + download_url, + onOpen, + isReloading = false, + versionNumber, +}: { + filename: string; + download_url: string; + onOpen?: () => void; + isReloading?: boolean; + versionNumber?: number | null; +}) { + const hasVersion = + typeof versionNumber === "number" && + Number.isFinite(versionNumber) && + versionNumber > 0; + const extMatch = filename.match(/\.(\w+)$/); + const ext = extMatch ? extMatch[1].toUpperCase() : "FILE"; + const rawBasename = extMatch + ? filename.slice(0, -extMatch[0].length) + : filename; + // Strip any legacy "[Edited V3]" suffix that may still be baked into + // older saved download filenames — the version is surfaced as a + // separate tag now. + const basename = rawBasename.replace(/\s*\[Edited V\d+\]\s*$/, "").trim(); + // Only backend-relative URLs are accepted. The download fetch carries + // the user's bearer token, so any absolute URL from tool output is + // refused to keep the token from leaking off-origin. + const API_BASE = + process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; + const isSafeHref = download_url.startsWith("/"); + const href = isSafeHref ? `${API_BASE}${download_url}` : null; + const [busy, setBusy] = useState(false); + + const handleDownload = async (e?: { + stopPropagation?: () => void; + preventDefault?: () => void; + }) => { + e?.stopPropagation?.(); + e?.preventDefault?.(); + if (busy || isReloading || !href) return; + setBusy(true); + try { + const { + data: { session }, + } = await supabase.auth.getSession(); + const token = session?.access_token; + const resp = await fetch(href, { + headers: token ? { Authorization: `Bearer ${token}` } : {}, + }); + if (!resp.ok) throw new Error(`HTTP ${resp.status}`); + const blob = await resp.blob(); + const blobUrl = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = blobUrl; + a.download = filename; + document.body.appendChild(a); + a.click(); + a.remove(); + setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); + } finally { + setBusy(false); + } + }; + + const spinning = busy || isReloading; + + const body = ( + <div className="flex items-center gap-3 px-4 py-3 min-w-0 flex-1"> + <div className="min-w-0 flex-1"> + <div className="flex items-center gap-2 min-w-0"> + <p className="text-base font-serif text-gray-900 text-wrap"> + {basename} + </p> + {hasVersion && ( + <span className="shrink-0 inline-flex items-center rounded-md border border-white/70 bg-white/55 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] backdrop-blur-xl"> + V{versionNumber} + </span> + )} + </div> + <p className="text-xs text-blue-500 mt-0.5">{ext}</p> + </div> + </div> + ); + + const downloadIcon = spinning ? ( + <div + aria-disabled + className="shrink-0 flex items-center bg-white/25 px-6 text-gray-400 cursor-not-allowed" + > + <Loader2 size={13} className="animate-spin" /> + </div> + ) : ( + <button + type="button" + onClick={handleDownload} + className="shrink-0 flex items-center bg-white/25 px-6 text-gray-500 transition-colors hover:bg-white/55 hover:text-gray-700 cursor-pointer" + > + <Download size={13} /> + </button> + ); + + if (onOpen) { + return ( + <div + className={`flex items-stretch overflow-hidden w-full font-sans ${RESPONSE_GLASS_SURFACE}`} + > + <button + type="button" + onClick={onOpen} + className="flex items-stretch flex-1 min-w-0 text-left transition-colors hover:bg-white/45 cursor-pointer" + > + {body} + </button> + {downloadIcon} + </div> + ); + } + + if (spinning) { + return ( + <div + className={`flex items-stretch overflow-hidden w-full font-sans ${RESPONSE_GLASS_SURFACE}`} + > + {body} + {downloadIcon} + </div> + ); + } + + return ( + <div + className={`flex items-stretch overflow-hidden w-full font-sans ${RESPONSE_GLASS_SURFACE}`} + > + <button + type="button" + onClick={handleDownload} + className="flex items-stretch flex-1 min-w-0 text-left transition-colors hover:bg-white/45 cursor-pointer" + > + {body} + </button> + {downloadIcon} + </div> + ); +} + +export function WorkflowAppliedBlock({ + title, + showConnector, + onClick, +}: { + title: string; + showConnector?: boolean; + onClick?: () => void; +}) { + return ( + <EventBlock showConnector={showConnector} dotColor="green"> + <span className="font-medium">Applied Workflow</span>{" "} + {onClick ? ( + <button + onClick={onClick} + className="text-left hover:text-gray-700 transition-colors cursor-pointer" + > + {title} + </button> + ) : ( + <span>{title}</span> + )} + </EventBlock> + ); +} + +export function AskInputsBlock({ + event, + response, + showConnector, +}: { + event: Extract<AssistantEvent, { type: "ask_inputs" }>; + response?: Extract<AssistantEvent, { type: "ask_inputs_response" }>; + showConnector?: boolean; +}) { + const responseById = new Map( + response?.responses.map((item) => [item.id, item]) ?? [], + ); + return ( + <EventBlock + showConnector={showConnector} + dotColor={response ? "green" : "gray"} + > + <p className="font-medium text-gray-600"> + {response ? "Asked for input" : "Asking for input"} + </p> + <div className="mt-2 space-y-2 text-gray-800"> + {event.items.map((item, index) => { + const itemResponse = responseById.get(item.id); + const responseText = (() => { + if (!itemResponse) return null; + if (itemResponse.skipped) return "Skipped"; + if (itemResponse.kind === "choice") { + return itemResponse.answer ?? ""; + } + const filenames = itemResponse.filenames; + return filenames.length + ? filenames.join(", ") + : "No documents attached"; + })(); + return ( + <div key={item.id}> + <p className="text-xs text-gray-500"> + {index + 1}.{" "} + {item.kind === "choice" + ? "Question" + : "Documents"} + </p> + <p className="mt-0.5"> + {item.kind === "choice" + ? item.question + : item.document_types.join(", ") || + "Documents requested"} + </p> + {responseText !== null && ( + <p className="mt-0.5 text-gray-600"> + {responseText} + </p> + )} + </div> + ); + })} + </div> + </EventBlock> + ); +} + +export type CourtListenerBlockItem = { + caseName: string | null; + citation: string | null; + dateFiled?: string | null; + url?: string | null; + query?: string; + totalMatches?: number; + hasError?: boolean; +}; + +export function CourtListenerBlock({ + label, + detail, + isStreaming, + hasError, + showConnector, + items, +}: { + label: string; + detail?: string; + isStreaming?: boolean; + hasError?: boolean; + showConnector?: boolean; + items?: CourtListenerBlockItem[]; +}) { + const [isOpen, setIsOpen] = useState(false); + const hasItems = !!items && items.length > 0; + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor={hasError ? "red" : "green"} + > + {hasItems ? ( + <button + onClick={() => setIsOpen((v) => !v)} + className="text-left hover:text-gray-700 transition-colors inline-flex items-center" + > + <span className="font-medium">{label}</span> + {detail ? <span> {detail}</span> : null} + {isStreaming ? <span>...</span> : null} + <ChevronDown + size={10} + className={`relative top-px ml-1 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} + /> + </button> + ) : ( + <> + <span className="font-medium">{label}</span> + {detail ? <span> {detail}</span> : null} + {isStreaming ? <span>...</span> : null} + </> + )} + {isOpen && hasItems && ( + <ul className="mt-2 flex flex-col gap-1 text-sm font-serif text-gray-500"> + {items!.map((item, idx) => { + const label = [item.caseName, item.citation] + .filter(Boolean) + .join(", "); + const primary = label || item.url || "Unknown case"; + const searchText = item.query + ? `Searched for "${item.query}" in ${primary}${ + typeof item.totalMatches === "number" + ? ` (${item.totalMatches} ${ + item.totalMatches === 1 + ? "match" + : "matches" + })` + : "" + }` + : null; + return ( + <li key={idx}> + <div + className={ + item.hasError ? "text-red-500" : "" + } + > + {item.url ? ( + <a + href={item.url} + target="_blank" + rel="noreferrer" + className="hover:text-gray-700 hover:underline underline-offset-2" + > + {searchText ?? primary} + </a> + ) : searchText ? ( + <span>{searchText}</span> + ) : ( + <span>{primary}</span> + )} + </div> + </li> + ); + })} + </ul> + )} + </EventBlock> + ); +} + +export function DocEditedBlock({ + filename, + showConnector, + isStreaming, + hasError, +}: { + filename: string; + showConnector?: boolean; + isStreaming?: boolean; + hasError?: boolean; +}) { + return ( + <EventBlock + showConnector={showConnector} + isStreaming={isStreaming} + dotColor={hasError ? "red" : "green"} + > + <span className="font-medium"> + {isStreaming ? "Editing" : hasError ? "Edit failed" : "Edited"} + </span>{" "} + <span>{isStreaming ? `${filename}...` : filename}</span> + </EventBlock> + ); +} diff --git a/frontend/src/app/components/assistant/message/MarkdownContent.tsx b/frontend/src/app/components/assistant/message/MarkdownContent.tsx new file mode 100644 index 0000000..da605aa --- /dev/null +++ b/frontend/src/app/components/assistant/message/MarkdownContent.tsx @@ -0,0 +1,278 @@ +import type { RefObject } from "react"; +import ReactMarkdown, { defaultUrlTransform } from "react-markdown"; +import remarkMath from "remark-math"; +import remarkGfm from "remark-gfm"; +import rehypeKatex from "rehype-katex"; +import "katex/dist/katex.min.css"; +import type { AssistantEvent, Citation } from "../../shared/types"; +import { RESPONSE_GLASS_ANNOTATION, withoutMarkdownNode } from "./messageStyles"; +import { citationTooltip } from "./CitationSources"; +import { internalCaseHref } from "./citationUtils"; + +export function MarkdownContent({ + text, + inlineCitationTargets, + caseCitations, + caseOpinions, + onCitationClick, + onCaseClick, + divRef, +}: { + text: string; + inlineCitationTargets: Citation[]; + caseCitations: Map< + string, + Extract<AssistantEvent, { type: "case_citation" }> + >; + caseOpinions: Map< + number, + Extract<AssistantEvent, { type: "case_opinions" }>["case"] + >; + onCitationClick?: (c: Citation) => void; + onCaseClick?: ( + c: Extract<AssistantEvent, { type: "case_citation" }>, + ) => void; + divRef?: RefObject<HTMLDivElement | null>; +}) { + function findCaseCitation(href: string) { + return caseCitations.get(internalCaseHref(href) ?? ""); + } + + return ( + <div + ref={divRef} + className="text-gray-900 mb-4 text-base prose prose-sm max-w-none font-serif" + > + <ReactMarkdown + remarkPlugins={[ + [remarkMath, { singleDollarTextMath: false }], + remarkGfm, + ]} + rehypePlugins={[rehypeKatex]} + urlTransform={(url) => + /^us-case-\d+$/.test(url) ? url : defaultUrlTransform(url) + } + components={{ + table: (props) => ( + <div className="overflow-x-auto my-4 rounded-lg"> + <table + className="min-w-full divide-y divide-gray-300 overflow-hidden" + {...withoutMarkdownNode(props)} + /> + </div> + ), + thead: (props) => ( + <thead + className="bg-gray-100" + {...withoutMarkdownNode(props)} + /> + ), + tbody: (props) => ( + <tbody + className="divide-y divide-gray-200" + {...withoutMarkdownNode(props)} + /> + ), + tr: (props) => <tr {...withoutMarkdownNode(props)} />, + th: (props) => ( + <th + className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" + {...withoutMarkdownNode(props)} + /> + ), + td: (props) => ( + <td + className="whitespace-normal px-3 py-4 text-sm text-gray-900" + {...withoutMarkdownNode(props)} + /> + ), + h1: (props) => ( + <h1 + className="mt-6 mb-4 text-3xl font-serif font-semibold" + {...withoutMarkdownNode(props)} + /> + ), + h2: (props) => ( + <h2 + className="mt-5 mb-3 text-2xl font-serif font-semibold" + {...withoutMarkdownNode(props)} + /> + ), + h3: (props) => ( + <h3 + className="text-xl font-semibold mt-4 mb-2" + {...withoutMarkdownNode(props)} + /> + ), + h4: (props) => ( + <h4 + className="text-lg font-semibold mt-4 mb-2" + {...withoutMarkdownNode(props)} + /> + ), + p: ({ node, ...props }) => { + const parent = + node && typeof node === "object" && "parent" in node + ? (node as { parent?: { type?: string } }) + .parent + : undefined; + if (parent?.type === "listItem") { + return ( + <p + className="inline leading-7 m-0" + {...props} + /> + ); + } + return <p className="mb-4 leading-7" {...props} />; + }, + ul: (props) => ( + <ul + className="list-disc list-outside mb-4 pl-6" + {...withoutMarkdownNode(props)} + /> + ), + ol: (props) => ( + <ol + className="list-decimal list-outside mb-4 pl-6" + {...withoutMarkdownNode(props)} + /> + ), + li: (props) => ( + <li + className="mb-2 leading-7" + {...withoutMarkdownNode(props)} + /> + ), + strong: (props) => ( + <strong + className="font-semibold" + {...withoutMarkdownNode(props)} + /> + ), + em: (props) => ( + <em className="italic" {...withoutMarkdownNode(props)} /> + ), + code: (props) => { + const { children, ...codeProps } = + withoutMarkdownNode(props); + const text = String(children); + const citMatch = text.match(/^§(\d+)§$/); + if (citMatch) { + const idx = parseInt(citMatch[1]); + const annotation = inlineCitationTargets[idx]; + if (annotation) { + const tooltipText = citationTooltip(annotation); + return ( + <button + onClick={() => + onCitationClick?.(annotation) + } + data-citation-ref={annotation.ref} + className={`${RESPONSE_GLASS_ANNOTATION} mx-0.5 align-super`} + title={tooltipText} + > + {annotation.ref} + </button> + ); + } + } + return ( + <code + className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-serif" + {...codeProps} + > + {children} + </code> + ); + }, + blockquote: (props) => ( + <blockquote + className="border-l-4 border-gray-300 pl-4 italic my-4" + {...withoutMarkdownNode(props)} + /> + ), + a: (props) => { + const { href, children, ...anchorProps } = + withoutMarkdownNode(props); + if (href) { + const isInternalCaseHref = !!internalCaseHref(href); + const citation = findCaseCitation(href); + if (citation && onCaseClick) { + return ( + <button + type="button" + onClick={() => + onCaseClick({ + ...citation, + case: + citation.cluster_id !== null + ? caseOpinions.get( + citation.cluster_id, + ) + : undefined, + }) + } + className="text-left text-blue-600 hover:text-blue-700 underline" + > + {children} + </button> + ); + } + if (citation) { + return ( + <a + href={citation.url} + className="text-blue-600 hover:text-blue-700 underline" + target="_blank" + rel="noopener noreferrer" + > + {children} + </a> + ); + } + if (isInternalCaseHref) { + return ( + <span className="text-blue-600 underline"> + {children} + </span> + ); + } + return ( + <a + href={href} + className="text-blue-600 hover:text-blue-700 underline" + target="_blank" + rel="noopener noreferrer" + {...anchorProps} + > + {children} + </a> + ); + } + return ( + <a + href={href} + className="text-blue-600 hover:text-blue-700 underline" + target="_blank" + rel="noopener noreferrer" + {...anchorProps} + > + {children} + </a> + ); + }, + hr: (props) => ( + <hr + className="my-6 border-gray-200" + {...withoutMarkdownNode(props)} + /> + ), + }} + > + {text} + </ReactMarkdown> + </div> + ); +} + diff --git a/frontend/src/app/components/assistant/message/ResponseStatus.tsx b/frontend/src/app/components/assistant/message/ResponseStatus.tsx new file mode 100644 index 0000000..08bfac7 --- /dev/null +++ b/frontend/src/app/components/assistant/message/ResponseStatus.tsx @@ -0,0 +1,53 @@ +import { useEffect, useRef, useState } from "react"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; + +export type StatusState = "active" | "error" | null; + +export function ResponseStatus({ status }: { status: StatusState }) { + const [showDone, setShowDone] = useState(false); + const [doneVisible, setDoneVisible] = useState(false); + const wasActiveRef = useRef(false); + + const isActive = status === "active"; + const isError = status === "error"; + + useEffect(() => { + const wasActive = wasActiveRef.current; + wasActiveRef.current = isActive; + + let raf = 0; + let doneTimeout = 0; + if (wasActive && !isActive) { + raf = window.requestAnimationFrame(() => { + setShowDone(true); + setDoneVisible(true); + doneTimeout = window.setTimeout( + () => setDoneVisible(false), + 1500, + ); + }); + } else if (!wasActive && isActive) { + raf = window.requestAnimationFrame(() => { + setShowDone(false); + setDoneVisible(false); + }); + } + + return () => { + window.cancelAnimationFrame(raf); + if (doneTimeout) window.clearTimeout(doneTimeout); + }; + }, [isActive]); + + return ( + <div className="w-full h-9 flex items-center mb-2"> + <MikeIcon + spin={isActive} + done={showDone && doneVisible} + error={isError} + mike={!isError && !(showDone && doneVisible)} + size={22} + /> + </div> + ); +} diff --git a/frontend/src/app/components/assistant/message/citationUtils.ts b/frontend/src/app/components/assistant/message/citationUtils.ts new file mode 100644 index 0000000..2c37d08 --- /dev/null +++ b/frontend/src/app/components/assistant/message/citationUtils.ts @@ -0,0 +1,36 @@ +import type { Citation } from "../../shared/types"; + +export function preprocessCitations( + text: string, + citations: Citation[], + inlineCitationTargets: Citation[], +): string { + // Replace [N] or [N, M, ...] inline markers with internal §idx§ tokens backed by citations. + return text.replace(/\[(\d+(?:,\s*\d+)*)\]/g, (full, refsStr) => { + const refs = (refsStr as string) + .split(",") + .map((s: string) => parseInt(s.trim(), 10)); + const tokens = refs.flatMap((ref: number) => { + const citation = citations.find((a) => a.ref === ref); + if (!citation) return []; + const idx = inlineCitationTargets.length; + inlineCitationTargets.push(citation); + return [`\`§${idx}§\`\u200B`]; + }); + return tokens.length > 0 ? tokens.join("") : full; + }); +} + +// --------------------------------------------------------------------------- +// Markdown renderer (shared config) +// --------------------------------------------------------------------------- + +export function internalCaseHref( + value: string | number | null | undefined, +): string | null { + if (typeof value === "number") return `us-case-${value}`; + if (!value) return null; + const match = value.match(/^us-case-(\d+)$/); + return match ? `us-case-${match[1]}` : null; +} + diff --git a/frontend/src/app/components/assistant/message/eventUtils.ts b/frontend/src/app/components/assistant/message/eventUtils.ts new file mode 100644 index 0000000..520e418 --- /dev/null +++ b/frontend/src/app/components/assistant/message/eventUtils.ts @@ -0,0 +1,33 @@ +import type { AssistantEvent } from "../../shared/types"; + +export function eventErrorMessage(event: AssistantEvent): string | null { + if (event.type === "error") return event.message; + if ("error" in event && typeof event.error === "string" && event.error) { + return event.error; + } + return null; +} + +export function toolCallLabel(name: string): string { + if (name === "ask_inputs") return "Asking for input..."; + if (name === "generate_docx") return "Creating document..."; + if (name === "generate_excel") return "Creating spreadsheet..."; + if (name === "generate_ppt") return "Creating presentation..."; + if (name === "edit_document") return "Editing document..."; + if (name === "read_document") return "Reading document..."; + if (name === "fetch_documents") return "Reading documents..."; + if (name === "find_in_document") return "Searching document..."; + if (name === "replicate_document") return "Copying document..."; + if (name === "read_workflow") return "Loading workflow..."; + if (name === "list_workflows") return "Loading workflows..."; + if (name === "list_documents") return "Loading documents..."; + if (name === "courtlistener_search_case_law") + return "Searching case law..."; + if (name === "courtlistener_get_cases") return "Fetching cases..."; + if (name === "courtlistener_find_in_case") return "Searching case..."; + if (name === "courtlistener_read_case") return "Reading case..."; + if (name === "courtlistener_verify_citations") + return "Verifying citations..."; + if (name.startsWith("mcp_")) return "Using connector..."; + return name ? `Running ${name}...` : "Working..."; +} diff --git a/frontend/src/app/components/assistant/message/messageStyles.ts b/frontend/src/app/components/assistant/message/messageStyles.ts new file mode 100644 index 0000000..917ae72 --- /dev/null +++ b/frontend/src/app/components/assistant/message/messageStyles.ts @@ -0,0 +1,12 @@ +export const RESPONSE_GLASS_SURFACE = + "rounded-xl border border-white/70 bg-white/55 shadow-[0_3px_9px_rgba(15,23,42,0.03),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.05)] backdrop-blur-2xl"; +export const RESPONSE_GLASS_ANNOTATION = + "inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-200/60 bg-gray-200/80 text-[12px] font-serif font-medium text-gray-800 shadow-[0_1px_2px_rgba(15,23,42,0.04),inset_0_1px_0_rgba(243,244,246,0.85),inset_0_-2px_4px_rgba(229,231,235,0.65)] backdrop-blur-xl transition-colors hover:bg-gray-200 hover:text-gray-950"; + +export function withoutMarkdownNode<P extends { node?: unknown }>( + props: P, +): Omit<P, "node"> { + const { node, ...rest } = props; + void node; + return rest; +} diff --git a/frontend/src/app/components/assistant/message/useSmoothedReveal.ts b/frontend/src/app/components/assistant/message/useSmoothedReveal.ts new file mode 100644 index 0000000..13bbda0 --- /dev/null +++ b/frontend/src/app/components/assistant/message/useSmoothedReveal.ts @@ -0,0 +1,60 @@ +import { useEffect, useRef, useState } from "react"; + +/** + * Hide jitter from arrival of streamed text chunks by revealing characters at + * a smooth, rate-paced clip rather than rendering every chunk verbatim. + * + * Returns a prefix of `text` whose length grows over time toward the full + * length. When `active` is false (stream ended, message replayed from + * history, etc.), snaps to the full text immediately. + * + * Rate adapts to backlog: small backlogs reveal at a 40 cps floor; large + * backlogs catch up within ~0.4s, so the smoothing never lags noticeably + * behind the server. + */ +export function useSmoothedReveal(text: string, active: boolean): string { + const [revealedInt, setRevealedInt] = useState(text.length); + const revealedFloat = useRef<number>(text.length); + + useEffect(() => { + if (!active) { + revealedFloat.current = text.length; + return; + } + + // Defensive clamp in case the text was edited / replaced shorter. + if (revealedFloat.current > text.length) { + revealedFloat.current = text.length; + } + + let lastTick = performance.now(); + let raf = 0; + let cancelled = false; + + const step = (now: number) => { + if (cancelled) return; + const dt = Math.max(0, (now - lastTick) / 1000); + lastTick = now; + const target = text.length; + const prev = revealedFloat.current; + if (prev < target) { + const backlog = target - prev; + const cps = Math.max(40, backlog / 0.4); + const next = Math.min(target, prev + cps * dt); + revealedFloat.current = next; + const nextInt = Math.floor(next); + setRevealedInt((cur) => (cur === nextInt ? cur : nextInt)); + } + raf = requestAnimationFrame(step); + }; + + raf = requestAnimationFrame(step); + return () => { + cancelled = true; + cancelAnimationFrame(raf); + }; + }, [text.length, active]); + + return text.slice(0, Math.min(revealedInt, text.length)); +} + diff --git a/frontend/src/components/chat/mike-icon.tsx b/frontend/src/app/components/chat/mike-icon.tsx similarity index 100% rename from frontend/src/components/chat/mike-icon.tsx rename to frontend/src/app/components/chat/mike-icon.tsx diff --git a/frontend/src/app/components/modals/AddDocumentsModal.tsx b/frontend/src/app/components/modals/AddDocumentsModal.tsx new file mode 100644 index 0000000..8d1d19d --- /dev/null +++ b/frontend/src/app/components/modals/AddDocumentsModal.tsx @@ -0,0 +1,221 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { AlertCircle, Upload, Loader2, X } from "lucide-react"; +import { + uploadStandaloneDocument, + uploadProjectDocument, + addDocumentToProject, +} from "@/app/lib/mikeApi"; +import type { Document } from "../shared/types"; +import { FileDirectory } from "../shared/FileDirectory"; +import { + useDirectoryData, + invalidateDirectoryCache, +} from "../shared/useDirectoryData"; +import { Modal } from "./Modal"; +import { + SUPPORTED_DOCUMENT_ACCEPT, + formatUnsupportedDocumentWarning, + partitionSupportedDocumentFiles, +} from "@/app/lib/documentUploadValidation"; + +export { invalidateDirectoryCache }; + +interface Props { + open: boolean; + onClose: () => void; + onSelect: (documents: Document[], projectId?: string) => void; + breadcrumb: string[]; + allowMultiple?: boolean; + projectId?: string; +} + +export function AddDocumentsModal({ + open, + onClose, + onSelect, + breadcrumb, + allowMultiple = true, + projectId, +}: Props) { + const { loading, standaloneDocuments, projects } = useDirectoryData(open); + const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set()); + const [uploading, setUploading] = useState(false); + const [uploadingFilenames, setUploadingFilenames] = useState<string[]>([]); + const [uploadWarning, setUploadWarning] = useState<string | null>(null); + const [extraUploadedDocs, setExtraUploadedDocs] = useState<Document[]>([]); + const fileInputRef = useRef<HTMLInputElement>(null); + + useEffect(() => { + if (!open) return; + setSelectedIds(new Set()); + setExtraUploadedDocs([]); + setUploadingFilenames([]); + setUploadWarning(null); + }, [open]); + + if (!open) return null; + + const allStandalone = [ + ...extraUploadedDocs.filter( + (u) => !standaloneDocuments.some((d) => d.id === u.id), + ), + ...standaloneDocuments, + ]; + + const availableProjects = projects + .filter((p) => p.id !== projectId) + .map((p) => ({ + ...p, + documents: p.documents || [], + })); + + const allDocs = [ + ...allStandalone, + ...availableProjects.flatMap((p) => p.documents || []), + ]; + + async function handleConfirm() { + const selected = allDocs.filter((d) => selectedIds.has(d.id)); + + if (projectId) { + const toAssign = selected.filter((d) => d.project_id !== projectId); + const alreadyHere = selected.filter( + (d) => d.project_id === projectId, + ); + if (toAssign.length > 0) { + setUploading(true); + try { + const assigned = await Promise.all( + toAssign.map((d) => + addDocumentToProject(projectId, d.id), + ), + ); + onSelect([...alreadyHere, ...assigned], projectId); + } catch (err) { + console.error("Failed to assign documents:", err); + } finally { + setUploading(false); + } + } else { + onSelect(alreadyHere, projectId); + } + onClose(); + return; + } + + const projectIds = new Set( + selected.map((d) => d.project_id).filter(Boolean), + ); + const singleProjectId = + projectIds.size === 1 ? [...projectIds][0]! : undefined; + onSelect(selected, singleProjectId); + onClose(); + } + + async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) { + const files = Array.from(e.target.files || []); + if (!files.length) return; + const { supported, unsupported } = + partitionSupportedDocumentFiles(files); + setUploadWarning(formatUnsupportedDocumentWarning(unsupported)); + if (supported.length === 0) { + if (fileInputRef.current) fileInputRef.current.value = ""; + return; + } + setUploadingFilenames(supported.map((file) => file.name)); + setUploading(true); + try { + const uploaded = await Promise.all( + supported.map((f) => + projectId + ? uploadProjectDocument(projectId, f) + : uploadStandaloneDocument(f), + ), + ); + invalidateDirectoryCache(); + setExtraUploadedDocs((prev) => [...uploaded, ...prev]); + uploaded.forEach((d) => + setSelectedIds((prev) => new Set([...prev, d.id])), + ); + } catch (err) { + console.error("Upload failed:", err); + } finally { + setUploading(false); + setUploadingFilenames([]); + if (fileInputRef.current) fileInputRef.current.value = ""; + } + } + + return ( + <Modal + open={open} + onClose={onClose} + breadcrumbs={breadcrumb} + secondaryAction={{ + label: uploading ? "Uploading…" : "Upload", + icon: uploading ? ( + <Loader2 className="h-3.5 w-3.5 animate-spin" /> + ) : ( + <Upload className="h-3.5 w-3.5" /> + ), + onClick: () => fileInputRef.current?.click(), + disabled: uploading, + }} + footerStatus={ + selectedIds.size > 0 ? ( + <span className="text-xs text-gray-400"> + {selectedIds.size} selected + </span> + ) : null + } + primaryAction={{ + label: uploading ? "Saving…" : "Confirm", + onClick: handleConfirm, + disabled: selectedIds.size === 0 || uploading, + }} + > + <input + ref={fileInputRef} + type="file" + accept={SUPPORTED_DOCUMENT_ACCEPT} + multiple + className="hidden" + onChange={handleUpload} + /> + + {uploadWarning && ( + <div className="mb-2 flex items-center gap-2 rounded-lg border border-red-100 bg-red-50 px-3 py-2 text-xs text-gray-900"> + <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-600" /> + <span className="min-w-0 flex-1">{uploadWarning}</span> + <button + type="button" + onClick={() => setUploadWarning(null)} + className="shrink-0 rounded p-0.5 text-black hover:bg-gray-100" + aria-label="Dismiss warning" + > + <X className="h-3.5 w-3.5" /> + </button> + </div> + )} + + <div className="flex min-h-0 flex-1 flex-col"> + <FileDirectory + standaloneDocs={allStandalone} + directoryProjects={availableProjects} + loading={loading} + selectedIds={selectedIds} + onChange={setSelectedIds} + allowMultiple={allowMultiple} + emptyMessage="No documents yet" + uploadingFilenames={uploadingFilenames} + searchable + searchAutoFocus + searchNoResultsMessage="No matches found" + showProjectTabs + /> + </div> + </Modal> + ); +} diff --git a/frontend/src/app/components/modals/AddProjectDocsModal.tsx b/frontend/src/app/components/modals/AddProjectDocsModal.tsx new file mode 100644 index 0000000..45b6218 --- /dev/null +++ b/frontend/src/app/components/modals/AddProjectDocsModal.tsx @@ -0,0 +1,250 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { Check, Loader2, Upload, X } from "lucide-react"; +import { SearchBar } from "@/app/components/ui/search-bar"; +import { getProject, uploadProjectDocument } from "@/app/lib/mikeApi"; +import type { Document } from "../shared/types"; +import { DocFileIcon } from "../shared/FileDirectory"; +import { VersionChip } from "../shared/VersionChip"; +import { Modal } from "./Modal"; + +interface Props { + open: boolean; + onClose: () => void; + onSelect: (documents: Document[]) => void; + breadcrumb: string[]; + projectId: string; + /** Docs already in the target list — rendered checked + disabled. */ + excludeDocIds?: Set<string>; + allowMultiple?: boolean; +} + +function formatDate(iso: string | null) { + if (!iso) return null; + return new Date(iso).toLocaleDateString(undefined, { + day: "numeric", + month: "short", + year: "numeric", + }); +} + +export function AddProjectDocsModal({ + open, + onClose, + onSelect, + breadcrumb, + projectId, + excludeDocIds, + allowMultiple = true, +}: Props) { + const [docs, setDocs] = useState<Document[]>([]); + const [loading, setLoading] = useState(false); + const [search, setSearch] = useState(""); + const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set()); + const [uploading, setUploading] = useState(false); + const fileInputRef = useRef<HTMLInputElement>(null); + + useEffect(() => { + if (!open) return; + setSearch(""); + setSelectedIds(new Set()); + let cancelled = false; + setLoading(true); + getProject(projectId) + .then((p) => { + if (!cancelled) setDocs(p.documents ?? []); + }) + .catch(() => { + if (!cancelled) setDocs([]); + }) + .finally(() => { + if (!cancelled) setLoading(false); + }); + return () => { + cancelled = true; + }; + }, [open, projectId]); + + if (!open) return null; + + const q = search.toLowerCase().trim(); + const filtered = q + ? docs.filter((d) => d.filename.toLowerCase().includes(q)) + : docs; + + const isExcluded = (id: string) => !!excludeDocIds?.has(id); + + function toggle(id: string) { + if (isExcluded(id)) return; + if (!allowMultiple) { + setSelectedIds(new Set([id])); + return; + } + setSelectedIds((prev) => { + const next = new Set(prev); + next.has(id) ? next.delete(id) : next.add(id); + return next; + }); + } + + function handleConfirm() { + const selected = docs.filter((d) => selectedIds.has(d.id)); + onSelect(selected); + onClose(); + } + + async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) { + const files = Array.from(e.target.files || []); + if (!files.length) return; + setUploading(true); + try { + const uploaded = await Promise.all( + files.map((f) => uploadProjectDocument(projectId, f)), + ); + setDocs((prev) => [...uploaded, ...prev]); + setSelectedIds((prev) => { + const next = new Set(prev); + uploaded.forEach((d) => next.add(d.id)); + return next; + }); + } catch (err) { + console.error("Upload failed:", err); + } finally { + setUploading(false); + if (fileInputRef.current) fileInputRef.current.value = ""; + } + } + + return ( + <Modal + open={open} + onClose={onClose} + breadcrumbs={breadcrumb} + secondaryAction={{ + label: uploading ? "Uploading…" : "Upload", + icon: uploading ? ( + <Loader2 className="h-3.5 w-3.5 animate-spin" /> + ) : ( + <Upload className="h-3.5 w-3.5" /> + ), + onClick: () => fileInputRef.current?.click(), + disabled: uploading, + }} + footerStatus={ + selectedIds.size > 0 ? ( + <span className="text-xs text-gray-400"> + {selectedIds.size} selected + </span> + ) : null + } + primaryAction={{ + label: "Confirm", + onClick: handleConfirm, + disabled: selectedIds.size === 0 || uploading, + }} + > + <input + ref={fileInputRef} + type="file" + accept=".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt" + multiple + className="hidden" + onChange={handleUpload} + /> + <div className="pt-1 pb-2"> + <SearchBar + value={search} + onValueChange={setSearch} + placeholder="Search..." + autoFocus + /> + </div> + + {/* File list */} + <div className="min-h-0 flex-1 overflow-y-auto"> + {loading ? ( + <div className="rounded-sm border border-gray-100 overflow-hidden"> + {[60, 45, 75, 55, 40].map((w, i) => ( + <div + key={i} + className="flex items-center gap-2 px-2 py-2" + > + <div className="h-3.5 w-3.5 rounded border border-gray-200 shrink-0" /> + <div className="h-3.5 w-3.5 rounded bg-gray-100 animate-pulse shrink-0" /> + <div + className="h-3 rounded bg-gray-100 animate-pulse" + style={{ width: `${w}%` }} + /> + </div> + ))} + </div> + ) : filtered.length === 0 ? ( + <p className="text-center text-sm text-gray-400 py-8"> + {q ? "No matches found" : "No documents in this project"} + </p> + ) : ( + <div className="rounded-sm border border-gray-100 overflow-hidden"> + {filtered.map((doc) => { + const excluded = isExcluded(doc.id); + const checked = excluded || selectedIds.has(doc.id); + return ( + <button + type="button" + key={doc.id} + disabled={excluded} + onClick={() => toggle(doc.id)} + className={`w-full flex items-center gap-2 rounded-md px-2 py-2 text-xs text-left transition-all ${ + excluded + ? "opacity-50 cursor-not-allowed" + : checked + ? "bg-gray-100" + : "hover:bg-gray-100/70" + }`} + > + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + checked + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {checked && ( + <Check className="h-2.5 w-2.5 text-white" /> + )} + </span> + <DocFileIcon fileType={doc.file_type} /> + <span + className={`flex-1 truncate ${ + checked + ? "text-gray-900" + : "text-gray-700" + }`} + > + {doc.filename} + </span> + {excluded && ( + <span className="text-[10px] text-gray-400 shrink-0"> + Already added + </span> + )} + <VersionChip + n={ + doc.active_version_number ?? + doc.latest_version_number + } + /> + {doc.created_at && ( + <span className="shrink-0 text-gray-300"> + {formatDate(doc.created_at)} + </span> + )} + </button> + ); + })} + </div> + )} + </div> + </Modal> + ); +} diff --git a/frontend/src/app/components/modals/Modal.tsx b/frontend/src/app/components/modals/Modal.tsx new file mode 100644 index 0000000..76f12b9 --- /dev/null +++ b/frontend/src/app/components/modals/Modal.tsx @@ -0,0 +1,203 @@ +"use client"; + +import { createPortal } from "react-dom"; +import type { ButtonHTMLAttributes, ReactNode } from "react"; +import { X } from "lucide-react"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { cn } from "@/app/lib/utils"; + +type ModalSize = "sm" | "md" | "lg" | "xl"; +type ModalAction = Omit< + ButtonHTMLAttributes<HTMLButtonElement>, + "className" +> & { + label: ReactNode; + icon?: ReactNode; + variant?: "primary" | "secondary" | "danger"; +}; + +interface ModalProps { + open: boolean; + onClose: () => void; + children: ReactNode; + breadcrumbs?: ReactNode[]; + headerAction?: ReactNode; + size?: ModalSize; + className?: string; + footerStatus?: ReactNode; + primaryAction?: ModalAction; + secondaryAction?: ModalAction; + cancelAction?: ModalAction | false; +} + +const sizeClassName: Record<ModalSize, string> = { + sm: "max-w-md", + md: "max-w-xl", + lg: "max-w-2xl", + xl: "max-w-4xl", +}; + +export function Modal({ + open, + onClose, + children, + breadcrumbs, + headerAction, + size = "lg", + className, + footerStatus, + primaryAction, + secondaryAction, + cancelAction, +}: ModalProps) { + const hasHeader = breadcrumbs?.length; + const hasFooter = + footerStatus || + primaryAction || + secondaryAction || + cancelAction; + const resolvedCancelAction = cancelAction; + + if (!open) return null; + + return createPortal( + <div + className={cn( + "fixed inset-0 z-[200] flex items-center justify-center px-4", + "bg-white/10 backdrop-blur-[2px]", + )} + onClick={onClose} + > + <div + className={cn( + "w-full rounded-3xl flex h-[600px] flex-col", + sizeClassName[size], + "border border-white/70 bg-gray-50/95 shadow-[0_14px_40px_rgba(15,23,42,0.101),0_5px_14px_rgba(15,23,42,0.067)] backdrop-blur-3xl", + className, + )} + onClick={(e) => e.stopPropagation()} + > + {hasHeader && ( + <div className="flex items-center justify-between gap-3 p-4 pl-5"> + <div className="flex min-w-0 flex-1 items-center justify-between gap-3"> + <div className="flex min-w-0 flex-wrap items-center gap-1.5 text-xs leading-none text-gray-400"> + {breadcrumbs?.map((segment, index) => ( + <span + key={index} + className="flex items-center gap-1.5" + > + {index > 0 && <span>›</span>} + <span + className={cn( + "truncate", + index === + (breadcrumbs?.length ?? 0) - + 1 && "text-gray-700", + )} + > + {segment} + </span> + </span> + ))} + </div> + {headerAction} + </div> + <button + onClick={onClose} + className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/70 bg-white/55 text-gray-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-1px_0_rgba(255,255,255,0.55),0_6px_18px_rgba(15,23,42,0.08)] backdrop-blur-xl transition-colors hover:bg-white/75 hover:text-gray-700" + aria-label="Close" + > + <X className="h-3.5 w-3.5" /> + </button> + </div> + )} + {/* Body never scrolls itself (so children's edge shadows are + never clipped by the header/footer). Content that can exceed + the modal height wraps its scrollable region in an inner + `overflow-y-auto` div. */} + <div className="flex min-h-0 flex-1 flex-col px-5"> + {children} + </div> + {hasFooter && ( + <div + className={cn( + "flex items-center gap-3 p-3", + secondaryAction + ? "justify-between" + : "justify-end", + "border-t border-white/60", + )} + > + {secondaryAction && ( + <div className="flex min-w-0 items-center gap-2"> + <ModalActionButton + action={secondaryAction} + fallbackVariant="secondary" + /> + </div> + )} + <div className="flex items-center gap-2"> + {footerStatus} + {resolvedCancelAction && ( + <ModalActionButton + action={resolvedCancelAction} + fallbackVariant="cancel" + /> + )} + {primaryAction && ( + <ModalActionButton + action={primaryAction} + fallbackVariant="primary" + /> + )} + </div> + </div> + )} + </div> + </div>, + document.body, + ); +} + +function ModalActionButton({ + action, + fallbackVariant, +}: { + action: ModalAction; + fallbackVariant: "primary" | "secondary" | "danger" | "cancel"; +}) { + const { + label, + icon, + variant = fallbackVariant === "cancel" ? "secondary" : fallbackVariant, + ...props + } = action; + + if (fallbackVariant === "cancel") { + return ( + <button + type="button" + className="px-2 py-1.5 text-sm text-gray-500 transition-colors hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-40" + {...props} + > + {label} + </button> + ); + } + + const tone = + variant === "danger" + ? "danger" + : fallbackVariant === "secondary" && variant === "secondary" + ? "blue" + : variant === "primary" + ? "black" + : "white"; + + return ( + <PillButton tone={tone} size="normal" {...props}> + {icon} + {label} + </PillButton> + ); +} diff --git a/frontend/src/app/components/modals/ModalFieldLabel.tsx b/frontend/src/app/components/modals/ModalFieldLabel.tsx new file mode 100644 index 0000000..39be59c --- /dev/null +++ b/frontend/src/app/components/modals/ModalFieldLabel.tsx @@ -0,0 +1,35 @@ +"use client"; + +import type { ComponentPropsWithoutRef, ReactNode } from "react"; +import { cn } from "@/app/lib/utils"; + +type ModalFieldLabelProps = ComponentPropsWithoutRef<"label"> & { + children: ReactNode; + as?: "label" | "p" | "span"; +}; + +export function ModalFieldLabel({ + as = "label", + children, + className, + ...props +}: ModalFieldLabelProps) { + const classes = cn( + "mb-2 block text-xs font-medium text-gray-700", + className, + ); + + if (as === "p") { + return <p className={classes}>{children}</p>; + } + + if (as === "span") { + return <span className={classes}>{children}</span>; + } + + return ( + <label className={classes} {...props}> + {children} + </label> + ); +} diff --git a/frontend/src/app/components/modals/ModalSegmentedToggle.tsx b/frontend/src/app/components/modals/ModalSegmentedToggle.tsx new file mode 100644 index 0000000..7a8e432 --- /dev/null +++ b/frontend/src/app/components/modals/ModalSegmentedToggle.tsx @@ -0,0 +1,71 @@ +"use client"; + +import type { LucideIcon } from "lucide-react"; +import { cn } from "@/app/lib/utils"; + +export interface SegmentedToggleOption<T extends string> { + value: T; + label: string; + icon?: LucideIcon; +} + +interface ModalSegmentedToggleProps<T extends string> { + value: T; + onChange: (value: T) => void; + options: SegmentedToggleOption<T>[]; + disabled?: boolean; + size?: "sm" | "md"; + className?: string; +} + +export function ModalSegmentedToggle<T extends string>({ + value, + onChange, + options, + disabled = false, + size = "md", + className, +}: ModalSegmentedToggleProps<T>) { + return ( + <div + className={cn( + "inline-grid gap-1 rounded-full bg-gray-100", + size === "sm" ? "h-8 p-1" : "h-9 p-1", + className, + )} + style={{ + gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`, + }} + > + {options.map((option) => { + const Icon = option.icon; + const active = option.value === value; + return ( + <button + key={option.value} + type="button" + onClick={() => onChange(option.value)} + disabled={disabled} + aria-pressed={active} + className={cn( + "flex h-full items-center justify-center rounded-full text-xs transition-all disabled:cursor-not-allowed disabled:opacity-60", + size === "sm" ? "gap-1 px-3" : "gap-1.5 px-3", + active + ? "bg-white/80 text-gray-900 shadow-[0_5px_16px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.92),inset_0_-1px_0_rgba(255,255,255,0.62)] backdrop-blur-xl" + : "text-gray-500 hover:text-gray-700", + )} + > + {Icon && ( + <Icon + className={ + size === "sm" ? "h-2.5 w-2.5" : "h-3 w-3" + } + /> + )} + {option.label} + </button> + ); + })} + </div> + ); +} diff --git a/frontend/src/app/components/modals/ModalSelect.tsx b/frontend/src/app/components/modals/ModalSelect.tsx new file mode 100644 index 0000000..c17bb29 --- /dev/null +++ b/frontend/src/app/components/modals/ModalSelect.tsx @@ -0,0 +1,146 @@ +"use client"; + +import { useState } from "react"; +import { ChevronDown, type LucideIcon } from "lucide-react"; +import { cn } from "@/app/lib/utils"; + +export type ModalSelectOption = + | string + | { + value: string; + label: string; + icon?: LucideIcon; + iconClassName?: string; + }; + +interface ModalSelectProps { + id: string; + value: string; + options: readonly ModalSelectOption[]; + onChange: (value: string) => void; + placeholder?: string; + disabled?: boolean; + open?: boolean; + onOpenChange?: (open: boolean) => void; + className?: string; + menuClassName?: string; +} + +function normalizeOption(option: ModalSelectOption) { + return typeof option === "string" + ? { value: option, label: option } + : option; +} + +export function ModalSelect({ + id, + value, + options, + onChange, + placeholder = "Select...", + disabled = false, + open, + onOpenChange, + className, + menuClassName, +}: ModalSelectProps) { + const [internalOpen, setInternalOpen] = useState(false); + const isOpen = open ?? internalOpen; + const normalizedOptions = options.map(normalizeOption); + const selected = normalizedOptions.find((option) => option.value === value); + const hasValue = value.trim().length > 0; + + function setOpen(next: boolean) { + onOpenChange?.(next); + if (open === undefined) { + setInternalOpen(next); + } + } + + function handleSelect(nextValue: string) { + setOpen(false); + onChange(nextValue); + } + + return ( + <div className="relative"> + <button + id={id} + type="button" + onClick={() => setOpen(!isOpen)} + disabled={disabled} + className={cn( + "flex h-10 w-full items-center justify-between rounded-xl border border-white/70 bg-white/55 px-3 text-sm text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.052),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl transition-colors hover:bg-white/70 focus:bg-white/70 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60", + className, + )} + aria-haspopup="listbox" + aria-expanded={isOpen} + > + <span className="flex min-w-0 items-center gap-2"> + {selected?.icon && ( + <selected.icon + className={cn( + "h-3.5 w-3.5 shrink-0", + selected.iconClassName, + )} + /> + )} + <span + className={cn( + "truncate", + !selected && !hasValue && "text-gray-400", + )} + > + {selected?.label ?? (hasValue ? value : placeholder)} + </span> + </span> + <ChevronDown + className={cn( + "ml-2 h-3.5 w-3.5 shrink-0 text-gray-400 transition-transform", + isOpen && "rotate-180", + )} + /> + </button> + {isOpen && !disabled && ( + <div + role="listbox" + aria-labelledby={id} + className={cn( + "absolute left-0 top-full z-30 mt-1 max-h-56 w-full overflow-y-auto rounded-2xl border border-white/70 bg-gray-50/95 p-1 shadow-[0_12px_32px_rgba(15,23,42,0.156),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-2xl", + menuClassName, + )} + > + {normalizedOptions.map((option) => ( + <button + key={option.value} + type="button" + role="option" + aria-selected={option.value === value} + onClick={() => handleSelect(option.value)} + className={cn( + "flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition-all hover:bg-gray-100/70", + option.value === value + ? "bg-gray-100 text-gray-900" + : "text-gray-700", + )} + > + <span className="flex min-w-0 items-center gap-2"> + {option.icon && ( + <option.icon + className={cn( + "h-3.5 w-3.5 shrink-0", + option.iconClassName, + )} + /> + )} + <span className="truncate"> + {option.label} + </span> + </span> + </button> + ))} + </div> + )} + </div> + ); +} diff --git a/frontend/src/app/components/modals/ModalTextInput.tsx b/frontend/src/app/components/modals/ModalTextInput.tsx new file mode 100644 index 0000000..3525976 --- /dev/null +++ b/frontend/src/app/components/modals/ModalTextInput.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { forwardRef, type InputHTMLAttributes } from "react"; +import { cn } from "@/app/lib/utils"; + +type ModalTextInputVariant = "glass" | "minimal"; + +type ModalTextInputProps = InputHTMLAttributes<HTMLInputElement> & { + variant?: ModalTextInputVariant; +}; + +const variantClasses: Record<ModalTextInputVariant, string> = { + glass: "h-10 w-full rounded-xl border border-white/70 bg-white px-3 text-sm text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.052),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] outline-none placeholder:text-gray-400 backdrop-blur-xl transition-colors disabled:cursor-not-allowed disabled:opacity-60", + minimal: + "w-full bg-transparent font-serif text-2xl text-gray-800 outline-none placeholder:text-gray-300 disabled:cursor-not-allowed disabled:text-gray-400", +}; + +export const ModalTextInput = forwardRef<HTMLInputElement, ModalTextInputProps>( + ({ className, variant = "glass", ...props }, ref) => ( + <input + ref={ref} + className={cn(variantClasses[variant], className)} + {...props} + /> + ), +); + +ModalTextInput.displayName = "ModalTextInput"; diff --git a/frontend/src/app/components/modals/ModalTextarea.tsx b/frontend/src/app/components/modals/ModalTextarea.tsx new file mode 100644 index 0000000..c10133f --- /dev/null +++ b/frontend/src/app/components/modals/ModalTextarea.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { forwardRef, type TextareaHTMLAttributes } from "react"; +import { cn } from "@/app/lib/utils"; + +type ModalTextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>; + +export const ModalTextarea = forwardRef< + HTMLTextAreaElement, + ModalTextareaProps +>(({ className, ...props }, ref) => ( + <textarea + ref={ref} + className={cn( + "min-h-24 w-full resize-none rounded-xl border border-white/70 bg-white px-3 py-2.5 text-sm leading-relaxed text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.052),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] outline-none placeholder:text-gray-400 backdrop-blur-xl transition-colors disabled:cursor-not-allowed disabled:opacity-60", + className, + )} + {...props} + /> +)); + +ModalTextarea.displayName = "ModalTextarea"; diff --git a/frontend/src/app/components/modals/PeopleModal.tsx b/frontend/src/app/components/modals/PeopleModal.tsx new file mode 100644 index 0000000..b94ea8f --- /dev/null +++ b/frontend/src/app/components/modals/PeopleModal.tsx @@ -0,0 +1,435 @@ +"use client"; + +import { useEffect, useMemo, useState } from "react"; +import { User, Loader2 } from "lucide-react"; +import type { ProjectPeople } from "@/app/lib/mikeApi"; +import { AddUserInput } from "../shared/AddUserInput"; +import { Modal } from "./Modal"; + +/** + * Any resource the modal can manage members for — projects today, tabular + * reviews now, anything else with a `shared_with` email list later. + */ +export interface SharedResource { + id: string; + shared_with?: string[] | null; + owner_display_name?: string | null; + owner_email?: string | null; +} + +interface Props { + open: boolean; + onClose: () => void; + /** The thing being shared (project, review, …). */ + resource: SharedResource | null; + /** + * Resolve the owner + members roster for the given resource. Different + * resource types hit different endpoints (`/projects/:id/people`, + * `/tabular-review/:id/people`, …) so the caller passes the appropriate + * fetcher. + */ + fetchPeople: (id: string) => Promise<ProjectPeople>; + /** Currently signed-in user's email — gets the "You" tag if it matches. */ + currentUserEmail?: string | null; + breadcrumb: string[]; + /** + * Persist a new shared_with list. Parent should PATCH the resource and + * sync its local state on success. Throw to surface an error inline. + */ + onSharedWithChange?: (sharedWith: string[]) => Promise<void> | void; +} + +type RosterRow = { + email: string | null; + user_id?: string | null; + display_name: string | null; + role: "owner" | "member"; +}; + +/** + * Roster of every Mike member with access to the project, with controls to + * add/remove members. Mirrors AddDocumentsModal's frame. + */ +export function PeopleModal({ + open, + onClose, + resource, + fetchPeople, + currentUserEmail, + breadcrumb, + onSharedWithChange, +}: Props) { + const [busy, setBusy] = useState<"add" | "remove" | null>(null); + const [removingEmail, setRemovingEmail] = useState<string | null>(null); + const [memberMenuEmail, setMemberMenuEmail] = useState<string | null>(null); + const [error, setError] = useState<string | null>(null); + + // Server-resolved roster: owner email/display_name + members' + // display_names. We keep `resource.shared_with` as the source of truth + // for membership and just merge display_names from this fetch. + const [people, setPeople] = useState<ProjectPeople | null>(null); + const [lookupDisplayByEmail, setLookupDisplayByEmail] = useState< + Map<string, string | null> + >(new Map()); + const [peopleLoading, setPeopleLoading] = useState(false); + const [loadedRosterKey, setLoadedRosterKey] = useState<string | null>(null); + + const resourceId = resource?.id ?? null; + const sharedWith: string[] = useMemo( + () => + Array.isArray(resource?.shared_with) + ? (resource.shared_with as string[]) + : [], + [resource?.shared_with], + ); + + useEffect(() => { + if (!open) return; + setError(null); + setBusy(null); + setRemovingEmail(null); + setMemberMenuEmail(null); + }, [open]); + + useEffect(() => { + if (!memberMenuEmail) return; + function handleClickAway(event: PointerEvent) { + const target = event.target; + if ( + target instanceof HTMLElement && + target.closest("[data-people-member-menu]") + ) { + return; + } + setMemberMenuEmail(null); + } + document.addEventListener("pointerdown", handleClickAway); + return () => + document.removeEventListener("pointerdown", handleClickAway); + }, [memberMenuEmail]); + + // Re-fetch roster whenever the modal opens or membership changes — + // keyed by the joined shared_with list so add/remove triggers a refresh. + const sharedKey = sharedWith + .map((e) => e.toLowerCase()) + .sort() + .join(","); + const rosterKey = `${resourceId ?? ""}:${sharedKey}`; + + useEffect(() => { + if (!open || !resourceId) return; + let cancelled = false; + setPeopleLoading(true); + setPeople(null); + setLoadedRosterKey(null); + fetchPeople(resourceId) + .then((data) => { + if (cancelled) return; + setPeople(data); + setLoadedRosterKey(rosterKey); + }) + .catch(() => { + if (!cancelled) setLoadedRosterKey(rosterKey); + }) + .finally(() => { + if (!cancelled) setPeopleLoading(false); + }); + return () => { + cancelled = true; + }; + }, [open, resourceId, rosterKey, fetchPeople]); + + if (!open || !resource) return null; + + const memberDisplayByEmail = new Map<string, string | null>(); + for (const m of people?.members ?? []) { + memberDisplayByEmail.set(m.email.toLowerCase(), m.display_name); + } + const ownerEmail = + people?.owner.email?.trim().toLowerCase() ?? + resource.owner_email?.trim().toLowerCase() ?? + null; + const ownerDisplayName = + people?.owner.display_name ?? resource.owner_display_name ?? null; + + const roster: RosterRow[] = []; + if (people?.owner || ownerEmail || ownerDisplayName) { + roster.push({ + email: ownerEmail, + user_id: people?.owner.user_id ?? null, + display_name: ownerDisplayName, + role: "owner", + }); + } + for (const email of sharedWith) { + const lower = email.toLowerCase(); + if (ownerEmail && lower === ownerEmail.toLowerCase()) continue; + roster.push({ + email, + display_name: + memberDisplayByEmail.get(lower) ?? + lookupDisplayByEmail.get(lower) ?? + null, + role: "member", + }); + } + + const normalizedCurrentUserEmail = + currentUserEmail?.trim().toLowerCase() ?? null; + const sharedLower = sharedWith.map((e) => e.toLowerCase()); + const rosterPending = peopleLoading || loadedRosterKey !== rosterKey; + + function validateNewEmail(email: string) { + if (sharedLower.includes(email)) return `${email} already has access.`; + if (ownerEmail && email === ownerEmail.toLowerCase()) { + return `${email} is the owner.`; + } + if ( + normalizedCurrentUserEmail && + email === normalizedCurrentUserEmail + ) { + return "You cannot share this with yourself."; + } + return null; + } + + async function handleAddUser(user: { + email: string; + display_name: string | null; + }) { + setLookupDisplayByEmail((prev) => { + const next = new Map(prev); + next.set(user.email.trim().toLowerCase(), user.display_name); + return next; + }); + await handleAdd(user.email); + } + + async function handleAdd(email: string) { + if (!onSharedWithChange || busy !== null) return; + setBusy("add"); + setError(null); + try { + const next = [...sharedWith, email]; + await onSharedWithChange(next); + } catch (e) { + throw new Error( + e instanceof Error + ? e.message + : "Couldn't add the member. Try again.", + ); + } finally { + setBusy(null); + } + } + + async function handleRemove(email: string) { + if (!onSharedWithChange || busy !== null) return; + setBusy("remove"); + setRemovingEmail(email); + setError(null); + try { + const next = sharedWith.filter( + (e) => e.toLowerCase() !== email.toLowerCase(), + ); + await onSharedWithChange(next); + } catch (e) { + setError( + e instanceof Error + ? e.message + : "Couldn't remove the member. Try again.", + ); + } finally { + setBusy(null); + setRemovingEmail(null); + setMemberMenuEmail(null); + } + } + + return ( + <Modal open={open} onClose={onClose} breadcrumbs={breadcrumb}> + <div className="flex min-h-0 flex-1 flex-col gap-5 pb-5"> + {/* Add-member row */} + {onSharedWithChange && ( + <section className="space-y-2"> + <AddUserInput + onAdd={handleAddUser} + validateEmail={validateNewEmail} + busy={busy === "add"} + placeholder="Add by email..." + autoFocus + submitLabel="Add member" + className="bg-white focus-within:bg-white" + /> + {error && ( + <p className="mt-1.5 text-xs text-red-500"> + {error} + </p> + )} + </section> + )} + + <section className="flex min-h-0 flex-1 flex-col"> + <div className="mb-2 flex items-center gap-2"> + <h3 className="text-xs font-medium text-gray-500"> + People with Access + </h3> + {peopleLoading && ( + <Loader2 className="h-3 w-3 animate-spin text-gray-400" /> + )} + </div> + + {/* Member list */} + {rosterPending ? ( + <div className="min-h-0 flex-1 space-y-1"> + {[1, 2].map((item) => ( + <div + key={item} + className="flex items-center gap-2.5 rounded-lg px-2 py-1.5" + > + <div className="h-6 w-6 shrink-0 animate-pulse rounded-full bg-gray-100" /> + <div className="min-w-0 flex-1"> + <div className="h-3 w-40 animate-pulse rounded bg-gray-100" /> + </div> + <div className="h-4 w-12 shrink-0 animate-pulse rounded-full bg-gray-100" /> + </div> + ))} + </div> + ) : roster.length === 0 ? ( + <div className="flex min-h-0 flex-1 items-center justify-center text-sm text-gray-400"> + No one has access yet. + </div> + ) : ( + <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto"> + {roster.map((entry) => { + const entryEmail = entry.email ?? ""; + const rowKey = + entry.email ?? + entry.user_id ?? + `${entry.role}-unknown`; + const isYou = + !!currentUserEmail && + !!entryEmail && + entryEmail.toLowerCase() === + currentUserEmail.toLowerCase(); + const isRemoving = + busy === "remove" && + removingEmail === entryEmail; + const displayName = entry.display_name?.trim(); + const primary = isYou + ? "You" + : displayName || entryEmail || "User"; + const showEmail = + !isYou && !!displayName && !!entryEmail; + const initial = displayName + ?.charAt(0) + .toUpperCase(); + return ( + <li + key={`${entry.role}-${rowKey}`} + className="group relative flex items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-gray-100/70" + > + <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/80 bg-white text-gray-700 shadow-[0_4px_12px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.92),inset_0_-1px_0_rgba(255,255,255,0.64)]"> + {initial ? ( + <span className="font-serif text-[11px] leading-none"> + {initial} + </span> + ) : ( + <User className="h-2.5 w-2.5" /> + )} + </div> + <div className="min-w-0 flex-1"> + <p className="truncate text-xs text-gray-800"> + {primary} + {showEmail && ( + <span className="text-gray-400"> + {" "} + · {entry.email} + </span> + )} + </p> + </div> + {entry.role === "owner" && ( + <span className="shrink-0 rounded-full px-2 py-1 text-xs text-gray-400"> + Owner + </span> + )} + {entry.role === "member" && ( + <div + className="relative flex shrink-0 items-center" + data-people-member-menu + > + <span className="rounded-full px-2 py-1 text-xs text-gray-400"> + Member + </span> + {onSharedWithChange && ( + <> + <button + type="button" + onClick={(event) => { + event.stopPropagation(); + setMemberMenuEmail( + (current) => + current === + entryEmail + ? null + : entryEmail, + ); + }} + disabled={ + busy !== null + } + title="Member actions" + className={`flex h-6 items-center justify-center overflow-hidden rounded-full text-xs leading-none text-gray-500 transition-all hover:bg-gray-200/70 hover:text-gray-800 disabled:opacity-50 ${ + memberMenuEmail === + entryEmail + ? "w-6 opacity-100" + : "w-0 opacity-0 group-hover:w-6 group-hover:opacity-100" + }`} + > + ··· + </button> + {memberMenuEmail === + entryEmail && ( + <div + className="absolute right-0 top-full z-30 mt-1 min-w-28 overflow-hidden rounded-xl border border-white/70 bg-gray-50/95 p-1 shadow-[0_8px_20px_rgba(15,23,42,0.09),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-2xl" + onClick={( + event, + ) => + event.stopPropagation() + } + > + <button + type="button" + onClick={() => + void handleRemove( + entryEmail, + ) + } + disabled={ + busy !== + null + } + className="flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs text-red-500 transition-colors hover:bg-red-500/10 disabled:opacity-50" + > + {isRemoving && ( + <Loader2 className="h-3 w-3 animate-spin" /> + )} + Delete + </button> + </div> + )} + </> + )} + </div> + )} + </li> + ); + })} + </ul> + )} + </section> + </div> + </Modal> + ); +} diff --git a/frontend/src/app/components/modals/ProjectPickerModal.tsx b/frontend/src/app/components/modals/ProjectPickerModal.tsx new file mode 100644 index 0000000..75bec10 --- /dev/null +++ b/frontend/src/app/components/modals/ProjectPickerModal.tsx @@ -0,0 +1,136 @@ +"use client"; + +import { useState, type ButtonHTMLAttributes, type ReactNode } from "react"; +import { Folder } from "lucide-react"; +import { SearchBar } from "@/app/components/ui/search-bar"; +import type { Project } from "../shared/types"; +import { Modal } from "./Modal"; + +type PrimaryAction = Omit< + ButtonHTMLAttributes<HTMLButtonElement>, + "className" +> & { + label: ReactNode; +}; + +interface Props { + open: boolean; + onClose: () => void; + projects: Project[]; + loading: boolean; + selectedId: string | null; + onSelect: (id: string | null) => void; + breadcrumbs?: ReactNode[]; + primaryAction?: PrimaryAction; +} + +export function ProjectPickerModal({ + open, + onClose, + projects, + loading, + selectedId, + onSelect, + breadcrumbs, + primaryAction, +}: Props) { + const [search, setSearch] = useState(""); + const q = search.toLowerCase().trim(); + const filtered = q + ? projects.filter((p) => p.name.toLowerCase().includes(q)) + : projects; + + return ( + <Modal + open={open} + onClose={onClose} + breadcrumbs={breadcrumbs} + primaryAction={primaryAction} + > + <div className="pt-1 pb-2"> + <SearchBar + value={search} + onValueChange={setSearch} + placeholder="Search projects..." + autoFocus + /> + </div> + <div className="min-h-0 flex-1 overflow-y-auto pb-2"> + {loading ? ( + <div className="space-y-px"> + <div className="flex items-center rounded-md px-2 py-2"> + <div className="h-3 w-14 rounded bg-gray-100 animate-pulse" /> + </div> + {[65, 45, 80, 55, 70].map((w, i) => ( + <div + key={i} + className="flex items-center gap-2 rounded-md px-2 py-2" + > + <div className="h-3.5 w-3.5 rounded-full border border-gray-200 shrink-0" /> + <div className="h-3.5 w-3.5 rounded bg-gray-100 animate-pulse shrink-0" /> + <div + className="h-3 rounded bg-gray-100 animate-pulse" + style={{ width: `${w}%` }} + /> + </div> + ))} + </div> + ) : filtered.length === 0 ? ( + <p className="text-center text-sm text-gray-400 py-8"> + {q ? "No matches found" : "No projects yet"} + </p> + ) : ( + <div className="rounded-sm overflow-hidden"> + <div className="flex items-center justify-between px-2 py-2"> + <p className="text-xs font-medium text-gray-400"> + Projects + </p> + </div> + <div className="space-y-px"> + {filtered.map((project) => { + const isSelected = selectedId === project.id; + const documentCount = + project.document_count ?? + project.documents?.length ?? + 0; + return ( + <button + key={project.id} + onClick={() => + onSelect( + isSelected ? null : project.id, + ) + } + className={`w-full flex rounded-md items-center gap-2 px-2 py-2 text-xs transition-all text-left ${isSelected ? "bg-gray-100" : "hover:bg-gray-100/70"}`} + > + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${isSelected ? "bg-gray-900 border-gray-900" : "border-gray-300"}`} + > + {isSelected && ( + <span className="h-1.5 w-1.5 rounded-sm bg-white" /> + )} + </span> + <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + <span + className={`flex-1 truncate ${isSelected ? "text-gray-900" : "text-gray-700"}`} + > + {project.name} + {project.cm_number && ( + <span className="ml-1 font-normal text-gray-400"> + (#{project.cm_number}) + </span> + )} + </span> + <span className="shrink-0 text-gray-400"> + {documentCount} + </span> + </button> + ); + })} + </div> + </div> + )} + </div> + </Modal> + ); +} diff --git a/frontend/src/app/components/popups/ApiKeyMissingPopup.tsx b/frontend/src/app/components/popups/ApiKeyMissingPopup.tsx new file mode 100644 index 0000000..e59aeca --- /dev/null +++ b/frontend/src/app/components/popups/ApiKeyMissingPopup.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { AlertTriangle } from "lucide-react"; +import { providerLabel, type ModelProvider } from "@/app/lib/modelAvailability"; +import { WarningPopup } from "../popups/WarningPopup"; + +interface Props { + open: boolean; + onClose: () => void; + provider: ModelProvider | null; + /** Optional override for the body sentence. */ + message?: string; +} + +export function ApiKeyMissingPopup({ open, onClose, provider, message }: Props) { + const router = useRouter(); + if (!open) return null; + + const providerName = provider ? providerLabel(provider) : "this provider"; + const body = + message ?? + `You haven't added a ${providerName} API key yet. Add one in your account settings to use this model.`; + + const handleGoToAccount = () => { + onClose(); + router.push("/account/models"); + }; + + return ( + <WarningPopup + open={open} + onClose={onClose} + title="API key required" + message={body} + icon={ + <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-red-600" /> + } + primaryAction={{ + label: "Go to account settings", + onClick: handleGoToAccount, + }} + /> + ); +} diff --git a/frontend/src/app/components/popups/ConfirmPopup.tsx b/frontend/src/app/components/popups/ConfirmPopup.tsx new file mode 100644 index 0000000..9201b79 --- /dev/null +++ b/frontend/src/app/components/popups/ConfirmPopup.tsx @@ -0,0 +1,114 @@ +"use client"; + +import { createPortal } from "react-dom"; +import type { ReactNode } from "react"; +import { Loader2, Trash2 } from "lucide-react"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { cn } from "@/app/lib/utils"; + +type ConfirmStatus = "idle" | "loading" | "complete"; + +interface ConfirmPopupProps { + open: boolean; + title?: ReactNode; + message?: ReactNode; + confirmLabel?: ReactNode; + confirmStatus?: ConfirmStatus; + cancelLabel?: ReactNode; + onConfirm: () => void; + onCancel: () => void; + confirmDisabled?: boolean; + className?: string; +} + +export function ConfirmPopup({ + open, + title, + message, + confirmLabel = "Confirm", + confirmStatus = "idle", + cancelLabel = "Cancel", + onConfirm, + onCancel, + confirmDisabled = false, + className, +}: ConfirmPopupProps) { + if (!open) return null; + const confirmBusy = confirmStatus === "loading"; + const resolvedConfirmDisabled = confirmDisabled || confirmStatus !== "idle"; + const normalizedConfirmLabel = + typeof confirmLabel === "string" ? confirmLabel : "Confirm"; + const isDeleteAction = normalizedConfirmLabel.toLowerCase() === "delete"; + const resolvedConfirmLabel = + confirmStatus === "loading" ? ( + <span className="inline-flex h-full items-center gap-1.5"> + <Loader2 className="h-3 w-3 shrink-0 animate-spin" /> + {progressiveLabel(normalizedConfirmLabel)} + </span> + ) : confirmStatus === "complete" ? ( + completedLabel(normalizedConfirmLabel) + ) : isDeleteAction ? ( + <span className="inline-flex h-full items-center gap-1.5"> + <Trash2 className="h-3 w-3 shrink-0" /> + {confirmLabel} + </span> + ) : ( + confirmLabel + ); + + return createPortal( + <div className="pointer-events-none fixed inset-x-0 bottom-5 z-[230] flex justify-center px-4"> + <div + className={cn( + "pointer-events-auto w-[min(92vw,520px)] rounded-2xl border border-white/70 bg-white px-4 py-3 text-sm shadow-[0_4px_14px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.92)] backdrop-blur-2xl", + className, + )} + > + {title && ( + <div className="text-sm font-medium text-gray-950 mb-3"> + {title} + </div> + )} + {message && ( + <div + className={cn("text-xs text-gray-700", title && "mt-1")} + > + {message} + </div> + )} + <div className="mt-3 flex items-center justify-end gap-2"> + <PillButton + tone="white" + size="sm" + onClick={onCancel} + > + {cancelLabel} + </PillButton> + <PillButton + tone={isDeleteAction ? "danger" : "black"} + size="sm" + onClick={onConfirm} + disabled={resolvedConfirmDisabled} + className="h-7 px-3.5 leading-none" + aria-busy={confirmBusy} + > + {resolvedConfirmLabel} + </PillButton> + </div> + </div> + </div>, + document.body, + ); +} + +function progressiveLabel(label: string) { + const lower = label.toLowerCase(); + if (lower.endsWith("e")) return `${label.slice(0, -1)}ing...`; + return `${label}ing...`; +} + +function completedLabel(label: string) { + const lower = label.toLowerCase(); + if (lower.endsWith("e")) return `${label}d`; + return `${label}ed`; +} diff --git a/frontend/src/app/components/popups/MfaVerificationPopup.tsx b/frontend/src/app/components/popups/MfaVerificationPopup.tsx new file mode 100644 index 0000000..8916779 --- /dev/null +++ b/frontend/src/app/components/popups/MfaVerificationPopup.tsx @@ -0,0 +1,294 @@ +"use client"; + +import { + useEffect, + useRef, + useState, + type ClipboardEvent, + type KeyboardEvent, +} from "react"; +import { Loader2 } from "lucide-react"; +import { supabase } from "@/app/lib/supabase"; +import { Modal } from "../modals/Modal"; + +type MfaFactor = { + id: string; + friendly_name?: string | null; + factor_type: string; +}; + +const isDev = process.env.NODE_ENV !== "production"; +const devLog = (...args: Parameters<typeof console.log>) => { + if (isDev) console.log(...args); +}; + +export async function needsMfaVerification() { + const { data, error } = + await supabase.auth.mfa.getAuthenticatorAssuranceLevel(); + if (error) throw error; + return data.nextLevel === "aal2" && data.currentLevel !== "aal2"; +} + +interface MfaVerificationPopupProps { + open: boolean; + onCancel: () => void; + onVerified: () => void; + title?: string; + message?: string; +} + +export function MfaVerificationPopup({ + open, + onCancel, + onVerified, + title = "Two-factor verification required", + message = "Enter a code from your authenticator app to continue.", +}: MfaVerificationPopupProps) { + const [factors, setFactors] = useState<MfaFactor[]>([]); + const [selectedFactorId, setSelectedFactorId] = useState(""); + const [code, setCode] = useState(""); + const [loading, setLoading] = useState(false); + const [verifying, setVerifying] = useState(false); + const [error, setError] = useState<string | null>(null); + const canVerify = + !verifying && + !loading && + !!selectedFactorId && + code.trim().length === 6; + + useEffect(() => { + if (!open) return; + let cancelled = false; + devLog("[mfa-popup] opened"); + + async function loadFactors() { + setLoading(true); + setError(null); + setCode(""); + const { data, error: listError } = + await supabase.auth.mfa.listFactors(); + if (cancelled) return; + if (listError) { + devLog("[mfa-popup] list factors failed", { + error: listError.message, + }); + setError(listError.message); + setFactors([]); + setSelectedFactorId(""); + } else { + const verified = (data.totp ?? []) as MfaFactor[]; + devLog("[mfa-popup] factors loaded", { + totpCount: verified.length, + selectedFactorId: verified[0]?.id ?? null, + }); + setFactors(verified); + setSelectedFactorId(verified[0]?.id ?? ""); + } + setLoading(false); + } + + void loadFactors(); + return () => { + cancelled = true; + }; + }, [open]); + + async function verify() { + if (!canVerify) return; + + setVerifying(true); + setError(null); + devLog("[mfa-popup] verifying code", { factorId: selectedFactorId }); + const { error: verifyError } = + await supabase.auth.mfa.challengeAndVerify({ + factorId: selectedFactorId, + code: code.trim(), + }); + setVerifying(false); + + if (verifyError) { + devLog("[mfa-popup] verification failed", { + error: verifyError.message, + }); + setError(verifyError.message); + return; + } + + devLog("[mfa-popup] verification succeeded"); + setCode(""); + onVerified(); + } + + if (!open) return null; + + return ( + <Modal + open={open} + onClose={onCancel} + breadcrumbs={[title]} + size="sm" + className="h-auto min-h-[310px] max-h-[min(92vh,400px)]" + cancelAction={{ + label: "Cancel", + onClick: onCancel, + disabled: verifying, + }} + primaryAction={{ + label: verifying ? ( + <span className="inline-flex items-center gap-1.5"> + <Loader2 className="h-3 w-3 animate-spin" /> + Verifying... + </span> + ) : ( + "Verify" + ), + onClick: () => void verify(), + disabled: !canVerify, + }} + > + <div className="min-h-0 flex-1 space-y-5 overflow-y-auto pb-2 pt-0"> + <p className="text-sm text-gray-500 pb-6">{message}</p> + {loading ? ( + <div className="flex h-13 items-center justify-center text-sm text-gray-500"> + <Loader2 className="mr-2 h-4 w-4 animate-spin" /> + Loading authenticator... + </div> + ) : factors.length === 0 ? ( + <p className="rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600"> + No verified authenticator factor is available for this + session. + </p> + ) : ( + <div className="space-y-4"> + {factors.length > 1 && ( + <select + value={selectedFactorId} + onChange={(event) => + setSelectedFactorId(event.target.value) + } + className="h-9 w-full rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none focus-visible:ring-2 focus-visible:ring-gray-300/45" + > + {factors.map((factor) => ( + <option key={factor.id} value={factor.id}> + {factor.friendly_name || + "Authenticator app"} + </option> + ))} + </select> + )} + <VerificationCodeInput + value={code} + onChange={setCode} + disabled={verifying} + autoFocus={open && !loading} + onSubmit={() => void verify()} + canSubmit={canVerify} + /> + </div> + )} + {error && <p className="text-xs text-red-600">{error}</p>} + </div> + </Modal> + ); +} + +export function VerificationCodeInput({ + value, + onChange, + disabled, + autoFocus, + onSubmit, + canSubmit, +}: { + value: string; + onChange: (value: string) => void; + disabled?: boolean; + autoFocus?: boolean; + onSubmit?: () => void; + canSubmit?: boolean; +}) { + const inputsRef = useRef<Array<HTMLInputElement | null>>([]); + const digits = Array.from({ length: 6 }, (_, index) => value[index] ?? ""); + + useEffect(() => { + if (!autoFocus || disabled) return; + const focusTimer = window.setTimeout(() => { + const firstEmptyIndex = digits.findIndex((digit) => !digit); + inputsRef.current[ + firstEmptyIndex === -1 ? 0 : firstEmptyIndex + ]?.focus(); + }, 0); + return () => window.clearTimeout(focusTimer); + }, [autoFocus, disabled]); + + function updateDigit(index: number, nextValue: string) { + const digit = nextValue.replace(/\D/g, "").slice(-1); + const nextDigits = [...digits]; + nextDigits[index] = digit; + onChange(nextDigits.join("")); + if (digit && index < inputsRef.current.length - 1) { + inputsRef.current[index + 1]?.focus(); + } + } + + function handlePaste(event: ClipboardEvent<HTMLInputElement>) { + event.preventDefault(); + const pasted = event.clipboardData + .getData("text") + .replace(/\D/g, "") + .slice(0, 6); + if (!pasted) return; + onChange(pasted); + inputsRef.current[Math.min(pasted.length, 6) - 1]?.focus(); + } + + function handleKeyDown( + event: KeyboardEvent<HTMLInputElement>, + index: number, + ) { + if (event.key === "Enter") { + event.preventDefault(); + if (canSubmit) onSubmit?.(); + return; + } + if (event.key === "Backspace" && !digits[index] && index > 0) { + inputsRef.current[index - 1]?.focus(); + } + if (event.key === "ArrowLeft" && index > 0) { + event.preventDefault(); + inputsRef.current[index - 1]?.focus(); + } + if (event.key === "ArrowRight" && index < digits.length - 1) { + event.preventDefault(); + inputsRef.current[index + 1]?.focus(); + } + } + + return ( + <div + className="flex justify-center gap-2" + role="group" + aria-label="Six digit verification code" + > + {digits.map((digit, index) => ( + <input + key={index} + ref={(element) => { + inputsRef.current[index] = element; + }} + type="text" + inputMode="numeric" + autoComplete={index === 0 ? "one-time-code" : "off"} + value={digit} + disabled={disabled} + onChange={(event) => updateDigit(index, event.target.value)} + onPaste={handlePaste} + onKeyDown={(event) => handleKeyDown(event, index)} + className="h-13 w-12 rounded-lg border border-gray-300 bg-gray-50 text-center text-2xl font-medium font-serif text-gray-950 shadow-none outline-none transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-300/45 disabled:cursor-not-allowed disabled:opacity-45" + aria-label={`Verification code digit ${index + 1}`} + maxLength={1} + /> + ))} + </div> + ); +} diff --git a/frontend/src/app/components/popups/OwnerOnlyPopup.tsx b/frontend/src/app/components/popups/OwnerOnlyPopup.tsx new file mode 100644 index 0000000..fa41bed --- /dev/null +++ b/frontend/src/app/components/popups/OwnerOnlyPopup.tsx @@ -0,0 +1,57 @@ +"use client"; + +import { Lock } from "lucide-react"; +import { WarningPopup } from "../popups/WarningPopup"; + +interface Props { + open: boolean; + onClose: () => void; + /** Short headline above the body, e.g. "Owner-only action". */ + title?: string; + /** Sentence describing what the user tried to do. */ + action?: string; + /** Email of the project/resource owner, shown so the user knows who to ask. */ + ownerEmail?: string | null; + /** Override the default message entirely. */ + message?: string; +} + +/** + * Lightweight "you don't have permission" popup shown when a non-owner + * attempts an owner-only action (manage people, rename, delete, …) on a + * shared project. Replaces the silent 404 the backend would otherwise + * return so the user understands why the action didn't go through. + */ +export function OwnerOnlyPopup({ + open, + onClose, + title = "Owner-only action", + action, + ownerEmail, + message, +}: Props) { + if (!open) return null; + + const body = + message ?? + (action + ? `Only the project owner can ${action}.` + : "Only the project owner can perform this action."); + + return ( + <WarningPopup + open={open} + onClose={onClose} + title={title} + message={body} + icon={<Lock className="h-3.5 w-3.5 shrink-0 text-red-600" />} + > + {ownerEmail && ( + <p className="mt-1 text-xs text-gray-600"> + Ask <span className="text-gray-600">{ownerEmail}</span> if + you need access. + </p> + )} + </WarningPopup> + ); +} diff --git a/frontend/src/app/components/popups/WarningPopup.tsx b/frontend/src/app/components/popups/WarningPopup.tsx new file mode 100644 index 0000000..8a50f50 --- /dev/null +++ b/frontend/src/app/components/popups/WarningPopup.tsx @@ -0,0 +1,117 @@ +"use client"; + +import { createPortal } from "react-dom"; +import type { ReactNode } from "react"; +import { AlertCircle, X } from "lucide-react"; +import { cn } from "@/app/lib/utils"; + +interface WarningPopupAction { + label: ReactNode; + onClick: () => void; + disabled?: boolean; +} + +interface WarningPopupProps { + open: boolean; + onClose: () => void; + title?: ReactNode; + message?: ReactNode; + children?: ReactNode; + icon?: ReactNode; + primaryAction?: WarningPopupAction; + secondaryAction?: WarningPopupAction; + className?: string; +} + +export function WarningPopup({ + open, + onClose, + title, + message, + children, + icon, + primaryAction, + secondaryAction, + className, +}: WarningPopupProps) { + if (!open) return null; + + const warningIcon = icon ?? ( + <AlertCircle className="h-3 w-3 shrink-0 text-red-600" /> + ); + + return createPortal( + <div className="pointer-events-none fixed left-1/2 top-5 z-[220] w-[min(92vw,520px)] -translate-x-1/2 px-4"> + <div + className={cn( + "pointer-events-auto flex items-start gap-2 rounded-2xl border border-white/70 bg-red-50/75 px-3 py-2 text-xs shadow-[0_4px_12px_rgba(15,23,42,0.11),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-6px_12px_rgba(255,255,255,0.2)] backdrop-blur-2xl", + className, + )} + > + <div className="min-w-0 flex-1 self-center text-red-600"> + {title && ( + <div className="flex items-center gap-1.5 font-medium mb-1"> + {warningIcon} + {title} + </div> + )} + {message && ( + <div + className={cn(!title && "flex items-start gap-1.5")} + > + {!title && warningIcon} + <span className="min-w-0">{message}</span> + </div> + )} + {children} + {(primaryAction || secondaryAction) && ( + <div className="mt-2 flex items-center gap-2"> + {secondaryAction && ( + <WarningPopupButton action={secondaryAction} /> + )} + {primaryAction && ( + <WarningPopupButton + action={primaryAction} + primary + /> + )} + </div> + )} + </div> + <button + type="button" + onClick={onClose} + className="shrink-0 text-red-700 transition-colors hover:text-red-500" + aria-label="Dismiss warning" + > + <X className="h-3.5 w-3.5" /> + </button> + </div> + </div>, + document.body, + ); +} + +function WarningPopupButton({ + action, + primary = false, +}: { + action: WarningPopupAction; + primary?: boolean; +}) { + return ( + <button + type="button" + onClick={action.onClick} + disabled={action.disabled} + className={cn( + "rounded-lg px-3 py-1 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40", + primary + ? "bg-gray-900 text-white hover:bg-gray-700" + : "text-gray-700 hover:bg-white/70", + )} + > + {action.label} + </button> + ); +} diff --git a/frontend/src/app/components/projects/DocumentSidePanel.tsx b/frontend/src/app/components/projects/DocumentSidePanel.tsx index 4126e8e..1936a5d 100644 --- a/frontend/src/app/components/projects/DocumentSidePanel.tsx +++ b/frontend/src/app/components/projects/DocumentSidePanel.tsx @@ -19,7 +19,7 @@ import { WarningPopup } from "@/app/components/popups/WarningPopup"; import type { Document } from "@/app/components/shared/types"; import { isSpreadsheetFilename } from "@/app/components/shared/types"; import type { DocumentVersion } from "@/app/lib/mikeApi"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; import { formatBytes } from "./ProjectPageParts"; const MIN_DOC_COLUMN_WIDTH = 420; @@ -489,7 +489,6 @@ export function DocumentSidePanel({ documentId={doc.id} versionId={selectedVersionId} rounded={false} - bordered={false} /> ) : ( <PdfView @@ -499,7 +498,6 @@ export function DocumentSidePanel({ version_id: selectedVersionId, }} rounded={false} - bordered={false} /> )} </div> diff --git a/frontend/src/app/components/projects/NewProjectModal.tsx b/frontend/src/app/components/projects/NewProjectModal.tsx index f23aa08..e592500 100644 --- a/frontend/src/app/components/projects/NewProjectModal.tsx +++ b/frontend/src/app/components/projects/NewProjectModal.tsx @@ -12,7 +12,7 @@ import { FileDirectory } from "../shared/FileDirectory"; import { AddUserInput } from "../shared/AddUserInput"; import type { Project } from "../shared/types"; import type { UserLookupResult } from "@/app/lib/mikeApi"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { Modal } from "../modals/Modal"; import { ModalFieldLabel } from "../modals/ModalFieldLabel"; import { ModalTextInput } from "../modals/ModalTextInput"; @@ -151,12 +151,12 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { breadcrumbs={[ "Projects", "New project", - step === "details" ? "Details" : "Documents", + step === "details" ? "Details" : "Add Documents", ]} secondaryAction={ step === "documents" ? { - label: `Upload documents${pendingFiles.length > 0 ? ` (${pendingFiles.length})` : ""}`, + label: `Upload${pendingFiles.length > 0 ? ` (${pendingFiles.length})` : ""}`, icon: <Upload className="h-3.5 w-3.5" />, onClick: () => fileInputRef.current?.click(), disabled: loading, @@ -309,7 +309,7 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { </div> </div> ) : ( - <div className="min-h-0 flex-1"> + <div className="flex min-h-0 flex-1 flex-col"> <FileDirectory standaloneDocs={standaloneDocuments} directoryProjects={dirProjects} @@ -319,6 +319,7 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { emptyMessage="No existing documents" searchable searchAutoFocus + showProjectTabs /> </div> )} diff --git a/frontend/src/app/components/projects/ProjectDocumentsView.tsx b/frontend/src/app/components/projects/ProjectDocumentsView.tsx index d558f45..264fe7a 100644 --- a/frontend/src/app/components/projects/ProjectDocumentsView.tsx +++ b/frontend/src/app/components/projects/ProjectDocumentsView.tsx @@ -44,7 +44,7 @@ import { AddDocumentsModal, invalidateDirectoryCache, } from "@/app/components/modals/AddDocumentsModal"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { WarningPopup } from "@/app/components/popups/WarningPopup"; import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { diff --git a/frontend/src/app/components/projects/ProjectPracticeField.tsx b/frontend/src/app/components/projects/ProjectPracticeField.tsx new file mode 100644 index 0000000..755adee --- /dev/null +++ b/frontend/src/app/components/projects/ProjectPracticeField.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { useMemo } from "react"; +import { PRACTICE_OPTIONS } from "../workflows/practices"; +import { ModalSelect, type ModalSelectOption } from "../modals/ModalSelect"; +import { ModalTextInput } from "../modals/ModalTextInput"; + +const OPTION_NONE = "__none__"; +const OPTION_OTHER = "Other"; + +interface ProjectPracticeFieldProps { + id: string; + value: string; + onChange: (value: string) => void; + disabled?: boolean; +} + +export function ProjectPracticeField({ + id, + value, + onChange, + disabled = false, +}: ProjectPracticeFieldProps) { + const selectedOption = useMemo(() => { + if (!value.trim()) return OPTION_NONE; + return (PRACTICE_OPTIONS as readonly string[]).includes(value) + ? value + : OPTION_OTHER; + }, [value]); + const customValue = + selectedOption === OPTION_OTHER && value !== OPTION_OTHER ? value : ""; + const options = useMemo<ModalSelectOption[]>( + () => [ + { value: OPTION_NONE, label: "None" }, + ...PRACTICE_OPTIONS, + ], + [], + ); + + function handleSelect(option: string) { + if (option === OPTION_NONE) { + onChange(""); + return; + } + if (option === OPTION_OTHER) { + onChange(OPTION_OTHER); + return; + } + onChange(option); + } + + return ( + <div className="space-y-2"> + <ModalSelect + id={id} + value={selectedOption} + options={options} + onChange={handleSelect} + placeholder="Select practice" + disabled={disabled} + /> + {selectedOption === OPTION_OTHER && ( + <ModalTextInput + type="text" + value={customValue} + onChange={(event) => onChange(event.target.value)} + placeholder="Enter practice..." + disabled={disabled} + /> + )} + </div> + ); +} diff --git a/frontend/src/app/components/projects/ProjectWorkspace.tsx b/frontend/src/app/components/projects/ProjectWorkspace.tsx index 76fa030..f751384 100644 --- a/frontend/src/app/components/projects/ProjectWorkspace.tsx +++ b/frontend/src/app/components/projects/ProjectWorkspace.tsx @@ -34,8 +34,8 @@ import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import { PeopleModal } from "@/app/components/modals/PeopleModal"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { ProjectDetailsModal } from "./ProjectDetailsModal"; import { ProjectPageHeader, diff --git a/frontend/src/app/components/projects/ProjectsOverview.tsx b/frontend/src/app/components/projects/ProjectsOverview.tsx index 01016bf..9c08f77 100644 --- a/frontend/src/app/components/projects/ProjectsOverview.tsx +++ b/frontend/src/app/components/projects/ProjectsOverview.tsx @@ -9,7 +9,7 @@ import { deleteProject, } from "@/app/lib/mikeApi"; import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import type { Project } from "@/app/components/shared/types"; import { NewProjectModal } from "./NewProjectModal"; import { ProjectDetailsModal } from "./ProjectDetailsModal"; diff --git a/frontend/src/components/providers.tsx b/frontend/src/app/components/providers.tsx similarity index 84% rename from frontend/src/components/providers.tsx rename to frontend/src/app/components/providers.tsx index 8d00463..039934b 100644 --- a/frontend/src/components/providers.tsx +++ b/frontend/src/app/components/providers.tsx @@ -1,8 +1,8 @@ "use client"; import { Suspense } from "react"; -import { AuthProvider } from "@/contexts/AuthContext"; -import { UserProfileProvider } from "@/contexts/UserProfileContext"; +import { AuthProvider } from "@/app/contexts/AuthContext"; +import { UserProfileProvider } from "@/app/contexts/UserProfileContext"; import { MfaLoginGate } from "@/app/components/shared/MfaLoginGate"; export function Providers({ children }: { children: React.ReactNode }) { diff --git a/frontend/src/app/components/shared/AddUserInput.tsx b/frontend/src/app/components/shared/AddUserInput.tsx new file mode 100644 index 0000000..cd5aa3c --- /dev/null +++ b/frontend/src/app/components/shared/AddUserInput.tsx @@ -0,0 +1,123 @@ +"use client"; + +import { useState } from "react"; +import type { KeyboardEvent } from "react"; +import { Loader2, UserPlus } from "lucide-react"; +import { + lookupUserByEmail, + type UserLookupResult, +} from "@/app/lib/mikeApi"; +import { cn } from "@/app/lib/utils"; + +const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +interface AddUserInputProps { + onAdd: (user: UserLookupResult) => Promise<void> | void; + validateEmail?: (email: string) => Promise<string | null> | string | null; + busy?: boolean; + placeholder?: string; + autoFocus?: boolean; + submitLabel?: string; + className?: string; +} + +export function AddUserInput({ + onAdd, + validateEmail, + busy = false, + placeholder = "Add by email...", + autoFocus = false, + submitLabel = "Add user", + className, +}: AddUserInputProps) { + const [input, setInput] = useState(""); + const [checking, setChecking] = useState(false); + const [error, setError] = useState<string | null>(null); + + const trimmedEmail = input.trim().toLowerCase(); + const showAddButton = trimmedEmail.length > 0; + + async function commitUser() { + const email = trimmedEmail; + if (!email || busy || checking) return; + if (!EMAIL_RE.test(email)) { + setError("Enter a valid email."); + return; + } + + setError(null); + setChecking(true); + try { + const validationError = await validateEmail?.(email); + if (validationError) { + setError(validationError); + return; + } + + const user = await lookupUserByEmail(email); + if (!user.exists) { + setError(`${email} does not belong to a Mike user.`); + return; + } + + await onAdd(user); + setInput(""); + } catch (err) { + setError( + err instanceof Error + ? err.message + : "Could not add this user. Try again.", + ); + } finally { + setChecking(false); + } + } + + function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) { + if (event.key === "Enter" || event.key === ",") { + event.preventDefault(); + void commitUser(); + } + } + + return ( + <div> + <div + className={cn( + "flex min-h-10 items-center gap-2 rounded-xl border border-white/70 bg-white/55 px-3 py-1.5 shadow-[0_3px_9px_rgba(15,23,42,0.04),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl transition-colors focus-within:bg-white/70", + className, + )} + > + <UserPlus className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + <input + type="email" + value={input} + onChange={(event) => { + setInput(event.target.value); + setError(null); + }} + onKeyDown={handleKeyDown} + placeholder={placeholder} + className="min-w-0 flex-1 bg-transparent text-sm text-gray-700 outline-none placeholder:text-gray-400" + autoFocus={autoFocus} + /> + {showAddButton && ( + <button + type="button" + onMouseDown={(event) => event.preventDefault()} + onClick={() => void commitUser()} + disabled={busy || checking} + title={submitLabel} + className="inline-flex h-6 shrink-0 items-center gap-1 rounded-full border border-blue-500/35 bg-blue-600/90 px-2.5 text-[11px] font-medium leading-none text-white shadow-[0_3px_9px_rgba(37,99,235,0.10),inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(255,255,255,0.16),inset_0_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40" + > + {(busy || checking) && ( + <Loader2 className="h-3 w-3 animate-spin" /> + )} + Add + </button> + )} + </div> + {error && <p className="mt-1.5 text-xs text-red-500">{error}</p>} + </div> + ); +} diff --git a/frontend/src/app/components/shared/AppSidebar.tsx b/frontend/src/app/components/shared/AppSidebar.tsx index 2dc6e35..9fb96be 100644 --- a/frontend/src/app/components/shared/AppSidebar.tsx +++ b/frontend/src/app/components/shared/AppSidebar.tsx @@ -4,6 +4,7 @@ import { useState, useEffect, useMemo } from "react"; import { PanelLeft, MessageSquare, + Folder, FolderOpen, Table2, Library, @@ -11,16 +12,16 @@ import { ChevronsUpDown, ChevronDown, } from "lucide-react"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { useRouter, usePathname } from "next/navigation"; import Link from "next/link"; -import { MikeIcon } from "@/components/chat/mike-icon"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; import { SidebarChatItem } from "@/app/components/shared/SidebarChatItem"; import { listProjects } from "@/app/lib/mikeApi"; import type { Project } from "@/app/components/shared/types"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; const NAV_ITEMS = [ { href: "/assistant", label: "Assistant", icon: MessageSquare }, @@ -85,9 +86,10 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { }); }, [user]); - useEffect(() => { - if (!isOpen) setShouldAnimate(true); - }, [isOpen]); + const handleToggle = () => { + if (isOpen) setShouldAnimate(true); + onToggle(); + }; useEffect(() => { const handleClickOutside = () => setIsDropdownOpen(false); @@ -121,113 +123,222 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { if (!user) return null; return ( - <div - className={cn( - isOpen - ? "w-64 h-[calc(100dvh-1rem)] md:h-[calc(100dvh-1.5rem)] bg-white/65" - : "max-md:hidden w-14 md:h-[calc(100dvh-1.5rem)] md:bg-white/65 h-auto bg-transparent pointer-events-none md:pointer-events-auto", - "my-2 ml-2 mr-0 md:my-3 md:ml-3 md:mr-0 rounded-2xl border border-white/70 shadow-[0_-1px_6px_rgba(15,23,42,0.034),0_4px_9px_rgba(15,23,42,0.074),inset_0_1px_0_rgba(255,255,255,0.85)] backdrop-blur-2xl overflow-visible", - "flex flex-col transition-all duration-300 absolute md:relative z-[99]", + <> + {/* Mobile: tapping outside the expanded sidebar closes it. The + sidebar (z-[99]) sits above this scrim (z-[98]); md+ is + unaffected since the sidebar is part of the layout there. */} + {isOpen && ( + <div + className="fixed inset-0 z-[98] bg-gray-300/20 md:hidden" + onClick={handleToggle} + aria-hidden="true" + /> )} - > - {/* Toggle + Logo */} <div - className={`items-center justify-between px-2.5 py-3 ${ - !isOpen ? "hidden md:flex" : "flex" - }`} + className={cn( + isOpen + ? "w-64 h-[calc(100dvh-1rem)] md:h-[calc(100dvh-1.5rem)] bg-white/65" + : "max-md:hidden w-14 md:h-[calc(100dvh-1.5rem)] md:bg-white/65 h-auto bg-transparent pointer-events-none md:pointer-events-auto", + "my-2 ml-2 mr-0 md:my-3 md:ml-3 md:mr-0 rounded-2xl border border-white/70 shadow-[0_-1px_6px_rgba(15,23,42,0.034),0_4px_9px_rgba(15,23,42,0.074),inset_0_1px_0_rgba(255,255,255,0.85)] backdrop-blur-2xl overflow-visible", + "flex flex-col transition-all duration-300 absolute md:relative z-[99]", + )} > + {/* Toggle + Logo */} + <div + className={`items-center justify-between px-2.5 py-3 ${ + !isOpen ? "hidden md:flex" : "flex" + }`} + > + {isOpen && ( + <div className="px-2"> + <Link + href="/assistant" + className="flex items-center gap-1.5 hover:opacity-80 transition-opacity" + > + <MikeIcon size={22} /> + <span + className={`text-2xl font-light font-serif ${ + shouldAnimate ? "sidebar-fade-in" : "" + }`} + > + Mike + </span> + </Link> + </div> + )} + <button + onClick={handleToggle} + className={cn( + "h-9 w-9 p-2.5 items-center flex transition-colors", + "rounded-md hover:bg-gray-100", + )} + title={isOpen ? "Close sidebar" : "Open sidebar"} + > + <PanelLeft className="h-4 w-4" /> + </button> + </div> + + {/* Nav items */} + {NAV_ITEMS.map(({ href, label, icon: Icon }) => { + const isActive = + href === "/assistant" + ? pathname === href + : href === "/projects" + ? pathname === href + : pathname === href || + pathname.startsWith(href + "/"); + return ( + <div key={href} className="py-0.5 px-2.5"> + <button + onClick={() => router.push(href)} + title={!isOpen ? label : ""} + className={cn( + "w-full h-9 flex items-center gap-3 px-2.5 py-2 rounded-md transition-colors text-left", + isActive + ? "bg-gray-200/60 text-gray-900" + : "text-gray-700 hover:bg-gray-100", + !isOpen ? "hidden md:flex" : "flex", + )} + > + <Icon + className={`h-4 w-4 flex-shrink-0 ${ + isActive + ? "text-gray-900" + : "text-black" + }`} + /> + {isOpen && ( + <span + className={`text-sm font-medium ${ + shouldAnimate + ? "sidebar-fade-in-2" + : "" + }`} + > + {label} + </span> + )} + </button> + </div> + ); + })} + {isOpen && ( - <div className="px-2"> - <Link - href="/assistant" - className="flex items-center gap-1.5 hover:opacity-80 transition-opacity" - > - <MikeIcon size={22} /> - <span - className={`text-2xl font-light font-serif ${ + <div className="mt-4 flex-1 min-h-0 flex flex-col gap-4"> + {/* Recent Projects */} + <div> + <button + onClick={() => setProjectsCollapsed((v) => !v)} + className={`mb-2 flex w-full items-center justify-between px-5 text-xs font-semibold text-gray-500 transition-colors hover:text-gray-700 ${ shouldAnimate ? "sidebar-fade-in" : "" }`} > - Mike - </span> - </Link> - </div> - )} - <button - onClick={onToggle} - className={cn( - "h-9 w-9 p-2.5 items-center flex transition-colors", - "rounded-md hover:bg-gray-100", - )} - title={isOpen ? "Close sidebar" : "Open sidebar"} - > - <PanelLeft className="h-4 w-4" /> - </button> - </div> - - {/* Nav items */} - {NAV_ITEMS.map(({ href, label, icon: Icon }) => { - const isActive = - href === "/assistant" - ? pathname === href - : href === "/projects" - ? pathname === href - : pathname === href || - pathname.startsWith(href + "/"); - return ( - <div key={href} className="py-0.5 px-2.5"> - <button - onClick={() => router.push(href)} - title={!isOpen ? label : ""} - className={cn( - "w-full h-9 flex items-center gap-3 px-2.5 py-2 rounded-md transition-colors text-left", - isActive - ? "bg-gray-200/60 text-gray-900" - : "text-gray-700 hover:bg-gray-100", - !isOpen ? "hidden md:flex" : "flex", - )} - > - <Icon - className={`h-4 w-4 flex-shrink-0 ${ - isActive ? "text-gray-900" : "text-black" - }`} - /> - {isOpen && ( - <span - className={`text-sm font-medium ${ - shouldAnimate ? "sidebar-fade-in-2" : "" + <span>Recent Projects</span> + <ChevronDown + className={`h-3.5 w-3.5 transition-transform ${ + projectsCollapsed ? "-rotate-90" : "" }`} - > - {label} - </span> + /> + </button> + {!projectsCollapsed && ( + <> + {!recentProjects ? ( + <div className="space-y-1 px-2.5"> + {[50, 65, 45].map((w, i) => ( + <div + key={i} + className="h-9 flex items-center px-3 rounded-md" + > + <div + className="h-3 bg-gray-200 rounded animate-pulse" + style={{ + width: `${w}%`, + }} + /> + </div> + ))} + </div> + ) : recentProjects.length === 0 ? ( + <div + className={`px-5 py-2 text-xs text-gray-500 ${ + shouldAnimate + ? "sidebar-fade-in-2" + : "" + }`} + > + No projects yet + </div> + ) : ( + <div + className={`space-y-1 px-2.5 ${ + shouldAnimate + ? "sidebar-fade-in-2" + : "" + }`} + > + {recentProjects.map((project) => { + const isActive = + pathname === + `/projects/${project.id}` || + pathname.startsWith( + `/projects/${project.id}/`, + ); + return ( + <button + key={project.id} + onClick={() => + router.push( + `/projects/${project.id}`, + ) + } + title={project.name} + className={cn( + "flex h-9 w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs transition-colors", + isActive + ? "bg-gray-200/60 text-gray-900" + : "text-gray-700 hover:bg-gray-100", + )} + > + {isActive ? ( + <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-600" /> + ) : ( + <Folder className="h-3.5 w-3.5 shrink-0 text-gray-600" /> + )} + <span className="min-w-0 flex-1 truncate"> + {project.name} + </span> + </button> + ); + })} + </div> + )} + </> )} - </button> - </div> - ); - })} + </div> - {isOpen && ( - <div className="mt-4 flex-1 min-h-0 flex flex-col gap-4"> - {/* Recent Projects */} - <div> - <button - onClick={() => setProjectsCollapsed((v) => !v)} - className={`mb-2 flex w-full items-center justify-between px-5 text-xs font-semibold text-gray-500 transition-colors hover:text-gray-700 ${ - shouldAnimate ? "sidebar-fade-in" : "" - }`} - > - <span>Recent Projects</span> - <ChevronDown - className={`h-3.5 w-3.5 transition-transform ${ - projectsCollapsed ? "-rotate-90" : "" + {/* Assistant History */} + <div className="flex min-h-0 flex-1 flex-col"> + <button + onClick={() => setHistoryCollapsed((v) => !v)} + className={`mb-2 flex w-full items-center justify-between px-5 text-xs font-semibold text-gray-500 transition-colors hover:text-gray-700 ${ + shouldAnimate ? "sidebar-fade-in" : "" }`} - /> - </button> - {!projectsCollapsed && ( - <> - {!recentProjects ? ( + > + <span>Assistant History</span> + <ChevronDown + className={`h-3.5 w-3.5 transition-transform ${ + historyCollapsed ? "-rotate-90" : "" + }`} + /> + </button> + <div + className={`overflow-y-auto flex-1 ${ + historyCollapsed ? "hidden" : "" + }`} + > + {!chats ? ( <div className="space-y-1 px-2.5"> - {[50, 65, 45].map((w, i) => ( + {[40, 60, 50, 70, 45].map((w, i) => ( <div key={i} className="h-9 flex items-center px-3 rounded-md" @@ -239,220 +350,142 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { </div> ))} </div> - ) : recentProjects.length === 0 ? ( + ) : chats.length === 0 ? ( <div - className={`px-5 py-2 text-xs text-gray-500 ${ + className={`text-xs text-gray-500 py-2 px-5 ${ shouldAnimate ? "sidebar-fade-in-2" : "" }`} > - No projects yet + No chats yet </div> ) : ( - <div - className={`space-y-1 px-2.5 ${ - shouldAnimate - ? "sidebar-fade-in-2" - : "" - }`} - > - {recentProjects.map((project) => { - const isActive = - pathname === - `/projects/${project.id}` || - pathname.startsWith( - `/projects/${project.id}/`, - ); - return ( - <button - key={project.id} - onClick={() => - router.push( - `/projects/${project.id}`, - ) + <> + <div + className={`space-y-1 px-2.5 ${ + shouldAnimate + ? "sidebar-fade-in-2" + : "" + }`} + > + {chats.map((chat) => ( + <SidebarChatItem + key={chat.id} + chat={chat} + isActive={ + routeChatId === chat.id } - title={project.name} + projectName={ + chat.project_id + ? projectNames[ + chat + .project_id + ] + : undefined + } + onSelect={() => { + setCurrentChatId( + chat.id, + ); + router.push( + chat.project_id + ? `/projects/${chat.project_id}/assistant/chat/${chat.id}` + : `/assistant/chat/${chat.id}`, + ); + }} + /> + ))} + </div> + {hasMoreChats && ( + <div className="px-2.5 pt-1"> + <button + onClick={loadMoreChats} className={cn( - "flex h-9 w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs transition-colors", - isActive - ? "bg-gray-200/60 text-gray-900" - : "text-gray-700 hover:bg-gray-100", + "flex h-8 w-full items-center justify-start rounded-md px-3 text-left text-xs font-medium text-gray-500 transition-colors hover:text-gray-700", + "hover:bg-gray-100", )} > - <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-600" /> - <span className="min-w-0 flex-1 truncate"> - {project.name} - </span> + Load more </button> - ); - })} - </div> + </div> + )} + </> )} - </> - )} + </div> + </div> </div> + )} - {/* Assistant History */} - <div className="flex min-h-0 flex-1 flex-col"> - <button - onClick={() => setHistoryCollapsed((v) => !v)} - className={`mb-2 flex w-full items-center justify-between px-5 text-xs font-semibold text-gray-500 transition-colors hover:text-gray-700 ${ - shouldAnimate ? "sidebar-fade-in" : "" - }`} - > - <span>Assistant History</span> - <ChevronDown - className={`h-3.5 w-3.5 transition-transform ${ - historyCollapsed ? "-rotate-90" : "" - }`} - /> - </button> - <div - className={`overflow-y-auto flex-1 ${ - historyCollapsed ? "hidden" : "" - }`} - > - {!chats ? ( - <div className="space-y-1 px-2.5"> - {[40, 60, 50, 70, 45].map((w, i) => ( - <div - key={i} - className="h-9 flex items-center px-3 rounded-md" - > - <div - className="h-3 bg-gray-200 rounded animate-pulse" - style={{ width: `${w}%` }} - /> - </div> - ))} + {/* User Profile */} + <div className="mt-auto p-1"> + {user && ( + <div className="relative"> + <button + onClick={() => + setIsDropdownOpen(!isDropdownOpen) + } + className={cn( + "flex items-center transition-colors w-full px-2.5 py-3 border-t", + "rounded-xl border-white/60", + !isOpen ? "hidden md:flex" : "", + pathname === "/account" || isDropdownOpen + ? "bg-gray-200/60" + : "hover:bg-gray-100", + )} + title={!isOpen ? user.email : undefined} + > + <div className="h-6.5 w-6.5 flex-shrink-0 rounded-full bg-gray-700 flex items-center justify-center text-white text-sm font-medium font-serif"> + {getUserInitials(user.email)} </div> - ) : chats.length === 0 ? ( - <div - className={`text-xs text-gray-500 py-2 px-5 ${ - shouldAnimate ? "sidebar-fade-in-2" : "" - }`} - > - No chats yet - </div> - ) : ( - <> + {isOpen && ( <div - className={`space-y-1 px-2.5 ${ + className={`text-left flex-1 min-w-0 pl-3 flex items-center justify-between gap-2 ${ shouldAnimate ? "sidebar-fade-in-2" : "" }`} > - {chats.map((chat) => ( - <SidebarChatItem - key={chat.id} - chat={chat} - isActive={ - routeChatId === chat.id - } - projectName={ - chat.project_id - ? projectNames[ - chat.project_id - ] - : undefined - } - onSelect={() => { - setCurrentChatId(chat.id); - router.push( - chat.project_id - ? `/projects/${chat.project_id}/assistant/chat/${chat.id}` - : `/assistant/chat/${chat.id}`, - ); - }} - /> - ))} - </div> - {hasMoreChats && ( - <div className="px-2.5 pt-1"> - <button - onClick={loadMoreChats} - className={cn( - "flex h-8 w-full items-center justify-start rounded-md px-3 text-left text-xs font-medium text-gray-500 transition-colors hover:text-gray-700", - "hover:bg-gray-100", - )} - > - Load more - </button> + <div className="flex flex-col gap-0.5 min-w-0"> + <div className="text-sm font-medium text-gray-900 leading-none"> + {getDisplayName()} + </div> + <div className="text-[12px] text-gray-500 leading-none"> + {getUserTier()} + </div> </div> - )} - </> - )} - </div> - </div> - </div> - )} + <ChevronsUpDown className="h-4 w-4 flex-shrink-0 text-gray-400" /> + </div> + )} + </button> - {/* User Profile */} - <div className="mt-auto p-1"> - {user && ( - <div className="relative"> - <button - onClick={() => setIsDropdownOpen(!isDropdownOpen)} - className={cn( - "flex items-center transition-colors w-full px-2.5 py-3 border-t", - "rounded-xl border-white/60", - !isOpen ? "hidden md:flex" : "", - pathname === "/account" || isDropdownOpen - ? "bg-gray-200/60" - : "hover:bg-gray-100", - )} - title={!isOpen ? user.email : undefined} - > - <div className="h-6.5 w-6.5 flex-shrink-0 rounded-full bg-gray-700 flex items-center justify-center text-white text-sm font-medium font-serif"> - {getUserInitials(user.email)} - </div> - {isOpen && ( + {isDropdownOpen && ( <div - className={`text-left flex-1 min-w-0 pl-3 flex items-center justify-between gap-2 ${ - shouldAnimate ? "sidebar-fade-in-2" : "" - }`} + className={cn( + "absolute bottom-full left-0 z-50 mb-1 p-1 whitespace-nowrap", + isOpen ? "right-0" : "w-56", + "bg-white/80 rounded-xl shadow-[0_6px_17px_rgba(15,23,42,0.1)] border border-white/70 backdrop-blur-xl", + )} > - <div className="flex flex-col gap-0.5 min-w-0"> - <div className="text-sm font-medium text-gray-900 leading-none"> - {getDisplayName()} - </div> - <div className="text-[12px] text-gray-500 leading-none"> - {getUserTier()} - </div> - </div> - <ChevronsUpDown className="h-4 w-4 flex-shrink-0 text-gray-400" /> + <button + onClick={() => { + router.push("/account"); + setIsDropdownOpen(false); + }} + className={cn( + "w-full px-4 py-2 text-left text-sm text-gray-700 flex items-center gap-2 rounded-md", + "hover:bg-white/70", + )} + > + <User className="h-4 w-4" /> + Account Settings + </button> </div> )} - </button> - - {isDropdownOpen && ( - <div - className={cn( - "absolute bottom-full left-0 z-50 mb-1 p-1 whitespace-nowrap", - isOpen ? "right-0" : "w-56", - "bg-white/80 rounded-xl shadow-[0_6px_17px_rgba(15,23,42,0.1)] border border-white/70 backdrop-blur-xl", - )} - > - <button - onClick={() => { - router.push("/account"); - setIsDropdownOpen(false); - }} - className={cn( - "w-full px-4 py-2 text-left text-sm text-gray-700 flex items-center gap-2 rounded-md", - "hover:bg-white/70", - )} - > - <User className="h-4 w-4" /> - Account Settings - </button> - </div> - )} - </div> - )} + </div> + )} + </div> </div> - </div> + </> ); } diff --git a/frontend/src/app/components/shared/FileDirectory.tsx b/frontend/src/app/components/shared/FileDirectory.tsx index 40e707c..d4ee15a 100644 --- a/frontend/src/app/components/shared/FileDirectory.tsx +++ b/frontend/src/app/components/shared/FileDirectory.tsx @@ -7,13 +7,13 @@ import { ChevronRight, Folder, FolderOpen, - Trash2, Loader2, } from "lucide-react"; import type { Document, Project } from "./types"; import { VersionChip } from "./VersionChip"; import { FileTypeIcon } from "./FileTypeIcon"; -import { SearchBar } from "@/components/ui/search-bar"; +import { SearchBar } from "@/app/components/ui/search-bar"; +import { ModalSegmentedToggle } from "../modals/ModalSegmentedToggle"; function formatDate(iso: string | null) { if (!iso) return null; @@ -37,13 +37,12 @@ interface FileDirectoryProps { allowMultiple?: boolean; forceExpanded?: boolean; emptyMessage?: string; - heading?: string; - onDelete?: (ids: string[]) => void | Promise<void>; uploadingFilenames?: string[]; searchable?: boolean; searchPlaceholder?: string; searchAutoFocus?: boolean; searchNoResultsMessage?: string; + showProjectTabs?: boolean; } export function FileDirectory({ @@ -55,21 +54,21 @@ export function FileDirectory({ allowMultiple = true, forceExpanded = false, emptyMessage = "No documents yet", - heading = "Documents", - onDelete, uploadingFilenames = [], searchable = false, searchPlaceholder = "Search...", searchAutoFocus = false, searchNoResultsMessage = "No matches found", + showProjectTabs, }: FileDirectoryProps) { const [expandedProjects, setExpandedProjects] = useState<Set<string>>( new Set(), ); - const [deleting, setDeleting] = useState(false); + const [selectedTab, setSelectedTab] = useState<"files" | "projects">( + "files", + ); const [search, setSearch] = useState(""); - const selectedCount = selectedIds.size; const q = search.trim().toLowerCase(); const visibleStandaloneDocs = q ? standaloneDocs.filter((doc) => doc.filename.toLowerCase().includes(q)) @@ -104,30 +103,22 @@ export function FileDirectory({ ); }) : directoryProjects; - - async function handleDelete() { - if (!onDelete || selectedCount === 0 || deleting) return; - const ids = Array.from(selectedIds); - setDeleting(true); - try { - await onDelete(ids); - const next = new Set(selectedIds); - ids.forEach((id) => next.delete(id)); - onChange(next); - } finally { - setDeleting(false); - } - } + const showTabs = showProjectTabs ?? directoryProjects.length > 0; + const activeTab = showTabs ? selectedTab : "files"; + const hasVisibleFiles = + visibleStandaloneDocs.length > 0 || + visibleUploadingFilenames.length > 0; + const hasVisibleProjects = visibleDirectoryProjects.length > 0; + const activeTabHasNoResults = + q && + ((activeTab === "files" && !hasVisibleFiles) || + (activeTab === "projects" && !hasVisibleProjects)); const allDocs = [ ...standaloneDocs, ...directoryProjects.flatMap((p) => p.documents ?? []), ]; - const allStandaloneSelected = - visibleStandaloneDocs.length > 0 && - visibleStandaloneDocs.every((d) => selectedIds.has(d.id)); - function toggle(docId: string) { if (!allowMultiple) { onChange(new Set([docId])); @@ -142,18 +133,6 @@ export function FileDirectory({ onChange(next); } - function toggleAll() { - if (allStandaloneSelected) { - const next = new Set(selectedIds); - visibleStandaloneDocs.forEach((d) => next.delete(d.id)); - onChange(next); - } else { - const next = new Set(selectedIds); - visibleStandaloneDocs.forEach((d) => next.add(d.id)); - onChange(next); - } - } - function toggleFolder(projectId: string) { if (forceExpanded) return; setExpandedProjects((prev) => { @@ -169,23 +148,23 @@ export function FileDirectory({ if (loading) { return ( - <div className="space-y-px"> + <div className="flex min-h-0 flex-1 flex-col space-y-2"> {searchable && ( <SearchBar value={search} onValueChange={setSearch} placeholder={searchPlaceholder} autoFocus={searchAutoFocus} - wrapperClassName="mb-2" + wrapperClassName={showTabs ? "mb-4" : "mb-3"} /> )} - {/* Documents header skeleton */} - <div className="flex items-center justify-between rounded-md px-2 py-2"> - <div className="h-3 w-20 rounded bg-gray-100 animate-pulse" /> - <div className="h-3 w-12 rounded bg-gray-100 animate-pulse" /> - </div> - {/* File rows skeleton */} - <div> + {showTabs && ( + <FileDirectoryTabs + activeTab={activeTab} + onChange={setSelectedTab} + /> + )} + <div className="min-h-0 flex-1 overflow-y-auto"> {[60, 45, 75, 55, 40].map((w, i) => ( <div key={i} @@ -210,255 +189,269 @@ export function FileDirectory({ uploadingFilenames.length === 0 ) { return ( - <div> + <div className="flex min-h-0 flex-1 flex-col space-y-2"> {searchable && ( <SearchBar value={search} onValueChange={setSearch} placeholder={searchPlaceholder} autoFocus={searchAutoFocus} - wrapperClassName="mb-2" + wrapperClassName={showTabs ? "mb-4" : "mb-3"} /> )} - <p className="text-center text-sm text-gray-400 py-8"> - {emptyMessage} - </p> + {showTabs && ( + <FileDirectoryTabs + activeTab={activeTab} + onChange={setSelectedTab} + /> + )} + <div className="min-h-0 flex-1 overflow-y-auto"> + <p className="text-center text-sm text-gray-400 py-8"> + {emptyMessage} + </p> + </div> </div> ); } return ( - <div className="space-y-2 rounded-sm"> + <div className="flex min-h-0 flex-1 flex-col space-y-2 rounded-sm"> {searchable && ( <SearchBar value={search} onValueChange={setSearch} placeholder={searchPlaceholder} autoFocus={searchAutoFocus} + wrapperClassName={showTabs ? "mb-4" : "mb-3"} /> )} - {q && - visibleStandaloneDocs.length === 0 && - visibleDirectoryProjects.length === 0 && - visibleUploadingFilenames.length === 0 ? ( - <p className="text-center text-sm text-gray-400 py-8"> - {searchNoResultsMessage} - </p> + {showTabs && ( + <FileDirectoryTabs + activeTab={activeTab} + onChange={setSelectedTab} + /> + )} + {activeTabHasNoResults ? ( + <div className="min-h-0 flex-1 overflow-y-auto"> + <p className="text-center text-sm text-gray-400 py-8"> + {searchNoResultsMessage} + </p> + </div> ) : ( - <div> - {(visibleStandaloneDocs.length > 0 || - visibleUploadingFilenames.length > 0 || - (onDelete && selectedCount > 0)) && ( - <div className="flex items-center justify-between px-2 py-2"> - <p className="text-xs font-medium text-gray-400"> - {heading} - </p> - <div className="flex items-center gap-3"> - {onDelete && selectedCount > 0 && ( - <button - type="button" - onClick={handleDelete} - disabled={deleting} - className="inline-flex items-center gap-1 text-xs text-red-500 hover:text-red-700 transition-colors disabled:opacity-50" - > - <Trash2 className="h-3 w-3" /> - Delete - </button> - )} - {visibleStandaloneDocs.length > 0 && ( - <button - type="button" - onClick={toggleAll} - className="text-xs text-gray-400 hover:text-gray-600 transition-colors" - > - {allStandaloneSelected - ? "Deselect all" - : "Select all"} - </button> - )} - </div> - </div> - )} - {visibleUploadingFilenames.map((filename) => ( - <div - key={`uploading-${filename}`} - className="w-full flex items-center gap-2 px-2 py-2 text-xs text-left" - > - <span className="shrink-0 h-3.5 w-3.5 rounded border border-gray-300" /> - <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 shrink-0" /> - <span className="flex-1 truncate text-gray-400"> - {filename} - </span> - <span className="shrink-0 text-gray-300"> - Uploading - </span> - </div> - ))} - {visibleStandaloneDocs.map((doc) => { - const selected = selectedIds.has(doc.id); - return ( - <button - type="button" - key={doc.id} - onClick={() => toggle(doc.id)} - className={`w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left ${ - selected - ? "bg-gray-100" - : "hover:bg-gray-100/70" - }`} - > - <span - className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ - selected - ? "bg-gray-900 border-gray-900" - : "border-gray-300" - }`} + <div className="min-h-0 flex-1 overflow-y-auto"> + {activeTab === "files" && ( + <> + {visibleUploadingFilenames.map((filename) => ( + <div + key={`uploading-${filename}`} + className="w-full flex items-center gap-2 px-2 py-2 text-xs text-left" > - {selected && ( - <Check className="h-2.5 w-2.5 text-white" /> - )} - </span> - <DocFileIcon fileType={doc.file_type} /> - <span - className={`flex-1 truncate ${ - selected - ? "text-gray-900" - : "text-gray-700" - }`} - > - {doc.filename} - </span> - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number - } - /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate(doc.created_at)} + <span className="shrink-0 h-3.5 w-3.5 rounded border border-gray-300" /> + <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 shrink-0" /> + <span className="flex-1 truncate text-gray-400"> + {filename} </span> - )} - </button> - ); - })} - - {visibleStandaloneDocs.length > 0 && - visibleDirectoryProjects.length > 0 && ( - <div className="py-2 px-2 mt-2"> - <p className="text-xs font-medium text-gray-400"> - Projects - </p> - </div> - )} - - {visibleDirectoryProjects.map((project) => { - const isExpanded = - forceExpanded || - !!q || - expandedProjects.has(project.id); - const docs = project.documents ?? []; - return ( - <div key={project.id}> - <button - type="button" - onClick={() => toggleFolder(project.id)} - className="w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left hover:bg-gray-100/70" - > - {isExpanded ? ( - <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" /> - ) : ( - <ChevronRight className="h-3 w-3 text-gray-400 shrink-0" /> - )} - {isExpanded ? ( - <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - ) : ( - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - )} - <span className="flex-1 truncate font-medium text-gray-700"> - {project.name} - {project.cm_number && ( - <span className="ml-1 font-normal text-gray-400"> - (#{project.cm_number}) + <span className="shrink-0 text-gray-300"> + Uploading + </span> + </div> + ))} + {visibleStandaloneDocs.map((doc) => { + const selected = selectedIds.has(doc.id); + return ( + <button + type="button" + key={doc.id} + onClick={() => toggle(doc.id)} + className={`w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left ${ + selected + ? "bg-gray-100" + : "hover:bg-gray-100/70" + }`} + > + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + selected + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {selected && ( + <Check className="h-2.5 w-2.5 text-white" /> + )} + </span> + <DocFileIcon fileType={doc.file_type} /> + <span + className={`flex-1 truncate ${ + selected + ? "text-gray-900" + : "text-gray-700" + }`} + > + {doc.filename} + </span> + <VersionChip + n={ + doc.active_version_number ?? + doc.latest_version_number + } + /> + {doc.created_at && ( + <span className="shrink-0 text-gray-300"> + {formatDate(doc.created_at)} </span> )} - </span> - <span className="text-xs text-gray-400 shrink-0"> - {docs.length} - </span> - </button> - {isExpanded && ( - <div> - {docs.length === 0 ? ( - <p className="pl-7 py-1 text-xs text-gray-400"> - Empty - </p> + </button> + ); + })} + {!q && + visibleStandaloneDocs.length === 0 && + visibleUploadingFilenames.length === 0 && ( + <p className="text-center text-sm text-gray-400 py-8"> + {emptyMessage} + </p> + )} + </> + )} + + {activeTab === "projects" && + visibleDirectoryProjects.map((project) => { + const isExpanded = + forceExpanded || + !!q || + expandedProjects.has(project.id); + const docs = project.documents ?? []; + return ( + <div key={project.id}> + <button + type="button" + onClick={() => + toggleFolder(project.id) + } + className="w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left hover:bg-gray-100/70" + > + {isExpanded ? ( + <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" /> ) : ( - docs.map((doc) => { - const selected = - selectedIds.has(doc.id); - return ( - <button - type="button" - key={doc.id} - onClick={() => - toggle(doc.id) - } - className={`w-full rounded-md flex items-center gap-2 pl-7 pr-2 py-2 text-xs transition-all text-left ${ - selected - ? "bg-gray-100" - : "hover:bg-gray-100/70" - }`} - > - <span - className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + <ChevronRight className="h-3 w-3 text-gray-400 shrink-0" /> + )} + {isExpanded ? ( + <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + ) : ( + <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + )} + <span className="flex-1 truncate font-medium text-gray-700"> + {project.name} + {project.cm_number && ( + <span className="ml-1 font-normal text-gray-400"> + (#{project.cm_number}) + </span> + )} + </span> + <span className="text-xs text-gray-400 shrink-0"> + {docs.length} + </span> + </button> + {isExpanded && ( + <div> + {docs.length === 0 ? ( + <p className="pl-7 py-1 text-xs text-gray-400"> + Empty + </p> + ) : ( + docs.map((doc) => { + const selected = + selectedIds.has(doc.id); + return ( + <button + type="button" + key={doc.id} + onClick={() => + toggle(doc.id) + } + className={`w-full rounded-md flex items-center gap-2 pl-7 pr-2 py-2 text-xs transition-all text-left ${ selected - ? "bg-gray-900 border-gray-900" - : "border-gray-300" + ? "bg-gray-100" + : "hover:bg-gray-100/70" }`} > - {selected && ( - <Check className="h-2.5 w-2.5 text-white" /> - )} - </span> - <DocFileIcon - fileType={ - doc.file_type - } - /> - <span - className={`flex-1 truncate min-w-0 ${ - selected - ? "text-gray-900" - : "text-gray-700" - }`} - > - {doc.filename} - </span> - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number - } - /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate( - doc.created_at, + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + selected + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {selected && ( + <Check className="h-2.5 w-2.5 text-white" /> )} </span> - )} - </button> - ); - }) - )} - </div> - )} - </div> - ); - })} + <DocFileIcon + fileType={ + doc.file_type + } + /> + <span + className={`flex-1 truncate min-w-0 ${ + selected + ? "text-gray-900" + : "text-gray-700" + }`} + > + {doc.filename} + </span> + <VersionChip + n={ + doc.active_version_number ?? + doc.latest_version_number + } + /> + {doc.created_at && ( + <span className="shrink-0 text-gray-300"> + {formatDate( + doc.created_at, + )} + </span> + )} + </button> + ); + }) + )} + </div> + )} + </div> + ); + })} + {activeTab === "projects" && + !q && + visibleDirectoryProjects.length === 0 && ( + <p className="text-center text-sm text-gray-400 py-8"> + No projects yet + </p> + )} </div> )} </div> ); } + +function FileDirectoryTabs({ + activeTab, + onChange, +}: { + activeTab: "files" | "projects"; + onChange: (tab: "files" | "projects") => void; +}) { + return ( + <ModalSegmentedToggle + value={activeTab} + onChange={onChange} + options={[ + { value: "files", label: "Files" }, + { value: "projects", label: "Projects" }, + ]} + size="sm" + className="self-start" + /> + ); +} diff --git a/frontend/src/app/components/shared/HeaderActionsMenu.tsx b/frontend/src/app/components/shared/HeaderActionsMenu.tsx index c8e712e..afe2949 100644 --- a/frontend/src/app/components/shared/HeaderActionsMenu.tsx +++ b/frontend/src/app/components/shared/HeaderActionsMenu.tsx @@ -6,8 +6,8 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { cn } from "@/lib/utils"; +} from "@/app/components/ui/dropdown-menu"; +import { cn } from "@/app/lib/utils"; export type HeaderActionsMenuItem = { label: string; diff --git a/frontend/src/app/components/shared/MfaLoginGate.tsx b/frontend/src/app/components/shared/MfaLoginGate.tsx index 4cf242c..bf0f367 100644 --- a/frontend/src/app/components/shared/MfaLoginGate.tsx +++ b/frontend/src/app/components/shared/MfaLoginGate.tsx @@ -2,8 +2,8 @@ import { useEffect, useState, type ReactNode } from "react"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { needsMfaVerification } from "../popups/MfaVerificationPopup"; type GateState = "idle" | "checking" | "required" | "verified"; diff --git a/frontend/src/app/components/shared/PageHeader.tsx b/frontend/src/app/components/shared/PageHeader.tsx index c26893e..6bc2aeb 100644 --- a/frontend/src/app/components/shared/PageHeader.tsx +++ b/frontend/src/app/components/shared/PageHeader.tsx @@ -12,7 +12,7 @@ import { import { createPortal } from "react-dom"; import { ChevronLeft, Loader2, Plus, Search, Trash2 } from "lucide-react"; import { usePageChrome } from "@/app/contexts/PageChromeContext"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; export interface PageHeaderBreadcrumb { label?: ReactNode; diff --git a/frontend/src/app/components/shared/SidebarChatItem.tsx b/frontend/src/app/components/shared/SidebarChatItem.tsx index 24e1c9d..1531e76 100644 --- a/frontend/src/app/components/shared/SidebarChatItem.tsx +++ b/frontend/src/app/components/shared/SidebarChatItem.tsx @@ -7,12 +7,12 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; +} from "@/app/components/ui/dropdown-menu"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import type { Chat } from "@/app/components/shared/types"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; interface Props { chat: Chat; diff --git a/frontend/src/app/components/shared/TablePrimitive.tsx b/frontend/src/app/components/shared/TablePrimitive.tsx index 4692c73..b4fb8a6 100644 --- a/frontend/src/app/components/shared/TablePrimitive.tsx +++ b/frontend/src/app/components/shared/TablePrimitive.tsx @@ -8,7 +8,7 @@ import { type MouseEvent, type ReactNode, } from "react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; import { CLOSE_ROW_ACTIONS_EVENT, closeRowActionMenus, diff --git a/frontend/src/app/components/shared/types.ts b/frontend/src/app/components/shared/types.ts index d7f239f..33a1e9c 100644 --- a/frontend/src/app/components/shared/types.ts +++ b/frontend/src/app/components/shared/types.ts @@ -590,16 +590,20 @@ export interface WorkflowContributor { export interface Workflow { id: string; user_id: string | null; - title: string; - type: "assistant" | "tabular"; - prompt_md: string | null; + metadata: { + title: string; + description: string | null; + type: "assistant" | "tabular"; + contributors: WorkflowContributor[]; + language: string; + version: string | null; + practice: string | null; + jurisdictions: string[] | null; + }; + skill_md: string | null; columns_config: ColumnConfig[] | null; is_system: boolean; created_at: string; - language?: string | null; - version?: string | null; - practice?: string | null; - jurisdictions?: string[] | null; shared_by_name?: string | null; allow_edit?: boolean; is_owner?: boolean; diff --git a/frontend/src/app/components/shared/views/DocxView.tsx b/frontend/src/app/components/shared/views/DocxView.tsx new file mode 100644 index 0000000..5a9a279 --- /dev/null +++ b/frontend/src/app/components/shared/views/DocxView.tsx @@ -0,0 +1,503 @@ +"use client"; + +import { useEffect, useMemo, useRef } from "react"; +import { Loader2 } from "lucide-react"; +import { useFetchDocxBytes } from "@/app/hooks/useFetchDocxBytes"; +import { supabase } from "@/app/lib/supabase"; +import { + clearDocxQuoteHighlights, + highlightDocxQuote, +} from "./highlightDocxQuote"; +import type { CitationQuote } from "../types"; + +interface Props { + documentId: string; + versionId?: string | null; + /** + * Called once the document has been rendered to the DOM. Handy for + * scrolling to a particular tracked change after a re-render. + */ + onReady?: () => void; + /** + * Tracked-change to scroll to + briefly flash after each render. The + * `key` is used to re-trigger scrolling when the same edit is clicked + * twice in a row. + */ + highlightEdit?: { + key: string; + inserted_text?: string; + deleted_text?: string; + /** + * Numeric w:id values of the <w:ins>/<w:del> wrappers in + * document.xml. Preferred over text matching — uniquely identifies + * the right DOM element even when multiple edits share identical + * inserted/deleted text. `docx-preview` drops these during parsing, + * so we re-tag each rendered <ins>/<del> with data-w-id after load. + */ + ins_w_id?: string | null; + del_w_id?: string | null; + } | null; + /** + * Forces a byte re-fetch when it changes, even if documentId/versionId + * are stable. Used after accept/reject: the backend overwrites bytes at + * the same storage path (no new version row), so the hook has no other + * signal that the file changed. + */ + refetchKey?: number; + /** + * Citation quotes to highlight in the rendered output. The first match + * is scrolled into view. Page numbers are ignored — DOCX has no explicit + * pagination the renderer can match against. + */ + quotes?: CitationQuote[]; + /** Changes when the parent wants the current quote re-focused. */ + quoteFocusKey?: string | number; + /** + * Warning banner copy rendered in the top-left of the viewer. Used + * for non-blocking errors (e.g. "Accept failed — reverted"). + */ + warning?: string | null; + /** + * Called when the user dismisses the warning banner. + */ + onWarningDismiss?: () => void; + /** + * Scroll position to restore after the first render — used by parents + * that track per-tab scroll and want to re-enter at the same spot. + * Null/undefined means "no override" (preserve the pre-render scroll). + */ + initialScrollTop?: number | null; + /** + * Fires on scroll (throttled by rAF) so the parent can persist the + * current scrollTop against its tab state. + */ + onScrollChange?: (scrollTop: number) => void; + rounded?: boolean; +} + +function findEditElement( + root: HTMLElement, + tag: "ins" | "del", + opts: { w_id?: string | null; text?: string }, +): HTMLElement | null { + if (opts.w_id) { + const byId = root.querySelector( + `${tag}[data-w-id="${CSS.escape(opts.w_id)}"]`, + ) as HTMLElement | null; + if (byId) return byId; + } + const text = opts.text ?? ""; + const normalize = (s: string) => s.replace(/\s+/g, " ").trim(); + const target = normalize(text); + if (!target) return null; + const candidates = Array.from(root.querySelectorAll(tag)) as HTMLElement[]; + return ( + candidates.find((el) => normalize(el.textContent ?? "") === target) ?? + candidates.find((el) => + normalize(el.textContent ?? "").includes(target), + ) ?? + null + ); +} + +function scrollToHighlight( + container: HTMLElement, + scrollEl: HTMLElement, + edit: { + inserted_text?: string; + deleted_text?: string; + ins_w_id?: string | null; + del_w_id?: string | null; + }, +) { + const insEl = findEditElement(container, "ins", { + w_id: edit.ins_w_id, + text: edit.inserted_text, + }); + const delEl = findEditElement(container, "del", { + w_id: edit.del_w_id, + text: edit.deleted_text, + }); + const anchor = insEl ?? delEl; + if (!anchor) return; + + const scrollRect = scrollEl.getBoundingClientRect(); + const targetRect = anchor.getBoundingClientRect(); + const offset = targetRect.top - scrollRect.top + scrollEl.scrollTop - 80; + scrollEl.scrollTo({ top: Math.max(0, offset), behavior: "smooth" }); + + const flashed = [insEl, delEl].filter((el): el is HTMLElement => !!el); + flashed.forEach((el) => el.classList.add("docx-edit-flash")); + window.setTimeout(() => { + flashed.forEach((el) => el.classList.remove("docx-edit-flash")); + }, 2000); +} + +/** + * Fetch the ordered list of w:ids for every w:ins/w:del in the current + * version and tag each rendered <ins>/<del> with data-w-id. The backend + * returns ids in document order, and docx-preview emits <ins>/<del> + * in the same order, so we can align by index. + */ +async function tagWIdsOnRenderedDom( + container: HTMLElement, + documentId: string, + versionId: string | null | undefined, +): Promise<void> { + try { + const { + data: { session }, + } = await supabase.auth.getSession(); + const token = session?.access_token; + const apiBase = + process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:3001"; + const qs = versionId + ? `?version_id=${encodeURIComponent(versionId)}` + : ""; + const resp = await fetch( + `${apiBase}/single-documents/${documentId}/tracked-change-ids${qs}`, + { headers: token ? { Authorization: `Bearer ${token}` } : {} }, + ); + if (!resp.ok) { + console.warn( + "[DocxView] tracked-change-ids fetch failed", + resp.status, + ); + return; + } + const data = (await resp.json()) as { + ids: { kind: "ins" | "del"; w_id: string }[]; + }; + const domEls = Array.from( + container.querySelectorAll("ins, del"), + ) as HTMLElement[]; + const ids = data.ids ?? []; + let tagged = 0; + let mismatched = 0; + for (let i = 0; i < Math.min(domEls.length, ids.length); i++) { + const el = domEls[i]; + const info = ids[i]; + if (el.tagName.toLowerCase() !== info.kind) { + mismatched++; + continue; + } + el.setAttribute("data-w-id", info.w_id); + tagged++; + } + } catch (e) { + console.warn("[DocxView] tagWIdsOnRenderedDom failed", e); + } +} + +/** + * Renders a .docx in the browser using `docx-preview`. Tracked changes + * (`w:ins` / `w:del`) show up automatically with coloured strike/underline + * styling. Scroll position is preserved across re-renders so Accept/Reject + * doesn't jump the user back to the top. + */ +export function DocxView({ + documentId, + versionId, + onReady, + highlightEdit, + refetchKey, + quotes, + quoteFocusKey, + warning, + onWarningDismiss, + initialScrollTop, + onScrollChange, + rounded = true, +}: Props) { + const scrollRef = useRef<HTMLDivElement>(null); + const containerRef = useRef<HTMLDivElement>(null); + const lastScrollTopRef = useRef(0); + const renderKeyRef = useRef(0); + // Ref-stabilize onReady and highlightEdit so the render effect only + // re-fires when `bytes` actually change. Without this, any parent + // re-render (e.g. clicking a new highlight) creates a new onReady + // identity, triggers a full re-render, and snaps scroll back to top. + const onReadyRef = useRef(onReady); + onReadyRef.current = onReady; + const highlightEditRef = useRef(highlightEdit); + highlightEditRef.current = highlightEdit; + const quotesRef = useRef(quotes); + quotesRef.current = quotes; + const initialScrollTopRef = useRef(initialScrollTop ?? null); + initialScrollTopRef.current = initialScrollTop ?? null; + const onScrollChangeRef = useRef(onScrollChange); + onScrollChangeRef.current = onScrollChange; + + // Stable key for the quote list so the re-highlight effect re-fires + // only when the actual text/order of quotes changes. + const quoteKey = useMemo( + () => (quotes ?? []).map((q) => q.quote).join("||"), + [quotes], + ); + + const { bytes, loading, error } = useFetchDocxBytes( + documentId, + versionId, + refetchKey, + ); + + /** + * Highlight every quote in `list` inside the rendered DOM and scroll + * the first match into view. Returns true if any match was found. + */ + const applyQuoteHighlights = ( + containerEl: HTMLElement, + scrollEl: HTMLElement, + list: CitationQuote[] | undefined, + ): boolean => { + clearDocxQuoteHighlights(containerEl); + if (!list || list.length === 0) return false; + + let firstMatch: HTMLElement | null = null; + for (const q of list) { + const match = highlightDocxQuote(containerEl, q.quote); + if (match && !firstMatch) firstMatch = match; + } + if (!firstMatch) return false; + + const scrollRect = scrollEl.getBoundingClientRect(); + const targetRect = firstMatch.getBoundingClientRect(); + const offset = + targetRect.top - + scrollRect.top + + scrollEl.scrollTop - + scrollEl.clientHeight / 2 + + targetRect.height / 2; + scrollEl.scrollTo({ + top: Math.max(0, offset), + behavior: "instant" as ScrollBehavior, + }); + return true; + }; + + /** + * docx-preview renders pages at their natural Word page width (e.g. + * ~816px for US Letter). When the side-panel is narrower than that, + * the page overflows horizontally. Apply CSS `zoom` on each + * section.docx so the document shrinks to fit — `zoom` (unlike + * `transform: scale`) also shrinks the layout box, so the scroll + * container's scrollHeight adapts. We zoom each page rather than the + * wrapper because docx-preview injects flex styles on `.docx-wrapper` + * that can interfere with wrapper-level zoom. + */ + const applyDocxScale = () => { + const containerEl = containerRef.current; + const scrollEl = scrollRef.current; + if (!containerEl || !scrollEl) return; + const wrapper = containerEl.querySelector<HTMLElement>(".docx-wrapper"); + if (!wrapper) return; + const sections = Array.from( + wrapper.querySelectorAll<HTMLElement>("section.docx"), + ); + if (sections.length === 0) return; + // Reset zoom on every page before measuring so offsetWidth reports + // each page's natural width (pages can have different widths — e.g. + // mixed portrait/landscape sections). + sections.forEach((s) => { + s.style.zoom = "1"; + }); + // Use the scroll container's content box (clientWidth - padding) + // as the available width. + const styles = window.getComputedStyle(scrollEl); + const padX = + (parseFloat(styles.paddingLeft) || 0) + + (parseFloat(styles.paddingRight) || 0); + const available = scrollEl.clientWidth - padX; + if (available <= 0) return; + // Scale each page independently against its own natural width so + // landscape/custom-size pages still fit without distorting the + // page dividers. + sections.forEach((s) => { + const w = s.offsetWidth; + if (!w) return; + const scale = Math.min(1, available / w); + s.style.zoom = String(scale); + }); + }; + + // Observe the scroll container (which tracks the side panel's width) + // and re-scale whenever it resizes. Also observe the docx container so + // we re-scale once docx-preview finishes inserting pages. + useEffect(() => { + const scrollEl = scrollRef.current; + const containerEl = containerRef.current; + if (!scrollEl || !containerEl) return; + let raf = 0; + const schedule = () => { + if (raf) cancelAnimationFrame(raf); + raf = requestAnimationFrame(() => applyDocxScale()); + }; + const ro = new ResizeObserver(schedule); + ro.observe(scrollEl); + ro.observe(containerEl); + return () => { + if (raf) cancelAnimationFrame(raf); + ro.disconnect(); + }; + }, []); + + useEffect(() => { + let cancelled = false; + if (!bytes || !containerRef.current || !scrollRef.current) return; + + const scrollEl = scrollRef.current; + const containerEl = containerRef.current; + + // Remember scroll position across re-renders so Accept/Reject stays put. + lastScrollTopRef.current = scrollEl.scrollTop; + const thisRender = ++renderKeyRef.current; + + (async () => { + try { + const { renderAsync } = await import("docx-preview"); + if (cancelled) return; + containerEl.innerHTML = ""; + await renderAsync(bytes, containerEl, undefined, { + inWrapper: true, + ignoreWidth: false, + ignoreHeight: false, + renderChanges: true, + experimental: true, + }); + if (cancelled) return; + await tagWIdsOnRenderedDom( + containerEl, + documentId, + versionId ?? null, + ); + if (cancelled) return; + // Scale to fit before scrolling so offsets are computed + // against the post-zoom layout. + applyDocxScale(); + requestAnimationFrame(() => { + if ( + !scrollRef.current || + thisRender !== renderKeyRef.current + ) + return; + const pendingHighlight = highlightEditRef.current; + const pendingQuotes = quotesRef.current; + const pendingInitialScroll = initialScrollTopRef.current; + if (pendingHighlight) { + scrollToHighlight( + containerEl, + scrollRef.current, + pendingHighlight, + ); + // Highlight quotes too, but don't override the edit scroll + if (pendingQuotes?.length) { + for (const q of pendingQuotes) + highlightDocxQuote(containerEl, q.quote); + } + } else if ( + pendingQuotes && + applyQuoteHighlights( + containerEl, + scrollRef.current, + pendingQuotes, + ) + ) { + // scrolled inside applyQuoteHighlights + } else if (typeof pendingInitialScroll === "number") { + scrollRef.current.scrollTop = pendingInitialScroll; + } else { + scrollRef.current.scrollTop = lastScrollTopRef.current; + } + onReadyRef.current?.(); + }); + } catch (e) { + console.error("docx-preview render failed", e); + } + })(); + + return () => { + cancelled = true; + }; + }, [bytes]); + + // Re-scroll/highlight if the target edit changes without a re-render + // (e.g. same doc, different edit clicked). + useEffect(() => { + if (!highlightEdit || !containerRef.current || !scrollRef.current) + return; + scrollToHighlight( + containerRef.current, + scrollRef.current, + highlightEdit, + ); + }, [highlightEdit?.key]); // eslint-disable-line react-hooks/exhaustive-deps + + // Re-apply quote highlights when the quote list changes without a full + // re-render (e.g. clicking a different citation on the same doc). + useEffect(() => { + if (!containerRef.current || !scrollRef.current) return; + applyQuoteHighlights( + containerRef.current, + scrollRef.current, + quotesRef.current, + ); + }, [quoteKey, quoteFocusKey]); // eslint-disable-line react-hooks/exhaustive-deps + + // Fire onScrollChange (rAF-throttled) so parents can persist scroll + // per-tab. We still maintain lastScrollTopRef locally for same-mount + // re-renders (Accept/Reject preserving scroll within one view). + useEffect(() => { + const el = scrollRef.current; + if (!el) return; + let scheduled = false; + const onScroll = () => { + lastScrollTopRef.current = el.scrollTop; + if (scheduled) return; + scheduled = true; + requestAnimationFrame(() => { + scheduled = false; + onScrollChangeRef.current?.(el.scrollTop); + }); + }; + el.addEventListener("scroll", onScroll, { passive: true }); + return () => el.removeEventListener("scroll", onScroll); + }, []); + + return ( + <div + className={`relative flex flex-col flex-1 overflow-hidden bg-gray-100 ${rounded ? "rounded-lg" : ""}`} + > + {warning && ( + <div className="absolute top-2 left-2 z-10 flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-2 py-1 text-xs text-amber-800 shadow-sm"> + <span>{warning}</span> + <button + type="button" + onClick={() => onWarningDismiss?.()} + className="text-amber-600 hover:text-amber-900" + aria-label="Dismiss warning" + > + × + </button> + </div> + )} + <div + ref={scrollRef} + className="flex-1 overflow-auto px-5 pt-5 pb-3 docx-view-scroll" + data-document-id={documentId} + data-version-id={versionId ?? ""} + > + {loading && !bytes && ( + <div className="flex h-full items-center justify-center"> + <Loader2 className="h-7 w-7 animate-spin text-gray-400" /> + </div> + )} + {error && ( + <div className="flex h-full items-center justify-center"> + <p className="text-sm text-red-500">{error}</p> + </div> + )} + <div ref={containerRef} className="docx-view-container" /> + </div> + </div> + ); +} diff --git a/frontend/src/app/components/shared/views/PdfView.tsx b/frontend/src/app/components/shared/views/PdfView.tsx new file mode 100644 index 0000000..86e0f52 --- /dev/null +++ b/frontend/src/app/components/shared/views/PdfView.tsx @@ -0,0 +1,598 @@ +"use client"; + +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Loader2, ZoomIn, ZoomOut } from "lucide-react"; +import { useFetchSingleDoc } from "@/app/hooks/useFetchSingleDoc"; +import { DocxView } from "./DocxView"; +import type { CitationQuote } from "../types"; +import { + clearHighlights, + getPdfJs, + highlightQuote, + STANDARD_FONT_DATA_URL, +} from "./highlightQuote"; + +interface Props { + doc: { document_id: string; version_id?: string | null } | null; + /** Preferred: one or more (page, quote) pairs to highlight. */ + quotes?: CitationQuote[]; + /** Changes when the parent wants the current quote re-focused. */ + quoteFocusKey?: string | number; + /** Back-compat single-quote API. Ignored if `quotes` is provided. */ + quote?: string; + fallbackPage?: number; + rounded?: boolean; +} + +type QuoteEntry = { page?: number; quote: string }; + +const SIDE_PADDING = 20; +const ZOOM_MIN = 0.5; +const ZOOM_MAX = 3.0; +const ZOOM_STEP = 0.25; + +type RenderedPage = { + page: import("pdfjs-dist").PDFPageProxy; + viewport: import("pdfjs-dist").PageViewport; + wrapper: HTMLDivElement; + canvas: HTMLCanvasElement; + textDivs: HTMLElement[]; +}; + +export function PdfView({ + doc, + quotes, + quoteFocusKey, + quote, + fallbackPage, + rounded = true, +}: Props) { + const containerRef = useRef<HTMLDivElement>(null); + const scrollContainerRef = useRef<HTMLDivElement>(null); + const pdfDocRef = useRef<import("pdfjs-dist").PDFDocumentProxy | null>( + null, + ); + const renderedPagesRef = useRef<RenderedPage[]>([]); + const quoteListRef = useRef<QuoteEntry[]>([]); + const zoomRef = useRef(1.0); + const currentPageRef = useRef(1); + + const quoteList: QuoteEntry[] = useMemo(() => { + if (quotes?.length) + return quotes.map((q) => ({ page: q.page, quote: q.quote })); + if (quote) return [{ page: fallbackPage, quote }]; + return []; + }, [quotes, quote, fallbackPage]); + + // Stable string key so effects can depend on quote-list identity + const quoteKey = quoteList + .map((q) => `${q.page ?? ""}:${q.quote}`) + .join("|"); + + const [containerWidth, setContainerWidth] = useState(0); + const [zoom, setZoom] = useState(1.0); + const [currentPage, setCurrentPage] = useState(1); + const [numPages, setNumPages] = useState(0); + + const { result, loading, error } = useFetchSingleDoc( + doc?.document_id ?? null, + doc?.version_id ?? null, + ); + + // /display returned DOCX bytes — the active version has no PDF + // rendition, so fall back to docx-preview (still applies citation + // highlighting via the same `quotes` API). + const fallbackToDocx = result?.type === "docx"; + + // Track container width via ResizeObserver so re-renders fire on resize + useEffect(() => { + const el = scrollContainerRef.current; + if (!el) return; + const ro = new ResizeObserver((entries) => { + setContainerWidth(entries[0]?.contentRect.width ?? 0); + }); + ro.observe(el); + return () => ro.disconnect(); + }, []); + + // Track current page via scroll position + useEffect(() => { + const scrollEl = scrollContainerRef.current; + if (!scrollEl) return; + + const handleScroll = () => { + const pages = renderedPagesRef.current; + if (!pages.length) return; + const scrollCenter = scrollEl.scrollTop + scrollEl.clientHeight / 2; + let closest = 0; + let closestDist = Infinity; + pages.forEach((p, i) => { + const pageCenter = + p.wrapper.offsetTop + p.wrapper.clientHeight / 2; + const dist = Math.abs(pageCenter - scrollCenter); + if (dist < closestDist) { + closestDist = dist; + closest = i; + } + }); + currentPageRef.current = closest + 1; + setCurrentPage(closest + 1); + }; + + scrollEl.addEventListener("scroll", handleScroll, { passive: true }); + return () => scrollEl.removeEventListener("scroll", handleScroll); + }, []); + + // Highlights all entries in `list` across the already-rendered pages. + // Returns the 1-based page number of the first successfully highlighted entry, or null. + const applyHighlights = useCallback( + async (list: QuoteEntry[]): Promise<number | null> => { + // Clear any prior highlights across all pages + for (const p of renderedPagesRef.current) + clearHighlights(p.textDivs); + + let firstHitPage: number | null = null; + for (const entry of list) { + let hitPage: number | null = null; + + if (entry.page) { + const target = renderedPagesRef.current[entry.page - 1]; + if (target) { + const found = await highlightQuote( + target.textDivs, + entry.quote, + ); + if (found) hitPage = entry.page; + } + } + + // Fall back to scanning all pages for this quote + if (hitPage === null) { + console.warn( + `Quote not found on hinted page, scanning all pages: "${entry.quote.slice(0, 60)}..."`, + ); + for (let i = 0; i < renderedPagesRef.current.length; i++) { + const p = renderedPagesRef.current[i]; + const found = await highlightQuote( + p.textDivs, + entry.quote, + ); + if (found) { + hitPage = i + 1; + break; + } + } + } + + if (hitPage !== null && firstHitPage === null) { + firstHitPage = hitPage; + } + } + return firstHitPage; + }, + [], + ); + + const renderPDF = useCallback( + async ( + doc: import("pdfjs-dist").PDFDocumentProxy, + list: QuoteEntry[], + scrollToPage?: number, + ) => { + if (!containerRef.current) return; + containerRef.current.innerHTML = ""; + renderedPagesRef.current = []; + const lib = await getPdfJs(); + lib.TextLayer.cleanup(); + + setNumPages(doc.numPages); + setCurrentPage(1); + currentPageRef.current = 1; + + const hasCitation = list.length > 0; + if (hasCitation && scrollContainerRef.current) { + scrollContainerRef.current.style.opacity = "0"; + } + + const reveal = () => { + if (scrollContainerRef.current) + scrollContainerRef.current.style.opacity = "1"; + }; + + const panelW = containerRef.current.clientWidth; + const firstPage = await doc.getPage(1); + const naturalWidth = firstPage.getViewport({ scale: 1 }).width; + const baseScale = Math.max( + 0.5, + (panelW - SIDE_PADDING) / naturalWidth, + ); + const scale = baseScale * zoomRef.current; + + for (let pageNum = 1; pageNum <= doc.numPages; pageNum++) { + const page = await doc.getPage(pageNum); + const viewport = page.getViewport({ scale }); + + const wrapper = document.createElement("div"); + wrapper.style.position = "relative"; + wrapper.style.margin = "0 auto 8px"; + wrapper.style.width = "fit-content"; + wrapper.className = "shadow-md"; + + const canvas = document.createElement("canvas"); + canvas.width = viewport.width; + canvas.height = viewport.height; + canvas.style.display = "block"; + wrapper.appendChild(canvas); + containerRef.current?.appendChild(wrapper); + + const ctx = canvas.getContext("2d"); + if (!ctx) continue; + + const task = page.render({ canvasContext: ctx, viewport }); + try { + await task.promise; + } catch (e: unknown) { + if ( + (e as { name?: string })?.name !== + "RenderingCancelledException" + ) { + console.error("PDF render error", e); + } + continue; + } + + const textLayerDiv = document.createElement("div"); + textLayerDiv.className = "pdf-text-layer"; + textLayerDiv.style.position = "absolute"; + textLayerDiv.style.left = "0"; + textLayerDiv.style.top = "0"; + textLayerDiv.style.width = `${viewport.width}px`; + textLayerDiv.style.height = `${viewport.height}px`; + textLayerDiv.style.setProperty("--scale-factor", String(scale)); + wrapper.appendChild(textLayerDiv); + + const textLayer = new lib.TextLayer({ + textContentSource: page.streamTextContent(), + container: textLayerDiv, + viewport, + }); + await textLayer.render(); + const textDivs = textLayer.textDivs; + + renderedPagesRef.current.push({ + page, + viewport, + wrapper, + canvas, + textDivs, + }); + } + + // Apply highlights across all entries, then scroll to the first hit. + let targetPage: number | null = null; + if (list.length) { + targetPage = await applyHighlights(list); + if (targetPage === null) { + // Fallback: scroll to the first entry's page hint, even without a highlight + const hint = list.find((e) => e.page)?.page ?? null; + targetPage = hint; + } + } + if (targetPage && targetPage >= 1) { + scrollToHighlightOnPage(targetPage); + } else if (!hasCitation && scrollToPage && scrollToPage > 1) { + // Restore scroll position after zoom re-render + const pageEntry = renderedPagesRef.current[scrollToPage - 1]; + if (pageEntry) + pageEntry.wrapper.scrollIntoView({ + behavior: "instant" as ScrollBehavior, + block: "start", + }); + } + + reveal(); + }, + [applyHighlights], + ); + + // Scroll so the first highlight on `pageNum` lands at the vertical center + // of the viewer. We compute the scroll position explicitly on the scroll + // container — calling `scrollIntoView` on a child of the absolutely- + // positioned text layer can scroll just the overlay while leaving the + // canvas untouched, which is why we don't use it here. + function scrollToHighlightOnPage(pageNum: number) { + const pageEntry = renderedPagesRef.current[pageNum - 1]; + const scrollEl = scrollContainerRef.current; + if (!pageEntry || !scrollEl) return; + + const highlightEl = pageEntry.wrapper.querySelector<HTMLElement>( + ".pdf-text-highlight", + ); + if (highlightEl) { + const containerRect = scrollEl.getBoundingClientRect(); + const highlightRect = highlightEl.getBoundingClientRect(); + const offsetWithinContainer = highlightRect.top - containerRect.top; + const targetTop = + scrollEl.scrollTop + + offsetWithinContainer - + scrollEl.clientHeight / 2 + + highlightRect.height / 2; + scrollEl.scrollTo({ + top: Math.max(0, targetTop), + behavior: "instant" as ScrollBehavior, + }); + } else { + const wrapperRect = pageEntry.wrapper.getBoundingClientRect(); + const containerRect = scrollEl.getBoundingClientRect(); + const targetTop = + scrollEl.scrollTop + (wrapperRect.top - containerRect.top); + scrollEl.scrollTo({ + top: Math.max(0, targetTop), + behavior: "instant" as ScrollBehavior, + }); + } + } + + const rehighlightQuotes = useCallback( + async (list: QuoteEntry[]) => { + const targetPage = await applyHighlights(list); + const scrollPage = + targetPage ?? list.find((e) => e.page)?.page ?? null; + if (scrollPage && scrollPage >= 1) { + scrollToHighlightOnPage(scrollPage); + } + }, + [applyHighlights], + ); + + // Trackpad pinch-to-zoom (wheel + ctrlKey) + useEffect(() => { + const el = scrollContainerRef.current; + if (!el) return; + let debounceTimer: ReturnType<typeof setTimeout> | null = null; + + const handleWheel = (e: WheelEvent) => { + if (!e.ctrlKey) return; + e.preventDefault(); + const delta = e.deltaMode === 0 ? e.deltaY / 300 : e.deltaY * 0.1; + const next = Math.min( + ZOOM_MAX, + Math.max( + ZOOM_MIN, + Math.round(zoomRef.current * Math.exp(-delta) * 100) / 100, + ), + ); + if (next === zoomRef.current) return; + zoomRef.current = next; + setZoom(next); + if (debounceTimer) clearTimeout(debounceTimer); + debounceTimer = setTimeout(() => { + if (pdfDocRef.current) { + renderPDF( + pdfDocRef.current, + quoteListRef.current, + currentPageRef.current, + ); + } + }, 150); + }; + + el.addEventListener("wheel", handleWheel, { passive: false }); + return () => { + el.removeEventListener("wheel", handleWheel); + if (debounceTimer) clearTimeout(debounceTimer); + }; + }, [renderPDF]); + + // Touch pinch-to-zoom + useEffect(() => { + const el = scrollContainerRef.current; + if (!el) return; + let initialDist = 0; + let initialZoom = 1.0; + + function getTouchDist(touches: TouchList) { + const dx = touches[0].clientX - touches[1].clientX; + const dy = touches[0].clientY - touches[1].clientY; + return Math.hypot(dx, dy); + } + + const handleTouchStart = (e: TouchEvent) => { + if (e.touches.length === 2) { + initialDist = getTouchDist(e.touches); + initialZoom = zoomRef.current; + } + }; + + const handleTouchMove = (e: TouchEvent) => { + if (e.touches.length !== 2 || initialDist === 0) return; + e.preventDefault(); + const next = Math.min( + ZOOM_MAX, + Math.max( + ZOOM_MIN, + Math.round( + initialZoom * + (getTouchDist(e.touches) / initialDist) * + 100, + ) / 100, + ), + ); + zoomRef.current = next; + setZoom(next); + }; + + const handleTouchEnd = (e: TouchEvent) => { + if (e.touches.length < 2 && initialDist > 0) { + initialDist = 0; + if (pdfDocRef.current) { + renderPDF( + pdfDocRef.current, + quoteListRef.current, + currentPageRef.current, + ); + } + } + }; + + el.addEventListener("touchstart", handleTouchStart, { passive: true }); + el.addEventListener("touchmove", handleTouchMove, { passive: false }); + el.addEventListener("touchend", handleTouchEnd, { passive: true }); + return () => { + el.removeEventListener("touchstart", handleTouchStart); + el.removeEventListener("touchmove", handleTouchMove); + el.removeEventListener("touchend", handleTouchEnd); + }; + }, [renderPDF]); + + // Clean up PDF.js static font-measurement canvases on unmount + useEffect(() => { + return () => { + getPdfJs().then((lib) => lib.TextLayer.cleanup()); + }; + }, []); + + // Render PDF when fetch result arrives + useEffect(() => { + if (!result || result.type !== "pdf") return; + pdfDocRef.current = null; + renderedPagesRef.current = []; + quoteListRef.current = quoteList; + zoomRef.current = 1.0; + setZoom(1.0); + setNumPages(0); + const list = quoteList; + + let cancelled = false; + (async () => { + const lib = await getPdfJs(); + if (cancelled) return; + const pdfDoc = await lib.getDocument({ + data: new Uint8Array(result.buffer), + standardFontDataUrl: STANDARD_FONT_DATA_URL, + }).promise; + if (cancelled) return; + pdfDocRef.current = pdfDoc; + await renderPDF(pdfDoc, list); + })(); + return () => { + cancelled = true; + }; + }, [result, renderPDF]); // eslint-disable-line react-hooks/exhaustive-deps + + // Re-render at new scale when container is resized (debounced 150ms) + useEffect(() => { + if (!pdfDocRef.current) return; + const timer = setTimeout(() => { + if (pdfDocRef.current) { + renderPDF(pdfDocRef.current, quoteListRef.current); + } + }, 150); + return () => clearTimeout(timer); + }, [containerWidth, renderPDF]); // eslint-disable-line react-hooks/exhaustive-deps + + // Re-highlight when quotes change without full re-render + useEffect(() => { + if (!pdfDocRef.current) return; + quoteListRef.current = quoteList; + rehighlightQuotes(quoteList); + }, [quoteKey, quoteFocusKey, rehighlightQuotes]); // eslint-disable-line react-hooks/exhaustive-deps + + function handleZoomIn() { + const next = Math.min( + ZOOM_MAX, + Math.round((zoomRef.current + ZOOM_STEP) * 100) / 100, + ); + zoomRef.current = next; + setZoom(next); + if (pdfDocRef.current) { + renderPDF( + pdfDocRef.current, + quoteListRef.current, + currentPageRef.current, + ); + } + } + + function handleZoomOut() { + const next = Math.max( + ZOOM_MIN, + Math.round((zoomRef.current - ZOOM_STEP) * 100) / 100, + ); + zoomRef.current = next; + setZoom(next); + if (pdfDocRef.current) { + renderPDF( + pdfDocRef.current, + quoteListRef.current, + currentPageRef.current, + ); + } + } + + if (fallbackToDocx && doc?.document_id) { + return ( + <DocxView + documentId={doc.document_id} + versionId={doc.version_id ?? null} + quotes={quotes} + quoteFocusKey={quoteFocusKey} + rounded={rounded} + /> + ); + } + + return ( + <div + className={`relative flex flex-col bg-gray-100 flex-1 overflow-hidden ${rounded ? "rounded-lg" : ""}`} + > + <div + ref={scrollContainerRef} + className="flex-1 overflow-auto px-3 pt-5 pb-3" + > + {loading && ( + <div className="flex h-full items-center justify-center"> + <Loader2 className="h-7 w-7 animate-spin text-gray-400" /> + </div> + )} + {error && ( + <div className="flex h-full items-center justify-center"> + <p className="text-sm text-red-500">{error}</p> + </div> + )} + <div ref={containerRef} /> + </div> + {numPages > 0 && ( + <> + {/* Page counter — bottom left */} + <div className="absolute bottom-4 left-4 pointer-events-none"> + <span className="flex items-center px-3 py-1.5 rounded-full text-xs font-medium tabular-nums text-gray-700 bg-white/25 backdrop-blur-md border border-white/30 shadow-md"> + {currentPage}/{numPages} + </span> + </div> + + {/* Zoom controls — bottom right */} + <div className="absolute bottom-4 right-4 flex items-center gap-px rounded-full bg-white/25 backdrop-blur-md border border-white/30 shadow-md px-1 py-1"> + <button + onClick={handleZoomOut} + disabled={zoom <= ZOOM_MIN} + className="flex items-center justify-center w-7 h-7 rounded-full text-gray-600 hover:bg-white/80 disabled:opacity-30 transition-colors" + > + <ZoomOut className="h-3.5 w-3.5" /> + </button> + <span className="text-xs font-medium text-gray-600 tabular-nums w-9 text-center select-none"> + {Math.round(zoom * 100)}% + </span> + <button + onClick={handleZoomIn} + disabled={zoom >= ZOOM_MAX} + className="flex items-center justify-center w-7 h-7 rounded-full text-gray-600 hover:bg-white/80 disabled:opacity-30 transition-colors" + > + <ZoomIn className="h-3.5 w-3.5" /> + </button> + </div> + </> + )} + </div> + ); +} diff --git a/frontend/src/app/components/shared/views/SpreadsheetView.tsx b/frontend/src/app/components/shared/views/SpreadsheetView.tsx new file mode 100644 index 0000000..5936789 --- /dev/null +++ b/frontend/src/app/components/shared/views/SpreadsheetView.tsx @@ -0,0 +1,518 @@ +"use client"; + +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Loader2 } from "lucide-react"; +import LuckyExcel, { type LuckyExcelSheet } from "luckyexcel"; +import type { WorkbookInstance } from "@fortune-sheet/react"; +import type { Cell, Sheet } from "@fortune-sheet/core"; +import "@fortune-sheet/react/dist/index.css"; +import { useFetchSingleDoc } from "@/app/hooks/useFetchSingleDoc"; + +type HighlightRange = { row: [number, number]; column: [number, number] }; +type WorkbookComponent = typeof import("@fortune-sheet/react").Workbook; + +/** A cell locator to highlight, e.g. { sheet: "Q3 Budget", cell: "B7" }. */ +export type HighlightCell = { sheet?: string; cell?: string }; + +interface Props { + documentId: string; + versionId?: string | null; + /** Cell(s) to select/scroll to (from a spreadsheet citation). */ + highlightCells?: HighlightCell[]; + rounded?: boolean; +} + +/** "B" -> 1, "AA" -> 26 (0-based column index). */ +function columnLettersToIndex(letters: string): number { + let n = 0; + for (const ch of letters.toUpperCase()) { + n = n * 26 + (ch.charCodeAt(0) - 64); + } + return n - 1; +} + +/** Parse an A1 address like "B7" into 0-based { r, c }. */ +function parseA1(cell: string): { r: number; c: number } | null { + const m = cell.trim().match(/^([A-Za-z]+)(\d+)$/); + if (!m) return null; + const c = columnLettersToIndex(m[1]); + const r = Number.parseInt(m[2], 10) - 1; + if (c < 0 || r < 0) return null; + return { r, c }; +} + +/** Parse an A1 address or range ("B7" or "B7:C9") into 0-based row/col spans. */ +function parseRange(range: string): HighlightRange | null { + const [startRaw, endRaw] = range.split(":"); + const start = parseA1(startRaw); + if (!start) return null; + const end = endRaw ? parseA1(endRaw) : start; + if (!end) return null; + return { + row: [Math.min(start.r, end.r), Math.max(start.r, end.r)], + column: [Math.min(start.c, end.c), Math.max(start.c, end.c)], + }; +} + +/** + * Expand a highlight range to cover any merged ranges it intersects. Fortune- + * sheet paints a merge as one block anchored at its top-left cell and never + * paints the covered cells, so a citation to a covered cell (e.g. B1 inside + * A1:C1) would otherwise highlight nothing. The model is asked to cite the full + * merged range, but this is a deterministic fallback for when it cites a covered + * cell anyway. Expanding to the anchor makes `afterRenderCell` paint the block. + */ +function expandRangeForMerges( + sheet: Sheet, + range: HighlightRange, +): HighlightRange { + const merges = (sheet.config as { merge?: Record<string, MergeInfo> }) + ?.merge; + if (!merges) return range; + let [r0, r1] = range.row; + let [c0, c1] = range.column; + for (const m of Object.values(merges)) { + const mr1 = m.r + m.rs - 1; + const mc1 = m.c + m.cs - 1; + if (r0 <= mr1 && r1 >= m.r && c0 <= mc1 && c1 >= m.c) { + r0 = Math.min(r0, m.r); + r1 = Math.max(r1, mr1); + c0 = Math.min(c0, m.c); + c1 = Math.max(c1, mc1); + } + } + return { row: [r0, r1], column: [c0, c1] }; +} + +/** + * Pixel offset (from the grid origin) and size of a row/col span, derived from + * the sheet's column widths / row heights. Fortune-sheet defaults are 73px wide + * and 19px tall; per-index overrides live in `config.columnlen`/`config.rowlen`. + * Hidden rows/cols aren't accounted for, so this is best-effort (enough to + * decide whether the cell is on screen and where to center it). + */ +function rangePixelRect( + sheet: Sheet, + range: HighlightRange, +): { x: number; y: number; w: number; h: number } { + const cfg = (sheet.config ?? {}) as { + columnlen?: Record<string, number>; + rowlen?: Record<string, number>; + }; + const colLen = cfg.columnlen ?? {}; + const rowLen = cfg.rowlen ?? {}; + const colW = (c: number) => colLen[c] ?? sheet.defaultColWidth ?? 73; + const rowH = (r: number) => rowLen[r] ?? sheet.defaultRowHeight ?? 19; + + let x = 0; + for (let c = 0; c < range.column[0]; c++) x += colW(c); + let w = 0; + for (let c = range.column[0]; c <= range.column[1]; c++) w += colW(c); + let y = 0; + for (let r = 0; r < range.row[0]; r++) y += rowH(r); + let h = 0; + for (let r = range.row[0]; r <= range.row[1]; r++) h += rowH(r); + return { x, y, w, h }; +} + +type MergeInfo = { r: number; c: number; rs: number; cs: number }; +type CellData = { r: number; c: number; v: Record<string, unknown> }; + +/** + * Expand `config.merge` onto the cells. Luckyexcel records merges in + * `config.merge` but Fortune-sheet only renders a merge when the cells carry + * `mc` (the anchor gets `{r,c,rs,cs}`; every covered cell points back with + * `{r,c}`). Without this, merged ranges render as separate single cells. + */ +function applyMergeCells(sheets: LuckyExcelSheet[]): void { + for (const sheet of sheets) { + const merges = (sheet.config as { merge?: Record<string, MergeInfo> }) + ?.merge; + if (!merges) continue; + + if (!Array.isArray(sheet.celldata)) sheet.celldata = []; + const celldata = sheet.celldata as CellData[]; + + const byKey = new Map<string, CellData>(); + for (const entry of celldata) { + if (typeof entry?.r === "number" && typeof entry?.c === "number") { + byKey.set(`${entry.r}_${entry.c}`, entry); + } + } + const ensureCell = (r: number, c: number): CellData => { + const key = `${r}_${c}`; + let entry = byKey.get(key); + if (!entry) { + entry = { r, c, v: {} }; + celldata.push(entry); + byKey.set(key, entry); + } + if (!entry.v || typeof entry.v !== "object") entry.v = {}; + return entry; + }; + + for (const mc of Object.values(merges)) { + ensureCell(mc.r, mc.c).v.mc = { + r: mc.r, + c: mc.c, + rs: mc.rs, + cs: mc.cs, + }; + for (let rr = mc.r; rr < mc.r + mc.rs; rr++) { + for (let cc = mc.c; cc < mc.c + mc.cs; cc++) { + if (rr === mc.r && cc === mc.c) continue; + ensureCell(rr, cc).v.mc = { r: mc.r, c: mc.c }; + } + } + } + } +} + +/** + * Make text cells overflow into empty adjacent cells, mirroring Excel's default. + * Fortune-sheet only spills a cell's text when its `tb` (text-break) is "1"; + * Luckyexcel leaves text cells clipping, so we set `tb: "1"` on unwrapped, + * non-merged text cells. Fortune-sheet still only paints the overflow over + * genuinely empty neighbors, so this matches Excel (numbers/dates keep the + * default and are not spilled). + */ +function applyExcelTextOverflow(sheets: LuckyExcelSheet[]): void { + for (const sheet of sheets) { + const celldata = sheet.celldata; + if (!Array.isArray(celldata)) continue; + for (const entry of celldata) { + const cell = (entry as { v?: Record<string, unknown> } | null)?.v; + if (!cell || typeof cell !== "object") continue; + if (cell.mc) continue; // part of a merge - leave as-is + if (cell.tb === "2") continue; // explicit wrap-text - keep + if (typeof cell.v === "string" && cell.v.length > 0) { + cell.tb = "1"; // text: overflow into empty neighbors + } + } + } +} + +/** + * Tint a row/column header cell gray via Fortune-sheet's own header render + * hooks. Fortune-sheet paints the header labels (A/B/C, 1/2/3) onto the grid + * canvas with a white fill and dark text; we lay a translucent gray over that + * cell in the `afterRender…HeaderCell` pass. A low alpha darkens the white + * background into gray while leaving the dark labels legible — unlike an opaque + * CSS background on the header overlay divs, which sits in front of the canvas + * and hides the labels entirely. + */ +const HEADER_TINT = "rgba(148, 163, 184, 0.18)"; + +function tintHeaderCell( + x: number, + y: number, + width: number, + height: number, + ctx: CanvasRenderingContext2D, +): void { + ctx.save(); + ctx.fillStyle = HEADER_TINT; + ctx.fillRect(x, y, width, height); + ctx.restore(); +} + +/** + * Renders an Excel workbook as a read-only grid using Fortune-sheet. It fetches + * the document's raw `.xlsx`/`.xlsm`/`.xls` bytes itself (via /display) and + * converts them to Fortune-sheet data with Luckyexcel, preserving the original + * styling (fills, fonts, borders, merges). + * + * Spreadsheet citations are highlighted by cell: `highlightCells` activates the + * cited sheet tab and scrolls the A1 address/range into view, where a canvas + * hook paints the highlight. + */ +export function SpreadsheetView({ + documentId, + versionId, + highlightCells, + rounded = true, +}: Props) { + const workbookRef = useRef<WorkbookInstance>(null); + // The frame element, used to reach Fortune-sheet's scrollbars for measuring + // the current scroll offset and viewport size when deciding whether to scroll. + const containerRef = useRef<HTMLDivElement>(null); + // Current highlight, read by the render hook. A ref (not state) so updating + // it never re-mounts the Workbook or changes the settings object. + const highlightRef = useRef<HighlightRange | null>(null); + const [sheets, setSheets] = useState<Sheet[] | null>(null); + const [WorkbookComponent, setWorkbookComponent] = + useState<WorkbookComponent | null>(null); + const [error, setError] = useState<string | null>(null); + + // Fetch the raw workbook bytes. For spreadsheets, /display returns the + // original .xlsx/.xlsm/.xls bytes rather than a PDF rendition. + const { result, error: fetchError } = useFetchSingleDoc( + documentId, + versionId, + ); + + // Fortune-sheet touches browser-only APIs while loading, so keep the import + // inside the client component even though this file also owns the view. + useEffect(() => { + let cancelled = false; + import("@fortune-sheet/react").then((mod) => { + if (!cancelled) setWorkbookComponent(() => mod.Workbook); + }); + return () => { + cancelled = true; + }; + }, []); + + // Stable key so the highlight effect only re-runs when the target changes. + const highlightKey = useMemo( + () => + (highlightCells ?? []) + .map((h) => `${h.sheet ?? ""}!${h.cell ?? ""}`) + .join("|"), + [highlightCells], + ); + + // Parse the workbook with Luckyexcel, which converts the .xlsx to + // Fortune-sheet data while preserving styling (fills, fonts, borders, + // alignment, column widths). + useEffect(() => { + if (!result) return; + if (result.type !== "spreadsheet") { + setError("This spreadsheet could not be displayed."); + return; + } + let cancelled = false; + setSheets(null); + setError(null); + + try { + const file = new File([result.buffer], "spreadsheet.xlsx"); + LuckyExcel.transformExcelToLucky(file, (exportJson) => { + if (cancelled) return; + if (exportJson?.sheets?.length) { + applyMergeCells(exportJson.sheets); + applyExcelTextOverflow(exportJson.sheets); + setSheets(exportJson.sheets as unknown as Sheet[]); + } else { + setError("This spreadsheet could not be displayed."); + } + }); + } catch { + if (!cancelled) + setError("This spreadsheet could not be displayed."); + } + + return () => { + cancelled = true; + }; + }, [result]); + + // Draw the citation highlight on the canvas. Stable identity so the Workbook + // settings never change; it reads the live target from `highlightRef`. We use + // this instead of `setSelection`, whose in-place mutation of the range object + // crashes under React Strict Mode's double-invoked immer producer. + const afterRenderCell = useCallback( + ( + _cell: Cell | null, + info: { + row: number; + column: number; + startX: number; + startY: number; + endX: number; + endY: number; + }, + ctx: CanvasRenderingContext2D, + ) => { + const range = highlightRef.current; + if (!range) return; + if ( + info.row < range.row[0] || + info.row > range.row[1] || + info.column < range.column[0] || + info.column > range.column[1] + ) { + return; + } + const w = info.endX - info.startX; + const h = info.endY - info.startY; + ctx.save(); + ctx.fillStyle = "rgba(59, 130, 246, 0.16)"; + ctx.fillRect(info.startX, info.startY, w, h); + ctx.strokeStyle = "#3b82f6"; + ctx.lineWidth = 2; + ctx.strokeRect(info.startX + 1, info.startY + 1, w - 2, h - 2); + ctx.restore(); + }, + [], + ); + const hooks = useMemo( + () => ({ + afterRenderCell, + // Tint the header strips gray while keeping the A/B/C, 1/2/3 labels + // visible (see tintHeaderCell). Column cells fill from y=0; row cells + // fill from x=0 — matching Fortune-sheet's own default header rects. + afterRenderColumnHeaderCell: ( + _char: string, + _idx: number, + left: number, + width: number, + height: number, + ctx: CanvasRenderingContext2D, + ) => tintHeaderCell(left, 0, width, height, ctx), + afterRenderRowHeaderCell: ( + _num: string, + _idx: number, + top: number, + width: number, + height: number, + ctx: CanvasRenderingContext2D, + ) => tintHeaderCell(0, top, width, height, ctx), + }), + [afterRenderCell], + ); + + // Activate the cited sheet, bring the cell into view, and repaint the + // highlight. We only scroll when the cell is off screen (centering it); + // when it's already visible we leave the viewport put and force a redraw so + // the `afterRenderCell` hook repaints the new highlight (and clears the old + // one). Both paths must trigger a redraw: `scroll()` repaints because the + // position changes, and the synthetic "resize" repaints in place via + // Fortune-sheet's window resize handler. + useEffect(() => { + if (!sheets) return; + const target = highlightCells?.[0]; + + const sheetIndex = target?.sheet + ? Math.max( + 0, + sheets.findIndex((s) => s.name === target.sheet), + ) + : 0; + + const parsed = target?.cell ? parseRange(target.cell) : null; + const range = parsed + ? expandRangeForMerges(sheets[sheetIndex], parsed) + : null; + highlightRef.current = range; + if (!range && !target?.sheet) return; + + const timer = window.setTimeout(() => { + const inst = workbookRef.current; + if (!inst) return; + try { + inst.activateSheet({ index: sheetIndex }); + if (!range) return; + + const container = containerRef.current; + const sbX = container?.querySelector<HTMLElement>( + ".luckysheet-scrollbar-x", + ); + const sbY = container?.querySelector<HTMLElement>( + ".luckysheet-scrollbar-y", + ); + + // Without the scrollbars we can't measure the viewport; fall back to + // corner-scrolling, which at least brings the cell in and repaints. + if (!sbX || !sbY) { + inst.scroll({ + targetRow: range.row[0], + targetColumn: range.column[0], + }); + return; + } + + const rect = rangePixelRect(sheets[sheetIndex], range); + const curLeft = sbX.scrollLeft; + const curTop = sbY.scrollTop; + const viewW = sbX.clientWidth; + const viewH = sbY.clientHeight; + const visible = + rect.x >= curLeft && + rect.x + rect.w <= curLeft + viewW && + rect.y >= curTop && + rect.y + rect.h <= curTop + viewH; + + if (visible) { + // On screen: keep the viewport still, just repaint the highlight. + window.dispatchEvent(new Event("resize")); + } else { + // Off screen: center the cell. scroll() re-renders and repaints. + inst.scroll({ + scrollLeft: Math.max( + 0, + Math.round(rect.x - (viewW - rect.w) / 2), + ), + scrollTop: Math.max( + 0, + Math.round(rect.y - (viewH - rect.h) / 2), + ), + }); + } + } catch { + /* highlighting is best-effort */ + } + }, 200); + return () => window.clearTimeout(timer); + }, [sheets, highlightCells, highlightKey]); + + const frameClass = `fortune-sheet-viewer relative flex flex-col flex-1 min-h-0 overflow-hidden ${rounded ? "rounded-lg" : ""}`; + + const message = + error ?? (fetchError ? "Failed to load spreadsheet." : null); + if (message) { + return ( + <div className={frameClass}> + <div className="flex h-full items-center justify-center px-6 text-center text-sm text-gray-500"> + {message} + </div> + </div> + ); + } + + if (!sheets || !WorkbookComponent) { + return ( + <div className={frameClass}> + <div className="flex h-full items-center justify-center"> + <Loader2 className="h-7 w-7 animate-spin text-gray-400" /> + </div> + </div> + ); + } + + return ( + <div ref={containerRef} className={frameClass}> + <div className="relative min-h-0 flex-1"> + <WorkbookComponent + ref={workbookRef} + data={sheets} + hooks={hooks} + allowEdit={false} + showToolbar={false} + showFormulaBar={false} + /> + <style jsx global>{` + /* The row/col header strips are transparent overlays over + the label canvas — leave them so the labels show. Only the + corner (no label) gets a matching gray background here; the + header strips are tinted on the canvas via render hooks. */ + .fortune-sheet-viewer .fortune-left-top { + background-color: #eceef2; + } + + .fortune-sheet-viewer .fortune-row-header-hover, + .fortune-sheet-viewer .fortune-col-header-hover { + background-color: rgba(209, 213, 219, 0.65); + } + + .fortune-sheet-viewer .fortune-row-header-selected, + .fortune-sheet-viewer .fortune-col-header-selected { + background-color: rgba(156, 163, 175, 0.28); + } + `}</style> + </div> + </div> + ); +} + +export default SpreadsheetView; diff --git a/frontend/src/app/components/shared/views/highlightDocxQuote.ts b/frontend/src/app/components/shared/views/highlightDocxQuote.ts new file mode 100644 index 0000000..c0d1d19 --- /dev/null +++ b/frontend/src/app/components/shared/views/highlightDocxQuote.ts @@ -0,0 +1,130 @@ +const HIGHLIGHT_CLASS = "docx-text-highlight"; +const IGNORED_TEXT_SELECTOR = ".star-pagination,.case-page-number"; + +function onlyLetters(s: string): string { + return s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(); +} + +function toOrigPos(text: string, strippedPos: number): number { + let count = 0; + for (let k = 0; k < text.length; k++) { + if (/[a-zA-Z0-9]/.test(text[k])) { + if (count === strippedPos) return k; + count++; + } + } + return text.length; +} + +function collectTextNodes(root: HTMLElement): Text[] { + const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { + acceptNode(node: Node) { + const p = node.parentElement; + if (!p) return NodeFilter.FILTER_REJECT; + const tag = p.tagName; + if (tag === "STYLE" || tag === "SCRIPT") + return NodeFilter.FILTER_REJECT; + if (p.closest(IGNORED_TEXT_SELECTOR)) + return NodeFilter.FILTER_REJECT; + return NodeFilter.FILTER_ACCEPT; + }, + }); + const out: Text[] = []; + let cur = walker.nextNode() as Text | null; + while (cur) { + out.push(cur); + cur = walker.nextNode() as Text | null; + } + return out; +} + +export function clearDocxQuoteHighlights(root: HTMLElement): void { + root.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((span) => { + const parent = span.parentNode; + if (!parent) return; + while (span.firstChild) parent.insertBefore(span.firstChild, span); + parent.removeChild(span); + }); + root.normalize(); +} + +/** + * Highlight the given quote text inside `root` (a docx-preview output). + * Quote is split on ellipsis variants; each segment is located via + * letters-only substring matching, so whitespace/punctuation differences + * between the LLM's quote and the rendered text don't break matching. + * + * Returns the first highlight span if any match was found, for + * scroll-into-view by the caller. + */ +export function highlightDocxQuote( + root: HTMLElement, + quote: string, +): HTMLElement | null { + clearDocxQuoteHighlights(root); + if (!quote) return null; + const segments = quote + .split(/\.{3}|…/) + .map(onlyLetters) + .filter((s) => s.length > 0); + if (segments.length === 0) return null; + + const textNodes = collectTextNodes(root); + const nodeStartInFull: number[] = []; + const nodeStrippedLen: number[] = []; + let fullStripped = ""; + for (const node of textNodes) { + const stripped = onlyLetters(node.data); + nodeStartInFull.push(fullStripped.length); + nodeStrippedLen.push(stripped.length); + fullStripped += stripped; + } + + type Range = { nodeIdx: number; origStart: number; origEnd: number }; + const ranges: Range[] = []; + + for (const segment of segments) { + const searchKey = segment.slice(0, 30); + const matchPos = fullStripped.indexOf(searchKey); + if (matchPos < 0) continue; + const matchEnd = matchPos + segment.length; + + for (let i = 0; i < textNodes.length; i++) { + const start = nodeStartInFull[i]; + const end = start + nodeStrippedLen[i]; + if (matchPos >= end || matchEnd <= start) continue; + + const localStart = Math.max(0, matchPos - start); + const localEnd = Math.min(nodeStrippedLen[i], matchEnd - start); + const text = textNodes[i].data; + const origStart = toOrigPos(text, localStart); + const origEnd = toOrigPos(text, localEnd); + if (origStart >= origEnd) continue; + ranges.push({ nodeIdx: i, origStart, origEnd }); + } + } + + if (ranges.length === 0) return null; + + // Apply in reverse document order so splits don't shift earlier ranges. + ranges.sort((a, b) => { + if (a.nodeIdx !== b.nodeIdx) return b.nodeIdx - a.nodeIdx; + return b.origStart - a.origStart; + }); + + const spans: HTMLElement[] = []; + for (const r of ranges) { + const node = textNodes[r.nodeIdx]; + const mid = node.splitText(r.origStart); + mid.splitText(r.origEnd - r.origStart); + const span = document.createElement("span"); + span.className = HIGHLIGHT_CLASS; + mid.parentNode?.insertBefore(span, mid); + span.appendChild(mid); + spans.push(span); + } + + // Because we processed ranges in reverse order, the earliest-in-document + // highlight is the last one we pushed. + return spans[spans.length - 1] ?? null; +} diff --git a/frontend/src/app/components/shared/views/highlightQuote.ts b/frontend/src/app/components/shared/views/highlightQuote.ts new file mode 100644 index 0000000..d71f5b0 --- /dev/null +++ b/frontend/src/app/components/shared/views/highlightQuote.ts @@ -0,0 +1,124 @@ +let pdfjsLib: typeof import("pdfjs-dist") | null = null; + +export async function getPdfJs() { + if (pdfjsLib) return pdfjsLib; + pdfjsLib = await import("pdfjs-dist"); + pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( + "pdfjs-dist/build/pdf.worker.min.mjs", + import.meta.url, + ).toString(); + return pdfjsLib; +} + +export const STANDARD_FONT_DATA_URL = + "https://unpkg.com/pdfjs-dist@4.10.38/standard_fonts/"; + +const HIGHLIGHT_CLASS = "pdf-text-highlight"; +const ORIGINAL_TEXT_ATTR = "data-original-text"; + +// Strip everything except alphanumerics (a-z A-Z 0-9) for robust matching +function onlyLetters(s: string): string { + return s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(); +} + +function escapeHtml(str: string): string { + return str + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">"); +} + +// Given a position in the stripped (letters-only) version of `original`, +// return the corresponding index in `original`. +function strippedPosToOriginal(original: string, strippedPos: number): number { + let count = 0; + for (let i = 0; i < original.length; i++) { + if (/[a-zA-Z0-9]/.test(original[i])) { + if (count === strippedPos) return i; + count++; + } + } + return original.length; +} + +export function clearHighlights(textDivs: HTMLElement[]) { + for (const div of textDivs) { + if (div.hasAttribute(ORIGINAL_TEXT_ATTR)) { + div.textContent = div.getAttribute(ORIGINAL_TEXT_ATTR)!; + div.removeAttribute(ORIGINAL_TEXT_ATTR); + } + } +} + +export async function highlightQuote( + textDivs: HTMLElement[], + quote: string, +): Promise<boolean> { + clearHighlights(textDivs); + + // Split on ellipsis variants to highlight each segment separately + const segments = quote + .split(/\.{3}|…/) + .map((s) => onlyLetters(s)) + .filter((s) => s.length > 0); + + // Build the stripped full text and track each div's start position within it. + // Also keep original div texts for display. + const divOrigTexts: string[] = []; // original text for innerHTML slicing + const divStripped: string[] = []; // letters-only version for matching + const divStartInFull: number[] = []; // start index in fullStripped + let fullStripped = ""; + + for (let i = 0; i < textDivs.length; i++) { + const orig = textDivs[i].textContent ?? ""; + divOrigTexts.push(orig); + const stripped = onlyLetters(orig); + divStripped.push(stripped); + divStartInFull.push(fullStripped.length); + fullStripped += stripped; + } + + // Map: divIndex -> [strippedLocalStart, strippedLocalEnd] + const divHighlightRanges = new Map<number, [number, number]>(); + + for (const segment of segments) { + const searchKey = segment.slice(0, 30); + const matchPos = fullStripped.indexOf(searchKey); + if (matchPos === -1) { + continue; + } + const matchEnd = matchPos + segment.length; + + for (let i = 0; i < textDivs.length; i++) { + const divStart = divStartInFull[i]; + const divEnd = divStart + divStripped[i].length; + if (matchPos >= divEnd || matchEnd <= divStart) continue; + + const localStart = Math.max(0, matchPos - divStart); + const localEnd = Math.min( + divStripped[i].length, + matchEnd - divStart, + ); + divHighlightRanges.set(i, [localStart, localEnd]); + } + } + + if (divHighlightRanges.size === 0) return false; + + for (const [idx, [strStart, strEnd]] of divHighlightRanges) { + const div = textDivs[idx]; + const orig = divOrigTexts[idx]; + + // Map stripped positions back to original character positions + const origStart = strippedPosToOriginal(orig, strStart); + const origEnd = strippedPosToOriginal(orig, strEnd); + + div.setAttribute(ORIGINAL_TEXT_ATTR, orig); + div.innerHTML = + escapeHtml(orig.slice(0, origStart)) + + `<span class="${HIGHLIGHT_CLASS}">${escapeHtml(orig.slice(origStart, origEnd))}</span>` + + escapeHtml(orig.slice(origEnd)); + } + + return true; +} diff --git a/frontend/src/components/site-logo.tsx b/frontend/src/app/components/site-logo.tsx similarity index 96% rename from frontend/src/components/site-logo.tsx rename to frontend/src/app/components/site-logo.tsx index ce4ecdd..6438300 100644 --- a/frontend/src/components/site-logo.tsx +++ b/frontend/src/app/components/site-logo.tsx @@ -1,5 +1,5 @@ import Link from "next/link"; -import { MikeIcon } from "@/components/chat/mike-icon"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; interface SiteLogoProps { size?: "sm" | "md" | "lg" | "xl"; diff --git a/frontend/src/app/components/tabular/AddColumnModal.tsx b/frontend/src/app/components/tabular/AddColumnModal.tsx index c622060..62fb7a2 100644 --- a/frontend/src/app/components/tabular/AddColumnModal.tsx +++ b/frontend/src/app/components/tabular/AddColumnModal.tsx @@ -1,21 +1,17 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { createPortal } from "react-dom"; import { ChevronDown, Plus, X } from "lucide-react"; import type { ColumnConfig, ColumnFormat } from "../shared/types"; import { generateTabularColumnPrompt } from "@/app/lib/mikeApi"; -import { FORMAT_OPTIONS, formatLabel, formatIcon } from "./columnFormat"; +import { FORMAT_OPTIONS } from "./columnFormat"; import { TAG_COLORS } from "./pillUtils"; import { getPresetConfig, PROMPT_PRESETS } from "./columnPresets"; +import { Modal } from "../modals/Modal"; import { ModalFieldLabel } from "../modals/ModalFieldLabel"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; +import { ModalSelect } from "../modals/ModalSelect"; +import { ModalTextarea } from "../modals/ModalTextarea"; +import { ModalTextInput } from "../modals/ModalTextInput"; interface ColumnDraft { name: string; @@ -45,7 +41,9 @@ interface Props { export function AddColumnModal({ open, existingCount, onClose, onAdd, editingColumn, onSave, onDelete }: Props) { const isEditing = !!editingColumn; + const formId = "add-column-modal-form"; const [columns, setColumns] = useState<ColumnDraft[]>([{ ...EMPTY_DRAFT }]); + const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]); const [generatingIndices, setGeneratingIndices] = useState<number[]>([]); const [presetsOpenIndex, setPresetsOpenIndex] = useState<number | null>( null, @@ -65,6 +63,7 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol } else { setColumns([{ ...EMPTY_DRAFT }]); } + setCollapsedIndices([]); }, [open]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { @@ -86,6 +85,7 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol function resetForm() { setColumns([{ ...EMPTY_DRAFT }]); + setCollapsedIndices([]); setGeneratingIndices([]); } @@ -110,6 +110,24 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol ? [{ ...EMPTY_DRAFT }] : prev.filter((_, i) => i !== index), ); + setCollapsedIndices((prev) => + prev + .filter((collapsedIndex) => collapsedIndex !== index) + .map((collapsedIndex) => + collapsedIndex > index + ? collapsedIndex - 1 + : collapsedIndex, + ), + ); + } + + function toggleColumnCollapsed(index: number) { + setCollapsedIndices((prev) => + prev.includes(index) + ? prev.filter((collapsedIndex) => collapsedIndex !== index) + : [...prev, index], + ); + setPresetsOpenIndex(null); } function commitTag(index: number) { @@ -191,35 +209,90 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol onClose(); } - return createPortal( - <div className="fixed inset-0 z-[101] flex items-center justify-center bg-black/20 backdrop-blur-xs"> - <div className="w-full max-w-2xl rounded-2xl bg-white shadow-2xl flex flex-col h-[600px]"> - {/* Header */} - <div className="flex items-center justify-between px-6 pt-5 pb-2"> - <div className="flex items-center gap-1.5 text-xs text-gray-400"> - <span>Tabular Review</span> - <span>›</span> - <span>{isEditing ? "Edit column" : "New column"}</span> - </div> - <button - onClick={handleClose} - className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors" - > - <X className="h-4 w-4" /> - </button> - </div> - - <form - onSubmit={handleSubmit} - className="flex flex-col min-h-0 flex-1" - > - {/* Body */} - <div className="px-6 pt-3 pb-5 space-y-5 overflow-y-auto flex-1"> + return ( + <Modal + open={open} + onClose={handleClose} + breadcrumbs={[ + "Tabular Review", + isEditing ? "Edit column" : "New column", + ]} + primaryAction={{ + label: isEditing ? "Save changes" : "Add columns", + type: "submit", + form: formId, + disabled: columns.some( + (col) => !col.name.trim() || !col.prompt.trim(), + ), + }} + cancelAction={{ label: "Cancel", onClick: handleClose }} + secondaryAction={ + isEditing && onDelete + ? { + label: "Delete", + variant: "danger", + onClick: onDelete, + } + : undefined + } + > + <form + id={formId} + onSubmit={handleSubmit} + className="flex min-h-0 flex-1 flex-col" + > + <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-3"> {columns.map((column, index) => ( <div key={index} - className="rounded-xl border border-gray-200 p-4" + className="relative" > + {(() => { + const nameInputId = `column-${index}-name`; + const formatInputId = `column-${index}-format`; + const tagInputId = `column-${index}-tag`; + const promptInputId = `column-${index}-prompt`; + const isCollapsed = + collapsedIndices.includes(index); + + return ( + <> + <div className="mb-4 flex items-center justify-between gap-3"> + <button + type="button" + onClick={() => + toggleColumnCollapsed( + index, + ) + } + aria-expanded={!isCollapsed} + className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-gray-300" + > + <ChevronDown + className={`h-4 w-4 shrink-0 text-gray-600 transition-transform ${isCollapsed ? "-rotate-90" : ""}`} + /> + <h3 className="font-serif text-2xl text-gray-950"> + Column {index + 1} + </h3> + </button> + {columns.length > 1 && ( + <button + type="button" + onClick={() => + removeColumn(index) + } + className="rounded-lg p-1.5 text-gray-300 transition-colors hover:bg-gray-100 hover:text-gray-500" + aria-label="Remove column" + > + <X className="h-4 w-4" /> + </button> + )} + </div> + {!isCollapsed && ( + <> + <ModalFieldLabel htmlFor={nameInputId}> + Column title + </ModalFieldLabel> {/* Name row */} <div className="flex items-start gap-2"> {/* Input + preset dropdown anchored to this wrapper */} @@ -231,8 +304,10 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol : null } > - <input + <ModalTextInput + id={nameInputId} type="text" + variant="minimal" value={column.name} onChange={(e) => { const name = e.target.value; @@ -253,7 +328,7 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol }); }} placeholder="Column name" - className="flex-1 text-2xl font-serif text-gray-800 placeholder-gray-400 focus:outline-none bg-transparent" + className="flex-1" autoFocus={index === 0} /> <button @@ -316,74 +391,39 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol </div> )} </div> - {columns.length > 1 && ( - <button - type="button" - onClick={() => removeColumn(index)} - className="mt-1.5 rounded-lg p-1.5 text-gray-300 transition-colors hover:bg-gray-100 hover:text-gray-500" - > - <X className="h-4 w-4" /> - </button> - )} </div> {/* Format */} <div className="mt-4"> - <ModalFieldLabel className="text-gray-500"> + <ModalFieldLabel htmlFor={formatInputId}> Format </ModalFieldLabel> - <DropdownMenu> - <DropdownMenuTrigger asChild> - <button className="mt-1 flex items-center justify-between rounded-md border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-700 hover:border-gray-400 focus:outline-none"> - <span className="flex items-center gap-2"> - {(() => { - const Icon = formatIcon( - column.format, - ); - return ( - <Icon className="h-3.5 w-3.5 text-gray-400" /> - ); - })()} - {formatLabel(column.format)} - </span> - <ChevronDown className="h-3.5 w-3.5 text-gray-400" /> - </button> - </DropdownMenuTrigger> - <DropdownMenuContent - align="start" - className="z-[200]" - > - <DropdownMenuRadioGroup - value={column.format} - onValueChange={(v) => - updateColumn(index, { - format: v as ColumnFormat, - tags: [], - tagInput: "", - }) - } - > - {FORMAT_OPTIONS.map((o) => ( - <DropdownMenuRadioItem - key={o.value} - value={o.value} - > - <o.icon className="h-3.5 w-3.5 text-gray-400" /> - {o.label} - </DropdownMenuRadioItem> - ))} - </DropdownMenuRadioGroup> - </DropdownMenuContent> - </DropdownMenu> + <ModalSelect + id={formatInputId} + value={column.format} + options={FORMAT_OPTIONS.map((option) => ({ + value: option.value, + label: option.label, + icon: option.icon, + iconClassName: option.iconClassName, + }))} + onChange={(value) => + updateColumn(index, { + format: value as ColumnFormat, + tags: [], + tagInput: "", + }) + } + /> </div> {/* Tag input */} {column.format === "tag" && ( <div className="mt-3"> - <ModalFieldLabel className="text-gray-500"> + <ModalFieldLabel htmlFor={tagInputId}> Tags </ModalFieldLabel> - <div className="mt-1 flex flex-wrap gap-1.5 rounded-md border border-gray-200 px-2 py-1.5 focus-within:border-gray-400"> + <div className="mt-1 flex flex-wrap gap-1.5 rounded-xl border border-white/70 bg-white/55 px-2 py-1.5 shadow-[0_3px_9px_rgba(15,23,42,0.052),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl"> {column.tags.map((tag, tagIdx) => ( <span key={tag} @@ -410,8 +450,10 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol </button> </span> ))} - <input + <ModalTextInput + id={tagInputId} type="text" + variant="minimal" value={column.tagInput} onChange={(e) => updateColumn(index, { @@ -424,7 +466,7 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol } onBlur={() => commitTag(index)} placeholder="Add tag…" - className="min-w-[80px] flex-1 bg-transparent text-sm text-gray-700 placeholder-gray-400 focus:outline-none" + className="min-w-[80px] flex-1 bg-transparent font-sans text-sm text-gray-700 shadow-none placeholder:text-gray-400" /> </div> <p className="mt-1 text-xs text-gray-400"> @@ -435,7 +477,10 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol {/* Prompt */} <div className="mt-4 flex items-center justify-between"> - <ModalFieldLabel className="mb-0 text-gray-500"> + <ModalFieldLabel + htmlFor={promptInputId} + className="mb-0" + > Prompt </ModalFieldLabel> <button @@ -457,7 +502,8 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol Auto-Generate Prompt </button> </div> - <textarea + <ModalTextarea + id={promptInputId} rows={6} value={column.prompt} onChange={(e) => @@ -466,8 +512,13 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol }) } placeholder="Write the analysis prompt — describe what Mike should extract from each document for this column…" - className="mt-2 w-full rounded-md border border-gray-200 px-3 py-2 text-sm text-gray-700 placeholder-gray-400 focus:border-gray-400 focus:outline-none bg-transparent resize-none leading-relaxed" + className="mt-2 min-h-36" /> + </> + )} + </> + ); + })()} </div> ))} @@ -481,43 +532,8 @@ export function AddColumnModal({ open, existingCount, onClose, onAdd, editingCol Add another column </button> )} - </div> - - {/* Footer */} - <div className="flex items-center justify-between border-t border-gray-100 px-6 py-4"> - <div> - {isEditing && onDelete && ( - <button - type="button" - onClick={onDelete} - className="rounded-lg px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-colors" - > - Delete - </button> - )} - </div> - <div className="flex items-center gap-2"> - <button - type="button" - onClick={handleClose} - className="rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-100 transition-colors" - > - Cancel - </button> - <button - type="submit" - disabled={columns.some( - (col) => !col.name.trim() || !col.prompt.trim(), - )} - className="rounded-lg bg-gray-900 px-5 py-2 text-sm font-medium text-white hover:bg-gray-700 disabled:opacity-40 transition-colors" - > - {isEditing ? "Save changes" : "Add columns"} - </button> - </div> - </div> - </form> - </div> - </div>, - document.body, + </div> + </form> + </Modal> ); } diff --git a/frontend/src/app/components/tabular/NewTRModal.tsx b/frontend/src/app/components/tabular/NewTRModal.tsx new file mode 100644 index 0000000..0c690d2 --- /dev/null +++ b/frontend/src/app/components/tabular/NewTRModal.tsx @@ -0,0 +1,465 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { Loader2, Upload } from "lucide-react"; +import type { Document, Project, Workflow } from "../shared/types"; +import { + getProject, + listProjects, + listStandaloneDocuments, + listWorkflows, + uploadProjectDocument, + uploadStandaloneDocument, +} from "@/app/lib/mikeApi"; +import { FileDirectory } from "../shared/FileDirectory"; +import { Modal } from "../modals/Modal"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; +import { ModalSelect } from "../modals/ModalSelect"; +import { ModalTextInput } from "../modals/ModalTextInput"; + +const isDev = process.env.NODE_ENV !== "production"; +const devLog = (...args: Parameters<typeof console.log>) => { + if (isDev) console.log(...args); +}; + +interface Props { + open: boolean; + onClose: () => void; + onAdd: ( + title: string, + projectId?: string, + documentIds?: string[], + columnsConfig?: Workflow["columns_config"], + ) => void; + projects?: Project[]; + /** When provided, skip the project/directory picker and show only these docs */ + projectDocs?: Document[]; + projectName?: string; + projectCmNumber?: string | null; +} + +export function NewTRModal({ + open, + onClose, + onAdd, + projects = [], + projectDocs: fixedProjectDocs, + projectName, + projectCmNumber, +}: Props) { + const isProjectMode = fixedProjectDocs !== undefined; + const [step, setStep] = useState<"details" | "documents">("details"); + const [title, setTitle] = useState(""); + const [underProject, setUnderProject] = useState(false); + const [selectedProjectId, setSelectedProjectId] = useState(""); + + // Project-scoped docs (when underProject is true and no fixedProjectDocs) + const [projectDocs, setProjectDocs] = useState<Document[]>([]); + const [loadingDocs, setLoadingDocs] = useState(false); + + // Full directory (when underProject is false) + const [standaloneDocs, setStandaloneDocs] = useState<Document[]>([]); + const [directoryProjects, setDirectoryProjects] = useState<Project[]>( + [], + ); + const [loadingDirectory, setLoadingDirectory] = useState(false); + + const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>( + new Set(), + ); + const [uploading, setUploading] = useState(false); + const fileInputRef = useRef<HTMLInputElement>(null); + + // Workflow templates + const [workflows, setWorkflows] = useState<Workflow[]>([]); + const [loadingWorkflows, setLoadingWorkflows] = useState(false); + const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | null>( + null, + ); + const formId = "new-tabular-review-modal-form"; + + useEffect(() => { + if (!open) return; + + setLoadingWorkflows(true); + listWorkflows("tabular") + .then((workflows) => { + devLog("[workflows/ui:tabular-review-modal] loaded", { + workflowCount: workflows.length, + systemCount: workflows.filter((workflow) => workflow.is_system) + .length, + sample: workflows.slice(0, 5).map((workflow) => ({ + id: workflow.id, + title: workflow.metadata.title, + type: workflow.metadata.type, + user_id: workflow.user_id, + is_system: workflow.is_system, + is_owner: workflow.is_owner, + })), + }); + setWorkflows(workflows); + }) + .catch((error) => { + devLog( + "[workflows/ui:tabular-review-modal] failed", + error, + ); + setWorkflows([]); + }) + .finally(() => setLoadingWorkflows(false)); + + if (isProjectMode) { + setSelectedDocIds( + new Set((fixedProjectDocs ?? []).map((d) => d.id)), + ); + return; + } + + setLoadingDirectory(true); + // /projects only returns counts, not the documents array — fetch + // each project in parallel so FileDirectory can render the docs + // when the user expands a folder. + Promise.all([listStandaloneDocuments(), listProjects()]) + .then(async ([docs, projs]) => { + setStandaloneDocs( + [...docs].sort((a, b) => + (b.created_at ?? "").localeCompare(a.created_at ?? ""), + ), + ); + const fullProjects = await Promise.all( + projs.map((p) => getProject(p.id)), + ); + setDirectoryProjects(fullProjects); + }) + .catch(() => { + setStandaloneDocs([]); + setDirectoryProjects([]); + }) + .finally(() => setLoadingDirectory(false)); + }, [open]); // eslint-disable-line react-hooks/exhaustive-deps + + if (!open) return null; + + function handleClose() { + setStep("details"); + setTitle(""); + setUnderProject(false); + setSelectedProjectId(""); + setProjectDocs([]); + setStandaloneDocs([]); + setDirectoryProjects([]); + setSelectedDocIds(new Set()); + setSelectedWorkflowId(null); + onClose(); + } + + function submitterValue(e: React.FormEvent<HTMLFormElement>) { + return ( + (e.nativeEvent as SubmitEvent).submitter as + | HTMLButtonElement + | null + )?.value; + } + + function handleSubmit(e: React.FormEvent<HTMLFormElement>) { + e.preventDefault(); + if (!title.trim()) return; + if (underProject && !selectedProjectId) return; + if (step === "details" || submitterValue(e) !== "create-review") { + setStep("documents"); + return; + } + const selectedWorkflow = workflows.find( + (w) => w.id === selectedWorkflowId, + ); + onAdd( + title.trim(), + underProject ? selectedProjectId : undefined, + selectedDocIds.size > 0 ? [...selectedDocIds] : undefined, + selectedWorkflow?.columns_config ?? undefined, + ); + handleClose(); + } + + async function handleSelectProject(projectId: string) { + setSelectedProjectId(projectId); + setProjectDocs([]); + setSelectedDocIds(new Set()); + setLoadingDocs(true); + try { + const proj = await getProject(projectId); + const docs = (proj.documents ?? []).filter( + (d) => d.status === "ready", + ); + setProjectDocs(docs); + setSelectedDocIds(new Set(docs.map((d) => d.id))); + } finally { + setLoadingDocs(false); + } + } + + async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) { + const files = Array.from(e.target.files ?? []); + if (!files.length) return; + setUploading(true); + try { + const uploaded = await Promise.all( + files.map((f) => + underProject && selectedProjectId + ? uploadProjectDocument(selectedProjectId, f) + : uploadStandaloneDocument(f), + ), + ); + if (underProject && selectedProjectId) { + setProjectDocs((prev) => [...uploaded, ...prev]); + } else { + setStandaloneDocs((prev) => [...uploaded, ...prev]); + } + uploaded.forEach((d) => + setSelectedDocIds((prev) => new Set([...prev, d.id])), + ); + } catch (err) { + console.error("Upload failed:", err); + } finally { + setUploading(false); + if (fileInputRef.current) fileInputRef.current.value = ""; + } + } + + const workflowOptions = [ + { + value: "", + label: loadingWorkflows + ? "Loading templates..." + : "No template - start from scratch", + }, + ...workflows.map((workflow) => ({ + value: workflow.id, + label: workflow.metadata.title, + })), + ]; + const projectOptions = projects.length + ? projects.map((project) => ({ + value: project.id, + label: + project.name + + (project.cm_number ? ` (#${project.cm_number})` : ""), + })) + : [{ value: "", label: "No projects found" }]; + + // What to show in the directory depends on mode and toggle state + const directoryStandalone = isProjectMode + ? (fixedProjectDocs ?? []) + : underProject + ? [] + : standaloneDocs; + const directoryFolders = isProjectMode + ? [] + : underProject + ? [] + : directoryProjects; + const flatProjectDocs: Document[] = + !isProjectMode && underProject ? projectDocs : []; + const directoryLoading = isProjectMode + ? false + : underProject + ? loadingDocs + : loadingDirectory; + const showDirectory = isProjectMode || !underProject || !!selectedProjectId; + const breadcrumbs = + isProjectMode && projectName + ? [ + "Projects", + `${projectName}${projectCmNumber ? ` (#${projectCmNumber})` : ""}`, + "New Tabular Review", + ] + : ["Tabular Reviews", "New Tabular Review"]; + + return ( + <Modal + open={open} + onClose={handleClose} + breadcrumbs={[ + ...breadcrumbs, + step === "details" ? "Details" : "Add Documents", + ]} + secondaryAction={ + step === "documents" + ? { + label: uploading ? "Uploading..." : "Upload", + icon: uploading ? ( + <Loader2 className="h-3.5 w-3.5 animate-spin" /> + ) : ( + <Upload className="h-3.5 w-3.5" /> + ), + onClick: () => fileInputRef.current?.click(), + disabled: uploading, + } + : undefined + } + cancelAction={ + step === "documents" + ? { + label: "Back", + onClick: () => setStep("details"), + disabled: uploading, + } + : undefined + } + primaryAction={ + step === "details" + ? { + label: "Next", + type: "button", + onClick: (event) => { + event.preventDefault(); + setStep("documents"); + }, + disabled: + !title.trim() || + (underProject && !selectedProjectId), + } + : { + label: "Create", + type: "submit", + form: formId, + name: "modalAction", + value: "create-review", + disabled: + !title.trim() || + (underProject && !selectedProjectId), + } + } + > + <input + ref={fileInputRef} + type="file" + accept=".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt" + multiple + className="hidden" + onChange={handleUpload} + /> + <form + id={formId} + onSubmit={handleSubmit} + className="flex flex-col min-h-0 flex-1" + > + {step === "details" ? ( + <div className="space-y-6"> + <div> + <ModalFieldLabel htmlFor="new-tr-title"> + Review name + </ModalFieldLabel> + <ModalTextInput + id="new-tr-title" + type="text" + value={title} + onChange={(e) => setTitle(e.target.value)} + placeholder="Review name" + variant="minimal" + className="placeholder:text-gray-400" + autoFocus + /> + </div> + + {/* Workflow template */} + <div> + <ModalFieldLabel as="p"> + Workflow template + </ModalFieldLabel> + <ModalSelect + id="new-tr-workflow-template" + value={selectedWorkflowId ?? ""} + options={workflowOptions} + onChange={(value) => + setSelectedWorkflowId(value || null) + } + disabled={loadingWorkflows} + /> + </div> + + {/* Create under a project toggle */} + {!isProjectMode && ( + <div className="space-y-3"> + <ModalFieldLabel as="p"> + Project + </ModalFieldLabel> + <button + type="button" + onClick={() => { + const next = !underProject; + setUnderProject(next); + if (!next) { + setSelectedProjectId(""); + setProjectDocs([]); + setSelectedDocIds(new Set()); + } + }} + className="flex w-fit items-center gap-2.5" + > + <span + className={`relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200 ${underProject ? "bg-gray-900" : "bg-gray-100"}`} + > + <span + className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${underProject ? "translate-x-4" : "translate-x-0"}`} + /> + </span> + <span className="text-sm text-gray-600"> + Create under a project + </span> + </button> + + {underProject && ( + <ModalSelect + id="new-tr-project" + value={selectedProjectId} + options={projectOptions} + onChange={(value) => { + if (value) { + void handleSelectProject(value); + } + }} + placeholder="Select project..." + disabled={projects.length === 0} + /> + )} + </div> + )} + </div> + ) : ( + <div className="flex min-h-0 flex-1 flex-col"> + {showDirectory && ( + <FileDirectory + standaloneDocs={ + isProjectMode + ? directoryStandalone + : underProject + ? flatProjectDocs + : directoryStandalone + } + directoryProjects={ + isProjectMode + ? [] + : underProject + ? [] + : directoryFolders + } + loading={directoryLoading} + selectedIds={selectedDocIds} + onChange={setSelectedDocIds} + emptyMessage={ + isProjectMode || underProject + ? "No ready documents in this project" + : "No documents yet" + } + searchable + searchAutoFocus + showProjectTabs={!isProjectMode && !underProject} + /> + )} + </div> + )} + </form> + </Modal> + ); +} diff --git a/frontend/src/app/components/tabular/TRChatPanel.tsx b/frontend/src/app/components/tabular/TRChatPanel.tsx index f0eb612..be9af54 100644 --- a/frontend/src/app/components/tabular/TRChatPanel.tsx +++ b/frontend/src/app/components/tabular/TRChatPanel.tsx @@ -13,7 +13,7 @@ import { ChevronLeft, Trash2, } from "lucide-react"; -import { MikeIcon } from "@/components/chat/mike-icon"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; import { streamTabularChat, getTabularChats, @@ -27,14 +27,14 @@ import type { AssistantEvent, ColumnConfig, Document } from "../shared/types"; import { ModelToggle } from "../assistant/ModelToggle"; import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; import { PreResponseWrapper } from "../assistant/PreResponseWrapper"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { getModelProvider, isModelAvailable, type ModelProvider, } from "@/app/lib/modelAvailability"; import type { ApiKeyState } from "@/app/lib/mikeApi"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; // --------------------------------------------------------------------------- // Types diff --git a/frontend/src/app/components/tabular/TREditColumnMenu.tsx b/frontend/src/app/components/tabular/TREditColumnMenu.tsx index efe2da0..0edb226 100644 --- a/frontend/src/app/components/tabular/TREditColumnMenu.tsx +++ b/frontend/src/app/components/tabular/TREditColumnMenu.tsx @@ -1,7 +1,8 @@ "use client"; -import { useEffect, useState } from "react"; -import { ChevronDown, Loader2, MoreHorizontal, Plus, Trash2, X } from "lucide-react"; +import { useEffect, useId, useRef, useState } from "react"; +import { createPortal } from "react-dom"; +import { ChevronDown, Loader2, MoreHorizontal, Plus, X } from "lucide-react"; import type { ColumnConfig, ColumnFormat } from "../shared/types"; import { generateTabularColumnPrompt } from "@/app/lib/mikeApi"; import { FORMAT_OPTIONS, formatLabel, formatIcon } from "./columnFormat"; @@ -12,10 +13,17 @@ import { DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; +} from "@/app/components/ui/dropdown-menu"; +import { PillButton } from "@/app/components/ui/pill-button"; + +// Liquid-glass field styling shared by the menu's inputs/controls, matching the +// modal's glass treatment (translucent white over the light-gray panel). +const GLASS_FIELD = + "border border-white/70 bg-white/55 shadow-[0_3px_9px_rgba(15,23,42,0.052),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl"; export interface TREditColumnMenuProps { column: ColumnConfig; + closeSignal?: number; disabled?: boolean; onSave: (column: ColumnConfig) => void | Promise<void>; onDelete: (columnIndex: number) => void | Promise<void>; @@ -23,11 +31,13 @@ export interface TREditColumnMenuProps { export function TREditColumnMenu({ column, + closeSignal, disabled, onSave, onDelete, }: TREditColumnMenuProps) { const [open, setOpen] = useState(false); + const menuId = useId(); const [name, setName] = useState(column.name); const [prompt, setPrompt] = useState(column.prompt); const [format, setFormat] = useState<ColumnFormat>(column.format ?? "text"); @@ -36,6 +46,58 @@ export function TREditColumnMenu({ const [saving, setSaving] = useState(false); const [deleting, setDeleting] = useState(false); const [generating, setGenerating] = useState(false); + const buttonRef = useRef<HTMLButtonElement>(null); + const panelRef = useRef<HTMLDivElement>(null); + // Fixed-position coords for the portaled menu. The menu is rendered into + // document.body so it isn't clipped by the header's overflow-hidden (which + // exists for horizontal scroll-sync). We size/position it to span the column + // header cell (with a min width for usability) and keep it pinned as the + // table scrolls or the window resizes. + const [menuPos, setMenuPos] = useState<{ + top: number; + left: number; + width: number; + } | null>(null); + + useEffect(() => { + if (!open) { + setMenuPos(null); + return; + } + const update = () => { + const rect = buttonRef.current?.getBoundingClientRect(); + if (!rect) return; + // Span this column's header cell so the panel's left/right edges line + // up with the column. Falls back to the trigger button when no column + // ancestor is found. A min width keeps the form usable on narrow + // columns (there it just extends leftward from the column's right + // edge). Positioning via left (same coordinate space as + // getBoundingClientRect) avoids scrollbar/innerWidth offsets. + const colRect = buttonRef.current + ?.closest("[data-tr-col-header]") + ?.getBoundingClientRect(); + const rightEdge = colRect?.right ?? rect.right; + const width = Math.max(colRect?.width ?? 288, 288); // 288 = w-72 + setMenuPos({ + top: rect.bottom + 6, // mt-1.5 + left: Math.max(8, rightEdge - width), + width, + }); + }; + update(); + window.addEventListener("scroll", update, true); + window.addEventListener("resize", update); + return () => { + window.removeEventListener("scroll", update, true); + window.removeEventListener("resize", update); + }; + }, [open]); + + useEffect(() => { + if (closeSignal === undefined) return; + const timeout = window.setTimeout(() => setOpen(false), 0); + return () => window.clearTimeout(timeout); + }, [closeSignal]); useEffect(() => { if (!open) { @@ -47,6 +109,45 @@ export function TREditColumnMenu({ } }, [column.name, column.prompt, column.format, column.tags, open]); + // Only one edit-column menu should be open at a time. Broadcast when this + // one opens and close ourselves when another one broadcasts. + useEffect(() => { + if (open) { + window.dispatchEvent( + new CustomEvent("tr-edit-column-menu-open", { detail: menuId }), + ); + } + }, [open, menuId]); + + useEffect(() => { + const onOtherOpen = (e: Event) => { + if ((e as CustomEvent<string>).detail !== menuId) setOpen(false); + }; + window.addEventListener("tr-edit-column-menu-open", onOtherOpen); + return () => + window.removeEventListener("tr-edit-column-menu-open", onOtherOpen); + }, [menuId]); + + // Close on click outside the panel. Ignore the trigger (it toggles) and any + // Radix popper (e.g. the Format dropdown, which portals outside the panel). + useEffect(() => { + if (!open) return; + const onPointerDown = (e: MouseEvent) => { + const target = e.target as Node; + if ( + panelRef.current?.contains(target) || + buttonRef.current?.contains(target) || + (target instanceof Element && + target.closest("[data-radix-popper-content-wrapper]")) + ) { + return; + } + setOpen(false); + }; + document.addEventListener("mousedown", onPointerDown); + return () => document.removeEventListener("mousedown", onPointerDown); + }, [open]); + function commitTag() { const tag = tagInput.trim(); if (!tag) { @@ -112,6 +213,7 @@ export function TREditColumnMenu({ return ( <div className="relative shrink-0" onClick={(e) => e.stopPropagation()}> <button + ref={buttonRef} onClick={(e) => { e.stopPropagation(); if (disabled) return; @@ -127,19 +229,28 @@ export function TREditColumnMenu({ <MoreHorizontal className="h-4 w-4" /> </button> - {open && ( - <div - className="absolute right-0 top-full z-20 mt-1.5 w-72 rounded-2xl border border-white/70 bg-white p-3 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl" - onClick={(e) => e.stopPropagation()} - > + {open && + menuPos && + createPortal( + <div + ref={panelRef} + className="fixed z-[40] rounded-3xl border border-white/70 bg-gray-50/95 p-3 shadow-[0_14px_40px_rgba(15,23,42,0.071),0_5px_14px_rgba(15,23,42,0.047)] backdrop-blur-3xl" + style={{ + top: menuPos.top, + left: menuPos.left, + width: menuPos.width, + }} + onClick={(e) => e.stopPropagation()} + > <div className="flex items-center justify-between mb-3"> - <p className="text-sm font-medium text-gray-800"> + <p className="font-serif text-lg font-medium text-gray-900"> Edit Column </p> <button type="button" onClick={() => setOpen(false)} - className="rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors" + aria-label="Close" + className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/70 bg-white/55 text-gray-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-1px_0_rgba(255,255,255,0.55),0_6px_18px_rgba(15,23,42,0.08)] backdrop-blur-xl transition-colors hover:bg-white/75 hover:text-gray-700" > <X className="h-3.5 w-3.5" /> </button> @@ -151,7 +262,7 @@ export function TREditColumnMenu({ type="text" value={name} onChange={(e) => setName(e.target.value)} - className="mt-1 w-full rounded-md border border-gray-200 px-2 py-1 text-gray-800 text-xs font-normal focus:border-gray-400 focus:outline-none" + className={`mt-1 w-full rounded-lg px-2 py-1 text-xs font-normal text-gray-800 transition-colors focus:bg-white/70 focus:outline-none ${GLASS_FIELD}`} /> {/* Format */} @@ -161,7 +272,9 @@ export function TREditColumnMenu({ </label> <DropdownMenu> <DropdownMenuTrigger asChild> - <button className="mt-1 flex w-full items-center justify-between rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 hover:border-gray-400 focus:outline-none"> + <button + className={`mt-1 flex w-full items-center justify-between rounded-lg px-2 py-1 text-xs text-gray-700 transition-colors hover:bg-white/75 focus:outline-none ${GLASS_FIELD}`} + > <span className="flex items-center gap-1.5"> {(() => { const Icon = formatIcon(format); @@ -176,6 +289,7 @@ export function TREditColumnMenu({ </DropdownMenuTrigger> <DropdownMenuContent align="start" + className="z-[50] border-white/70 bg-white/75 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl" style={{ width: "var(--radix-dropdown-menu-trigger-width)", }} @@ -206,7 +320,9 @@ export function TREditColumnMenu({ {/* Tag input */} {format === "tag" && ( <div className="mt-2"> - <div className="flex flex-wrap gap-1 rounded-md border border-gray-200 px-2 py-1 focus-within:border-gray-400 min-h-[28px]"> + <div + className={`flex min-h-[28px] flex-wrap gap-1 rounded-lg px-2 py-1 transition-colors focus-within:bg-white/70 ${GLASS_FIELD}`} + > {tags.map((tag, tagIdx) => ( <span key={tag} @@ -269,20 +385,18 @@ export function TREditColumnMenu({ rows={6} value={prompt} onChange={(e) => setPrompt(e.target.value)} - className="mt-2 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-normal text-gray-800 placeholder-gray-300 focus:border-gray-400 focus:outline-none resize-none leading-relaxed" + className={`mt-2 w-full resize-none rounded-lg px-3 py-2 text-xs font-normal leading-relaxed text-gray-800 placeholder-gray-300 transition-colors focus:bg-white/70 focus:outline-none ${GLASS_FIELD}`} /> </div> <div className="mt-3 flex items-center justify-between gap-2"> - <button - type="button" + <PillButton + tone="danger" onClick={handleDelete} disabled={deleting || saving} - className="inline-flex items-center gap-1.5 text-xs text-red-500 transition-colors hover:text-red-600 disabled:text-red-300" > - <Trash2 className="h-3.5 w-3.5" /> Delete - </button> + </PillButton> <button type="button" onClick={handleSave} @@ -298,8 +412,9 @@ export function TREditColumnMenu({ {saving ? "Saving…" : "Save"} </button> </div> - </div> - )} + </div>, + document.body, + )} </div> ); } diff --git a/frontend/src/app/components/tabular/TRSidePanel.tsx b/frontend/src/app/components/tabular/TRSidePanel.tsx index bb7ce3f..e6d6412 100644 --- a/frontend/src/app/components/tabular/TRSidePanel.tsx +++ b/frontend/src/app/components/tabular/TRSidePanel.tsx @@ -23,7 +23,7 @@ import { getPillClass } from "./pillUtils"; import { PdfView } from "../shared/views/PdfView"; import { SpreadsheetView } from "../shared/views/SpreadsheetView"; import { DocxView } from "../shared/views/DocxView"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; function isDocxDocument(d: { file_type?: string | null; diff --git a/frontend/src/app/components/tabular/TRTable.tsx b/frontend/src/app/components/tabular/TRTable.tsx index 8f82d79..6f528e8 100644 --- a/frontend/src/app/components/tabular/TRTable.tsx +++ b/frontend/src/app/components/tabular/TRTable.tsx @@ -1,6 +1,6 @@ "use client"; -import { forwardRef, useImperativeHandle, useRef } from "react"; +import { forwardRef, useImperativeHandle, useRef, useState } from "react"; import { Loader2, Plus, Table2, Upload } from "lucide-react"; import type { ColumnConfig, @@ -75,18 +75,31 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( const stickyCellBg = "bg-[#fafbfc]"; const scrollContainerRef = useRef<HTMLDivElement>(null); const headerRef = useRef<HTMLDivElement>(null); + const lastScrollLeftRef = useRef(0); + const [scrollCloseSignal, setScrollCloseSignal] = useState(0); function syncHeader() { if (headerRef.current && scrollContainerRef.current) { headerRef.current.scrollLeft = scrollContainerRef.current.scrollLeft; } } + + function handleRowsScroll() { + syncHeader(); + const container = scrollContainerRef.current; + if (!container) return; + + if (container.scrollLeft !== lastScrollLeftRef.current) { + lastScrollLeftRef.current = container.scrollLeft; + setScrollCloseSignal((signal) => signal + 1); + } + } + const sortedColumns = [...columns].sort((a, b) => a.index - b.index); const totalContentWidth = DOC_COL_W_PX + sortedColumns.length * DATA_COL_W_PX + 32; const skeletonContentWidth = DOC_COL_W_PX + SKELETON_COLS * DATA_COL_W_PX + 32; - useImperativeHandle(ref, () => ({ scrollToCell(colIdx: number, rowIdx: number) { const container = scrollContainerRef.current; @@ -269,12 +282,14 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( {columns.map((col) => ( <div key={col.index} + data-tr-col-header className={`${COL_W} border-b border-r border-gray-200 p-2 text-left text-xs font-medium text-gray-500 select-none`} > <div className="flex items-center justify-between gap-3"> <span className="truncate">{col.name}</span> <TREditColumnMenu column={col} + closeSignal={scrollCloseSignal} disabled={savingColumn || savingColumnsConfig} onSave={onUpdateColumn} onDelete={onDeleteColumn} @@ -298,7 +313,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( <div className="flex flex-1 flex-col overflow-auto min-h-0" ref={scrollContainerRef} - onScroll={syncHeader} + onScroll={handleRowsScroll} > <div className="relative min-h-0 flex-1"> {dragOverFiles && ( @@ -379,6 +394,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( <TabularCellComponent cell={cell} column={col} + closeSignal={scrollCloseSignal} onExpand={() => onExpand(cell)} onCitationClick={( page, diff --git a/frontend/src/app/components/tabular/TabularCell.tsx b/frontend/src/app/components/tabular/TabularCell.tsx index 39c329d..0b7e7ab 100644 --- a/frontend/src/app/components/tabular/TabularCell.tsx +++ b/frontend/src/app/components/tabular/TabularCell.tsx @@ -12,6 +12,7 @@ import { SkeletonLine } from "../shared/TablePrimitive"; interface Props { cell: TCell; column?: ColumnConfig; + closeSignal?: number; onExpand: () => void; onCitationClick?: (page: number, quote: string) => void; } @@ -158,12 +159,19 @@ function CellMarkdown({ export function TabularCell({ cell, column, + closeSignal, onExpand, onCitationClick, }: Props) { const [inlineExpanded, setInlineExpanded] = useState(false); const containerRef = useRef<HTMLDivElement>(null); + useEffect(() => { + if (closeSignal === undefined) return; + const timeout = window.setTimeout(() => setInlineExpanded(false), 0); + return () => window.clearTimeout(timeout); + }, [closeSignal]); + useEffect(() => { if (!inlineExpanded) return; function handleClickOutside(e: MouseEvent) { @@ -240,7 +248,7 @@ export function TabularCell({ {/* Inline expanded overlay — absolutely positioned so it overlays without disrupting table layout */} {inlineExpanded && ( - <div className="absolute left-0 top-0 z-50 w-full bg-white border border-gray-200 shadow-lg rounded-sm"> + <div className="absolute left-0 top-0 z-50 w-full rounded-xl bg-gray-50/95 shadow-[0_4px_12px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl"> <div className="relative p-2 pr-4 text-xs text-gray-800 leading-relaxed"> {cell.content.flag && ( <span diff --git a/frontend/src/app/components/tabular/TabularReviewDetailsModal.tsx b/frontend/src/app/components/tabular/TabularReviewDetailsModal.tsx new file mode 100644 index 0000000..b7c7377 --- /dev/null +++ b/frontend/src/app/components/tabular/TabularReviewDetailsModal.tsx @@ -0,0 +1,206 @@ +"use client"; + +import { useEffect, useMemo, useState } from "react"; +import { Modal } from "../modals/Modal"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; +import { ModalSelect } from "../modals/ModalSelect"; +import { ModalTextInput } from "../modals/ModalTextInput"; +import type { Project, TabularReview } from "../shared/types"; + +interface TabularReviewDetailsModalProps { + open: boolean; + review: TabularReview | null; + projects: Project[]; + canEdit: boolean; + lockProject?: boolean; + onClose: () => void; + onSave: (values: { + title: string; + projectId?: string | null; + }) => Promise<void>; +} + +export function TabularReviewDetailsModal({ + open, + review, + projects, + canEdit, + lockProject = false, + onClose, + onSave, +}: TabularReviewDetailsModalProps) { + const [titleDraft, setTitleDraft] = useState(""); + const [underProject, setUnderProject] = useState(false); + const [selectedProjectId, setSelectedProjectId] = useState(""); + const [saving, setSaving] = useState(false); + const [saved, setSaved] = useState(false); + const [error, setError] = useState<string | null>(null); + + useEffect(() => { + if (!open || !review) return; + setTitleDraft(review.title ?? ""); + setUnderProject(Boolean(review.project_id)); + setSelectedProjectId(review.project_id ?? ""); + setSaving(false); + setSaved(false); + setError(null); + }, [open, review]); + + const trimmedTitle = titleDraft.trim(); + const nextProjectId = underProject ? selectedProjectId : null; + const projectOptions = useMemo( + () => + projects.length + ? projects.map((project) => ({ + value: project.id, + label: + project.name + + (project.cm_number ? ` (#${project.cm_number})` : ""), + })) + : [{ value: "", label: "No projects found" }], + [projects], + ); + const hasChanges = useMemo(() => { + if (!review) return false; + return ( + trimmedTitle !== (review.title ?? "") || + nextProjectId !== (review.project_id ?? null) + ); + }, [nextProjectId, review, trimmedTitle]); + + if (!review) return null; + + async function handleSave() { + if ( + !canEdit || + saving || + !hasChanges || + !trimmedTitle || + (underProject && !selectedProjectId) + ) { + return; + } + setSaving(true); + setSaved(false); + setError(null); + try { + await onSave({ + title: trimmedTitle, + projectId: nextProjectId, + }); + setSaved(true); + } catch { + setError("Could not update tabular review details."); + } finally { + setSaving(false); + } + } + + return ( + <Modal + open={open} + onClose={onClose} + breadcrumbs={[ + "Tabular Reviews", + review.title || "Untitled Review", + "Details", + ]} + footerStatus={ + error ? ( + <span className="text-sm text-red-600">{error}</span> + ) : saved ? ( + <span className="text-sm text-gray-400">Updated</span> + ) : null + } + primaryAction={ + canEdit + ? { + label: saving ? "Saving..." : "Save changes", + onClick: () => void handleSave(), + disabled: + saving || + !hasChanges || + !trimmedTitle || + (underProject && !selectedProjectId), + } + : undefined + } + cancelAction={canEdit ? undefined : false} + > + <div className="space-y-6"> + <div> + <ModalFieldLabel htmlFor="tabular-review-details-title"> + Review name + </ModalFieldLabel> + <ModalTextInput + id="tabular-review-details-title" + type="text" + value={titleDraft} + onChange={(event) => { + setTitleDraft(event.target.value); + setSaved(false); + setError(null); + }} + placeholder="Review name" + variant="minimal" + className="placeholder:text-gray-400" + disabled={!canEdit || saving} + autoFocus + /> + </div> + + {!lockProject && ( + <div className="space-y-3"> + <ModalFieldLabel as="p">Project</ModalFieldLabel> + <button + type="button" + onClick={() => { + if (!canEdit || saving) return; + const next = !underProject; + setUnderProject(next); + if (!next) setSelectedProjectId(""); + setSaved(false); + setError(null); + }} + className="flex w-fit items-center gap-2.5" + > + <span + className={`relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200 ${ + underProject ? "bg-gray-900" : "bg-gray-100" + }`} + > + <span + className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${ + underProject + ? "translate-x-4" + : "translate-x-0" + }`} + /> + </span> + <span className="text-sm text-gray-600"> + Move under a project + </span> + </button> + + {underProject && ( + <ModalSelect + id="tabular-review-details-project" + value={selectedProjectId} + options={projectOptions} + onChange={(value) => { + setSelectedProjectId(value); + setSaved(false); + setError(null); + }} + placeholder="Select project..." + disabled={ + !canEdit || saving || projects.length === 0 + } + /> + )} + </div> + )} + </div> + </Modal> + ); +} diff --git a/frontend/src/app/components/tabular/TabularReviewView.tsx b/frontend/src/app/components/tabular/TabularReviewView.tsx index bcc7171..2b1565d 100644 --- a/frontend/src/app/components/tabular/TabularReviewView.tsx +++ b/frontend/src/app/components/tabular/TabularReviewView.tsx @@ -46,8 +46,8 @@ import { OwnerOnlyPopup } from "../popups/OwnerOnlyPopup"; import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; import { ConfirmPopup } from "../popups/ConfirmPopup"; import { HeaderActionsMenu } from "../shared/HeaderActionsMenu"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { getModelProvider, isModelAvailable, diff --git a/frontend/src/app/components/tabular/columnFormat.ts b/frontend/src/app/components/tabular/columnFormat.ts index bfa1daa..10dc4a0 100644 --- a/frontend/src/app/components/tabular/columnFormat.ts +++ b/frontend/src/app/components/tabular/columnFormat.ts @@ -2,16 +2,16 @@ import type { LucideIcon } from "lucide-react"; import { AlignLeft, List, Hash, DollarSign, ToggleLeft, Calendar, Tag, Percent, Banknote } from "lucide-react"; import type { ColumnFormat } from "../shared/types"; -export const FORMAT_OPTIONS: Array<{ value: ColumnFormat; label: string; icon: LucideIcon }> = [ - { value: "text", label: "Free Text", icon: AlignLeft }, - { value: "bulleted_list", label: "Bulleted list", icon: List }, - { value: "number", label: "Number", icon: Hash }, - { value: "percentage", label: "Percentage", icon: Percent }, - { value: "monetary_amount", label: "Monetary Amount", icon: Banknote }, - { value: "currency", label: "Currency", icon: DollarSign }, - { value: "yes_no", label: "Yes / No", icon: ToggleLeft }, - { value: "date", label: "Date", icon: Calendar }, - { value: "tag", label: "Tags", icon: Tag }, +export const FORMAT_OPTIONS: Array<{ value: ColumnFormat; label: string; icon: LucideIcon; iconClassName: string }> = [ + { value: "text", label: "Free Text", icon: AlignLeft, iconClassName: "text-sky-500" }, + { value: "bulleted_list", label: "Bulleted list", icon: List, iconClassName: "text-indigo-500" }, + { value: "number", label: "Number", icon: Hash, iconClassName: "text-violet-500" }, + { value: "percentage", label: "Percentage", icon: Percent, iconClassName: "text-fuchsia-500" }, + { value: "monetary_amount", label: "Monetary Amount", icon: Banknote, iconClassName: "text-emerald-600" }, + { value: "currency", label: "Currency", icon: DollarSign, iconClassName: "text-teal-600" }, + { value: "yes_no", label: "Yes / No", icon: ToggleLeft, iconClassName: "text-amber-500" }, + { value: "date", label: "Date", icon: Calendar, iconClassName: "text-rose-500" }, + { value: "tag", label: "Tags", icon: Tag, iconClassName: "text-orange-500" }, ]; export function formatLabel(format: ColumnFormat): string { @@ -21,3 +21,7 @@ export function formatLabel(format: ColumnFormat): string { export function formatIcon(format: ColumnFormat): LucideIcon { return FORMAT_OPTIONS.find((o) => o.value === format)?.icon ?? AlignLeft; } + +export function formatIconClassName(format: ColumnFormat): string { + return FORMAT_OPTIONS.find((o) => o.value === format)?.iconClassName ?? "text-sky-500"; +} diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/app/components/ui/button.tsx similarity index 98% rename from frontend/src/components/ui/button.tsx rename to frontend/src/app/components/ui/button.tsx index 21409a0..1099220 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/app/components/ui/button.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "@/lib/utils" +import { cn } from "@/app/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", diff --git a/frontend/src/components/ui/cite-button.tsx b/frontend/src/app/components/ui/cite-button.tsx similarity index 100% rename from frontend/src/components/ui/cite-button.tsx rename to frontend/src/app/components/ui/cite-button.tsx diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/app/components/ui/dropdown-menu.tsx similarity index 99% rename from frontend/src/components/ui/dropdown-menu.tsx rename to frontend/src/app/components/ui/dropdown-menu.tsx index 5176e9e..355db3b 100644 --- a/frontend/src/components/ui/dropdown-menu.tsx +++ b/frontend/src/app/components/ui/dropdown-menu.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; import { CheckIcon, ChevronRightIcon } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; function DropdownMenu({ ...props diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/app/components/ui/input.tsx similarity index 96% rename from frontend/src/components/ui/input.tsx rename to frontend/src/app/components/ui/input.tsx index 8916905..817a5b3 100644 --- a/frontend/src/components/ui/input.tsx +++ b/frontend/src/app/components/ui/input.tsx @@ -1,6 +1,6 @@ import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "@/app/lib/utils" function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( diff --git a/frontend/src/components/ui/pill-button.tsx b/frontend/src/app/components/ui/pill-button.tsx similarity index 95% rename from frontend/src/components/ui/pill-button.tsx rename to frontend/src/app/components/ui/pill-button.tsx index 89c4bdf..88b477d 100644 --- a/frontend/src/components/ui/pill-button.tsx +++ b/frontend/src/app/components/ui/pill-button.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; -import { cn } from "@/lib/utils"; +import { cn } from "@/app/lib/utils"; type PillButtonTone = "black" | "white" | "blue" | "danger"; type PillButtonSize = "sm" | "normal"; @@ -15,7 +15,7 @@ type PillButtonProps = React.ComponentProps<"button"> & { const toneClasses: Record<PillButtonTone, string> = { black: "border-gray-700/40 bg-gray-950/88 text-white shadow-[0_3px_9px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(255,255,255,0.12),inset_0_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl hover:bg-gray-900/90 disabled:hover:bg-gray-950/88", - white: "border-transparent bg-transparent text-gray-700 shadow-[0_1px_3px_rgba(0,0,0,0.22),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(255,255,255,0.7)] hover:bg-gray-100 disabled:hover:bg-transparent", + white: "border-transparent bg-transparent text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.10),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(255,255,255,0.7)] hover:bg-gray-100 disabled:hover:bg-transparent", blue: "border-blue-500/35 bg-blue-600/90 text-white shadow-[0_3px_9px_rgba(37,99,235,0.10),inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(255,255,255,0.16),inset_0_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl hover:bg-blue-600 disabled:hover:bg-blue-600/90", danger: "border-red-700/35 bg-red-600/90 text-white shadow-[0_3px_9px_rgba(127,29,29,0.10),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(255,255,255,0.14),inset_0_-4px_9px_rgba(127,29,29,0.18)] backdrop-blur-xl hover:bg-red-600 disabled:hover:bg-red-600/90", }; diff --git a/frontend/src/app/components/ui/search-bar.tsx b/frontend/src/app/components/ui/search-bar.tsx new file mode 100644 index 0000000..94d7454 --- /dev/null +++ b/frontend/src/app/components/ui/search-bar.tsx @@ -0,0 +1,102 @@ +"use client"; + +import * as React from "react"; +import { Search, X } from "lucide-react"; +import { cn } from "@/app/lib/utils"; + +type SearchBarSize = "sm" | "normal"; + +type SearchBarProps = Omit< + React.InputHTMLAttributes<HTMLInputElement>, + "onChange" | "size" | "type" | "value" +> & { + value: string; + onValueChange: (value: string) => void; + size?: SearchBarSize; + clearLabel?: string; + wrapperClassName?: string; + inputClassName?: string; +}; + +const sizeClasses: Record< + SearchBarSize, + { wrapper: string; input: string; icon: string; clear: string } +> = { + sm: { + wrapper: "h-8 gap-1.5 rounded-lg px-2.5", + input: "text-xs", + icon: "h-3 w-3", + clear: "h-5 w-5", + }, + normal: { + wrapper: "h-9 gap-2 rounded-xl px-3", + input: "text-sm", + icon: "h-3.5 w-3.5", + clear: "h-6 w-6", + }, +}; + +export const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>( + ( + { + value, + onValueChange, + size = "normal", + clearLabel = "Clear search", + placeholder = "Search...", + className, + wrapperClassName, + inputClassName, + ...props + }, + ref, + ) => { + const classes = sizeClasses[size]; + + return ( + <div + className={cn( + "flex items-center border border-white/70 bg-white/55 text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl transition-colors focus-within:border-white/90 focus-within:bg-white/70", + classes.wrapper, + className, + wrapperClassName, + )} + > + <Search + className={cn( + "shrink-0 text-gray-400", + classes.icon, + )} + /> + <input + ref={ref} + type="search" + value={value} + placeholder={placeholder} + onChange={(event) => onValueChange(event.target.value)} + className={cn( + "min-w-0 flex-1 bg-transparent text-gray-700 outline-none placeholder:text-gray-400 [&::-webkit-search-cancel-button]:hidden", + classes.input, + inputClassName, + )} + {...props} + /> + {value ? ( + <button + type="button" + onClick={() => onValueChange("")} + className={cn( + "flex shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-white/70 hover:text-gray-600", + classes.clear, + )} + aria-label={clearLabel} + > + <X className={classes.icon} /> + </button> + ) : null} + </div> + ); + }, +); + +SearchBar.displayName = "SearchBar"; diff --git a/frontend/src/app/components/workflows/NewWorkflowModal.tsx b/frontend/src/app/components/workflows/NewWorkflowModal.tsx index 17c0e82..8f7a955 100644 --- a/frontend/src/app/components/workflows/NewWorkflowModal.tsx +++ b/frontend/src/app/components/workflows/NewWorkflowModal.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useEffect, useRef, useState } from "react"; -import { MessageSquare, Table2 } from "lucide-react"; +import { MessageSquare, Table2, Upload } from "lucide-react"; import { createWorkflow, updateWorkflow } from "@/app/lib/mikeApi"; import type { Workflow } from "../shared/types"; import { PRACTICE_OPTIONS } from "./practices"; @@ -188,9 +188,15 @@ export function NewWorkflowModal({ >(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const [importedSkillMd, setImportedSkillMd] = useState(""); + const [importedSkillName, setImportedSkillName] = useState<string | null>( + null, + ); + const [markdownImportError, setMarkdownImportError] = useState(""); const customLanguageInputRef = useRef<HTMLInputElement>(null); const customInputRef = useRef<HTMLInputElement>(null); const customJurisdictionInputRef = useRef<HTMLInputElement>(null); + const markdownInputRef = useRef<HTMLInputElement>(null); const isEditing = !!editWorkflow; const isOtherLanguage = language === "Other"; @@ -237,13 +243,20 @@ export function NewWorkflowModal({ setCustomJurisdiction(""); setOpenDropdown(null); setError(""); + setImportedSkillMd(""); + setImportedSkillName(null); + setMarkdownImportError(""); + if (markdownInputRef.current) { + markdownInputRef.current.value = ""; + } }, []); useEffect(() => { if (open && editWorkflow) { - setTitle(editWorkflow.title); - setType(editWorkflow.type); - const savedLanguage = editWorkflow.language ?? DEFAULT_LANGUAGE; + setTitle(editWorkflow.metadata.title); + setType(editWorkflow.metadata.type); + const savedLanguage = + editWorkflow.metadata.language ?? DEFAULT_LANGUAGE; const isKnownLanguage = (LANGUAGE_OPTIONS as readonly string[]).includes(savedLanguage); if (!isKnownLanguage && savedLanguage) { setLanguage("Other"); @@ -252,8 +265,8 @@ export function NewWorkflowModal({ setLanguage(savedLanguage); setCustomLanguage(""); } - const savedJurisdiction = editWorkflow.jurisdictions?.length - ? editWorkflow.jurisdictions.join(", ") + const savedJurisdiction = editWorkflow.metadata.jurisdictions?.length + ? editWorkflow.metadata.jurisdictions.join(", ") : DEFAULT_JURISDICTION; const isKnownJurisdiction = (JURISDICTION_OPTIONS as readonly string[]).includes(savedJurisdiction); @@ -282,7 +295,7 @@ export function NewWorkflowModal({ setJurisdictionRegion(""); setCustomJurisdiction(""); } - const saved = editWorkflow.practice ?? DEFAULT_PRACTICE; + const saved = editWorkflow.metadata.practice ?? DEFAULT_PRACTICE; const isKnown = (PRACTICE_OPTIONS as readonly string[]).includes(saved); if (!isKnown && saved) { setPractice("Other"); @@ -325,24 +338,32 @@ export function NewWorkflowModal({ try { if (isEditing && editWorkflow) { const updated = await updateWorkflow(editWorkflow.id, { - title: title.trim(), - language: effectiveLanguage || null, - practice: effectivePractice, - jurisdictions: effectiveJurisdictions.length - ? effectiveJurisdictions - : null, + metadata: { + title: title.trim(), + language: effectiveLanguage || null, + practice: effectivePractice, + jurisdictions: effectiveJurisdictions.length + ? effectiveJurisdictions + : null, + }, }); onUpdated?.(updated); } else { - const workflow = await createWorkflow({ - title: title.trim(), - type, - language: effectiveLanguage || null, - practice: effectivePractice, - jurisdictions: effectiveJurisdictions.length - ? effectiveJurisdictions - : null, - }); + const createPayload: Parameters<typeof createWorkflow>[0] = { + metadata: { + title: title.trim(), + type, + language: effectiveLanguage || null, + practice: effectivePractice, + jurisdictions: effectiveJurisdictions.length + ? effectiveJurisdictions + : null, + }, + }; + if (type === "assistant" && importedSkillMd) { + createPayload.skill_md = importedSkillMd; + } + const workflow = await createWorkflow(createPayload); onCreated(workflow); } resetForm(); @@ -359,6 +380,37 @@ export function NewWorkflowModal({ onClose(); } + async function handleMarkdownImport( + e: React.ChangeEvent<HTMLInputElement>, + ) { + const file = e.target.files?.[0]; + setMarkdownImportError(""); + if (!file) return; + + const normalizedName = file.name.toLowerCase(); + if ( + !normalizedName.endsWith(".md") && + !normalizedName.endsWith(".markdown") + ) { + setImportedSkillMd(""); + setImportedSkillName(null); + setMarkdownImportError("Choose a .md or .markdown file."); + e.target.value = ""; + return; + } + + try { + const text = await file.text(); + setImportedSkillMd(text); + setImportedSkillName(file.name); + } catch { + setImportedSkillMd(""); + setImportedSkillName(null); + setMarkdownImportError("Could not read that markdown file."); + e.target.value = ""; + } + } + return ( <Modal open={open} @@ -379,6 +431,16 @@ export function NewWorkflowModal({ form: formId, disabled: !title.trim() || loading, }} + secondaryAction={ + !isEditing && type === "assistant" + ? { + label: importedSkillName ?? "Upload markdown", + icon: <Upload className="h-3.5 w-3.5" />, + onClick: () => markdownInputRef.current?.click(), + disabled: loading, + } + : undefined + } > <form id={formId} @@ -573,8 +635,19 @@ export function NewWorkflowModal({ )} </div> - {error && <p className="text-sm text-red-500">{error}</p>} + {(error || markdownImportError) && ( + <p className="text-sm text-red-500"> + {error || markdownImportError} + </p> + )} </div> + <input + ref={markdownInputRef} + type="file" + className="hidden" + accept=".md,.markdown,text/markdown,text/x-markdown,text/plain" + onChange={handleMarkdownImport} + /> </form> </Modal> ); diff --git a/frontend/src/app/components/workflows/OpenSourceWorkflowModal.tsx b/frontend/src/app/components/workflows/OpenSourceWorkflowModal.tsx new file mode 100644 index 0000000..bfd2ccf --- /dev/null +++ b/frontend/src/app/components/workflows/OpenSourceWorkflowModal.tsx @@ -0,0 +1,336 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { Check, EyeOff, User } from "lucide-react"; +import { openSourceWorkflow } from "@/app/lib/mikeApi"; +import type { WorkflowOpenSourceSubmission } from "@/app/components/shared/types"; +import { Modal } from "@/app/components/modals/Modal"; +import { ModalFieldLabel } from "@/app/components/modals/ModalFieldLabel"; +import { ModalSegmentedToggle } from "@/app/components/modals/ModalSegmentedToggle"; +import { ModalTextInput } from "@/app/components/modals/ModalTextInput"; + +type OpenSourceContributorMode = "named" | "anonymous"; +type OpenSourceStatus = "idle" | "loading" | "complete"; + +const WORKFLOWS_REPO_URL = + "https://github.com/Open-Legal-Products/mike-workflows"; + +interface OpenSourceWorkflowModalProps { + open: boolean; + onClose: () => void; + workflowId: string; + defaultContributorName: string; + pending: boolean; + onSubmitted: (submission: WorkflowOpenSourceSubmission) => void; +} + +export function OpenSourceWorkflowModal({ + open, + onClose, + workflowId, + defaultContributorName, + pending, + onSubmitted, +}: OpenSourceWorkflowModalProps) { + const [status, setStatus] = useState<OpenSourceStatus>("idle"); + const [error, setError] = useState<string | null>(null); + const [contributorMode, setContributorMode] = + useState<OpenSourceContributorMode>("anonymous"); + const [contributorName, setContributorName] = useState(""); + const [contributorOrganisation, setContributorOrganisation] = useState(""); + const [contributorRole, setContributorRole] = useState(""); + const [contributorLinkedin, setContributorLinkedin] = useState(""); + const [disclosureConsent, setDisclosureConsent] = useState(false); + const [closeCountdown, setCloseCountdown] = useState(3); + const onCloseRef = useRef(onClose); + + useEffect(() => { + onCloseRef.current = onClose; + }, [onClose]); + + function resetModalState() { + setStatus("idle"); + setError(null); + setContributorMode("anonymous"); + setContributorName(""); + setContributorOrganisation(""); + setContributorRole(""); + setContributorLinkedin(""); + setDisclosureConsent(false); + setCloseCountdown(3); + } + + useEffect(() => { + if (status !== "complete") return; + + const countdownTimer = window.setInterval(() => { + setCloseCountdown((current) => Math.max(current - 1, 1)); + }, 1000); + const closeTimer = window.setTimeout(() => { + onCloseRef.current(); + resetModalState(); + }, 3000); + + return () => { + window.clearInterval(countdownTimer); + window.clearTimeout(closeTimer); + }; + }, [status]); + + const loading = status === "loading"; + const submitted = status === "complete"; + const needsConsent = contributorMode === "named" && !disclosureConsent; + + async function handleSubmit() { + setStatus("loading"); + setError(null); + try { + const response = await openSourceWorkflow(workflowId, { + contributor_mode: contributorMode, + contributor: + contributorMode === "named" + ? { + name: + contributorName.trim() || + defaultContributorName, + organisation: + contributorOrganisation.trim() || null, + role: contributorRole.trim() || null, + linkedin: contributorLinkedin.trim() || null, + } + : null, + }); + onSubmitted({ + id: response.id, + status: response.status, + submitted_at: response.submitted_at, + updated_at: response.updated_at, + reviewed_at: response.reviewed_at ?? null, + }); + setCloseCountdown(3); + setStatus("complete"); + } catch (err) { + setStatus("idle"); + setError( + err instanceof Error + ? err.message + : "Failed to submit workflow for review.", + ); + } + } + + return ( + <Modal + open={open} + onClose={() => { + if (loading) return; + onClose(); + resetModalState(); + }} + breadcrumbs={[ + "Workflows", + submitted + ? "Submitted" + : pending + ? "Update open-source submission" + : "Open source", + ]} + primaryAction={ + submitted + ? undefined + : { + label: loading + ? pending + ? "Updating..." + : "Submitting..." + : pending + ? "Update submission" + : "Submit for review", + onClick: () => void handleSubmit(), + disabled: loading || needsConsent, + } + } + > + {submitted ? ( + <div className="flex min-h-0 flex-1 flex-col items-center justify-center pb-10 text-center"> + <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-full border border-emerald-200/70 bg-emerald-50/55 text-emerald-700 shadow-[0_10px_28px_rgba(16,185,129,0.16),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(16,185,129,0.12)] ring-1 ring-white/70 backdrop-blur-xl"> + <Check className="h-6 w-6" /> + </div> + <h3 className="text-2xl font-serif text-gray-950"> + Workflow submitted + </h3> + <p className="mt-3 max-w-sm text-xs leading-6 text-gray-600"> + Your workflow snapshot has been submitted for review. + You'll be notified by email if it is accepted. + </p> + <p className="mt-6 text-xs font-medium text-gray-500"> + Closing in {closeCountdown} + </p> + </div> + ) : ( + <div className="space-y-4 pb-2 text-sm text-gray-700"> + <h3 className="text-2xl font-serif text-gray-950"> + Contribute to open source legal + </h3> + <p className="leading-6 text-xs text-gray-600"> + Submit a snapshot of this workflow for review. If + accepted, it will be shared under the Apache License 2.0 + in the{" "} + <a + href={WORKFLOWS_REPO_URL} + target="_blank" + rel="noopener noreferrer" + className="font-medium text-gray-950 underline decoration-gray-300 underline-offset-4 transition-colors hover:text-gray-600" + > + Open-Legal-Products/mike-workflows + </a>{" "} + repo. You'll be notified by email if your workflow + is accepted. + </p> + {pending && ( + <p className="rounded-xl border border-white/70 bg-white/55 px-3 py-2 text-xs leading-5 text-gray-600 shadow-[0_8px_24px_rgba(15,23,42,0.07),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(255,255,255,0.55)] backdrop-blur-xl"> + You already have a pending submission. This will + replace that pending snapshot. + </p> + )} + + <div className="space-y-2 pt-2"> + <ModalFieldLabel as="p"> + Contributor attribution + </ModalFieldLabel> + <ModalSegmentedToggle + value={contributorMode} + onChange={setContributorMode} + disabled={loading} + options={[ + { + value: "anonymous", + label: "Anonymous", + icon: EyeOff, + }, + { + value: "named", + label: "Disclose details", + icon: User, + }, + ]} + /> + {contributorMode === "named" && ( + <div className="grid gap-x-4 gap-y-5 pt-4 sm:grid-cols-2"> + <div> + <ModalFieldLabel htmlFor="open-source-contributor-name"> + Full Name + </ModalFieldLabel> + <ModalTextInput + id="open-source-contributor-name" + value={contributorName} + onChange={(event) => + setContributorName( + event.target.value, + ) + } + placeholder="Jane Doe" + disabled={loading} + /> + </div> + <div> + <ModalFieldLabel htmlFor="open-source-contributor-organisation"> + Organisation + </ModalFieldLabel> + <ModalTextInput + id="open-source-contributor-organisation" + value={contributorOrganisation} + onChange={(event) => + setContributorOrganisation( + event.target.value, + ) + } + placeholder="Acme LLP" + disabled={loading} + /> + </div> + <div> + <ModalFieldLabel htmlFor="open-source-contributor-role"> + Role + </ModalFieldLabel> + <ModalTextInput + id="open-source-contributor-role" + value={contributorRole} + onChange={(event) => + setContributorRole( + event.target.value, + ) + } + placeholder="Senior Associate" + disabled={loading} + /> + </div> + <div> + <ModalFieldLabel htmlFor="open-source-contributor-linkedin"> + LinkedIn + </ModalFieldLabel> + <ModalTextInput + id="open-source-contributor-linkedin" + type="url" + value={contributorLinkedin} + onChange={(event) => + setContributorLinkedin( + event.target.value, + ) + } + placeholder="https://linkedin.com/in/janedoe" + disabled={loading} + /> + </div> + <div className="flex items-start gap-2 pt-1 sm:col-span-2"> + <input + id="open-source-disclosure-consent" + type="checkbox" + checked={disclosureConsent} + onChange={(event) => + setDisclosureConsent( + event.target.checked, + ) + } + disabled={loading} + className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-black accent-black focus:ring-gray-400 disabled:cursor-not-allowed" + /> + <p className="text-xs leading-5 text-gray-600"> + <label + htmlFor="open-source-disclosure-consent" + className="cursor-pointer" + > + I consent to disclosing the personal + information above in the public + </label>{" "} + <a + href={WORKFLOWS_REPO_URL} + target="_blank" + rel="noopener noreferrer" + className="font-medium text-gray-900 underline decoration-gray-300 underline-offset-4 transition-colors hover:text-gray-600" + > + Open-Legal-Products/mike-workflows + </a>{" "} + <label + htmlFor="open-source-disclosure-consent" + className="cursor-pointer" + > + GitHub repository and on the + mikeoss.com website. + </label> + </p> + </div> + </div> + )} + </div> + + {error && ( + <p className="rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700"> + {error} + </p> + )} + </div> + )} + </Modal> + ); +} diff --git a/frontend/src/app/components/workflows/UseWorkflowModal.tsx b/frontend/src/app/components/workflows/UseWorkflowModal.tsx new file mode 100644 index 0000000..3a2507b --- /dev/null +++ b/frontend/src/app/components/workflows/UseWorkflowModal.tsx @@ -0,0 +1,392 @@ +"use client"; + +import { useEffect, useState } from "react"; +import type { Document, Workflow } from "../shared/types"; +import { createTabularReview } from "@/app/lib/mikeApi"; +import { useRouter } from "next/navigation"; +import { useDirectoryData } from "../shared/useDirectoryData"; +import { FileDirectory } from "../shared/FileDirectory"; +import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; +import { Modal } from "../modals/Modal"; +import { ModalFieldLabel } from "../modals/ModalFieldLabel"; +import { ModalSegmentedToggle } from "../modals/ModalSegmentedToggle"; +import { ModalSelect } from "../modals/ModalSelect"; +import { ModalTextarea } from "../modals/ModalTextarea"; +import { WorkflowPickerContent } from "./WorkflowPickerContent"; +import { workflowDetailPath } from "./workflowRoutes"; + +interface Props { + workflows: Workflow[]; + workflow: Workflow | null; + onClose: () => void; + skipSelect?: boolean; +} + +function SelectedWorkflowSummary({ workflow }: { workflow: Workflow }) { + return ( + <div className="mb-3 flex shrink-0 items-center justify-between gap-3"> + <span className="shrink-0 text-xs font-medium text-gray-700"> + Selected workflow + </span> + <span className="min-w-0 flex-1 truncate text-right text-xs text-gray-500"> + {workflow.metadata.title} + </span> + </div> + ); +} + +// --------------------------------------------------------------------------- +// UseWorkflowModal +// --------------------------------------------------------------------------- +export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = false }: Props) { + const [screen, setScreen] = useState<"select" | "details" | "documents">("select"); + const [selected, setSelected] = useState<Workflow | null>(workflow); + const [listSearch, setListSearch] = useState(""); + + // Configure screen state + const [inProject, setInProject] = useState(false); + const [selectedProjectId, setSelectedProjectId] = useState<string | null>( + null, + ); + const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>( + new Set(), + ); + const [assistantPrompt, setAssistantPrompt] = useState(""); + const [saving, setSaving] = useState(false); + + const router = useRouter(); + const { saveChat, setNewChatMessages } = useChatHistoryContext(); + const { + loading: dirLoading, + projects, + standaloneDocuments, + } = useDirectoryData(screen !== "select"); + + useEffect(() => { + if (workflow) { + setSelected(workflow); + setScreen(skipSelect ? "details" : "select"); + setListSearch(""); + } else { + setSelected(null); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [workflow?.id]); + + // Reset configure state on back + useEffect(() => { + if (screen === "select") { + resetConfigureState(); + } + }, [screen]); + + function resetConfigureState() { + setInProject(false); + setSelectedProjectId(null); + setSelectedDocIds(new Set()); + setAssistantPrompt(""); + } + + function handleClose() { + setSelected(null); + setScreen("select"); + resetConfigureState(); + onClose(); + } + + if (!workflow) return null; + const wf = selected ?? workflow; + + // --------------------------------------------------------------------------- + // Handlers + // --------------------------------------------------------------------------- + async function handleStartChat() { + setSaving(true); + try { + const projectId = inProject ? selectedProjectId! : undefined; + const chatId = await saveChat(projectId); + if (!chatId) return; + const allDocs: Document[] = [ + ...standaloneDocuments, + ...projects.flatMap((p) => p.documents || []), + ]; + const files = allDocs + .filter((d) => selectedDocIds.has(d.id)) + .map((d) => ({ + filename: d.filename, + document_id: d.id, + })); + const content = assistantPrompt.trim() + ? `implement workflow\n${assistantPrompt.trim()}` + : "implement workflow"; + setNewChatMessages([ + { + role: "user", + content, + files: files.length > 0 ? files : undefined, + workflow: { id: wf.id, title: wf.metadata.title }, + }, + ]); + handleClose(); + router.push( + projectId + ? `/projects/${projectId}/assistant/chat/${chatId}` + : `/assistant/chat/${chatId}`, + ); + } finally { + setSaving(false); + } + } + + async function handleCreateReview() { + const allDocs: Document[] = [ + ...standaloneDocuments, + ...projects.flatMap((p) => p.documents || []), + ]; + const docIds = allDocs + .filter((d) => selectedDocIds.has(d.id)) + .map((d) => d.id); + const projectId = inProject ? selectedProjectId! : undefined; + + setSaving(true); + try { + const review = await createTabularReview({ + title: wf.metadata.title, + document_ids: docIds, + columns_config: wf.columns_config || [], + workflow_id: wf.is_system ? undefined : wf.id, + project_id: projectId, + }); + handleClose(); + router.push( + projectId + ? `/projects/${projectId}/tabular-reviews/${review.id}` + : `/tabular-reviews/${review.id}`, + ); + } finally { + setSaving(false); + } + } + + const selectedProject = projects.find((p) => p.id === selectedProjectId); + const projectDocs = selectedProject?.documents ?? []; + const projectOptions = projects.map((project) => ({ + value: project.id, + label: + project.name + + (project.cm_number ? ` (#${project.cm_number})` : ""), + })); + const location = inProject ? "project" : "workspace"; + const locationOptions = + wf.metadata.type === "assistant" + ? [ + { value: "workspace" as const, label: "Assistant" }, + { value: "project" as const, label: "Project assistant" }, + ] + : [ + { value: "workspace" as const, label: "Tabular reviews" }, + { + value: "project" as const, + label: "Project tabular reviews", + }, + ]; + + const breadcrumbs = + screen === "select" + ? ["Workflows", "Select workflow"] + : [ + <button + key="workflows" + type="button" + onClick={() => setScreen("select")} + className="transition-colors hover:text-gray-700" + > + Workflows + </button>, + wf.metadata.title, + wf.metadata.type === "assistant" ? "New Chat" : "New Review", + screen === "details" ? "Details" : "Attach Documents", + ]; + + const selectPageAction = () => { + router.push(workflowDetailPath(wf)); + handleClose(); + }; + + // --------------------------------------------------------------------------- + // Render + // --------------------------------------------------------------------------- + return ( + <Modal + open={!!workflow} + onClose={handleClose} + size={screen === "select" ? "xl" : "lg"} + breadcrumbs={breadcrumbs} + secondaryAction={ + screen === "select" + ? { + label: "View Page", + onClick: selectPageAction, + } + : screen === "details" + ? { + label: "Back", + onClick: () => setScreen("select"), + disabled: saving, + } + : { + label: "Back", + onClick: () => setScreen("details"), + disabled: saving, + } + } + footerStatus={ + screen === "documents" && selectedDocIds.size > 0 ? ( + <span className="text-xs text-gray-400"> + {selectedDocIds.size} selected + </span> + ) : null + } + primaryAction={ + screen === "select" + ? { + label: "Use", + onClick: () => setScreen("details"), + } + : screen === "details" + ? { + label: "Next", + onClick: () => setScreen("documents"), + disabled: + saving || (inProject && !selectedProjectId), + } + : wf.metadata.type === "assistant" + ? { + label: saving ? "Starting…" : "Start Chat", + onClick: handleStartChat, + disabled: + saving || (inProject && !selectedProjectId), + } + : { + label: saving ? "Creating…" : "Create Review", + onClick: handleCreateReview, + disabled: + saving || + selectedDocIds.size === 0 || + (inProject && !selectedProjectId), + } + } + cancelAction={false} + > + {/* ── SELECT SCREEN ── */} + {screen === "select" && ( + <WorkflowPickerContent + workflows={workflows} + selected={wf} + onSelect={(next) => { + if (next) setSelected(next); + }} + search={listSearch} + onSearchChange={setListSearch} + workflowType="all" + previewMode="auto" + showTypeIcon + allowClearPreview={false} + /> + )} + + {/* ── DETAILS SCREEN ── */} + {screen === "details" && ( + <div className="flex min-h-0 flex-1 flex-col"> + <SelectedWorkflowSummary workflow={wf} /> + + <div className="space-y-6"> + <div> + <ModalFieldLabel as="p">Use in</ModalFieldLabel> + <ModalSegmentedToggle + value={location} + onChange={(value) => { + setInProject(value === "project"); + setSelectedProjectId(null); + setSelectedDocIds(new Set()); + }} + options={locationOptions} + /> + </div> + + {inProject && ( + <div> + <ModalFieldLabel htmlFor="workflow-project"> + Project + </ModalFieldLabel> + <ModalSelect + id="workflow-project" + value={selectedProjectId ?? ""} + options={projectOptions} + onChange={(value) => { + setSelectedProjectId(value || null); + setSelectedDocIds(new Set()); + }} + placeholder={ + dirLoading + ? "Loading projects..." + : projects.length + ? "Select project..." + : "No projects found" + } + disabled={dirLoading || projects.length === 0} + /> + </div> + )} + + {wf.metadata.type === "assistant" && ( + <div> + <ModalFieldLabel htmlFor="workflow-additional-message"> + Additional message + </ModalFieldLabel> + <ModalTextarea + id="workflow-additional-message" + value={assistantPrompt} + onChange={(e) => + setAssistantPrompt(e.target.value) + } + placeholder="Add any additional instructions..." + rows={4} + /> + </div> + )} + </div> + </div> + )} + + {/* ── DOCUMENTS SCREEN ── */} + {screen === "documents" && ( + <div className="flex min-h-0 flex-1 flex-col overflow-hidden"> + <div className="flex min-h-0 flex-1 flex-col"> + <FileDirectory + standaloneDocs={ + inProject ? projectDocs : standaloneDocuments + } + directoryProjects={ + inProject ? [] : projects + } + loading={dirLoading} + selectedIds={selectedDocIds} + onChange={setSelectedDocIds} + allowMultiple + forceExpanded={inProject} + emptyMessage={ + inProject + ? "No documents in this project" + : "No documents yet" + } + searchable + searchAutoFocus + showProjectTabs={!inProject} + /> + </div> + </div> + )} + </Modal> + ); +} diff --git a/frontend/src/app/components/workflows/WFColumnViewModal.tsx b/frontend/src/app/components/workflows/WFColumnViewModal.tsx index 32382e2..392a6b5 100644 --- a/frontend/src/app/components/workflows/WFColumnViewModal.tsx +++ b/frontend/src/app/components/workflows/WFColumnViewModal.tsx @@ -4,7 +4,11 @@ import { createElement } from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import type { ColumnConfig } from "../shared/types"; -import { formatIcon, formatLabel } from "../tabular/columnFormat"; +import { + formatIcon, + formatIconClassName, + formatLabel, +} from "../tabular/columnFormat"; import { Modal } from "../modals/Modal"; import { ModalFieldLabel } from "../modals/ModalFieldLabel"; @@ -15,7 +19,7 @@ interface Props { export function WFColumnViewModal({ col, onClose }: Props) { const formatIconElement = createElement(formatIcon(col.format ?? "text"), { - className: "h-3.5 w-3.5 text-gray-400", + className: `h-3.5 w-3.5 ${formatIconClassName(col.format ?? "text")}`, }); return ( <Modal diff --git a/frontend/src/app/components/workflows/WFEditColumnModal.tsx b/frontend/src/app/components/workflows/WFEditColumnModal.tsx index dea3e01..0ec1912 100644 --- a/frontend/src/app/components/workflows/WFEditColumnModal.tsx +++ b/frontend/src/app/components/workflows/WFEditColumnModal.tsx @@ -1,21 +1,17 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { createPortal } from "react-dom"; import { ChevronDown, Plus, X } from "lucide-react"; import type { ColumnConfig, ColumnFormat } from "../shared/types"; import { generateTabularColumnPrompt } from "@/app/lib/mikeApi"; -import { FORMAT_OPTIONS, formatLabel, formatIcon } from "../tabular/columnFormat"; +import { FORMAT_OPTIONS } from "../tabular/columnFormat"; import { TAG_COLORS } from "../tabular/pillUtils"; import { getPresetConfig, PROMPT_PRESETS } from "../tabular/columnPresets"; +import { Modal } from "../modals/Modal"; import { ModalFieldLabel } from "../modals/ModalFieldLabel"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; +import { ModalSelect } from "../modals/ModalSelect"; +import { ModalTextarea } from "../modals/ModalTextarea"; +import { ModalTextInput } from "../modals/ModalTextInput"; interface ColumnDraft { name: string; @@ -33,6 +29,7 @@ interface Props { } export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) { + const formId = "workflow-edit-column-modal-form"; const [draft, setDraft] = useState<ColumnDraft>({ name: column.name, prompt: column.prompt, @@ -115,34 +112,40 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) }); } - const FormatIcon = formatIcon(draft.format); - - return createPortal( - <div className="fixed inset-0 z-[101] flex items-center justify-center bg-black/20 backdrop-blur-xs"> - <div className="w-full max-w-2xl rounded-2xl bg-white shadow-2xl flex flex-col h-[600px]"> - {/* Header */} - <div className="flex items-center justify-between px-6 pt-5 pb-2"> - <div className="flex items-center gap-1.5 text-xs text-gray-400"> - <span>Workflows</span> - <span>›</span> - <span>Edit column</span> - </div> - <button - onClick={onClose} - className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100/70 hover:text-gray-600 transition-colors" - > - <X className="h-4 w-4" /> - </button> - </div> - - <form onSubmit={handleSubmit} className="flex flex-col min-h-0 flex-1"> - {/* Body */} - <div className="px-6 pt-3 pb-5 overflow-y-auto flex-1"> + return ( + <Modal + open + onClose={onClose} + breadcrumbs={["Workflows", "Edit column"]} + primaryAction={{ + label: "Save changes", + type: "submit", + form: formId, + disabled: !draft.name.trim() || !draft.prompt.trim(), + }} + cancelAction={{ label: "Cancel", onClick: onClose }} + secondaryAction={{ + label: "Delete", + variant: "danger", + onClick: onDelete, + }} + > + <form + id={formId} + onSubmit={handleSubmit} + className="flex min-h-0 flex-1 flex-col" + > + <div className="min-h-0 flex-1 overflow-y-auto px-1 pb-5 pt-2"> + <ModalFieldLabel htmlFor="workflow-column-name"> + Column title + </ModalFieldLabel> {/* Name row */} <div className="flex items-start gap-2"> <div className="relative flex flex-1 items-start" ref={presetsRef}> - <input + <ModalTextInput + id="workflow-column-name" type="text" + variant="minimal" value={draft.name} onChange={(e) => { const name = e.target.value; @@ -158,7 +161,7 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) }); }} placeholder="Column name" - className="flex-1 text-2xl font-serif text-gray-800 placeholder-gray-400 focus:outline-none bg-transparent" + className="flex-1" autoFocus /> <button @@ -198,37 +201,34 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) {/* Format */} <div className="mt-4"> - <ModalFieldLabel className="text-gray-500">Format</ModalFieldLabel> - <DropdownMenu> - <DropdownMenuTrigger asChild> - <button className="mt-1 flex items-center justify-between rounded-md border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-700 hover:border-gray-400 focus:outline-none"> - <span className="flex items-center gap-2"> - <FormatIcon className="h-3.5 w-3.5 text-gray-400" /> - {formatLabel(draft.format)} - </span> - <ChevronDown className="h-3.5 w-3.5 text-gray-400" /> - </button> - </DropdownMenuTrigger> - <DropdownMenuContent align="start" className="z-[200]"> - <DropdownMenuRadioGroup - value={draft.format} - onValueChange={(v) => update({ format: v as ColumnFormat, tags: [], tagInput: "" })} - > - {FORMAT_OPTIONS.map((o) => ( - <DropdownMenuRadioItem key={o.value} value={o.value}> - <o.icon className="h-3.5 w-3.5 text-gray-400" /> - {o.label} - </DropdownMenuRadioItem> - ))} - </DropdownMenuRadioGroup> - </DropdownMenuContent> - </DropdownMenu> + <ModalFieldLabel htmlFor="workflow-column-format"> + Format + </ModalFieldLabel> + <ModalSelect + id="workflow-column-format" + value={draft.format} + options={FORMAT_OPTIONS.map((option) => ({ + value: option.value, + label: option.label, + icon: option.icon, + iconClassName: option.iconClassName, + }))} + onChange={(value) => + update({ + format: value as ColumnFormat, + tags: [], + tagInput: "", + }) + } + /> </div> {/* Tag input */} {draft.format === "tag" && ( <div className="mt-3"> - <ModalFieldLabel className="text-gray-500">Tags</ModalFieldLabel> + <ModalFieldLabel htmlFor="workflow-column-tag"> + Tags + </ModalFieldLabel> <div className="mt-1 flex flex-wrap gap-1.5 rounded-md border border-gray-200 px-2 py-1.5 focus-within:border-gray-400"> {draft.tags.map((tag, tagIdx) => ( <span @@ -245,14 +245,16 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) </button> </span> ))} - <input + <ModalTextInput + id="workflow-column-tag" type="text" + variant="minimal" value={draft.tagInput} onChange={(e) => update({ tagInput: e.target.value })} onKeyDown={handleTagKeyDown} onBlur={commitTag} placeholder="Add tag…" - className="min-w-[80px] flex-1 bg-transparent text-sm text-gray-700 placeholder-gray-400 focus:outline-none" + className="min-w-[80px] flex-1 font-sans text-sm text-gray-700 placeholder:text-gray-400" /> </div> <p className="mt-1 text-xs text-gray-400">Press Enter or comma to add a tag.</p> @@ -261,7 +263,12 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) {/* Prompt */} <div className="mt-4 flex items-center justify-between"> - <ModalFieldLabel className="mb-0 text-gray-500">Prompt</ModalFieldLabel> + <ModalFieldLabel + htmlFor="workflow-column-prompt" + className="mb-0" + > + Prompt + </ModalFieldLabel> <button type="button" onClick={autoGeneratePrompt} @@ -276,44 +283,16 @@ export function WFEditColumnModal({ column, onClose, onSave, onDelete }: Props) Auto-Generate Prompt </button> </div> - <textarea + <ModalTextarea + id="workflow-column-prompt" rows={6} value={draft.prompt} onChange={(e) => update({ prompt: e.target.value })} placeholder="Write the analysis prompt — describe what Mike should extract from each document for this column…" - className="mt-2 w-full rounded-md border border-gray-200 px-3 py-2 text-sm text-gray-700 placeholder-gray-400 focus:border-gray-400 focus:outline-none bg-transparent resize-none leading-relaxed" + className="mt-2 min-h-36" /> - </div> - - {/* Footer */} - <div className="flex items-center justify-between border-t border-gray-100 px-6 py-4"> - <button - type="button" - onClick={onDelete} - className="rounded-lg px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-colors" - > - Delete - </button> - <div className="flex items-center gap-2"> - <button - type="button" - onClick={onClose} - className="rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-100/70 transition-colors" - > - Cancel - </button> - <button - type="submit" - disabled={!draft.name.trim() || !draft.prompt.trim()} - className="rounded-lg bg-gray-900 px-5 py-2 text-sm font-medium text-white hover:bg-gray-700 disabled:opacity-40 transition-colors" - > - Save changes - </button> - </div> - </div> - </form> - </div> - </div>, - document.body, + </div> + </form> + </Modal> ); } diff --git a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx index a3aad44..a276f6e 100644 --- a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx +++ b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx @@ -6,8 +6,10 @@ import dynamic from "next/dynamic"; import { Check, ChevronDown, + Download, Globe, Pencil, + Play, Plus, Trash2, Users, @@ -31,15 +33,23 @@ import type { ColumnConfig, Workflow, } from "@/app/components/shared/types"; -import { formatIcon, formatLabel } from "@/app/components/tabular/columnFormat"; +import { + formatIcon, + formatIconClassName, + formatLabel, +} from "@/app/components/tabular/columnFormat"; import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; -import { HeaderActionsMenu } from "@/app/components/shared/HeaderActionsMenu"; +import { + HeaderActionsMenu, + type HeaderActionsMenuItem, +} from "@/app/components/shared/HeaderActionsMenu"; import { PeopleModal } from "@/app/components/modals/PeopleModal"; import { OpenSourceWorkflowModal } from "@/app/components/workflows/OpenSourceWorkflowModal"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { NewWorkflowModal } from "@/app/components/workflows/NewWorkflowModal"; -import { useAuth } from "@/contexts/AuthContext"; -import { useUserProfile } from "@/contexts/UserProfileContext"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { useUserProfile } from "@/app/contexts/UserProfileContext"; +import { downloadWorkflowZip } from "./workflowZipExport"; // dynamic import keeps Tiptap (browser-only) out of the SSR bundle const WorkflowPromptEditor = dynamic( () => @@ -51,7 +61,7 @@ const WorkflowPromptEditor = dynamic( interface Props { id: string; - workflowType: Workflow["type"]; + workflowType: Workflow["metadata"]["type"]; } type SaveStatus = "idle" | "saving" | "saved"; @@ -59,6 +69,7 @@ type DeleteStatus = "idle" | "loading" | "complete"; type WorkflowShare = Awaited<ReturnType<typeof listWorkflowShares>>[number]; const NAME_COL_W = "w-[332px] shrink-0"; +const CHECKBOX_GUTTER = "h-2.5 w-2.5 shrink-0"; const WORKFLOW_CONTRIBUTIONS_ENABLED = process.env.NEXT_PUBLIC_WORKFLOW_CONTRIBUTIONS_ENABLED === "true"; @@ -129,12 +140,12 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { useEffect(() => { getWorkflow(id) .then((wf) => { - if (wf.type !== workflowType) { + if (wf.metadata.type !== workflowType) { setNotFound(true); return; } setWorkflow(wf); - setPromptMd(wf.prompt_md ?? ""); + setPromptMd(wf.skill_md ?? ""); setColumns( (wf.columns_config ?? []) .slice() @@ -231,7 +242,7 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { setSaveStatus("saving"); debounceRef.current = setTimeout(async () => { try { - await updateWorkflow(id, { prompt_md: newPromptMd }); + await updateWorkflow(id, { skill_md: newPromptMd }); setSaveStatus("saved"); setTimeout(() => setSaveStatus("idle"), 2000); } catch { @@ -342,6 +353,40 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { profile?.displayName?.trim() || user?.email || "your account name"; const openSourcePending = workflow.open_source_submission?.status === "pending"; + const workflowActionItems: HeaderActionsMenuItem[] = [ + { + label: "Download workflow", + icon: Download, + onSelect: () => downloadWorkflowZip(workflow, promptMd, columns), + }, + ]; + + if (!readOnly) { + workflowActionItems.push({ + label: "Edit details", + icon: Pencil, + onSelect: () => setDetailsOpen(true), + }); + + if (canOpenSource) { + workflowActionItems.push({ + label: "Open source this", + icon: Globe, + onSelect: () => setOpenSourceOpen(true), + }); + } + + workflowActionItems.push({ + label: "Delete", + icon: Trash2, + variant: "danger", + disabled: workflow.is_owner === false, + onSelect: () => { + setDeleteStatus("idle"); + setDeleteOpen(true); + }, + }); + } return ( <div className="flex flex-col h-full"> @@ -357,81 +402,55 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { { label: ( <span className="text-gray-900 truncate max-w-xs"> - {workflow.title} + {workflow.metadata.title} </span> ), }, ]} - actions={[ - { - label: "Use", - onClick: () => setUseOpen(true), - }, + actionGroups={[ saveStatus !== "idle" - ? { - type: "custom", - render: ( - <span className="inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-sm text-gray-500"> - {saveStatus === "saved" ? ( - <Check className="h-3.5 w-3.5 text-green-600" /> - ) : null} - {saveStatus === "saving" - ? "Saving…" - : "Saved"} - </span> - ), - } - : null, - canShare - ? { - onClick: () => setShareOpen(true), - title: "Open workflow people", - iconOnly: true, - icon: <Users className="h-4 w-4" />, - } - : null, - !readOnly - ? { - type: "custom", - render: ( - <HeaderActionsMenu - title="Workflow actions" - items={[ - { - label: "Edit details", - icon: Pencil, - onSelect: () => - setDetailsOpen(true), - }, - ...(canOpenSource - ? [ - { - label: - "Open source this", - icon: Globe, - onSelect: () => - setOpenSourceOpen( - true, - ), - }, - ] - : []), - { - label: "Delete", - icon: Trash2, - variant: "danger", - disabled: - workflow.is_owner === false, - onSelect: () => { - setDeleteStatus("idle"); - setDeleteOpen(true); - }, - }, - ]} - /> - ), - } - : null, + ? [ + { + type: "custom", + render: ( + <span className="inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-sm text-gray-500"> + {saveStatus === "saved" ? ( + <Check className="h-3.5 w-3.5 text-green-600" /> + ) : null} + {saveStatus === "saving" + ? "Saving…" + : "Saved"} + </span> + ), + }, + ] + : [], + [ + canShare + ? { + onClick: () => setShareOpen(true), + title: "Open workflow people", + iconOnly: true, + icon: <Users className="h-4 w-4" />, + } + : null, + { + type: "custom", + render: ( + <HeaderActionsMenu + title="Workflow actions" + items={workflowActionItems} + /> + ), + }, + ], + [ + { + label: "Use", + icon: <Play className="h-3.5 w-3.5" />, + onClick: () => setUseOpen(true), + }, + ], ]} /> <UseWorkflowModal @@ -474,7 +493,7 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { currentUserEmail={user?.email ?? null} breadcrumb={[ "Workflows", - workflow.title, + workflow.metadata.title, "People", ]} onSharedWithChange={handleWorkflowSharedWithChange} @@ -516,9 +535,9 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { {/* Metadata */} <WorkflowMetadata workflow={workflow} /> - {workflow.type === "assistant" ? ( + {workflow.metadata.type === "assistant" ? ( /* ── Assistant: WYSIWYG editor ── */ - <div className="flex-1 min-h-0 px-4 pb-2 pt-0 md:px-10 md:pb-3"> + <div className="flex-1 min-h-0 px-4 pb-2 pt-4 md:px-10 md:pb-3"> <WorkflowPromptEditor value={promptMd} onChange={readOnly ? undefined : handlePromptChange} @@ -527,17 +546,10 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { </div> ) : ( /* ── Tabular: Column table ── */ - <div className="flex flex-col flex-1 min-h-0"> + <div className="flex flex-col flex-1 min-h-0 pt-2"> {/* Toolbar */} {!readOnly && ( - <div className="flex items-center justify-between px-4 md:px-10 h-10 border-b border-gray-200 shrink-0"> - <button - onClick={() => setAddColumnOpen(true)} - className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 transition-colors" - > - <Plus className="h-3.5 w-3.5" /> - Add Column - </button> + <div className="flex items-center justify-between h-10 shrink-0 border-b border-gray-200 px-4 md:px-10"> {selectedColIndices.length > 0 && ( <div ref={colActionsRef} className="relative"> <button @@ -567,6 +579,16 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { )} </div> )} + {selectedColIndices.length === 0 && ( + <span aria-hidden="true" /> + )} + <button + onClick={() => setAddColumnOpen(true)} + className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 transition-colors" + > + <Plus className="h-3.5 w-3.5" /> + Add Column + </button> </div> )} {readOnly && ( @@ -582,13 +604,18 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { {/* Table header */} <div className={`flex items-center h-8 pr-3 md:pr-10 border-b border-gray-200 text-xs text-gray-500 font-medium shrink-0 select-none ${readOnly ? "border-t" : ""}`}> <div className={`sticky left-0 z-[60] ${NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`}> - {columns.length > 0 && ( + {columns.length > 0 ? ( <input type="checkbox" checked={columns.length > 0 && selectedColIndices.length === columns.length} ref={(el) => { if (el) el.indeterminate = selectedColIndices.length > 0 && selectedColIndices.length < columns.length; }} onChange={() => setSelectedColIndices(selectedColIndices.length === columns.length ? [] : columns.map((c) => c.index))} - className="h-2.5 w-2.5 rounded border-gray-200 cursor-pointer accent-black" + className={`${CHECKBOX_GUTTER} rounded border-gray-200 cursor-pointer accent-black`} + /> + ) : ( + <span + className={CHECKBOX_GUTTER} + aria-hidden="true" /> )} <span>Column Title</span> @@ -635,7 +662,7 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { checked={isChecked} onChange={() => setSelectedColIndices((prev) => prev.includes(col.index) ? prev.filter((i) => i !== col.index) : [...prev, col.index])} onClick={(e) => e.stopPropagation()} - className="h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black" + className={`${CHECKBOX_GUTTER} rounded border-gray-200 cursor-pointer accent-black`} /> <span className="min-w-0 flex-1 truncate text-sm text-gray-800"> {col.name} @@ -644,7 +671,9 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { </div> <div className="ml-auto w-36 shrink-0"> <span className="inline-flex items-center gap-1.5 text-xs text-gray-600"> - <FormatIcon className="h-3.5 w-3.5 text-gray-400" /> + <FormatIcon + className={`h-3.5 w-3.5 ${formatIconClassName(col.format ?? "text")}`} + /> {formatLabel(col.format ?? "text")} </span> </div> @@ -716,14 +745,14 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { function WorkflowMetadata({ workflow }: { workflow: Workflow }) { const fields: { label: string; value: string }[] = [ - { label: "Type", value: workflow.type === "tabular" ? "Tabular" : "Assistant" }, + { label: "Type", value: workflow.metadata.type === "tabular" ? "Tabular" : "Assistant" }, { label: "Source", value: getWorkflowSourceLabel(workflow) }, ]; - if (workflow.language) fields.push({ label: "Language", value: workflow.language }); - if (workflow.version) fields.push({ label: "Version", value: workflow.version }); - if (workflow.practice) fields.push({ label: "Practice", value: workflow.practice }); - if (workflow.jurisdictions?.length) { - fields.push({ label: "Jurisdiction", value: workflow.jurisdictions.join(", ") }); + if (workflow.metadata.language) fields.push({ label: "Language", value: workflow.metadata.language }); + if (workflow.metadata.version) fields.push({ label: "Version", value: workflow.metadata.version }); + if (workflow.metadata.practice) fields.push({ label: "Practice", value: workflow.metadata.practice }); + if (workflow.metadata.jurisdictions?.length) { + fields.push({ label: "Jurisdiction", value: workflow.metadata.jurisdictions.join(", ") }); } if (workflow.open_source_submission) { const statusLabels: Record< @@ -741,7 +770,7 @@ function WorkflowMetadata({ workflow }: { workflow: Workflow }) { } return ( - <div className="flex flex-wrap gap-x-8 gap-y-3 px-4 py-3 text-xs shrink-0 md:px-10"> + <div className="flex flex-wrap gap-x-8 gap-y-3 px-4 pb-3 pt-1 text-xs shrink-0 md:px-10"> {fields.map(({ label, value }) => ( <div key={label} className="flex flex-col gap-0.5"> <span className="text-gray-400">{label}</span> @@ -762,14 +791,14 @@ function WorkflowMetadataSkeleton() { ]; return ( - <div className="flex shrink-0 flex-wrap gap-x-8 gap-y-3 px-4 py-3 md:px-10"> + <div className="flex shrink-0 flex-wrap gap-x-8 gap-y-3 px-4 pb-3 pt-1 md:px-10"> {fields.map((field, index) => ( - <div key={index} className="flex flex-col gap-1"> + <div key={index} className="flex flex-col gap-0.5"> <div - className={`h-2.5 ${field.labelWidth} animate-pulse rounded bg-gray-100`} + className={`h-4 ${field.labelWidth} animate-pulse rounded bg-gray-100`} /> <div - className={`h-3 ${field.valueWidth} animate-pulse rounded bg-gray-100`} + className={`h-4 ${field.valueWidth} animate-pulse rounded bg-gray-100`} /> </div> ))} @@ -787,7 +816,7 @@ function getWorkflowSourceLabel(workflow: Workflow) { function AssistantWorkflowEditorSkeleton() { return ( - <div className="min-h-0 flex-1 px-4 pb-2 pt-0 md:px-10 md:pb-3"> + <div className="min-h-0 flex-1 px-4 pb-2 pt-4 md:px-10 md:pb-3"> <div className="h-full rounded-md border border-gray-200 bg-gray-50 px-5 py-4"> <div className="space-y-3"> <div className="h-3 w-24 animate-pulse rounded bg-gray-100" /> @@ -813,8 +842,8 @@ function AssistantWorkflowEditorSkeleton() { function TabularWorkflowEditorSkeleton() { return ( - <> - <div className="flex h-10 shrink-0 items-center border-b border-gray-200 px-4 md:px-10"> + <div className="flex min-h-0 flex-1 flex-col pt-2"> + <div className="flex h-10 shrink-0 items-center justify-end border-b border-gray-200 px-4 md:px-10"> <div className="h-3 w-20 animate-pulse rounded bg-gray-100" /> </div> @@ -822,7 +851,9 @@ function TabularWorkflowEditorSkeleton() { <div className={`${NAME_COL_W} flex shrink-0 items-center gap-4 self-stretch pl-4 pr-2`} > - <div className="h-2.5 w-2.5 animate-pulse rounded bg-gray-100" /> + <div + className={`${CHECKBOX_GUTTER} animate-pulse rounded bg-gray-100`} + /> <div className="h-2.5 w-20 animate-pulse rounded bg-gray-100" /> </div> <div className="w-36 shrink-0"> @@ -843,7 +874,9 @@ function TabularWorkflowEditorSkeleton() { <div className={`${NAME_COL_W} flex shrink-0 items-center gap-4 pl-4 pr-2`} > - <div className="h-2.5 w-2.5 shrink-0 animate-pulse rounded bg-gray-100" /> + <div + className={`${CHECKBOX_GUTTER} animate-pulse rounded bg-gray-100`} + /> <div className="h-3 animate-pulse rounded bg-gray-100" style={{ width: `${40 + (i * 13) % 35}%` }} @@ -862,6 +895,6 @@ function TabularWorkflowEditorSkeleton() { </div> ))} </div> - </> + </div> ); } diff --git a/frontend/src/app/components/workflows/WorkflowList.tsx b/frontend/src/app/components/workflows/WorkflowList.tsx index 9ffddc6..fa7fb27 100644 --- a/frontend/src/app/components/workflows/WorkflowList.tsx +++ b/frontend/src/app/components/workflows/WorkflowList.tsx @@ -21,7 +21,7 @@ import { UseWorkflowModal } from "./UseWorkflowModal"; import { NewWorkflowModal } from "./NewWorkflowModal"; import { TableToolbar } from "../shared/TableToolbar"; import { RowActionMenuItems, RowActions } from "../shared/RowActions"; -import { MikeIcon } from "@/components/chat/mike-icon"; +import { MikeIcon } from "@/app/components/chat/mike-icon"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { workflowDetailPath } from "./workflowRoutes"; import { @@ -73,7 +73,7 @@ export function WorkflowList() { const [selectedIds, setSelectedIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); const [practiceFilter, setPracticeFilter] = useState<string | null>(null); - const [typeFilter, setTypeFilter] = useState<Workflow["type"] | null>( + const [typeFilter, setTypeFilter] = useState<Workflow["metadata"]["type"] | null>( null, ); const [search, setSearch] = useState(""); @@ -92,16 +92,16 @@ export function WorkflowList() { hiddenCount: hidden.length, assistantSample: assistant.slice(0, 5).map((workflow) => ({ id: workflow.id, - title: workflow.title, - type: workflow.type, + title: workflow.metadata.title, + type: workflow.metadata.type, user_id: workflow.user_id, is_system: workflow.is_system, is_owner: workflow.is_owner, })), tabularSample: tabular.slice(0, 5).map((workflow) => ({ id: workflow.id, - title: workflow.title, - type: workflow.type, + title: workflow.metadata.title, + type: workflow.metadata.type, user_id: workflow.user_id, is_system: workflow.is_system, is_owner: workflow.is_owner, @@ -144,8 +144,8 @@ export function WorkflowList() { (wf) => !hiddenSystemIds.includes(wf.id), ); const systemRows = [...visibleSystem, ...hiddenSystem]; - const activeRows = [...visibleSystem, ...userWorkflows, ...sharedWorkflows]; - const allRows = [...systemRows, ...userWorkflows, ...sharedWorkflows]; + const activeRows = [...userWorkflows, ...sharedWorkflows, ...visibleSystem]; + const allRows = [...userWorkflows, ...sharedWorkflows, ...systemRows]; const byScope = activeScope === "all" ? activeRows @@ -156,14 +156,14 @@ export function WorkflowList() { : sharedWorkflows; const practices = Array.from( new Set( - byScope.map((wf) => wf.practice).filter((p): p is string => !!p), + byScope.map((wf) => wf.metadata.practice).filter((p): p is string => !!p), ), ).sort(); const q = search.toLowerCase(); const filtered = byScope - .filter((wf) => !practiceFilter || wf.practice === practiceFilter) - .filter((wf) => !typeFilter || wf.type === typeFilter) - .filter((wf) => !q || wf.title.toLowerCase().includes(q)); + .filter((wf) => !practiceFilter || wf.metadata.practice === practiceFilter) + .filter((wf) => !typeFilter || wf.metadata.type === typeFilter) + .filter((wf) => !q || wf.metadata.title.toLowerCase().includes(q)); const allSelected = filtered.length > 0 && @@ -192,7 +192,7 @@ export function WorkflowList() { clearSelection(); } - function handleTypeFilterChange(value: Workflow["type"] | null) { + function handleTypeFilterChange(value: Workflow["metadata"]["type"] | null) { setTypeFilter(value); clearSelection(); } @@ -251,7 +251,7 @@ export function WorkflowList() { await Promise.all(ids.map((id) => unhideWorkflow(id).catch(() => {}))); } - const getTypeMeta = (type: Workflow["type"]) => + const getTypeMeta = (type: Workflow["metadata"]["type"]) => type === "tabular" ? { label: "Tabular", Icon: Table2, className: "text-violet-700" } : { @@ -400,6 +400,8 @@ export function WorkflowList() { {practiceFilterButton} </div> </TableHeaderCell> + <TableHeaderCell className="w-40">Jurisdiction</TableHeaderCell> + <TableHeaderCell className="w-28">Language</TableHeaderCell> <TableHeaderCell className="w-44">Source</TableHeaderCell> <TableHeaderCell className="w-8" /> </TableHeaderRow> @@ -424,9 +426,18 @@ export function WorkflowList() { <TableCell className="ml-auto w-28"> <SkeletonLine className="w-16" /> </TableCell> + <TableCell className="w-40"> + <div className="flex items-center gap-1.5"> + <SkeletonDot className="rounded-full" /> + <SkeletonLine className="w-24" /> + </div> + </TableCell> <TableCell className="w-40"> <SkeletonLine className="w-24" /> </TableCell> + <TableCell className="w-28"> + <SkeletonLine className="w-16" /> + </TableCell> <TableCell className="w-44"> <SkeletonLine className="w-14" /> </TableCell> @@ -541,26 +552,54 @@ export function WorkflowList() { bgClassName={rowBg} selected={selectedIds.includes(wf.id)} onSelectionChange={() => toggleOne(wf.id)} - label={wf.title} + label={wf.metadata.title} /> <TableCell className="ml-auto w-28"> {(() => { const { label, Icon, className } = - getTypeMeta(wf.type); + getTypeMeta(wf.metadata.type); return ( - <span - className={`inline-flex items-center gap-1.5 text-xs font-medium ${className}`} - > - <Icon className="h-3.5 w-3.5" /> + <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-700"> + <Icon + className={`h-3.5 w-3.5 ${className}`} + /> {label} </span> ); })()} </TableCell> <TableCell className="w-40"> - {wf.practice ? ( + {wf.metadata.practice ? ( + <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600"> + <span + className={`${GLASS_DOT} ${practiceDotColor( + wf.metadata.practice, + )}`} + /> + {wf.metadata.practice} + </span> + ) : ( + <span className="text-xs text-gray-300"> + — + </span> + )} + </TableCell> + <TableCell className="w-40"> + {wf.metadata.jurisdictions && + wf.metadata.jurisdictions.length > 0 ? ( + <span className="truncate max-w-full text-xs font-medium text-gray-600"> + {wf.metadata.jurisdictions.join(", ")} + </span> + ) : ( + <span className="text-xs text-gray-300"> + — + </span> + )} + </TableCell> + <TableCell className="w-28"> + {wf.metadata.language ? ( <span className="text-xs font-medium text-gray-600"> - {wf.practice} + {wf.metadata.language} </span> ) : ( <span className="text-xs text-gray-300"> @@ -576,12 +615,12 @@ export function WorkflowList() { </span> ) : wf.is_owner !== false ? ( <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600"> - <User className="h-3.5 w-3.5 text-gray-500" /> + <User className="h-3.5 w-3.5 text-blue-600" /> User </span> ) : ( <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 truncate max-w-full"> - <User className="h-3.5 w-3.5 text-gray-400 shrink-0" /> + <User className="h-3.5 w-3.5 shrink-0 text-blue-600" /> <span className="truncate"> {getSharedByLabel(wf)} </span> @@ -668,3 +707,32 @@ export function WorkflowList() { function getSharedByLabel(workflow: Workflow) { return workflow.shared_by_name?.trim() || "Shared"; } + +// Liquid-glass treatment shared by every practice dot: a top inset highlight +// and bottom inset shadow give it depth, plus a slight drop shadow so the bead +// lifts off the row. The color class is appended per practice. +const GLASS_DOT = + "h-2 w-2 shrink-0 rounded-full shadow-[inset_0_1px_0.5px_rgba(255,255,255,0.65),inset_0_-1px_1px_rgba(15,23,42,0.28),0_1px_1.5px_rgba(15,23,42,0.2)]"; + +// Full literal class names so Tailwind's scanner keeps them (no dynamic strings). +const PRACTICE_DOT_COLORS = [ + "bg-blue-500", + "bg-violet-500", + "bg-emerald-500", + "bg-amber-500", + "bg-rose-500", + "bg-cyan-500", + "bg-fuchsia-500", + "bg-lime-500", + "bg-orange-500", + "bg-teal-500", +]; + +/** Deterministic dot color per practice name, so each practice reads consistently. */ +function practiceDotColor(practice: string): string { + let hash = 0; + for (let i = 0; i < practice.length; i++) { + hash = (hash * 31 + practice.charCodeAt(i)) >>> 0; + } + return PRACTICE_DOT_COLORS[hash % PRACTICE_DOT_COLORS.length]; +} diff --git a/frontend/src/app/components/workflows/WorkflowPickerContent.tsx b/frontend/src/app/components/workflows/WorkflowPickerContent.tsx index 4cb08b6..7bce04f 100644 --- a/frontend/src/app/components/workflows/WorkflowPickerContent.tsx +++ b/frontend/src/app/components/workflows/WorkflowPickerContent.tsx @@ -2,11 +2,15 @@ import { useEffect, useRef, useState } from "react"; import { ChevronDown, MessageSquare, Table2, X } from "lucide-react"; -import { SearchBar } from "@/components/ui/search-bar"; +import { SearchBar } from "@/app/components/ui/search-bar"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import type { ColumnConfig, Workflow } from "../shared/types"; -import { formatIcon, formatLabel } from "../tabular/columnFormat"; +import { + formatIcon, + formatIconClassName, + formatLabel, +} from "../tabular/columnFormat"; import { TAG_COLORS } from "../tabular/pillUtils"; type WorkflowPreviewMode = "auto" | "prompt" | "columns"; @@ -19,7 +23,7 @@ interface WorkflowPickerContentProps { search: string; onSearchChange: (value: string) => void; loading?: boolean; - workflowType?: Workflow["type"] | "all"; + workflowType?: Workflow["metadata"]["type"] | "all"; emptyMessage?: string; previewMode?: WorkflowPreviewMode; disabledWorkflow?: (workflow: Workflow) => boolean; @@ -70,8 +74,8 @@ export function WorkflowPickerContent({ const filteredWorkflows = normalizedSearch ? workflows.filter((workflow) => [ - workflow.title, - workflow.practice ?? "", + workflow.metadata.title, + workflow.metadata.practice ?? "", workflow.is_system ? "System" : "Custom", ] .join(" ") @@ -108,7 +112,7 @@ export function WorkflowPickerContent({ placeholder="Search workflows..." /> - <div className="min-h-0 min-w-0 flex-1 rounded-sm pt-2"> + <div className="min-h-0 min-w-0 flex-1 overflow-y-auto rounded-sm pt-2"> {loading ? ( <div className="space-y-px"> {[60, 45, 75, 50, 65, 40, 55].map( @@ -137,7 +141,7 @@ export function WorkflowPickerContent({ disabledWorkflow?.(workflow) ?? false; const isSelected = selected?.id === workflow.id; const TypeIcon = - workflow.type === "tabular" + workflow.metadata.type === "tabular" ? Table2 : MessageSquare; return ( @@ -164,7 +168,7 @@ export function WorkflowPickerContent({ : "text-gray-700" }`} > - {workflow.title} + {workflow.metadata.title} </span> {showTypeIcon ? ( <TypeIcon className="h-3.5 w-3.5 shrink-0 text-gray-400" /> @@ -213,7 +217,7 @@ function WorkflowPreview({ }) { const resolvedMode = mode === "auto" - ? workflow.type === "tabular" + ? workflow.metadata.type === "tabular" ? "columns" : "prompt" : mode; @@ -221,10 +225,10 @@ function WorkflowPreview({ <div className={`${className} min-h-0 min-w-0 flex-1 flex-col overflow-visible`} > - <div className="flex min-h-0 min-w-0 flex-1 flex-col rounded-2xl border border-white/70 bg-white/55 shadow-[0_3px_9px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl"> + <div className="flex min-h-0 min-w-0 flex-1 flex-col rounded-2xl border border-white/70 bg-white/55 p-1 shadow-[0_3px_9px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl"> <div className="flex h-9 shrink-0 items-center justify-between px-3"> <p className="min-w-0 flex-1 truncate text-xs font-medium text-gray-700"> - {workflow.title} + {workflow.metadata.title} </p> {allowClear ? ( <button @@ -236,7 +240,7 @@ function WorkflowPreview({ </button> ) : null} </div> - <div className="flex min-h-0 min-w-0 flex-1 flex-col"> + <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto"> {resolvedMode === "columns" ? ( <WorkflowColumnPreview columns={workflow.columns_config ?? []} @@ -244,7 +248,7 @@ function WorkflowPreview({ ) : ( <WorkflowPromptPreview content={ - workflow.prompt_md ?? "_No prompt defined._" + workflow.skill_md ?? "_No prompt defined._" } /> )} @@ -372,7 +376,9 @@ function WorkflowColumnPreview({ columns }: { columns: ColumnConfig[] }) { : "hover:bg-gray-100/70" }`} > - <FormatIcon className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + <FormatIcon + className={`h-3.5 w-3.5 shrink-0 ${formatIconClassName(column.format ?? "text")}`} + /> <span className="min-w-0 flex-1 truncate text-gray-800"> {column.name} </span> diff --git a/frontend/src/app/components/workflows/WorkflowPickerModal.tsx b/frontend/src/app/components/workflows/WorkflowPickerModal.tsx index 8bf698a..0143a3c 100644 --- a/frontend/src/app/components/workflows/WorkflowPickerModal.tsx +++ b/frontend/src/app/components/workflows/WorkflowPickerModal.tsx @@ -15,7 +15,7 @@ interface WorkflowPickerModalProps { open: boolean; onClose: () => void; onSelect: (workflow: Workflow) => Promise<void> | void; - workflowType: Workflow["type"]; + workflowType: Workflow["metadata"]["type"]; breadcrumbs: ReactNode[]; primaryLabel?: string; selectingLabel?: string; @@ -64,8 +64,8 @@ export function WorkflowPickerModal({ .length, sample: workflows.slice(0, 5).map((workflow) => ({ id: workflow.id, - title: workflow.title, - type: workflow.type, + title: workflow.metadata.title, + type: workflow.metadata.type, user_id: workflow.user_id, is_system: workflow.is_system, is_owner: workflow.is_owner, diff --git a/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx b/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx index 55e0a9a..1b33ff8 100644 --- a/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx +++ b/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx @@ -1,19 +1,22 @@ "use client"; -import { useEditor, EditorContent } from "@tiptap/react"; +import { useEditor, EditorContent, useEditorState } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import { TableKit } from "@tiptap/extension-table"; import { Markdown } from "tiptap-markdown"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { Bold, + Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, + Table2, } from "lucide-react"; +import { Button } from "@/app/components/ui/button"; interface Props { value: string; @@ -21,42 +24,71 @@ interface Props { readOnly?: boolean; } -function ToolbarBtn({ +const TABLE_PICKER_MAX_ROWS = 8; +const TABLE_PICKER_MAX_COLS = 8; +const INACTIVE_FORMATTING = { + heading1: false, + heading2: false, + heading3: false, + bold: false, + italic: false, + bulletList: false, + orderedList: false, +}; + +function AppToolbarButton({ onClick, active, title, children, }: { onClick: () => void; - active: boolean; + active?: boolean; title: string; children: React.ReactNode; }) { return ( - <button + <Button type="button" + variant="ghost" + size="icon-sm" title={title} + aria-label={title} + aria-pressed={active} + className={`h-7 w-7 text-gray-600 hover:bg-white hover:text-gray-900 ${ + active ? "bg-gray-300 text-gray-950 hover:bg-gray-300" : "" + }`} onMouseDown={(e) => { e.preventDefault(); // keep editor focus onClick(); }} - className={`p-1.5 rounded transition-colors ${ - active - ? "bg-gray-200 text-gray-900" - : "text-gray-400 hover:bg-gray-100 hover:text-gray-600" - }`} > {children} - </button> + </Button> ); } +function getEditorMarkdown(editor: NonNullable<ReturnType<typeof useEditor>>) { + // tiptap-markdown adds .markdown to storage but isn't typed on Editor.storage + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return (editor.storage as any).markdown.getMarkdown() as string; +} + export function WorkflowPromptEditor({ value, onChange, readOnly = false, }: Props) { const lastEmittedRef = useRef(value); + const rawTextareaRef = useRef<HTMLTextAreaElement>(null); + const tablePickerRef = useRef<HTMLDivElement>(null); + const [rawMode, setRawMode] = useState(false); + const [rawMarkdown, setRawMarkdown] = useState(value); + const [tablePickerOpen, setTablePickerOpen] = useState(false); + const [tablePickerSize, setTablePickerSize] = useState<{ + rows: number; + cols: number; + } | null>(null); const editor = useEditor({ extensions: [ @@ -82,19 +114,31 @@ export function WorkflowPromptEditor({ editable: !readOnly, immediatelyRender: false, onUpdate: ({ editor }) => { - // tiptap-markdown adds .markdown to storage but isn't typed on Editor.storage - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const md: string = (editor.storage as any).markdown.getMarkdown(); + const md = getEditorMarkdown(editor); lastEmittedRef.current = md; + setRawMarkdown(md); onChange?.(md); }, editorProps: { attributes: { - class: "workflow-editor-content", + class: "tiptap workflow-editor-content", }, }, }); + const activeFormatting = useEditorState({ + editor, + selector: ({ editor }) => ({ + heading1: editor?.isActive("heading", { level: 1 }) ?? false, + heading2: editor?.isActive("heading", { level: 2 }) ?? false, + heading3: editor?.isActive("heading", { level: 3 }) ?? false, + bold: editor?.isActive("bold") ?? false, + italic: editor?.isActive("italic") ?? false, + bulletList: editor?.isActive("bulletList") ?? false, + orderedList: editor?.isActive("orderedList") ?? false, + }), + }) ?? INACTIVE_FORMATTING; + // Sync external value (e.g. on load from API) useEffect(() => { if (!editor || editor.isDestroyed) return; @@ -104,6 +148,208 @@ export function WorkflowPromptEditor({ } }, [value, editor]); + useEffect(() => { + if (!tablePickerOpen) return; + + function handlePointerDown(event: MouseEvent) { + if ( + tablePickerRef.current && + !tablePickerRef.current.contains(event.target as Node) + ) { + setTablePickerOpen(false); + setTablePickerSize(null); + } + } + + function handleKeyDown(event: KeyboardEvent) { + if (event.key === "Escape") { + setTablePickerOpen(false); + setTablePickerSize(null); + } + } + + document.addEventListener("mousedown", handlePointerDown); + document.addEventListener("keydown", handleKeyDown); + + return () => { + document.removeEventListener("mousedown", handlePointerDown); + document.removeEventListener("keydown", handleKeyDown); + }; + }, [tablePickerOpen]); + + function handleRawToggle() { + if (!editor || editor.isDestroyed) return; + if (rawMode) { + lastEmittedRef.current = rawMarkdown; + editor.commands.setContent(rawMarkdown); + onChange?.(rawMarkdown); + setRawMode(false); + return; + } + setRawMarkdown(getEditorMarkdown(editor)); + setRawMode(true); + } + + function handleRawChange(next: string) { + setRawMarkdown(next); + lastEmittedRef.current = next; + onChange?.(next); + } + + function updateRawMarkdown( + next: string, + selectionStart: number, + selectionEnd: number, + ) { + setRawMarkdown(next); + lastEmittedRef.current = next; + onChange?.(next); + window.requestAnimationFrame(() => { + rawTextareaRef.current?.focus(); + rawTextareaRef.current?.setSelectionRange( + selectionStart, + selectionEnd, + ); + }); + } + + function transformRawSelection( + transform: ( + selected: string, + start: number, + end: number, + ) => { + replacement: string; + selectionStart: number; + selectionEnd: number; + }, + ) { + const textarea = rawTextareaRef.current; + if (!textarea) return; + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + const selected = rawMarkdown.slice(start, end); + const result = transform(selected, start, end); + const next = + rawMarkdown.slice(0, start) + + result.replacement + + rawMarkdown.slice(end); + updateRawMarkdown(next, result.selectionStart, result.selectionEnd); + } + + function applyRawInline(marker: "*" | "**") { + transformRawSelection((selected, start) => { + const replacement = `${marker}${selected}${marker}`; + const innerStart = start + marker.length; + const innerEnd = innerStart + selected.length; + return { + replacement, + selectionStart: selected ? innerStart : innerStart, + selectionEnd: selected ? innerEnd : innerStart, + }; + }); + } + + function transformRawLines( + transformLine: (line: string, index: number) => string, + ) { + const textarea = rawTextareaRef.current; + if (!textarea) return; + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + const lineStart = rawMarkdown.lastIndexOf("\n", Math.max(0, start - 1)) + 1; + const lineEnd = + end > start && rawMarkdown[end - 1] === "\n" + ? end - 1 + : rawMarkdown.indexOf("\n", end); + const resolvedLineEnd = + lineEnd === -1 ? rawMarkdown.length : lineEnd; + const block = rawMarkdown.slice(lineStart, resolvedLineEnd); + let lineIndex = 0; + const replacement = block + .split("\n") + .map((line) => { + if (!line.trim()) return line; + const next = transformLine(line, lineIndex); + lineIndex += 1; + return next; + }) + .join("\n"); + const next = + rawMarkdown.slice(0, lineStart) + + replacement + + rawMarkdown.slice(resolvedLineEnd); + updateRawMarkdown( + next, + lineStart, + lineStart + replacement.length, + ); + } + + function applyRawHeading(level: 1 | 2 | 3) { + const prefix = `${"#".repeat(level)} `; + transformRawLines((line) => prefix + line.replace(/^#{1,6}\s+/, "")); + } + + function applyRawBulletList() { + transformRawLines((line) => line.replace(/^(\s*)(?:[-*+]|\d+\.)\s+/, "$1").replace(/^(\s*)/, "$1- ")); + } + + function applyRawOrderedList() { + transformRawLines((line, index) => + line + .replace(/^(\s*)(?:[-*+]|\d+\.)\s+/, "$1") + .replace(/^(\s*)/, `$1${index + 1}. `), + ); + } + + function insertRawTable(rows: number, cols: number) { + const textarea = rawTextareaRef.current; + if (!textarea) return; + const start = textarea.selectionStart; + const before = rawMarkdown.slice(0, start); + const after = rawMarkdown.slice(textarea.selectionEnd); + // Keep the table on its own line(s), whatever the caret sits on. + const lead = before.length === 0 || before.endsWith("\n") ? "" : "\n"; + const trail = after.length === 0 || after.startsWith("\n") ? "" : "\n"; + const header = + "| " + + Array.from({ length: cols }, (_, index) => `Column ${index + 1}`).join( + " | ", + ) + + " |"; + const separator = + "| " + Array.from({ length: cols }, () => "---").join(" | ") + " |"; + const body = Array.from( + { length: Math.max(0, rows - 1) }, + () => "| " + Array.from({ length: cols }, () => " ").join(" | ") + " |", + ); + const table = [header, separator, ...body].join("\n") + "\n"; + const replacement = `${lead}${table}${trail}`; + const caret = before.length + replacement.length; + updateRawMarkdown(before + replacement + after, caret, caret); + } + + function insertTable(rows: number, cols: number) { + setTablePickerOpen(false); + setTablePickerSize(null); + + if (rawMode) { + insertRawTable(rows, cols); + return; + } + + editor + ?.chain() + .focus() + .insertTable({ + rows, + cols, + withHeaderRow: true, + }) + .run(); + } + return ( <div className={`flex h-full flex-col overflow-hidden bg-white ${ @@ -114,90 +360,221 @@ export function WorkflowPromptEditor({ > {!readOnly && editor && ( <div className="flex items-center gap-0.5 px-2 py-1.5 border-b border-gray-100 bg-gray-50 shrink-0"> - <ToolbarBtn + <AppToolbarButton onClick={() => - editor - .chain() - .focus() - .toggleHeading({ level: 1 }) - .run() + rawMode + ? applyRawHeading(1) + : editor + .chain() + .focus() + .toggleHeading({ level: 1 }) + .run() } - active={editor.isActive("heading", { level: 1 })} + active={!rawMode && activeFormatting.heading1} title="Heading 1" > <Heading1 className="h-4 w-4" /> - </ToolbarBtn> - <ToolbarBtn + </AppToolbarButton> + <AppToolbarButton onClick={() => - editor - .chain() - .focus() - .toggleHeading({ level: 2 }) - .run() + rawMode + ? applyRawHeading(2) + : editor + .chain() + .focus() + .toggleHeading({ level: 2 }) + .run() } - active={editor.isActive("heading", { level: 2 })} + active={!rawMode && activeFormatting.heading2} title="Heading 2" > <Heading2 className="h-4 w-4" /> - </ToolbarBtn> - <ToolbarBtn + </AppToolbarButton> + <AppToolbarButton onClick={() => - editor - .chain() - .focus() - .toggleHeading({ level: 3 }) - .run() + rawMode + ? applyRawHeading(3) + : editor + .chain() + .focus() + .toggleHeading({ level: 3 }) + .run() } - active={editor.isActive("heading", { level: 3 })} + active={!rawMode && activeFormatting.heading3} title="Heading 3" > <Heading3 className="h-4 w-4" /> - </ToolbarBtn> + </AppToolbarButton> <div className="w-px h-4 bg-gray-200 mx-1 shrink-0" /> - <ToolbarBtn + <AppToolbarButton onClick={() => - editor.chain().focus().toggleBold().run() + rawMode + ? applyRawInline("**") + : editor.chain().focus().toggleBold().run() } - active={editor.isActive("bold")} + active={!rawMode && activeFormatting.bold} title="Bold" > <Bold className="h-4 w-4" /> - </ToolbarBtn> - <ToolbarBtn + </AppToolbarButton> + <AppToolbarButton onClick={() => - editor.chain().focus().toggleItalic().run() + rawMode + ? applyRawInline("*") + : editor.chain().focus().toggleItalic().run() } - active={editor.isActive("italic")} + active={!rawMode && activeFormatting.italic} title="Italic" > <Italic className="h-4 w-4" /> - </ToolbarBtn> + </AppToolbarButton> <div className="w-px h-4 bg-gray-200 mx-1 shrink-0" /> - <ToolbarBtn + <AppToolbarButton onClick={() => - editor.chain().focus().toggleBulletList().run() + rawMode + ? applyRawBulletList() + : editor.chain().focus().toggleBulletList().run() } - active={editor.isActive("bulletList")} + active={!rawMode && activeFormatting.bulletList} title="Bullet list" > <List className="h-4 w-4" /> - </ToolbarBtn> - <ToolbarBtn + </AppToolbarButton> + <AppToolbarButton onClick={() => - editor.chain().focus().toggleOrderedList().run() + rawMode + ? applyRawOrderedList() + : editor + .chain() + .focus() + .toggleOrderedList() + .run() } - active={editor.isActive("orderedList")} + active={!rawMode && activeFormatting.orderedList} title="Numbered list" > <ListOrdered className="h-4 w-4" /> - </ToolbarBtn> + </AppToolbarButton> + <div className="w-px h-4 bg-gray-200 mx-1 shrink-0" /> + <div ref={tablePickerRef} className="relative"> + <AppToolbarButton + onClick={() => + setTablePickerOpen((open) => { + const nextOpen = !open; + if (!nextOpen) { + setTablePickerSize(null); + } + return nextOpen; + }) + } + active={tablePickerOpen} + title="Insert table" + > + <Table2 className="h-4 w-4" /> + </AppToolbarButton> + {tablePickerOpen && ( + <div + role="dialog" + aria-label="Insert table" + className="absolute left-0 top-full z-[250] mt-1 w-max rounded-md border border-gray-200 bg-white p-2 shadow-lg" + > + <div + className="grid gap-1" + style={{ + gridTemplateColumns: `repeat(${TABLE_PICKER_MAX_COLS}, 1rem)`, + }} + > + {Array.from( + { length: TABLE_PICKER_MAX_ROWS }, + (_, rowIndex) => + Array.from( + { + length: TABLE_PICKER_MAX_COLS, + }, + (_, colIndex) => { + const rows = rowIndex + 1; + const cols = colIndex + 1; + const selected = + tablePickerSize !== + null && + rows <= + tablePickerSize.rows && + cols <= + tablePickerSize.cols; + + return ( + <button + key={`${rows}-${cols}`} + type="button" + aria-label={`Insert ${rows} by ${cols} table`} + onMouseEnter={() => + setTablePickerSize({ + rows, + cols, + }) + } + onFocus={() => + setTablePickerSize({ + rows, + cols, + }) + } + onMouseDown={( + event, + ) => { + event.preventDefault(); + insertTable( + rows, + cols, + ); + }} + className={`h-4 w-4 rounded-[3px] border transition-colors ${ + selected + ? "border-gray-700 bg-gray-800" + : "border-gray-200 bg-white hover:border-gray-400" + }`} + /> + ); + }, + ), + )} + </div> + <div className="mt-2 text-center text-[11px] font-medium text-gray-500"> + {tablePickerSize + ? `${tablePickerSize.rows} x ${tablePickerSize.cols}` + : "Select table size"} + </div> + </div> + )} + </div> + <div className="ml-auto" /> + <AppToolbarButton + onClick={handleRawToggle} + active={rawMode} + title={rawMode ? "Show rich editor" : "Show raw Markdown"} + > + <Code2 className="h-4 w-4" /> + </AppToolbarButton> </div> )} {readOnly && ( - <div className="flex h-9 shrink-0 items-center bg-gray-50 px-5"> + <div className="flex h-9 shrink-0 items-center justify-between bg-gray-50 px-5"> <span className="text-xs font-medium text-gray-500"> Read-only </span> + {editor && ( + <AppToolbarButton + onClick={handleRawToggle} + active={rawMode} + title={ + rawMode + ? "Show rich editor" + : "Show raw Markdown" + } + > + <Code2 className="h-4 w-4" /> + </AppToolbarButton> + )} </div> )} <div @@ -205,7 +582,21 @@ export function WorkflowPromptEditor({ readOnly ? "border-t border-gray-100" : "" }`} > - <EditorContent editor={editor} /> + {rawMode ? ( + <textarea + ref={rawTextareaRef} + value={rawMarkdown} + onChange={(event) => + handleRawChange(event.target.value) + } + readOnly={readOnly} + spellCheck={false} + className="h-full min-h-full w-full resize-none bg-white px-5 py-4 font-mono text-xs leading-6 text-gray-800 outline-none placeholder:text-gray-400 read-only:cursor-default" + aria-label="Raw Markdown" + /> + ) : ( + <EditorContent editor={editor} /> + )} </div> </div> ); diff --git a/frontend/src/app/components/workflows/workflowRoutes.ts b/frontend/src/app/components/workflows/workflowRoutes.ts index 55337a0..0a1d2e8 100644 --- a/frontend/src/app/components/workflows/workflowRoutes.ts +++ b/frontend/src/app/components/workflows/workflowRoutes.ts @@ -1,7 +1,9 @@ import type { Workflow } from "../shared/types"; -export function workflowDetailPath(workflow: Pick<Workflow, "id" | "type">) { - return workflow.type === "assistant" +export function workflowDetailPath( + workflow: Pick<Workflow, "id" | "metadata">, +) { + return workflow.metadata.type === "assistant" ? `/workflows/assistant/${workflow.id}` : `/workflows/tabular-review/${workflow.id}`; } diff --git a/frontend/src/app/components/workflows/workflowZipExport.ts b/frontend/src/app/components/workflows/workflowZipExport.ts new file mode 100644 index 0000000..73564d1 --- /dev/null +++ b/frontend/src/app/components/workflows/workflowZipExport.ts @@ -0,0 +1,277 @@ +import type { ColumnConfig, Workflow } from "@/app/components/shared/types"; + +type ZipFile = { + path: string; + content: string; +}; + +const textEncoder = new TextEncoder(); + +const TABLE_CONFIG_SCHEMA = "../schema/table-config.schema.yaml"; + +const CRC_TABLE = (() => { + const table = new Uint32Array(256); + for (let i = 0; i < 256; i++) { + let c = i; + for (let k = 0; k < 8; k++) { + c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1; + } + table[i] = c >>> 0; + } + return table; +})(); + +function crc32(bytes: Uint8Array): number { + let crc = 0xffffffff; + for (const byte of bytes) { + crc = CRC_TABLE[(crc ^ byte) & 0xff] ^ (crc >>> 8); + } + return (crc ^ 0xffffffff) >>> 0; +} + +function uint16(value: number): Uint8Array { + const bytes = new Uint8Array(2); + new DataView(bytes.buffer).setUint16(0, value, true); + return bytes; +} + +function uint32(value: number): Uint8Array { + const bytes = new Uint8Array(4); + new DataView(bytes.buffer).setUint32(0, value, true); + return bytes; +} + +function concatBytes(parts: Uint8Array[]): Uint8Array { + const total = parts.reduce((sum, part) => sum + part.length, 0); + const out = new Uint8Array(total); + let offset = 0; + for (const part of parts) { + out.set(part, offset); + offset += part.length; + } + return out; +} + +function toArrayBuffer(bytes: Uint8Array): ArrayBuffer { + const buffer = new ArrayBuffer(bytes.byteLength); + new Uint8Array(buffer).set(bytes); + return buffer; +} + +function dosDateTime(date = new Date()): { date: number; time: number } { + const year = Math.max(1980, date.getFullYear()); + return { + time: + (date.getHours() << 11) | + (date.getMinutes() << 5) | + Math.floor(date.getSeconds() / 2), + date: + ((year - 1980) << 9) | + ((date.getMonth() + 1) << 5) | + date.getDate(), + }; +} + +function createZip(files: ZipFile[]): Blob { + const localParts: Uint8Array[] = []; + const centralParts: Uint8Array[] = []; + const { date, time } = dosDateTime(); + let offset = 0; + + for (const file of files) { + const name = textEncoder.encode(file.path); + const content = textEncoder.encode(file.content); + const crc = crc32(content); + const localHeader = concatBytes([ + uint32(0x04034b50), + uint16(20), + uint16(0x0800), + uint16(0), + uint16(time), + uint16(date), + uint32(crc), + uint32(content.length), + uint32(content.length), + uint16(name.length), + uint16(0), + name, + ]); + const centralHeader = concatBytes([ + uint32(0x02014b50), + uint16(20), + uint16(20), + uint16(0x0800), + uint16(0), + uint16(time), + uint16(date), + uint32(crc), + uint32(content.length), + uint32(content.length), + uint16(name.length), + uint16(0), + uint16(0), + uint16(0), + uint16(0), + uint32(0), + uint32(offset), + name, + ]); + + localParts.push(localHeader, content); + centralParts.push(centralHeader); + offset += localHeader.length + content.length; + } + + const centralDirectory = concatBytes(centralParts); + const endOfCentralDirectory = concatBytes([ + uint32(0x06054b50), + uint16(0), + uint16(0), + uint16(files.length), + uint16(files.length), + uint32(centralDirectory.length), + uint32(offset), + uint16(0), + ]); + + const zipBytes = concatBytes([ + ...localParts, + centralDirectory, + endOfCentralDirectory, + ]); + return new Blob([toArrayBuffer(zipBytes)], { + type: "application/zip", + }); +} + +function slugify(input: string, fallback: string): string { + const slug = input + .trim() + .toLowerCase() + .replace(/['"]/g, "") + .replace(/[^a-z0-9]+/g, "-") + .replace(/^-+|-+$/g, ""); + return slug || fallback; +} + +function yamlScalar(value: string | null): string { + if (value === null) return "null"; + return JSON.stringify(value); +} + +function yamlBlock(value: string): string { + return value + .replace(/\r\n/g, "\n") + .trim() + .split("\n") + .map((line) => ` ${line}`) + .join("\n"); +} + +function tableConfigYaml(columns: ColumnConfig[]): string { + const lines = [`$schema: ${yamlScalar(TABLE_CONFIG_SCHEMA)}`, "columns_config:"]; + columns + .slice() + .sort((a, b) => a.index - b.index) + .forEach((column) => { + lines.push(` - index: ${column.index}`); + lines.push(` name: ${yamlScalar(column.name)}`); + if (column.format) { + lines.push(` format: ${yamlScalar(column.format)}`); + } + if (column.tags?.length) { + lines.push(" tags:"); + column.tags.forEach((tag) => + lines.push(` - ${yamlScalar(tag)}`), + ); + } + lines.push(" prompt: >-"); + lines.push(yamlBlock(column.prompt)); + }); + return `${lines.join("\n")}\n`; +} + +function skillFrontmatter(workflow: Workflow, slug: string): string { + const contributors = + workflow.metadata.contributors.length > 0 + ? workflow.metadata.contributors + : [ + { + name: "User", + organisation: null, + role: null, + linkedin: null, + }, + ]; + const lines = [ + "---", + `name: ${yamlScalar(slug)}`, + `display_name: ${yamlScalar(workflow.metadata.title)}`, + `description: ${yamlScalar( + workflow.metadata.description ?? + `Run the ${workflow.metadata.title} workflow.`, + )}`, + `type: ${yamlScalar(workflow.metadata.type)}`, + `language: ${yamlScalar(workflow.metadata.language || "English")}`, + `version: ${yamlScalar(workflow.metadata.version || "1.0.0")}`, + `practice: ${yamlScalar(workflow.metadata.practice)}`, + "jurisdictions:", + ...(workflow.metadata.jurisdictions?.length + ? workflow.metadata.jurisdictions.map( + (jurisdiction) => ` - ${yamlScalar(jurisdiction)}`, + ) + : [" - \"General\""]), + "contributors:", + ...contributors.flatMap((contributor) => [ + ` - name: ${yamlScalar(contributor.name)}`, + ` organisation: ${yamlScalar(contributor.organisation)}`, + ` role: ${yamlScalar(contributor.role)}`, + ` linkedin: ${yamlScalar(contributor.linkedin)}`, + ]), + "---", + "", + ]; + return lines.join("\n"); +} + +function workflowFiles( + workflow: Workflow, + skillMd: string, + columns: ColumnConfig[], +): { files: ZipFile[]; slug: string } { + const type = workflow.metadata.type; + const slug = slugify(workflow.metadata.title, workflow.id || "workflow"); + const basePath = slug; + const files: ZipFile[] = [ + { + path: `${basePath}/SKILL.md`, + content: `${skillFrontmatter(workflow, slug)}${skillMd.trimEnd()}\n`, + }, + ]; + + if (type === "tabular") { + files.push({ + path: `${basePath}/table-config.yaml`, + content: tableConfigYaml(columns), + }); + } + + return { files, slug }; +} + +export function downloadWorkflowZip( + workflow: Workflow, + skillMd: string, + columns: ColumnConfig[], +) { + const { files, slug } = workflowFiles(workflow, skillMd, columns); + const blob = createZip(files); + const url = URL.createObjectURL(blob); + const anchor = document.createElement("a"); + anchor.href = url; + anchor.download = `${slug}.zip`; + document.body.appendChild(anchor); + anchor.click(); + anchor.remove(); + window.setTimeout(() => URL.revokeObjectURL(url), 1000); +} diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/app/contexts/AuthContext.tsx similarity index 98% rename from frontend/src/contexts/AuthContext.tsx rename to frontend/src/app/contexts/AuthContext.tsx index c1ce65e..6199895 100644 --- a/frontend/src/contexts/AuthContext.tsx +++ b/frontend/src/app/contexts/AuthContext.tsx @@ -8,7 +8,7 @@ import React, { ReactNode, } from "react"; import type { User as SupabaseUser } from "@supabase/supabase-js"; -import { supabase } from "@/lib/supabase"; +import { supabase } from "@/app/lib/supabase"; interface User { id: string; diff --git a/frontend/src/app/contexts/ChatHistoryContext.tsx b/frontend/src/app/contexts/ChatHistoryContext.tsx index 83f6d9d..718fc5f 100644 --- a/frontend/src/app/contexts/ChatHistoryContext.tsx +++ b/frontend/src/app/contexts/ChatHistoryContext.tsx @@ -9,7 +9,7 @@ import { useState, type ReactNode, } from "react"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { createChat, deleteChat, diff --git a/frontend/src/contexts/UserProfileContext.tsx b/frontend/src/app/contexts/UserProfileContext.tsx similarity index 99% rename from frontend/src/contexts/UserProfileContext.tsx rename to frontend/src/app/contexts/UserProfileContext.tsx index 735dccb..42d168a 100644 --- a/frontend/src/contexts/UserProfileContext.tsx +++ b/frontend/src/app/contexts/UserProfileContext.tsx @@ -8,7 +8,7 @@ import React, { ReactNode, useCallback, } from "react"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { type ApiKeyState, type ApiKeyProvider, diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx index 9c948c7..fcaf21a 100644 --- a/frontend/src/app/error.tsx +++ b/frontend/src/app/error.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { useEffect } from "react"; -import { PillButton } from "@/components/ui/pill-button"; +import { PillButton } from "@/app/components/ui/pill-button"; export default function Error({ error, diff --git a/frontend/src/app/global-error.tsx b/frontend/src/app/global-error.tsx index d54b87f..f72e105 100644 --- a/frontend/src/app/global-error.tsx +++ b/frontend/src/app/global-error.tsx @@ -1,7 +1,7 @@ "use client"; import { useEffect } from "react"; -import { PillButton } from "@/components/ui/pill-button"; +import { PillButton } from "@/app/components/ui/pill-button"; export default function GlobalError({ error, diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 6ceea8a..129c60a 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -428,8 +428,10 @@ } .workflow-editor-content table { + width: 100%; min-width: 100%; border-collapse: collapse; + table-layout: fixed; text-align: left; font-size: 0.75rem; } @@ -444,6 +446,7 @@ border-bottom: 1px solid #f3f4f6; padding: 0.5rem 0.75rem; vertical-align: top; + word-break: break-word; } .workflow-editor-content th:last-child, @@ -466,6 +469,7 @@ .workflow-editor-content th p, .workflow-editor-content td p { + min-height: 1.25rem; margin-bottom: 0; } diff --git a/frontend/src/app/hooks/useFetchDocxBytes.ts b/frontend/src/app/hooks/useFetchDocxBytes.ts index 27dd6a0..f74bf47 100644 --- a/frontend/src/app/hooks/useFetchDocxBytes.ts +++ b/frontend/src/app/hooks/useFetchDocxBytes.ts @@ -1,7 +1,7 @@ "use client"; import { useEffect, useState } from "react"; -import { supabase } from "@/lib/supabase"; +import { supabase } from "@/app/lib/supabase"; export interface FetchDocxResult { bytes: ArrayBuffer | null; diff --git a/frontend/src/app/hooks/useFetchSingleDoc.ts b/frontend/src/app/hooks/useFetchSingleDoc.ts index c6fc616..6c39c20 100644 --- a/frontend/src/app/hooks/useFetchSingleDoc.ts +++ b/frontend/src/app/hooks/useFetchSingleDoc.ts @@ -1,7 +1,7 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { supabase } from "@/lib/supabase"; +import { supabase } from "@/app/lib/supabase"; /** * /display returns PDF bytes (when the active version has a PDF rendition), diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index fab9a97..6bb8f90 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from "next"; import { Inter, EB_Garamond } from "next/font/google"; import "./globals.css"; -import { Providers } from "@/components/providers"; +import { Providers } from "@/app/components/providers"; const inter = Inter({ variable: "--font-inter", diff --git a/frontend/src/app/lib/mikeApi.ts b/frontend/src/app/lib/mikeApi.ts index 7b56ffa..a1fb42b 100644 --- a/frontend/src/app/lib/mikeApi.ts +++ b/frontend/src/app/lib/mikeApi.ts @@ -3,7 +3,7 @@ * Attaches the Supabase auth token for user authentication. */ -import { supabase } from "@/lib/supabase"; +import { supabase } from "@/app/lib/supabase"; import type { AssistantEvent, Chat, @@ -1176,7 +1176,7 @@ export async function clearTabularCells( // Workflows // --------------------------------------------------------------------------- -type WorkflowType = Workflow["type"]; +type WorkflowType = Workflow["metadata"]["type"]; export async function listWorkflows( type: WorkflowType, @@ -1189,13 +1189,15 @@ export async function getWorkflow(workflowId: string): Promise<Workflow> { } export async function createWorkflow(payload: { - title: string; - type: "assistant" | "tabular"; - prompt_md?: string; + metadata: { + title: string; + type: "assistant" | "tabular"; + language?: string | null; + practice?: string | null; + jurisdictions?: string[] | null; + }; + skill_md?: string; columns_config?: { index: number; name: string; prompt: string }[]; - language?: string | null; - practice?: string | null; - jurisdictions?: string[] | null; }): Promise<Workflow> { return apiRequest<Workflow>("/workflows", { method: "POST", @@ -1207,12 +1209,14 @@ export async function createWorkflow(payload: { export async function updateWorkflow( workflowId: string, payload: { - title?: string; - prompt_md?: string; + metadata?: { + title?: string; + language?: string | null; + practice?: string | null; + jurisdictions?: string[] | null; + }; + skill_md?: string; columns_config?: { index: number; name: string; prompt: string }[]; - language?: string | null; - practice?: string | null; - jurisdictions?: string[] | null; }, ): Promise<Workflow> { return apiRequest<Workflow>(`/workflows/${workflowId}`, { diff --git a/frontend/src/lib/supabase.ts b/frontend/src/app/lib/supabase.ts similarity index 100% rename from frontend/src/lib/supabase.ts rename to frontend/src/app/lib/supabase.ts diff --git a/frontend/src/lib/utils.ts b/frontend/src/app/lib/utils.ts similarity index 100% rename from frontend/src/lib/utils.ts rename to frontend/src/app/lib/utils.ts diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx index 5f4fda3..821400f 100644 --- a/frontend/src/app/login/page.tsx +++ b/frontend/src/app/login/page.tsx @@ -2,12 +2,12 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; -import { supabase } from "@/lib/supabase"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; +import { supabase } from "@/app/lib/supabase"; +import { Button } from "@/app/components/ui/button"; +import { Input } from "@/app/components/ui/input"; import Link from "next/link"; -import { SiteLogo } from "@/components/site-logo"; -import { useAuth } from "@/contexts/AuthContext"; +import { SiteLogo } from "@/app/components/site-logo"; +import { useAuth } from "@/app/contexts/AuthContext"; const authGlassCardClassName = "rounded-2xl border border-white/70 bg-white/72 p-8 shadow-[0_4px_14px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-8px_18px_rgba(255,255,255,0.12)] backdrop-blur-2xl"; @@ -40,7 +40,7 @@ export default function LoginPage() { setError(null); try { - const { data, error } = await supabase.auth.signInWithPassword({ + const { error } = await supabase.auth.signInWithPassword({ email, password, }); @@ -48,8 +48,12 @@ export default function LoginPage() { if (error) throw error; router.push("/assistant"); - } catch (error: any) { - setError(error.message || "An error occurred during login"); + } catch (error: unknown) { + setError( + error instanceof Error + ? error.message + : "An error occurred during login", + ); } finally { setLoading(false); } diff --git a/frontend/src/app/signup/page.tsx b/frontend/src/app/signup/page.tsx index 36e1f22..9e1351f 100644 --- a/frontend/src/app/signup/page.tsx +++ b/frontend/src/app/signup/page.tsx @@ -2,13 +2,13 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; -import { supabase } from "@/lib/supabase"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; +import { supabase } from "@/app/lib/supabase"; +import { Button } from "@/app/components/ui/button"; +import { Input } from "@/app/components/ui/input"; import Link from "next/link"; -import { SiteLogo } from "@/components/site-logo"; +import { SiteLogo } from "@/app/components/site-logo"; import { CheckCircle2 } from "lucide-react"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; import { updateUserProfile } from "@/app/lib/mikeApi"; const authGlassCardClassName = diff --git a/frontend/src/app/support/page.tsx b/frontend/src/app/support/page.tsx index 9247ef6..08b08d4 100644 --- a/frontend/src/app/support/page.tsx +++ b/frontend/src/app/support/page.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import { Send, CheckCircle } from "lucide-react"; import { useRouter } from "next/navigation"; -import { useAuth } from "@/contexts/AuthContext"; +import { useAuth } from "@/app/contexts/AuthContext"; type FeedbackType = "bug" | "feature" | "question" | "other"; diff --git a/frontend/src/types/luckyexcel.d.ts b/frontend/src/app/types/luckyexcel.d.ts similarity index 100% rename from frontend/src/types/luckyexcel.d.ts rename to frontend/src/app/types/luckyexcel.d.ts diff --git a/frontend/src/app/verify-mfa/page.tsx b/frontend/src/app/verify-mfa/page.tsx index 40ce74f..f5a3494 100644 --- a/frontend/src/app/verify-mfa/page.tsx +++ b/frontend/src/app/verify-mfa/page.tsx @@ -3,10 +3,10 @@ import { useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { Loader2 } from "lucide-react"; -import { SiteLogo } from "@/components/site-logo"; -import { Button } from "@/components/ui/button"; -import { useAuth } from "@/contexts/AuthContext"; -import { supabase } from "@/lib/supabase"; +import { SiteLogo } from "@/app/components/site-logo"; +import { Button } from "@/app/components/ui/button"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { supabase } from "@/app/lib/supabase"; import { needsMfaVerification, VerificationCodeInput, diff --git a/scripts/build-workflows.js b/scripts/build-workflows.js index f2a4087..f4fc14c 100644 --- a/scripts/build-workflows.js +++ b/scripts/build-workflows.js @@ -6,6 +6,7 @@ const path = require("path"); const ROOT_DIR = path.resolve(__dirname, ".."); const WORKSPACE_DIR = path.resolve(ROOT_DIR, ".."); const WORKFLOWS_DIR = path.join(WORKSPACE_DIR, "mike-workflows"); +const SYSTEM_WORKFLOWS_DIR = path.join(WORKFLOWS_DIR, "system"); const BACKEND_OUT = path.join(ROOT_DIR, "backend/src/lib/systemWorkflows.ts"); const LANDING_OUT = path.join(ROOT_DIR, "landing/app/generated-workflows.ts"); @@ -29,6 +30,216 @@ function fail(message) { throw new Error(message); } +function parseScalar(value, label) { + const trimmed = value.trim(); + if (trimmed === "null") return null; + if (trimmed === "true") return true; + if (trimmed === "false") return false; + if (/^-?\d+$/.test(trimmed)) return Number.parseInt(trimmed, 10); + if ( + (trimmed.startsWith('"') && trimmed.endsWith('"')) || + (trimmed.startsWith("'") && trimmed.endsWith("'")) + ) { + return trimmed.slice(1, -1); + } + if (trimmed.startsWith("[") || trimmed.startsWith("{")) { + try { + return JSON.parse(trimmed); + } catch (error) { + fail(`${label} is not valid inline JSON: ${error.message}`); + } + } + return trimmed; +} + +function parseSimpleYaml(source, label) { + const lines = source.replace(/\r\n/g, "\n").split("\n"); + const result = {}; + + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; + if (!line.trim() || line.trim().startsWith("#")) continue; + if (line.startsWith(" ")) { + fail(`${label}:${i + 1} has unsupported indentation`); + } + + const match = line.match(/^([A-Za-z_][A-Za-z0-9_-]*):(.*)$/); + if (!match) fail(`${label}:${i + 1} is not valid frontmatter`); + const key = match[1]; + const rawValue = match[2].trim(); + + if (rawValue) { + result[key] = parseScalar(rawValue, `${label}.${key}`); + continue; + } + + const scalarItems = []; + const objectItems = []; + let mode = null; + i++; + for (; i < lines.length; i++) { + const child = lines[i]; + if (!child.trim()) continue; + if (!child.startsWith(" ")) { + i--; + break; + } + + const listMatch = child.match(/^ -(?:\s+(.*))?$/); + if (listMatch) { + const itemText = listMatch[1]?.trim() ?? ""; + if (itemText.includes(":")) { + mode ??= "objects"; + if (mode !== "objects") { + fail(`${label}.${key} mixes scalar and object list items`); + } + const object = {}; + if (itemText) { + const itemMatch = itemText.match(/^([A-Za-z_][A-Za-z0-9_-]*):(.*)$/); + if (!itemMatch) { + fail(`${label}:${i + 1} is not a valid object list item`); + } + object[itemMatch[1]] = parseScalar( + itemMatch[2], + `${label}.${key}.${itemMatch[1]}`, + ); + } + objectItems.push(object); + continue; + } + + mode ??= "scalars"; + if (mode !== "scalars") { + fail(`${label}.${key} mixes object and scalar list items`); + } + scalarItems.push(parseScalar(itemText, `${label}.${key}`)); + continue; + } + + const propMatch = child.match(/^ ([A-Za-z_][A-Za-z0-9_-]*):(.*)$/); + if (!propMatch || mode !== "objects" || objectItems.length === 0) { + fail(`${label}:${i + 1} has unsupported frontmatter structure`); + } + objectItems[objectItems.length - 1][propMatch[1]] = parseScalar( + propMatch[2], + `${label}.${key}.${propMatch[1]}`, + ); + } + + result[key] = mode === "objects" ? objectItems : scalarItems; + } + + return result; +} + +function readSkillFile(filePath) { + const text = readText(filePath).replace(/\r\n/g, "\n"); + if (!text.startsWith("---\n")) { + fail(`${relative(filePath)} must start with YAML frontmatter`); + } + const close = text.indexOf("\n---", 4); + if (close === -1) { + fail(`${relative(filePath)} is missing closing YAML frontmatter marker`); + } + const afterClose = text.slice(close + 4); + if (afterClose && !afterClose.startsWith("\n")) { + fail(`${relative(filePath)} has invalid frontmatter closing marker`); + } + return { + metadata: parseSimpleYaml(text.slice(4, close), relative(filePath)), + body: afterClose.replace(/^\n/, "").trimEnd(), + fullText: text.trimEnd(), + }; +} + +function parseTableConfigYaml(filePath) { + const lines = readText(filePath).replace(/\r\n/g, "\n").split("\n"); + const result = { columns_config: [] }; + let i = 0; + + while (i < lines.length) { + const line = lines[i]; + if (!line.trim() || line.trim().startsWith("#")) { + i++; + continue; + } + + const schemaMatch = line.match(/^\$schema:\s*(.+)$/); + if (schemaMatch) { + result.$schema = parseScalar(schemaMatch[1], `${relative(filePath)}.$schema`); + i++; + continue; + } + + if (line !== "columns_config:") { + fail(`${relative(filePath)}:${i + 1} is not valid table config YAML`); + } + i++; + break; + } + + let current = null; + for (; i < lines.length; i++) { + const line = lines[i]; + if (!line.trim()) continue; + + const itemMatch = line.match(/^ - index:\s*(.+)$/); + if (itemMatch) { + current = { + index: parseScalar(itemMatch[1], `${relative(filePath)}.columns_config.index`), + }; + result.columns_config.push(current); + continue; + } + + if (!current) { + fail(`${relative(filePath)}:${i + 1} column entry must start with index`); + } + + const propMatch = line.match(/^ ([A-Za-z_][A-Za-z0-9_-]*):(.*)$/); + if (!propMatch) { + fail(`${relative(filePath)}:${i + 1} is not a valid column property`); + } + const key = propMatch[1]; + const rawValue = propMatch[2].trim(); + + if (key === "tags" && rawValue === "") { + const tags = []; + i++; + for (; i < lines.length; i++) { + const tagMatch = lines[i].match(/^ -\s*(.+)$/); + if (!tagMatch) { + i--; + break; + } + tags.push(parseScalar(tagMatch[1], `${relative(filePath)}.${key}`)); + } + current.tags = tags; + continue; + } + + if (rawValue === ">-" || rawValue === ">" || rawValue === "|-" || rawValue === "|") { + const parts = []; + i++; + for (; i < lines.length; i++) { + if (!lines[i].startsWith(" ")) { + i--; + break; + } + parts.push(lines[i].slice(6)); + } + current[key] = rawValue.startsWith("|") + ? parts.join("\n") + : parts.join(" ").replace(/\s+/g, " ").trim(); + continue; + } + + current[key] = parseScalar(rawValue, `${relative(filePath)}.${key}`); + } + + return result; +} + function assertString(value, label) { if (typeof value !== "string" || value.trim() === "") { fail(`${label} must be a non-empty string`); @@ -85,28 +296,43 @@ function assertColumnConfig(columns, label) { assertString(column.name, `${columnLabel}.name`); assertString(column.prompt, `${columnLabel}.prompt`); assertOptionalString(column.format, `${columnLabel}.format`); + assertOptionalStringArray(column.tags, `${columnLabel}.tags`); }); } function readWorkflow(category, dirent) { const slug = dirent.name; - const workflowDir = path.join(WORKFLOWS_DIR, category, slug); + const workflowDir = path.join(SYSTEM_WORKFLOWS_DIR, category, slug); const metadataPath = path.join(workflowDir, "metadata.json"); - if (!fs.existsSync(metadataPath)) { - fail(`${relative(metadataPath)} is required`); + if (fs.existsSync(metadataPath)) { + fail(`${relative(metadataPath)} is no longer supported; use SKILL.md frontmatter`); } - const metadata = readJson(metadataPath); - const label = relative(metadataPath); + const skillPath = path.join(workflowDir, "SKILL.md"); + if (!fs.existsSync(skillPath)) { + fail(`${relative(skillPath)} is required`); + } + const { metadata, body: skillMd, fullText: sourceSkillMd } = readSkillFile(skillPath); + const label = `${relative(skillPath)} frontmatter`; const id = `builtin-${slug}`; if (metadata.id !== undefined) { fail(`${label}.id is not supported; the ID is generated from the directory name`); } - const expectedSchema = "../../schema/workflow-metadata.schema.json"; - if (metadata.$schema !== expectedSchema) { - fail(`${label}.$schema must be "${expectedSchema}"`); + if (metadata.$schema !== undefined) { + fail(`${label}.$schema is not supported in SKILL.md frontmatter`); } - assertString(metadata.title, `${label}.title`); + if (metadata.title !== undefined) { + fail(`${label}.title is not supported; use name`); + } + if (metadata.order !== undefined) { + fail(`${label}.order is not supported`); + } + assertString(metadata.name, `${label}.name`); + if (metadata.name !== slug) { + fail(`${label}.name must match the folder name "${slug}"`); + } + assertString(metadata.display_name, `${label}.display_name`); + assertString(metadata.description, `${label}.description`); const contributors = normalizeContributors( metadata.contributors, `${label}.contributors`, @@ -124,63 +350,47 @@ function readWorkflow(category, dirent) { } assertOptionalString(metadata.practice, `${label}.practice`); assertOptionalStringArray(metadata.jurisdictions, `${label}.jurisdictions`); - if (metadata.order !== undefined && !Number.isInteger(metadata.order)) { - fail(`${label}.order must be an integer`); - } if (category === "assistant") { - if (metadata.prompt !== undefined) { - fail(`${label}.prompt is not supported; use SKILL.md`); + if (!skillMd.trim()) { + fail(`${relative(skillPath)} must include instructions after frontmatter`); } - const promptPath = path.join(workflowDir, "SKILL.md"); - if (!fs.existsSync(promptPath)) { - fail(`${relative(promptPath)} is required for assistant workflows`); - } - - if (metadata.execution_prompt !== undefined) { - fail(`${label}.execution_prompt is not supported; use SKILL.md`); - } - const tableConfigPath = path.join(workflowDir, "table-config.json"); + const tableConfigPath = path.join(workflowDir, "table-config.yaml"); if (fs.existsSync(tableConfigPath)) { fail(`${relative(tableConfigPath)} is only supported for tabular workflows`); } - const promptMd = readText(promptPath).trimEnd(); return { id, - title: metadata.title, - type: metadata.type, - contributors, - language: metadata.language, - version: metadata.version, - practice: metadata.practice ?? null, - jurisdictions: metadata.jurisdictions ?? null, - order: metadata.order ?? 0, - prompt_md: promptMd, + metadata: { + title: metadata.display_name, + description: metadata.description, + type: metadata.type, + contributors, + language: metadata.language, + version: metadata.version, + practice: metadata.practice ?? null, + jurisdictions: metadata.jurisdictions ?? null, + }, + skill_md: skillMd, + source_skill_md: sourceSkillMd, columns_config: null, }; } - let promptMd = null; - if (metadata.prompt !== undefined) { - fail(`${label}.prompt is not supported; use SKILL.md`); - } - const promptPath = path.join(workflowDir, "SKILL.md"); - if (fs.existsSync(promptPath)) { - promptMd = readText(promptPath).trimEnd(); - } - if (metadata.execution_prompt !== undefined) { - fail(`${label}.execution_prompt is not supported; use SKILL.md`); - } if (metadata.columns_config !== undefined) { - fail(`${label}.columns_config is not supported; use table-config.json`); + fail(`${label}.columns_config is not supported; use table-config.yaml`); } - const tableConfigPath = path.join(workflowDir, "table-config.json"); + const legacyTableConfigPath = path.join(workflowDir, "table-config.json"); + if (fs.existsSync(legacyTableConfigPath)) { + fail(`${relative(legacyTableConfigPath)} is no longer supported; use table-config.yaml`); + } + const tableConfigPath = path.join(workflowDir, "table-config.yaml"); if (!fs.existsSync(tableConfigPath)) { fail(`${relative(tableConfigPath)} is required for tabular workflows`); } - const tableConfig = readJson(tableConfigPath); + const tableConfig = parseTableConfigYaml(tableConfigPath); const tableConfigLabel = relative(tableConfigPath); - const expectedTableConfigSchema = "../../schema/table-config.schema.json"; + const expectedTableConfigSchema = "../../../schema/table-config.schema.yaml"; if (tableConfig.$schema !== expectedTableConfigSchema) { fail(`${tableConfigLabel}.$schema must be "${expectedTableConfigSchema}"`); } @@ -188,15 +398,18 @@ function readWorkflow(category, dirent) { return { id, - title: metadata.title, - type: metadata.type, - contributors, - language: metadata.language, - version: metadata.version, - practice: metadata.practice ?? null, - jurisdictions: metadata.jurisdictions ?? null, - order: metadata.order ?? 0, - prompt_md: promptMd, + metadata: { + title: metadata.display_name, + description: metadata.description, + type: metadata.type, + contributors, + language: metadata.language, + version: metadata.version, + practice: metadata.practice ?? null, + jurisdictions: metadata.jurisdictions ?? null, + }, + skill_md: skillMd || null, + source_skill_md: sourceSkillMd, columns_config: tableConfig.columns_config, }; } @@ -206,7 +419,7 @@ function loadWorkflows() { const seenIds = new Set(); for (const category of ["assistant", "tabular"]) { - const categoryDir = path.join(WORKFLOWS_DIR, category); + const categoryDir = path.join(SYSTEM_WORKFLOWS_DIR, category); if (!fs.existsSync(categoryDir)) continue; const entries = fs @@ -224,20 +437,7 @@ function loadWorkflows() { } } - return workflows.sort((a, b) => { - if (a.order !== b.order) return a.order - b.order; - return a.id.localeCompare(b.id); - }); -} - -function stripGeneratorFields(workflow) { - const { order, ...publicWorkflow } = workflow; - return { - user_id: null, - is_system: true, - created_at: "", - ...publicWorkflow, - }; + return workflows.sort((a, b) => a.id.localeCompare(b.id)); } function formatTs(value) { @@ -245,30 +445,31 @@ function formatTs(value) { } function writeGeneratedFiles(workflows) { - const systemWorkflows = workflows.map(stripGeneratorFields); + const systemWorkflows = workflows.map((workflow) => ({ + user_id: null, + is_system: true, + created_at: "", + id: workflow.id, + metadata: workflow.metadata, + skill_md: workflow.skill_md, + columns_config: workflow.columns_config, + })); const systemAssistantWorkflows = workflows - .filter((workflow) => workflow.type === "assistant") + .filter((workflow) => workflow.metadata.type === "assistant") .map((workflow) => ({ id: workflow.id, - title: workflow.title, - prompt_md: workflow.prompt_md, + title: workflow.metadata.title, + skill_md: workflow.skill_md, })); const landingWorkflows = workflows.map((workflow) => ({ id: workflow.id, - title: workflow.title, - type: workflow.type, - contributors: workflow.contributors, - language: workflow.language, - version: workflow.version, - practice: workflow.practice, - jurisdictions: workflow.jurisdictions, - order: workflow.order, - skill: workflow.prompt_md, + metadata: workflow.metadata, + skill_md: workflow.source_skill_md, columnCount: workflow.columns_config?.length ?? 0, columns: workflow.columns_config ?? [], })); - const backendText = `// This file is generated by scripts/build-workflows.js. Do not edit it directly.\n\nexport type SystemWorkflowContributor = {\n name: string;\n organisation: string | null;\n role: string | null;\n linkedin: string | null;\n};\n\nexport type SystemWorkflow = {\n id: string;\n user_id: null;\n is_system: true;\n created_at: string;\n title: string;\n type: "assistant" | "tabular";\n contributors: SystemWorkflowContributor[];\n language: string;\n version: string;\n practice: string | null;\n jurisdictions: string[] | null;\n prompt_md: string | null;\n columns_config: { index: number; name: string; format?: string; prompt: string; tags?: string[] }[] | null;\n};\n\nexport const SYSTEM_WORKFLOWS: SystemWorkflow[] = ${formatTs(systemWorkflows)};\n\nexport const SYSTEM_WORKFLOW_IDS = new Set(SYSTEM_WORKFLOWS.map((wf) => wf.id));\n\nexport const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; prompt_md: string }[] = ${formatTs(systemAssistantWorkflows)};\n`; + const backendText = `// This file is generated by scripts/build-workflows.js. Do not edit it directly.\n\nexport type SystemWorkflowContributor = {\n name: string;\n organisation: string | null;\n role: string | null;\n linkedin: string | null;\n};\n\nexport type SystemWorkflowMetadata = {\n title: string;\n description: string;\n type: "assistant" | "tabular";\n contributors: SystemWorkflowContributor[];\n language: string;\n version: string;\n practice: string | null;\n jurisdictions: string[] | null;\n};\n\nexport type SystemWorkflow = {\n id: string;\n user_id: null;\n is_system: true;\n created_at: string;\n metadata: SystemWorkflowMetadata;\n skill_md: string | null;\n columns_config: { index: number; name: string; format?: string; prompt: string; tags?: string[] }[] | null;\n};\n\nexport const SYSTEM_WORKFLOWS: SystemWorkflow[] = ${formatTs(systemWorkflows)};\n\nexport const SYSTEM_WORKFLOW_IDS = new Set(SYSTEM_WORKFLOWS.map((wf) => wf.id));\n\nexport const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: string }[] = ${formatTs(systemAssistantWorkflows)};\n`; const landingText = `// This file is generated by scripts/build-workflows.js. Do not edit it directly.\nimport type { LandingWorkflow } from "./workflow-browser";\n\nexport const LANDING_WORKFLOWS: LandingWorkflow[] = ${formatTs(landingWorkflows)};\n`; @@ -282,6 +483,9 @@ function main() { if (!fs.existsSync(WORKFLOWS_DIR)) { fail(`Workflow source directory not found: ${relative(WORKFLOWS_DIR)}`); } + if (!fs.existsSync(SYSTEM_WORKFLOWS_DIR)) { + fail(`System workflow source directory not found: ${relative(SYSTEM_WORKFLOWS_DIR)}`); + } const workflows = loadWorkflows(); if (workflows.length === 0) { From cfdcda6d2c2267ac57834ccab75272b696ca14e0 Mon Sep 17 00:00:00 2001 From: JJ <mooves@hotmail.com> Date: Thu, 16 Jul 2026 07:27:54 +1000 Subject: [PATCH 04/21] fix(db): add missing chat_messages.workflow column MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User messages are persisted with a `workflow` field (backend/src/routes/chat.ts, projectChat.ts) and it is read back when rendering chat history (ChatView -> UserMessage) to show which workflow a message was sent under. But the column is never created by schema.sql or any migration, so every user-message insert fails with PostgREST PGRST204 ("Could not find the 'workflow' column of 'chat_messages'") and is dropped silently (the insert result is not checked). The assistant insert has no workflow column, so it succeeds — the net effect on a self-hosted install is that reloading a thread shows the assistant reply but not the user's prompt. Add the `workflow jsonb` column to schema.sql (fresh installs) and a migration (existing installs), mirroring the adjacent content/files jsonb columns. --- .../20260716_01_chat_messages_workflow.sql | 12 ++++++++++++ backend/schema.sql | 1 + 2 files changed, 13 insertions(+) create mode 100644 backend/migrations/20260716_01_chat_messages_workflow.sql diff --git a/backend/migrations/20260716_01_chat_messages_workflow.sql b/backend/migrations/20260716_01_chat_messages_workflow.sql new file mode 100644 index 0000000..618aa09 --- /dev/null +++ b/backend/migrations/20260716_01_chat_messages_workflow.sql @@ -0,0 +1,12 @@ +-- Add chat_messages.workflow. +-- +-- The app persists a `workflow` field on user messages +-- (backend/src/routes/chat.ts, projectChat.ts) and reads it back when rendering +-- chat history (frontend ChatView -> UserMessage, to show which workflow the +-- message was sent under). The column was referenced in code but never created +-- by schema.sql or any migration, so every user-message insert failed with +-- PostgREST PGRST204 ("Could not find the 'workflow' column") and was dropped +-- silently — user prompts vanished on reload while the assistant reply +-- persisted. Mirrors the existing content/files jsonb columns. +alter table public.chat_messages + add column if not exists workflow jsonb; diff --git a/backend/schema.sql b/backend/schema.sql index 5e48fa5..e2515d2 100644 --- a/backend/schema.sql +++ b/backend/schema.sql @@ -524,6 +524,7 @@ create table if not exists public.chat_messages ( role text not null, content jsonb, files jsonb, + workflow jsonb, citations jsonb, created_at timestamptz not null default now() ); From f0b90ab3b44c4101d011d011dacafbe527833631 Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Thu, 16 Jul 2026 20:07:12 +0800 Subject: [PATCH 05/21] feat: add library and refresh shared table UI --- .../20260710_01_library_documents.sql | 71 + backend/schema.sql | 29 +- backend/src/index.ts | 3 + backend/src/lib/chat/prompts.ts | 5 + backend/src/lib/systemWorkflows.ts | 96 + backend/src/routes/documents.ts | 25 +- backend/src/routes/library.ts | 414 +++ backend/src/routes/projects.ts | 6 +- backend/src/routes/tabular.ts | 23 + frontend/public/icons/app-sidebar/chat.svg | 30 + .../icons/app-sidebar/folder-closed.svg | 44 + .../public/icons/app-sidebar/folder-open.svg | 54 + frontend/public/icons/app-sidebar/library.svg | 99 + .../icons/app-sidebar/project-closed.svg | 42 + .../icons/app-sidebar/project-opened.svg | 51 + .../icons/app-sidebar/quick-actions.svg | 30 + .../icons/app-sidebar/tabular-review.svg | 39 + .../public/icons/app-sidebar/workflow.svg | 71 + frontend/public/icons/file-types/.gitkeep | 1 + frontend/public/icons/file-types/chat.svg | 16 + frontend/public/icons/file-types/excel.svg | 54 + frontend/public/icons/file-types/pdf.svg | 41 + frontend/public/icons/file-types/ppt.svg | 47 + frontend/public/icons/file-types/word.svg | 41 + frontend/public/workflow.svg | 24 + .../src/app/(pages)/account/features/page.tsx | 37 + .../src/app/(pages)/account/models/page.tsx | 14 +- frontend/src/app/(pages)/layout.tsx | 4 +- .../src/app/(pages)/library/files/page.tsx | 5 + frontend/src/app/(pages)/library/layout.tsx | 8 + frontend/src/app/(pages)/library/page.tsx | 5 + .../app/(pages)/library/templates/page.tsx | 7 + .../[id]/assistant/chat/[chatId]/page.tsx | 22 +- .../(pages)/projects/[id]/assistant/page.tsx | 23 +- .../projects/[id]/tabular-reviews/page.tsx | 25 +- .../src/app/(pages)/tabular-reviews/page.tsx | 233 +- .../app/components/assistant/AddDocButton.tsx | 4 +- .../components/assistant/AskInputPopup.tsx | 628 ++-- .../assistant/AssistantSidePanel.tsx | 4 +- .../app/components/assistant/ChatInput.tsx | 201 +- .../assistant/CitationQuotesHeader.tsx | 2 +- .../src/app/components/assistant/DocPanel.tsx | 15 +- .../app/components/assistant/InitialView.tsx | 260 +- .../app/components/assistant/ModelToggle.tsx | 28 +- .../assistant/QuickActionsModal.tsx | 82 + .../assistant/SelectAssistantProjectModal.tsx | 2 +- .../components/assistant/UploadOverlay.tsx | 37 + .../assistant/message/EventBlocks.tsx | 32 +- .../assistant/quickActionsPreferences.ts | 148 + .../src/app/components/documents/DocTable.tsx | 3195 +++++++++++++++++ .../components/library/LibraryWorkspace.tsx | 357 ++ .../components/modals/AddDocumentsModal.tsx | 156 +- frontend/src/app/components/modals/Modal.tsx | 15 +- .../modals/ModalSegmentedToggle.tsx | 4 +- .../components/modals/ProjectPickerModal.tsx | 6 +- .../components/projects/NewProjectModal.tsx | 30 +- .../projects/ProjectAssistantTable.tsx | 170 +- .../projects/ProjectDocumentsView.tsx | 3070 +--------------- .../components/projects/ProjectExplorer.tsx | 29 +- .../components/projects/ProjectPageParts.tsx | 87 +- .../projects/ProjectReviewsTable.tsx | 186 +- .../components/projects/ProjectWorkspace.tsx | 16 +- .../components/projects/ProjectsOverview.tsx | 406 ++- .../app/components/shared/AddUserInput.tsx | 9 +- .../src/app/components/shared/AppSidebar.tsx | 58 +- .../shared/AppSidebarSkeuoIcons.tsx | 49 + .../DocumentSidePanel.tsx | 105 +- .../app/components/shared/FileDirectory.tsx | 785 ++-- .../app/components/shared/FileTypeIcon.tsx | 80 +- .../app/components/shared/FolderSvgIcon.tsx | 79 + .../components/shared/HeaderActionsMenu.tsx | 14 +- .../shared/HeaderFilterDropdown.tsx | 119 - .../src/app/components/shared/PageHeader.tsx | 120 +- .../src/app/components/shared/RowActions.tsx | 145 +- .../app/components/shared/SidebarChatItem.tsx | 41 +- .../app/components/shared/TablePrimitive.tsx | 239 +- .../app/components/shared/TableToolbar.tsx | 90 +- frontend/src/app/components/shared/types.ts | 17 + .../app/components/shared/useDirectoryData.ts | 196 +- .../app/components/shared/views/PdfView.tsx | 108 +- .../src/app/components/tabular/NewTRModal.tsx | 109 +- .../app/components/tabular/TRChatPanel.tsx | 540 +-- .../components/tabular/TREditColumnMenu.tsx | 25 +- .../app/components/tabular/TRSidePanel.tsx | 4 +- .../src/app/components/tabular/TRTable.tsx | 154 +- .../app/components/tabular/TabularCell.tsx | 8 +- .../components/tabular/TabularReviewView.tsx | 344 +- .../src/app/components/ui/liquid-dropdown.tsx | 78 + .../src/app/components/ui/liquid-surface.ts | 5 + .../src/app/components/ui/pill-button.tsx | 8 +- .../src/app/components/ui/tab-pill-button.tsx | 35 + .../components/workflows/UseWorkflowModal.tsx | 73 +- .../workflows/WorkflowDetailPage.tsx | 38 +- .../app/components/workflows/WorkflowList.tsx | 354 +- frontend/src/app/globals.css | 22 + frontend/src/app/hooks/useFetchSingleDoc.ts | 4 +- frontend/src/app/lib/mikeApi.ts | 117 + frontend/src/app/not-found.tsx | 10 +- frontend/src/app/verify-mfa/page.tsx | 9 +- 99 files changed, 9859 insertions(+), 5241 deletions(-) create mode 100644 backend/migrations/20260710_01_library_documents.sql create mode 100644 backend/src/routes/library.ts create mode 100644 frontend/public/icons/app-sidebar/chat.svg create mode 100644 frontend/public/icons/app-sidebar/folder-closed.svg create mode 100644 frontend/public/icons/app-sidebar/folder-open.svg create mode 100644 frontend/public/icons/app-sidebar/library.svg create mode 100644 frontend/public/icons/app-sidebar/project-closed.svg create mode 100644 frontend/public/icons/app-sidebar/project-opened.svg create mode 100644 frontend/public/icons/app-sidebar/quick-actions.svg create mode 100644 frontend/public/icons/app-sidebar/tabular-review.svg create mode 100644 frontend/public/icons/app-sidebar/workflow.svg create mode 100644 frontend/public/icons/file-types/.gitkeep create mode 100644 frontend/public/icons/file-types/chat.svg create mode 100644 frontend/public/icons/file-types/excel.svg create mode 100644 frontend/public/icons/file-types/pdf.svg create mode 100644 frontend/public/icons/file-types/ppt.svg create mode 100644 frontend/public/icons/file-types/word.svg create mode 100644 frontend/public/workflow.svg create mode 100644 frontend/src/app/(pages)/library/files/page.tsx create mode 100644 frontend/src/app/(pages)/library/layout.tsx create mode 100644 frontend/src/app/(pages)/library/page.tsx create mode 100644 frontend/src/app/(pages)/library/templates/page.tsx create mode 100644 frontend/src/app/components/assistant/QuickActionsModal.tsx create mode 100644 frontend/src/app/components/assistant/UploadOverlay.tsx create mode 100644 frontend/src/app/components/assistant/quickActionsPreferences.ts create mode 100644 frontend/src/app/components/documents/DocTable.tsx create mode 100644 frontend/src/app/components/library/LibraryWorkspace.tsx create mode 100644 frontend/src/app/components/shared/AppSidebarSkeuoIcons.tsx rename frontend/src/app/components/{projects => shared}/DocumentSidePanel.tsx (93%) create mode 100644 frontend/src/app/components/shared/FolderSvgIcon.tsx delete mode 100644 frontend/src/app/components/shared/HeaderFilterDropdown.tsx create mode 100644 frontend/src/app/components/ui/liquid-dropdown.tsx create mode 100644 frontend/src/app/components/ui/liquid-surface.ts create mode 100644 frontend/src/app/components/ui/tab-pill-button.tsx diff --git a/backend/migrations/20260710_01_library_documents.sql b/backend/migrations/20260710_01_library_documents.sql new file mode 100644 index 0000000..9a23f9d --- /dev/null +++ b/backend/migrations/20260710_01_library_documents.sql @@ -0,0 +1,71 @@ +-- Migration date: 2026-07-10 + +alter table public.documents + add column if not exists library_kind text default 'file'; + +update public.documents +set library_kind = 'file' +where library_kind is null; + +alter table public.documents + alter column library_kind set default 'file', + alter column library_kind set not null; + +do $$ +begin + if not exists ( + select 1 + from pg_constraint + where conname = 'documents_library_kind_check' + and conrelid = 'public.documents'::regclass + ) then + alter table public.documents + add constraint documents_library_kind_check + check (library_kind in ('file', 'template')); + end if; +end; +$$; + +create table if not exists public.library_folders ( + id uuid primary key default gen_random_uuid(), + user_id text not null, + library_kind text not null default 'file', + name text not null, + parent_folder_id uuid references public.library_folders(id) on delete cascade, + created_at timestamptz not null default now(), + updated_at timestamptz not null default now(), + constraint library_folders_kind_check + check (library_kind in ('file', 'template')) +); + +alter table public.documents + add column if not exists library_folder_id uuid; + +do $$ +begin + if not exists ( + select 1 + from pg_constraint + where conname = 'documents_library_folder_id_fkey' + and conrelid = 'public.documents'::regclass + ) then + alter table public.documents + add constraint documents_library_folder_id_fkey + foreign key (library_folder_id) + references public.library_folders(id) + on delete set null; + end if; +end; +$$; + +create index if not exists idx_library_folders_user_kind + on public.library_folders(user_id, library_kind); + +create index if not exists idx_library_folders_parent + on public.library_folders(parent_folder_id); + +create index if not exists idx_documents_library_kind_folder + on public.documents(user_id, library_kind, library_folder_id) + where project_id is null; + +revoke all on public.library_folders from anon, authenticated; diff --git a/backend/schema.sql b/backend/schema.sql index 5e48fa5..8d29838 100644 --- a/backend/schema.sql +++ b/backend/schema.sql @@ -222,14 +222,36 @@ create table if not exists public.project_subfolders ( create index if not exists idx_project_subfolders_project on public.project_subfolders(project_id); +create table if not exists public.library_folders ( + id uuid primary key default gen_random_uuid(), + user_id text not null, + library_kind text not null default 'file', + name text not null, + parent_folder_id uuid references public.library_folders(id) on delete cascade, + created_at timestamptz not null default now(), + updated_at timestamptz not null default now(), + constraint library_folders_kind_check + check (library_kind in ('file', 'template')) +); + +create index if not exists idx_library_folders_user_kind + on public.library_folders(user_id, library_kind); + +create index if not exists idx_library_folders_parent + on public.library_folders(parent_folder_id); + create table if not exists public.documents ( id uuid primary key default gen_random_uuid(), project_id uuid references public.projects(id) on delete cascade, user_id text not null, status text not null default 'pending', folder_id uuid references public.project_subfolders(id) on delete set null, + library_kind text not null default 'file', + library_folder_id uuid references public.library_folders(id) on delete set null, created_at timestamptz not null default now(), - updated_at timestamptz not null default now() + updated_at timestamptz not null default now(), + constraint documents_library_kind_check + check (library_kind in ('file', 'template')) ); create index if not exists idx_documents_user_project @@ -238,6 +260,10 @@ create index if not exists idx_documents_user_project create index if not exists idx_documents_project_folder on public.documents(project_id, folder_id); +create index if not exists idx_documents_library_kind_folder + on public.documents(user_id, library_kind, library_folder_id) + where project_id is null; + create table if not exists public.document_versions ( id uuid primary key default gen_random_uuid(), document_id uuid not null references public.documents(id) on delete cascade, @@ -837,6 +863,7 @@ alter table public.courtlistener_opinion_cluster_index enable row level security revoke all on public.user_profiles from anon, authenticated; revoke all on public.projects from anon, authenticated; revoke all on public.project_subfolders from anon, authenticated; +revoke all on public.library_folders from anon, authenticated; revoke all on public.documents from anon, authenticated; revoke all on public.document_versions from anon, authenticated; revoke all on public.document_edits from anon, authenticated; diff --git a/backend/src/index.ts b/backend/src/index.ts index cd99edc..b8d36cf 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -7,6 +7,7 @@ import { chatRouter } from "./routes/chat"; import { projectsRouter } from "./routes/projects"; import { projectChatRouter } from "./routes/projectChat"; import { documentsRouter } from "./routes/documents"; +import { libraryRouter } from "./routes/library"; import { tabularRouter } from "./routes/tabular"; import { workflowsRouter } from "./routes/workflows"; import { userRouter } from "./routes/user"; @@ -127,6 +128,7 @@ app.post("/tabular-review/:reviewId/generate", chatLimiter); app.post("/chat/create", chatCreateLimiter); app.post("/chat/:chatId/generate-title", chatCreateLimiter); app.post("/single-documents", uploadLimiter); +app.post("/library/:kind/documents", uploadLimiter); app.post("/single-documents/:documentId/versions", uploadLimiter); app.put( "/single-documents/:documentId/versions/:versionId/file", @@ -149,6 +151,7 @@ app.use("/chat", chatRouter); app.use("/projects", projectsRouter); app.use("/projects/:projectId/chat", projectChatRouter); app.use("/single-documents", documentsRouter); +app.use("/library", libraryRouter); app.use("/tabular-review", tabularRouter); app.use("/workflows", workflowsRouter); app.use("/user", userRouter); diff --git a/backend/src/lib/chat/prompts.ts b/backend/src/lib/chat/prompts.ts index d7f7b88..6b3f2fc 100644 --- a/backend/src/lib/chat/prompts.ts +++ b/backend/src/lib/chat/prompts.ts @@ -62,6 +62,11 @@ const SYSTEM_PROMPT_AFTER_RESEARCH = `DOCUMENT NAMES IN PROSE: - Never show "doc-N" labels to the user in prose, headings, lists, or tool activity text. - Refer to documents by filename or a natural description, such as "the NDA draft". +REASONING TRACE SAFETY: +- If reasoning or thought summaries are shown to the user, keep them as brief natural-language progress summaries. +- Do not expose source code, JSON snippets, tool arguments, API payloads, schemas, raw citations JSON, internal prompts, or implementation details in reasoning traces. +- Do not use code fences or structured data blocks in reasoning traces. + GENERAL GUIDANCE: - Cite the exact document or fetched opinion passage for evidence-backed claims. - If no documents are provided, answer from legal knowledge. diff --git a/backend/src/lib/systemWorkflows.ts b/backend/src/lib/systemWorkflows.ts index 96b5e16..d1d8dc1 100644 --- a/backend/src/lib/systemWorkflows.ts +++ b/backend/src/lib/systemWorkflows.ts @@ -411,6 +411,33 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ } ] }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-compare-documents", + "metadata": { + "title": "Compare Documents", + "description": "Compare the uploaded documents in a structured table, highlighting key similarities, differences, risks, and follow-up points.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Compare Documents\n\n## Instructions\n\nCompare the uploaded documents for a legal or business reviewer. Focus on the provisions, terms, risks, and commercial points that differ across the documents. The comparison must work for any number of uploaded documents.\n\nProduce the comparison as a Markdown table. The table must have exactly these columns:\n\n- Topic\n- One column for each uploaded document, using the document name or a short readable document label as the column heading\n- Difference\n\nFor example, if three documents are uploaded, the table should use this shape:\n\n| Topic | Document A | Document B | Document C | Difference |\n| --- | --- | --- | --- | --- |\n\nCompare the documents across the most relevant topics, including where available:\n\n- Parties and roles\n- Document date and effective date\n- Term, expiry, renewal, and extension rights\n- Scope of work, services, deliverables, or subject matter\n- Fees, pricing, payment terms, penalties, and currency\n- Conditions precedent, approvals, consents, and notices\n- Representations, warranties, covenants, and restrictions\n- Confidentiality, IP ownership, data protection, and use rights\n- Assignment, transfer, change of control, and subcontracting\n- Termination rights, suspension rights, cure periods, and consequences\n- Liability caps, indemnities, exclusions, insurance, and remedies\n- Governing law, jurisdiction, dispute resolution, and service of process\n\nUse concise entries in the document columns. Under each document column, state the relevant term and include the best available location with citations, such as clause, section, schedule, page, paragraph, or heading. If citations are available, include them inline with the location. If a location is unclear, describe it as specifically as possible.\n\nIn the **Difference** column, explain what changed or diverges, including any negotiation, legal, operational, or commercial significance where useful.\n\nAfter the table, include a short **Key Takeaways** section with no more than five bullets summarising the most important differences and follow-up actions.\n\nDo not invent facts, clauses, parties, dates, amounts, or obligations. If a topic is not addressed in a document, write \"Not stated\" for that document. If the uploaded documents are not comparable, explain why and provide the closest useful comparison.", + "columns_config": null + }, { "user_id": null, "is_system": true, @@ -646,6 +673,33 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-draft-from-template", + "metadata": { + "title": "Draft from Template", + "description": "Use an uploaded template to draft a new document tailored to the user instructions and source materials.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Draft from Template\n\n## Instructions\n\nUse the uploaded template as the drafting structure for a new document. Treat the template as the primary source for document style, section order, clause structure, defined-term conventions, placeholders, and formatting cues.\n\nBefore drafting, identify whether the user has provided enough instructions and source information to complete the draft. If key information is missing, ask concise follow-up questions instead of inventing facts.\n\nWhen drafting:\n\n- Preserve the template structure unless the user asks for changes.\n- Replace placeholders, bracketed fields, blanks, and example text with the user-provided facts where available.\n- Keep definitions, cross-references, numbering, party names, dates, schedules, and exhibits internally consistent.\n- Do not remove protective clauses, boilerplate, signatures, schedules, or annexes unless the user asks you to do so.\n- If the user provides supporting documents, use them only for facts and context that are relevant to completing the template.\n- Flag any assumptions, missing inputs, unresolved placeholders, or provisions that require legal or commercial confirmation.\n\nIf the user asks for a downloadable draft, use the document generation tools available to produce the drafted document. Otherwise, provide the drafted text or the most relevant sections inline, matching the template as closely as possible.\n\nDo not invent parties, dates, amounts, governing law, notice details, commercial terms, or factual background. If information is unavailable, leave a clear placeholder and list it in an **Open Points** section.", + "columns_config": null + }, { "user_id": null, "is_system": true, @@ -898,6 +952,33 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ } ] }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-extract-key-terms", + "metadata": { + "title": "Extract Key Terms", + "description": "Extract the key legal, commercial, and operational terms from the uploaded documents.", + "type": "assistant", + "contributors": [ + { + "name": "Mike", + "organisation": "Open Legal Products", + "role": null, + "linkedin": "https://www.linkedin.com/company/mike-oss/" + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Extract Key Terms\n\n## Instructions\n\nExtract the key legal, commercial, and operational terms from the uploaded documents. Present the result as a concise Markdown table.\n\nThe table must have exactly these columns:\n\n- Term\n- Value\n- Location\n- Notes\n\nExtract the terms that are most useful for legal review, including where available:\n\n- Parties and roles\n- Document date and effective date\n- Term, expiry, renewal, and extension rights\n- Scope of work, services, deliverables, or subject matter\n- Fees, pricing, payment terms, interest, penalties, and currency\n- Conditions precedent, approvals, consents, and notices\n- Representations, warranties, covenants, and restrictions\n- Confidentiality, IP ownership, data protection, and use rights\n- Assignment, transfer, change of control, and subcontracting\n- Termination rights, suspension rights, cure periods, and consequences\n- Liability caps, indemnities, exclusions, insurance, and remedies\n- Governing law, jurisdiction, dispute resolution, and service of process\n\nUse the **Location** column for the best available clause, section, schedule, page, or paragraph reference. If a location is unclear, describe it as specifically as possible. Use the **Notes** column to explain ambiguity, missing information, conflicts between documents, or why a term may matter.\n\nIf a key term is not found, do not include a speculative value. Instead, include a row only where the absence itself is material, with \"Not stated\" in the **Value** column. Do not invent facts, citations, clauses, parties, dates, amounts, or obligations.", + "columns_config": null + }, { "user_id": null, "is_system": true, @@ -1616,6 +1697,11 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: "title": "Commercial Lease Review", "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, + { + "id": "builtin-compare-documents", + "title": "Compare Documents", + "skill_md": "# Compare Documents\n\n## Instructions\n\nCompare the uploaded documents for a legal or business reviewer. Focus on the provisions, terms, risks, and commercial points that differ across the documents. The comparison must work for any number of uploaded documents.\n\nProduce the comparison as a Markdown table. The table must have exactly these columns:\n\n- Topic\n- One column for each uploaded document, using the document name or a short readable document label as the column heading\n- Difference\n\nFor example, if three documents are uploaded, the table should use this shape:\n\n| Topic | Document A | Document B | Document C | Difference |\n| --- | --- | --- | --- | --- |\n\nCompare the documents across the most relevant topics, including where available:\n\n- Parties and roles\n- Document date and effective date\n- Term, expiry, renewal, and extension rights\n- Scope of work, services, deliverables, or subject matter\n- Fees, pricing, payment terms, penalties, and currency\n- Conditions precedent, approvals, consents, and notices\n- Representations, warranties, covenants, and restrictions\n- Confidentiality, IP ownership, data protection, and use rights\n- Assignment, transfer, change of control, and subcontracting\n- Termination rights, suspension rights, cure periods, and consequences\n- Liability caps, indemnities, exclusions, insurance, and remedies\n- Governing law, jurisdiction, dispute resolution, and service of process\n\nUse concise entries in the document columns. Under each document column, state the relevant term and include the best available location with citations, such as clause, section, schedule, page, paragraph, or heading. If citations are available, include them inline with the location. If a location is unclear, describe it as specifically as possible.\n\nIn the **Difference** column, explain what changed or diverges, including any negotiation, legal, operational, or commercial significance where useful.\n\nAfter the table, include a short **Key Takeaways** section with no more than five bullets summarising the most important differences and follow-up actions.\n\nDo not invent facts, clauses, parties, dates, amounts, or obligations. If a topic is not addressed in a document, write \"Not stated\" for that document. If the uploaded documents are not comparable, explain why and provide the closest useful comparison." + }, { "id": "builtin-corporate-approvals-review", "title": "Corporate Approvals Review", @@ -1631,6 +1717,11 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: "title": "Credit Agreement Review", "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, + { + "id": "builtin-draft-from-template", + "title": "Draft from Template", + "skill_md": "# Draft from Template\n\n## Instructions\n\nUse the uploaded template as the drafting structure for a new document. Treat the template as the primary source for document style, section order, clause structure, defined-term conventions, placeholders, and formatting cues.\n\nBefore drafting, identify whether the user has provided enough instructions and source information to complete the draft. If key information is missing, ask concise follow-up questions instead of inventing facts.\n\nWhen drafting:\n\n- Preserve the template structure unless the user asks for changes.\n- Replace placeholders, bracketed fields, blanks, and example text with the user-provided facts where available.\n- Keep definitions, cross-references, numbering, party names, dates, schedules, and exhibits internally consistent.\n- Do not remove protective clauses, boilerplate, signatures, schedules, or annexes unless the user asks you to do so.\n- If the user provides supporting documents, use them only for facts and context that are relevant to completing the template.\n- Flag any assumptions, missing inputs, unresolved placeholders, or provisions that require legal or commercial confirmation.\n\nIf the user asks for a downloadable draft, use the document generation tools available to produce the drafted document. Otherwise, provide the drafted text or the most relevant sections inline, matching the template as closely as possible.\n\nDo not invent parties, dates, amounts, governing law, notice details, commercial terms, or factual background. If information is unavailable, leave a clear placeholder and list it in an **Open Points** section." + }, { "id": "builtin-draft-issues-list", "title": "Draft Issues List", @@ -1641,6 +1732,11 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: "title": "Employment Agreement Review", "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, + { + "id": "builtin-extract-key-terms", + "title": "Extract Key Terms", + "skill_md": "# Extract Key Terms\n\n## Instructions\n\nExtract the key legal, commercial, and operational terms from the uploaded documents. Present the result as a concise Markdown table.\n\nThe table must have exactly these columns:\n\n- Term\n- Value\n- Location\n- Notes\n\nExtract the terms that are most useful for legal review, including where available:\n\n- Parties and roles\n- Document date and effective date\n- Term, expiry, renewal, and extension rights\n- Scope of work, services, deliverables, or subject matter\n- Fees, pricing, payment terms, interest, penalties, and currency\n- Conditions precedent, approvals, consents, and notices\n- Representations, warranties, covenants, and restrictions\n- Confidentiality, IP ownership, data protection, and use rights\n- Assignment, transfer, change of control, and subcontracting\n- Termination rights, suspension rights, cure periods, and consequences\n- Liability caps, indemnities, exclusions, insurance, and remedies\n- Governing law, jurisdiction, dispute resolution, and service of process\n\nUse the **Location** column for the best available clause, section, schedule, page, or paragraph reference. If a location is unclear, describe it as specifically as possible. Use the **Notes** column to explain ambiguity, missing information, conflicts between documents, or why a term may matter.\n\nIf a key term is not found, do not include a speculative value. Instead, include a row only where the absence itself is material, with \"Not stated\" in the **Value** column. Do not invent facts, citations, clauses, parties, dates, amounts, or obligations." + }, { "id": "builtin-guarantee-agreement-review", "title": "Guarantee Agreement Review", diff --git a/backend/src/routes/documents.ts b/backend/src/routes/documents.ts index dd7c0de..22ecd22 100644 --- a/backend/src/routes/documents.ts +++ b/backend/src/routes/documents.ts @@ -65,6 +65,7 @@ documentsRouter.get("/", requireAuth, async (req, res) => { .select("*") .eq("user_id", userId) .is("project_id", null) + .or("library_kind.eq.file,library_kind.is.null") .order("created_at", { ascending: false }); if (error) return void res.status(500).json({ detail: error.message }); const docs = (data ?? []) as unknown as { @@ -84,7 +85,9 @@ documentsRouter.post( async (req, res) => { const userId = res.locals.userId as string; const db = createServerSupabase(); - await handleDocumentUpload(req, res, userId, null, db); + await handleDocumentUpload(req, res, userId, null, db, { + libraryKind: "file", + }); }, ); @@ -426,9 +429,13 @@ documentsRouter.post( if (!sourceAccess.ok) return void res.status(404).json({ detail: "Source document not found" }); const willDeleteSource = - sourceDoc.project_id && - targetDoc.project_id && - sourceDoc.project_id === targetDoc.project_id; + (sourceDoc.project_id && + targetDoc.project_id && + sourceDoc.project_id === targetDoc.project_id) || + (!sourceDoc.project_id && + !targetDoc.project_id && + sourceDoc.user_id === userId && + targetDoc.user_id === userId); if (willDeleteSource && !sourceAccess.isOwner) { return void res.status(403).json({ detail: "Only the source document owner can move it into a version.", @@ -1283,12 +1290,16 @@ documentsRouter.post( (req, res) => void handleEditResolution(req, res, "reject"), ); -async function handleDocumentUpload( +export async function handleDocumentUpload( req: import("express").Request, res: import("express").Response, userId: string, projectId: string | null, db: ReturnType<typeof createServerSupabase>, + options: { + libraryKind?: "file" | "template"; + libraryFolderId?: string | null; + } = {}, ) { const file = req.file; if (!file) return void res.status(400).json({ detail: "file is required" }); @@ -1311,6 +1322,8 @@ async function handleDocumentUpload( project_id: projectId, user_id: userId, status: "processing", + library_kind: options.libraryKind ?? "file", + library_folder_id: options.libraryFolderId ?? null, }) .select("*") .single(); @@ -1417,6 +1430,8 @@ async function handleDocumentUpload( filename, storage_path: key, pdf_storage_path: pdfStoragePath, + folder_id: + (updated.library_folder_id as string | null | undefined) ?? null, file_type: suffix, size_bytes: content.byteLength, page_count: pageCount, diff --git a/backend/src/routes/library.ts b/backend/src/routes/library.ts new file mode 100644 index 0000000..d46bf71 --- /dev/null +++ b/backend/src/routes/library.ts @@ -0,0 +1,414 @@ +import { Router } from "express"; +import { requireAuth } from "../middleware/auth"; +import { createServerSupabase } from "../lib/supabase"; +import { deleteFile } from "../lib/storage"; +import { + attachActiveVersionPaths, + attachLatestVersionNumbers, +} from "../lib/documentVersions"; +import { singleFileUpload } from "../lib/upload"; +import { handleDocumentUpload } from "./documents"; + +export const libraryRouter = Router(); + +type LibraryKind = "file" | "template"; + +function normalizeLibraryKind(value: unknown): LibraryKind | null { + if (value === "file" || value === "files") return "file"; + if (value === "template" || value === "templates") return "template"; + return null; +} + +function normalizeDocumentFilename(nextName: unknown, currentName: string) { + if (typeof nextName !== "string") return null; + const trimmed = nextName.trim().slice(0, 200); + if (!trimmed) return null; + if (/\.[a-z0-9]{1,6}$/i.test(trimmed)) return trimmed; + const ext = currentName.match(/\.[a-z0-9]{1,6}$/i)?.[0] ?? ""; + return `${trimmed}${ext}`; +} + +function mapLibraryDocument<T extends Record<string, unknown>>(doc: T) { + return { + ...doc, + folder_id: (doc.library_folder_id as string | null | undefined) ?? null, + }; +} + +async function loadLibraryFolder( + db: ReturnType<typeof createServerSupabase>, + userId: string, + kind: LibraryKind, + folderId: string, +): Promise<{ id: string; parent_folder_id: string | null } | null> { + const { data } = await db + .from("library_folders") + .select("id, parent_folder_id") + .eq("id", folderId) + .eq("user_id", userId) + .eq("library_kind", kind) + .maybeSingle(); + return (data as { id: string; parent_folder_id: string | null } | null) ?? null; +} + +async function deleteLibraryDocumentsAndVersionFiles( + db: ReturnType<typeof createServerSupabase>, + userId: string, + kind: LibraryKind, + documentIds: string[], +) { + if (documentIds.length === 0) return null; + const { data: versions, error: versionsError } = await db + .from("document_versions") + .select("storage_path, pdf_storage_path") + .in("document_id", documentIds); + if (versionsError) return versionsError; + + const paths = new Set<string>(); + for (const version of versions ?? []) { + if (typeof version.storage_path === "string" && version.storage_path) { + paths.add(version.storage_path); + } + if ( + typeof version.pdf_storage_path === "string" && + version.pdf_storage_path + ) { + paths.add(version.pdf_storage_path); + } + } + await Promise.all([...paths].map((path) => deleteFile(path).catch(() => {}))); + + let deleteQuery = db + .from("documents") + .delete() + .eq("user_id", userId) + .is("project_id", null); + deleteQuery = + kind === "file" + ? deleteQuery.or("library_kind.eq.file,library_kind.is.null") + : deleteQuery.eq("library_kind", kind); + const { error } = await deleteQuery.in("id", documentIds); + return error ?? null; +} + +// GET /library/:kind +libraryRouter.get("/:kind", requireAuth, async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + + const db = createServerSupabase(); + let documentsQuery = db + .from("documents") + .select("*") + .eq("user_id", userId) + .is("project_id", null); + documentsQuery = + kind === "file" + ? documentsQuery.or("library_kind.eq.file,library_kind.is.null") + : documentsQuery.eq("library_kind", kind); + const [{ data: docs, error: docsError }, { data: folders, error: foldersError }] = + await Promise.all([ + documentsQuery.order("created_at", { ascending: true }), + db + .from("library_folders") + .select("*") + .eq("user_id", userId) + .eq("library_kind", kind) + .order("created_at", { ascending: true }), + ]); + if (docsError) return void res.status(500).json({ detail: docsError.message }); + if (foldersError) + return void res.status(500).json({ detail: foldersError.message }); + + const docsTyped = (docs ?? []).map(mapLibraryDocument) as { + id: string; + current_version_id?: string | null; + }[]; + await attachLatestVersionNumbers(db, docsTyped); + await attachActiveVersionPaths(db, docsTyped); + res.json({ documents: docsTyped, folders: folders ?? [] }); +}); + +// POST /library/:kind/documents +libraryRouter.post( + "/:kind/documents", + requireAuth, + singleFileUpload("file"), + async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + const db = createServerSupabase(); + await handleDocumentUpload(req, res, userId, null, db, { + libraryKind: kind, + }); + }, +); + +// POST /library/:kind/folders +libraryRouter.post("/:kind/folders", requireAuth, async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + + const { name, parent_folder_id } = req.body as { + name?: string; + parent_folder_id?: string | null; + }; + if (!name?.trim()) + return void res.status(400).json({ detail: "name is required" }); + + const db = createServerSupabase(); + if (parent_folder_id) { + const parent = await loadLibraryFolder(db, userId, kind, parent_folder_id); + if (!parent) + return void res.status(404).json({ detail: "Parent folder not found" }); + } + + const { data, error } = await db + .from("library_folders") + .insert({ + user_id: userId, + library_kind: kind, + name: name.trim(), + parent_folder_id: parent_folder_id ?? null, + }) + .select("*") + .single(); + if (error) return void res.status(500).json({ detail: error.message }); + res.status(201).json(data); +}); + +// PATCH /library/:kind/folders/:folderId +libraryRouter.patch("/:kind/folders/:folderId", requireAuth, async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + + const { folderId } = req.params; + const body = req.body as { name?: string; parent_folder_id?: string | null }; + const db = createServerSupabase(); + const folder = await loadLibraryFolder(db, userId, kind, folderId); + if (!folder) return void res.status(404).json({ detail: "Folder not found" }); + + const updates: Record<string, unknown> = { + updated_at: new Date().toISOString(), + }; + if (body.name != null) { + const trimmed = body.name.trim(); + if (!trimmed) + return void res.status(400).json({ detail: "name is required" }); + updates.name = trimmed; + } + if ("parent_folder_id" in body) { + if (body.parent_folder_id) { + let cur: string | null = body.parent_folder_id; + while (cur) { + if (cur === folderId) { + return void res.status(400).json({ + detail: "Cannot move a folder into itself or a descendant", + }); + } + const parent = await loadLibraryFolder(db, userId, kind, cur); + if (!parent) + return void res.status(404).json({ detail: "Parent folder not found" }); + cur = parent.parent_folder_id ?? null; + } + } + updates.parent_folder_id = body.parent_folder_id ?? null; + } + + const { data, error } = await db + .from("library_folders") + .update(updates) + .eq("id", folderId) + .eq("user_id", userId) + .eq("library_kind", kind) + .select("*") + .single(); + if (error || !data) + return void res.status(404).json({ detail: "Folder not found" }); + res.json(data); +}); + +// DELETE /library/:kind/folders/:folderId +libraryRouter.delete("/:kind/folders/:folderId", requireAuth, async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + + const { folderId } = req.params; + const db = createServerSupabase(); + const { data: allFolders, error: foldersError } = await db + .from("library_folders") + .select("id, parent_folder_id") + .eq("user_id", userId) + .eq("library_kind", kind); + if (foldersError) + return void res.status(500).json({ detail: foldersError.message }); + if (!(allFolders ?? []).some((folder) => folder.id === folderId)) { + return void res.status(404).json({ detail: "Folder not found" }); + } + + const childrenByParent = new Map<string, string[]>(); + for (const folder of allFolders ?? []) { + const parentId = folder.parent_folder_id as string | null; + if (!parentId) continue; + const children = childrenByParent.get(parentId) ?? []; + children.push(folder.id as string); + childrenByParent.set(parentId, children); + } + + const folderIds = new Set<string>(); + const stack = [folderId]; + while (stack.length > 0) { + const id = stack.pop()!; + if (folderIds.has(id)) continue; + folderIds.add(id); + stack.push(...(childrenByParent.get(id) ?? [])); + } + + let documentsInFolderQuery = db + .from("documents") + .select("id") + .eq("user_id", userId) + .is("project_id", null); + documentsInFolderQuery = + kind === "file" + ? documentsInFolderQuery.or("library_kind.eq.file,library_kind.is.null") + : documentsInFolderQuery.eq("library_kind", kind); + const { data: docs, error: docsError } = await documentsInFolderQuery.in( + "library_folder_id", + [...folderIds], + ); + if (docsError) return void res.status(500).json({ detail: docsError.message }); + + const docIds = (docs ?? []).map((doc) => doc.id as string); + const deleteDocsError = await deleteLibraryDocumentsAndVersionFiles( + db, + userId, + kind, + docIds, + ); + if (deleteDocsError) + return void res.status(500).json({ detail: deleteDocsError.message }); + + const { error } = await db + .from("library_folders") + .delete() + .eq("id", folderId) + .eq("user_id", userId) + .eq("library_kind", kind); + if (error) return void res.status(500).json({ detail: error.message }); + res.status(204).send(); +}); + +// PATCH /library/:kind/documents/:documentId/folder +libraryRouter.patch( + "/:kind/documents/:documentId/folder", + requireAuth, + async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + + const { documentId } = req.params; + const { folder_id } = req.body as { folder_id: string | null }; + const db = createServerSupabase(); + + if (folder_id) { + const folder = await loadLibraryFolder(db, userId, kind, folder_id); + if (!folder) + return void res.status(404).json({ detail: "Folder not found" }); + } + + let moveQuery = db + .from("documents") + .update({ + library_folder_id: folder_id ?? null, + updated_at: new Date().toISOString(), + }) + .eq("id", documentId) + .eq("user_id", userId) + .is("project_id", null); + moveQuery = + kind === "file" + ? moveQuery.or("library_kind.eq.file,library_kind.is.null") + : moveQuery.eq("library_kind", kind); + const { data, error } = await moveQuery + .select("*") + .single(); + if (error || !data) + return void res.status(404).json({ detail: "Document not found" }); + res.json(mapLibraryDocument(data)); + }, +); + +// PATCH /library/:kind/documents/:documentId +libraryRouter.patch( + "/:kind/documents/:documentId", + requireAuth, + async (req, res) => { + const userId = res.locals.userId as string; + const kind = normalizeLibraryKind(req.params.kind); + if (!kind) return void res.status(404).json({ detail: "Library not found" }); + + const { documentId } = req.params; + const db = createServerSupabase(); + let docQuery = db + .from("documents") + .select("id, current_version_id") + .eq("id", documentId) + .eq("user_id", userId) + .is("project_id", null); + docQuery = + kind === "file" + ? docQuery.or("library_kind.eq.file,library_kind.is.null") + : docQuery.eq("library_kind", kind); + const { data: doc } = await docQuery.single(); + if (!doc) return void res.status(404).json({ detail: "Document not found" }); + + const active = doc.current_version_id + ? await db + .from("document_versions") + .select("filename") + .eq("id", doc.current_version_id) + .eq("document_id", documentId) + .single() + : null; + const currentName = + typeof active?.data?.filename === "string" && active.data.filename.trim() + ? active.data.filename.trim() + : "Untitled document"; + const filename = normalizeDocumentFilename(req.body?.filename, currentName); + if (!filename) + return void res.status(400).json({ detail: "filename is required" }); + + let updateQuery = db + .from("documents") + .update({ updated_at: new Date().toISOString() }) + .eq("id", documentId) + .eq("user_id", userId) + .is("project_id", null); + updateQuery = + kind === "file" + ? updateQuery.or("library_kind.eq.file,library_kind.is.null") + : updateQuery.eq("library_kind", kind); + const { data: updated, error } = await updateQuery + .select("*") + .single(); + if (error || !updated) + return void res.status(404).json({ detail: "Document not found" }); + + if (doc.current_version_id) { + await db + .from("document_versions") + .update({ filename }) + .eq("id", doc.current_version_id) + .eq("document_id", documentId); + } + + res.json(mapLibraryDocument({ ...updated, filename })); + }, +); diff --git a/backend/src/routes/projects.ts b/backend/src/routes/projects.ts index 76b7181..cdf03b4 100644 --- a/backend/src/routes/projects.ts +++ b/backend/src/routes/projects.ts @@ -453,7 +453,11 @@ projectsRouter.post( // Standalone → assign project_id const { data: updated, error } = await db .from("documents") - .update({ project_id: projectId, updated_at: new Date().toISOString() }) + .update({ + project_id: projectId, + library_folder_id: null, + updated_at: new Date().toISOString(), + }) .eq("id", documentId) .select("*") .single(); diff --git a/backend/src/routes/tabular.ts b/backend/src/routes/tabular.ts index de9af9b..4c5c5c2 100644 --- a/backend/src/routes/tabular.ts +++ b/backend/src/routes/tabular.ts @@ -997,6 +997,29 @@ tabularRouter.delete( }, ); +// PATCH /tabular-review/:reviewId/chats/:chatId — rename a chat +tabularRouter.patch( + "/:reviewId/chats/:chatId", + requireAuth, + async (req, res) => { + const userId = res.locals.userId as string; + const { chatId } = req.params; + const title = + typeof req.body?.title === "string" ? req.body.title.trim() : ""; + if (!title) + return void res.status(400).json({ detail: "Title is required" }); + const db = createServerSupabase(); + // Owner-only rename — mirrors the delete rule above. + const { error } = await db + .from("tabular_review_chats") + .update({ title: title.slice(0, 200) }) + .eq("id", chatId) + .eq("user_id", userId); + if (error) return void res.status(500).json({ detail: error.message }); + res.status(204).send(); + }, +); + // GET /tabular-review/:reviewId/chats/:chatId/messages — messages for a single chat tabularRouter.get( "/:reviewId/chats/:chatId/messages", diff --git a/frontend/public/icons/app-sidebar/chat.svg b/frontend/public/icons/app-sidebar/chat.svg new file mode 100644 index 0000000..8ad913e --- /dev/null +++ b/frontend/public/icons/app-sidebar/chat.svg @@ -0,0 +1,30 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="body" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#7AB8FF" stop-opacity="0.96"/> + <stop offset="0.45" stop-color="#4F92F7" stop-opacity="0.95"/> + <stop offset="1" stop-color="#2563EB" stop-opacity="0.97"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.75"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.12"/> + <stop offset="1" stop-color="#172554" stop-opacity="0.45"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clip"> + <path d="M18 6 H46 C52.6 6 58 11.4 58 18 V34 C58 40.6 52.6 46 46 46 H30 L19.4 55.4 C17.7 56.9 15 55.7 15 53.4 V45.6 C9.8 44.2 6 39.5 6 34 V18 C6 11.4 11.4 6 18 6 Z"/> + </clipPath> + </defs> + + <path d="M18 6 H46 C52.6 6 58 11.4 58 18 V34 C58 40.6 52.6 46 46 46 H30 L19.4 55.4 C17.7 56.9 15 55.7 15 53.4 V45.6 C9.8 44.2 6 39.5 6 34 V18 C6 11.4 11.4 6 18 6 Z" + fill="url(#body)" stroke="url(#rim)" stroke-width="1.5"/> + + <g clip-path="url(#clip)"> + <ellipse cx="32" cy="10" rx="23" ry="6" fill="url(#sheen)" opacity="0.28"/> + <ellipse cx="14" cy="18" rx="5" ry="10" fill="url(#sheen)" opacity="0.16"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/folder-closed.svg b/frontend/public/icons/app-sidebar/folder-closed.svg new file mode 100644 index 0000000..da3b9c2 --- /dev/null +++ b/frontend/public/icons/app-sidebar/folder-closed.svg @@ -0,0 +1,44 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="back" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#F9D66A"/> + <stop offset="1" stop-color="#D69B1B"/> + </linearGradient> + <linearGradient id="front" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFE68A" stop-opacity="0.98"/> + <stop offset="0.5" stop-color="#F5BE3F" stop-opacity="0.98"/> + <stop offset="1" stop-color="#D89414" stop-opacity="0.98"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.75"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#8A5A0A" stop-opacity="0.42"/> + </linearGradient> + <linearGradient id="rimBack" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.65"/> + <stop offset="0.4" stop-color="#FFFFFF" stop-opacity="0.1"/> + <stop offset="1" stop-color="#8A5A0A" stop-opacity="0.46"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clipFront"> + <path d="M11.5 19.5 H52.5 C55 19.5 57 21.5 57 24 L56.35 49.4 C56.28 51.95 54.15 54 51.6 54 H12.4 C9.85 54 7.72 51.95 7.65 49.4 L7 24 C7 21.5 9 19.5 11.5 19.5 Z"/> + </clipPath> + </defs> + + <!-- back panel with tab, extends to bottom --> + <path d="M8 47 V15 C8 12.2 10.2 10 13 10 H23 C24.4 10 25.7 10.6 26.7 11.6 L31 16 H51 C53.8 16 56 18.2 56 21 V47 C56 49.8 53.8 52 51 52 H13 C10.2 52 8 49.8 8 47 Z" + fill="url(#back)" stroke="url(#rimBack)" stroke-width="1.5"/> + + <!-- front panel, covers all but the tab and a thin strip of back --> + <path d="M11.5 19.5 H52.5 C55 19.5 57 21.5 57 24 L56.35 49.4 C56.28 51.95 54.15 54 51.6 54 H12.4 C9.85 54 7.72 51.95 7.65 49.4 L7 24 C7 21.5 9 19.5 11.5 19.5 Z" + fill="url(#front)" stroke="url(#rim)" stroke-width="1.5"/> + + <g clip-path="url(#clipFront)"> + <ellipse cx="32" cy="23" rx="26" ry="6" fill="url(#sheen)" opacity="0.45"/> + <ellipse cx="11.5" cy="37" rx="4" ry="11" fill="url(#sheen)" opacity="0.26"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/folder-open.svg b/frontend/public/icons/app-sidebar/folder-open.svg new file mode 100644 index 0000000..6c2f8e6 --- /dev/null +++ b/frontend/public/icons/app-sidebar/folder-open.svg @@ -0,0 +1,54 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="back" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#F9D66A"/> + <stop offset="1" stop-color="#D69B1B"/> + </linearGradient> + <linearGradient id="front" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFE68A" stop-opacity="0.98"/> + <stop offset="0.5" stop-color="#F5BE3F" stop-opacity="0.98"/> + <stop offset="1" stop-color="#D89414" stop-opacity="0.98"/> + </linearGradient> + <linearGradient id="paper" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="1" stop-color="#E5E7EB"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.75"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#8A5A0A" stop-opacity="0.42"/> + </linearGradient> + <linearGradient id="rimBack" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.65"/> + <stop offset="0.4" stop-color="#FFFFFF" stop-opacity="0.1"/> + <stop offset="1" stop-color="#8A5A0A" stop-opacity="0.46"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clipFront"> + <path d="M5.5 26 H58.5 C60.2 26 61.4 27.6 61 29.2 L55.9 50.3 C55.3 52.5 53.3 54 51 54 H13 C10.7 54 8.7 52.5 8.1 50.3 L3 29.2 C2.6 27.6 3.8 26 5.5 26 Z"/> + </clipPath> + </defs> + + <!-- folder back --> + <path d="M8 46 V15 C8 12.2 10.2 10 13 10 H23 C24.4 10 25.7 10.6 26.7 11.6 L31 16 H51 C53.8 16 56 18.2 56 21 V46 Z" + fill="url(#back)" stroke="url(#rimBack)" stroke-width="1.5"/> + + <!-- paper peeking out --> + <rect x="14" y="17" width="36" height="14" rx="2.5" fill="url(#paper)"/> + <g stroke="#D1D5DB" stroke-width="1.4" stroke-linecap="round" opacity="0.8"> + <line x1="19" y1="21.5" x2="45" y2="21.5"/> + </g> + + <!-- open front, tilted out, tighter corners --> + <path d="M5.5 26 H58.5 C60.2 26 61.4 27.6 61 29.2 L55.9 50.3 C55.3 52.5 53.3 54 51 54 H13 C10.7 54 8.7 52.5 8.1 50.3 L3 29.2 C2.6 27.6 3.8 26 5.5 26 Z" + fill="url(#front)" stroke="url(#rim)" stroke-width="1.5"/> + + <g clip-path="url(#clipFront)"> + <ellipse cx="32" cy="30" rx="26" ry="6" fill="url(#sheen)" opacity="0.45"/> + <ellipse cx="11.5" cy="40" rx="4" ry="10" fill="url(#sheen)" opacity="0.26"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/library.svg b/frontend/public/icons/app-sidebar/library.svg new file mode 100644 index 0000000..e68ea92 --- /dev/null +++ b/frontend/public/icons/app-sidebar/library.svg @@ -0,0 +1,99 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="leatherBrown" x1="0" y1="0" x2="1" y2="0"> + <stop offset="0" stop-color="#4A2815"/> + <stop offset="0.18" stop-color="#8A5230"/> + <stop offset="0.52" stop-color="#A66A42"/> + <stop offset="0.82" stop-color="#744025"/> + <stop offset="1" stop-color="#351A0D"/> + </linearGradient> + <linearGradient id="leatherBlue" x1="0" y1="0" x2="1" y2="0"> + <stop offset="0" stop-color="#102B52"/> + <stop offset="0.18" stop-color="#235A96"/> + <stop offset="0.52" stop-color="#3678B9"/> + <stop offset="0.82" stop-color="#194A82"/> + <stop offset="1" stop-color="#0A203E"/> + </linearGradient> + <linearGradient id="leatherRed" x1="0" y1="0" x2="1" y2="0"> + <stop offset="0" stop-color="#54151A"/> + <stop offset="0.18" stop-color="#9C2930"/> + <stop offset="0.52" stop-color="#C44349"/> + <stop offset="0.82" stop-color="#812027"/> + <stop offset="1" stop-color="#3C0B10"/> + </linearGradient> + <linearGradient id="leatherGreen" x1="0" y1="0" x2="1" y2="0"> + <stop offset="0" stop-color="#09251B"/> + <stop offset="0.2" stop-color="#14533B"/> + <stop offset="0.5" stop-color="#287B58"/> + <stop offset="0.82" stop-color="#104730"/> + <stop offset="1" stop-color="#061B13"/> + </linearGradient> + <linearGradient id="spineGloss" x1="0" y1="0" x2="1" y2="0"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.08"/> + <stop offset="0.3" stop-color="#FFFFFF" stop-opacity="0.38"/> + <stop offset="0.58" stop-color="#FFFFFF" stop-opacity="0.04"/> + <stop offset="1" stop-color="#000000" stop-opacity="0.42"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#F5E0C8" stop-opacity="0.65"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.1"/> + <stop offset="1" stop-color="#2A1508" stop-opacity="0.55"/> + </linearGradient> + <linearGradient id="gilt" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#F7DE9C"/> + <stop offset="0.5" stop-color="#D9A94E"/> + <stop offset="1" stop-color="#B07E2C"/> + </linearGradient> + <filter id="bookShadow" x="-30%" y="-10%" width="170%" height="130%"> + <feDropShadow dx="1.2" dy="1.4" stdDeviation="1.1" flood-color="#111827" flood-opacity="0.28"/> + </filter> + </defs> + + <!-- brown book --> + <g filter="url(#bookShadow)"> + <rect x="6" y="3.8" width="11" height="49.2" rx="3" fill="url(#leatherBrown)" stroke="url(#rim)" stroke-width="1.4"/> + <rect x="6.7" y="4.5" width="9.6" height="47.8" rx="2.4" fill="url(#spineGloss)"/> + <path d="M8.1 8V49" stroke="#F0C7A2" stroke-opacity="0.28" stroke-width="0.65"/> + <path d="M15.3 7.5V49.5" stroke="#241007" stroke-opacity="0.55" stroke-width="0.8"/> + <rect x="7.4" y="10.8" width="8.2" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + <rect x="7.9" y="19" width="7.2" height="5" rx="1" fill="#3C2210" opacity="0.55"/> + <rect x="7.4" y="38" width="8.2" height="1.2" rx="0.6" fill="url(#gilt)" opacity="0.8"/> + <rect x="7.4" y="46.5" width="8.2" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + </g> + + <!-- blue book --> + <g filter="url(#bookShadow)"> + <rect x="19" y="8" width="11.5" height="45" rx="3" fill="url(#leatherBlue)" stroke="url(#rim)" stroke-width="1.4"/> + <rect x="19.7" y="8.7" width="10.1" height="43.6" rx="2.4" fill="url(#spineGloss)"/> + <path d="M21.2 12V49" stroke="#B9DCFF" stroke-opacity="0.3" stroke-width="0.65"/> + <path d="M28.8 11.5V49.5" stroke="#071A31" stroke-opacity="0.62" stroke-width="0.8"/> + <rect x="20.5" y="14.6" width="8.5" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + <rect x="21" y="22.6" width="7.5" height="5" rx="1" fill="#071D38" opacity="0.65"/> + <rect x="20.5" y="39.5" width="8.5" height="1.2" rx="0.6" fill="url(#gilt)" opacity="0.8"/> + <rect x="20.5" y="46.8" width="8.5" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + </g> + + <!-- red book --> + <g filter="url(#bookShadow)"> + <rect x="32.5" y="5" width="11" height="48" rx="3" fill="url(#leatherRed)" stroke="url(#rim)" stroke-width="1.4"/> + <rect x="33.2" y="5.7" width="9.6" height="46.6" rx="2.4" fill="url(#spineGloss)"/> + <path d="M34.6 9V49" stroke="#FFD0D2" stroke-opacity="0.3" stroke-width="0.65"/> + <path d="M41.8 8.5V49.5" stroke="#35070B" stroke-opacity="0.62" stroke-width="0.8"/> + <rect x="33.9" y="11.6" width="8.2" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + <rect x="34.4" y="19.6" width="7.2" height="5" rx="1" fill="#430B10" opacity="0.68"/> + <rect x="33.9" y="38.5" width="8.2" height="1.2" rx="0.6" fill="url(#gilt)" opacity="0.8"/> + <rect x="33.9" y="46.5" width="8.2" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + </g> + + <!-- green book, leaning against the red book --> + <g transform="rotate(-9 62.1 52)" filter="url(#bookShadow)"> + <rect x="51.6" y="5.2" width="10.5" height="46.8" rx="3" fill="url(#leatherGreen)" stroke="url(#rim)" stroke-width="1.4"/> + <rect x="52.3" y="5.9" width="9.1" height="45.4" rx="2.4" fill="url(#spineGloss)"/> + <path d="M53.7 9.5V48.5" stroke="#FFFFFF" stroke-opacity="0.24" stroke-width="0.65"/> + <path d="M60.4 9V49" stroke="#000000" stroke-opacity="0.72" stroke-width="0.8"/> + <rect x="52.95" y="11.8" width="7.8" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + <rect x="53.45" y="19.8" width="6.8" height="5" rx="1" fill="#052219" opacity="0.76"/> + <rect x="52.95" y="37.5" width="7.8" height="1.2" rx="0.6" fill="url(#gilt)" opacity="0.8"/> + <rect x="52.95" y="45.4" width="7.8" height="1.5" rx="0.75" fill="url(#gilt)" opacity="0.95"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/project-closed.svg b/frontend/public/icons/app-sidebar/project-closed.svg new file mode 100644 index 0000000..62089f3 --- /dev/null +++ b/frontend/public/icons/app-sidebar/project-closed.svg @@ -0,0 +1,42 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="back" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#5B6472"/> + <stop offset="1" stop-color="#2F3947"/> + </linearGradient> + <linearGradient id="front" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#B6BCC6" stop-opacity="0.96"/> + <stop offset="0.48" stop-color="#596272" stop-opacity="0.96"/> + <stop offset="1" stop-color="#424C5A" stop-opacity="0.98"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.75"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#1F2937" stop-opacity="0.46"/> + </linearGradient> + <linearGradient id="rimBack" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.65"/> + <stop offset="0.4" stop-color="#FFFFFF" stop-opacity="0.1"/> + <stop offset="1" stop-color="#1F2937" stop-opacity="0.5"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clipFront"> + <path d="M11.5 19.5 H52.5 C55 19.5 57 21.5 57 24 L56.35 49.4 C56.28 51.95 54.15 54 51.6 54 H12.4 C9.85 54 7.72 51.95 7.65 49.4 L7 24 C7 21.5 9 19.5 11.5 19.5 Z"/> + </clipPath> + </defs> + + <path d="M8 47 V15 C8 12.2 10.2 10 13 10 H23 C24.4 10 25.7 10.6 26.7 11.6 L31 16 H51 C53.8 16 56 18.2 56 21 V47 C56 49.8 53.8 52 51 52 H13 C10.2 52 8 49.8 8 47 Z" + fill="url(#back)" stroke="url(#rimBack)" stroke-width="1.5"/> + + <path d="M11.5 19.5 H52.5 C55 19.5 57 21.5 57 24 L56.35 49.4 C56.28 51.95 54.15 54 51.6 54 H12.4 C9.85 54 7.72 51.95 7.65 49.4 L7 24 C7 21.5 9 19.5 11.5 19.5 Z" + fill="url(#front)" stroke="url(#rim)" stroke-width="1.5"/> + + <g clip-path="url(#clipFront)"> + <ellipse cx="32" cy="23" rx="26" ry="6" fill="url(#sheen)" opacity="0.45"/> + <ellipse cx="11.5" cy="37" rx="4" ry="11" fill="url(#sheen)" opacity="0.26"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/project-opened.svg b/frontend/public/icons/app-sidebar/project-opened.svg new file mode 100644 index 0000000..876e491 --- /dev/null +++ b/frontend/public/icons/app-sidebar/project-opened.svg @@ -0,0 +1,51 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="back" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#5B6472"/> + <stop offset="1" stop-color="#2F3947"/> + </linearGradient> + <linearGradient id="front" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#B6BCC6" stop-opacity="0.96"/> + <stop offset="0.48" stop-color="#596272" stop-opacity="0.96"/> + <stop offset="1" stop-color="#424C5A" stop-opacity="0.98"/> + </linearGradient> + <linearGradient id="paper" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="1" stop-color="#E5E7EB"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.75"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#1F2937" stop-opacity="0.46"/> + </linearGradient> + <linearGradient id="rimBack" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.65"/> + <stop offset="0.4" stop-color="#FFFFFF" stop-opacity="0.1"/> + <stop offset="1" stop-color="#1F2937" stop-opacity="0.5"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clipFront"> + <path d="M5.5 26 H58.5 C60.2 26 61.4 27.6 61 29.2 L55.9 50.3 C55.3 52.5 53.3 54 51 54 H13 C10.7 54 8.7 52.5 8.1 50.3 L3 29.2 C2.6 27.6 3.8 26 5.5 26 Z"/> + </clipPath> + </defs> + + <path d="M8 46 V15 C8 12.2 10.2 10 13 10 H23 C24.4 10 25.7 10.6 26.7 11.6 L31 16 H51 C53.8 16 56 18.2 56 21 V46 Z" + fill="url(#back)" stroke="url(#rimBack)" stroke-width="1.5"/> + + <rect x="14" y="17" width="36" height="14" rx="2.5" fill="url(#paper)"/> + <g stroke="#9CA3AF" stroke-width="1.4" stroke-linecap="round" opacity="0.8"> + <line x1="19" y1="21.5" x2="45" y2="21.5"/> + </g> + + <path d="M5.5 26 H58.5 C60.2 26 61.4 27.6 61 29.2 L55.9 50.3 C55.3 52.5 53.3 54 51 54 H13 C10.7 54 8.7 52.5 8.1 50.3 L3 29.2 C2.6 27.6 3.8 26 5.5 26 Z" + fill="url(#front)" stroke="url(#rim)" stroke-width="1.5"/> + + <g clip-path="url(#clipFront)"> + <ellipse cx="32" cy="30" rx="26" ry="6" fill="url(#sheen)" opacity="0.45"/> + <ellipse cx="11.5" cy="40" rx="4" ry="10" fill="url(#sheen)" opacity="0.26"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/quick-actions.svg b/frontend/public/icons/app-sidebar/quick-actions.svg new file mode 100644 index 0000000..5c21d0e --- /dev/null +++ b/frontend/public/icons/app-sidebar/quick-actions.svg @@ -0,0 +1,30 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="bolt" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#60A5FA" stop-opacity="0.96"/> + <stop offset="0.5" stop-color="#2563EB" stop-opacity="0.95"/> + <stop offset="1" stop-color="#1D4ED8" stop-opacity="0.97"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#172554" stop-opacity="0.45"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clipBolt"> + <path d="M32.91 4.51 L9.79 35.53 Q8 37.94 11 37.94 L29.5 37.94 Q32 37.94 31.72 40.43 L29.64 58.92 Q29.3 61.9 31.09 59.49 L54.21 28.47 Q56 26.06 53 26.06 L34.5 26.06 Q32 26.06 32.28 23.58 L34.36 5.08 Q34.7 2.1 32.91 4.51 Z"/> + </clipPath> + </defs> + + <path d="M32.91 4.51 L9.79 35.53 Q8 37.94 11 37.94 L29.5 37.94 Q32 37.94 31.72 40.43 L29.64 58.92 Q29.3 61.9 31.09 59.49 L54.21 28.47 Q56 26.06 53 26.06 L34.5 26.06 Q32 26.06 32.28 23.58 L34.36 5.08 Q34.7 2.1 32.91 4.51 Z" + fill="url(#bolt)" stroke="url(#rim)" stroke-width="1.5" stroke-linejoin="round"/> + + <g clip-path="url(#clipBolt)"> + <ellipse cx="30.5" cy="7.5" rx="11" ry="5" fill="url(#sheen)" opacity="0.4"/> + <ellipse cx="18" cy="33" rx="4" ry="8" fill="url(#sheen)" opacity="0.24" transform="rotate(-30 18 33)"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/tabular-review.svg b/frontend/public/icons/app-sidebar/tabular-review.svg new file mode 100644 index 0000000..dcbb359 --- /dev/null +++ b/frontend/public/icons/app-sidebar/tabular-review.svg @@ -0,0 +1,39 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="card" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#F9FAFB" stop-opacity="0.96"/> + <stop offset="0.5" stop-color="#EDEFF2" stop-opacity="0.94"/> + <stop offset="1" stop-color="#D1D5DB" stop-opacity="0.96"/> + </linearGradient> + <linearGradient id="header" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#34D399"/> + <stop offset="1" stop-color="#059669"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.9"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#374151" stop-opacity="0.4"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + <clipPath id="clipCard"><rect x="5" y="9" width="54" height="44" rx="10"/></clipPath> + </defs> + + <rect x="5" y="9" width="54" height="44" rx="10" fill="url(#card)" stroke="url(#rim)" stroke-width="1.5"/> + + <g clip-path="url(#clipCard)"> + <rect x="5" y="9" width="54" height="12" fill="url(#header)"/> + <ellipse cx="32" cy="12" rx="25" ry="5" fill="url(#sheen)" opacity="0.6"/> + <g stroke="#9CA3AF" stroke-width="1.6" opacity="0.9"> + <line x1="23" y1="21" x2="23" y2="53"/> + <line x1="41" y1="21" x2="41" y2="53"/> + <line x1="5" y1="31.67" x2="59" y2="31.67"/> + <line x1="5" y1="42.33" x2="59" y2="42.33"/> + </g> + <ellipse cx="10" cy="34" rx="4" ry="12" fill="url(#sheen)" opacity="0.38"/> + <ellipse cx="32" cy="24" rx="26" ry="4" fill="url(#sheen)" opacity="0.45"/> + </g> +</svg> diff --git a/frontend/public/icons/app-sidebar/workflow.svg b/frontend/public/icons/app-sidebar/workflow.svg new file mode 100644 index 0000000..74c59d8 --- /dev/null +++ b/frontend/public/icons/app-sidebar/workflow.svg @@ -0,0 +1,71 @@ +<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="nPurple" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#C4B5FD" stop-opacity="0.96"/> + <stop offset="0.5" stop-color="#8B5CF6" stop-opacity="0.95"/> + <stop offset="1" stop-color="#6D28D9" stop-opacity="0.97"/> + </linearGradient> + <linearGradient id="nBlue" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#93C5FD" stop-opacity="0.96"/> + <stop offset="0.5" stop-color="#3B82F6" stop-opacity="0.95"/> + <stop offset="1" stop-color="#1D4ED8" stop-opacity="0.97"/> + </linearGradient> + <linearGradient id="nYellow" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FDE68A" stop-opacity="0.96"/> + <stop offset="0.5" stop-color="#F59E0B" stop-opacity="0.95"/> + <stop offset="1" stop-color="#B45309" stop-opacity="0.97"/> + </linearGradient> + <linearGradient id="nRed" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FCA5A5" stop-opacity="0.96"/> + <stop offset="0.5" stop-color="#EF4444" stop-opacity="0.95"/> + <stop offset="1" stop-color="#B91C1C" stop-opacity="0.97"/> + </linearGradient> + <linearGradient id="rim" x1="0" y1="0" x2="0" y2="1"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85"/> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.15"/> + <stop offset="1" stop-color="#1F2937" stop-opacity="0.45"/> + </linearGradient> + <linearGradient id="pipe" x1="8" y1="8" x2="56" y2="56" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#D1D5DB" stop-opacity="0.9"/> + <stop offset="1" stop-color="#9CA3AF" stop-opacity="0.9"/> + </linearGradient> + <radialGradient id="sheen"> + <stop offset="0" stop-color="#FFFFFF"/> + <stop offset="0.6" stop-color="#FFFFFF" stop-opacity="0.7"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/> + </radialGradient> + </defs> + + <!-- grey glass pipes --> + <g fill="none" stroke="url(#pipe)" stroke-width="5" stroke-linecap="round"> + <path d="M32 11 L11 32"/> + <path d="M11 32 H53"/> + <path d="M53 32 L32 53"/> + </g> + <g fill="none" stroke="#FFFFFF" stroke-width="1.3" stroke-linecap="round" opacity="0.55"> + <path d="M26.4 15.6 L15.6 26.4"/> + <path d="M18 31.2 H46"/> + <path d="M47.7 36.8 L36.8 47.7"/> + </g> + + <!-- top node: purple --> + <g> + <circle cx="32" cy="11" r="9.1" fill="url(#nPurple)" stroke="url(#rim)" stroke-width="1.4"/> + <ellipse cx="30.4" cy="7.6" rx="4.7" ry="2.4" fill="url(#sheen)" opacity="0.7"/> + </g> + <!-- left node: blue --> + <g> + <circle cx="11" cy="32" r="9.1" fill="url(#nBlue)" stroke="url(#rim)" stroke-width="1.4"/> + <ellipse cx="9.4" cy="28.6" rx="4.7" ry="2.4" fill="url(#sheen)" opacity="0.7"/> + </g> + <!-- right node: yellow --> + <g> + <circle cx="53" cy="32" r="9.1" fill="url(#nYellow)" stroke="url(#rim)" stroke-width="1.4"/> + <ellipse cx="51.4" cy="28.6" rx="4.7" ry="2.4" fill="url(#sheen)" opacity="0.7"/> + </g> + <!-- bottom node: red --> + <g> + <circle cx="32" cy="53" r="9.1" fill="url(#nRed)" stroke="url(#rim)" stroke-width="1.4"/> + <ellipse cx="30.4" cy="49.6" rx="4.7" ry="2.4" fill="url(#sheen)" opacity="0.7"/> + </g> +</svg> diff --git a/frontend/public/icons/file-types/.gitkeep b/frontend/public/icons/file-types/.gitkeep new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/frontend/public/icons/file-types/.gitkeep @@ -0,0 +1 @@ + diff --git a/frontend/public/icons/file-types/chat.svg b/frontend/public/icons/file-types/chat.svg new file mode 100644 index 0000000..553e50d --- /dev/null +++ b/frontend/public/icons/file-types/chat.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"> + <defs> + <linearGradient id="chatBody" x1="4" y1="3.5" x2="21" y2="19.5" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#7DD3FC"/> + <stop offset="0.48" stop-color="#2588F0"/> + <stop offset="1" stop-color="#0F56B8"/> + </linearGradient> + <linearGradient id="chatGlass" x1="5" y1="5" x2="15.8" y2="12.4" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.72"/> + <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.12"/> + </linearGradient> + </defs> + <path d="M2.8 7.1c0-2.05 1.65-3.7 3.7-3.7h11c2.05 0 3.7 1.65 3.7 3.7v5.7c0 2.05-1.65 3.7-3.7 3.7H8.35l-4.3 3.2c-.52.36-1.25 0-1.25-.63V12.8V7.1Z" fill="#0B3F8C" opacity="0.22"/> + <path d="M2.8 6.65c0-2.05 1.65-3.7 3.7-3.7h11c2.05 0 3.7 1.65 3.7 3.7v5.7c0 2.05-1.65 3.7-3.7 3.7H8.35l-4.3 3.2c-.52.36-1.25 0-1.25-.63v-6.27v-5.7Z" fill="url(#chatBody)"/> + <path d="M5.25 5.85c0-.5.4-.9.9-.9h8.95c.9 0 1.24 1.18.49 1.66l-9.25 5.98c-.48.31-1.09-.04-1.09-.61V5.85Z" fill="url(#chatGlass)"/> +</svg> diff --git a/frontend/public/icons/file-types/excel.svg b/frontend/public/icons/file-types/excel.svg new file mode 100644 index 0000000..51f4e8a --- /dev/null +++ b/frontend/public/icons/file-types/excel.svg @@ -0,0 +1,54 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" role="img" aria-label="Excel document"> + <defs> + <linearGradient id="excelDocumentGradient" x1="9.615" y1="3" x2="60.385" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#34D399" stop-opacity="0.97" /> + <stop offset="1" stop-color="#087F5B" stop-opacity="0.97" /> + </linearGradient> + <linearGradient id="excelRim" x1="36" y1="3" x2="36" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85" /> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.18" /> + <stop offset="1" stop-color="#065F46" stop-opacity="0.45" /> + </linearGradient> + <filter id="excelSoft"><feGaussianBlur stdDeviation="1.8" /></filter> + <clipPath id="excelClip"> + <path d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" /> + </clipPath> + </defs> + <path + fill="#065F46" + opacity="0.2" + d="M21.615 3.9h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12v-42c0-6.627 5.373-12 12-12Z" + /> + <path + fill="url(#excelDocumentGradient)" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <g clip-path="url(#excelClip)"> + <ellipse cx="33" cy="8.5" rx="28" ry="7" fill="#FFFFFF" opacity="0.22" filter="url(#excelSoft)" /> + <ellipse cx="13" cy="42" rx="4.5" ry="15" fill="#FFFFFF" opacity="0.12" filter="url(#excelSoft)" /> + </g> + <path fill="#74DDB5" d="M45.385 3v18h15L45.385 3Z" /> + <path + fill="none" + stroke="url(#excelRim)" + stroke-width="1.8" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <rect + x="20.5" + y="34" + width="29" + height="22" + rx="2.5" + fill="none" + stroke="#FFFFFF" + stroke-width="3.25" + /> + <path + fill="none" + stroke="#FFFFFF" + stroke-linecap="round" + stroke-width="3.25" + d="M35 34v22M20.5 45h29" + /> +</svg> diff --git a/frontend/public/icons/file-types/pdf.svg b/frontend/public/icons/file-types/pdf.svg new file mode 100644 index 0000000..0375457 --- /dev/null +++ b/frontend/public/icons/file-types/pdf.svg @@ -0,0 +1,41 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" role="img" aria-label="PDF document"> + <defs> + <linearGradient id="pdfDocumentGradient" x1="9.615" y1="3" x2="60.385" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FF6B6B" stop-opacity="0.97" /> + <stop offset="1" stop-color="#C1121F" stop-opacity="0.97" /> + </linearGradient> + <linearGradient id="pdfRim" x1="36" y1="3" x2="36" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85" /> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.18" /> + <stop offset="1" stop-color="#7F0D16" stop-opacity="0.45" /> + </linearGradient> + <filter id="pdfSoft"><feGaussianBlur stdDeviation="1.8" /></filter> + <clipPath id="pdfClip"> + <path d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" /> + </clipPath> + </defs> + <path + fill="#7F0D16" + opacity="0.2" + d="M21.615 3.9h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12v-42c0-6.627 5.373-12 12-12Z" + /> + <path + fill="url(#pdfDocumentGradient)" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <g clip-path="url(#pdfClip)"> + <ellipse cx="33" cy="8.5" rx="28" ry="7" fill="#FFFFFF" opacity="0.22" filter="url(#pdfSoft)" /> + <ellipse cx="13" cy="42" rx="4.5" ry="15" fill="#FFFFFF" opacity="0.12" filter="url(#pdfSoft)" /> + </g> + <path fill="#FF9A9A" d="M45.385 3v18h15L45.385 3Z" /> + <path + fill="none" + stroke="url(#pdfRim)" + stroke-width="1.8" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <path + fill="#FFFFFF" + d="M19.5 32a2.5 2.5 0 0 1 2.5-2.5h26a2.5 2.5 0 0 1 0 5H22a2.5 2.5 0 0 1-2.5-2.5Zm0 10.5A2.5 2.5 0 0 1 22 40h26a2.5 2.5 0 0 1 0 5H22a2.5 2.5 0 0 1-2.5-2.5Zm0 10.5a2.5 2.5 0 0 1 2.5-2.5h26a2.5 2.5 0 0 1 0 5H22a2.5 2.5 0 0 1-2.5-2.5Z" + /> +</svg> diff --git a/frontend/public/icons/file-types/ppt.svg b/frontend/public/icons/file-types/ppt.svg new file mode 100644 index 0000000..eb8294f --- /dev/null +++ b/frontend/public/icons/file-types/ppt.svg @@ -0,0 +1,47 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" role="img" aria-label="PowerPoint document"> + <defs> + <linearGradient id="pptDocumentGradient" x1="9.615" y1="3" x2="60.385" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FF7043" stop-opacity="0.97" /> + <stop offset="1" stop-color="#B3261E" stop-opacity="0.97" /> + </linearGradient> + <linearGradient id="pptRim" x1="36" y1="3" x2="36" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85" /> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.18" /> + <stop offset="1" stop-color="#7A1712" stop-opacity="0.45" /> + </linearGradient> + <filter id="pptSoft"><feGaussianBlur stdDeviation="1.8" /></filter> + <clipPath id="pptClip"> + <path d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" /> + </clipPath> + </defs> + <path + fill="#7A1712" + opacity="0.2" + d="M21.615 3.9h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12v-42c0-6.627 5.373-12 12-12Z" + /> + <path + fill="url(#pptDocumentGradient)" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <g clip-path="url(#pptClip)"> + <ellipse cx="33" cy="8.5" rx="28" ry="7" fill="#FFFFFF" opacity="0.22" filter="url(#pptSoft)" /> + <ellipse cx="13" cy="42" rx="4.5" ry="15" fill="#FFFFFF" opacity="0.12" filter="url(#pptSoft)" /> + </g> + <path fill="#FF9E80" d="M45.385 3v18h15L45.385 3Z" /> + <path + fill="none" + stroke="url(#pptRim)" + stroke-width="1.8" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <rect + x="18" + y="34.2875" + width="34" + height="22.425" + rx="3" + fill="none" + stroke="#FFFFFF" + stroke-width="3.25" + /> +</svg> diff --git a/frontend/public/icons/file-types/word.svg b/frontend/public/icons/file-types/word.svg new file mode 100644 index 0000000..b912405 --- /dev/null +++ b/frontend/public/icons/file-types/word.svg @@ -0,0 +1,41 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" role="img" aria-label="Word document"> + <defs> + <linearGradient id="wordDocumentGradient" x1="9.615" y1="3" x2="60.385" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#43A5F5" stop-opacity="0.97" /> + <stop offset="1" stop-color="#064BAE" stop-opacity="0.97" /> + </linearGradient> + <linearGradient id="wordRim" x1="36" y1="3" x2="36" y2="69" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FFFFFF" stop-opacity="0.85" /> + <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.18" /> + <stop offset="1" stop-color="#04347A" stop-opacity="0.45" /> + </linearGradient> + <filter id="wordSoft"><feGaussianBlur stdDeviation="1.8" /></filter> + <clipPath id="wordClip"> + <path d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" /> + </clipPath> + </defs> + <path + fill="#04347A" + opacity="0.2" + d="M21.615 3.9h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12v-42c0-6.627 5.373-12 12-12Z" + /> + <path + fill="url(#wordDocumentGradient)" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <g clip-path="url(#wordClip)"> + <ellipse cx="33" cy="8.5" rx="28" ry="7" fill="#FFFFFF" opacity="0.22" filter="url(#wordSoft)" /> + <ellipse cx="13" cy="42" rx="4.5" ry="15" fill="#FFFFFF" opacity="0.12" filter="url(#wordSoft)" /> + </g> + <path fill="#63A2E2" d="M45.385 3v18h15L45.385 3Z" /> + <path + fill="none" + stroke="url(#wordRim)" + stroke-width="1.8" + d="M21.615 3h23.77l15 18v36c0 6.627-5.373 12-12 12h-26.77c-6.627 0-12-5.373-12-12V15c0-6.627 5.373-12 12-12Z" + /> + <path + fill="#FFFFFF" + d="M19.5 32a2.5 2.5 0 0 1 2.5-2.5h26a2.5 2.5 0 0 1 0 5H22a2.5 2.5 0 0 1-2.5-2.5Zm0 10.5A2.5 2.5 0 0 1 22 40h26a2.5 2.5 0 0 1 0 5H22a2.5 2.5 0 0 1-2.5-2.5Zm0 10.5a2.5 2.5 0 0 1 2.5-2.5h26a2.5 2.5 0 0 1 0 5H22a2.5 2.5 0 0 1-2.5-2.5Z" + /> +</svg> diff --git a/frontend/public/workflow.svg b/frontend/public/workflow.svg new file mode 100644 index 0000000..0b187f7 --- /dev/null +++ b/frontend/public/workflow.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"> + <defs> + <linearGradient id="nodePurple" x1="4" y1="4" x2="10" y2="10" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#C9B9FF"/> + <stop offset="1" stop-color="#6A55E8"/> + </linearGradient> + <linearGradient id="nodeCyan" x1="14" y1="4" x2="20" y2="10" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#8DE2FF"/> + <stop offset="1" stop-color="#0E8DD0"/> + </linearGradient> + <linearGradient id="nodeOrange" x1="8" y1="14" x2="16" y2="20" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="#FFD88A"/> + <stop offset="1" stop-color="#EA6F2F"/> + </linearGradient> + </defs> + <path d="M8.55 8.35c2.44 1.3 4.46 1.3 6.9 0M8.25 9.1c1.15 2.95 2.05 4.45 3.75 6.4M15.75 9.1c-1.15 2.95-2.05 4.45-3.75 6.4" stroke="#617187" stroke-width="1.45" stroke-linecap="round" opacity="0.72"/> + <circle cx="6.8" cy="7.25" r="3.45" fill="#3B2E99" opacity="0.2"/> + <circle cx="17.2" cy="7.25" r="3.45" fill="#075985" opacity="0.2"/> + <rect x="8.35" y="14.05" width="7.3" height="6.05" rx="2.05" fill="#9A3412" opacity="0.2"/> + <circle cx="6.8" cy="6.9" r="3.35" fill="url(#nodePurple)"/> + <circle cx="17.2" cy="6.9" r="3.35" fill="url(#nodeCyan)"/> + <rect x="8.35" y="13.65" width="7.3" height="6.05" rx="2.05" fill="url(#nodeOrange)"/> + <path d="M5.75 5.9h2.1M16.15 5.9h2.1M10.65 15.75h2.7" stroke="#FFFFFF" stroke-width="0.9" stroke-linecap="round" opacity="0.86"/> +</svg> diff --git a/frontend/src/app/(pages)/account/features/page.tsx b/frontend/src/app/(pages)/account/features/page.tsx index 4ecfa4e..1c0d68a 100644 --- a/frontend/src/app/(pages)/account/features/page.tsx +++ b/frontend/src/app/(pages)/account/features/page.tsx @@ -3,10 +3,14 @@ import { useEffect, useRef, useState } from "react"; import { Check } from "lucide-react"; import { useUserProfile } from "@/app/contexts/UserProfileContext"; +import { useQuickActionsPreference } from "@/app/components/assistant/quickActionsPreferences"; import { AccountSection } from "../AccountSection"; +import { AccountToggle } from "../AccountToggle"; export default function FeaturesPage() { const { profile, updateLegalResearchUs } = useUserProfile(); + const { visibleActions, showAllQuickActions, hideAllQuickActions } = + useQuickActionsPreference(); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const [saveError, setSaveError] = useState<string | null>(null); @@ -26,6 +30,7 @@ export default function FeaturesPage() { const hasChanges = draftLegalResearchUs !== null && draftLegalResearchUs !== persistedLegalResearchUs; + const quickActionsEnabled = Object.values(visibleActions).some(Boolean); const handleUpdateLegalResearch = async () => { if (saving) return; @@ -46,6 +51,38 @@ export default function FeaturesPage() { return ( <div className="space-y-8"> + <section className="space-y-3"> + <div className="flex items-center gap-2"> + <h2 className="text-2xl font-medium font-serif text-gray-900"> + Assistant + </h2> + </div> + <AccountSection> + <div className="flex flex-col gap-3 px-4 py-5 sm:flex-row sm:items-center sm:justify-between"> + <div className="space-y-1"> + <p className="text-sm font-medium text-gray-900"> + Quick actions + </p> + <p className="text-sm text-gray-500"> + Show the quick actions row on the assistant + start screen. + </p> + </div> + <AccountToggle + checked={quickActionsEnabled} + size="md" + onChange={(checked) => { + if (checked) { + showAllQuickActions(); + } else { + hideAllQuickActions(); + } + }} + /> + </div> + </AccountSection> + </section> + <section className="space-y-3"> <div className="flex items-center gap-2"> <h2 className="text-2xl font-medium font-serif text-gray-900"> diff --git a/frontend/src/app/(pages)/account/models/page.tsx b/frontend/src/app/(pages)/account/models/page.tsx index 64e6a57..6133c6e 100644 --- a/frontend/src/app/(pages)/account/models/page.tsx +++ b/frontend/src/app/(pages)/account/models/page.tsx @@ -4,12 +4,14 @@ import { useEffect, useRef, useState } from "react"; import { AlertCircle, Check, ChevronDown, Loader2 } from "lucide-react"; import { DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/app/components/ui/dropdown-menu"; +import { + LiquidDropdownContent, + LiquidDropdownItem, +} from "@/app/components/ui/liquid-dropdown"; import { useUserProfile } from "@/app/contexts/UserProfileContext"; import type { ApiKeyState } from "@/app/lib/mikeApi"; import { @@ -178,7 +180,7 @@ function ModelPreferenceDropdown({ )} </button> </DropdownMenuTrigger> - <DropdownMenuContent + <LiquidDropdownContent className="z-50" style={{ width: "var(--radix-dropdown-menu-trigger-width)" }} align="start" @@ -198,7 +200,7 @@ function ModelPreferenceDropdown({ ? isModelAvailable(m.id, apiKeys) : true; return ( - <DropdownMenuItem + <LiquidDropdownItem key={m.id} className="cursor-pointer" onSelect={() => onChange(m.id)} @@ -219,13 +221,13 @@ function ModelPreferenceDropdown({ {m.id === value && available && ( <Check className="h-3.5 w-3.5 text-gray-600 ml-1" /> )} - </DropdownMenuItem> + </LiquidDropdownItem> ); })} </div> ); })} - </DropdownMenuContent> + </LiquidDropdownContent> </DropdownMenu> ); } diff --git a/frontend/src/app/(pages)/layout.tsx b/frontend/src/app/(pages)/layout.tsx index 059af46..107c514 100644 --- a/frontend/src/app/(pages)/layout.tsx +++ b/frontend/src/app/(pages)/layout.tsx @@ -102,7 +102,7 @@ export default function MikeLayout({ }, }} > - <div className="h-dvh flex flex-col bg-gray-50/80"> + <div className="h-dvh flex flex-col bg-app-background"> <div className="flex-1 flex min-w-0 overflow-visible"> <AppSidebar isOpen={isSidebarOpen} @@ -113,7 +113,7 @@ export default function MikeLayout({ <div className="relative z-20 flex md:hidden items-center gap-3 overflow-visible px-4 pt-3 pb-2 shrink-0"> <button onClick={handleSidebarToggle} - className="flex h-9 w-9 items-center justify-center rounded-full bg-white/70 text-gray-700 shadow-[0_8px_24px_rgba(15,23,42,0.12)] ring-1 ring-white/70 backdrop-blur-md transition-all hover:bg-white/90 active:scale-95" + className="flex h-9 w-9 items-center justify-center rounded-full bg-app-surface text-gray-700 shadow-[0_8px_24px_rgba(15,23,42,0.12)] ring-1 ring-white/70 backdrop-blur-md transition-all hover:bg-app-floating active:scale-95" title="Open sidebar" aria-label="Open sidebar" > diff --git a/frontend/src/app/(pages)/library/files/page.tsx b/frontend/src/app/(pages)/library/files/page.tsx new file mode 100644 index 0000000..ebbe25c --- /dev/null +++ b/frontend/src/app/(pages)/library/files/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export default function LibraryFilesPage() { + redirect("/library"); +} diff --git a/frontend/src/app/(pages)/library/layout.tsx b/frontend/src/app/(pages)/library/layout.tsx new file mode 100644 index 0000000..a96812c --- /dev/null +++ b/frontend/src/app/(pages)/library/layout.tsx @@ -0,0 +1,8 @@ +"use client"; + +import type { ReactNode } from "react"; +import { LibraryWorkspaceLayout } from "@/app/components/library/LibraryWorkspace"; + +export default function LibraryLayout({ children }: { children: ReactNode }) { + return <LibraryWorkspaceLayout>{children}</LibraryWorkspaceLayout>; +} diff --git a/frontend/src/app/(pages)/library/page.tsx b/frontend/src/app/(pages)/library/page.tsx new file mode 100644 index 0000000..51c140c --- /dev/null +++ b/frontend/src/app/(pages)/library/page.tsx @@ -0,0 +1,5 @@ +import { LibraryCollectionPage } from "@/app/components/library/LibraryWorkspace"; + +export default function LibraryPage() { + return <LibraryCollectionPage kind="files" />; +} diff --git a/frontend/src/app/(pages)/library/templates/page.tsx b/frontend/src/app/(pages)/library/templates/page.tsx new file mode 100644 index 0000000..386832d --- /dev/null +++ b/frontend/src/app/(pages)/library/templates/page.tsx @@ -0,0 +1,7 @@ +"use client"; + +import { LibraryCollectionPage } from "@/app/components/library/LibraryWorkspace"; + +export default function LibraryTemplatesPage() { + return <LibraryCollectionPage kind="templates" />; +} diff --git a/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx b/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx index d892292..f4f029d 100644 --- a/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx @@ -59,6 +59,7 @@ import type { } from "@/app/components/shared/types"; import { expandCitationToEntries, + isDocxFilename, isSpreadsheetFilename, } from "@/app/components/shared/types"; @@ -85,11 +86,6 @@ type EditScrollTarget = { del_w_id?: string | null; }; -function isDocxTab(filename: string) { - const ext = filename.split(".").pop()?.toLowerCase(); - return ext === "docx" || ext === "doc"; -} - const ICON_SIZE = 28; const GAP = 14; const EXPLORER_MIN = 160; @@ -1085,7 +1081,7 @@ export default function ProjectAssistantChatPage({ params }: Props) { </div> <div className="flex-1 min-h-0 overflow-hidden flex flex-col"> {activeTab ? ( - isDocxTab(activeTab.filename) ? ( + isDocxFilename(activeTab.filename) ? ( <DocxView key={activeTab.documentId} documentId={activeTab.documentId} @@ -1265,6 +1261,20 @@ export default function ProjectAssistantChatPage({ params }: Props) { onCancel={cancel} isLoading={isResponseLoading} hideAddDocButton + projectId={projectId} + onDocumentsUploaded={(documents) => + setProject((prev) => + prev + ? { + ...prev, + documents: [ + ...(prev.documents ?? []), + ...documents, + ], + } + : prev, + ) + } projectName={project?.name} projectCmNumber={project?.cm_number} /> diff --git a/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx b/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx index 4ca0401..18cb62d 100644 --- a/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/assistant/page.tsx @@ -1,7 +1,7 @@ "use client"; import { use, useCallback, useEffect, useMemo, useState } from "react"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import { ChevronDown } from "lucide-react"; import { deleteChat, renameChat } from "@/app/lib/mikeApi"; import { ProjectAssistantTable } from "@/app/components/projects/ProjectAssistantTable"; @@ -11,6 +11,7 @@ import { } from "@/app/components/projects/ProjectWorkspace"; import type { Chat } from "@/app/components/shared/types"; import { useAuth } from "@/app/contexts/AuthContext"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; interface Props { params: Promise<{ id: string }>; @@ -31,13 +32,12 @@ function SelectedChatActions({ return ( <div className="relative"> - <button + <TabPillButton onClick={() => onOpenChange(!open)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900" > Actions <ChevronDown className="h-3.5 w-3.5" /> - </button> + </TabPillButton> {open && ( <div className="absolute right-0 top-full z-[120] mt-1 w-36 overflow-hidden rounded-lg border border-white/60 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_12px_32px_rgba(15,23,42,0.14)] backdrop-blur-xl"> <button @@ -56,7 +56,9 @@ export default function ProjectAssistantPage({ params }: Props) { use(params); const workspace = useProjectWorkspace(); const router = useRouter(); + const searchParams = useSearchParams(); const { user } = useAuth(); + const previewEmptyStates = searchParams.get("emptyStates") === "1"; const { ensureProjectChats, projectChats, @@ -70,7 +72,8 @@ export default function ProjectAssistantPage({ params }: Props) { const [renameChatValue, setRenameChatValue] = useState(""); const [actionsOpen, setActionsOpen] = useState(false); const chats = useMemo(() => projectChats ?? [], [projectChats]); - const loading = projectChats === null; + const visibleChats = previewEmptyStates ? [] : chats; + const loading = projectChats === null && !previewEmptyStates; useEffect(() => { void ensureProjectChats(); @@ -78,8 +81,8 @@ export default function ProjectAssistantPage({ params }: Props) { const q = search.toLowerCase(); const filteredChats = q - ? chats.filter((c) => (c.title ?? "").toLowerCase().includes(q)) - : chats; + ? visibleChats.filter((c) => (c.title ?? "").toLowerCase().includes(q)) + : visibleChats; const allChatsSelected = filteredChats.length > 0 && filteredChats.every((c) => selectedChatIds.includes(c.id)); @@ -131,17 +134,17 @@ export default function ProjectAssistantPage({ params }: Props) { return ( <> <ProjectSectionToolbar - actions={ + actions={selectedChatIds.length > 0 ? ( <SelectedChatActions selectedCount={selectedChatIds.length} open={actionsOpen} onOpenChange={setActionsOpen} onDelete={() => void handleDeleteSelectedChats()} /> - } + ) : undefined} /> <ProjectAssistantTable - chats={chats} + chats={visibleChats} filteredChats={filteredChats} selectedChatIds={selectedChatIds} allChatsSelected={allChatsSelected} diff --git a/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx b/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx index bc3c511..27eb504 100644 --- a/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/projects/[id]/tabular-reviews/page.tsx @@ -1,7 +1,7 @@ "use client"; import { use, useCallback, useEffect, useMemo, useState } from "react"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import { ChevronDown } from "lucide-react"; import { deleteTabularReview, @@ -15,6 +15,7 @@ import { } from "@/app/components/projects/ProjectWorkspace"; import type { TabularReview } from "@/app/components/shared/types"; import { useAuth } from "@/app/contexts/AuthContext"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; interface Props { params: Promise<{ id: string }>; @@ -35,13 +36,12 @@ function SelectedReviewActions({ return ( <div className="relative"> - <button + <TabPillButton onClick={() => onOpenChange(!open)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900" > Actions <ChevronDown className="h-3.5 w-3.5" /> - </button> + </TabPillButton> {open && ( <div className="absolute right-0 top-full z-[120] mt-1 w-36 overflow-hidden rounded-lg border border-white/60 bg-white shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_12px_32px_rgba(15,23,42,0.14)] backdrop-blur-xl"> <button @@ -60,7 +60,9 @@ export default function ProjectTabularReviewsPage({ params }: Props) { use(params); const workspace = useProjectWorkspace(); const router = useRouter(); + const searchParams = useSearchParams(); const { user } = useAuth(); + const previewEmptyStates = searchParams.get("emptyStates") === "1"; const { ensureProjectReviews, project, @@ -77,7 +79,8 @@ export default function ProjectTabularReviewsPage({ params }: Props) { const [actionsOpen, setActionsOpen] = useState(false); const docs = project?.documents ?? []; const reviews = useMemo(() => projectReviews ?? [], [projectReviews]); - const loading = projectReviews === null; + const visibleReviews = previewEmptyStates ? [] : reviews; + const loading = projectReviews === null && !previewEmptyStates; useEffect(() => { void ensureProjectReviews(); @@ -85,8 +88,10 @@ export default function ProjectTabularReviewsPage({ params }: Props) { const q = search.toLowerCase(); const filteredReviews = q - ? reviews.filter((r) => (r.title ?? "").toLowerCase().includes(q)) - : reviews; + ? visibleReviews.filter((r) => + (r.title ?? "").toLowerCase().includes(q), + ) + : visibleReviews; const allReviewsSelected = filteredReviews.length > 0 && filteredReviews.every((r) => selectedReviewIds.includes(r.id)); @@ -167,18 +172,18 @@ export default function ProjectTabularReviewsPage({ params }: Props) { return ( <> <ProjectSectionToolbar - actions={ + actions={selectedReviewIds.length > 0 ? ( <SelectedReviewActions selectedCount={selectedReviewIds.length} open={actionsOpen} onOpenChange={setActionsOpen} onDelete={() => void handleDeleteSelectedReviews()} /> - } + ) : undefined} /> <ProjectReviewsTable docs={docs} - reviews={reviews} + reviews={visibleReviews} filteredReviews={filteredReviews} selectedReviewIds={selectedReviewIds} allReviewsSelected={allReviewsSelected} diff --git a/frontend/src/app/(pages)/tabular-reviews/page.tsx b/frontend/src/app/(pages)/tabular-reviews/page.tsx index 669028a..39776eb 100644 --- a/frontend/src/app/(pages)/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/tabular-reviews/page.tsx @@ -1,8 +1,8 @@ "use client"; -import { useEffect, useRef, useState } from "react"; -import { useRouter } from "next/navigation"; -import { ChevronDown, Table2 } from "lucide-react"; +import { useEffect, useMemo, useRef, useState } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import { ChevronDown, Plus } from "lucide-react"; import { RowActionMenuItems, RowActions, @@ -21,10 +21,6 @@ import { TabularReviewDetailsModal } from "@/app/components/tabular/TabularRevie import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import { useAuth } from "@/app/contexts/AuthContext"; import { PageHeader } from "@/app/components/shared/PageHeader"; -import { - GLASS_DROPDOWN, - HeaderFilterDropdown, -} from "@/app/components/shared/HeaderFilterDropdown"; import { TABLE_CHECKBOX_CLASS, TABLE_STICKY_CELL_BG, @@ -33,21 +29,33 @@ import { TableBody, TableCell, TableEmptyState, + TableFilters, + type TableFilterOption, TableHeaderCell, TableHeaderRow, TablePrimaryCell, TableRow, TableScrollArea, + type TableSortDirection, TableStickyCell, } from "@/app/components/shared/TablePrimitive"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; +import { TabularReviewSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { LiquidDropdownSurface } from "@/app/components/ui/liquid-dropdown"; type ReviewScope = "all" | "in-project" | "standalone"; +type ReviewSortKey = "name" | "columns" | "documents" | "created"; const REVIEW_SCOPES: { id: ReviewScope; label: string }[] = [ { id: "all", label: "All" }, { id: "in-project", label: "In Project" }, { id: "standalone", label: "Standalone" }, ]; +const SORT_OPTIONS: TableFilterOption<TableSortDirection>[] = [ + { value: "asc", label: "Ascending" }, + { value: "desc", label: "Descending" }, +]; function formatDate(iso: string) { return new Date(iso).toLocaleDateString(undefined, { @@ -68,13 +76,24 @@ export default function TabularReviewsPage() { ); const [activeScope, setActiveScope] = useState<ReviewScope>("all"); const [projectFilter, setProjectFilter] = useState<string | null>(null); + const [sort, setSort] = useState<{ + key: ReviewSortKey; + direction: TableSortDirection; + } | null>(null); const [search, setSearch] = useState(""); const [selectedIds, setSelectedIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); const [ownerOnlyAction, setOwnerOnlyAction] = useState<string | null>(null); const actionsRef = useRef<HTMLDivElement>(null); const router = useRouter(); + const searchParams = useSearchParams(); const { user } = useAuth(); + const previewEmptyStates = searchParams.get("emptyStates") === "1"; + const effectiveLoading = loading && !previewEmptyStates; + const visibleReviews = useMemo( + () => (previewEmptyStates ? [] : reviews), + [previewEmptyStates, reviews], + ); useEffect(() => { Promise.all([ @@ -105,15 +124,56 @@ export default function TabularReviewsPage() { return () => document.removeEventListener("mousedown", handleClick); }, [actionsOpen]); + const projectNameById = useMemo( + () => new Map(projects.map((project) => [project.id, project.name])), + [projects], + ); const q = search.toLowerCase(); - const filtered = reviews - .filter((r) => { - if (activeScope === "in-project") return !!r.project_id; - if (activeScope === "standalone") return !r.project_id; - return true; - }) - .filter((r) => !projectFilter || r.project_id === projectFilter) - .filter((r) => !q || (r.title ?? "").toLowerCase().includes(q)); + const filtered = useMemo(() => { + const rows = visibleReviews + .filter((r) => { + if (activeScope === "in-project") return !!r.project_id; + if (activeScope === "standalone") return !r.project_id; + return true; + }) + .filter((r) => !projectFilter || r.project_id === projectFilter) + .filter((r) => !q || (r.title ?? "").toLowerCase().includes(q)); + + if (!sort) return rows; + + return [...rows].sort((a, b) => { + const multiplier = sort.direction === "asc" ? 1 : -1; + + if (sort.key === "columns") { + return ( + ((a.columns_config?.length ?? 0) - + (b.columns_config?.length ?? 0)) * + multiplier + ); + } + + if (sort.key === "documents") { + return ( + ((a.document_count ?? 0) - (b.document_count ?? 0)) * + multiplier + ); + } + + if (sort.key === "created") { + return ( + (new Date(a.created_at).getTime() - + new Date(b.created_at).getTime()) * + multiplier + ); + } + + return ( + (a.title ?? "Untitled Review").localeCompare( + b.title ?? "Untitled Review", + ) * multiplier + ); + }); + }, [activeScope, projectFilter, q, sort, visibleReviews]); const allSelected = filtered.length > 0 && @@ -132,6 +192,24 @@ export default function TabularReviewsPage() { ); } + function clearSelection() { + setSelectedIds([]); + setActionsOpen(false); + } + + function handleProjectFilterChange(value: string | null) { + setProjectFilter(value); + clearSelection(); + } + + function handleSortChange( + key: ReviewSortKey, + direction: TableSortDirection | null, + ) { + setSort(direction ? { key, direction } : null); + clearSelection(); + } + const handleNewReview = async ( title: string, projectId?: string, @@ -210,7 +288,7 @@ export default function TabularReviewsPage() { } const projectFilterButton = ( - <HeaderFilterDropdown + <TableFilters label="Filter by project" value={projectFilter} allLabel="All Projects" @@ -218,29 +296,76 @@ export default function TabularReviewsPage() { value: project.id, label: project.name, }))} - onChange={setProjectFilter} + onChange={handleProjectFilterChange} + /> + ); + const nameSortDirection = sort?.key === "name" ? sort.direction : null; + const columnsSortDirection = + sort?.key === "columns" ? sort.direction : null; + const documentsSortDirection = + sort?.key === "documents" ? sort.direction : null; + const createdSortDirection = + sort?.key === "created" ? sort.direction : null; + const nameFilterButton = ( + <TableFilters + label="Sort by review name" + value={nameSortDirection} + allLabel="Default Order" + widthClassName="w-40" + align="right" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("name", direction)} + /> + ); + const columnsFilterButton = ( + <TableFilters + label="Sort by columns" + value={columnsSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("columns", direction)} + /> + ); + const documentsFilterButton = ( + <TableFilters + label="Sort by documents" + value={documentsSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("documents", direction)} + /> + ); + const createdFilterButton = ( + <TableFilters + label="Sort by created date" + value={createdSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("created", direction)} /> ); const toolbarActions = selectedIds.length > 0 ? ( <div ref={actionsRef} className="relative"> - <button + <TabPillButton onClick={() => setActionsOpen((v) => !v)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors" > Actions <ChevronDown className="h-3.5 w-3.5" /> - </button> + </TabPillButton> {actionsOpen && ( - <div className={`absolute top-full right-0 mt-1 z-[100] w-36 overflow-hidden ${GLASS_DROPDOWN}`}> + <LiquidDropdownSurface className="absolute top-full right-0 mt-1 z-[100] w-36 overflow-hidden"> <button onClick={handleDeleteSelected} className="w-full px-3 py-1.5 text-left text-xs text-red-600 transition-colors hover:bg-red-500/10" > Delete </button> - </div> + </LiquidDropdownSurface> )} </div> ) : undefined; @@ -273,7 +398,10 @@ export default function TabularReviewsPage() { <TableToolbar items={REVIEW_SCOPES} active={activeScope} - onChange={setActiveScope} + onChange={(scope) => { + setActiveScope(scope); + clearSelection(); + }} actions={toolbarActions} /> @@ -282,8 +410,8 @@ export default function TabularReviewsPage() { header={ <TableHeaderRow> <TableStickyCell header> - {loading ? ( - <SkeletonDot /> + {effectiveLoading ? ( + <SkeletonDot className="mr-4" /> ) : ( <input type="checkbox" @@ -295,25 +423,38 @@ export default function TabularReviewsPage() { className={TABLE_CHECKBOX_CLASS} /> )} - <span>Name</span> + <span className="mr-1">Name</span> + {!loading && nameFilterButton} </TableStickyCell> <TableHeaderCell className="ml-auto w-24"> - Columns + <div className="flex items-center gap-1"> + <span>Columns</span> + {!loading && columnsFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-24"> + <div className="flex items-center gap-1"> + <span>Documents</span> + {!loading && documentsFilterButton} + </div> </TableHeaderCell> - <TableHeaderCell className="w-24">Documents</TableHeaderCell> <TableHeaderCell className="w-40"> <div className="flex items-center gap-1"> <span>Project</span> - {projectFilterButton} + {!loading && projectFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-32"> + <div className="flex items-center gap-1"> + <span>Created</span> + {!loading && createdFilterButton} </div> </TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> <TableHeaderCell className="w-8" /> </TableHeaderRow> } > - - {loading ? ( + {effectiveLoading ? ( <TableBody> {[1, 2, 3].map((i) => ( <TableRow @@ -324,7 +465,7 @@ export default function TabularReviewsPage() { hover={false} bgClassName="bg-transparent" > - <SkeletonDot /> + <SkeletonDot className="mr-4" /> <SkeletonLine className="h-3.5 w-48" /> </TableStickyCell> <TableCell className="ml-auto w-24"> @@ -347,7 +488,7 @@ export default function TabularReviewsPage() { <TableEmptyState> {activeScope === "all" && !projectFilter ? ( <> - <Table2 className="h-8 w-8 text-gray-300 mb-4" /> + <TabularReviewSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Tabular Reviews </p> @@ -355,13 +496,16 @@ export default function TabularReviewsPage() { Extract data from documents into tables using AI. </p> - <button + <PillButton + tone="black" + size="sm" onClick={() => setNewTROpen(true)} disabled={creating} - className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md disabled:opacity-40" + className="mt-4 px-3" > - + Create New - </button> + <Plus className="h-3.5 w-3.5" /> + Create + </PillButton> </> ) : ( <p className="text-sm text-gray-400"> @@ -372,18 +516,19 @@ export default function TabularReviewsPage() { ) : ( <TableBody> {filtered.map((review) => { - const project = projects.find( - (p) => p.id === review.project_id, - ); + const projectName = review.project_id + ? projectNameById.get(review.project_id) + : null; const rowBg = selectedIds.includes(review.id) ? "bg-gray-50" : TABLE_STICKY_CELL_BG; return ( <TableRow key={review.id} - rightClickDropdown={(close) => ( + rightClickDropdown={(close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onEditDetails={() => { requestReviewDetails(review); }} @@ -436,8 +581,8 @@ export default function TabularReviewsPage() { {review.document_count ?? 0} </TableCell> <TableCell className="w-40 pr-2"> - {project ? ( - project.name + {projectName ? ( + projectName ) : ( <span className="text-gray-300"> — diff --git a/frontend/src/app/components/assistant/AddDocButton.tsx b/frontend/src/app/components/assistant/AddDocButton.tsx index ee80089..cfe69a2 100644 --- a/frontend/src/app/components/assistant/AddDocButton.tsx +++ b/frontend/src/app/components/assistant/AddDocButton.tsx @@ -19,8 +19,8 @@ export function AddDocButton({ onClick={onBrowseAll} className={`flex items-center gap-1 px-2 h-8 rounded-lg text-sm transition-colors cursor-pointer ${ selectedDocIds.length > 0 - ? "text-black hover:bg-gray-100" - : "text-gray-400 hover:text-gray-700 hover:bg-gray-100" + ? "text-gray-700 hover:text-gray-900" + : "text-gray-400 hover:text-gray-700" }`} title="Add documents" aria-label="Add documents" diff --git a/frontend/src/app/components/assistant/AskInputPopup.tsx b/frontend/src/app/components/assistant/AskInputPopup.tsx index 35a9d33..05a20b2 100644 --- a/frontend/src/app/components/assistant/AskInputPopup.tsx +++ b/frontend/src/app/components/assistant/AskInputPopup.tsx @@ -1,27 +1,12 @@ "use client"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { - AlertCircle, - Check, - CornerDownLeft, - Loader2, - Upload, - X, -} from "lucide-react"; -import { cn } from "@/app/lib/utils"; +import { useCallback, useEffect, useState } from "react"; +import { Check, X } from "lucide-react"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; import type { AssistantEvent, Document } from "../shared/types"; import { FileTypeIcon } from "../shared/FileTypeIcon"; -import { - AddDocumentsModal, - invalidateDirectoryCache, -} from "../modals/AddDocumentsModal"; -import { uploadStandaloneDocument } from "@/app/lib/mikeApi"; -import { - SUPPORTED_DOCUMENT_ACCEPT, - formatUnsupportedDocumentWarning, - partitionSupportedDocumentFiles, -} from "@/app/lib/documentUploadValidation"; +import { AddDocumentsModal } from "../modals/AddDocumentsModal"; type AskInputsEvent = Extract<AssistantEvent, { type: "ask_inputs" }>; type AskInputItem = AskInputsEvent["items"][number]; @@ -48,34 +33,47 @@ export function AskInputPopup({ ); const [otherOpen, setOtherOpen] = useState<Record<string, boolean>>({}); const [otherValues, setOtherValues] = useState<Record<string, string>>({}); - const [docsByInput, setDocsByInput] = useState<Record<string, Document[]>>( - {}, - ); + const [docsByInput, setDocsByInput] = useState< + Record<string, Record<number, Document[]>> + >({}); const [skipped, setSkipped] = useState<Set<string>>(() => new Set()); + const [confirmed, setConfirmed] = useState<Set<string>>(() => new Set()); const [submitted, setSubmitted] = useState(false); const [dismissed, setDismissed] = useState(false); - const [uploadingInputId, setUploadingInputId] = useState<string | null>( - null, - ); - const [dragActiveInputId, setDragActiveInputId] = useState<string | null>( - null, - ); - const [uploadWarning, setUploadWarning] = useState<string | null>(null); - const [docSelectorInputId, setDocSelectorInputId] = useState<string | null>( - null, - ); + const [docSelectorTarget, setDocSelectorTarget] = useState<{ + inputId: string; + typeIndex: number; + } | null>(null); const [activeInputId, setActiveInputId] = useState( () => event.items[0]?.id ?? "", ); - const fileInputsRef = useRef<Record<string, HTMLInputElement | null>>({}); + + const docsForItem = useCallback( + (inputId: string) => { + const seen = new Set<string>(); + return Object.values(docsByInput[inputId] ?? {}) + .flat() + .filter((doc) => { + if (seen.has(doc.id)) return false; + seen.add(doc.id); + return true; + }); + }, + [docsByInput], + ); + + const itemAnswered = useCallback( + (item: AskInputItem) => { + if (item.kind === "choice") return !!choiceAnswers[item.id]?.trim(); + return docsForItem(item.id).length > 0; + }, + [choiceAnswers, docsForItem], + ); const itemResolved = useCallback( - (item: AskInputItem) => { - if (skipped.has(item.id)) return true; - if (item.kind === "choice") return !!choiceAnswers[item.id]?.trim(); - return (docsByInput[item.id] ?? []).length > 0; - }, - [choiceAnswers, docsByInput, skipped], + (item: AskInputItem) => + skipped.has(item.id) || confirmed.has(item.id), + [confirmed, skipped], ); const firstUnresolvedId = useCallback( @@ -105,55 +103,52 @@ export function AskInputPopup({ if (shouldSkip) goToNextUnresolved(id); }; - const addDocs = (inputId: string, selected: Document[]) => { + const confirmItem = (id: string) => { + setConfirmed((prev) => { + const next = new Set(prev); + next.add(id); + return next; + }); + goToNextUnresolved(id); + }; + + const addDocs = ( + inputId: string, + typeIndex: number, + selected: Document[], + ) => { if (selected.length === 0) return; setSkippedFor(inputId, false); setDocsByInput((prev) => { - const current = prev[inputId] ?? []; + const byType = prev[inputId] ?? {}; + const current = byType[typeIndex] ?? []; const existing = new Set(current.map((doc) => doc.id)); return { ...prev, - [inputId]: [ - ...current, - ...selected.filter((doc) => !existing.has(doc.id)), - ], + [inputId]: { + ...byType, + [typeIndex]: [ + ...current, + ...selected.filter((doc) => !existing.has(doc.id)), + ], + }, }; }); - goToNextUnresolved(inputId); }; - const removeDoc = (inputId: string, docId: string) => { - setDocsByInput((prev) => ({ - ...prev, - [inputId]: (prev[inputId] ?? []).filter((doc) => doc.id !== docId), - })); - }; - - const handleFiles = async (inputId: string, incomingFiles: File[]) => { - if (!incomingFiles.length || submitted) return; - const { supported, unsupported } = - partitionSupportedDocumentFiles(incomingFiles); - setUploadWarning(formatUnsupportedDocumentWarning(unsupported)); - if (supported.length === 0) { - const input = fileInputsRef.current[inputId]; - if (input) input.value = ""; - return; - } - setUploadingInputId(inputId); - try { - const uploaded = await Promise.all( - supported.map((file) => uploadStandaloneDocument(file)), - ); - invalidateDirectoryCache(); - addDocs(inputId, uploaded); - } catch (err) { - console.error("Document upload failed:", err); - } finally { - setUploadingInputId(null); - setDragActiveInputId(null); - const input = fileInputsRef.current[inputId]; - if (input) input.value = ""; - } + const removeDoc = (inputId: string, typeIndex: number, docId: string) => { + setDocsByInput((prev) => { + const byType = prev[inputId] ?? {}; + return { + ...prev, + [inputId]: { + ...byType, + [typeIndex]: (byType[typeIndex] ?? []).filter( + (doc) => doc.id !== docId, + ), + }, + }; + }); }; const chooseAnswer = ( @@ -164,16 +159,12 @@ export function AskInputPopup({ if (!trimmed || submitted) return; setSkippedFor(item.id, false); setChoiceAnswers((prev) => ({ ...prev, [item.id]: trimmed })); - goToNextUnresolved(item.id); + setOtherOpen((prev) => ({ ...prev, [item.id]: false })); }; const allResolved = event.items.length > 0 && event.items.every(itemResolved); - const canSubmit = - !submitted && - !uploadingInputId && - allResolved && - !!onSubmit; + const canSubmit = !submitted && allResolved && !!onSubmit; const buildResponse = (): AskInputsResponse => { const responses = event.items.map((item) => { @@ -203,9 +194,7 @@ export function AskInputPopup({ return { id: item.id, kind: "documents" as const, - filenames: (docsByInput[item.id] ?? []).map( - (doc) => doc.filename, - ), + filenames: docsForItem(item.id).map((doc) => doc.filename), }; }); return { type: "ask_inputs_response", responses }; @@ -222,7 +211,7 @@ export function AskInputPopup({ ) { return []; } - return docsByInput[item.id] ?? []; + return docsForItem(item.id); }); const seen = new Set<string>(); return docs.flatMap((doc) => { @@ -279,43 +268,38 @@ export function AskInputPopup({ return ( <> <div className="w-full overflow-hidden rounded-[18px] border border-white/65 bg-white/60 pb-3 font-serif shadow-[0_4px_10px_rgba(15,23,42,0.084),inset_0_1px_0_rgba(255,255,255,0.595),inset_0_-6px_14px_rgba(255,255,255,0.126)] backdrop-blur-2xl md:rounded-[22px]"> - <div className="flex min-w-0 items-center justify-between gap-2 bg-gray-100/70 px-3 py-2"> + <div className="flex min-w-0 items-center justify-between gap-2 px-3 py-2"> <div className="flex min-w-0 items-center"> <div className="text-sm text-gray-500"> {submitted ? ( "Inputs sent" ) : ( - <div className="flex flex-wrap gap-x-3 gap-y-1"> - {event.items.map((item, index) => { + <div className="flex flex-wrap gap-x-1.5 gap-y-1"> + {event.items.map((item) => { const isActive = item.id === activeItem?.id; const isResolved = itemResolved(item); const label = item.kind === "choice" - ? `Question ${index + 1}` - : "Add Documents"; + ? "Question" + : "Documents"; return ( - <button + <TabPillButton key={item.id} - type="button" + active={isActive} disabled={submitted} onClick={() => setActiveInputId(item.id) } - className={cn( - "inline-flex items-center gap-1 rounded-full py-0.5 font-sans text-[10px] transition-colors disabled:cursor-default", - isActive - ? "text-gray-900" - : "text-gray-400 hover:text-gray-700", - )} + className="h-6 px-2 font-sans text-[10px]" > - {label} {isResolved ? ( <Check className="h-3 w-3" /> ) : ( <span className="h-2.5 w-2.5 rounded-full border border-current opacity-70" /> )} - </button> + {label} + </TabPillButton> ); })} </div> @@ -323,20 +307,21 @@ export function AskInputPopup({ </div> </div> {!submitted && ( - <button + <TabPillButton type="button" onClick={dismiss} - className="shrink-0 rounded-full py-0.5 font-sans text-[10px] text-gray-500 transition-colors hover:text-gray-700" + aria-label="Dismiss" + className="h-6 w-6 shrink-0 px-0" > - Esc (end response) - </button> + <X className="h-3 w-3" /> + </TabPillButton> )} </div> <div className="px-3"> {activeItem && ( <div className="mt-3 flex min-h-54 flex-col"> - <div className="mt-auto"> + <div> <div className="flex items-start justify-between gap-2"> <div className="min-w-0 flex-1"> {activeItem.kind === "choice" ? ( @@ -344,25 +329,9 @@ export function AskInputPopup({ {activeItem.question} </p> ) : ( - <DocumentPrompt item={activeItem} /> + <DocumentPrompt /> )} </div> - {!submitted && ( - <button - type="button" - onClick={() => - setSkippedFor( - activeItem.id, - !skipped.has(activeItem.id), - ) - } - className="shrink-0 rounded-full py-0.5 font-sans text-[10px] text-gray-500 transition-colors hover:text-gray-800 disabled:cursor-default disabled:opacity-40" - > - {skipped.has(activeItem.id) - ? "Unskip" - : "Skip"} - </button> - )} </div> <div className="pt-3"> @@ -386,18 +355,36 @@ export function AskInputPopup({ onAnswer={(answer) => chooseAnswer(activeItem, answer) } - onOtherOpen={() => + onOtherOpen={() => { setOtherOpen((prev) => ({ ...prev, [activeItem.id]: true, - })) - } - onOtherValue={(value) => + })); + setChoiceAnswers((prev) => ({ + ...prev, + [activeItem.id]: ( + otherValues[ + activeItem.id + ] ?? "" + ).trim(), + })); + }} + onOtherValue={(value) => { setOtherValues((prev) => ({ ...prev, [activeItem.id]: value, - })) - } + })); + setChoiceAnswers((prev) => ({ + ...prev, + [activeItem.id]: + value.trim(), + })); + if (value.trim()) + setSkippedFor( + activeItem.id, + false, + ); + }} /> ) : ( <DocumentInput @@ -406,77 +393,97 @@ export function AskInputPopup({ submitted || skipped.has(activeItem.id) } - docs={ - docsByInput[activeItem.id] ?? [] + docsByType={ + docsByInput[activeItem.id] ?? {} } - uploading={ - uploadingInputId === - activeItem.id + onOpenSelector={(typeIndex) => + setDocSelectorTarget({ + inputId: activeItem.id, + typeIndex, + }) } - dragActive={ - dragActiveInputId === - activeItem.id - } - fileInputRef={(node) => { - fileInputsRef.current[ - activeItem.id - ] = node; - }} - onFiles={(files) => - void handleFiles( + onRemoveDoc={(typeIndex, docId) => + removeDoc( activeItem.id, - files, + typeIndex, + docId, ) } - onDragActive={(active) => - setDragActiveInputId( - active - ? activeItem.id - : null, - ) - } - onBrowse={() => - setDocSelectorInputId( - activeItem.id, - ) - } - onRemoveDoc={(docId) => - removeDoc(activeItem.id, docId) - } /> )} </div> </div> - </div> - )} - - {uploadWarning && ( - <div className="mt-3 flex items-center gap-2 rounded-lg border border-red-100 bg-red-50 px-3 py-2 font-sans text-xs text-gray-900"> - <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-600" /> - <span className="min-w-0 flex-1"> - {uploadWarning} - </span> - <button - type="button" - onClick={() => setUploadWarning(null)} - className="shrink-0 rounded p-0.5 text-black hover:bg-gray-100" - aria-label="Dismiss warning" - > - <X className="h-3.5 w-3.5" /> - </button> + {!submitted && ( + <div className="mt-auto flex items-center justify-end gap-2 pt-3"> + <button + type="button" + onClick={() => + setSkippedFor( + activeItem.id, + !skipped.has(activeItem.id), + ) + } + className="px-1 font-sans text-[10px] text-gray-500 transition-colors hover:text-gray-800" + > + {skipped.has(activeItem.id) + ? "Unskip" + : "Skip"} + </button> + <PillButton + tone="black" + type="button" + disabled={ + skipped.has(activeItem.id) || + confirmed.has(activeItem.id) || + !itemAnswered(activeItem) + } + onClick={() => + confirmItem(activeItem.id) + } + className="h-6 px-3 font-sans text-[10px]" + > + {confirmed.has(activeItem.id) ? ( + <> + Confirmed + <Check className="h-3 w-3" /> + </> + ) : ( + "Confirm" + )} + </PillButton> + </div> + )} </div> )} </div> </div> <AddDocumentsModal - open={!!docSelectorInputId} - onClose={() => setDocSelectorInputId(null)} + open={!!docSelectorTarget} + keepMounted + onClose={() => setDocSelectorTarget(null)} onSelect={(selected) => { - if (docSelectorInputId) - addDocs(docSelectorInputId, selected); + if (!docSelectorTarget) return; + // A document can only be added once per input, so docs + // already living in another type row are left where they + // are; only genuinely new picks join the targeted row. + const existing = new Set( + docsForItem(docSelectorTarget.inputId).map( + (doc) => doc.id, + ), + ); + addDocs( + docSelectorTarget.inputId, + docSelectorTarget.typeIndex, + selected.filter((doc) => !existing.has(doc.id)), + ); }} breadcrumb={["Assistant", "Add Documents"]} + initialSelectedDocuments={ + docSelectorTarget + ? docsForItem(docSelectorTarget.inputId) + : [] + } /> </> ); @@ -502,23 +509,23 @@ function OptionInput({ onOtherValue: (value: string) => void; }) { return ( - <div className="mt-2 grid gap-2"> + <div className="mt-2 grid gap-1.5"> {item.options.map((option, idx) => { const answer = option.value.trim(); - const isSelected = selectedAnswer === answer.trim(); + const isSelected = !otherOpen && selectedAnswer === answer; return ( <button key={`${item.id}-${option.value}-${idx}`} type="button" disabled={disabled} onClick={() => onAnswer(answer)} - className={`w-full rounded-lg p-2 text-left transition-colors ${ + className={`w-full rounded-lg px-3 py-2 text-left transition-colors ${ isSelected ? "bg-gray-200/80 text-gray-900" : "bg-gray-100/70 text-gray-700 hover:bg-gray-200/70 disabled:hover:bg-gray-100/70" } disabled:cursor-default disabled:opacity-60`} > - <span className="flex items-start gap-1.5"> + <span className="flex items-start gap-1"> <span className="mt-0.5 w-4 shrink-0 text-xs text-gray-500"> {idx + 1}. </span> @@ -534,57 +541,48 @@ function OptionInput({ })} {item.allow_other && ( <div - className={`w-full rounded-lg p-2 transition-colors ${ + className={`w-full rounded-lg px-3 py-2 transition-colors ${ otherOpen ? "bg-gray-200/80" : "cursor-pointer bg-gray-100/70 hover:bg-gray-200/70" } ${disabled ? "cursor-default opacity-60" : ""}`} onClick={() => !otherOpen && !disabled && onOtherOpen()} > - <span className="flex items-start gap-1.5"> + <span className="flex items-start gap-1"> <span className="mt-0.5 w-4 shrink-0 text-xs text-gray-500"> {item.options.length + 1}. </span> {otherOpen ? ( - <span className="min-w-0 flex-1 flex items-end gap-2"> + <span className="min-w-0 flex-1 flex items-start gap-2"> <textarea name={`other-${item.id}`} rows={1} autoFocus value={otherValue} disabled={disabled} + onFocus={(e) => { + const end = e.target.value.length; + e.target.setSelectionRange(end, end); + e.target.style.height = "auto"; + e.target.style.height = `${e.target.scrollHeight}px`; + }} onChange={(e) => { onOtherValue(e.target.value); e.target.style.height = "auto"; e.target.style.height = `${e.target.scrollHeight}px`; }} - onKeyDown={(e) => { - if (e.key === "Enter" && !e.shiftKey) { - e.preventDefault(); - onAnswer(otherValue); - } - }} placeholder="Type your answer..." className="flex-1 resize-none overflow-hidden bg-transparent text-sm leading-5 text-gray-600 outline-none placeholder:text-gray-400" /> - <button - type="button" - disabled={disabled || !otherValue.trim()} - onClick={(e) => { - e.stopPropagation(); - onAnswer(otherValue); - }} - className="shrink-0 flex items-center gap-1 rounded-full bg-blue-600 px-3 py-0.5 font-sans text-[10px] text-white transition-colors hover:bg-blue-700 disabled:cursor-default disabled:opacity-40" - > - Set - <CornerDownLeft className="h-3 w-3" /> - </button> </span> ) : ( <span className="min-w-0 flex-1 text-sm text-gray-700"> {item.other_label || "Other"} </span> )} + {otherOpen && ( + <Check className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-700" /> + )} </span> </div> )} @@ -592,139 +590,113 @@ function OptionInput({ ); } -function DocumentPrompt({ - item, -}: { - item: Extract<AskInputItem, { kind: "documents" }>; -}) { - const documentTypes = item.document_types ?? []; +function DocumentPrompt() { return ( - <div className="mt-0.5 text-sm text-gray-800"> - <p>Add the following documents if available:</p> - {documentTypes.length > 0 && ( - <div className="mt-1 space-y-0.5 text-gray-700"> - {documentTypes.map((documentType, index) => ( - <p - key={`${documentType}-${index}`} - className="break-words" - > - {index + 1}. {documentType} - </p> - ))} - </div> - )} - </div> + <p className="mt-0.5 text-sm text-gray-800"> + Add the following documents if available: + </p> ); } function DocumentInput({ item, disabled, - docs, - uploading, - dragActive, - fileInputRef, - onFiles, - onDragActive, - onBrowse, + docsByType, + onOpenSelector, onRemoveDoc, }: { item: Extract<AskInputItem, { kind: "documents" }>; disabled?: boolean; - docs: Document[]; - uploading: boolean; - dragActive: boolean; - fileInputRef: (node: HTMLInputElement | null) => void; - onFiles: (files: File[]) => void; - onDragActive: (active: boolean) => void; - onBrowse: () => void; - onRemoveDoc: (docId: string) => void; + docsByType: Record<number, Document[]>; + onOpenSelector: (typeIndex: number) => void; + onRemoveDoc: (typeIndex: number, docId: string) => void; }) { + const documentTypes = item.document_types ?? []; + const rows = documentTypes.length > 0 ? documentTypes : ["Documents"]; return ( - <div className="mt-2"> - <input - ref={fileInputRef} - type="file" - accept={SUPPORTED_DOCUMENT_ACCEPT} - multiple - className="hidden" - onChange={(e) => onFiles(Array.from(e.target.files || []))} - /> - <button - type="button" - disabled={disabled || uploading} - onClick={onBrowse} - onDragEnter={(e) => { - e.preventDefault(); - e.stopPropagation(); - if (!disabled && !uploading) onDragActive(true); - }} - onDragOver={(e) => { - e.preventDefault(); - e.stopPropagation(); - if (!disabled && !uploading) onDragActive(true); - }} - onDragLeave={(e) => { - e.preventDefault(); - e.stopPropagation(); - onDragActive(false); - }} - onDrop={(e) => { - e.preventDefault(); - e.stopPropagation(); - onDragActive(false); - onFiles(Array.from(e.dataTransfer.files || [])); - }} - className={`flex h-[168px] w-full flex-col items-center justify-center gap-1.5 rounded-lg px-3 py-4 font-sans text-xs transition-colors disabled:cursor-default disabled:opacity-50 ${ - dragActive - ? "bg-gray-300 text-gray-900" - : "bg-gray-100/80 text-gray-500 hover:bg-gray-200/80 hover:text-gray-800" - }`} - > - {uploading ? ( - <Loader2 className="h-4 w-4 animate-spin" /> - ) : ( - <Upload className="h-4 w-4" /> - )} - <span className="text-gray-800"> - {uploading - ? "Uploading documents..." - : "Drop files here or click to choose documents"} - </span> - <span className="text-[11px] text-gray-400"> - PDF, Word, Excel, or PowerPoint - </span> - </button> - - {docs.length > 0 && ( - <div className="mt-2 flex flex-wrap gap-1.5"> - {docs.map((doc) => { - return ( - <div - key={`${item.id}-${doc.id}`} - className="inline-flex items-center gap-1 rounded-[10px] border border-white/70 bg-white py-0.5 pl-2 pr-1 text-xs text-gray-800 shadow-[0_2px_6px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-xl" - > - <FileTypeIcon - fileType={doc.file_type} - className="h-2.5 w-2.5" - /> - <span className="max-w-[160px] truncate"> - {doc.filename} + <div className="mt-2 grid gap-1.5"> + {rows.map((documentType, idx) => { + const docs = docsByType[idx] ?? []; + return ( + <div + key={`${item.id}-${documentType}-${idx}`} + role="button" + tabIndex={disabled ? -1 : 0} + aria-disabled={disabled} + onClick={() => !disabled && onOpenSelector(idx)} + onKeyDown={(e) => { + if ( + !disabled && + (e.key === "Enter" || e.key === " ") + ) { + e.preventDefault(); + onOpenSelector(idx); + } + }} + className={`w-full rounded-lg px-3 py-2 text-left transition-colors ${ + docs.length > 0 + ? "bg-gray-200/80 text-gray-900" + : "bg-gray-100/70 text-gray-700" + } ${ + disabled + ? "cursor-default opacity-60" + : "cursor-pointer hover:bg-gray-200/70" + }`} + > + <span className="flex items-start gap-1"> + <span className="mt-0.5 w-4 shrink-0 text-xs text-gray-500"> + {idx + 1}. + </span> + <span className="min-w-0 flex-1"> + <span className="block break-words text-sm"> + {documentType} </span> - {!disabled && ( - <button - type="button" - onClick={() => onRemoveDoc(doc.id)} - className="ml-0.5 rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-900/5 hover:text-gray-700" - > - <X className="h-2.5 w-2.5" /> - </button> + {docs.length > 0 && ( + <span className="mt-1.5 flex flex-wrap gap-1.5"> + {docs.map((doc) => ( + <span + key={`${item.id}-${doc.id}`} + onClick={(e) => + e.stopPropagation() + } + className="inline-flex items-center gap-1 rounded-[10px] border border-white/70 bg-white py-0.5 pl-2 pr-1 text-xs text-gray-800 shadow-[0_2px_6px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-xl" + > + <FileTypeIcon + fileType={doc.file_type} + className="h-2.5 w-2.5" + /> + <span className="max-w-[160px] truncate"> + {doc.filename} + </span> + {!disabled && ( + <button + type="button" + onClick={(e) => { + e.stopPropagation(); + onRemoveDoc( + idx, + doc.id, + ); + }} + className="ml-0.5 rounded-full p-0.5 text-gray-400 transition-colors hover:bg-gray-900/5 hover:text-gray-700" + > + <X className="h-2.5 w-2.5" /> + </button> + )} + </span> + ))} + </span> )} - </div> - ); - })} - </div> - )} + </span> + <span className="mt-0.5 shrink-0 whitespace-nowrap font-sans text-[10px] text-gray-500"> + {docs.length > 0 + ? `${docs.length} file${docs.length === 1 ? "" : "s"} added` + : "+ Add"} + </span> + </span> + </div> + ); + })} </div> ); } diff --git a/frontend/src/app/components/assistant/AssistantSidePanel.tsx b/frontend/src/app/components/assistant/AssistantSidePanel.tsx index eb22b23..de201b2 100644 --- a/frontend/src/app/components/assistant/AssistantSidePanel.tsx +++ b/frontend/src/app/components/assistant/AssistantSidePanel.tsx @@ -18,6 +18,7 @@ import { type CaseTab, } from "./CaseLawPanel"; import { cn } from "@/app/lib/utils"; +import { LIQUID_PANEL_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; // --------------------------------------------------------------------------- // Tab data @@ -196,7 +197,8 @@ export function AssistantSidePanel({ ref={panelRef} className={cn( "relative flex h-full w-full shrink-0 flex-col md:my-3 md:mr-3 md:h-[calc(100%-1.5rem)] md:w-[var(--assistant-panel-width)]", - "rounded-2xl border border-white/70 bg-white shadow-[0_6px_18px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18),inset_1px_0_0_rgba(255,255,255,0.5)] backdrop-blur-2xl overflow-hidden", + LIQUID_PANEL_SURFACE_CLASS, + "overflow-hidden", )} style={{ "--assistant-panel-width": `${panelWidth}px`, diff --git a/frontend/src/app/components/assistant/ChatInput.tsx b/frontend/src/app/components/assistant/ChatInput.tsx index 206ef38..04049f2 100644 --- a/frontend/src/app/components/assistant/ChatInput.tsx +++ b/frontend/src/app/components/assistant/ChatInput.tsx @@ -11,12 +11,14 @@ import { import { ArrowRight, Check, - FolderOpen, Library, + Loader2, Square, + Waypoints, X, } from "lucide-react"; import { AddDocButton } from "./AddDocButton"; +import { UploadOverlay } from "./UploadOverlay"; import { FileTypeIcon } from "../shared/FileTypeIcon"; import { AddDocumentsModal } from "../modals/AddDocumentsModal"; import { AssistantWorkflowModal } from "./AssistantWorkflowModal"; @@ -30,10 +32,24 @@ import { type ModelProvider, } from "@/app/lib/modelAvailability"; import type { Document, Message } from "../shared/types"; +import type { DirectoryTab } from "../shared/useDirectoryData"; import { cn } from "@/app/lib/utils"; +import { + uploadProjectDocument, + uploadStandaloneDocument, +} from "@/app/lib/mikeApi"; +import { + formatUnsupportedDocumentWarning, + partitionSupportedDocumentFiles, +} from "@/app/lib/documentUploadValidation"; export interface ChatInputHandle { addDoc: (doc: Document) => void; + startWorkflowDocumentSelection: ( + workflow: { id: string; title: string }, + prompt?: string, + options?: { initialDocumentTab?: DirectoryTab }, + ) => void; } interface Props { @@ -42,9 +58,10 @@ interface Props { isLoading: boolean; hideAddDocButton?: boolean; hideWorkflowButton?: boolean; - onProjectsClick?: () => void; projectName?: string; projectCmNumber?: string | null; + projectId?: string; + onDocumentsUploaded?: (documents: Document[]) => void; } export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( @@ -54,9 +71,10 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( isLoading, hideAddDocButton, hideWorkflowButton, - onProjectsClick, projectName, projectCmNumber, + projectId, + onDocumentsUploaded, }: Props, ref, ) { @@ -73,9 +91,16 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( const controlsRef = useRef<HTMLDivElement>(null); const [compactControls, setCompactControls] = useState(false); const [docSelectorOpen, setDocSelectorOpen] = useState(false); + const [docSelectorInitialTab, setDocSelectorInitialTab] = + useState<DirectoryTab>("files"); const [workflowModalOpen, setWorkflowModalOpen] = useState(false); const [apiKeyModalProvider, setApiKeyModalProvider] = useState<ModelProvider | null>(null); + const [isDraggingFiles, setIsDraggingFiles] = useState(false); + const [uploadingFilenames, setUploadingFilenames] = useState<string[]>([]); + const [uploadWarning, setUploadWarning] = useState<string | null>(null); + const [droppedDocuments, setDroppedDocuments] = useState<Document[]>([]); + const dragDepthRef = useRef(0); useImperativeHandle(ref, () => ({ addDoc: (doc: Document) => { @@ -84,6 +109,19 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( return [...prev, doc]; }); }, + startWorkflowDocumentSelection: (workflow, prompt, options) => { + setSelectedWorkflow(workflow); + setDocSelectorInitialTab(options?.initialDocumentTab ?? "files"); + if (prompt) { + setValue((current) => current || prompt); + requestAnimationFrame(() => { + if (!textareaRef.current) return; + textareaRef.current.style.height = "auto"; + textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; + }); + } + setDocSelectorOpen(true); + }, })); useEffect(() => { @@ -109,6 +147,102 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( [], ); + const addAttachedDocuments = useCallback((documents: Document[]) => { + setAttachedDocs((prev) => { + const existing = new Set(prev.map((document) => document.id)); + return [ + ...prev, + ...documents.filter((document) => !existing.has(document.id)), + ]; + }); + }, []); + + const handleDroppedFiles = useCallback( + async (files: File[]) => { + const { supported, unsupported } = + partitionSupportedDocumentFiles(files); + setUploadWarning(formatUnsupportedDocumentWarning(unsupported)); + if (supported.length === 0) return; + + setUploadingFilenames(supported.map((file) => file.name)); + const results = await Promise.allSettled( + supported.map((file) => + projectId + ? uploadProjectDocument(projectId, file) + : uploadStandaloneDocument(file), + ), + ); + const uploaded = results.flatMap((result) => + result.status === "fulfilled" ? [result.value] : [], + ); + if (uploaded.length > 0) { + addAttachedDocuments(uploaded); + setDroppedDocuments((prev) => { + const existing = new Set( + prev.map((document) => document.id), + ); + return [ + ...prev, + ...uploaded.filter( + (document) => !existing.has(document.id), + ), + ]; + }); + onDocumentsUploaded?.(uploaded); + } + if (results.some((result) => result.status === "rejected")) { + setUploadWarning( + uploaded.length > 0 + ? "Some documents could not be uploaded." + : "Documents could not be uploaded. Please try again.", + ); + } + setUploadingFilenames([]); + }, + [addAttachedDocuments, onDocumentsUploaded, projectId], + ); + + useEffect(() => { + const hasFiles = (dataTransfer: DataTransfer | null) => + !!dataTransfer && Array.from(dataTransfer.types).includes("Files"); + + const handleDragEnter = (event: DragEvent) => { + if (!hasFiles(event.dataTransfer)) return; + event.preventDefault(); + dragDepthRef.current += 1; + setIsDraggingFiles(true); + }; + const handleDragOver = (event: DragEvent) => { + if (!hasFiles(event.dataTransfer)) return; + event.preventDefault(); + if (event.dataTransfer) event.dataTransfer.dropEffect = "copy"; + }; + const handleDragLeave = (event: DragEvent) => { + if (!hasFiles(event.dataTransfer)) return; + dragDepthRef.current = Math.max(0, dragDepthRef.current - 1); + if (dragDepthRef.current === 0) setIsDraggingFiles(false); + }; + const handleDrop = (event: DragEvent) => { + if (!hasFiles(event.dataTransfer)) return; + event.preventDefault(); + event.stopPropagation(); + dragDepthRef.current = 0; + setIsDraggingFiles(false); + void handleDroppedFiles(Array.from(event.dataTransfer?.files ?? [])); + }; + + window.addEventListener("dragenter", handleDragEnter); + window.addEventListener("dragover", handleDragOver); + window.addEventListener("dragleave", handleDragLeave); + window.addEventListener("drop", handleDrop); + return () => { + window.removeEventListener("dragenter", handleDragEnter); + window.removeEventListener("dragover", handleDragOver); + window.removeEventListener("dragleave", handleDragLeave); + window.removeEventListener("drop", handleDrop); + }; + }, [handleDroppedFiles]); + const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { setValue(e.target.value); const el = e.target; @@ -216,12 +350,28 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( </div> )} + {uploadingFilenames.length > 0 && ( + <div className="flex flex-wrap items-center gap-1.5 px-2 pt-2"> + {uploadingFilenames.map((filename, index) => ( + <div + key={`${filename}-${index}`} + className="inline-flex items-center gap-1 rounded-[10px] bg-white/75 px-2 py-1 text-xs text-gray-600 shadow-[0_2px_6px_rgba(15,23,42,0.08)] backdrop-blur-xl" + > + <Loader2 className="h-2.5 w-2.5 animate-spin" /> + <span className="max-w-[140px] truncate"> + {filename} + </span> + </div> + ))} + </div> + )} + {/* Input */} <div className="px-4 pt-4"> <textarea ref={textareaRef} rows={1} - placeholder="Ask a question about your documents..." + placeholder="How can I help?" value={value} onChange={handleChange} onKeyDown={handleKeyDown} @@ -237,7 +387,10 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( <div className="flex items-center gap-1"> {!hideAddDocButton && ( <AddDocButton - onBrowseAll={() => setDocSelectorOpen(true)} + onBrowseAll={() => { + setDocSelectorInitialTab("files"); + setDocSelectorOpen(true); + }} selectedDocIds={attachedDocs.map( (d) => d.id, )} @@ -252,14 +405,14 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( className={cn( "flex items-center gap-1.5 rounded-lg px-2 h-8 text-sm transition-colors", selectedWorkflow - ? "text-blue-600 hover:bg-white/55" - : "text-gray-400 hover:bg-white/55 hover:text-gray-700", + ? "text-blue-600 hover:text-blue-700" + : "text-gray-400 hover:text-gray-700", )} > {selectedWorkflow ? ( <Check className="h-3.5 w-3.5" /> ) : ( - <Library className="h-3.5 w-3.5" /> + <Waypoints className="h-3.5 w-3.5" /> )} <span className={ @@ -272,22 +425,6 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( </span> </button> )} - {onProjectsClick && ( - <button - type="button" - onClick={onProjectsClick} - aria-label="Open projects" - className={cn( - "flex items-center gap-1.5 rounded-lg px-2 h-8 text-sm text-gray-400 hover:text-gray-700 transition-colors", - "hover:bg-white/55", - )} - > - <FolderOpen className="h-3.5 w-3.5" /> - <span className="hidden sm:inline"> - Projects - </span> - </button> - )} </div> <div className="flex items-center gap-1"> @@ -322,9 +459,18 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( <AddDocumentsModal open={docSelectorOpen} + keepMounted onClose={() => setDocSelectorOpen(false)} onSelect={handleAddDocsFromSelector} - breadcrumb={["Assistant", "Add Documents"]} + initialSelectedDocuments={attachedDocs} + externalUploadedDocuments={droppedDocuments} + initialTab={docSelectorInitialTab} + projectId={projectId} + breadcrumb={ + selectedWorkflow + ? ["Assistant", selectedWorkflow.title, "Add Documents"] + : ["Assistant", "Add Documents"] + } /> <AssistantWorkflowModal open={workflowModalOpen} @@ -344,6 +490,11 @@ export const ChatInput = forwardRef<ChatInputHandle, Props>(function ChatInput( provider={apiKeyModalProvider} onClose={() => setApiKeyModalProvider(null)} /> + <UploadOverlay + open={isDraggingFiles} + warning={uploadWarning} + onWarningClose={() => setUploadWarning(null)} + /> </> ); }); diff --git a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx index 5858a7f..528bfb4 100644 --- a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx +++ b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx @@ -14,7 +14,7 @@ export type CitationQuoteHeaderItem = { }; const QUOTE_GLASS_SURFACE = - "rounded-2xl bg-white/58 shadow-[0_5px_15px_rgba(15,23,42,0.095),inset_0_1px_0_rgba(255,255,255,0.88),inset_0_-8px_16px_rgba(255,255,255,0.16)] backdrop-blur-2xl"; + "rounded-2xl bg-white/58 shadow-[0_5px_15px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.88),inset_0_-8px_16px_rgba(255,255,255,0.16)] backdrop-blur-2xl"; const QUOTE_CARD_SURFACE = "rounded-2xl bg-gray-100"; interface Props { diff --git a/frontend/src/app/components/assistant/DocPanel.tsx b/frontend/src/app/components/assistant/DocPanel.tsx index 0d1f626..2762812 100644 --- a/frontend/src/app/components/assistant/DocPanel.tsx +++ b/frontend/src/app/components/assistant/DocPanel.tsx @@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { Download, Loader2 } from "lucide-react"; import { supabase } from "@/app/lib/supabase"; +import { PillButton } from "@/app/components/ui/pill-button"; import { PdfView } from "../shared/views/PdfView"; import { DocxView } from "../shared/views/DocxView"; import { SpreadsheetView } from "../shared/views/SpreadsheetView"; @@ -17,6 +18,7 @@ import { formatCitationPage, formatCitationQuotePage, getDocumentCitationQuotes, + isDocxFilename, isSpreadsheetFilename, } from "../shared/types"; import type { @@ -26,11 +28,6 @@ import type { EditAnnotation, } from "../shared/types"; -function isDocxFilename(name: string): boolean { - const ext = name.split(".").pop()?.toLowerCase(); - return ext === "docx" || ext === "doc"; -} - /** * Discriminated-union describing what the panel is showing above the viewer. * - "document": title row + viewer. @@ -386,17 +383,13 @@ function DownloadButton({ const spinning = busy || isReloading; return ( - <button - onClick={handleClick} - disabled={spinning} - className="inline-flex items-center gap-1 rounded-lg border border-gray-200 px-2 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed" - > + <PillButton tone="white" onClick={handleClick} disabled={spinning}> {spinning ? ( <Loader2 className="h-3.5 w-3.5 animate-spin" /> ) : ( <Download className="h-3.5 w-3.5" /> )} Download - </button> + </PillButton> ); } diff --git a/frontend/src/app/components/assistant/InitialView.tsx b/frontend/src/app/components/assistant/InitialView.tsx index 07a0794..e31b80d 100644 --- a/frontend/src/app/components/assistant/InitialView.tsx +++ b/frontend/src/app/components/assistant/InitialView.tsx @@ -1,12 +1,25 @@ "use client"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; +import Image from "next/image"; +import { useRouter } from "next/navigation"; +import { MoreHorizontal } from "lucide-react"; import { useAuth } from "@/app/contexts/AuthContext"; import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { MikeIcon } from "@/app/components/chat/mike-icon"; -import { ChatInput } from "./ChatInput"; +import { ChatInput, type ChatInputHandle } from "./ChatInput"; import { SelectAssistantProjectModal } from "./SelectAssistantProjectModal"; -import type { Message } from "../shared/types"; +import { QuickActionsModal } from "./QuickActionsModal"; +import { NewProjectModal } from "../projects/NewProjectModal"; +import { NewTRModal } from "../tabular/NewTRModal"; +import { createTabularReview } from "@/app/lib/mikeApi"; +import { useDirectoryData, type DirectoryTab } from "../shared/useDirectoryData"; +import { + QUICK_ACTIONS, + type QuickActionId, + useQuickActionsPreference, +} from "./quickActionsPreferences"; +import type { Message, Workflow } from "../shared/types"; interface InitialViewProps { onSubmit: (message: Message) => void; @@ -14,18 +27,61 @@ interface InitialViewProps { const ICON_SIZE = 30; const GAP = 12; // gap-4 = 1rem = 16px +const DOCUMENT_WORKFLOW_ACTIONS: Partial< + Record< + QuickActionId, + { + workflowId: string; + title: string; + prompt: string; + initialDocumentTab?: DirectoryTab; + } + > +> = { + proofread: { + workflowId: "builtin-proofread", + title: "Proofread", + prompt: "proofread", + }, + compareDocuments: { + workflowId: "builtin-compare-documents", + title: "Compare Documents", + prompt: "compare documents", + }, + extractKeyTerms: { + workflowId: "builtin-extract-key-terms", + title: "Extract Key Terms", + prompt: "extract key terms", + }, + draftFromTemplate: { + workflowId: "builtin-draft-from-template", + title: "Draft from Template", + prompt: "draft from template", + initialDocumentTab: "templates", + }, +}; export function InitialView({ onSubmit }: InitialViewProps) { const { user } = useAuth(); const { profile } = useUserProfile(); + const router = useRouter(); const [loaded, setLoaded] = useState(false); const [projectModalOpen, setProjectModalOpen] = useState(false); + const [newProjectOpen, setNewProjectOpen] = useState(false); + const [newTROpen, setNewTROpen] = useState(false); + const [quickActionsModalOpen, setQuickActionsModalOpen] = useState(false); + const { visibleActions, setVisibleActions } = useQuickActionsPreference(); const [iconOffset, setIconOffset] = useState(0); const [textOffset, setTextOffset] = useState(0); const textRef = useRef<HTMLHeadingElement>(null); + const chatInputRef = useRef<ChatInputHandle>(null); + const { projects } = useDirectoryData(newTROpen, "projects"); const username = profile?.displayName?.trim() || user?.email?.split("@")[0] || "there"; + const visibleQuickActions = QUICK_ACTIONS.filter( + (action) => visibleActions[action.id], + ); useLayoutEffect(() => { if (!profile || !textRef.current) return; @@ -40,60 +96,170 @@ export function InitialView({ onSubmit }: InitialViewProps) { return () => clearTimeout(t); }, [iconOffset]); + function handleDocumentWorkflowClick(id: QuickActionId) { + const config = DOCUMENT_WORKFLOW_ACTIONS[id]; + if (!config) return; + + chatInputRef.current?.startWorkflowDocumentSelection( + { + id: config.workflowId, + title: config.title, + }, + config.prompt, + { initialDocumentTab: config.initialDocumentTab }, + ); + } + + async function handleNewReview( + title: string, + projectId?: string, + documentIds?: string[], + columnsConfig?: Workflow["columns_config"], + ) { + const review = await createTabularReview({ + title, + document_ids: documentIds ?? [], + columns_config: columnsConfig ?? [], + ...(projectId && { project_id: projectId }), + }); + setNewTROpen(false); + router.push( + projectId + ? `/projects/${projectId}/tabular-reviews/${review.id}` + : `/tabular-reviews/${review.id}`, + ); + } + + function handleQuickAction(id: QuickActionId) { + if (id === "projectChat") { + setProjectModalOpen(true); + } else if (DOCUMENT_WORKFLOW_ACTIONS[id]) { + handleDocumentWorkflowClick(id); + } else if (id === "newProject") { + setNewProjectOpen(true); + } else if (id === "newTabularReview") { + setNewTROpen(true); + } + } + return ( - <div className="flex flex-col h-full w-full px-6"> - <div className="flex-1 flex flex-col items-center justify-center"> - <div className="flex-col items-center w-full max-w-4xl relative px-0 xl:px-8"> - <div className="mb-10 relative flex items-center justify-center"> - <div - className="absolute h-[30px] w-[30px] top-[-14px]" - style={{ - left: "50%", - transform: loaded - ? `translateX(calc(-50% - ${iconOffset}px))` - : "translateX(-50%)", - transition: - "transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94)", - }} - > - <MikeIcon size={ICON_SIZE} /> - </div> - <h1 - ref={textRef} - className="absolute text-4xl font-serif font-light text-gray-900 whitespace-nowrap" - style={{ - left: "50%", - transform: loaded - ? `translateX(calc(-50% + ${textOffset}px))` - : "translateX(-50%)", - opacity: loaded ? 1 : 0, - transition: - "transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 800ms ease-in-out 300ms", - }} - > - Hi, {username} - </h1> - </div> - - <ChatInput - onSubmit={onSubmit} - onCancel={() => {}} - isLoading={false} - onProjectsClick={() => setProjectModalOpen(true)} - /> - - <div className="text-center"> - <p className="text-xs py-3 mb-3 text-gray-500"> - AI can make mistakes. Answers are not legal advice. - </p> + <div className="grid h-full w-full grid-rows-[minmax(0,1fr)_auto_minmax(0,1fr)] px-6"> + <div className="flex min-h-0 items-end justify-center pb-6"> + <div className="relative h-10 w-full max-w-4xl px-0 xl:px-8"> + <div + className="absolute h-[30px] w-[30px]" + style={{ + left: "50%", + top: "50%", + transform: loaded + ? `translate(calc(-50% - ${iconOffset}px), -50%)` + : "translate(-50%, -50%)", + transition: + "transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94)", + }} + > + <MikeIcon size={ICON_SIZE} /> </div> + <h1 + ref={textRef} + className="absolute text-4xl font-serif font-light text-gray-900 whitespace-nowrap" + style={{ + left: "50%", + top: "50%", + transform: loaded + ? `translate(calc(-50% + ${textOffset}px), -50%)` + : "translate(-50%, -50%)", + opacity: loaded ? 1 : 0, + transition: + "transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 800ms ease-in-out 300ms", + }} + > + Hi, {username} + </h1> </div> </div> + <div className="w-full max-w-4xl justify-self-center px-0 xl:px-8"> + <ChatInput + ref={chatInputRef} + onSubmit={onSubmit} + onCancel={() => {}} + isLoading={false} + /> + </div> + + <div className="min-h-0 w-full max-w-4xl justify-self-center px-0 pt-1 xl:px-8"> + <div className="text-center"> + <p className="text-xs py-2 mb-12 text-gray-500"> + AI can make mistakes. Answers are not legal advice. + </p> + </div> + + {visibleQuickActions.length > 0 && ( + <div className="flex flex-col items-center"> + <div className="group relative flex h-5 items-center justify-center"> + <span className="flex items-center gap-1.5 text-xs font-medium text-gray-800"> + <Image + src="/icons/app-sidebar/quick-actions.svg" + alt="" + width={14} + height={14} + unoptimized + aria-hidden="true" + className="h-3.5 w-3.5 shrink-0" + /> + Quick actions + </span> + <button + type="button" + onClick={() => setQuickActionsModalOpen(true)} + aria-label="Configure quick actions" + className="absolute left-full ml-1.5 flex h-5 w-5 items-center justify-center text-gray-400 opacity-0 transition-all hover:text-gray-700 group-hover:opacity-100 focus:opacity-100" + > + <MoreHorizontal className="h-3.5 w-3.5" /> + </button> + </div> + <div className="mt-3 flex flex-wrap justify-center gap-2 text-xs"> + {visibleQuickActions.map((action) => ( + <button + key={action.id} + type="button" + onClick={() => handleQuickAction(action.id)} + className="inline-flex h-8 items-center justify-center rounded-full border border-white/70 bg-white/55 px-3 font-medium text-gray-600 shadow-[0_3px_9px_rgba(15,23,42,0.06),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl transition-all hover:bg-white hover:text-gray-900 active:scale-[0.98] disabled:cursor-default disabled:opacity-45 disabled:active:scale-100" + > + {action.label} + </button> + ))} + </div> + </div> + )} + </div> + + <QuickActionsModal + open={quickActionsModalOpen} + onClose={() => setQuickActionsModalOpen(false)} + visibleActions={visibleActions} + onVisibleActionsChange={setVisibleActions} + /> + <SelectAssistantProjectModal open={projectModalOpen} onClose={() => setProjectModalOpen(false)} /> + <NewProjectModal + open={newProjectOpen} + onClose={() => setNewProjectOpen(false)} + onCreated={(project) => { + setNewProjectOpen(false); + router.push(`/projects/${project.id}`); + }} + /> + <NewTRModal + open={newTROpen} + onClose={() => setNewTROpen(false)} + onAdd={handleNewReview} + projects={projects} + /> </div> ); } diff --git a/frontend/src/app/components/assistant/ModelToggle.tsx b/frontend/src/app/components/assistant/ModelToggle.tsx index d52fca2..abd20b9 100644 --- a/frontend/src/app/components/assistant/ModelToggle.tsx +++ b/frontend/src/app/components/assistant/ModelToggle.tsx @@ -4,12 +4,14 @@ import { useState } from "react"; import { ChevronDown, Check, AlertCircle } from "lucide-react"; import { DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/app/components/ui/dropdown-menu"; +import { + LiquidDropdownContent, + LiquidDropdownItem, +} from "@/app/components/ui/liquid-dropdown"; import { isModelAvailable } from "@/app/lib/modelAvailability"; import type { ApiKeyState } from "@/app/lib/mikeApi"; @@ -47,6 +49,8 @@ export const DEFAULT_MODEL_ID = "gemini-3-flash-preview"; export const ALLOWED_MODEL_IDS = new Set(MODELS.map((m) => m.id)); const GROUP_ORDER: ModelOption["group"][] = ["Anthropic", "Google", "OpenAI"]; +const itemClassName = + "rounded-xl px-2.5 py-1.5 text-gray-700 focus:bg-app-surface-hover focus:text-gray-900 data-[highlighted]:bg-app-surface-hover data-[highlighted]:text-gray-900"; interface Props { value: string; @@ -67,7 +71,7 @@ export function ModelToggle({ value, onChange, apiKeys }: Props) { <DropdownMenuTrigger asChild> <button type="button" - className={`flex items-center gap-1.5 rounded-lg px-2 h-8 text-sm transition-colors cursor-pointer text-gray-400 hover:bg-gray-100 hover:text-gray-700 ${isOpen ? "bg-gray-100 text-gray-700" : ""}`} + className={`flex h-8 cursor-pointer items-center gap-1.5 rounded-full px-2 text-sm text-gray-400 transition-colors hover:text-gray-700 ${isOpen ? "text-gray-700" : ""}`} title={ !selectedAvailable ? "API key missing for selected model" @@ -83,13 +87,19 @@ export function ModelToggle({ value, onChange, apiKeys }: Props) { /> </button> </DropdownMenuTrigger> - <DropdownMenuContent className="w-56 z-50" side="top" align="end"> + <LiquidDropdownContent + className="z-50 w-56 p-1.5 text-gray-700" + side="top" + align="end" + > {GROUP_ORDER.map((group, gi) => { const items = MODELS.filter((m) => m.group === group); if (items.length === 0) return null; return ( <div key={group}> - {gi > 0 && <DropdownMenuSeparator />} + {gi > 0 && ( + <DropdownMenuSeparator className="-mx-1 my-1 bg-white/70" /> + )} <DropdownMenuLabel className="text-[10px] uppercase tracking-wider text-gray-400"> {group} </DropdownMenuLabel> @@ -98,9 +108,9 @@ export function ModelToggle({ value, onChange, apiKeys }: Props) { ? isModelAvailable(m.id, apiKeys) : true; return ( - <DropdownMenuItem + <LiquidDropdownItem key={m.id} - className="cursor-pointer" + className={`${itemClassName} ${m.id === value ? "bg-app-surface-hover text-gray-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]" : ""}`} onSelect={() => onChange(m.id)} > <span @@ -117,13 +127,13 @@ export function ModelToggle({ value, onChange, apiKeys }: Props) { {m.id === value && available && ( <Check className="h-3.5 w-3.5 text-gray-600 ml-1" /> )} - </DropdownMenuItem> + </LiquidDropdownItem> ); })} </div> ); })} - </DropdownMenuContent> + </LiquidDropdownContent> </DropdownMenu> ); } diff --git a/frontend/src/app/components/assistant/QuickActionsModal.tsx b/frontend/src/app/components/assistant/QuickActionsModal.tsx new file mode 100644 index 0000000..facd33b --- /dev/null +++ b/frontend/src/app/components/assistant/QuickActionsModal.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { Check } from "lucide-react"; +import { Modal } from "../modals/Modal"; +import { QUICK_ACTIONS, type QuickActionId } from "./quickActionsPreferences"; + +interface QuickActionsModalProps { + open: boolean; + visibleActions: Record<QuickActionId, boolean>; + onVisibleActionsChange: ( + next: + | Record<QuickActionId, boolean> + | (( + prev: Record<QuickActionId, boolean>, + ) => Record<QuickActionId, boolean>), + ) => void; + onClose: () => void; +} + +export function QuickActionsModal({ + open, + visibleActions, + onVisibleActionsChange, + onClose, +}: QuickActionsModalProps) { + return ( + <Modal + open={open} + onClose={onClose} + breadcrumbs={["Assistant", "Edit quick actions"]} + cancelAction={false} + primaryAction={{ + label: "Done", + onClick: onClose, + }} + > + <div className="flex min-h-0 flex-1 flex-col pb-5"> + <div className="grid grid-cols-[minmax(0,1fr)_112px] px-2 pb-1 pt-0.5 text-[11px] font-medium text-gray-400"> + <span>Quick action</span> + <span className="flex items-center justify-end gap-2"> + <span>Enabled</span> + </span> + </div> + <div className="w-full space-y-1"> + {QUICK_ACTIONS.map((action) => { + const checked = visibleActions[action.id]; + return ( + <button + key={action.id} + type="button" + role="checkbox" + aria-checked={checked} + onClick={() => + onVisibleActionsChange((prev) => ({ + ...prev, + [action.id]: !checked, + })) + } + className="grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_112px] items-center rounded-lg px-2 py-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-100" + > + <span className="min-w-0 truncate"> + {action.label} + </span> + <span + className={`ml-auto flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border ${ + checked + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {checked && ( + <Check className="h-2.5 w-2.5 text-white" /> + )} + </span> + </button> + ); + })} + </div> + </div> + </Modal> + ); +} diff --git a/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx b/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx index b6ef660..32a64fb 100644 --- a/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx +++ b/frontend/src/app/components/assistant/SelectAssistantProjectModal.tsx @@ -16,7 +16,7 @@ export function SelectAssistantProjectModal({ open, onClose }: Props) { const [creating, setCreating] = useState(false); const router = useRouter(); const { saveChat } = useChatHistoryContext(); - const { loading, projects } = useDirectoryData(open); + const { loading, projects } = useDirectoryData(open, "projects"); useEffect(() => { if (!open) return; diff --git a/frontend/src/app/components/assistant/UploadOverlay.tsx b/frontend/src/app/components/assistant/UploadOverlay.tsx new file mode 100644 index 0000000..72a9c62 --- /dev/null +++ b/frontend/src/app/components/assistant/UploadOverlay.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { createPortal } from "react-dom"; +import { WarningPopup } from "../popups/WarningPopup"; + +interface Props { + open: boolean; + label?: string; + warning?: string | null; + onWarningClose?: () => void; +} + +export function UploadOverlay({ + open, + label = "Drop files here to add to chat", + warning, + onWarningClose, +}: Props) { + return ( + <> + {open && + createPortal( + <div className="fixed inset-0 z-[260] flex items-center justify-center bg-white/35 p-6 backdrop-blur-md"> + <p className="font-serif text-xl text-gray-900"> + {label} + </p> + </div>, + document.body, + )} + <WarningPopup + open={!!warning} + onClose={onWarningClose ?? (() => {})} + message={warning} + /> + </> + ); +} diff --git a/frontend/src/app/components/assistant/message/EventBlocks.tsx b/frontend/src/app/components/assistant/message/EventBlocks.tsx index d40f1b4..7e4a037 100644 --- a/frontend/src/app/components/assistant/message/EventBlocks.tsx +++ b/frontend/src/app/components/assistant/message/EventBlocks.tsx @@ -194,11 +194,13 @@ export function DocReadBlock({ onClick, showConnector, isStreaming, + showFileIcon = true, }: { filename: string; onClick?: () => void; showConnector?: boolean; isStreaming?: boolean; + showFileIcon?: boolean; }) { return ( <EventBlock @@ -212,10 +214,12 @@ export function DocReadBlock({ </span> {isStreaming ? ( <span className="flex min-w-0 items-center gap-1.5"> - <FileTypeIcon - fileType={filename} - className="h-3.5 w-3.5" - /> + {showFileIcon && ( + <FileTypeIcon + fileType={filename} + className="h-3.5 w-3.5" + /> + )} <span className="truncate">{filename}...</span> </span> ) : onClick ? ( @@ -223,18 +227,22 @@ export function DocReadBlock({ onClick={onClick} className="flex min-w-0 items-center gap-1.5 text-left transition-colors hover:text-gray-700 cursor-pointer" > - <FileTypeIcon - fileType={filename} - className="h-3.5 w-3.5" - /> + {showFileIcon && ( + <FileTypeIcon + fileType={filename} + className="h-3.5 w-3.5" + /> + )} <span className="truncate">{filename}</span> </button> ) : ( <span className="flex min-w-0 items-center gap-1.5"> - <FileTypeIcon - fileType={filename} - className="h-3.5 w-3.5" - /> + {showFileIcon && ( + <FileTypeIcon + fileType={filename} + className="h-3.5 w-3.5" + /> + )} <span className="truncate">{filename}</span> </span> )} diff --git a/frontend/src/app/components/assistant/quickActionsPreferences.ts b/frontend/src/app/components/assistant/quickActionsPreferences.ts new file mode 100644 index 0000000..d12bbbd --- /dev/null +++ b/frontend/src/app/components/assistant/quickActionsPreferences.ts @@ -0,0 +1,148 @@ +"use client"; + +import { useCallback, useSyncExternalStore } from "react"; + +export type QuickActionId = + | "projectChat" + | "proofread" + | "compareDocuments" + | "extractKeyTerms" + | "draftFromTemplate" + | "newProject" + | "newTabularReview"; + +export const QUICK_ACTIONS: { id: QuickActionId; label: string }[] = [ + { id: "proofread", label: "Proofread" }, + { id: "compareDocuments", label: "Compare documents" }, + { id: "extractKeyTerms", label: "Extract key terms" }, + { id: "draftFromTemplate", label: "Draft from template" }, + { id: "newProject", label: "New project" }, + { id: "newTabularReview", label: "New tabular review" }, + { id: "projectChat", label: "Start chat in project" }, +]; + +export const DEFAULT_QUICK_ACTIONS: Record<QuickActionId, boolean> = { + projectChat: true, + proofread: true, + compareDocuments: true, + extractKeyTerms: true, + draftFromTemplate: true, + newProject: false, + newTabularReview: false, +}; + +const QUICK_ACTIONS_STORAGE_KEY = "mike.quickActions.visible"; +const QUICK_ACTIONS_UPDATED_EVENT = "mike:quick-actions-updated"; +let cachedRawPreference: string | null | undefined; +let cachedPreference: Record<QuickActionId, boolean> = DEFAULT_QUICK_ACTIONS; + +function normalizeQuickActions(value: unknown): Record<QuickActionId, boolean> { + if (!value || typeof value !== "object") return DEFAULT_QUICK_ACTIONS; + const record = value as Partial<Record<QuickActionId, unknown>>; + + return QUICK_ACTIONS.reduce<Record<QuickActionId, boolean>>( + (next, action) => { + const storedValue = record[action.id]; + next[action.id] = + typeof storedValue === "boolean" + ? storedValue + : DEFAULT_QUICK_ACTIONS[action.id]; + return next; + }, + { ...DEFAULT_QUICK_ACTIONS }, + ); +} + +function readQuickActionsPreference(): Record<QuickActionId, boolean> { + if (typeof window === "undefined") return DEFAULT_QUICK_ACTIONS; + + try { + const stored = window.localStorage.getItem(QUICK_ACTIONS_STORAGE_KEY); + if (stored === cachedRawPreference) return cachedPreference; + + cachedRawPreference = stored; + cachedPreference = stored + ? normalizeQuickActions(JSON.parse(stored)) + : DEFAULT_QUICK_ACTIONS; + return cachedPreference; + } catch { + return DEFAULT_QUICK_ACTIONS; + } +} + +function persistQuickActionsPreference( + value: Record<QuickActionId, boolean>, +) { + if (typeof window === "undefined") return; + const serialized = JSON.stringify(value); + + cachedRawPreference = serialized; + cachedPreference = value; + + window.localStorage.setItem(QUICK_ACTIONS_STORAGE_KEY, serialized); + window.dispatchEvent(new Event(QUICK_ACTIONS_UPDATED_EVENT)); +} + +export function useQuickActionsPreference() { + const visibleActions = useSyncExternalStore( + (handleQuickActionsUpdated) => { + if (typeof window === "undefined") return () => {}; + window.addEventListener("storage", handleQuickActionsUpdated); + window.addEventListener( + QUICK_ACTIONS_UPDATED_EVENT, + handleQuickActionsUpdated, + ); + + return () => { + window.removeEventListener( + "storage", + handleQuickActionsUpdated, + ); + window.removeEventListener( + QUICK_ACTIONS_UPDATED_EVENT, + handleQuickActionsUpdated, + ); + }; + }, + readQuickActionsPreference, + () => DEFAULT_QUICK_ACTIONS, + ); + + const setVisibleActions = useCallback( + ( + next: + | Record<QuickActionId, boolean> + | (( + prev: Record<QuickActionId, boolean>, + ) => Record<QuickActionId, boolean>), + ) => { + const prev = readQuickActionsPreference(); + const resolved = typeof next === "function" ? next(prev) : next; + persistQuickActionsPreference(normalizeQuickActions(resolved)); + }, + [], + ); + + const showAllQuickActions = useCallback(() => { + setVisibleActions(DEFAULT_QUICK_ACTIONS); + }, [setVisibleActions]); + + const hideAllQuickActions = useCallback(() => { + setVisibleActions( + QUICK_ACTIONS.reduce<Record<QuickActionId, boolean>>( + (next, action) => { + next[action.id] = false; + return next; + }, + { ...DEFAULT_QUICK_ACTIONS }, + ), + ); + }, [setVisibleActions]); + + return { + visibleActions, + setVisibleActions, + showAllQuickActions, + hideAllQuickActions, + }; +} diff --git a/frontend/src/app/components/documents/DocTable.tsx b/frontend/src/app/components/documents/DocTable.tsx new file mode 100644 index 0000000..b8717c7 --- /dev/null +++ b/frontend/src/app/components/documents/DocTable.tsx @@ -0,0 +1,3195 @@ +"use client"; + +import { + type Dispatch, + type DragEvent, + type ReactNode, + type SetStateAction, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { createPortal } from "react-dom"; +import { + Loader2, + AlertCircle, + ChevronDown, + ChevronRight, +} from "lucide-react"; +import { + deleteDocument, + getDocumentUrl, + downloadDocumentsZip, + listDocumentVersions, + uploadDocumentVersion, + replaceDocumentVersionFile, + copyDocumentVersionFromDocument, + deleteDocumentVersion, + renameDocumentVersion, + type DocumentVersion, +} from "@/app/lib/mikeApi"; +import type { + Document, + Folder as ProjectFolder, + LibraryFolder, +} from "@/app/components/shared/types"; +import { + closeRowActionMenus, + RowActionMenuItems, + RowActions, + type RowActionMenuSurfaceProps, +} from "@/app/components/shared/RowActions"; +import { + SubfolderSvgIcon, +} from "@/app/components/shared/FolderSvgIcon"; +import { useAuth } from "@/app/contexts/AuthContext"; +import { WarningPopup } from "@/app/components/popups/WarningPopup"; +import { UploadOverlay } from "@/app/components/assistant/UploadOverlay"; +import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; +import { + formatUnsupportedDocumentWarning, + partitionSupportedDocumentFiles, + SUPPORTED_DOCUMENT_ACCEPT, +} from "@/app/lib/documentUploadValidation"; +import { + DOC_NAME_COL_W, + DocIcon, + DocVersionHistory, + formatBytes, + formatDate, + treeNameCellStyle, + type ProjectContextMenu, +} from "@/app/components/projects/ProjectPageParts"; +import { DocumentSidePanel } from "@/app/components/shared/DocumentSidePanel"; +import { LibrarySkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { + TABLE_CHECKBOX_CLASS, + TableFilters, + TableHeaderCell, + TableHeaderRow, + TableScrollArea, + TableStickyCell, + type TableFilterOption, + type TableSortDirection, +} from "@/app/components/shared/TablePrimitive"; + +export type DocTableFolder = ProjectFolder | LibraryFolder; +export interface DocTableSelectionActions { + selectedCount: number; + hasDocumentsInFolders: boolean; + onDownload: () => Promise<void>; + onRemoveFromFolder: () => Promise<void>; + onDelete: () => Promise<void>; +} + +type DocumentSortKey = "name" | "size" | "version" | "created" | "updated"; + +const SORT_OPTIONS: TableFilterOption<TableSortDirection>[] = [ + { value: "asc", label: "Ascending" }, + { value: "desc", label: "Descending" }, +]; + +interface DocTableOperations { + uploadDocument: (file: File) => Promise<Document>; + refreshCollection: () => Promise<void>; + createFolder: ( + name: string, + parentFolderId?: string | null, + ) => Promise<DocTableFolder>; + renameFolder: ( + folderId: string, + name: string, + ) => Promise<DocTableFolder>; + deleteFolder: (folderId: string) => Promise<void>; + moveFolder: ( + folderId: string, + parentFolderId: string | null, + ) => Promise<DocTableFolder>; + moveDocument: ( + documentId: string, + folderId: string | null, + ) => Promise<Document>; + renameDocument: (documentId: string, filename: string) => Promise<Document>; +} + +interface DocTableProps { + scopeKey: string; + documents: Document[]; + setDocuments: Dispatch<SetStateAction<Document[]>>; + folders: DocTableFolder[]; + setFolders: Dispatch<SetStateAction<DocTableFolder[]>>; + loading: boolean; + search: string; + operations: DocTableOperations; + emptyDropLabel?: string; + renderAddDocumentsModal?: ( + open: boolean, + onClose: () => void, + onSelect: (documents: Document[]) => void, + ) => ReactNode; + onAddDocumentsActionChange?: (action: (() => void) | null) => void; + onCreateFolderActionChange?: (action: (() => void) | null) => void; + onSelectionActionsChange?: (actions: DocTableSelectionActions | null) => void; + onOwnerOnlyAction?: Dispatch<SetStateAction<string | null>>; + enableHeaderFilters?: boolean; +} + +function apiErrorDetail(error: unknown): string | null { + if (!(error instanceof Error)) return null; + try { + const parsed = JSON.parse(error.message) as unknown; + if ( + parsed && + typeof parsed === "object" && + "detail" in parsed && + typeof parsed.detail === "string" + ) { + return parsed.detail; + } + } catch { + // Non-JSON errors can fall through to the plain message below. + } + return error.message || null; +} + +function documentTypeValue(doc: Document): string { + const explicit = doc.file_type?.trim(); + if (explicit) return explicit.toLowerCase(); + + const extension = doc.filename.includes(".") + ? doc.filename.split(".").pop()?.trim() + : null; + return (extension || "file").toLowerCase(); +} + +function dateTimeValue(value: string | null | undefined): number { + if (!value) return 0; + const time = new Date(value).getTime(); + return Number.isFinite(time) ? time : 0; +} + +function documentVersionNumber(doc: Document): number | null { + return doc.active_version_number ?? doc.latest_version_number ?? null; +} + +function ProjectTableLoadingHeader({ + stickyCellBg, +}: { + stickyCellBg: string; +}) { + return ( + <TableHeaderRow className={`${stickyCellBg} pr-8 md:pr-8`}> + <TableStickyCell + header + widthClassName={DOC_NAME_COL_W} + bgClassName={stickyCellBg} + > + <div className="mr-4 h-2.5 w-2.5 rounded bg-gray-100 animate-pulse" /> + <span className="mr-1">Name</span> + </TableStickyCell> + <TableHeaderCell className="ml-auto flex w-20 items-center gap-1"> + <span>Type</span> + </TableHeaderCell> + <TableHeaderCell className="flex w-24 items-center gap-1"> + <span>Size</span> + </TableHeaderCell> + <TableHeaderCell className="flex w-20 items-center gap-1"> + <span>Version</span> + </TableHeaderCell> + <TableHeaderCell className="flex w-32 items-center gap-1"> + <span>Created</span> + </TableHeaderCell> + <TableHeaderCell className="flex w-32 items-center gap-1"> + <span>Updated</span> + </TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + ); +} + +function ProjectTableLoading({ stickyCellBg }: { stickyCellBg: string }) { + return ( + <div className="flex-1 flex flex-col min-h-0"> + {[1, 2, 3, 4, 5].map((i) => ( + <div + key={i} + className="flex h-10 min-w-max items-center pr-8" + > + <div + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} py-2 pl-4 pr-2`} + > + <div className="flex items-center"> + <div className="mr-4 h-2.5 w-2.5 shrink-0 rounded bg-gray-100 animate-pulse" /> + <div className="mr-2 h-4 w-4 shrink-0 rounded bg-gray-100 animate-pulse" /> + <div + className="h-3.5 rounded bg-gray-100 animate-pulse" + style={{ width: `${210 + i * 16}px` }} + /> + </div> + </div> + <div className="ml-auto w-20 shrink-0"> + <div className="h-3 w-8 rounded bg-gray-100 animate-pulse" /> + </div> + <div className="w-24 shrink-0"> + <div className="h-3 w-12 rounded bg-gray-100 animate-pulse" /> + </div> + <div className="w-20 shrink-0"> + <div className="h-3 w-5 rounded bg-gray-100 animate-pulse" /> + </div> + <div className="w-32 shrink-0"> + <div className="h-3 w-16 rounded bg-gray-100 animate-pulse" /> + </div> + <div className="w-32 shrink-0"> + <div className="h-3 w-16 rounded bg-gray-100 animate-pulse" /> + </div> + <div className="w-8 shrink-0" /> + </div> + ))} + </div> + ); +} + +export function DocTable({ + scopeKey, + documents, + setDocuments, + folders, + setFolders, + loading, + search, + operations, + emptyDropLabel = "Drop PDF, Word, Excel, or PowerPoint files here", + renderAddDocumentsModal, + onAddDocumentsActionChange, + onCreateFolderActionChange, + onSelectionActionsChange, + onOwnerOnlyAction, + enableHeaderFilters = false, +}: DocTableProps) { + const [addDocsOpen, setAddDocsOpen] = useState(false); + const { user } = useAuth(); + const stickyCellBg = "bg-app-surface"; + const activeRowBg = "bg-app-surface-active"; + const surfaceHoverBg = "hover:bg-app-surface-hover"; + const surfaceGroupHoverBg = "group-hover:bg-app-surface-hover"; + const [viewingDoc, setViewingDoc] = useState<Document | null>(null); + const [viewingDocVersion, setViewingDocVersion] = useState<{ + id: string; + label: string; + } | null>(null); + const [selectedDocIds, setSelectedDocIds] = useState<string[]>([]); + const [typeFilter, setTypeFilter] = useState<string | null>(null); + const [sort, setSort] = useState<{ + key: DocumentSortKey; + direction: TableSortDirection; + } | null>(null); + const documentUploadInputRef = useRef<HTMLInputElement>(null); + const loadingRef = useRef(loading); + const renderAddDocumentsModalRef = useRef(renderAddDocumentsModal); + const setOwnerOnlyAction = useMemo( + () => onOwnerOnlyAction ?? (() => {}), + [onOwnerOnlyAction], + ); + + useEffect(() => { + loadingRef.current = loading; + renderAddDocumentsModalRef.current = renderAddDocumentsModal; + }, [loading, renderAddDocumentsModal]); + + const openAddDocuments = useCallback(() => { + if (loadingRef.current) return; + if (renderAddDocumentsModalRef.current) { + setAddDocsOpen(true); + return; + } + documentUploadInputRef.current?.click(); + }, []); + + useEffect(() => { + onAddDocumentsActionChange?.(openAddDocuments); + return () => onAddDocumentsActionChange?.(null); + }, [onAddDocumentsActionChange, openAddDocuments]); + + // Version-history expansion (per-doc). versionsByDocId caches fetched + // versions so toggling closed + open again doesn't refetch. loadingIds + // drives the inline spinner in the version cell while a fetch is in + // flight. + const [expandedVersionDocIds, setExpandedVersionDocIds] = useState< + Set<string> + >(() => new Set()); + const [versionsByDocId, setVersionsByDocId] = useState< + Map< + string, + { currentVersionId: string | null; versions: DocumentVersion[] } + > + >(() => new Map()); + const [loadingVersionDocIds, setLoadingVersionDocIds] = useState< + Set<string> + >(() => new Set()); + + const loadDocumentVersions = async ( + docId: string, + options: { expand?: boolean; force?: boolean } = {}, + ) => { + if (options.expand) { + setExpandedVersionDocIds((prev) => new Set([...prev, docId])); + } + if (!options.force && versionsByDocId.has(docId)) return; + setLoadingVersionDocIds((prev) => new Set([...prev, docId])); + try { + const res = await listDocumentVersions(docId); + setVersionsByDocId((prev) => { + const next = new Map(prev); + next.set(docId, { + currentVersionId: res.current_version_id, + versions: res.versions, + }); + return next; + }); + } catch (e) { + console.error("listDocumentVersions failed", e); + } finally { + setLoadingVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(docId); + return next; + }); + } + }; + + const toggleVersions = async (docId: string) => { + const already = expandedVersionDocIds.has(docId); + if (already) { + setExpandedVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(docId); + return next; + }); + return; + } + // Opening — expand immediately so the user sees a loading state. + await loadDocumentVersions(docId, { expand: true }); + }; + + async function downloadDocVersion( + docId: string, + versionId: string, + filename: string, + ) { + try { + const resolved = await getDocumentUrl(docId, versionId); + const a = document.createElement("a"); + a.href = resolved.url; + // Prefer the backend's resolved filename (which honours the + // version filename). Fall back to the passed filename + // if for some reason it's missing. + a.download = resolved.filename || filename; + a.click(); + } catch (e) { + console.error("downloadDocVersion failed", e); + } + } + + function handleUploadNewVersion(doc: Document) { + setVersionUploadTargetDoc(doc); + window.setTimeout(() => versionUploadInputRef.current?.click(), 0); + } + + async function handleVersionUploadInputChange( + e: React.ChangeEvent<HTMLInputElement>, + ) { + const file = e.target.files?.[0] ?? null; + e.target.value = ""; + const doc = versionUploadTargetDoc; + setVersionUploadTargetDoc(null); + if (!file || !doc) return; + await handleDropDocumentVersions(doc, [file]); + } + + async function submitNewVersion( + doc: Document, + file: File, + filename: string, + ) { + try { + await uploadDocumentVersion(doc.id, file, filename); + await refreshDocumentVersionState(doc.id); + } catch (e) { + console.error("uploadDocumentVersion failed", e); + } + } + + async function replaceVersionFile( + docId: string, + versionId: string, + file: File, + filename: string, + ) { + await replaceDocumentVersionFile(docId, versionId, file, filename); + const res = await refreshDocumentVersionState(docId); + const replaced = res.versions.find( + (version) => version.id === versionId, + ); + if (replaced) { + setViewingDocVersion({ + id: replaced.id, + label: replaced.filename?.trim() || "Version", + }); + } + } + + async function refreshDocumentVersionState(docId: string) { + // Refresh the collection so doc.active_version_number and filename advance. + await operations.refreshCollection(); + // Re-fetch versions while keeping the previous rows visible until the + // updated list arrives. + const res = await listDocumentVersions(docId); + setVersionsByDocId((prev) => { + const next = new Map(prev); + next.set(docId, { + currentVersionId: res.current_version_id, + versions: res.versions, + }); + return next; + }); + return res; + } + + /** + * Patch a version filename and update the local cache in place. + */ + async function handleRenameVersion( + docId: string, + versionId: string, + filename: string | null, + ) { + const previousFilename = versionsByDocId + .get(docId) + ?.versions.find((version) => version.id === versionId) + ?.filename?.trim(); + if ( + previousFilename && + (filename == null || + hasFilenameExtensionChange(previousFilename, filename)) + ) { + setDocumentRenameWarning(extensionChangeWarning(previousFilename)); + return; + } + + try { + const updated = await renameDocumentVersion( + docId, + versionId, + filename, + ); + setVersionsByDocId((prev) => { + const cached = prev.get(docId); + if (!cached) return prev; + const next = new Map(prev); + next.set(docId, { + ...cached, + versions: cached.versions.map((v) => + v.id === versionId ? updated : v, + ), + }); + return next; + }); + } catch (e) { + console.error("renameDocumentVersion failed", e); + } + } + + async function handleDeleteVersion(docId: string, versionId: string) { + try { + await deleteDocumentVersion(docId, versionId); + const res = await refreshDocumentVersionState(docId); + const activeVersions = res.versions.filter( + (version) => version.deleted_at == null, + ); + const nextVersion = + activeVersions.find( + (version) => version.id === res.current_version_id, + ) ?? + activeVersions[activeVersions.length - 1] ?? + null; + setViewingDocVersion( + nextVersion + ? { + id: nextVersion.id, + label: nextVersion.filename?.trim() || "Version", + } + : null, + ); + } catch (e) { + console.error("deleteDocumentVersion failed", e); + setDocumentRenameWarning("Could not delete this version."); + } + } + + const [renamingDocumentId, setRenamingDocumentId] = useState<string | null>( + null, + ); + const [renameDocumentValue, setRenameDocumentValue] = useState(""); + + // Folder state + const [expandedFolderIds, setExpandedFolderIds] = useState<Set<string>>( + new Set(), + ); + // undefined = not creating; null = creating at root; string = creating inside that folder id + const [creatingFolderIn, setCreatingFolderIn] = useState< + string | null | undefined + >(undefined); + const [newFolderName, setNewFolderName] = useState(""); + const [renamingFolderId, setRenamingFolderId] = useState<string | null>( + null, + ); + const [renameFolderValue, setRenameFolderValue] = useState(""); + const [contextMenu, setContextMenu] = useState<ProjectContextMenu | null>( + null, + ); + const contextMenuRef = useRef<HTMLDivElement>(null); + const newFolderInputRef = useRef<HTMLDivElement | null>(null); + const versionUploadInputRef = useRef<HTMLInputElement>(null); + const [dragOverFolderId, setDragOverFolderId] = useState<string | null>( + null, + ); + const [dragOverRoot, setDragOverRoot] = useState(false); + const [dragOverFileRoot, setDragOverFileRoot] = useState(false); + const [isDraggingCollectionFiles, setIsDraggingCollectionFiles] = + useState(false); + const collectionDragDepthRef = useRef(0); + const [dragOverVersionDocId, setDragOverVersionDocId] = useState< + string | null + >(null); + const [uploadingVersionDocIds, setUploadingVersionDocIds] = useState< + Set<string> + >(() => new Set()); + const [versionUploadTargetDoc, setVersionUploadTargetDoc] = + useState<Document | null>(null); + const [uploadingDroppedFilenames, setUploadingDroppedFilenames] = useState< + string[] + >([]); + const [deletingDocIds, setDeletingDocIds] = useState<Set<string>>( + () => new Set(), + ); + const [documentUploadWarning, setDocumentUploadWarning] = useState< + string | null + >(null); + const [documentRenameWarning, setDocumentRenameWarning] = useState< + string | null + >(null); + const [collectionActionWarning, setCollectionActionWarning] = useState< + string | null + >(null); + const [pendingVersionDrop, setPendingVersionDrop] = useState<{ + targetDoc: Document; + sourceDoc: Document; + } | null>(null); + const [pendingDeleteDoc, setPendingDeleteDoc] = useState<Document | null>( + null, + ); + const [pendingDeleteStatus, setPendingDeleteStatus] = useState< + "idle" | "deleting" | "deleted" + >("idle"); + const [pendingDeleteFolder, setPendingDeleteFolder] = useState<{ + folder: DocTableFolder; + folderIds: string[]; + documentIds: string[]; + documentCount: number; + } | null>(null); + const [pendingDeleteFolderStatus, setPendingDeleteFolderStatus] = useState< + "idle" | "deleting" | "deleted" + >("idle"); + + const openCreateFolder = useCallback(() => { + if (loadingRef.current) return; + setCreatingFolderIn(null); + setNewFolderName(""); + }, []); + + useEffect(() => { + onCreateFolderActionChange?.(openCreateFolder); + return () => onCreateFolderActionChange?.(null); + }, [onCreateFolderActionChange, openCreateFolder]); + + useEffect(() => { + if (loading) return; + setExpandedFolderIds(new Set(folders.map((f) => f.id))); + }, [loading, folders]); + + useEffect(() => { + setSelectedDocIds([]); + setContextMenu(null); + setTypeFilter(null); + setSort(null); + }, [scopeKey]); + + // Close context menu on outside click + useEffect(() => { + if (!contextMenu) return; + function handle(e: MouseEvent) { + if ( + contextMenuRef.current && + !contextMenuRef.current.contains(e.target as Node) + ) + setContextMenu(null); + } + document.addEventListener("mousedown", handle); + return () => document.removeEventListener("mousedown", handle); + }, [contextMenu]); + + // Clear all drag state when any drag operation ends + useEffect(() => { + function handleDragEnd() { + setDragOverFolderId(null); + setDragOverRoot(false); + setDragOverFileRoot(false); + collectionDragDepthRef.current = 0; + setIsDraggingCollectionFiles(false); + } + document.addEventListener("dragend", handleDragEnd); + return () => document.removeEventListener("dragend", handleDragEnd); + }, []); + + // Scroll new-folder input into view whenever it appears + useEffect(() => { + if (creatingFolderIn !== undefined) { + newFolderInputRef.current?.scrollIntoView({ + behavior: "smooth", + block: "nearest", + }); + } + }, [creatingFolderIn]); + + // ── Folder handlers ─────────────────────────────────────────────────────── + + function toggleFolder(id: string) { + setExpandedFolderIds((prev) => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); + else next.add(id); + return next; + }); + } + + async function handleCreateFolder(parentId: string | null) { + const name = newFolderName.trim(); + setNewFolderName(""); + if (!name) { + setCreatingFolderIn(undefined); + return; + } + + // Immediately hide the input and show an optimistic folder row + setCreatingFolderIn(undefined); + const tempId = `temp-${Date.now()}`; + const optimistic = { + id: tempId, + user_id: "", + name, + parent_folder_id: parentId, + created_at: new Date().toISOString(), + updated_at: new Date().toISOString(), + } as DocTableFolder; + setFolders((prev) => [...prev, optimistic]); + setExpandedFolderIds((prev) => new Set([...prev, tempId])); + if (parentId) + setExpandedFolderIds((prev) => new Set([...prev, parentId])); + + // Replace with real folder from API + const folder = await operations.createFolder(name, parentId ?? null); + setFolders((prev) => prev.map((f) => (f.id === tempId ? folder : f))); + setExpandedFolderIds((prev) => { + const next = new Set(prev); + next.delete(tempId); + next.add(folder.id); + return next; + }); + } + + async function handleRenameFolder(folderId: string) { + const name = renameFolderValue.trim(); + setRenamingFolderId(null); + if (!name) return; + setFolders((prev) => + prev.map((f) => (f.id === folderId ? { ...f, name } : f)), + ); + await operations.renameFolder(folderId, name); + } + + function folderDeleteImpact(folderId: string) { + const childrenByParent = new Map<string, string[]>(); + for (const folder of folders) { + if (!folder.parent_folder_id) continue; + const children = + childrenByParent.get(folder.parent_folder_id) ?? []; + children.push(folder.id); + childrenByParent.set(folder.parent_folder_id, children); + } + + const toDelete = new Set<string>(); + const stack = [folderId]; + while (stack.length > 0) { + const id = stack.pop(); + if (!id || toDelete.has(id)) continue; + toDelete.add(id); + stack.push(...(childrenByParent.get(id) ?? [])); + } + + const folderIds = [...toDelete]; + const documentIds = documents + .filter((d) => d.folder_id && toDelete.has(d.folder_id)) + .map((d) => d.id); + return { folderIds, documentIds, documentCount: documentIds.length }; + } + + function requestDeleteFolder(folderId: string) { + const folder = folders.find((f) => f.id === folderId); + if (!folder) return; + const impact = folderDeleteImpact(folderId); + setPendingDeleteFolderStatus("idle"); + setPendingDeleteFolder({ + folder, + folderIds: impact.folderIds, + documentIds: impact.documentIds, + documentCount: impact.documentCount, + }); + } + + async function confirmDeletePendingFolder() { + const pending = pendingDeleteFolder; + if (!pending || pendingDeleteFolderStatus === "deleting") return; + setPendingDeleteFolderStatus("deleting"); + + try { + await operations.deleteFolder(pending.folder.id); + const toDelete = new Set(pending.folderIds); + + setFolders((prev) => prev.filter((f) => !toDelete.has(f.id))); + setDocuments((prev) => + prev.filter((d) => !d.folder_id || !toDelete.has(d.folder_id)), + ); + setExpandedFolderIds((prev) => { + const next = new Set(prev); + for (const id of toDelete) next.delete(id); + return next; + }); + if (renamingFolderId && toDelete.has(renamingFolderId)) { + setRenamingFolderId(null); + } + if (contextMenu?.folderId && toDelete.has(contextMenu.folderId)) { + setContextMenu(null); + } + const deletedDocIds = new Set(pending.documentIds); + setSelectedDocIds((prev) => + prev.filter((id) => !deletedDocIds.has(id)), + ); + setExpandedVersionDocIds((prev) => { + const next = new Set(prev); + for (const id of pending.documentIds) next.delete(id); + return next; + }); + setVersionsByDocId((prev) => { + const next = new Map(prev); + for (const id of pending.documentIds) next.delete(id); + return next; + }); + setPendingDeleteFolderStatus("deleted"); + window.setTimeout(() => { + setPendingDeleteFolder(null); + setPendingDeleteFolderStatus("idle"); + }, 650); + } catch (err) { + console.error("delete folder failed", err); + setPendingDeleteFolderStatus("idle"); + setCollectionActionWarning( + "Folder could not be deleted. Please try again.", + ); + } + } + + // ── Doc/chat/review handlers ────────────────────────────────────────────── + + function handleDocsSelected(newDocs: Document[]) { + setDocuments((prev) => + [ + ...prev, + ...newDocs.filter((d) => !prev.some((e) => e.id === d.id)), + ], + ); + } + + function removeDocumentFromLocalState(docId: string) { + setDocuments((prev) => prev.filter((doc) => doc.id !== docId)); + setSelectedDocIds((prev) => prev.filter((id) => id !== docId)); + setExpandedVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(docId); + return next; + }); + setVersionsByDocId((prev) => { + const next = new Map(prev); + next.delete(docId); + return next; + }); + setLoadingVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(docId); + return next; + }); + setUploadingVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(docId); + return next; + }); + setViewingDoc((prev) => (prev?.id === docId ? null : prev)); + if (renamingDocumentId === docId) setRenamingDocumentId(null); + if (contextMenu?.docId === docId) setContextMenu(null); + } + + function restoreDocumentToLocalState( + doc: Document, + snapshot: { + index: number; + selected: boolean; + versionsOpen: boolean; + versions?: DocumentVersion[]; + currentVersionId?: string | null; + loadingVersions: boolean; + uploadingVersion: boolean; + viewing: boolean; + viewingVersion: typeof viewingDocVersion; + }, + ) { + setDocuments((prev) => { + if (prev.some((d) => d.id === doc.id)) return prev; + const nextDocs = [...prev]; + nextDocs.splice( + Math.max(0, Math.min(snapshot.index, nextDocs.length)), + 0, + doc, + ); + return nextDocs; + }); + if (snapshot.selected) { + setSelectedDocIds((prev) => + prev.includes(doc.id) ? prev : [...prev, doc.id], + ); + } + if (snapshot.versionsOpen) { + setExpandedVersionDocIds((prev) => new Set([...prev, doc.id])); + } + const versions = snapshot.versions; + if (versions) { + setVersionsByDocId((prev) => { + const next = new Map(prev); + next.set(doc.id, { + currentVersionId: snapshot.currentVersionId ?? null, + versions, + }); + return next; + }); + } + if (snapshot.loadingVersions) { + setLoadingVersionDocIds((prev) => new Set([...prev, doc.id])); + } + if (snapshot.uploadingVersion) { + setUploadingVersionDocIds((prev) => new Set([...prev, doc.id])); + } + if (snapshot.viewing) { + setViewingDoc(doc); + setViewingDocVersion(snapshot.viewingVersion); + } + } + + async function handleRemoveDocFromFolder(docId: string) { + setDocuments((prev) => + prev.map((d) => + d.id === docId ? { ...d, folder_id: null } : d, + ), + ); + await operations.moveDocument(docId, null); + } + + async function submitDocumentRename(docId: string) { + const trimmed = renameDocumentValue.trim(); + if (!trimmed) { + setRenamingDocumentId(null); + return; + } + const previous = documents.find((d) => d.id === docId); + if (!previous || trimmed === previous.filename) { + setRenamingDocumentId(null); + return; + } + if (hasFilenameExtensionChange(previous.filename, trimmed)) { + setDocumentRenameWarning(extensionChangeWarning(previous.filename)); + return; + } + + setRenamingDocumentId(null); + + setDocuments((prev) => + prev.map((d) => + d.id === docId + ? { + ...d, + filename: trimmed, + updated_at: new Date().toISOString(), + } + : d, + ), + ); + try { + const updated = await operations.renameDocument(docId, trimmed); + setDocuments((prev) => + prev.map((d) => (d.id === docId ? { ...d, ...updated } : d)), + ); + } catch (e) { + console.error("renameDocument failed", e); + setDocuments((prev) => + previous + ? prev.map((d) => (d.id === docId ? previous : d)) + : prev, + ); + } + } + + async function handleRemoveDoc(docId: string) { + const doc = documents.find((d) => d.id === docId); + // Backend only lets the doc creator delete. Warn the requester + // instead of letting the request 404 silently. + if (doc && user?.id && doc.user_id && doc.user_id !== user.id) { + setOwnerOnlyAction("delete this document"); + return; + } + setDeletingDocIds((prev) => new Set([...prev, docId])); + try { + await deleteDocument(docId); + setDocuments((prev) => prev.filter((d) => d.id !== docId)); + } finally { + setDeletingDocIds((prev) => { + const next = new Set(prev); + next.delete(docId); + return next; + }); + } + } + + function requestRemoveDoc(doc: Document) { + if (doc && user?.id && doc.user_id && doc.user_id !== user.id) { + setOwnerOnlyAction("delete this document"); + return; + } + const versionCount = + versionsByDocId.get(doc.id)?.versions.length ?? + currentVersionNumber(doc) ?? + 1; + if (versionCount <= 1) { + void handleRemoveDoc(doc.id); + return; + } + setPendingDeleteStatus("idle"); + setPendingDeleteDoc(doc); + } + + async function confirmRemovePendingDoc() { + const pending = pendingDeleteDoc; + if (!pending || pendingDeleteStatus === "deleting") return; + setPendingDeleteStatus("deleting"); + try { + await handleRemoveDoc(pending.id); + setPendingDeleteStatus("deleted"); + window.setTimeout(() => { + setPendingDeleteDoc(null); + setPendingDeleteStatus("idle"); + }, 650); + } catch (err) { + console.error("delete document failed", err); + setPendingDeleteStatus("idle"); + } + } + + // ── Drag & drop ─────────────────────────────────────────────────────────── + + function wouldCreateCycle(movingId: string, targetId: string): boolean { + // Returns true if targetId is movingId or a descendant of it + let cur: DocTableFolder | undefined = folders.find( + (f) => f.id === targetId, + ); + while (cur) { + if (cur.id === movingId) return true; + if (!cur.parent_folder_id) break; + cur = folders.find((f) => f.id === cur!.parent_folder_id); + } + return false; + } + + function hasMovePayload(dt: DataTransfer): boolean { + return Array.from(dt.types).some( + (type) => + type === "application/mike-doc" || + type === "application/mike-folder", + ); + } + + function hasFilePayload(dt: DataTransfer): boolean { + return Array.from(dt.types).includes("Files"); + } + + function hasDocumentPayload(dt: DataTransfer): boolean { + return Array.from(dt.types).includes("application/mike-doc"); + } + + function currentVersionNumber(doc: Document): number | null { + return documentVersionNumber(doc); + } + + function isSharedDocument(doc: Document | null | undefined): boolean { + return !!(doc?.user_id && user?.id && doc.user_id !== user.id); + } + + async function handleDropCollectionFiles(files: File[]) { + if (files.length === 0) return; + const { supported, unsupported } = + partitionSupportedDocumentFiles(files); + setDocumentUploadWarning(formatUnsupportedDocumentWarning(unsupported)); + if (supported.length === 0) return; + setUploadingDroppedFilenames(supported.map((file) => file.name)); + try { + const uploaded = await Promise.all( + supported.map((file) => operations.uploadDocument(file)), + ); + handleDocsSelected(uploaded); + } catch (err) { + console.error("Document drop upload failed", err); + } finally { + setUploadingDroppedFilenames([]); + } + } + + useEffect(() => { + const hasFiles = (dataTransfer: DataTransfer | null) => + !!dataTransfer && Array.from(dataTransfer.types).includes("Files"); + + function handleDragEnter(event: globalThis.DragEvent) { + if (!hasFiles(event.dataTransfer)) return; + event.preventDefault(); + collectionDragDepthRef.current += 1; + setIsDraggingCollectionFiles(true); + } + + function handleDragOver(event: globalThis.DragEvent) { + if (!hasFiles(event.dataTransfer)) return; + event.preventDefault(); + if (event.dataTransfer) event.dataTransfer.dropEffect = "copy"; + } + + function handleDragLeave(event: globalThis.DragEvent) { + if (!hasFiles(event.dataTransfer)) return; + collectionDragDepthRef.current = Math.max( + 0, + collectionDragDepthRef.current - 1, + ); + if (collectionDragDepthRef.current === 0) { + setIsDraggingCollectionFiles(false); + } + } + + function handleDrop(event: globalThis.DragEvent) { + if (!hasFiles(event.dataTransfer)) return; + event.preventDefault(); + event.stopPropagation(); + collectionDragDepthRef.current = 0; + setIsDraggingCollectionFiles(false); + setDragOverFileRoot(false); + void handleDropCollectionFiles( + Array.from(event.dataTransfer?.files ?? []), + ); + } + + window.addEventListener("dragenter", handleDragEnter); + window.addEventListener("dragover", handleDragOver); + window.addEventListener("dragleave", handleDragLeave); + window.addEventListener("drop", handleDrop); + return () => { + window.removeEventListener("dragenter", handleDragEnter); + window.removeEventListener("dragover", handleDragOver); + window.removeEventListener("dragleave", handleDragLeave); + window.removeEventListener("drop", handleDrop); + }; + }); + + async function handleDropDocumentVersions(doc: Document, files: File[]) { + if (files.length === 0) return; + const { supported, unsupported } = + partitionSupportedDocumentFiles(files); + setDocumentUploadWarning(formatUnsupportedDocumentWarning(unsupported)); + if (supported.length === 0) return; + + setUploadingVersionDocIds((prev) => new Set([...prev, doc.id])); + try { + for (const file of supported) { + await uploadDocumentVersion(doc.id, file, file.name); + } + await refreshDocumentVersionState(doc.id); + } catch (err) { + console.error("Document version drop upload failed", err); + } finally { + setUploadingVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(doc.id); + return next; + }); + } + } + + async function saveExistingDocumentAsNewVersion( + targetDoc: Document, + sourceDoc: Document, + ) { + const sourceIndex = + documents.findIndex((doc) => doc.id === sourceDoc.id); + const sourceSnapshot = { + index: sourceIndex >= 0 ? sourceIndex : 0, + selected: selectedDocIds.includes(sourceDoc.id), + versionsOpen: expandedVersionDocIds.has(sourceDoc.id), + versions: versionsByDocId.get(sourceDoc.id)?.versions, + currentVersionId: versionsByDocId.get(sourceDoc.id) + ?.currentVersionId, + loadingVersions: loadingVersionDocIds.has(sourceDoc.id), + uploadingVersion: uploadingVersionDocIds.has(sourceDoc.id), + viewing: viewingDoc?.id === sourceDoc.id, + viewingVersion: + viewingDoc?.id === sourceDoc.id ? viewingDocVersion : null, + }; + + setUploadingVersionDocIds((prev) => new Set([...prev, targetDoc.id])); + removeDocumentFromLocalState(sourceDoc.id); + try { + await copyDocumentVersionFromDocument( + targetDoc.id, + sourceDoc.id, + sourceDoc.filename, + ); + await refreshDocumentVersionState(targetDoc.id); + } catch (err) { + console.error("Existing document version drop failed", err); + restoreDocumentToLocalState(sourceDoc, sourceSnapshot); + setCollectionActionWarning( + apiErrorDetail(err) ?? + "Could not save this document as a new version.", + ); + } finally { + setUploadingVersionDocIds((prev) => { + const next = new Set(prev); + next.delete(targetDoc.id); + return next; + }); + } + } + + function handleDropExistingDocumentVersion( + targetDoc: Document, + sourceDocId: string, + ) { + if (!sourceDocId || sourceDocId === targetDoc.id) return; + const sourceDoc = documents.find((doc) => doc.id === sourceDocId); + if (!sourceDoc) return; + setPendingVersionDrop({ targetDoc, sourceDoc }); + } + + function handleDocumentVersionDragOver( + e: DragEvent<HTMLDivElement>, + docId: string, + ) { + if ( + !hasFilePayload(e.dataTransfer) && + !hasDocumentPayload(e.dataTransfer) + ) { + return; + } + e.preventDefault(); + e.stopPropagation(); + e.dataTransfer.dropEffect = "copy"; + setDragOverVersionDocId(docId); + setDragOverFileRoot(false); + setDragOverRoot(false); + } + + function handleDocumentVersionDragLeave(e: DragEvent<HTMLDivElement>) { + if (!e.currentTarget.contains(e.relatedTarget as Node)) { + setDragOverVersionDocId(null); + } + } + + function handleDocumentVersionDrop( + e: DragEvent<HTMLDivElement>, + doc: Document, + ) { + if ( + !hasFilePayload(e.dataTransfer) && + !hasDocumentPayload(e.dataTransfer) + ) { + return; + } + e.preventDefault(); + e.stopPropagation(); + setDragOverVersionDocId(null); + setDragOverFileRoot(false); + collectionDragDepthRef.current = 0; + setIsDraggingCollectionFiles(false); + setDragOverRoot(false); + setDragOverFolderId(null); + if (hasFilePayload(e.dataTransfer)) { + void handleDropDocumentVersions( + doc, + Array.from(e.dataTransfer.files), + ); + return; + } + void handleDropExistingDocumentVersion( + doc, + e.dataTransfer.getData("application/mike-doc"), + ); + } + + async function handleDropOnFolder( + targetFolderId: string | null, + dt: DataTransfer, + ) { + if (!hasMovePayload(dt)) return; + const docId = dt.getData("application/mike-doc"); + const subFolderId = dt.getData("application/mike-folder"); + if (docId) { + const doc = documents.find((d) => d.id === docId); + if (!doc || (doc.folder_id ?? null) === targetFolderId) return; + setDocuments((prev) => + prev.map((d) => + d.id === docId ? { ...d, folder_id: targetFolderId } : d, + ), + ); + await operations.moveDocument(docId, targetFolderId); + } else if (subFolderId && subFolderId !== targetFolderId) { + if ( + targetFolderId !== null && + wouldCreateCycle(subFolderId, targetFolderId) + ) + return; + const folder = folders.find((f) => f.id === subFolderId); + if (!folder || (folder.parent_folder_id ?? null) === targetFolderId) + return; + setFolders((prev) => + prev.map((f) => + f.id === subFolderId + ? { ...f, parent_folder_id: targetFolderId } + : f, + ), + ); + await operations.moveFolder(subFolderId, targetFolderId); + } + } + + // ── Tree rendering ──────────────────────────────────────────────────────── + + function renderFolderInput(parentId: string | null, depth: number) { + if (creatingFolderIn !== parentId) return null; + return ( + <div + ref={newFolderInputRef} + className="group flex h-10 min-w-max items-center pr-8" + key={`new-folder-${parentId ?? "root"}`} + > + <div + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} py-2 pl-4 pr-2`} + style={treeNameCellStyle(depth)} + > + <div className="flex items-center"> + <span className="mr-4 flex h-2.5 w-2.5 shrink-0 items-center justify-center"> + <ChevronRight className="h-3.5 w-3.5 text-gray-300" /> + </span> + <SubfolderSvgIcon className="mr-2 h-4 w-4 shrink-0" /> + <input + autoFocus + className="flex-1 min-w-0 text-sm text-gray-800 bg-transparent outline-none border-b border-gray-300" + placeholder="Folder name" + value={newFolderName} + onChange={(e) => setNewFolderName(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") + void handleCreateFolder(parentId); + if (e.key === "Escape") { + setCreatingFolderIn(undefined); + setNewFolderName(""); + } + }} + onBlur={() => void handleCreateFolder(parentId)} + /> + </div> + </div> + <div className="ml-auto w-20 shrink-0" /> + <div className="w-24 shrink-0" /> + <div className="w-20 shrink-0" /> + <div className="w-32 shrink-0" /> + <div className="w-32 shrink-0" /> + <div className="w-8 shrink-0" /> + </div> + ); + } + + function renderDocumentActivityRow({ + key, + filename, + fileType, + depth, + statusLabel, + }: { + key: string; + filename: string; + fileType: string | null; + depth: number; + statusLabel: string; + }) { + return ( + <div + key={key} + className="group flex h-10 min-w-max items-center pr-8" + > + <div + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} py-2 pl-4 pr-2`} + style={treeNameCellStyle(depth)} + > + <div className="flex items-center"> + <Loader2 className="mr-4 h-2.5 w-2.5 animate-spin text-gray-400 shrink-0" /> + <span className="mr-2 shrink-0"> + <DocIcon + fileType={fileType ?? filename} + muted + /> + </span> + <span className="text-sm text-gray-400 truncate"> + {filename} + </span> + </div> + </div> + <div className="ml-auto w-20 shrink-0 text-xs text-gray-300 uppercase truncate"> + {fileType ?? + (filename.includes(".") + ? filename.split(".").pop() + : "file")} + </div> + <div className="w-24 shrink-0 text-sm text-gray-300"> + {statusLabel} + </div> + <div className="w-20 shrink-0 text-sm text-gray-300">—</div> + <div className="w-32 shrink-0 text-sm text-gray-300">—</div> + <div className="w-32 shrink-0 text-sm text-gray-300">—</div> + <div className="w-8 shrink-0" /> + </div> + ); + } + + function renderUploadingDocumentRows(depth: number) { + return uploadingDroppedFilenames.map((filename) => + renderDocumentActivityRow({ + key: `uploading-doc-${filename}`, + filename, + fileType: null, + depth, + statusLabel: "Uploading", + }), + ); + } + + function renderLevel(parentId: string | null, depth: number) { + const nameMultiplier = + enableHeaderFilters && + sort?.key === "name" && + sort.direction === "desc" + ? -1 + : 1; + const childFolders = folders + .filter((f) => f.parent_folder_id === parentId) + .sort((a, b) => a.name.localeCompare(b.name) * nameMultiplier); + const childDocs = filteredDocs.filter( + (d) => (d.folder_id ?? null) === parentId, + ); + + return ( + <> + {parentId === null && renderUploadingDocumentRows(depth)} + {/* Files first */} + {childDocs.map((doc) => { + const docName = doc.filename; + const isProcessing = + doc.status === "pending" || doc.status === "processing"; + const isError = doc.status === "error"; + const isVersionsOpen = expandedVersionDocIds.has(doc.id); + const versionNumber = currentVersionNumber(doc); + const hasVersions = + typeof versionNumber === "number" && versionNumber > 1; + const isVersionDragOver = dragOverVersionDocId === doc.id; + const isUploadingVersion = uploadingVersionDocIds.has( + doc.id, + ); + const isDeletingDoc = deletingDocIds.has(doc.id); + if (isDeletingDoc) { + return renderDocumentActivityRow({ + key: `deleting-doc-${doc.id}`, + filename: doc.filename, + fileType: doc.file_type, + depth, + statusLabel: "Deleting...", + }); + } + return ( + <div key={`doc-${doc.id}`}> + <div + draggable={renamingDocumentId !== doc.id} + onDragStart={(e) => { + if (renamingDocumentId === doc.id) { + e.preventDefault(); + return; + } + e.dataTransfer.setData( + "application/mike-doc", + doc.id, + ); + e.dataTransfer.effectAllowed = "copyMove"; + }} + onDragEnd={() => { + setDragOverRoot(false); + setDragOverFolderId(null); + setDragOverVersionDocId(null); + }} + onDragOver={(e) => + handleDocumentVersionDragOver(e, doc.id) + } + onDragLeave={handleDocumentVersionDragLeave} + onDrop={(e) => + handleDocumentVersionDrop(e, doc) + } + onClick={() => { + setViewingDocVersion(null); + setViewingDoc(doc); + }} + onContextMenu={(e) => { + e.preventDefault(); + e.stopPropagation(); + closeRowActionMenus(); + setContextMenu({ + x: e.clientX, + y: e.clientY, + docId: doc.id, + folderId: null, + showFolderActions: false, + }); + }} + className={`group flex h-10 min-w-max items-center pr-8 ${surfaceHoverBg} cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + > + {(() => { + const rowBg = isVersionDragOver + ? "bg-blue-50" + : selectedDocIds.includes(doc.id) + ? activeRowBg + : stickyCellBg; + return ( + <> + <div + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${rowBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver ? "" : surfaceGroupHoverBg}`} + style={treeNameCellStyle(depth)} + > + <div className="flex items-center"> + {isProcessing || + isUploadingVersion ? ( + <Loader2 className="mr-4 h-2.5 w-2.5 animate-spin text-gray-400 shrink-0" /> + ) : ( + <input + type="checkbox" + checked={selectedDocIds.includes( + doc.id, + )} + onChange={() => + setSelectedDocIds( + (prev) => + prev.includes( + doc.id, + ) + ? prev.filter( + ( + x, + ) => + x !== + doc.id, + ) + : [ + ...prev, + doc.id, + ], + ) + } + onClick={(e) => + e.stopPropagation() + } + className="mr-4 h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black" + /> + )} + <span className="mr-2 shrink-0"> + {isError ? ( + <AlertCircle className="h-4 w-4 text-red-500" /> + ) : ( + <DocIcon + fileType={ + doc.file_type + } + /> + )} + </span> + {renamingDocumentId === + doc.id ? ( + <input + autoFocus + className="min-w-0 flex-1 text-sm text-gray-800 bg-transparent outline-none border-b border-gray-300" + value={ + renameDocumentValue + } + onClick={(e) => + e.stopPropagation() + } + onDragStart={( + e, + ) => { + e.preventDefault(); + e.stopPropagation(); + }} + onChange={(e) => + setRenameDocumentValue( + e.target + .value, + ) + } + onKeyDown={(e) => { + if ( + e.key === + "Enter" + ) + void submitDocumentRename( + doc.id, + ); + if ( + e.key === + "Escape" + ) { + setRenamingDocumentId( + null, + ); + setRenameDocumentValue( + "", + ); + } + }} + onBlur={() => + void submitDocumentRename( + doc.id, + ) + } + /> + ) : ( + <span className="text-sm text-gray-800 truncate"> + {docName} + </span> + )} + </div> + </div> + <div className="ml-auto w-20 shrink-0 text-xs text-gray-500 uppercase truncate"> + {doc.file_type ?? ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div className="w-24 shrink-0 text-sm text-gray-500 truncate"> + {doc.size_bytes != null ? ( + formatBytes(doc.size_bytes) + ) : ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div + className="w-20 shrink-0 text-sm text-gray-500 flex items-center gap-1" + onClick={(e) => + e.stopPropagation() + } + > + {hasVersions ? ( + <button + onClick={() => + void toggleVersions( + doc.id, + ) + } + className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-app-surface-hover transition-colors" + > + <span> + {versionNumber} + </span> + {isVersionsOpen ? ( + <ChevronDown className="h-3 w-3 text-gray-400" /> + ) : ( + <ChevronRight className="h-3 w-3 text-gray-400" /> + )} + </button> + ) : ( + <span className="text-gray-300 pl-1"> + — + </span> + )} + </div> + <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> + {doc.created_at ? ( + formatDate(doc.created_at) + ) : ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> + {doc.updated_at ? ( + formatDate(doc.updated_at) + ) : ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div className="w-8 shrink-0 flex justify-end"> + {!isProcessing && ( + <RowActions + onRename={() => { + setRenameDocumentValue( + docName, + ); + setRenamingDocumentId( + doc.id, + ); + }} + renameLabel="Rename document" + onDownload={() => + downloadDoc(doc.id) + } + onShowAllVersions={ + hasVersions && + !isVersionsOpen + ? () => + void toggleVersions( + doc.id, + ) + : undefined + } + onUploadNewVersion={() => + void handleUploadNewVersion( + doc, + ) + } + onRemoveFromFolder={ + doc.folder_id + ? () => + handleRemoveDocFromFolder( + doc.id, + ) + : undefined + } + onDelete={() => + requestRemoveDoc( + doc, + ) + } + deleteDisabled={isSharedDocument( + doc, + )} + /> + )} + </div> + </> + ); + })()} + </div> + {isVersionsOpen && ( + <DocVersionHistory + docId={doc.id} + filename={docName} + activeVersionNumber={versionNumber} + loading={loadingVersionDocIds.has(doc.id)} + versions={ + versionsByDocId.get(doc.id)?.versions ?? + [] + } + currentVersionId={ + versionsByDocId.get(doc.id) + ?.currentVersionId ?? null + } + depth={depth} + onDownloadVersion={downloadDocVersion} + onOpenVersion={(versionId, label) => { + setViewingDocVersion({ + id: versionId, + label, + }); + setViewingDoc(doc); + }} + onRenameVersion={(versionId, filename) => + handleRenameVersion( + doc.id, + versionId, + filename, + ) + } + onExtensionChangeBlocked={(filename) => + setDocumentRenameWarning( + extensionChangeWarning(filename), + ) + } + /> + )} + </div> + ); + })} + + {/* Subfolders after files, sorted alphabetically */} + {childFolders.map((folder) => { + const isExpanded = expandedFolderIds.has(folder.id); + const isRenaming = renamingFolderId === folder.id; + return ( + <div key={`folder-${folder.id}`}> + <div + draggable={!isRenaming} + onDragStart={(e) => { + if (isRenaming) { + e.preventDefault(); + return; + } + e.dataTransfer.setData( + "application/mike-folder", + folder.id, + ); + e.dataTransfer.effectAllowed = "move"; + e.stopPropagation(); + }} + onDragOver={(e) => { + if (!hasMovePayload(e.dataTransfer)) return; + e.preventDefault(); + e.stopPropagation(); + setDragOverFolderId(folder.id); + setDragOverVersionDocId(null); + }} + onDragLeave={(e) => { + e.stopPropagation(); + setDragOverFolderId(null); + }} + onDrop={async (e) => { + if (!hasMovePayload(e.dataTransfer)) return; + e.preventDefault(); + e.stopPropagation(); + setDragOverFolderId(null); + setDragOverRoot(false); + setDragOverVersionDocId(null); + await handleDropOnFolder( + folder.id, + e.dataTransfer, + ); + }} + onClick={() => toggleFolder(folder.id)} + onContextMenu={(e) => { + e.preventDefault(); + e.stopPropagation(); + closeRowActionMenus(); + setContextMenu({ + x: e.clientX, + y: e.clientY, + folderId: folder.id, + showFolderActions: true, + }); + }} + className={`group flex h-10 min-w-max items-center pr-8 ${surfaceHoverBg} cursor-pointer transition-colors ${isRenaming ? "" : "select-none"} ${dragOverFolderId === folder.id ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + > + <div + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} py-2 pl-4 pr-2 ${dragOverFolderId === folder.id ? "bg-blue-50" : stickyCellBg} transition-colors ${dragOverFolderId === folder.id ? "" : surfaceGroupHoverBg}`} + style={treeNameCellStyle(depth)} + > + <div className="flex items-center"> + <span className="mr-4 flex h-2.5 w-2.5 shrink-0 items-center justify-center"> + {isExpanded ? ( + <ChevronDown className="h-3.5 w-3.5 text-gray-400" /> + ) : ( + <ChevronRight className="h-3.5 w-3.5 text-gray-400" /> + )} + </span> + <SubfolderSvgIcon + open={isExpanded} + className="mr-2 h-4 w-4 shrink-0" + /> + {isRenaming ? ( + <input + autoFocus + className="flex-1 min-w-0 text-sm text-gray-800 bg-transparent outline-none" + value={renameFolderValue} + onDragStart={(e) => { + e.preventDefault(); + e.stopPropagation(); + }} + onChange={(e) => + setRenameFolderValue( + e.target.value, + ) + } + onKeyDown={(e) => { + if (e.key === "Enter") + void handleRenameFolder( + folder.id, + ); + if (e.key === "Escape") + setRenamingFolderId( + null, + ); + }} + onBlur={() => + void handleRenameFolder( + folder.id, + ) + } + onClick={(e) => + e.stopPropagation() + } + /> + ) : ( + <span className="text-sm text-gray-800 truncate"> + {folder.name} + </span> + )} + </div> + </div> + <div className="ml-auto w-20 shrink-0 text-xs text-gray-300"> + — + </div> + <div className="w-24 shrink-0 text-sm text-gray-300"> + — + </div> + <div className="w-20 shrink-0 text-sm text-gray-300"> + — + </div> + <div className="w-32 shrink-0 text-sm text-gray-300"> + — + </div> + <div className="w-32 shrink-0 text-sm text-gray-300"> + — + </div> + <div + className="w-8 shrink-0 flex justify-end" + onClick={(e) => e.stopPropagation()} + > + <RowActions + onRename={() => { + setRenameFolderValue(folder.name); + setRenamingFolderId(folder.id); + }} + onDelete={() => + requestDeleteFolder(folder.id) + } + /> + </div> + </div> + {isExpanded && renderLevel(folder.id, depth + 1)} + </div> + ); + })} + + {/* New-folder input row at the bottom of this level */} + {renderFolderInput(parentId, depth)} + </> + ); + } + + // ── Loading skeleton ────────────────────────────────────────────────────── + + const docs = documents; + const downloadDoc = useCallback(async (docId: string) => { + const { url, filename } = await getDocumentUrl(docId); + const a = document.createElement("a"); + a.href = url; + a.download = filename; + a.click(); + }, []); + + const handleDownloadSelectedDocs = useCallback(async () => { + const ids = [...selectedDocIds]; + if (ids.length === 1) { + await downloadDoc(ids[0]); + return; + } + const blob = await downloadDocumentsZip(ids); + const a = document.createElement("a"); + a.href = URL.createObjectURL(blob); + a.download = "documents.zip"; + a.click(); + URL.revokeObjectURL(a.href); + }, [downloadDoc, selectedDocIds]); + + const handleRemoveSelectedFromFolder = useCallback(async () => { + const ids = selectedDocIds.filter( + (id) => docs.find((d) => d.id === id)?.folder_id != null, + ); + if (ids.length === 0) return; + setDocuments((prev) => + prev.map((d) => + ids.includes(d.id) ? { ...d, folder_id: null } : d, + ), + ); + await Promise.all( + ids.map((id) => operations.moveDocument(id, null).catch(() => {})), + ); + }, [docs, operations, selectedDocIds, setDocuments]); + + const handleDeleteSelectedDocs = useCallback(async () => { + const ids = [...selectedDocIds]; + const owned = ids.filter((id) => { + const doc = documents.find((candidate) => candidate.id === id); + return !doc || !doc.user_id || !user?.id || doc.user_id === user.id; + }); + const blocked = ids.length - owned.length; + setSelectedDocIds([]); + const results = await Promise.allSettled( + owned.map((id) => deleteDocument(id)), + ); + const deletedIds = owned.filter( + (_, index) => results[index].status === "fulfilled", + ); + const failedCount = owned.length - deletedIds.length; + setDocuments((prev) => + prev.filter((doc) => !deletedIds.includes(doc.id)), + ); + if (deletedIds.length > 0) { + setExpandedVersionDocIds((prev) => { + const next = new Set(prev); + for (const id of deletedIds) next.delete(id); + return next; + }); + setVersionsByDocId((prev) => { + const next = new Map(prev); + for (const id of deletedIds) next.delete(id); + return next; + }); + } + if (failedCount > 0) { + setCollectionActionWarning( + `${failedCount} ${failedCount === 1 ? "document" : "documents"} could not be deleted. Please try again.`, + ); + } + if (blocked > 0) { + setOwnerOnlyAction( + `delete ${blocked} of the selected documents — only the document creator can delete a document`, + ); + } + }, [ + documents, + selectedDocIds, + setDocuments, + setOwnerOnlyAction, + user?.id, + ]); + + const sidePanelDoc = viewingDoc + ? (docs.find((doc) => doc.id === viewingDoc.id) ?? viewingDoc) + : null; + const versionUploadAccept = ".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt"; + const q = search.toLowerCase(); + const typeOptions = useMemo( + () => + Array.from(new Set(docs.map(documentTypeValue))) + .sort((a, b) => a.localeCompare(b)) + .map((type) => ({ + value: type, + label: type.toUpperCase(), + })), + [docs], + ); + + function clearDocumentSelection() { + setSelectedDocIds([]); + } + + function handleTypeFilterChange(value: string | null) { + setTypeFilter(value); + clearDocumentSelection(); + } + + function handleSortChange( + key: DocumentSortKey, + direction: TableSortDirection | null, + ) { + setSort(direction ? { key, direction } : null); + clearDocumentSelection(); + } + + const filteredDocs = useMemo(() => { + const rows = docs + .filter( + (doc) => + !q || + doc.filename.toLowerCase().includes(q), + ) + .filter( + (doc) => + !enableHeaderFilters || + !typeFilter || + documentTypeValue(doc) === typeFilter, + ); + + if (!enableHeaderFilters || !sort) return rows; + + return [...rows].sort((a, b) => { + const multiplier = sort.direction === "asc" ? 1 : -1; + + if (sort.key === "size") { + return ((a.size_bytes ?? 0) - (b.size_bytes ?? 0)) * multiplier; + } + + if (sort.key === "version") { + return ( + ((documentVersionNumber(a) ?? 0) - + (documentVersionNumber(b) ?? 0)) * + multiplier + ); + } + + if (sort.key === "created") { + return ( + (dateTimeValue(a.created_at) - + dateTimeValue(b.created_at)) * + multiplier + ); + } + + if (sort.key === "updated") { + return ( + (dateTimeValue(a.updated_at) - + dateTimeValue(b.updated_at)) * + multiplier + ); + } + + return a.filename.localeCompare(b.filename) * multiplier; + }); + }, [docs, enableHeaderFilters, q, sort, typeFilter]); + + const nameSortDirection = sort?.key === "name" ? sort.direction : null; + const sizeSortDirection = sort?.key === "size" ? sort.direction : null; + const versionSortDirection = + sort?.key === "version" ? sort.direction : null; + const createdSortDirection = + sort?.key === "created" ? sort.direction : null; + const updatedSortDirection = + sort?.key === "updated" ? sort.direction : null; + const nameFilterButton = enableHeaderFilters ? ( + <TableFilters + label="Sort by name" + value={nameSortDirection} + allLabel="Default Order" + widthClassName="w-40" + align="right" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("name", direction)} + /> + ) : null; + const typeFilterButton = enableHeaderFilters ? ( + <TableFilters + label="Filter by file type" + value={typeFilter} + allLabel="All Types" + widthClassName="w-40" + options={typeOptions} + onChange={handleTypeFilterChange} + /> + ) : null; + const sizeFilterButton = enableHeaderFilters ? ( + <TableFilters + label="Sort by size" + value={sizeSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("size", direction)} + /> + ) : null; + const versionFilterButton = enableHeaderFilters ? ( + <TableFilters + label="Sort by version" + value={versionSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("version", direction)} + /> + ) : null; + const createdFilterButton = enableHeaderFilters ? ( + <TableFilters + label="Sort by created date" + value={createdSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("created", direction)} + /> + ) : null; + const updatedFilterButton = enableHeaderFilters ? ( + <TableFilters + label="Sort by updated date" + value={updatedSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("updated", direction)} + /> + ) : null; + + const allDocsSelected = + filteredDocs.length > 0 && + filteredDocs.every((d) => selectedDocIds.includes(d.id)); + const someDocsSelected = + !allDocsSelected && + filteredDocs.some((d) => selectedDocIds.includes(d.id)); + + const selectionActions = useMemo<DocTableSelectionActions | null>(() => { + if (selectedDocIds.length === 0) return null; + return { + selectedCount: selectedDocIds.length, + hasDocumentsInFolders: selectedDocIds.some( + (id) => docs.find((d) => d.id === id)?.folder_id != null, + ), + onDownload: handleDownloadSelectedDocs, + onRemoveFromFolder: handleRemoveSelectedFromFolder, + onDelete: handleDeleteSelectedDocs, + }; + }, [ + docs, + handleDeleteSelectedDocs, + handleDownloadSelectedDocs, + handleRemoveSelectedFromFolder, + selectedDocIds, + ]); + + useEffect(() => { + onSelectionActionsChange?.(selectionActions); + }, [onSelectionActionsChange, selectionActions]); + + useEffect(() => { + return () => onSelectionActionsChange?.(null); + }, [onSelectionActionsChange]); + + const pendingVersionDropMessage = pendingVersionDrop ? ( + <div className="space-y-2"> + <p> + You are about to save{" "} + <span className="font-medium text-gray-950"> + {pendingVersionDrop.sourceDoc.filename} + </span>{" "} + as a new version of{" "} + <span className="font-medium text-gray-950"> + {pendingVersionDrop.targetDoc.filename} + </span> + . + </p> + <p> + <span className="font-medium text-gray-950"> + {pendingVersionDrop.sourceDoc.filename} + </span>{" "} + will no longer exist as a separate document + {(currentVersionNumber(pendingVersionDrop.sourceDoc) ?? 1) > 1 + ? " and its older versions will be deleted" + : ""} + . + </p> + </div> + ) : undefined; + const pendingDeleteDocVersionCount = pendingDeleteDoc + ? (versionsByDocId.get(pendingDeleteDoc.id)?.versions.length ?? + currentVersionNumber(pendingDeleteDoc) ?? + 1) + : 0; + const pendingDeleteDocMessage = pendingDeleteDoc ? ( + <div className="space-y-2"> + <p> + <span className="font-medium text-gray-950"> + {pendingDeleteDoc.filename} + </span>{" "} + has {pendingDeleteDocVersionCount}{" "} + {pendingDeleteDocVersionCount === 1 ? "version" : "versions"}. + Deleting this document will delete all of its versions. + </p> + </div> + ) : undefined; + const pendingDeleteFolderMessage = pendingDeleteFolder ? ( + <div className="space-y-2"> + <p> + This will permanently delete{" "} + <span className="font-medium text-gray-950"> + {pendingDeleteFolder.folderIds.length}{" "} + {pendingDeleteFolder.folderIds.length === 1 + ? "folder" + : "folders"} + </span> + , including{" "} + <span className="font-medium text-gray-950"> + {pendingDeleteFolder.folder.name} + </span> + {pendingDeleteFolder.folderIds.length > 1 + ? " and its nested subfolders" + : ""} + . + </p> + {pendingDeleteFolder.documentCount > 0 && ( + <p> + {pendingDeleteFolder.documentCount}{" "} + {pendingDeleteFolder.documentCount === 1 + ? "document" + : "documents"}{" "} + in the deleted{" "} + {pendingDeleteFolder.folderIds.length === 1 + ? "folder" + : "folders"}{" "} + will also be permanently deleted. + </p> + )} + </div> + ) : undefined; + + return ( + <div className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"> + <input + ref={versionUploadInputRef} + type="file" + accept={versionUploadAccept} + className="hidden" + onChange={handleVersionUploadInputChange} + /> + <input + ref={documentUploadInputRef} + type="file" + accept={SUPPORTED_DOCUMENT_ACCEPT} + multiple + className="hidden" + onChange={(event) => { + const files = Array.from(event.target.files ?? []); + event.target.value = ""; + void handleDropCollectionFiles(files); + }} + /> + <UploadOverlay + open={isDraggingCollectionFiles} + label="Drop files here to upload" + warning={documentUploadWarning} + onWarningClose={() => setDocumentUploadWarning(null)} + /> + <WarningPopup + open={!!documentRenameWarning} + onClose={() => setDocumentRenameWarning(null)} + message={documentRenameWarning} + /> + <WarningPopup + open={!!collectionActionWarning} + onClose={() => setCollectionActionWarning(null)} + message={collectionActionWarning} + /> + <ConfirmPopup + open={!!pendingVersionDrop} + title="Save as new version?" + message={pendingVersionDropMessage} + confirmLabel="Confirm" + cancelLabel="Cancel" + onCancel={() => setPendingVersionDrop(null)} + onConfirm={() => { + const pending = pendingVersionDrop; + if (!pending) return; + setPendingVersionDrop(null); + void saveExistingDocumentAsNewVersion( + pending.targetDoc, + pending.sourceDoc, + ); + }} + /> + <ConfirmPopup + open={!!pendingDeleteDoc} + title="Delete document?" + message={pendingDeleteDocMessage} + confirmLabel="Delete" + confirmStatus={ + pendingDeleteStatus === "deleting" + ? "loading" + : pendingDeleteStatus === "deleted" + ? "complete" + : "idle" + } + cancelLabel="Cancel" + onCancel={() => { + if (pendingDeleteStatus === "deleting") return; + setPendingDeleteDoc(null); + setPendingDeleteStatus("idle"); + }} + onConfirm={() => void confirmRemovePendingDoc()} + /> + <ConfirmPopup + open={!!pendingDeleteFolder} + title="Delete folder?" + message={pendingDeleteFolderMessage} + confirmLabel="Delete" + confirmStatus={ + pendingDeleteFolderStatus === "deleting" + ? "loading" + : pendingDeleteFolderStatus === "deleted" + ? "complete" + : "idle" + } + cancelLabel="Cancel" + onCancel={() => { + if (pendingDeleteFolderStatus === "deleting") return; + setPendingDeleteFolder(null); + setPendingDeleteFolderStatus("idle"); + }} + onConfirm={() => void confirmDeletePendingFolder()} + /> + {/* Table content */} + <TableScrollArea + header={ + loading ? ( + <ProjectTableLoadingHeader + stickyCellBg={stickyCellBg} + /> + ) : ( + <TableHeaderRow + className={`${stickyCellBg} pr-8 md:pr-8`} + > + <TableStickyCell + header + widthClassName={DOC_NAME_COL_W} + bgClassName={stickyCellBg} + > + <input + type="checkbox" + checked={allDocsSelected} + ref={(el) => { + if (el) + el.indeterminate = + someDocsSelected; + }} + onChange={() => { + if (allDocsSelected) + setSelectedDocIds([]); + else + setSelectedDocIds( + filteredDocs.map((d) => d.id), + ); + }} + className={TABLE_CHECKBOX_CLASS} + /> + <span className="mr-1">Name</span> + {nameFilterButton} + </TableStickyCell> + <TableHeaderCell className="ml-auto flex w-20 items-center gap-1"> + <span>Type</span> + {typeFilterButton} + </TableHeaderCell> + <TableHeaderCell className="flex w-24 items-center gap-1"> + <span>Size</span> + {sizeFilterButton} + </TableHeaderCell> + <TableHeaderCell className="flex w-20 items-center gap-1"> + <span>Version</span> + {versionFilterButton} + </TableHeaderCell> + <TableHeaderCell className="flex w-32 items-center gap-1"> + <span>Created</span> + {createdFilterButton} + </TableHeaderCell> + <TableHeaderCell className="flex w-32 items-center gap-1"> + <span>Updated</span> + {updatedFilterButton} + </TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + ) + } + > + {loading ? ( + <ProjectTableLoading stickyCellBg={stickyCellBg} /> + ) : ( + <div className="flex-1 flex flex-col min-h-0"> + {/* Blue ring wraps everything below the header when root-dropping */} + <div + className="flex-1 flex flex-col min-h-0 relative" + onDragOver={(e) => { + if (!hasFilePayload(e.dataTransfer)) return; + e.preventDefault(); + e.dataTransfer.dropEffect = "copy"; + setDragOverFileRoot(true); + setDragOverVersionDocId(null); + }} + onDragLeave={(e) => { + if ( + !e.currentTarget.contains( + e.relatedTarget as Node, + ) + ) { + setDragOverFileRoot(false); + } + }} + onDrop={(e) => { + if (!hasFilePayload(e.dataTransfer)) return; + e.preventDefault(); + e.stopPropagation(); + setDragOverFileRoot(false); + collectionDragDepthRef.current = 0; + setIsDraggingCollectionFiles(false); + setDragOverRoot(false); + setDragOverFolderId(null); + setDragOverVersionDocId(null); + void handleDropCollectionFiles( + Array.from(e.dataTransfer.files), + ); + }} + > + {dragOverRoot && dragOverFolderId === null && ( + <div className="absolute inset-0 border-2 border-blue-400 pointer-events-none z-[80]" /> + )} + {dragOverFileRoot && ( + <div className="absolute inset-0 z-[90] border-2 border-blue-400 bg-blue-50/40 pointer-events-none" /> + )} + + {/* Empty state */} + {docs.length === 0 && + folders.length === 0 && + uploadingDroppedFilenames.length === 0 ? ( + <div + onClick={openAddDocuments} + className="flex-1 flex cursor-pointer flex-col items-center justify-center py-24 text-center" + > + <LibrarySkeuoIcon className="mb-3 h-8 w-8" /> + <p className="text-sm text-gray-400"> + {emptyDropLabel} + </p> + </div> + ) : ( + <div + className="flex-1 flex flex-col" + onContextMenu={(e) => { + e.preventDefault(); + closeRowActionMenus(); + setContextMenu({ + x: e.clientX, + y: e.clientY, + folderId: null, + showFolderActions: false, + }); + }} + onClick={() => setContextMenu(null)} + onDragOver={(e) => { + if (!hasMovePayload(e.dataTransfer)) + return; + e.preventDefault(); + setDragOverRoot(true); + setDragOverVersionDocId(null); + }} + onDragLeave={(e) => { + if ( + !e.currentTarget.contains( + e.relatedTarget as Node, + ) + ) { + setDragOverRoot(false); + } + }} + onDrop={async (e) => { + if (!hasMovePayload(e.dataTransfer)) + return; + e.preventDefault(); + setDragOverRoot(false); + setDragOverFolderId(null); + setDragOverVersionDocId(null); + await handleDropOnFolder( + null, + e.dataTransfer, + ); + }} + > + {/* Search: flat list; no search: folder tree */} + {q ? ( + <> + {renderUploadingDocumentRows(0)} + {filteredDocs.map((doc) => { + const docName = + doc.filename; + const isProcessing = + doc.status === + "pending" || + doc.status === + "processing"; + const isError = + doc.status === "error"; + const isVersionsOpen = + expandedVersionDocIds.has( + doc.id, + ); + const versionNumber = + currentVersionNumber( + doc, + ); + const hasVersions = + typeof versionNumber === + "number" && + versionNumber > 1; + const isVersionDragOver = + dragOverVersionDocId === + doc.id; + const isUploadingVersion = + uploadingVersionDocIds.has( + doc.id, + ); + const isDeletingDoc = + deletingDocIds.has( + doc.id, + ); + if (isDeletingDoc) { + return renderDocumentActivityRow( + { + key: `deleting-doc-${doc.id}`, + filename: + doc.filename, + fileType: + doc.file_type, + depth: 0, + statusLabel: + "Deleting...", + }, + ); + } + return ( + <div key={doc.id}> + <div + draggable={ + renamingDocumentId !== + doc.id + } + onDragStart={( + e, + ) => { + if ( + renamingDocumentId === + doc.id + ) { + e.preventDefault(); + return; + } + e.dataTransfer.setData( + "application/mike-doc", + doc.id, + ); + e.dataTransfer.effectAllowed = + "copyMove"; + }} + onDragEnd={() => { + setDragOverRoot( + false, + ); + setDragOverFolderId( + null, + ); + setDragOverVersionDocId( + null, + ); + }} + onDragOver={( + e, + ) => + handleDocumentVersionDragOver( + e, + doc.id, + ) + } + onDragLeave={ + handleDocumentVersionDragLeave + } + onDrop={(e) => + handleDocumentVersionDrop( + e, + doc, + ) + } + onClick={() => { + setViewingDocVersion( + null, + ); + setViewingDoc( + doc, + ); + }} + onContextMenu={( + e, + ) => { + e.preventDefault(); + e.stopPropagation(); + closeRowActionMenus(); + setContextMenu( + { + x: e.clientX, + y: e.clientY, + docId: doc.id, + folderId: + null, + showFolderActions: false, + }, + ); + }} + className={`group flex h-10 min-w-max items-center pr-8 ${surfaceHoverBg} cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + > + <div + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${isVersionDragOver ? "bg-blue-50" : selectedDocIds.includes(doc.id) ? activeRowBg : stickyCellBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver ? "" : surfaceGroupHoverBg}`} + > + <div className="flex items-center"> + {isProcessing || + isUploadingVersion ? ( + <Loader2 className="mr-4 h-2.5 w-2.5 animate-spin text-gray-400 shrink-0" /> + ) : ( + <input + type="checkbox" + checked={selectedDocIds.includes( + doc.id, + )} + onChange={() => + setSelectedDocIds( + ( + prev, + ) => + prev.includes( + doc.id, + ) + ? prev.filter( + ( + x, + ) => + x !== + doc.id, + ) + : [ + ...prev, + doc.id, + ], + ) + } + onClick={( + e, + ) => + e.stopPropagation() + } + className="mr-4 h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black" + /> + )} + <span className="mr-2 shrink-0"> + {isError ? ( + <AlertCircle className="h-4 w-4 text-red-500" /> + ) : ( + <DocIcon + fileType={ + doc.file_type + } + /> + )} + </span> + {renamingDocumentId === + doc.id ? ( + <input + autoFocus + className="min-w-0 flex-1 text-sm text-gray-800 bg-transparent outline-none border-b border-gray-300" + value={ + renameDocumentValue + } + onClick={( + e, + ) => + e.stopPropagation() + } + onDragStart={( + e, + ) => { + e.preventDefault(); + e.stopPropagation(); + }} + onChange={( + e, + ) => + setRenameDocumentValue( + e + .target + .value, + ) + } + onKeyDown={( + e, + ) => { + if ( + e.key === + "Enter" + ) + void submitDocumentRename( + doc.id, + ); + if ( + e.key === + "Escape" + ) { + setRenamingDocumentId( + null, + ); + setRenameDocumentValue( + "", + ); + } + }} + onBlur={() => + void submitDocumentRename( + doc.id, + ) + } + /> + ) : ( + <span className="text-sm text-gray-800 truncate"> + { + docName + } + </span> + )} + </div> + </div> + <div className="ml-auto w-20 shrink-0 text-xs text-gray-500 uppercase truncate"> + {doc.file_type ?? ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div className="w-24 shrink-0 text-sm text-gray-500 truncate"> + {doc.size_bytes != + null ? ( + formatBytes( + doc.size_bytes, + ) + ) : ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div + className="w-20 shrink-0 text-sm text-gray-500 flex items-center gap-1" + onClick={( + e, + ) => + e.stopPropagation() + } + > + {hasVersions ? ( + <button + onClick={() => + void toggleVersions( + doc.id, + ) + } + className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-app-surface-hover transition-colors" + > + <span> + { + versionNumber + } + </span> + {isVersionsOpen ? ( + <ChevronDown className="h-3 w-3 text-gray-400" /> + ) : ( + <ChevronRight className="h-3 w-3 text-gray-400" /> + )} + </button> + ) : ( + <span className="text-gray-300 pl-1"> + — + </span> + )} + </div> + <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> + {doc.created_at ? ( + formatDate( + doc.created_at, + ) + ) : ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> + {doc.updated_at ? ( + formatDate( + doc.updated_at, + ) + ) : ( + <span className="text-gray-300"> + — + </span> + )} + </div> + <div className="w-8 shrink-0 flex justify-end"> + {!isProcessing && ( + <RowActions + onRename={() => { + setRenameDocumentValue( + docName, + ); + setRenamingDocumentId( + doc.id, + ); + }} + renameLabel="Rename document" + onDownload={() => + downloadDoc( + doc.id, + ) + } + onShowAllVersions={ + hasVersions && + !isVersionsOpen + ? () => + void toggleVersions( + doc.id, + ) + : undefined + } + onUploadNewVersion={() => + void handleUploadNewVersion( + doc, + ) + } + onDelete={() => + requestRemoveDoc( + doc, + ) + } + deleteDisabled={isSharedDocument( + doc, + )} + /> + )} + </div> + </div> + {isVersionsOpen && ( + <DocVersionHistory + docId={ + doc.id + } + filename={ + docName + } + activeVersionNumber={ + versionNumber + } + loading={loadingVersionDocIds.has( + doc.id, + )} + versions={ + versionsByDocId.get( + doc.id, + ) + ?.versions ?? + [] + } + currentVersionId={ + versionsByDocId.get( + doc.id, + ) + ?.currentVersionId ?? + null + } + onDownloadVersion={ + downloadDocVersion + } + onOpenVersion={( + versionId, + label, + ) => { + setViewingDocVersion( + { + id: versionId, + label, + }, + ); + setViewingDoc( + doc, + ); + }} + onRenameVersion={( + versionId, + filename, + ) => + handleRenameVersion( + doc.id, + versionId, + filename, + ) + } + onExtensionChangeBlocked={( + filename, + ) => + setDocumentRenameWarning( + extensionChangeWarning( + filename, + ), + ) + } + /> + )} + </div> + ); + })} + </> + ) : ( + renderLevel(null, 0) + )} + {/* Spacer — fills remaining height and extends the root drop zone */} + <div className="flex-1 min-h-16" /> + </div> + )} + + {/* Context menu */} + {contextMenu && + (() => { + const menuDoc = contextMenu.docId + ? docs.find( + (doc) => + doc.id === + contextMenu.docId, + ) + : null; + const menuDocVersionNumber = menuDoc + ? currentVersionNumber(menuDoc) + : null; + const menuDocHasVersions = + typeof menuDocVersionNumber === + "number" && + menuDocVersionNumber > 1; + const menuDocVersionsOpen = menuDoc + ? expandedVersionDocIds.has( + menuDoc.id, + ) + : false; + const surfaceProps: RowActionMenuSurfaceProps = + { + className: "fixed z-[120]", + style: { + top: contextMenu.y, + left: contextMenu.x, + }, + onClick: (e) => + e.stopPropagation(), + }; + + return createPortal( + menuDoc ? ( + <RowActionMenuItems + ref={contextMenuRef} + surfaceProps={surfaceProps} + onClose={() => + setContextMenu(null) + } + onRename={() => { + setRenameDocumentValue( + menuDoc.filename, + ); + setRenamingDocumentId( + menuDoc.id, + ); + }} + renameLabel="Rename document" + onDownload={() => + downloadDoc(menuDoc.id) + } + onShowAllVersions={ + menuDocHasVersions && + !menuDocVersionsOpen + ? () => + void toggleVersions( + menuDoc.id, + ) + : undefined + } + onUploadNewVersion={() => + void handleUploadNewVersion( + menuDoc, + ) + } + onRemoveFromFolder={ + menuDoc.folder_id + ? () => + void handleRemoveDocFromFolder( + menuDoc.id, + ) + : undefined + } + onDelete={() => + requestRemoveDoc(menuDoc) + } + deleteDisabled={isSharedDocument( + menuDoc, + )} + /> + ) : ( + <RowActionMenuItems + ref={contextMenuRef} + surfaceProps={surfaceProps} + onClose={() => + setContextMenu(null) + } + onNewSubfolder={() => { + setCreatingFolderIn( + contextMenu.folderId, + ); + setNewFolderName(""); + if ( + contextMenu.folderId + ) { + setExpandedFolderIds( + (prev) => + new Set([ + ...prev, + contextMenu.folderId!, + ]), + ); + } + }} + newSubfolderLabel={ + contextMenu.showFolderActions + ? "New subfolder inside" + : "New subfolder" + } + onRename={ + contextMenu.showFolderActions && + contextMenu.folderId + ? () => { + const f = + folders.find( + (x) => + x.id === + contextMenu.folderId, + ); + setRenameFolderValue( + f?.name ?? + "", + ); + setRenamingFolderId( + contextMenu.folderId!, + ); + } + : undefined + } + renameLabel="Rename folder" + onDelete={ + contextMenu.showFolderActions && + contextMenu.folderId + ? () => + requestDeleteFolder( + contextMenu.folderId!, + ) + : undefined + } + deleteLabel="Delete folder" + /> + ), + document.body, + ); + })()} + </div> + {/* end blue ring wrapper */} + </div> + )} + </TableScrollArea> + + {renderAddDocumentsModal?.( + addDocsOpen, + () => setAddDocsOpen(false), + handleDocsSelected, + )} + + <DocumentSidePanel + doc={sidePanelDoc} + versionId={viewingDocVersion?.id ?? null} + currentVersionId={ + sidePanelDoc + ? (versionsByDocId.get(sidePanelDoc.id) + ?.currentVersionId ?? null) + : null + } + versions={ + sidePanelDoc + ? (versionsByDocId.get(sidePanelDoc.id)?.versions ?? []) + : [] + } + versionsLoading={ + sidePanelDoc + ? loadingVersionDocIds.has(sidePanelDoc.id) + : false + } + onClose={() => { + setViewingDoc(null); + setViewingDocVersion(null); + }} + onLoadVersions={(docId) => loadDocumentVersions(docId)} + onSelectVersion={(versionId, label) => + setViewingDocVersion({ id: versionId, label }) + } + onDownloadDocument={downloadDoc} + onDownloadVersion={downloadDocVersion} + onRenameVersion={handleRenameVersion} + onDeleteVersion={handleDeleteVersion} + onUploadNewVersion={submitNewVersion} + onReplaceVersion={replaceVersionFile} + canDelete={!isSharedDocument(sidePanelDoc)} + onOwnerOnlyAction={setOwnerOnlyAction} + onDelete={async (doc) => { + await handleRemoveDoc(doc.id); + }} + /> + + </div> + ); +} + +function filenameExtension(filename: string) { + const trimmed = filename.trim(); + const dotIndex = trimmed.lastIndexOf("."); + if (dotIndex <= 0 || dotIndex === trimmed.length - 1) return null; + return trimmed.slice(dotIndex); +} + +function hasFilenameExtensionChange(previous: string, next: string) { + const previousExtension = filenameExtension(previous); + if (previousExtension == null) return false; + return ( + filenameExtension(next)?.toLowerCase() !== + previousExtension.toLowerCase() + ); +} + +function extensionChangeWarning(filename: string) { + const extension = filenameExtension(filename); + return extension + ? `File extensions cannot be changed here. Keep ${extension} at the end of the name.` + : "File extensions cannot be changed here."; +} diff --git a/frontend/src/app/components/library/LibraryWorkspace.tsx b/frontend/src/app/components/library/LibraryWorkspace.tsx new file mode 100644 index 0000000..17f0c46 --- /dev/null +++ b/frontend/src/app/components/library/LibraryWorkspace.tsx @@ -0,0 +1,357 @@ +"use client"; + +import { + createContext, + type Dispatch, + type ReactNode, + type SetStateAction, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from "react"; +import { useRouter } from "next/navigation"; +import { Plus, Upload } from "lucide-react"; +import { DocTable } from "@/app/components/documents/DocTable"; +import type { DocTableFolder } from "@/app/components/documents/DocTable"; +import { PageHeader } from "@/app/components/shared/PageHeader"; +import { TableToolbar } from "@/app/components/shared/TableToolbar"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; +import { + createLibraryFolder, + deleteLibraryFolder, + getLibrary, + moveLibraryDocument, + moveLibraryFolder, + renameLibraryDocument, + renameLibraryFolder, + uploadLibraryDocument, + type LibraryKind, +} from "@/app/lib/mikeApi"; +import type { Document } from "@/app/components/shared/types"; + +type LibraryViewCollection = { + documents: Document[]; + folders: DocTableFolder[]; +}; + +type LibraryWorkspaceContextValue = { + collections: Record<LibraryKind, LibraryViewCollection | null>; + loadingByKind: Record<LibraryKind, boolean>; + searchByKind: Record<LibraryKind, string>; + loadLibrary: ( + kind: LibraryKind, + options?: { showLoading?: boolean }, + ) => Promise<void>; + setSearchForKind: (kind: LibraryKind, value: string) => void; + setDocumentsForKind: ( + kind: LibraryKind, + update: SetStateAction<Document[]>, + ) => void; + setFoldersForKind: ( + kind: LibraryKind, + update: SetStateAction<DocTableFolder[]>, + ) => void; +}; + +const LIBRARY_TABS: { id: LibraryKind; label: string }[] = [ + { id: "files", label: "Files" }, + { id: "templates", label: "Templates" }, +]; + +const EMPTY_COLLECTION: LibraryViewCollection = { + documents: [], + folders: [], +}; + +const LibraryWorkspaceContext = + createContext<LibraryWorkspaceContextValue | null>(null); + +function useLibraryWorkspace() { + const context = useContext(LibraryWorkspaceContext); + if (!context) { + throw new Error( + "useLibraryWorkspace must be used inside LibraryWorkspaceProvider", + ); + } + return context; +} + +export function LibraryWorkspaceProvider({ + children, +}: { + children: ReactNode; +}) { + const [collections, setCollections] = useState< + Record<LibraryKind, LibraryViewCollection | null> + >({ + files: null, + templates: null, + }); + const [loadingByKind, setLoadingByKind] = useState< + Record<LibraryKind, boolean> + >({ + files: false, + templates: false, + }); + const [searchByKind, setSearchByKind] = useState< + Record<LibraryKind, string> + >({ + files: "", + templates: "", + }); + + const loadLibrary = useCallback( + async (kind: LibraryKind, options: { showLoading?: boolean } = {}) => { + if (options.showLoading) { + setLoadingByKind((prev) => ({ ...prev, [kind]: true })); + } + try { + const loaded = await getLibrary(kind); + setCollections((prev) => ({ + ...prev, + [kind]: { + documents: loaded.documents, + folders: loaded.folders, + }, + })); + } catch (error) { + console.error("[library] failed to load", error); + setCollections((prev) => ({ + ...prev, + [kind]: EMPTY_COLLECTION, + })); + } finally { + if (options.showLoading) { + setLoadingByKind((prev) => ({ ...prev, [kind]: false })); + } + } + }, + [], + ); + + const setSearchForKind = useCallback((kind: LibraryKind, value: string) => { + setSearchByKind((prev) => ({ ...prev, [kind]: value })); + }, []); + + const setDocumentsForKind = useCallback( + (kind: LibraryKind, update: SetStateAction<Document[]>) => { + setCollections((prev) => { + const current = prev[kind] ?? EMPTY_COLLECTION; + const nextDocuments = + typeof update === "function" + ? update(current.documents) + : update; + return { + ...prev, + [kind]: { + ...current, + documents: nextDocuments, + }, + }; + }); + }, + [], + ); + + const setFoldersForKind = useCallback( + (kind: LibraryKind, update: SetStateAction<DocTableFolder[]>) => { + setCollections((prev) => { + const current = prev[kind] ?? EMPTY_COLLECTION; + const nextFolders = + typeof update === "function" + ? update(current.folders) + : update; + return { + ...prev, + [kind]: { + ...current, + folders: nextFolders, + }, + }; + }); + }, + [], + ); + + const value = useMemo( + () => ({ + collections, + loadingByKind, + searchByKind, + loadLibrary, + setSearchForKind, + setDocumentsForKind, + setFoldersForKind, + }), + [ + collections, + loadingByKind, + loadLibrary, + searchByKind, + setDocumentsForKind, + setFoldersForKind, + setSearchForKind, + ], + ); + + return ( + <LibraryWorkspaceContext.Provider value={value}> + {children} + </LibraryWorkspaceContext.Provider> + ); +} + +export function LibraryWorkspaceLayout({ children }: { children: ReactNode }) { + return <LibraryWorkspaceProvider>{children}</LibraryWorkspaceProvider>; +} + +export function LibraryCollectionPage({ kind }: { kind: LibraryKind }) { + const router = useRouter(); + const { + collections, + loadingByKind, + searchByKind, + loadLibrary, + setSearchForKind, + setDocumentsForKind, + setFoldersForKind, + } = useLibraryWorkspace(); + const collection = collections[kind]; + const search = searchByKind[kind]; + const title = kind === "files" ? "Files" : "Templates"; + + useEffect(() => { + if (collection) return; + void loadLibrary(kind, { showLoading: true }); + }, [collection, kind, loadLibrary]); + + const setDocuments: Dispatch<SetStateAction<Document[]>> = useCallback( + (update) => setDocumentsForKind(kind, update), + [kind, setDocumentsForKind], + ); + const setFolders: Dispatch<SetStateAction<DocTableFolder[]>> = useCallback( + (update) => setFoldersForKind(kind, update), + [kind, setFoldersForKind], + ); + const [addDocumentsAction, setAddDocumentsAction] = useState< + (() => void) | null + >(null); + const [createFolderAction, setCreateFolderAction] = useState< + (() => void) | null + >(null); + const loading = !collection || loadingByKind[kind]; + const addCollectionLabel = kind === "templates" ? "Templates" : "Files"; + + const handleAddDocumentsActionChange = useCallback( + (action: (() => void) | null) => { + setAddDocumentsAction(() => action); + }, + [], + ); + + const handleCreateFolderActionChange = useCallback( + (action: (() => void) | null) => { + setCreateFolderAction(() => action); + }, + [], + ); + + const operations = useMemo( + () => ({ + uploadDocument: (file: File) => uploadLibraryDocument(kind, file), + refreshCollection: () => loadLibrary(kind), + createFolder: (name: string, parentFolderId?: string | null) => + createLibraryFolder(kind, name, parentFolderId), + renameFolder: (folderId: string, name: string) => + renameLibraryFolder(kind, folderId, name), + deleteFolder: (folderId: string) => + deleteLibraryFolder(kind, folderId), + moveFolder: (folderId: string, parentFolderId: string | null) => + moveLibraryFolder(kind, folderId, parentFolderId), + moveDocument: (documentId: string, folderId: string | null) => + moveLibraryDocument(kind, documentId, folderId), + renameDocument: (documentId: string, filename: string) => + renameLibraryDocument(kind, documentId, filename), + }), + [kind, loadLibrary], + ); + + return ( + <div className="flex h-full min-h-0 flex-col"> + <PageHeader + breadcrumbs={[{ label: "Library" }, { label: title }]} + actionGroups={[ + { + actions: [ + { + type: "search", + value: search, + onChange: (value) => + setSearchForKind(kind, value), + placeholder: `Search ${title.toLowerCase()}...`, + }, + ], + }, + { + actions: [ + { + icon: <Upload className="h-3.5 w-3.5" />, + label: ( + <span className="hidden sm:inline"> + {addCollectionLabel} + </span> + ), + title: `Add ${addCollectionLabel}`, + onClick: addDocumentsAction ?? undefined, + disabled: !addDocumentsAction || loading, + }, + ], + }, + ]} + /> + + <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden"> + <TableToolbar + items={LIBRARY_TABS} + active={kind} + onChange={(next) => + router.push( + next === "files" ? "/library" : "/library/templates", + ) + } + actions={ + <TabPillButton + onClick={createFolderAction ?? undefined} + disabled={!createFolderAction || loading} + > + <Plus className="h-3.5 w-3.5" /> + <span className="hidden sm:inline">Folder</span> + </TabPillButton> + } + /> + <DocTable + scopeKey={kind} + documents={collection?.documents ?? []} + setDocuments={setDocuments} + folders={collection?.folders ?? []} + setFolders={setFolders} + loading={loading} + search={search} + operations={operations} + onAddDocumentsActionChange={handleAddDocumentsActionChange} + onCreateFolderActionChange={ + handleCreateFolderActionChange + } + enableHeaderFilters + emptyDropLabel={ + kind === "templates" + ? "Drop template files here" + : "Drop PDF, Word, Excel, or PowerPoint files here" + } + /> + </div> + </div> + ); +} diff --git a/frontend/src/app/components/modals/AddDocumentsModal.tsx b/frontend/src/app/components/modals/AddDocumentsModal.tsx index 8d1d19d..4dd0a62 100644 --- a/frontend/src/app/components/modals/AddDocumentsModal.tsx +++ b/frontend/src/app/components/modals/AddDocumentsModal.tsx @@ -9,10 +9,7 @@ import { } from "@/app/lib/mikeApi"; import type { Document } from "../shared/types"; import { FileDirectory } from "../shared/FileDirectory"; -import { - useDirectoryData, - invalidateDirectoryCache, -} from "../shared/useDirectoryData"; +import type { DirectoryTab } from "../shared/useDirectoryData"; import { Modal } from "./Modal"; import { SUPPORTED_DOCUMENT_ACCEPT, @@ -20,15 +17,19 @@ import { partitionSupportedDocumentFiles, } from "@/app/lib/documentUploadValidation"; -export { invalidateDirectoryCache }; - interface Props { open: boolean; onClose: () => void; onSelect: (documents: Document[], projectId?: string) => void; breadcrumb: string[]; - allowMultiple?: boolean; + initialTab?: DirectoryTab; projectId?: string; + initialSelectedDocuments?: Document[]; + /** Documents uploaded outside the modal while it is mounted. */ + externalUploadedDocuments?: Document[]; + /** Keep the modal mounted (hidden) while closed so the loaded + * directory listing survives close/reopen cycles. */ + keepMounted?: boolean; } export function AddDocumentsModal({ @@ -36,52 +37,91 @@ export function AddDocumentsModal({ onClose, onSelect, breadcrumb, - allowMultiple = true, + initialTab = "files", projectId, + initialSelectedDocuments, + externalUploadedDocuments, + keepMounted = false, }: Props) { - const { loading, standaloneDocuments, projects } = useDirectoryData(open); - const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set()); + const [selectedDocuments, setSelectedDocuments] = useState<Document[]>([]); const [uploading, setUploading] = useState(false); const [uploadingFilenames, setUploadingFilenames] = useState<string[]>([]); const [uploadWarning, setUploadWarning] = useState<string | null>(null); const [extraUploadedDocs, setExtraUploadedDocs] = useState<Document[]>([]); + // Tracks whether the modal has ever been opened, so keepMounted only + // keeps it (and its directory fetch) alive after first use rather than + // eagerly loading on page mount. + const [hasOpened, setHasOpened] = useState(open); const fileInputRef = useRef<HTMLInputElement>(null); + const wasOpenRef = useRef(false); useEffect(() => { - if (!open) return; - setSelectedIds(new Set()); - setExtraUploadedDocs([]); - setUploadingFilenames([]); - setUploadWarning(null); + if (open) setHasOpened(true); }, [open]); - if (!open) return null; + // Key the sync on the id list itself so a reopen targeting different + // documents (or ids arriving late) always re-seeds the selection. + const initialSelectionKey = (initialSelectedDocuments ?? []) + .map((document) => document.id) + .join("|"); + useEffect(() => { + if (!open) { + wasOpenRef.current = false; + return; + } + setSelectedDocuments((prev) => { + if (!wasOpenRef.current) return initialSelectedDocuments ?? []; + const next = new Map(prev.map((document) => [document.id, document])); + for (const document of initialSelectedDocuments ?? []) { + next.set(document.id, document); + } + return [...next.values()]; + }); + setUploadingFilenames([]); + setUploadWarning(null); + if (!keepMounted) { + // When kept mounted there is no refetch on reopen, so the + // listing (including this session's uploads) must survive. + setExtraUploadedDocs([]); + } + wasOpenRef.current = true; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [open, initialSelectionKey]); - const allStandalone = [ - ...extraUploadedDocs.filter( - (u) => !standaloneDocuments.some((d) => d.id === u.id), - ), - ...standaloneDocuments, - ]; + const externalUploadKey = (externalUploadedDocuments ?? []) + .map((document) => document.id) + .join("|"); + useEffect(() => { + if (!externalUploadedDocuments?.length) return; + setExtraUploadedDocs((prev) => { + const next = new Map(prev.map((document) => [document.id, document])); + for (const document of externalUploadedDocuments) { + next.set(document.id, document); + } + return [...next.values()]; + }); + if (open) { + setSelectedDocuments((prev) => { + const next = new Map( + prev.map((document) => [document.id, document]), + ); + for (const document of externalUploadedDocuments) { + next.set(document.id, document); + } + return [...next.values()]; + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [externalUploadKey]); - const availableProjects = projects - .filter((p) => p.id !== projectId) - .map((p) => ({ - ...p, - documents: p.documents || [], - })); - - const allDocs = [ - ...allStandalone, - ...availableProjects.flatMap((p) => p.documents || []), - ]; + if (!open && (!keepMounted || !hasOpened)) return null; async function handleConfirm() { - const selected = allDocs.filter((d) => selectedIds.has(d.id)); - if (projectId) { - const toAssign = selected.filter((d) => d.project_id !== projectId); - const alreadyHere = selected.filter( + const toAssign = selectedDocuments.filter( + (d) => d.project_id !== projectId, + ); + const alreadyHere = selectedDocuments.filter( (d) => d.project_id === projectId, ); if (toAssign.length > 0) { @@ -106,11 +146,11 @@ export function AddDocumentsModal({ } const projectIds = new Set( - selected.map((d) => d.project_id).filter(Boolean), + selectedDocuments.map((d) => d.project_id).filter(Boolean), ); const singleProjectId = projectIds.size === 1 ? [...projectIds][0]! : undefined; - onSelect(selected, singleProjectId); + onSelect(selectedDocuments, singleProjectId); onClose(); } @@ -134,11 +174,14 @@ export function AddDocumentsModal({ : uploadStandaloneDocument(f), ), ); - invalidateDirectoryCache(); setExtraUploadedDocs((prev) => [...uploaded, ...prev]); - uploaded.forEach((d) => - setSelectedIds((prev) => new Set([...prev, d.id])), - ); + setSelectedDocuments((prev) => [ + ...prev, + ...uploaded.filter( + (document) => + !prev.some((selected) => selected.id === document.id), + ), + ]); } catch (err) { console.error("Upload failed:", err); } finally { @@ -152,6 +195,7 @@ export function AddDocumentsModal({ <Modal open={open} onClose={onClose} + keepMounted={keepMounted} breadcrumbs={breadcrumb} secondaryAction={{ label: uploading ? "Uploading…" : "Upload", @@ -163,17 +207,10 @@ export function AddDocumentsModal({ onClick: () => fileInputRef.current?.click(), disabled: uploading, }} - footerStatus={ - selectedIds.size > 0 ? ( - <span className="text-xs text-gray-400"> - {selectedIds.size} selected - </span> - ) : null - } primaryAction={{ label: uploading ? "Saving…" : "Confirm", onClick: handleConfirm, - disabled: selectedIds.size === 0 || uploading, + disabled: selectedDocuments.length === 0 || uploading, }} > <input @@ -202,18 +239,13 @@ export function AddDocumentsModal({ <div className="flex min-h-0 flex-1 flex-col"> <FileDirectory - standaloneDocs={allStandalone} - directoryProjects={availableProjects} - loading={loading} - selectedIds={selectedIds} - onChange={setSelectedIds} - allowMultiple={allowMultiple} - emptyMessage="No documents yet" + documents={extraUploadedDocs} + selectedDocuments={selectedDocuments} + onChange={setSelectedDocuments} uploadingFilenames={uploadingFilenames} - searchable - searchAutoFocus - searchNoResultsMessage="No matches found" - showProjectTabs + showTabs + initialTab={initialTab} + excludeProjectId={projectId} /> </div> </Modal> diff --git a/frontend/src/app/components/modals/Modal.tsx b/frontend/src/app/components/modals/Modal.tsx index 76f12b9..cacffcd 100644 --- a/frontend/src/app/components/modals/Modal.tsx +++ b/frontend/src/app/components/modals/Modal.tsx @@ -1,5 +1,6 @@ "use client"; +import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import type { ButtonHTMLAttributes, ReactNode } from "react"; import { X } from "lucide-react"; @@ -28,6 +29,12 @@ interface ModalProps { primaryAction?: ModalAction; secondaryAction?: ModalAction; cancelAction?: ModalAction | false; + /** + * Keep the modal (and its children's state) mounted while closed, + * rendering it hidden instead of unmounting. Lets content like loaded + * directory listings survive close/reopen cycles. + */ + keepMounted?: boolean; } const sizeClassName: Record<ModalSize, string> = { @@ -49,7 +56,12 @@ export function Modal({ primaryAction, secondaryAction, cancelAction, + keepMounted = false, }: ModalProps) { + // Portals can't render during SSR, so a keep-mounted modal only renders + // (hidden) after the first client mount. + const [hasMounted, setHasMounted] = useState(false); + useEffect(() => setHasMounted(true), []); const hasHeader = breadcrumbs?.length; const hasFooter = footerStatus || @@ -58,13 +70,14 @@ export function Modal({ cancelAction; const resolvedCancelAction = cancelAction; - if (!open) return null; + if (!open && (!keepMounted || !hasMounted)) return null; return createPortal( <div className={cn( "fixed inset-0 z-[200] flex items-center justify-center px-4", "bg-white/10 backdrop-blur-[2px]", + !open && "hidden", )} onClick={onClose} > diff --git a/frontend/src/app/components/modals/ModalSegmentedToggle.tsx b/frontend/src/app/components/modals/ModalSegmentedToggle.tsx index 7a8e432..2359ed4 100644 --- a/frontend/src/app/components/modals/ModalSegmentedToggle.tsx +++ b/frontend/src/app/components/modals/ModalSegmentedToggle.tsx @@ -29,7 +29,7 @@ export function ModalSegmentedToggle<T extends string>({ return ( <div className={cn( - "inline-grid gap-1 rounded-full bg-gray-100", + "inline-grid gap-1 rounded-full bg-white/80 shadow-[0_6px_18px_rgba(15,23,42,0.08),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(15,23,42,0.04)] backdrop-blur-xl", size === "sm" ? "h-8 p-1" : "h-9 p-1", className, )} @@ -51,7 +51,7 @@ export function ModalSegmentedToggle<T extends string>({ "flex h-full items-center justify-center rounded-full text-xs transition-all disabled:cursor-not-allowed disabled:opacity-60", size === "sm" ? "gap-1 px-3" : "gap-1.5 px-3", active - ? "bg-white/80 text-gray-900 shadow-[0_5px_16px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.92),inset_0_-1px_0_rgba(255,255,255,0.62)] backdrop-blur-xl" + ? "bg-gray-100 text-gray-900" : "text-gray-500 hover:text-gray-700", )} > diff --git a/frontend/src/app/components/modals/ProjectPickerModal.tsx b/frontend/src/app/components/modals/ProjectPickerModal.tsx index 75bec10..a8d629b 100644 --- a/frontend/src/app/components/modals/ProjectPickerModal.tsx +++ b/frontend/src/app/components/modals/ProjectPickerModal.tsx @@ -1,8 +1,8 @@ "use client"; import { useState, type ButtonHTMLAttributes, type ReactNode } from "react"; -import { Folder } from "lucide-react"; import { SearchBar } from "@/app/components/ui/search-bar"; +import { ClosedProjectSvgIcon } from "@/app/components/shared/FolderSvgIcon"; import type { Project } from "../shared/types"; import { Modal } from "./Modal"; @@ -66,7 +66,7 @@ export function ProjectPickerModal({ key={i} className="flex items-center gap-2 rounded-md px-2 py-2" > - <div className="h-3.5 w-3.5 rounded-full border border-gray-200 shrink-0" /> + <div className="h-3.5 w-3.5 rounded border border-gray-200 shrink-0" /> <div className="h-3.5 w-3.5 rounded bg-gray-100 animate-pulse shrink-0" /> <div className="h-3 rounded bg-gray-100 animate-pulse" @@ -110,7 +110,7 @@ export function ProjectPickerModal({ <span className="h-1.5 w-1.5 rounded-sm bg-white" /> )} </span> - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + <ClosedProjectSvgIcon className="h-3.5 w-3.5 shrink-0" /> <span className={`flex-1 truncate ${isSelected ? "text-gray-900" : "text-gray-700"}`} > diff --git a/frontend/src/app/components/projects/NewProjectModal.tsx b/frontend/src/app/components/projects/NewProjectModal.tsx index e592500..dda4df4 100644 --- a/frontend/src/app/components/projects/NewProjectModal.tsx +++ b/frontend/src/app/components/projects/NewProjectModal.tsx @@ -7,10 +7,9 @@ import { createProject, uploadProjectDocument, } from "@/app/lib/mikeApi"; -import { useDirectoryData } from "../shared/useDirectoryData"; import { FileDirectory } from "../shared/FileDirectory"; import { AddUserInput } from "../shared/AddUserInput"; -import type { Project } from "../shared/types"; +import type { Document, Project } from "../shared/types"; import type { UserLookupResult } from "@/app/lib/mikeApi"; import { useAuth } from "@/app/contexts/AuthContext"; import { Modal } from "../modals/Modal"; @@ -30,7 +29,7 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { const [cmNumber, setCmNumber] = useState(""); const [practice, setPractice] = useState(""); const [sharedUsers, setSharedUsers] = useState<UserLookupResult[]>([]); - const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>(new Set()); + const [selectedDocuments, setSelectedDocuments] = useState<Document[]>([]); const [pendingFiles, setPendingFiles] = useState<File[]>([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); @@ -39,8 +38,6 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { const ownEmail = user?.email?.trim().toLowerCase() ?? null; const formId = "new-project-modal-form"; - const { loading: dirLoading, standaloneDocuments, projects: dirProjects } = useDirectoryData(open); - if (!open) return null; function submitterValue(e: React.FormEvent<HTMLFormElement>) { @@ -81,10 +78,15 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { : sharedUsers.map((user) => user.email), ); await Promise.all([ - ...[...selectedDocIds].map((id) => addDocumentToProject(project.id, id).catch(() => {})), + ...selectedDocuments.map((document) => + addDocumentToProject(project.id, document.id).catch(() => {}), + ), ...pendingFiles.map((f) => uploadProjectDocument(project.id, f).catch(() => {})), ]); - onCreated({ ...project, document_count: selectedDocIds.size + pendingFiles.length }); + onCreated({ + ...project, + document_count: selectedDocuments.length + pendingFiles.length, + }); resetForm(); onClose(); } catch (err: unknown) { @@ -100,7 +102,7 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { setCmNumber(""); setPractice(""); setSharedUsers([]); - setSelectedDocIds(new Set()); + setSelectedDocuments([]); setPendingFiles([]); setError(""); } @@ -311,15 +313,9 @@ export function NewProjectModal({ open, onClose, onCreated }: Props) { ) : ( <div className="flex min-h-0 flex-1 flex-col"> <FileDirectory - standaloneDocs={standaloneDocuments} - directoryProjects={dirProjects} - loading={dirLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - emptyMessage="No existing documents" - searchable - searchAutoFocus - showProjectTabs + selectedDocuments={selectedDocuments} + onChange={setSelectedDocuments} + showTabs /> </div> )} diff --git a/frontend/src/app/components/projects/ProjectAssistantTable.tsx b/frontend/src/app/components/projects/ProjectAssistantTable.tsx index aa89177..c9a5239 100644 --- a/frontend/src/app/components/projects/ProjectAssistantTable.tsx +++ b/frontend/src/app/components/projects/ProjectAssistantTable.tsx @@ -1,7 +1,7 @@ "use client"; -import { type Dispatch, type SetStateAction } from "react"; -import { MessageSquare } from "lucide-react"; +import { useMemo, useState, type Dispatch, type SetStateAction } from "react"; +import { Plus } from "lucide-react"; import { RowActionMenuItems, RowActions, @@ -14,13 +14,18 @@ import { TableBody, TableCell, TableEmptyState, + TableFilters, + type TableFilterOption, TableHeaderCell, TableHeaderRow, TablePrimaryCell, TableRow, TableScrollArea, + type TableSortDirection, TableStickyCell, } from "@/app/components/shared/TablePrimitive"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { ChatSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; import type { Chat } from "@/app/components/shared/types"; import { formatDate } from "./ProjectPageParts"; @@ -29,12 +34,17 @@ function creatorLabel(chat: Chat, currentUserId?: string | null) { return chat.creator_display_name?.trim() || "Shared"; } +type ProjectChatSortKey = "name" | "created"; + +const SORT_OPTIONS: TableFilterOption<TableSortDirection>[] = [ + { value: "asc", label: "Ascending" }, + { value: "desc", label: "Descending" }, +]; + export function ProjectAssistantTable({ chats, filteredChats, selectedChatIds, - allChatsSelected, - someChatsSelected, renamingChatId, renameChatValue, currentUserId, @@ -66,34 +76,148 @@ export function ProjectAssistantTable({ setRenameChatValue: Dispatch<SetStateAction<string>>; loading?: boolean; }) { + const [creatorFilter, setCreatorFilter] = useState<string | null>(null); + const [sort, setSort] = useState<{ + key: ProjectChatSortKey; + direction: TableSortDirection; + } | null>(null); + + function clearSelection() { + setSelectedChatIds([]); + } + + function handleCreatorFilterChange(value: string | null) { + setCreatorFilter(value); + clearSelection(); + } + + function handleSortChange( + key: ProjectChatSortKey, + direction: TableSortDirection | null, + ) { + setSort(direction ? { key, direction } : null); + clearSelection(); + } + + const creatorOptions = useMemo( + () => + Array.from( + new Set(chats.map((chat) => creatorLabel(chat, currentUserId))), + ) + .sort((a, b) => a.localeCompare(b)) + .map((creator) => ({ value: creator, label: creator })), + [chats, currentUserId], + ); + + const visibleChats = useMemo(() => { + const rows = filteredChats.filter( + (chat) => + !creatorFilter || + creatorLabel(chat, currentUserId) === creatorFilter, + ); + if (!sort) return rows; + + return [...rows].sort((a, b) => { + const multiplier = sort.direction === "asc" ? 1 : -1; + if (sort.key === "created") { + return ( + (new Date(a.created_at).getTime() - + new Date(b.created_at).getTime()) * + multiplier + ); + } + + return ( + (a.title ?? "Untitled Chat").localeCompare( + b.title ?? "Untitled Chat", + ) * multiplier + ); + }); + }, [creatorFilter, currentUserId, filteredChats, sort]); + + const allVisibleChatsSelected = + visibleChats.length > 0 && + visibleChats.every((chat) => selectedChatIds.includes(chat.id)); + const someVisibleChatsSelected = + !allVisibleChatsSelected && + visibleChats.some((chat) => selectedChatIds.includes(chat.id)); + const nameSortDirection = sort?.key === "name" ? sort.direction : null; + const createdSortDirection = + sort?.key === "created" ? sort.direction : null; + const nameFilterButton = ( + <TableFilters + label="Sort by chat name" + value={nameSortDirection} + allLabel="Default Order" + widthClassName="w-40" + align="right" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("name", direction)} + /> + ); + const creatorFilterButton = ( + <TableFilters + label="Filter by creator" + value={creatorFilter} + allLabel="All Creators" + widthClassName="w-44" + options={creatorOptions} + onChange={handleCreatorFilterChange} + /> + ); + const createdFilterButton = ( + <TableFilters + label="Sort by created date" + value={createdSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("created", direction)} + /> + ); + return ( <TableScrollArea header={ <TableHeaderRow className="pr-8 md:pr-8"> <TableStickyCell header> {loading ? ( - <SkeletonDot /> + <SkeletonDot className="mr-4" /> ) : ( <input type="checkbox" - checked={allChatsSelected} + checked={allVisibleChatsSelected} ref={(el) => { - if (el) el.indeterminate = someChatsSelected; + if (el) + el.indeterminate = + someVisibleChatsSelected; }} onChange={() => { - if (allChatsSelected) setSelectedChatIds([]); + if (allVisibleChatsSelected) + setSelectedChatIds([]); else setSelectedChatIds( - filteredChats.map((c) => c.id), + visibleChats.map((c) => c.id), ); }} className={TABLE_CHECKBOX_CLASS} /> )} - <span>Chats</span> + <span className="mr-1">Chats</span> + {!loading && nameFilterButton} </TableStickyCell> - <TableHeaderCell className="ml-auto w-32">Creator</TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> + <TableHeaderCell className="ml-auto w-32"> + <div className="flex items-center gap-1"> + <span>Creator</span> + {!loading && creatorFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-32"> + <div className="flex items-center gap-1"> + <span>Created</span> + {!loading && createdFilterButton} + </div> + </TableHeaderCell> <TableHeaderCell className="w-8" /> </TableHeaderRow> } @@ -102,7 +226,7 @@ export function ProjectAssistantTable({ <ProjectAssistantLoadingRows /> ) : chats.length === 0 ? ( <TableEmptyState> - <MessageSquare className="h-8 w-8 text-gray-300 mb-4" /> + <ChatSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Assistant </p> @@ -110,21 +234,25 @@ export function ProjectAssistantTable({ Ask questions and get answers grounded in the documents in this project. </p> - <button + <PillButton + tone="black" + size="sm" onClick={onCreateChat} - className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md" + className="mt-4 px-3" > - + Create New - </button> + <Plus className="h-3.5 w-3.5" /> + Create + </PillButton> </TableEmptyState> ) : ( <TableBody> - {filteredChats.map((chat) => ( + {visibleChats.map((chat) => ( <TableRow key={chat.id} - rightClickDropdown={(close) => ( + rightClickDropdown={(close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onRename={() => { if ( currentUserId && @@ -217,8 +345,8 @@ function ProjectAssistantLoadingRows() { className="pr-8 md:pr-8" > <TableStickyCell hover={false}> - <div className="flex min-w-0 items-center gap-4"> - <SkeletonDot /> + <div className="flex min-w-0 items-center"> + <SkeletonDot className="mr-4" /> <SkeletonLine className={`h-3.5 ${titleWidths[i - 1]}`} /> diff --git a/frontend/src/app/components/projects/ProjectDocumentsView.tsx b/frontend/src/app/components/projects/ProjectDocumentsView.tsx index 264fe7a..fbd780c 100644 --- a/frontend/src/app/components/projects/ProjectDocumentsView.tsx +++ b/frontend/src/app/components/projects/ProjectDocumentsView.tsx @@ -1,1887 +1,183 @@ "use client"; -import { type DragEvent, useEffect, useRef, useState } from "react"; import { - Upload, - Loader2, - AlertCircle, - ChevronDown, - ChevronRight, - Folder, - FolderOpen, - FolderPlus, -} from "lucide-react"; + type Dispatch, + type SetStateAction, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { ChevronDown, Plus } from "lucide-react"; import { - deleteDocument, - getProject, - getDocumentUrl, - downloadDocumentsZip, createProjectFolder, - renameProjectFolder, deleteProjectFolder, + getProject, moveDocumentToFolder, moveSubfolderToFolder, renameProjectDocument, - listDocumentVersions, - uploadDocumentVersion, - replaceDocumentVersionFile, - copyDocumentVersionFromDocument, - deleteDocumentVersion, + renameProjectFolder, uploadProjectDocument, - renameDocumentVersion, - type DocumentVersion, } from "@/app/lib/mikeApi"; -import type { - Document, - Folder as ProjectFolder, -} from "@/app/components/shared/types"; +import type { Document } from "@/app/components/shared/types"; +import { AddDocumentsModal } from "@/app/components/modals/AddDocumentsModal"; import { - closeRowActionMenus, - RowActionMenuItems, - RowActions, -} from "@/app/components/shared/RowActions"; -import { - AddDocumentsModal, - invalidateDirectoryCache, -} from "@/app/components/modals/AddDocumentsModal"; -import { useAuth } from "@/app/contexts/AuthContext"; -import { WarningPopup } from "@/app/components/popups/WarningPopup"; -import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; -import { - formatUnsupportedDocumentWarning, - partitionSupportedDocumentFiles, -} from "@/app/lib/documentUploadValidation"; -import { - DOC_NAME_COL_W, - DocIcon, - DocVersionHistory, - formatBytes, - formatDate, - treeNameCellStyle, - type ProjectContextMenu, -} from "./ProjectPageParts"; -import { DocumentSidePanel } from "./DocumentSidePanel"; + DocTable, + type DocTableSelectionActions, + type DocTableFolder, +} from "@/app/components/documents/DocTable"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; import { ProjectSectionToolbar, useProjectWorkspace } from "./ProjectWorkspace"; interface Props { projectId: string; } -function apiErrorDetail(error: unknown): string | null { - if (!(error instanceof Error)) return null; - try { - const parsed = JSON.parse(error.message) as unknown; - if ( - parsed && - typeof parsed === "object" && - "detail" in parsed && - typeof parsed.detail === "string" - ) { - return parsed.detail; - } - } catch { - // Non-JSON errors can fall through to the plain message below. - } - return error.message || null; -} - -function ProjectTableLoading({ - stickyCellBg, -}: { - stickyCellBg: string; -}) { - return ( - <div className="flex-1 flex flex-col min-h-0"> - <div className={`sticky top-0 z-[70] ${stickyCellBg} flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none shrink-0`}> - <div - className={`sticky left-0 z-[80] ${DOC_NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`} - > - <div className="h-2.5 w-2.5 rounded bg-gray-100 animate-pulse" /> - <span>Name</span> - </div> - <div className="ml-auto w-20 shrink-0 text-left">Type</div> - <div className="w-24 shrink-0 text-left">Size</div> - <div className="w-20 shrink-0 text-left">Version</div> - <div className="w-32 shrink-0 text-left">Created</div> - <div className="w-32 shrink-0 text-left">Updated</div> - <div className="w-8 shrink-0" /> - </div> - {[1, 2, 3, 4, 5].map((i) => ( - <div - key={i} - className="flex items-center h-10 pr-8 border-b border-gray-50" - > - <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} py-2 pl-4 pr-2`} - > - <div className="flex items-center gap-4"> - <div className="h-2.5 w-2.5 shrink-0 rounded bg-gray-100 animate-pulse" /> - <div - className="h-3.5 rounded bg-gray-100 animate-pulse" - style={{ width: `${210 + i * 16}px` }} - /> - </div> - </div> - <div className="ml-auto w-20 shrink-0"> - <div className="h-3 w-8 rounded bg-gray-100 animate-pulse" /> - </div> - <div className="w-24 shrink-0"> - <div className="h-3 w-12 rounded bg-gray-100 animate-pulse" /> - </div> - <div className="w-20 shrink-0"> - <div className="h-3 w-5 rounded bg-gray-100 animate-pulse" /> - </div> - <div className="w-32 shrink-0"> - <div className="h-3 w-16 rounded bg-gray-100 animate-pulse" /> - </div> - <div className="w-32 shrink-0"> - <div className="h-3 w-16 rounded bg-gray-100 animate-pulse" /> - </div> - <div className="w-8 shrink-0" /> - </div> - ))} - </div> - ); -} - export function ProjectDocumentsView({ projectId }: Props) { const workspace = useProjectWorkspace(); - const project = workspace.project; - const setProject = workspace.setProject; - const folders = workspace.folders; - const setFolders = workspace.setFolders; - const loading = workspace.projectLoading; - const prefetchProjectSections = workspace.prefetchProjectSections; - const [addDocsOpen, setAddDocsOpen] = useState(false); - const setOwnerOnlyAction = workspace.setOwnerOnlyAction; - const { user } = useAuth(); - const stickyCellBg = "bg-[#fafbfc]"; - const [viewingDoc, setViewingDoc] = useState<Document | null>(null); - const [viewingDocVersion, setViewingDocVersion] = useState<{ - id: string; - label: string; - } | null>(null); - const [selectedDocIds, setSelectedDocIds] = useState<string[]>([]); - - useEffect(() => { - if (!loading) prefetchProjectSections(); - }, [loading, prefetchProjectSections]); - - // Version-history expansion (per-doc). versionsByDocId caches fetched - // versions so toggling closed + open again doesn't refetch. loadingIds - // drives the inline spinner in the version cell while a fetch is in - // flight. - const [expandedVersionDocIds, setExpandedVersionDocIds] = useState< - Set<string> - >(() => new Set()); - const [versionsByDocId, setVersionsByDocId] = useState< - Map< - string, - { currentVersionId: string | null; versions: DocumentVersion[] } - > - >(() => new Map()); - const [loadingVersionDocIds, setLoadingVersionDocIds] = useState< - Set<string> - >(() => new Set()); - - const loadDocumentVersions = async ( - docId: string, - options: { expand?: boolean; force?: boolean } = {}, - ) => { - if (options.expand) { - setExpandedVersionDocIds((prev) => new Set([...prev, docId])); - } - if (!options.force && versionsByDocId.has(docId)) return; - setLoadingVersionDocIds((prev) => new Set([...prev, docId])); - try { - const res = await listDocumentVersions(docId); - setVersionsByDocId((prev) => { - const next = new Map(prev); - next.set(docId, { - currentVersionId: res.current_version_id, - versions: res.versions, - }); - return next; - }); - } catch (e) { - console.error("listDocumentVersions failed", e); - } finally { - setLoadingVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(docId); - return next; - }); - } - }; - - const toggleVersions = async (docId: string) => { - const already = expandedVersionDocIds.has(docId); - if (already) { - setExpandedVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(docId); - return next; - }); - return; - } - // Opening — expand immediately so the user sees a loading state. - await loadDocumentVersions(docId, { expand: true }); - }; - - async function downloadDocVersion( - docId: string, - versionId: string, - filename: string, - ) { - try { - const resolved = await getDocumentUrl(docId, versionId); - const a = document.createElement("a"); - a.href = resolved.url; - // Prefer the backend's resolved filename (which honours the - // version filename). Fall back to the passed filename - // if for some reason it's missing. - a.download = resolved.filename || filename; - a.click(); - } catch (e) { - console.error("downloadDocVersion failed", e); - } - } - - function handleUploadNewVersion(doc: Document) { - setVersionUploadTargetDoc(doc); - window.setTimeout(() => versionUploadInputRef.current?.click(), 0); - } - - async function handleVersionUploadInputChange( - e: React.ChangeEvent<HTMLInputElement>, - ) { - const file = e.target.files?.[0] ?? null; - e.target.value = ""; - const doc = versionUploadTargetDoc; - setVersionUploadTargetDoc(null); - if (!file || !doc) return; - await handleDropDocumentVersions(doc, [file]); - } - - async function submitNewVersion( - doc: Document, - file: File, - filename: string, - ) { - try { - await uploadDocumentVersion(doc.id, file, filename); - await refreshDocumentVersionState(doc.id); - } catch (e) { - console.error("uploadDocumentVersion failed", e); - } - } - - async function replaceVersionFile( - docId: string, - versionId: string, - file: File, - filename: string, - ) { - await replaceDocumentVersionFile(docId, versionId, file, filename); - const res = await refreshDocumentVersionState(docId); - const replaced = res.versions.find( - (version) => version.id === versionId, - ); - if (replaced) { - setViewingDocVersion({ - id: replaced.id, - label: replaced.filename?.trim() || "Version", - }); - } - } - - async function refreshDocumentVersionState(docId: string) { - // Refresh project so doc.active_version_number and filename advance. - const updated = await getProject(projectId); - setProject(updated); - // Re-fetch versions while keeping the previous rows visible until the - // updated list arrives. - const res = await listDocumentVersions(docId); - setVersionsByDocId((prev) => { - const next = new Map(prev); - next.set(docId, { - currentVersionId: res.current_version_id, - versions: res.versions, - }); - return next; - }); - return res; - } - - /** - * Patch a version filename and update the local cache in place. - */ - async function handleRenameVersion( - docId: string, - versionId: string, - filename: string | null, - ) { - const previousFilename = versionsByDocId - .get(docId) - ?.versions.find((version) => version.id === versionId) - ?.filename?.trim(); - if ( - previousFilename && - (filename == null || - hasFilenameExtensionChange(previousFilename, filename)) - ) { - setDocumentRenameWarning(extensionChangeWarning(previousFilename)); - return; - } - - try { - const updated = await renameDocumentVersion( - docId, - versionId, - filename, - ); - setVersionsByDocId((prev) => { - const cached = prev.get(docId); - if (!cached) return prev; - const next = new Map(prev); - next.set(docId, { - ...cached, - versions: cached.versions.map((v) => - v.id === versionId ? updated : v, - ), - }); - return next; - }); - } catch (e) { - console.error("renameDocumentVersion failed", e); - } - } - - async function handleDeleteVersion(docId: string, versionId: string) { - try { - await deleteDocumentVersion(docId, versionId); - const res = await refreshDocumentVersionState(docId); - const activeVersions = res.versions.filter( - (version) => version.deleted_at == null, - ); - const nextVersion = - activeVersions.find( - (version) => version.id === res.current_version_id, - ) ?? - activeVersions[activeVersions.length - 1] ?? - null; - setViewingDocVersion( - nextVersion - ? { - id: nextVersion.id, - label: nextVersion.filename?.trim() || "Version", - } - : null, - ); - } catch (e) { - console.error("deleteDocumentVersion failed", e); - setDocumentRenameWarning("Could not delete this version."); - } - } - - const [renamingDocumentId, setRenamingDocumentId] = useState<string | null>( - null, - ); - const [renameDocumentValue, setRenameDocumentValue] = useState(""); - - // Folder state - const [expandedFolderIds, setExpandedFolderIds] = useState<Set<string>>( - new Set(), - ); - // undefined = not creating; null = creating at root; string = creating inside that folder id - const [creatingFolderIn, setCreatingFolderIn] = useState< - string | null | undefined - >(undefined); - const [newFolderName, setNewFolderName] = useState(""); - const [renamingFolderId, setRenamingFolderId] = useState<string | null>( - null, - ); - const [renameFolderValue, setRenameFolderValue] = useState(""); - const [contextMenu, setContextMenu] = useState<ProjectContextMenu | null>( - null, - ); - const contextMenuRef = useRef<HTMLDivElement>(null); - const newFolderInputRef = useRef<HTMLDivElement | null>(null); - const versionUploadInputRef = useRef<HTMLInputElement>(null); - const [dragOverFolderId, setDragOverFolderId] = useState<string | null>( - null, - ); - const [dragOverRoot, setDragOverRoot] = useState(false); - const [dragOverFileRoot, setDragOverFileRoot] = useState(false); - const [dragOverVersionDocId, setDragOverVersionDocId] = useState< - string | null + const { + project, + setProject, + folders, + setFolders, + projectLoading, + prefetchProjectSections, + search, + setOwnerOnlyAction, + } = workspace; + const [createFolderAction, setCreateFolderAction] = useState< + (() => void) | null >(null); - const [uploadingVersionDocIds, setUploadingVersionDocIds] = useState< - Set<string> - >(() => new Set()); - const [versionUploadTargetDoc, setVersionUploadTargetDoc] = - useState<Document | null>(null); - const [uploadingDroppedFilenames, setUploadingDroppedFilenames] = useState< - string[] - >([]); - const [deletingDocIds, setDeletingDocIds] = useState<Set<string>>( - () => new Set(), - ); - const [documentUploadWarning, setDocumentUploadWarning] = useState< - string | null - >(null); - const [documentRenameWarning, setDocumentRenameWarning] = useState< - string | null - >(null); - const [projectActionWarning, setProjectActionWarning] = useState< - string | null - >(null); - const [pendingVersionDrop, setPendingVersionDrop] = useState<{ - targetDoc: Document; - sourceDoc: Document; - } | null>(null); - const [pendingDeleteDoc, setPendingDeleteDoc] = useState<Document | null>( - null, - ); - const [pendingDeleteStatus, setPendingDeleteStatus] = useState< - "idle" | "deleting" | "deleted" - >("idle"); - const [pendingDeleteFolder, setPendingDeleteFolder] = useState<{ - folder: ProjectFolder; - folderIds: string[]; - documentIds: string[]; - documentCount: number; - } | null>(null); - const [pendingDeleteFolderStatus, setPendingDeleteFolderStatus] = useState< - "idle" | "deleting" | "deleted" - >("idle"); - // Actions dropdown + const [selectionActions, setSelectionActions] = + useState<DocTableSelectionActions | null>(null); const [actionsOpen, setActionsOpen] = useState(false); const actionsRef = useRef<HTMLDivElement>(null); - const search = workspace.search; useEffect(() => { - if (loading) return; - setExpandedFolderIds(new Set(folders.map((f) => f.id))); - }, [loading, folders]); + if (!projectLoading) prefetchProjectSections(); + }, [projectLoading, prefetchProjectSections]); useEffect(() => { - setSelectedDocIds([]); - setActionsOpen(false); - setContextMenu(null); - }, [projectId]); - - useEffect(() => { - function handleClick(e: MouseEvent) { - if ( - actionsRef.current && - !actionsRef.current.contains(e.target as Node) - ) + function handleClick(event: MouseEvent) { + if (!actionsRef.current?.contains(event.target as Node)) { setActionsOpen(false); + } } if (actionsOpen) document.addEventListener("mousedown", handleClick); return () => document.removeEventListener("mousedown", handleClick); }, [actionsOpen]); - // Close context menu on outside click - useEffect(() => { - if (!contextMenu) return; - function handle(e: MouseEvent) { - if ( - contextMenuRef.current && - !contextMenuRef.current.contains(e.target as Node) - ) - setContextMenu(null); - } - document.addEventListener("mousedown", handle); - return () => document.removeEventListener("mousedown", handle); - }, [contextMenu]); - - // Clear all drag state when any drag operation ends - useEffect(() => { - function handleDragEnd() { - setDragOverFolderId(null); - setDragOverRoot(false); - setDragOverFileRoot(false); - } - document.addEventListener("dragend", handleDragEnd); - return () => document.removeEventListener("dragend", handleDragEnd); - }, []); - - // Scroll new-folder input into view whenever it appears - useEffect(() => { - if (creatingFolderIn !== undefined) { - newFolderInputRef.current?.scrollIntoView({ - behavior: "smooth", - block: "nearest", + const documents = project?.documents ?? []; + const setDocuments = useCallback( + (update: SetStateAction<Document[]>) => { + setProject((prev) => { + if (!prev) return prev; + const nextDocuments = + typeof update === "function" + ? update(prev.documents ?? []) + : update; + return { ...prev, documents: nextDocuments }; }); - } - }, [creatingFolderIn]); - - // ── Folder handlers ─────────────────────────────────────────────────────── - - function toggleFolder(id: string) { - setExpandedFolderIds((prev) => { - const next = new Set(prev); - if (next.has(id)) next.delete(id); - else next.add(id); - return next; - }); - } - - async function handleCreateFolder(parentId: string | null) { - const name = newFolderName.trim(); - setNewFolderName(""); - if (!name) { - setCreatingFolderIn(undefined); - return; - } - - // Immediately hide the input and show an optimistic folder row - setCreatingFolderIn(undefined); - const tempId = `temp-${Date.now()}`; - const optimistic: ProjectFolder = { - id: tempId, - project_id: projectId, - user_id: "", - name, - parent_folder_id: parentId, - created_at: new Date().toISOString(), - updated_at: new Date().toISOString(), - }; - setFolders((prev) => [...prev, optimistic]); - setExpandedFolderIds((prev) => new Set([...prev, tempId])); - if (parentId) - setExpandedFolderIds((prev) => new Set([...prev, parentId])); - - // Replace with real folder from API - const folder = await createProjectFolder( - projectId, - name, - parentId ?? undefined, - ); - setFolders((prev) => prev.map((f) => (f.id === tempId ? folder : f))); - setExpandedFolderIds((prev) => { - const next = new Set(prev); - next.delete(tempId); - next.add(folder.id); - return next; - }); - } - - async function handleRenameFolder(folderId: string) { - const name = renameFolderValue.trim(); - setRenamingFolderId(null); - if (!name) return; - setFolders((prev) => - prev.map((f) => (f.id === folderId ? { ...f, name } : f)), - ); - await renameProjectFolder(projectId, folderId, name); - } - - function folderDeleteImpact(folderId: string) { - const childrenByParent = new Map<string, string[]>(); - for (const folder of folders) { - if (!folder.parent_folder_id) continue; - const children = - childrenByParent.get(folder.parent_folder_id) ?? []; - children.push(folder.id); - childrenByParent.set(folder.parent_folder_id, children); - } - - const toDelete = new Set<string>(); - const stack = [folderId]; - while (stack.length > 0) { - const id = stack.pop(); - if (!id || toDelete.has(id)) continue; - toDelete.add(id); - stack.push(...(childrenByParent.get(id) ?? [])); - } - - const folderIds = [...toDelete]; - const documentIds = (project?.documents ?? []) - .filter((d) => d.folder_id && toDelete.has(d.folder_id)) - .map((d) => d.id); - return { folderIds, documentIds, documentCount: documentIds.length }; - } - - function requestDeleteFolder(folderId: string) { - const folder = folders.find((f) => f.id === folderId); - if (!folder) return; - const impact = folderDeleteImpact(folderId); - setPendingDeleteFolderStatus("idle"); - setPendingDeleteFolder({ - folder, - folderIds: impact.folderIds, - documentIds: impact.documentIds, - documentCount: impact.documentCount, - }); - } - - async function confirmDeletePendingFolder() { - const pending = pendingDeleteFolder; - if (!pending || pendingDeleteFolderStatus === "deleting") return; - setPendingDeleteFolderStatus("deleting"); - - try { - await deleteProjectFolder(projectId, pending.folder.id); - const toDelete = new Set(pending.folderIds); - - setFolders((prev) => prev.filter((f) => !toDelete.has(f.id))); - setProject((prev) => - prev - ? { - ...prev, - documents: (prev.documents ?? []).filter( - (d) => !d.folder_id || !toDelete.has(d.folder_id), - ), - } - : prev, - ); - setExpandedFolderIds((prev) => { - const next = new Set(prev); - for (const id of toDelete) next.delete(id); - return next; - }); - if (renamingFolderId && toDelete.has(renamingFolderId)) { - setRenamingFolderId(null); - } - if (contextMenu?.folderId && toDelete.has(contextMenu.folderId)) { - setContextMenu(null); - } - const deletedDocIds = new Set(pending.documentIds); - setSelectedDocIds((prev) => - prev.filter((id) => !deletedDocIds.has(id)), - ); - setExpandedVersionDocIds((prev) => { - const next = new Set(prev); - for (const id of pending.documentIds) next.delete(id); - return next; - }); - setVersionsByDocId((prev) => { - const next = new Map(prev); - for (const id of pending.documentIds) next.delete(id); - return next; - }); - setPendingDeleteFolderStatus("deleted"); - window.setTimeout(() => { - setPendingDeleteFolder(null); - setPendingDeleteFolderStatus("idle"); - }, 650); - } catch (err) { - console.error("delete folder failed", err); - setPendingDeleteFolderStatus("idle"); - setProjectActionWarning( - "Folder could not be deleted. Please try again.", - ); - } - } - - // ── Doc/chat/review handlers ────────────────────────────────────────────── - - function handleDocsSelected(newDocs: Document[]) { - setProject((prev) => - prev - ? { - ...prev, - documents: [ - ...(prev.documents || []), - ...newDocs.filter( - (d) => - !prev.documents?.some((e) => e.id === d.id), - ), - ], - } - : prev, - ); - } - - function removeDocumentFromLocalState(docId: string) { - setProject((prev) => - prev - ? { - ...prev, - documents: - prev.documents?.filter((doc) => doc.id !== docId) ?? - [], - } - : prev, - ); - setSelectedDocIds((prev) => prev.filter((id) => id !== docId)); - setExpandedVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(docId); - return next; - }); - setVersionsByDocId((prev) => { - const next = new Map(prev); - next.delete(docId); - return next; - }); - setLoadingVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(docId); - return next; - }); - setUploadingVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(docId); - return next; - }); - setViewingDoc((prev) => (prev?.id === docId ? null : prev)); - if (renamingDocumentId === docId) setRenamingDocumentId(null); - if (contextMenu?.docId === docId) setContextMenu(null); - } - - function restoreDocumentToLocalState( - doc: Document, - snapshot: { - index: number; - selected: boolean; - versionsOpen: boolean; - versions?: DocumentVersion[]; - currentVersionId?: string | null; - loadingVersions: boolean; - uploadingVersion: boolean; - viewing: boolean; - viewingVersion: typeof viewingDocVersion; }, - ) { - setProject((prev) => { - if (!prev) return prev; - const documents = prev.documents ?? []; - if (documents.some((d) => d.id === doc.id)) return prev; - const nextDocs = [...documents]; - nextDocs.splice( - Math.max(0, Math.min(snapshot.index, nextDocs.length)), - 0, - doc, - ); - return { ...prev, documents: nextDocs }; - }); - if (snapshot.selected) { - setSelectedDocIds((prev) => - prev.includes(doc.id) ? prev : [...prev, doc.id], - ); - } - if (snapshot.versionsOpen) { - setExpandedVersionDocIds((prev) => new Set([...prev, doc.id])); - } - const versions = snapshot.versions; - if (versions) { - setVersionsByDocId((prev) => { - const next = new Map(prev); - next.set(doc.id, { - currentVersionId: snapshot.currentVersionId ?? null, - versions, - }); - return next; - }); - } - if (snapshot.loadingVersions) { - setLoadingVersionDocIds((prev) => new Set([...prev, doc.id])); - } - if (snapshot.uploadingVersion) { - setUploadingVersionDocIds((prev) => new Set([...prev, doc.id])); - } - if (snapshot.viewing) { - setViewingDoc(doc); - setViewingDocVersion(snapshot.viewingVersion); - } - } + [setProject], + ); - async function handleRemoveDocFromFolder(docId: string) { - setProject((prev) => - prev - ? { - ...prev, - documents: (prev.documents ?? []).map((d) => - d.id === docId ? { ...d, folder_id: null } : d, - ), - } - : prev, - ); - await moveDocumentToFolder(projectId, docId, null); - } + const refreshCollection = useCallback(async () => { + const updated = await getProject(projectId); + setProject(updated); + setFolders(updated.folders ?? []); + }, [projectId, setFolders, setProject]); + const operations = useMemo( + () => ({ + uploadDocument: (file: File) => + uploadProjectDocument(projectId, file), + refreshCollection, + createFolder: (name: string, parentFolderId?: string | null) => + createProjectFolder(projectId, name, parentFolderId), + renameFolder: (folderId: string, name: string) => + renameProjectFolder(projectId, folderId, name), + deleteFolder: (folderId: string) => + deleteProjectFolder(projectId, folderId), + moveFolder: (folderId: string, parentFolderId: string | null) => + moveSubfolderToFolder(projectId, folderId, parentFolderId), + moveDocument: (documentId: string, folderId: string | null) => + moveDocumentToFolder(projectId, documentId, folderId), + renameDocument: (documentId: string, filename: string) => + renameProjectDocument(projectId, documentId, filename), + }), + [projectId, refreshCollection], + ); - async function submitDocumentRename(docId: string) { - const trimmed = renameDocumentValue.trim(); - if (!trimmed) { - setRenamingDocumentId(null); - return; - } - const previous = project?.documents?.find((d) => d.id === docId); - if (!previous || trimmed === previous.filename) { - setRenamingDocumentId(null); - return; - } - if (hasFilenameExtensionChange(previous.filename, trimmed)) { - setDocumentRenameWarning(extensionChangeWarning(previous.filename)); - return; - } + const handleCreateFolderActionChange = useCallback( + (action: (() => void) | null) => { + setCreateFolderAction(() => action); + }, + [], + ); + const handleSelectionActionsChange = useCallback( + (actions: DocTableSelectionActions | null) => { + setSelectionActions(actions); + }, + [], + ); - setRenamingDocumentId(null); - - setProject((prev) => - prev - ? { - ...prev, - documents: (prev.documents ?? []).map((d) => - d.id === docId - ? { - ...d, - filename: trimmed, - updated_at: new Date().toISOString(), - } - : d, - ), - } - : prev, - ); - try { - const updated = await renameProjectDocument( - projectId, - docId, - trimmed, - ); - setProject((prev) => - prev - ? { - ...prev, - documents: (prev.documents ?? []).map((d) => - d.id === docId ? { ...d, ...updated } : d, - ), - } - : prev, - ); - } catch (e) { - console.error("renameProjectDocument failed", e); - setProject((prev) => - prev && previous - ? { - ...prev, - documents: (prev.documents ?? []).map((d) => - d.id === docId ? previous : d, - ), - } - : prev, - ); - } - } - - async function handleRemoveDoc(docId: string) { - const doc = project?.documents?.find((d) => d.id === docId); - // Backend only lets the doc creator delete. Warn the requester - // instead of letting the request 404 silently. - if (doc && user?.id && doc.user_id && doc.user_id !== user.id) { - setOwnerOnlyAction("delete this document"); - return; - } - setDeletingDocIds((prev) => new Set([...prev, docId])); - try { - await deleteDocument(docId); - setProject((prev) => - prev - ? { - ...prev, - documents: - prev.documents?.filter((d) => d.id !== docId) || - [], - } - : prev, - ); - } finally { - setDeletingDocIds((prev) => { - const next = new Set(prev); - next.delete(docId); - return next; - }); - } - } - - function requestRemoveDoc(doc: Document) { - if (doc && user?.id && doc.user_id && doc.user_id !== user.id) { - setOwnerOnlyAction("delete this document"); - return; - } - const versionCount = - versionsByDocId.get(doc.id)?.versions.length ?? - currentVersionNumber(doc) ?? - 1; - if (versionCount <= 1) { - void handleRemoveDoc(doc.id); - return; - } - setPendingDeleteStatus("idle"); - setPendingDeleteDoc(doc); - } - - async function confirmRemovePendingDoc() { - const pending = pendingDeleteDoc; - if (!pending || pendingDeleteStatus === "deleting") return; - setPendingDeleteStatus("deleting"); - try { - await handleRemoveDoc(pending.id); - setPendingDeleteStatus("deleted"); - window.setTimeout(() => { - setPendingDeleteDoc(null); - setPendingDeleteStatus("idle"); - }, 650); - } catch (err) { - console.error("delete document failed", err); - setPendingDeleteStatus("idle"); - } - } - - async function downloadDoc(docId: string) { - const { url, filename } = await getDocumentUrl(docId); - const a = document.createElement("a"); - a.href = url; - a.download = filename; - a.click(); - } - - async function handleDownloadSelectedDocs() { - setActionsOpen(false); - const ids = [...selectedDocIds]; - if (ids.length === 1) { - await downloadDoc(ids[0]); - return; - } - const blob = await downloadDocumentsZip(ids); - const a = document.createElement("a"); - a.href = URL.createObjectURL(blob); - a.download = "documents.zip"; - a.click(); - URL.revokeObjectURL(a.href); - } - - async function handleRemoveSelectedFromFolder() { - const ids = selectedDocIds.filter( - (id) => docs.find((d) => d.id === id)?.folder_id != null, - ); - setActionsOpen(false); - if (ids.length === 0) return; - setProject((prev) => - prev - ? { - ...prev, - documents: (prev.documents ?? []).map((d) => - ids.includes(d.id) ? { ...d, folder_id: null } : d, - ), - } - : prev, - ); - await Promise.all( - ids.map((id) => - moveDocumentToFolder(projectId, id, null).catch(() => {}), - ), - ); - } - - async function handleDeleteSelectedDocs() { - const ids = [...selectedDocIds]; - setActionsOpen(false); - // Filter to docs the requester owns (server-side gate). - const owned = ids.filter((id) => { - const d = project?.documents?.find((dd) => dd.id === id); - return !d || !d.user_id || !user?.id || d.user_id === user.id; - }); - const blocked = ids.length - owned.length; - setSelectedDocIds([]); - const results = await Promise.allSettled( - owned.map((id) => deleteDocument(id)), - ); - const deletedIds = owned.filter( - (_, index) => results[index].status === "fulfilled", - ); - const failedCount = owned.length - deletedIds.length; - setProject((prev) => - prev - ? { - ...prev, - documents: - prev.documents?.filter( - (d) => !deletedIds.includes(d.id), - ) || [], - } - : prev, - ); - if (deletedIds.length > 0) { - setExpandedVersionDocIds((prev) => { - const next = new Set(prev); - for (const id of deletedIds) next.delete(id); - return next; - }); - setVersionsByDocId((prev) => { - const next = new Map(prev); - for (const id of deletedIds) next.delete(id); - return next; - }); - } - if (failedCount > 0) { - setProjectActionWarning( - `${failedCount} ${failedCount === 1 ? "document" : "documents"} could not be deleted. Please try again.`, - ); - } - if (blocked > 0) { - setOwnerOnlyAction( - `delete ${blocked} of the selected documents — only the document creator can delete a document`, - ); - } - } - - // ── Drag & drop ─────────────────────────────────────────────────────────── - - function wouldCreateCycle(movingId: string, targetId: string): boolean { - // Returns true if targetId is movingId or a descendant of it - let cur: ProjectFolder | undefined = folders.find( - (f) => f.id === targetId, - ); - while (cur) { - if (cur.id === movingId) return true; - if (!cur.parent_folder_id) break; - cur = folders.find((f) => f.id === cur!.parent_folder_id); - } - return false; - } - - function hasMovePayload(dt: DataTransfer): boolean { - return Array.from(dt.types).some( - (type) => - type === "application/mike-doc" || - type === "application/mike-folder", - ); - } - - function hasFilePayload(dt: DataTransfer): boolean { - return Array.from(dt.types).includes("Files"); - } - - function hasDocumentPayload(dt: DataTransfer): boolean { - return Array.from(dt.types).includes("application/mike-doc"); - } - - function currentVersionNumber(doc: Document): number | null { - return doc.active_version_number ?? doc.latest_version_number ?? null; - } - - function isSharedDocument(doc: Document | null | undefined): boolean { - return !!(doc?.user_id && user?.id && doc.user_id !== user.id); - } - - async function handleDropProjectFiles(files: File[]) { - if (files.length === 0) return; - const { supported, unsupported } = - partitionSupportedDocumentFiles(files); - setDocumentUploadWarning(formatUnsupportedDocumentWarning(unsupported)); - if (supported.length === 0) return; - setUploadingDroppedFilenames(supported.map((file) => file.name)); - try { - const uploaded = await Promise.all( - supported.map((file) => uploadProjectDocument(projectId, file)), - ); - invalidateDirectoryCache(); - handleDocsSelected(uploaded); - } catch (err) { - console.error("Project document drop upload failed", err); - } finally { - setUploadingDroppedFilenames([]); - } - } - - async function handleDropDocumentVersions(doc: Document, files: File[]) { - if (files.length === 0) return; - const { supported, unsupported } = - partitionSupportedDocumentFiles(files); - setDocumentUploadWarning(formatUnsupportedDocumentWarning(unsupported)); - if (supported.length === 0) return; - - setUploadingVersionDocIds((prev) => new Set([...prev, doc.id])); - try { - for (const file of supported) { - await uploadDocumentVersion(doc.id, file, file.name); - } - await refreshDocumentVersionState(doc.id); - } catch (err) { - console.error("Document version drop upload failed", err); - } finally { - setUploadingVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(doc.id); - return next; - }); - } - } - - async function saveExistingDocumentAsNewVersion( - targetDoc: Document, - sourceDoc: Document, - ) { - const sourceIndex = - project?.documents?.findIndex((doc) => doc.id === sourceDoc.id) ?? - -1; - const sourceSnapshot = { - index: sourceIndex >= 0 ? sourceIndex : 0, - selected: selectedDocIds.includes(sourceDoc.id), - versionsOpen: expandedVersionDocIds.has(sourceDoc.id), - versions: versionsByDocId.get(sourceDoc.id)?.versions, - currentVersionId: versionsByDocId.get(sourceDoc.id) - ?.currentVersionId, - loadingVersions: loadingVersionDocIds.has(sourceDoc.id), - uploadingVersion: uploadingVersionDocIds.has(sourceDoc.id), - viewing: viewingDoc?.id === sourceDoc.id, - viewingVersion: - viewingDoc?.id === sourceDoc.id ? viewingDocVersion : null, - }; - - setUploadingVersionDocIds((prev) => new Set([...prev, targetDoc.id])); - removeDocumentFromLocalState(sourceDoc.id); - try { - await copyDocumentVersionFromDocument( - targetDoc.id, - sourceDoc.id, - sourceDoc.filename, - ); - invalidateDirectoryCache(); - await refreshDocumentVersionState(targetDoc.id); - } catch (err) { - console.error("Existing document version drop failed", err); - restoreDocumentToLocalState(sourceDoc, sourceSnapshot); - setProjectActionWarning( - apiErrorDetail(err) ?? - "Could not save this document as a new version.", - ); - } finally { - setUploadingVersionDocIds((prev) => { - const next = new Set(prev); - next.delete(targetDoc.id); - return next; - }); - } - } - - function handleDropExistingDocumentVersion( - targetDoc: Document, - sourceDocId: string, - ) { - if (!sourceDocId || sourceDocId === targetDoc.id) return; - const sourceDoc = (project?.documents ?? []).find( - (doc) => doc.id === sourceDocId, - ); - if (!sourceDoc) return; - setPendingVersionDrop({ targetDoc, sourceDoc }); - } - - function handleDocumentVersionDragOver( - e: DragEvent<HTMLDivElement>, - docId: string, - ) { - if ( - !hasFilePayload(e.dataTransfer) && - !hasDocumentPayload(e.dataTransfer) - ) { - return; - } - e.preventDefault(); - e.stopPropagation(); - e.dataTransfer.dropEffect = "copy"; - setDragOverVersionDocId(docId); - setDragOverFileRoot(false); - setDragOverRoot(false); - } - - function handleDocumentVersionDragLeave(e: DragEvent<HTMLDivElement>) { - if (!e.currentTarget.contains(e.relatedTarget as Node)) { - setDragOverVersionDocId(null); - } - } - - function handleDocumentVersionDrop( - e: DragEvent<HTMLDivElement>, - doc: Document, - ) { - if ( - !hasFilePayload(e.dataTransfer) && - !hasDocumentPayload(e.dataTransfer) - ) { - return; - } - e.preventDefault(); - e.stopPropagation(); - setDragOverVersionDocId(null); - setDragOverFileRoot(false); - setDragOverRoot(false); - setDragOverFolderId(null); - if (hasFilePayload(e.dataTransfer)) { - void handleDropDocumentVersions( - doc, - Array.from(e.dataTransfer.files), - ); - return; - } - void handleDropExistingDocumentVersion( - doc, - e.dataTransfer.getData("application/mike-doc"), - ); - } - - async function handleDropOnFolder( - targetFolderId: string | null, - dt: DataTransfer, - ) { - if (!hasMovePayload(dt)) return; - const docId = dt.getData("application/mike-doc"); - const subFolderId = dt.getData("application/mike-folder"); - if (docId) { - const doc = (project?.documents ?? []).find((d) => d.id === docId); - if (!doc || (doc.folder_id ?? null) === targetFolderId) return; - setProject((prev) => - prev - ? { - ...prev, - documents: (prev.documents ?? []).map((d) => - d.id === docId - ? { ...d, folder_id: targetFolderId } - : d, - ), - } - : prev, - ); - await moveDocumentToFolder(projectId, docId, targetFolderId); - } else if (subFolderId && subFolderId !== targetFolderId) { - if ( - targetFolderId !== null && - wouldCreateCycle(subFolderId, targetFolderId) - ) - return; - const folder = folders.find((f) => f.id === subFolderId); - if (!folder || (folder.parent_folder_id ?? null) === targetFolderId) - return; - setFolders((prev) => - prev.map((f) => - f.id === subFolderId - ? { ...f, parent_folder_id: targetFolderId } - : f, - ), - ); - await moveSubfolderToFolder(projectId, subFolderId, targetFolderId); - } - } - - // ── Tree rendering ──────────────────────────────────────────────────────── - - function renderFolderInput(parentId: string | null, depth: number) { - if (creatingFolderIn !== parentId) return null; - return ( - <div - ref={newFolderInputRef} - className="group flex items-center h-10 pr-8 border-b border-gray-50" - key={`new-folder-${parentId ?? "root"}`} - > - <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} py-2 pl-4 pr-2`} - style={treeNameCellStyle(depth)} - > - <div className="flex items-center gap-4"> - <span className="flex h-2.5 w-2.5 shrink-0 items-center justify-center"> - <ChevronRight className="h-3.5 w-3.5 text-gray-300" /> - </span> - <FolderPlus className="h-4 w-4 text-amber-400 shrink-0" /> - <input - autoFocus - className="flex-1 min-w-0 text-sm text-gray-800 bg-transparent outline-none border-b border-gray-300" - placeholder="Folder name" - value={newFolderName} - onChange={(e) => setNewFolderName(e.target.value)} - onKeyDown={(e) => { - if (e.key === "Enter") - void handleCreateFolder(parentId); - if (e.key === "Escape") { - setCreatingFolderIn(undefined); - setNewFolderName(""); - } - }} - onBlur={() => void handleCreateFolder(parentId)} - /> - </div> - </div> - <div className="ml-auto w-20 shrink-0" /> - <div className="w-24 shrink-0" /> - <div className="w-20 shrink-0" /> - <div className="w-32 shrink-0" /> - <div className="w-32 shrink-0" /> - <div className="w-8 shrink-0" /> - </div> - ); - } - - function renderDocumentActivityRow({ - key, - filename, - fileType, - depth, - statusLabel, - }: { - key: string; - filename: string; - fileType: string | null; - depth: number; - statusLabel: string; - }) { - return ( - <div - key={key} - className="group flex items-center h-10 pr-8 border-b border-gray-50" - > - <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${stickyCellBg} py-2 pl-4 pr-2`} - style={treeNameCellStyle(depth)} - > - <div className="flex items-center gap-4"> - <Loader2 className="h-2.5 w-2.5 animate-spin text-gray-400 shrink-0" /> - <DocIcon fileType={fileType} /> - <span className="text-sm text-gray-400 truncate"> - {filename} - </span> - </div> - </div> - <div className="ml-auto w-20 shrink-0 text-xs text-gray-300 uppercase truncate"> - {fileType ?? - (filename.includes(".") - ? filename.split(".").pop() - : "file")} - </div> - <div className="w-24 shrink-0 text-sm text-gray-300"> - {statusLabel} - </div> - <div className="w-20 shrink-0 text-sm text-gray-300">—</div> - <div className="w-32 shrink-0 text-sm text-gray-300">—</div> - <div className="w-32 shrink-0 text-sm text-gray-300">—</div> - <div className="w-8 shrink-0" /> - </div> - ); - } - - function renderUploadingDocumentRows(depth: number) { - return uploadingDroppedFilenames.map((filename) => - renderDocumentActivityRow({ - key: `uploading-doc-${filename}`, - filename, - fileType: null, - depth, - statusLabel: "Uploading", - }), - ); - } - - function renderLevel(parentId: string | null, depth: number) { - const childFolders = folders - .filter((f) => f.parent_folder_id === parentId) - .sort((a, b) => a.name.localeCompare(b.name)); - const childDocs = (project?.documents ?? []).filter( - (d) => (d.folder_id ?? null) === parentId, - ); - - return ( - <> - {parentId === null && renderUploadingDocumentRows(depth)} - {/* Files first */} - {childDocs.map((doc) => { - const docName = doc.filename; - const isProcessing = - doc.status === "pending" || doc.status === "processing"; - const isError = doc.status === "error"; - const isVersionsOpen = expandedVersionDocIds.has(doc.id); - const versionNumber = currentVersionNumber(doc); - const hasVersions = - typeof versionNumber === "number" && versionNumber > 1; - const isVersionDragOver = dragOverVersionDocId === doc.id; - const isUploadingVersion = uploadingVersionDocIds.has( - doc.id, - ); - const isDeletingDoc = deletingDocIds.has(doc.id); - if (isDeletingDoc) { - return renderDocumentActivityRow({ - key: `deleting-doc-${doc.id}`, - filename: doc.filename, - fileType: doc.file_type, - depth, - statusLabel: "Deleting...", - }); - } - return ( - <div key={`doc-${doc.id}`}> - <div - draggable={renamingDocumentId !== doc.id} - onDragStart={(e) => { - if (renamingDocumentId === doc.id) { - e.preventDefault(); - return; - } - e.dataTransfer.setData( - "application/mike-doc", - doc.id, - ); - e.dataTransfer.effectAllowed = "copyMove"; - }} - onDragEnd={() => { - setDragOverRoot(false); - setDragOverFolderId(null); - setDragOverVersionDocId(null); - }} - onDragOver={(e) => - handleDocumentVersionDragOver(e, doc.id) - } - onDragLeave={handleDocumentVersionDragLeave} - onDrop={(e) => - handleDocumentVersionDrop(e, doc) - } + const toolbarActions = ( + <div className="flex items-center gap-1.5"> + {selectionActions && ( + <div ref={actionsRef} className="relative"> + <TabPillButton + onClick={() => setActionsOpen((open) => !open)} + > + Actions + <ChevronDown className="h-3.5 w-3.5" /> + </TabPillButton> + {actionsOpen && ( + <div className="absolute top-full right-0 z-[120] mt-1 w-36 overflow-hidden rounded-lg border border-gray-100 bg-app-surface shadow-lg"> + <button onClick={() => { - setViewingDocVersion(null); - setViewingDoc(doc); + setActionsOpen(false); + void selectionActions.onDownload(); }} - onContextMenu={(e) => { - e.preventDefault(); - e.stopPropagation(); - closeRowActionMenus(); - setContextMenu({ - x: e.clientX, - y: e.clientY, - docId: doc.id, - folderId: null, - showFolderActions: false, - }); - }} - className={`group flex items-center h-10 pr-8 border-b border-gray-50 hover:bg-gray-100 cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + className="w-full px-3 py-1.5 text-left text-xs text-gray-600 transition-colors hover:bg-app-surface-hover" > - {(() => { - const rowBg = isVersionDragOver - ? "bg-blue-50" - : selectedDocIds.includes(doc.id) - ? "bg-gray-50" - : stickyCellBg; - return ( - <> - <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${rowBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver ? "" : "group-hover:bg-gray-100"}`} - style={treeNameCellStyle(depth)} - > - <div className="flex items-center gap-4"> - {isProcessing || - isUploadingVersion ? ( - <Loader2 className="h-2.5 w-2.5 animate-spin text-gray-400 shrink-0" /> - ) : ( - <input - type="checkbox" - checked={selectedDocIds.includes( - doc.id, - )} - onChange={() => - setSelectedDocIds( - (prev) => - prev.includes( - doc.id, - ) - ? prev.filter( - ( - x, - ) => - x !== - doc.id, - ) - : [ - ...prev, - doc.id, - ], - ) - } - onClick={(e) => - e.stopPropagation() - } - className="h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black" - /> - )} - {isError ? ( - <AlertCircle className="h-4 w-4 text-red-500 shrink-0" /> - ) : ( - <DocIcon - fileType={ - doc.file_type - } - /> - )} - {renamingDocumentId === - doc.id ? ( - <input - autoFocus - className="min-w-0 flex-1 text-sm text-gray-800 bg-transparent outline-none border-b border-gray-300" - value={ - renameDocumentValue - } - onClick={(e) => - e.stopPropagation() - } - onDragStart={( - e, - ) => { - e.preventDefault(); - e.stopPropagation(); - }} - onChange={(e) => - setRenameDocumentValue( - e.target - .value, - ) - } - onKeyDown={(e) => { - if ( - e.key === - "Enter" - ) - void submitDocumentRename( - doc.id, - ); - if ( - e.key === - "Escape" - ) { - setRenamingDocumentId( - null, - ); - setRenameDocumentValue( - "", - ); - } - }} - onBlur={() => - void submitDocumentRename( - doc.id, - ) - } - /> - ) : ( - <span className="text-sm text-gray-800 truncate"> - {docName} - </span> - )} - </div> - </div> - <div className="ml-auto w-20 shrink-0 text-xs text-gray-500 uppercase truncate"> - {doc.file_type ?? ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div className="w-24 shrink-0 text-sm text-gray-500 truncate"> - {doc.size_bytes != null ? ( - formatBytes(doc.size_bytes) - ) : ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div - className="w-20 shrink-0 text-sm text-gray-500 flex items-center gap-1" - onClick={(e) => - e.stopPropagation() - } - > - {hasVersions ? ( - <button - onClick={() => - void toggleVersions( - doc.id, - ) - } - className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-gray-100 transition-colors" - > - <span> - {versionNumber} - </span> - {isVersionsOpen ? ( - <ChevronDown className="h-3 w-3 text-gray-400" /> - ) : ( - <ChevronRight className="h-3 w-3 text-gray-400" /> - )} - </button> - ) : ( - <span className="text-gray-300 pl-1"> - — - </span> - )} - </div> - <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> - {doc.created_at ? ( - formatDate(doc.created_at) - ) : ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> - {doc.updated_at ? ( - formatDate(doc.updated_at) - ) : ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div className="w-8 shrink-0 flex justify-end"> - {!isProcessing && ( - <RowActions - onRename={() => { - setRenameDocumentValue( - docName, - ); - setRenamingDocumentId( - doc.id, - ); - }} - renameLabel="Rename document" - onDownload={() => - downloadDoc(doc.id) - } - onShowAllVersions={ - hasVersions && - !isVersionsOpen - ? () => - void toggleVersions( - doc.id, - ) - : undefined - } - onUploadNewVersion={() => - void handleUploadNewVersion( - doc, - ) - } - onRemoveFromFolder={ - doc.folder_id - ? () => - handleRemoveDocFromFolder( - doc.id, - ) - : undefined - } - onDelete={() => - requestRemoveDoc( - doc, - ) - } - deleteDisabled={isSharedDocument( - doc, - )} - /> - )} - </div> - </> - ); - })()} - </div> - {isVersionsOpen && ( - <DocVersionHistory - docId={doc.id} - filename={docName} - activeVersionNumber={versionNumber} - loading={loadingVersionDocIds.has(doc.id)} - versions={ - versionsByDocId.get(doc.id)?.versions ?? - [] - } - currentVersionId={ - versionsByDocId.get(doc.id) - ?.currentVersionId ?? null - } - depth={depth} - onDownloadVersion={downloadDocVersion} - onOpenVersion={(versionId, label) => { - setViewingDocVersion({ - id: versionId, - label, - }); - setViewingDoc(doc); + Download + </button> + {selectionActions.hasDocumentsInFolders && ( + <button + onClick={() => { + setActionsOpen(false); + void selectionActions.onRemoveFromFolder(); }} - onRenameVersion={(versionId, filename) => - handleRenameVersion( - doc.id, - versionId, - filename, - ) - } - onExtensionChangeBlocked={(filename) => - setDocumentRenameWarning( - extensionChangeWarning(filename), - ) - } - /> + className="w-full px-3 py-1.5 text-left text-xs text-gray-600 transition-colors hover:bg-app-surface-hover" + > + Remove from subfolder + </button> )} - </div> - ); - })} - - {/* Subfolders after files, sorted alphabetically */} - {childFolders.map((folder) => { - const isExpanded = expandedFolderIds.has(folder.id); - const isRenaming = renamingFolderId === folder.id; - return ( - <div key={`folder-${folder.id}`}> - <div - draggable={!isRenaming} - onDragStart={(e) => { - if (isRenaming) { - e.preventDefault(); - return; - } - e.dataTransfer.setData( - "application/mike-folder", - folder.id, - ); - e.dataTransfer.effectAllowed = "move"; - e.stopPropagation(); + <button + onClick={() => { + setActionsOpen(false); + void selectionActions.onDelete(); }} - onDragOver={(e) => { - if (!hasMovePayload(e.dataTransfer)) return; - e.preventDefault(); - e.stopPropagation(); - setDragOverFolderId(folder.id); - setDragOverVersionDocId(null); - }} - onDragLeave={(e) => { - e.stopPropagation(); - setDragOverFolderId(null); - }} - onDrop={async (e) => { - if (!hasMovePayload(e.dataTransfer)) return; - e.preventDefault(); - e.stopPropagation(); - setDragOverFolderId(null); - setDragOverRoot(false); - setDragOverVersionDocId(null); - await handleDropOnFolder( - folder.id, - e.dataTransfer, - ); - }} - onClick={() => toggleFolder(folder.id)} - onContextMenu={(e) => { - e.preventDefault(); - e.stopPropagation(); - closeRowActionMenus(); - setContextMenu({ - x: e.clientX, - y: e.clientY, - folderId: folder.id, - showFolderActions: true, - }); - }} - className={`group flex items-center h-10 pr-8 border-b border-gray-50 hover:bg-gray-100 cursor-pointer transition-colors ${isRenaming ? "" : "select-none"} ${dragOverFolderId === folder.id ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + className="w-full px-3 py-1.5 text-left text-xs text-red-600 transition-colors hover:bg-red-50" > - <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} py-2 pl-4 pr-2 ${dragOverFolderId === folder.id ? "bg-blue-50" : stickyCellBg} transition-colors ${dragOverFolderId === folder.id ? "" : "group-hover:bg-gray-100"}`} - style={treeNameCellStyle(depth)} - > - <div className="flex items-center gap-4"> - <span className="flex h-2.5 w-2.5 shrink-0 items-center justify-center"> - {isExpanded ? ( - <ChevronDown className="h-3.5 w-3.5 text-gray-400" /> - ) : ( - <ChevronRight className="h-3.5 w-3.5 text-gray-400" /> - )} - </span> - {isExpanded ? ( - <FolderOpen className="h-4 w-4 text-amber-500 shrink-0" /> - ) : ( - <Folder className="h-4 w-4 text-amber-500 shrink-0" /> - )} - {isRenaming ? ( - <input - autoFocus - className="flex-1 min-w-0 text-sm text-gray-800 bg-transparent outline-none" - value={renameFolderValue} - onDragStart={(e) => { - e.preventDefault(); - e.stopPropagation(); - }} - onChange={(e) => - setRenameFolderValue( - e.target.value, - ) - } - onKeyDown={(e) => { - if (e.key === "Enter") - void handleRenameFolder( - folder.id, - ); - if (e.key === "Escape") - setRenamingFolderId( - null, - ); - }} - onBlur={() => - void handleRenameFolder( - folder.id, - ) - } - onClick={(e) => - e.stopPropagation() - } - /> - ) : ( - <span className="text-sm text-gray-800 truncate"> - {folder.name} - </span> - )} - </div> - </div> - <div className="ml-auto w-20 shrink-0 text-xs text-gray-300"> - — - </div> - <div className="w-24 shrink-0 text-sm text-gray-300"> - — - </div> - <div className="w-20 shrink-0 text-sm text-gray-300"> - — - </div> - <div className="w-32 shrink-0 text-sm text-gray-300"> - — - </div> - <div className="w-32 shrink-0 text-sm text-gray-300"> - — - </div> - <div - className="w-8 shrink-0 flex justify-end" - onClick={(e) => e.stopPropagation()} - > - <RowActions - onRename={() => { - setRenameFolderValue(folder.name); - setRenamingFolderId(folder.id); - }} - onDelete={() => - requestDeleteFolder(folder.id) - } - /> - </div> - </div> - {isExpanded && renderLevel(folder.id, depth + 1)} + Delete + </button> </div> - ); - })} + )} + </div> + )} + <TabPillButton + onClick={createFolderAction ?? undefined} + disabled={!createFolderAction || projectLoading} + > + <Plus className="h-3.5 w-3.5" /> + <span className="hidden sm:inline">Folder</span> + </TabPillButton> + </div> + ); - {/* New-folder input row at the bottom of this level */} - {renderFolderInput(parentId, depth)} - </> - ); - } - - // ── Loading skeleton ────────────────────────────────────────────────────── - - if (!loading && !project) { + if (!projectLoading && !project) { return ( <div className="flex h-full items-center justify-center"> <p className="text-gray-400">Project not found</p> @@ -1889,1079 +185,45 @@ export function ProjectDocumentsView({ projectId }: Props) { ); } - const docs = project?.documents || []; - const sidePanelDoc = viewingDoc - ? (docs.find((doc) => doc.id === viewingDoc.id) ?? viewingDoc) - : null; - const versionUploadAccept = ".pdf,.docx,.doc,.xlsx,.xlsm,.xls,.pptx,.ppt"; - const q = search.toLowerCase(); - const filteredDocs = q - ? docs.filter((d) => d.filename.toLowerCase().includes(q)) - : docs; - - const allDocsSelected = - filteredDocs.length > 0 && - filteredDocs.every((d) => selectedDocIds.includes(d.id)); - const someDocsSelected = - !allDocsSelected && - filteredDocs.some((d) => selectedDocIds.includes(d.id)); - - const actionsDropdown = - selectedDocIds.length > 0 ? ( - <div ref={actionsRef} className="relative"> - <button - onClick={() => setActionsOpen((v) => !v)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors" - > - Actions - <ChevronDown className="h-3.5 w-3.5" /> - </button> - {actionsOpen && ( - <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-[120] overflow-hidden"> - <button - onClick={handleDownloadSelectedDocs} - className="w-full px-3 py-1.5 text-left text-xs text-gray-600 hover:bg-gray-50 transition-colors" - > - Download - </button> - {selectedDocIds.some( - (id) => - docs.find((d) => d.id === id)?.folder_id != - null, - ) && ( - <button - onClick={handleRemoveSelectedFromFolder} - className="w-full px-3 py-1.5 text-left text-xs text-gray-600 hover:bg-gray-50 transition-colors" - > - Remove from subfolder - </button> - )} - <button - onClick={handleDeleteSelectedDocs} - className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" - > - Delete - </button> - </div> - )} - </div> - ) : null; - - const toolbarActions = ( - <div className="flex items-center gap-5"> - {actionsDropdown} - <button - onClick={() => { - if (loading) return; - setCreatingFolderIn(null); - setNewFolderName(""); - }} - disabled={loading} - className="flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700 transition-colors disabled:cursor-default disabled:text-gray-300 disabled:hover:text-gray-300" - > - <FolderPlus className="h-3.5 w-3.5" /> - <span className="hidden sm:inline">Add Subfolder</span> - </button> - <button - onClick={() => setAddDocsOpen(true)} - disabled={loading} - className="flex items-center gap-1 text-xs font-medium text-gray-500 hover:text-gray-700 transition-colors disabled:cursor-default disabled:text-gray-300 disabled:hover:text-gray-300" - > - <Upload className="h-3.5 w-3.5" /> - <span className="hidden sm:inline">Add Documents</span> - </button> - </div> - ); - - const pendingVersionDropMessage = pendingVersionDrop ? ( - <div className="space-y-2"> - <p> - You are about to save{" "} - <span className="font-medium text-gray-950"> - {pendingVersionDrop.sourceDoc.filename} - </span>{" "} - as a new version of{" "} - <span className="font-medium text-gray-950"> - {pendingVersionDrop.targetDoc.filename} - </span> - . - </p> - <p> - <span className="font-medium text-gray-950"> - {pendingVersionDrop.sourceDoc.filename} - </span>{" "} - will no longer exist as a separate document - {(currentVersionNumber(pendingVersionDrop.sourceDoc) ?? 1) > 1 - ? " and its older versions will be deleted" - : ""} - . - </p> - </div> - ) : undefined; - const pendingDeleteDocVersionCount = pendingDeleteDoc - ? (versionsByDocId.get(pendingDeleteDoc.id)?.versions.length ?? - currentVersionNumber(pendingDeleteDoc) ?? - 1) - : 0; - const pendingDeleteDocMessage = pendingDeleteDoc ? ( - <div className="space-y-2"> - <p> - <span className="font-medium text-gray-950"> - {pendingDeleteDoc.filename} - </span>{" "} - has {pendingDeleteDocVersionCount}{" "} - {pendingDeleteDocVersionCount === 1 ? "version" : "versions"}. - Deleting this document will delete all of its versions. - </p> - </div> - ) : undefined; - const pendingDeleteFolderMessage = pendingDeleteFolder ? ( - <div className="space-y-2"> - <p> - This will permanently delete{" "} - <span className="font-medium text-gray-950"> - {pendingDeleteFolder.folderIds.length}{" "} - {pendingDeleteFolder.folderIds.length === 1 - ? "folder" - : "folders"} - </span> - , including{" "} - <span className="font-medium text-gray-950"> - {pendingDeleteFolder.folder.name} - </span> - {pendingDeleteFolder.folderIds.length > 1 - ? " and its nested subfolders" - : ""} - . - </p> - {pendingDeleteFolder.documentCount > 0 && ( - <p> - {pendingDeleteFolder.documentCount}{" "} - {pendingDeleteFolder.documentCount === 1 - ? "document" - : "documents"}{" "} - in the deleted{" "} - {pendingDeleteFolder.folderIds.length === 1 - ? "folder" - : "folders"}{" "} - will also be permanently deleted. - </p> - )} - </div> - ) : undefined; - return ( - <div className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"> - <input - ref={versionUploadInputRef} - type="file" - accept={versionUploadAccept} - className="hidden" - onChange={handleVersionUploadInputChange} - /> - <WarningPopup - open={!!documentUploadWarning} - onClose={() => setDocumentUploadWarning(null)} - message={documentUploadWarning} - /> - <WarningPopup - open={!!documentRenameWarning} - onClose={() => setDocumentRenameWarning(null)} - message={documentRenameWarning} - /> - <WarningPopup - open={!!projectActionWarning} - onClose={() => setProjectActionWarning(null)} - message={projectActionWarning} - /> - <ConfirmPopup - open={!!pendingVersionDrop} - title="Save as new version?" - message={pendingVersionDropMessage} - confirmLabel="Confirm" - cancelLabel="Cancel" - onCancel={() => setPendingVersionDrop(null)} - onConfirm={() => { - const pending = pendingVersionDrop; - if (!pending) return; - setPendingVersionDrop(null); - void saveExistingDocumentAsNewVersion( - pending.targetDoc, - pending.sourceDoc, - ); - }} - /> - <ConfirmPopup - open={!!pendingDeleteDoc} - title="Delete document?" - message={pendingDeleteDocMessage} - confirmLabel="Delete" - confirmStatus={ - pendingDeleteStatus === "deleting" - ? "loading" - : pendingDeleteStatus === "deleted" - ? "complete" - : "idle" - } - cancelLabel="Cancel" - onCancel={() => { - if (pendingDeleteStatus === "deleting") return; - setPendingDeleteDoc(null); - setPendingDeleteStatus("idle"); - }} - onConfirm={() => void confirmRemovePendingDoc()} - /> - <ConfirmPopup - open={!!pendingDeleteFolder} - title="Delete folder?" - message={pendingDeleteFolderMessage} - confirmLabel="Delete" - confirmStatus={ - pendingDeleteFolderStatus === "deleting" - ? "loading" - : pendingDeleteFolderStatus === "deleted" - ? "complete" - : "idle" - } - cancelLabel="Cancel" - onCancel={() => { - if (pendingDeleteFolderStatus === "deleting") return; - setPendingDeleteFolder(null); - setPendingDeleteFolderStatus("idle"); - }} - onConfirm={() => void confirmDeletePendingFolder()} - /> - {/* Table content */} + <> <ProjectSectionToolbar actions={toolbarActions} /> - <div className="w-full flex-1 min-h-0 overflow-auto"> - <div className="min-w-max flex min-h-full flex-col"> - {loading ? ( - <ProjectTableLoading stickyCellBg={stickyCellBg} /> - ) : ( - <div className="flex-1 flex flex-col min-h-0"> - {/* Table header */} - <div className={`sticky top-0 z-[70] ${stickyCellBg} flex items-center h-8 pr-8 border-b border-gray-200 text-xs text-gray-500 font-medium select-none shrink-0`}> - <div - className={`sticky left-0 z-[80] ${DOC_NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`} - > - <input - type="checkbox" - checked={allDocsSelected} - ref={(el) => { - if (el) - el.indeterminate = - someDocsSelected; - }} - onChange={() => { - if (allDocsSelected) - setSelectedDocIds([]); - else - setSelectedDocIds( - filteredDocs.map( - (d) => d.id, - ), - ); - }} - className="h-2.5 w-2.5 rounded border-gray-200 cursor-pointer accent-black" - /> - <span>Name</span> - </div> - <div className="ml-auto w-20 shrink-0 text-left"> - Type - </div> - <div className="w-24 shrink-0 text-left"> - Size - </div> - <div className="w-20 shrink-0 text-left"> - Version - </div> - <div className="w-32 shrink-0 text-left"> - Created - </div> - <div className="w-32 shrink-0 text-left"> - Updated - </div> - <div className="w-8 shrink-0" /> - </div> - - {/* Blue ring wraps everything below the header when root-dropping */} - <div - className="flex-1 flex flex-col min-h-0 relative" - onDragOver={(e) => { - if (!hasFilePayload(e.dataTransfer)) return; - e.preventDefault(); - e.dataTransfer.dropEffect = "copy"; - setDragOverFileRoot(true); - setDragOverVersionDocId(null); - }} - onDragLeave={(e) => { - if ( - !e.currentTarget.contains( - e.relatedTarget as Node, - ) - ) { - setDragOverFileRoot(false); - } - }} - onDrop={(e) => { - if (!hasFilePayload(e.dataTransfer)) return; - e.preventDefault(); - e.stopPropagation(); - setDragOverFileRoot(false); - setDragOverRoot(false); - setDragOverFolderId(null); - setDragOverVersionDocId(null); - void handleDropProjectFiles( - Array.from(e.dataTransfer.files), - ); - }} - > - {dragOverRoot && dragOverFolderId === null && ( - <div className="absolute inset-0 border-2 border-blue-400 pointer-events-none z-[80]" /> - )} - {dragOverFileRoot && ( - <div className="absolute inset-0 z-[90] border-2 border-blue-400 bg-blue-50/40 pointer-events-none" /> - )} - - {/* Empty state */} - {docs.length === 0 && - folders.length === 0 && - uploadingDroppedFilenames.length === 0 ? ( - <div - onClick={() => setAddDocsOpen(true)} - className="flex-1 flex cursor-pointer flex-col items-center justify-center py-24 text-center" - > - <Upload className="h-8 w-8 text-gray-200 mb-3" /> - <p className="text-sm text-gray-400"> - Drop PDF, Word, Excel, or PowerPoint files here - </p> - </div> - ) : ( - <div - className="flex-1 flex flex-col" - onContextMenu={(e) => { - e.preventDefault(); - closeRowActionMenus(); - setContextMenu({ - x: e.clientX, - y: e.clientY, - folderId: null, - showFolderActions: false, - }); - }} - onClick={() => setContextMenu(null)} - onDragOver={(e) => { - if (!hasMovePayload(e.dataTransfer)) - return; - e.preventDefault(); - setDragOverRoot(true); - setDragOverVersionDocId(null); - }} - onDragLeave={(e) => { - if ( - !e.currentTarget.contains( - e.relatedTarget as Node, - ) - ) { - setDragOverRoot(false); - } - }} - onDrop={async (e) => { - if (!hasMovePayload(e.dataTransfer)) - return; - e.preventDefault(); - setDragOverRoot(false); - setDragOverFolderId(null); - setDragOverVersionDocId(null); - await handleDropOnFolder( - null, - e.dataTransfer, - ); - }} - > - {/* Search: flat list; no search: folder tree */} - {q ? ( - <> - {renderUploadingDocumentRows(0)} - {filteredDocs.map((doc) => { - const docName = - doc.filename; - const isProcessing = - doc.status === - "pending" || - doc.status === - "processing"; - const isError = - doc.status === "error"; - const isVersionsOpen = - expandedVersionDocIds.has( - doc.id, - ); - const versionNumber = - currentVersionNumber( - doc, - ); - const hasVersions = - typeof versionNumber === - "number" && - versionNumber > 1; - const isVersionDragOver = - dragOverVersionDocId === - doc.id; - const isUploadingVersion = - uploadingVersionDocIds.has( - doc.id, - ); - const isDeletingDoc = - deletingDocIds.has( - doc.id, - ); - if (isDeletingDoc) { - return renderDocumentActivityRow( - { - key: `deleting-doc-${doc.id}`, - filename: - doc.filename, - fileType: - doc.file_type, - depth: 0, - statusLabel: - "Deleting...", - }, - ); - } - return ( - <div key={doc.id}> - <div - draggable={ - renamingDocumentId !== - doc.id - } - onDragStart={( - e, - ) => { - if ( - renamingDocumentId === - doc.id - ) { - e.preventDefault(); - return; - } - e.dataTransfer.setData( - "application/mike-doc", - doc.id, - ); - e.dataTransfer.effectAllowed = - "copyMove"; - }} - onDragEnd={() => { - setDragOverRoot( - false, - ); - setDragOverFolderId( - null, - ); - setDragOverVersionDocId( - null, - ); - }} - onDragOver={( - e, - ) => - handleDocumentVersionDragOver( - e, - doc.id, - ) - } - onDragLeave={ - handleDocumentVersionDragLeave - } - onDrop={(e) => - handleDocumentVersionDrop( - e, - doc, - ) - } - onClick={() => { - setViewingDocVersion( - null, - ); - setViewingDoc( - doc, - ); - }} - onContextMenu={( - e, - ) => { - e.preventDefault(); - e.stopPropagation(); - closeRowActionMenus(); - setContextMenu( - { - x: e.clientX, - y: e.clientY, - docId: doc.id, - folderId: - null, - showFolderActions: false, - }, - ); - }} - className={`group flex items-center h-10 pr-8 border-b border-gray-50 hover:bg-gray-100 cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} - > - <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${isVersionDragOver ? "bg-blue-50" : selectedDocIds.includes(doc.id) ? "bg-gray-50" : stickyCellBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver ? "" : "group-hover:bg-gray-100"}`} - > - <div className="flex items-center gap-4"> - {isProcessing || - isUploadingVersion ? ( - <Loader2 className="h-2.5 w-2.5 animate-spin text-gray-400 shrink-0" /> - ) : ( - <input - type="checkbox" - checked={selectedDocIds.includes( - doc.id, - )} - onChange={() => - setSelectedDocIds( - ( - prev, - ) => - prev.includes( - doc.id, - ) - ? prev.filter( - ( - x, - ) => - x !== - doc.id, - ) - : [ - ...prev, - doc.id, - ], - ) - } - onClick={( - e, - ) => - e.stopPropagation() - } - className="h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black" - /> - )} - {isError ? ( - <AlertCircle className="h-4 w-4 text-red-500 shrink-0" /> - ) : ( - <DocIcon - fileType={ - doc.file_type - } - /> - )} - {renamingDocumentId === - doc.id ? ( - <input - autoFocus - className="min-w-0 flex-1 text-sm text-gray-800 bg-transparent outline-none border-b border-gray-300" - value={ - renameDocumentValue - } - onClick={( - e, - ) => - e.stopPropagation() - } - onDragStart={( - e, - ) => { - e.preventDefault(); - e.stopPropagation(); - }} - onChange={( - e, - ) => - setRenameDocumentValue( - e - .target - .value, - ) - } - onKeyDown={( - e, - ) => { - if ( - e.key === - "Enter" - ) - void submitDocumentRename( - doc.id, - ); - if ( - e.key === - "Escape" - ) { - setRenamingDocumentId( - null, - ); - setRenameDocumentValue( - "", - ); - } - }} - onBlur={() => - void submitDocumentRename( - doc.id, - ) - } - /> - ) : ( - <span className="text-sm text-gray-800 truncate"> - { - docName - } - </span> - )} - </div> - </div> - <div className="ml-auto w-20 shrink-0 text-xs text-gray-500 uppercase truncate"> - {doc.file_type ?? ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div className="w-24 shrink-0 text-sm text-gray-500 truncate"> - {doc.size_bytes != - null ? ( - formatBytes( - doc.size_bytes, - ) - ) : ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div - className="w-20 shrink-0 text-sm text-gray-500 flex items-center gap-1" - onClick={( - e, - ) => - e.stopPropagation() - } - > - {hasVersions ? ( - <button - onClick={() => - void toggleVersions( - doc.id, - ) - } - className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-gray-100 transition-colors" - > - <span> - { - versionNumber - } - </span> - {isVersionsOpen ? ( - <ChevronDown className="h-3 w-3 text-gray-400" /> - ) : ( - <ChevronRight className="h-3 w-3 text-gray-400" /> - )} - </button> - ) : ( - <span className="text-gray-300 pl-1"> - — - </span> - )} - </div> - <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> - {doc.created_at ? ( - formatDate( - doc.created_at, - ) - ) : ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div className="w-32 shrink-0 text-sm text-gray-500 truncate"> - {doc.updated_at ? ( - formatDate( - doc.updated_at, - ) - ) : ( - <span className="text-gray-300"> - — - </span> - )} - </div> - <div className="w-8 shrink-0 flex justify-end"> - {!isProcessing && ( - <RowActions - onRename={() => { - setRenameDocumentValue( - docName, - ); - setRenamingDocumentId( - doc.id, - ); - }} - renameLabel="Rename document" - onDownload={() => - downloadDoc( - doc.id, - ) - } - onShowAllVersions={ - hasVersions && - !isVersionsOpen - ? () => - void toggleVersions( - doc.id, - ) - : undefined - } - onUploadNewVersion={() => - void handleUploadNewVersion( - doc, - ) - } - onDelete={() => - requestRemoveDoc( - doc, - ) - } - deleteDisabled={isSharedDocument( - doc, - )} - /> - )} - </div> - </div> - {isVersionsOpen && ( - <DocVersionHistory - docId={ - doc.id - } - filename={ - docName - } - activeVersionNumber={ - versionNumber - } - loading={loadingVersionDocIds.has( - doc.id, - )} - versions={ - versionsByDocId.get( - doc.id, - ) - ?.versions ?? - [] - } - currentVersionId={ - versionsByDocId.get( - doc.id, - ) - ?.currentVersionId ?? - null - } - onDownloadVersion={ - downloadDocVersion - } - onOpenVersion={( - versionId, - label, - ) => { - setViewingDocVersion( - { - id: versionId, - label, - }, - ); - setViewingDoc( - doc, - ); - }} - onRenameVersion={( - versionId, - filename, - ) => - handleRenameVersion( - doc.id, - versionId, - filename, - ) - } - onExtensionChangeBlocked={( - filename, - ) => - setDocumentRenameWarning( - extensionChangeWarning( - filename, - ), - ) - } - /> - )} - </div> - ); - })} - </> - ) : ( - renderLevel(null, 0) - )} - {/* Spacer — fills remaining height and extends the root drop zone */} - <div className="flex-1 min-h-16" /> - </div> - )} - - {/* Context menu */} - {contextMenu && - (() => { - const menuDoc = contextMenu.docId - ? docs.find( - (doc) => - doc.id === - contextMenu.docId, - ) - : null; - const menuDocVersionNumber = menuDoc - ? currentVersionNumber(menuDoc) - : null; - const menuDocHasVersions = - typeof menuDocVersionNumber === - "number" && - menuDocVersionNumber > 1; - const menuDocVersionsOpen = menuDoc - ? expandedVersionDocIds.has( - menuDoc.id, - ) - : false; - - return ( - <div - ref={contextMenuRef} - className="fixed z-[120] w-48 rounded-xl border border-gray-100 bg-white shadow-lg overflow-hidden" - style={{ - top: contextMenu.y, - left: contextMenu.x, - }} - onClick={(e) => - e.stopPropagation() - } - > - {menuDoc ? ( - <RowActionMenuItems - onClose={() => - setContextMenu(null) - } - onRename={() => { - setRenameDocumentValue( - menuDoc.filename, - ); - setRenamingDocumentId( - menuDoc.id, - ); - }} - renameLabel="Rename document" - onDownload={() => - downloadDoc( - menuDoc.id, - ) - } - onShowAllVersions={ - menuDocHasVersions && - !menuDocVersionsOpen - ? () => - void toggleVersions( - menuDoc.id, - ) - : undefined - } - onUploadNewVersion={() => - void handleUploadNewVersion( - menuDoc, - ) - } - onRemoveFromFolder={ - menuDoc.folder_id - ? () => - void handleRemoveDocFromFolder( - menuDoc.id, - ) - : undefined - } - onDelete={() => - requestRemoveDoc( - menuDoc, - ) - } - deleteDisabled={isSharedDocument( - menuDoc, - )} - /> - ) : ( - <RowActionMenuItems - onClose={() => - setContextMenu(null) - } - onNewSubfolder={() => { - setCreatingFolderIn( - contextMenu.folderId, - ); - setNewFolderName( - "", - ); - if ( - contextMenu.folderId - ) { - setExpandedFolderIds( - (prev) => - new Set( - [ - ...prev, - contextMenu.folderId!, - ], - ), - ); - } - }} - newSubfolderLabel={ - contextMenu.showFolderActions - ? "New subfolder inside" - : "New subfolder" - } - onRename={ - contextMenu.showFolderActions && - contextMenu.folderId - ? () => { - const f = - folders.find( - ( - x, - ) => - x.id === - contextMenu.folderId, - ); - setRenameFolderValue( - f?.name ?? - "", - ); - setRenamingFolderId( - contextMenu.folderId!, - ); - } - : undefined - } - renameLabel="Rename folder" - onDelete={ - contextMenu.showFolderActions && - contextMenu.folderId - ? () => - requestDeleteFolder( - contextMenu.folderId!, - ) - : undefined - } - deleteLabel="Delete folder" - /> - )} - </div> - ); - })()} - </div> - {/* end blue ring wrapper */} - </div> - )} - </div> - </div> - - {project && ( - <AddDocumentsModal - open={addDocsOpen} - onClose={() => setAddDocsOpen(false)} - onSelect={handleDocsSelected} - breadcrumb={[ - "Projects", - project.name + - (project.cm_number - ? ` (${project.cm_number})` - : ""), - "Add Documents", - ]} - projectId={projectId} - /> - )} - - <DocumentSidePanel - doc={sidePanelDoc} - versionId={viewingDocVersion?.id ?? null} - currentVersionId={ - sidePanelDoc - ? (versionsByDocId.get(sidePanelDoc.id) - ?.currentVersionId ?? null) - : null + <DocTable + scopeKey={projectId} + documents={documents} + setDocuments={setDocuments} + folders={folders} + setFolders={ + setFolders as Dispatch<SetStateAction<DocTableFolder[]>> } - versions={ - sidePanelDoc - ? (versionsByDocId.get(sidePanelDoc.id)?.versions ?? []) - : [] + loading={projectLoading} + search={search} + operations={operations} + onAddDocumentsActionChange={ + workspace.setAddDocumentsHeaderAction } - versionsLoading={ - sidePanelDoc - ? loadingVersionDocIds.has(sidePanelDoc.id) - : false + onCreateFolderActionChange={handleCreateFolderActionChange} + onSelectionActionsChange={handleSelectionActionsChange} + renderAddDocumentsModal={(open, onClose, onSelect) => + project ? ( + <AddDocumentsModal + open={open} + onClose={onClose} + onSelect={onSelect} + breadcrumb={[ + "Projects", + project.name + + (project.cm_number + ? ` (${project.cm_number})` + : ""), + "Add Documents", + ]} + projectId={projectId} + /> + ) : null } - onClose={() => { - setViewingDoc(null); - setViewingDocVersion(null); - }} - onLoadVersions={(docId) => loadDocumentVersions(docId)} - onSelectVersion={(versionId, label) => - setViewingDocVersion({ id: versionId, label }) - } - onDownloadDocument={downloadDoc} - onDownloadVersion={downloadDocVersion} - onRenameVersion={handleRenameVersion} - onDeleteVersion={handleDeleteVersion} - onUploadNewVersion={submitNewVersion} - onReplaceVersion={replaceVersionFile} - canDelete={!isSharedDocument(sidePanelDoc)} onOwnerOnlyAction={setOwnerOnlyAction} - onDelete={async (doc) => { - await handleRemoveDoc(doc.id); - }} /> - - </div> + </> ); } - -function filenameExtension(filename: string) { - const trimmed = filename.trim(); - const dotIndex = trimmed.lastIndexOf("."); - if (dotIndex <= 0 || dotIndex === trimmed.length - 1) return null; - return trimmed.slice(dotIndex); -} - -function hasFilenameExtensionChange(previous: string, next: string) { - const previousExtension = filenameExtension(previous); - if (previousExtension == null) return false; - return ( - filenameExtension(next)?.toLowerCase() !== - previousExtension.toLowerCase() - ); -} - -function extensionChangeWarning(filename: string) { - const extension = filenameExtension(filename); - return extension - ? `File extensions cannot be changed here. Keep ${extension} at the end of the name.` - : "File extensions cannot be changed here."; -} diff --git a/frontend/src/app/components/projects/ProjectExplorer.tsx b/frontend/src/app/components/projects/ProjectExplorer.tsx index 4b1cdd3..e940f22 100644 --- a/frontend/src/app/components/projects/ProjectExplorer.tsx +++ b/frontend/src/app/components/projects/ProjectExplorer.tsx @@ -2,11 +2,8 @@ import { useEffect, useRef, useState } from "react"; import { - Folder, - FolderOpen, ChevronRight, ChevronDown, - FolderPlus, Trash2, } from "lucide-react"; import type { @@ -15,6 +12,10 @@ import type { } from "@/app/components/shared/types"; import { VersionChip } from "@/app/components/shared/VersionChip"; import { FileTypeIcon } from "@/app/components/shared/FileTypeIcon"; +import { + ProjectSvgIcon, + SubfolderSvgIcon, +} from "@/app/components/shared/FolderSvgIcon"; interface Props { projectName?: string | null; @@ -91,7 +92,11 @@ export function ProjectExplorer({ function toggleFolder(id: string) { setExpandedIds((prev) => { const next = new Set(prev); - next.has(id) ? next.delete(id) : next.add(id); + if (next.has(id)) { + next.delete(id); + } else { + next.add(id); + } return next; }); } @@ -162,7 +167,7 @@ export function ProjectExplorer({ } function renderLevel(parentId: string | null, depth: number): React.ReactNode { - const basePadding = 28 + (depth - 1) * 16; // pl-7 at depth 1, +16px per level + const basePadding = 24 + (depth - 1) * 16; const childFolders = folders .filter((f) => f.parent_folder_id === parentId) .sort((a, b) => a.name.localeCompare(b.name)); @@ -177,7 +182,7 @@ export function ProjectExplorer({ style={{ paddingLeft: basePadding }} > <ChevronRight className="h-3 w-3 text-gray-300 shrink-0" /> - <FolderPlus className="h-3.5 w-3.5 text-amber-400 shrink-0" /> + <SubfolderSvgIcon className="h-3.5 w-3.5 shrink-0" /> <input ref={newFolderInputRef} autoFocus @@ -242,10 +247,10 @@ export function ProjectExplorer({ ? <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" /> : <ChevronRight className="h-3 w-3 text-gray-400 shrink-0" /> } - {isExpanded - ? <FolderOpen className="h-3.5 w-3.5 text-amber-500 shrink-0" /> - : <Folder className="h-3.5 w-3.5 text-amber-500 shrink-0" /> - } + <SubfolderSvgIcon + open={isExpanded} + className="h-3.5 w-3.5 shrink-0" + /> {isRenaming ? ( <input autoFocus @@ -346,7 +351,7 @@ export function ProjectExplorer({ className="flex items-center gap-2 px-2 py-1.5 select-none" onContextMenu={(e) => { e.stopPropagation(); openContextMenu(e, null); }} > - <FolderOpen className="h-3.5 w-3.5 text-gray-400 shrink-0" /> + <ProjectSvgIcon open className="h-3.5 w-3.5 shrink-0" /> <span className="text-xs text-gray-500 truncate">{projectName}</span> </li> )} @@ -382,7 +387,7 @@ export function ProjectExplorer({ setNewFolderName(""); }} > - <FolderPlus className="h-3.5 w-3.5 text-gray-400" /> + <SubfolderSvgIcon className="h-3.5 w-3.5 shrink-0" /> New subfolder </button> )} diff --git a/frontend/src/app/components/projects/ProjectPageParts.tsx b/frontend/src/app/components/projects/ProjectPageParts.tsx index 594fdc8..4fc5314 100644 --- a/frontend/src/app/components/projects/ProjectPageParts.tsx +++ b/frontend/src/app/components/projects/ProjectPageParts.tsx @@ -4,13 +4,16 @@ import { type CSSProperties, useRef, useState } from "react"; import { CornerDownRight, Loader2, - MessageSquare, Pencil, - Table2, + Plus, Trash2, + Upload, Users, } from "lucide-react"; -import { PageHeader } from "@/app/components/shared/PageHeader"; +import { + PageHeader, + type PageHeaderAction, +} from "@/app/components/shared/PageHeader"; import { FileTypeIcon } from "@/app/components/shared/FileTypeIcon"; import type { Project } from "@/app/components/shared/types"; import type { DocumentVersion } from "@/app/lib/mikeApi"; @@ -32,7 +35,7 @@ export const NAME_COL_W = TABLE_PRIMARY_CELL_WIDTH_CLASS; export const DOC_NAME_COL_W = "w-[292px] sm:w-[332px] md:w-[392px] lg:w-[452px] xl:w-[532px] 2xl:w-[592px] shrink-0"; -const TREE_CONTROL_WIDTH_PX = 32; +const TREE_CONTROL_WIDTH_PX = 29; const TREE_NAME_PADDING_PX = 16; export function treeNameCellStyle(depth: number): CSSProperties | undefined { @@ -349,6 +352,7 @@ export function DocVersionHistory({ export function ProjectPageHeader({ project, search, + activeSection, creatingChat, creatingReview, docsCount, @@ -360,9 +364,11 @@ export function ProjectPageHeader({ onOpenPeople, onNewChat, onNewReview, + onAddDocuments, }: { project: Project | null; search: string; + activeSection: ProjectWorkspaceSection; creatingChat: boolean; creatingReview: boolean; docsCount: number; @@ -374,7 +380,43 @@ export function ProjectPageHeader({ onOpenPeople: () => void; onNewChat: () => void; onNewReview: () => void; + onAddDocuments?: (() => void) | null; }) { + const sectionAction: PageHeaderAction = + activeSection === "documents" + ? { + onClick: onAddDocuments ?? undefined, + disabled: !onAddDocuments, + icon: <Upload className="h-4 w-4" />, + label: <span className="hidden sm:inline">Documents</span>, + title: "Add documents", + } + : activeSection === "assistant" + ? { + onClick: onNewChat, + disabled: creatingChat, + icon: creatingChat ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : ( + <Plus className="h-4 w-4" /> + ), + label: <span className="hidden sm:inline">Chat</span>, + title: "Create chat", + } + : { + onClick: onNewReview, + disabled: docsCount === 0 || creatingReview, + icon: creatingReview ? ( + <Loader2 className="h-4 w-4 animate-spin" /> + ) : ( + <Plus className="h-4 w-4" /> + ), + label: <span className="hidden sm:inline">Review</span>, + title: "Create review", + tooltip: + docsCount === 0 ? "Upload a document first" : null, + }; + return ( <PageHeader breadcrumbs={[ @@ -431,42 +473,7 @@ export function ProjectPageHeader({ ), }, ], - { - actions: [ - { - onClick: onNewChat, - disabled: creatingChat, - icon: creatingChat ? ( - <Loader2 className="h-4 w-4 animate-spin" /> - ) : ( - <MessageSquare className="h-4 w-4" /> - ), - label: ( - <span className="hidden sm:inline"> - New Chat - </span> - ), - }, - { - onClick: onNewReview, - disabled: docsCount === 0 || creatingReview, - icon: creatingReview ? ( - <Loader2 className="h-4 w-4 animate-spin" /> - ) : ( - <Table2 className="h-4 w-4" /> - ), - label: ( - <span className="hidden sm:inline"> - New Review - </span> - ), - tooltip: - docsCount === 0 - ? "Upload a document first" - : null, - }, - ], - }, + [sectionAction], ]} /> ); diff --git a/frontend/src/app/components/projects/ProjectReviewsTable.tsx b/frontend/src/app/components/projects/ProjectReviewsTable.tsx index 7f53fe7..b8b2f9a 100644 --- a/frontend/src/app/components/projects/ProjectReviewsTable.tsx +++ b/frontend/src/app/components/projects/ProjectReviewsTable.tsx @@ -1,7 +1,7 @@ "use client"; -import { type Dispatch, type SetStateAction } from "react"; -import { Table2 } from "lucide-react"; +import { useMemo, useState, type Dispatch, type SetStateAction } from "react"; +import { Plus } from "lucide-react"; import { RowActionMenuItems, RowActions, @@ -14,23 +14,33 @@ import { TableBody, TableCell, TableEmptyState, + TableFilters, + type TableFilterOption, TableHeaderCell, TableHeaderRow, TablePrimaryCell, TableRow, TableScrollArea, + type TableSortDirection, TableStickyCell, } from "@/app/components/shared/TablePrimitive"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { TabularReviewSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; import type { Document, TabularReview } from "@/app/components/shared/types"; import { formatDate } from "./ProjectPageParts"; +type ProjectReviewSortKey = "name" | "columns" | "documents" | "created"; + +const SORT_OPTIONS: TableFilterOption<TableSortDirection>[] = [ + { value: "asc", label: "Ascending" }, + { value: "desc", label: "Descending" }, +]; + export function ProjectReviewsTable({ docs, reviews, filteredReviews, selectedReviewIds, - allReviewsSelected, - someReviewsSelected, creatingReview, currentUserId, onCreateReview, @@ -57,35 +67,163 @@ export function ProjectReviewsTable({ setSelectedReviewIds: Dispatch<SetStateAction<string[]>>; loading?: boolean; }) { + const [sort, setSort] = useState<{ + key: ProjectReviewSortKey; + direction: TableSortDirection; + } | null>(null); + + function clearSelection() { + setSelectedReviewIds([]); + } + + function handleSortChange( + key: ProjectReviewSortKey, + direction: TableSortDirection | null, + ) { + setSort(direction ? { key, direction } : null); + clearSelection(); + } + + const visibleReviews = useMemo(() => { + if (!sort) return filteredReviews; + + return [...filteredReviews].sort((a, b) => { + const multiplier = sort.direction === "asc" ? 1 : -1; + + if (sort.key === "columns") { + return ( + ((a.columns_config?.length ?? 0) - + (b.columns_config?.length ?? 0)) * + multiplier + ); + } + + if (sort.key === "documents") { + return ( + ((a.document_count ?? 0) - (b.document_count ?? 0)) * + multiplier + ); + } + + if (sort.key === "created") { + return ( + (new Date(a.created_at).getTime() - + new Date(b.created_at).getTime()) * + multiplier + ); + } + + return ( + (a.title ?? "Untitled Review").localeCompare( + b.title ?? "Untitled Review", + ) * multiplier + ); + }); + }, [filteredReviews, sort]); + + const allVisibleReviewsSelected = + visibleReviews.length > 0 && + visibleReviews.every((review) => selectedReviewIds.includes(review.id)); + const someVisibleReviewsSelected = + !allVisibleReviewsSelected && + visibleReviews.some((review) => selectedReviewIds.includes(review.id)); + const nameSortDirection = sort?.key === "name" ? sort.direction : null; + const columnsSortDirection = + sort?.key === "columns" ? sort.direction : null; + const documentsSortDirection = + sort?.key === "documents" ? sort.direction : null; + const createdSortDirection = + sort?.key === "created" ? sort.direction : null; + const nameFilterButton = ( + <TableFilters + label="Sort by review name" + value={nameSortDirection} + allLabel="Default Order" + widthClassName="w-40" + align="right" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("name", direction)} + /> + ); + const columnsFilterButton = ( + <TableFilters + label="Sort by columns" + value={columnsSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("columns", direction)} + /> + ); + const documentsFilterButton = ( + <TableFilters + label="Sort by documents" + value={documentsSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("documents", direction)} + /> + ); + const createdFilterButton = ( + <TableFilters + label="Sort by created date" + value={createdSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("created", direction)} + /> + ); + return ( <TableScrollArea header={ <TableHeaderRow className="pr-8 md:pr-8"> <TableStickyCell header> {loading ? ( - <SkeletonDot /> + <SkeletonDot className="mr-4" /> ) : ( <input type="checkbox" - checked={allReviewsSelected} + checked={allVisibleReviewsSelected} ref={(el) => { - if (el) el.indeterminate = someReviewsSelected; + if (el) + el.indeterminate = + someVisibleReviewsSelected; }} onChange={() => { - if (allReviewsSelected) setSelectedReviewIds([]); + if (allVisibleReviewsSelected) + setSelectedReviewIds([]); else setSelectedReviewIds( - filteredReviews.map((r) => r.id), + visibleReviews.map((r) => r.id), ); }} className={TABLE_CHECKBOX_CLASS} /> )} - <span>Name</span> + <span className="mr-1">Name</span> + {!loading && nameFilterButton} </TableStickyCell> - <TableHeaderCell className="ml-auto w-24">Columns</TableHeaderCell> - <TableHeaderCell className="w-24">Documents</TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> + <TableHeaderCell className="ml-auto w-24"> + <div className="flex items-center gap-1"> + <span>Columns</span> + {!loading && columnsFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-24"> + <div className="flex items-center gap-1"> + <span>Documents</span> + {!loading && documentsFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-32"> + <div className="flex items-center gap-1"> + <span>Created</span> + {!loading && createdFilterButton} + </div> + </TableHeaderCell> <TableHeaderCell className="w-8" /> </TableHeaderRow> } @@ -94,29 +232,33 @@ export function ProjectReviewsTable({ <ProjectReviewsLoadingRows /> ) : reviews.length === 0 ? ( <TableEmptyState> - <Table2 className="h-8 w-8 text-gray-300 mb-4" /> + <TabularReviewSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Tabular Reviews </p> <p className="mt-1 text-xs text-gray-400 max-w-xs"> Extract data from project documents into tables using AI. </p> - <button + <PillButton + tone="black" + size="sm" onClick={onCreateReview} disabled={creatingReview || docs.length === 0} - className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md disabled:opacity-40" + className="mt-4 px-3" > - + Create New - </button> + <Plus className="h-3.5 w-3.5" /> + Create + </PillButton> </TableEmptyState> ) : ( <TableBody> - {filteredReviews.map((review) => ( + {visibleReviews.map((review) => ( <TableRow key={review.id} - rightClickDropdown={(close) => ( + rightClickDropdown={(close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onEditDetails={() => { if ( currentUserId && @@ -206,8 +348,8 @@ function ProjectReviewsLoadingRows() { className="pr-8 md:pr-8" > <TableStickyCell hover={false}> - <div className="flex min-w-0 items-center gap-4"> - <SkeletonDot /> + <div className="flex min-w-0 items-center"> + <SkeletonDot className="mr-4" /> <SkeletonLine className={`h-3.5 ${titleWidths[i - 1]}`} /> diff --git a/frontend/src/app/components/projects/ProjectWorkspace.tsx b/frontend/src/app/components/projects/ProjectWorkspace.tsx index f751384..743f6a1 100644 --- a/frontend/src/app/components/projects/ProjectWorkspace.tsx +++ b/frontend/src/app/components/projects/ProjectWorkspace.tsx @@ -67,6 +67,7 @@ type ProjectWorkspaceValue = { creatingReview: boolean; createChat: () => Promise<void>; openNewReview: () => void; + setAddDocumentsHeaderAction: (action: (() => void) | null) => void; setOwnerOnlyAction: React.Dispatch<React.SetStateAction<string | null>>; }; @@ -131,6 +132,8 @@ export function ProjectWorkspaceProvider({ const [newTRModalOpen, setNewTRModalOpen] = useState(false); const [creatingChat, setCreatingChat] = useState(false); const [creatingReview, setCreatingReview] = useState(false); + const [addDocumentsHeaderAction, setAddDocumentsHeaderActionState] = + useState<{ action: (() => void) | null }>({ action: null }); const segments = useSelectedLayoutSegments(); const activeSection = activeSectionFromSegments(segments); @@ -153,6 +156,13 @@ export function ProjectWorkspaceProvider({ projectReviewsPromiseRef.current = null; }, [projectId]); + const setAddDocumentsHeaderAction = useCallback( + (action: (() => void) | null) => { + setAddDocumentsHeaderActionState({ action }); + }, + [], + ); + useEffect(() => { if (!showShell) { setProjectLoading(false); @@ -378,6 +388,7 @@ export function ProjectWorkspaceProvider({ creatingReview, createChat, openNewReview, + setAddDocumentsHeaderAction, setOwnerOnlyAction, }), [ @@ -399,6 +410,7 @@ export function ProjectWorkspaceProvider({ creatingReview, createChat, openNewReview, + setAddDocumentsHeaderAction, ], ); @@ -416,6 +428,7 @@ export function ProjectWorkspaceProvider({ <ProjectPageHeader project={project} search={search} + activeSection={activeSection} creatingChat={creatingChat} creatingReview={creatingReview} docsCount={project?.documents?.length ?? 0} @@ -427,6 +440,7 @@ export function ProjectWorkspaceProvider({ onOpenPeople={() => setPeopleModalOpen(true)} onNewChat={() => void createChat()} onNewReview={openNewReview} + onAddDocuments={addDocumentsHeaderAction.action} /> {children} @@ -534,7 +548,7 @@ export function ProjectSectionToolbar({ <TableToolbar items={[ { id: "documents", label: "Documents" }, - { id: "assistant", label: "Assistant Chats" }, + { id: "assistant", label: "Chats" }, { id: "reviews", label: "Tabular Reviews" }, ]} active={activeSection} diff --git a/frontend/src/app/components/projects/ProjectsOverview.tsx b/frontend/src/app/components/projects/ProjectsOverview.tsx index 9c08f77..31e93d3 100644 --- a/frontend/src/app/components/projects/ProjectsOverview.tsx +++ b/frontend/src/app/components/projects/ProjectsOverview.tsx @@ -1,8 +1,8 @@ "use client"; -import { useEffect, useRef, useState } from "react"; -import { useRouter } from "next/navigation"; -import { FolderOpen, ChevronDown } from "lucide-react"; +import { useEffect, useMemo, useRef, useState } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import { ChevronDown, Plus } from "lucide-react"; import { listProjects, updateProject, @@ -19,6 +19,10 @@ import { RowActions, } from "@/app/components/shared/RowActions"; import { PageHeader } from "@/app/components/shared/PageHeader"; +import { + ClosedProjectSvgIcon, + OpenProjectSvgIcon, +} from "@/app/components/shared/FolderSvgIcon"; import { TABLE_CHECKBOX_CLASS, TABLE_STICKY_CELL_BG, @@ -27,13 +31,18 @@ import { TableBody, TableCell, TableEmptyState, + TableFilters, + type TableFilterOption, TableHeaderCell, TableHeaderRow, TablePrimaryCell, TableRow, TableScrollArea, + type TableSortDirection, TableStickyCell, } from "@/app/components/shared/TablePrimitive"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; function formatDate(iso: string) { return new Date(iso).toLocaleDateString(undefined, { @@ -53,6 +62,18 @@ function getProjectOwnerLabel(project: Project, currentUserId?: string | null) { } type ProjectFilter = "all" | "mine" | "shared-with-me"; +type ProjectSortKey = + | "name" + | "cm" + | "files" + | "chats" + | "reviews" + | "created"; + +const SORT_OPTIONS: TableFilterOption<TableSortDirection>[] = [ + { value: "asc", label: "Ascending" }, + { value: "desc", label: "Descending" }, +]; export function ProjectsOverview() { const [projects, setProjects] = useState<Project[]>([]); @@ -61,13 +82,26 @@ export function ProjectsOverview() { const [modalOpen, setModalOpen] = useState(false); const [detailsProject, setDetailsProject] = useState<Project | null>(null); const [activeFilter, setActiveFilter] = useState<ProjectFilter>("all"); + const [practiceFilter, setPracticeFilter] = useState<string | null>(null); + const [ownerFilter, setOwnerFilter] = useState<string | null>(null); + const [sort, setSort] = useState<{ + key: ProjectSortKey; + direction: TableSortDirection; + } | null>(null); const [selectedIds, setSelectedIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); const [search, setSearch] = useState(""); const [ownerOnlyAction, setOwnerOnlyAction] = useState<string | null>(null); const actionsRef = useRef<HTMLDivElement>(null); const router = useRouter(); + const searchParams = useSearchParams(); const { user, isAuthenticated, authLoading } = useAuth(); + const previewEmptyStates = searchParams.get("emptyStates") === "1"; + const effectiveLoading = loading && !previewEmptyStates; + const visibleProjects = useMemo( + () => (previewEmptyStates ? [] : projects), + [previewEmptyStates, projects], + ); useEffect(() => { let cancelled = false; @@ -122,19 +156,111 @@ export function ProjectsOverview() { }, [actionsOpen]); const q = search.toLowerCase(); - const filtered = ( - activeFilter === "all" - ? projects - : activeFilter === "mine" - ? projects.filter((p) => p.is_owner ?? p.user_id === user?.id) - : projects.filter((p) => !(p.is_owner ?? p.user_id === user?.id)) - ).filter( - (p) => - !q || - p.name.toLowerCase().includes(q) || - (p.cm_number ?? "").toLowerCase().includes(q) || - (p.practice ?? "").toLowerCase().includes(q), + const practices = useMemo( + () => + Array.from( + new Set( + visibleProjects + .map((project) => project.practice?.trim()) + .filter((practice): practice is string => !!practice), + ), + ).sort((a, b) => a.localeCompare(b)), + [visibleProjects], ); + const ownerOptions = useMemo( + () => + Array.from( + new Set( + visibleProjects.map((project) => + getProjectOwnerLabel(project, user?.id), + ), + ), + ) + .sort((a, b) => a.localeCompare(b)) + .map((owner) => ({ value: owner, label: owner })), + [visibleProjects, user?.id], + ); + const filtered = useMemo(() => { + const rows = ( + activeFilter === "all" + ? visibleProjects + : activeFilter === "mine" + ? visibleProjects.filter( + (p) => p.is_owner ?? p.user_id === user?.id, + ) + : visibleProjects.filter( + (p) => !(p.is_owner ?? p.user_id === user?.id), + ) + ) + .filter( + (p) => + !q || + p.name.toLowerCase().includes(q) || + (p.cm_number ?? "").toLowerCase().includes(q) || + (p.practice ?? "").toLowerCase().includes(q), + ) + .filter( + (p) => + !practiceFilter || + (p.practice?.trim() ?? "") === practiceFilter, + ) + .filter( + (p) => + !ownerFilter || + getProjectOwnerLabel(p, user?.id) === ownerFilter, + ); + + if (!sort) return rows; + + return [...rows].sort((a, b) => { + const multiplier = sort.direction === "asc" ? 1 : -1; + + if (sort.key === "cm") { + return ( + (a.cm_number ?? "").localeCompare(b.cm_number ?? "") * + multiplier + ); + } + + if (sort.key === "files") { + return ( + ((a.document_count ?? 0) - (b.document_count ?? 0)) * + multiplier + ); + } + + if (sort.key === "chats") { + return ( + ((a.chat_count ?? 0) - (b.chat_count ?? 0)) * multiplier + ); + } + + if (sort.key === "reviews") { + return ( + ((a.review_count ?? 0) - (b.review_count ?? 0)) * + multiplier + ); + } + + if (sort.key === "created") { + return ( + (new Date(a.created_at).getTime() - + new Date(b.created_at).getTime()) * + multiplier + ); + } + + return a.name.localeCompare(b.name) * multiplier; + }); + }, [ + activeFilter, + ownerFilter, + practiceFilter, + q, + sort, + user?.id, + visibleProjects, + ]); const allSelected = filtered.length > 0 && @@ -156,11 +282,125 @@ export function ProjectsOverview() { ); } + function clearSelection() { + setSelectedIds([]); + setActionsOpen(false); + } + + function handlePracticeFilterChange(value: string | null) { + setPracticeFilter(value); + clearSelection(); + } + + function handleOwnerFilterChange(value: string | null) { + setOwnerFilter(value); + clearSelection(); + } + + function handleSortChange( + key: ProjectSortKey, + direction: TableSortDirection | null, + ) { + setSort(direction ? { key, direction } : null); + clearSelection(); + } + const filters: { id: ProjectFilter; label: string }[] = [ { id: "all", label: "All" }, { id: "mine", label: "Mine" }, { id: "shared-with-me", label: "Shared with me" }, ]; + const nameSortDirection = sort?.key === "name" ? sort.direction : null; + const cmSortDirection = sort?.key === "cm" ? sort.direction : null; + const filesSortDirection = sort?.key === "files" ? sort.direction : null; + const chatsSortDirection = sort?.key === "chats" ? sort.direction : null; + const reviewsSortDirection = + sort?.key === "reviews" ? sort.direction : null; + const createdSortDirection = + sort?.key === "created" ? sort.direction : null; + const nameFilterButton = ( + <TableFilters + label="Sort by project name" + value={nameSortDirection} + allLabel="Default Order" + widthClassName="w-40" + align="right" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("name", direction)} + /> + ); + const cmFilterButton = ( + <TableFilters + label="Sort by CM" + value={cmSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("cm", direction)} + /> + ); + const practiceFilterButton = ( + <TableFilters + label="Filter by practice" + value={practiceFilter} + allLabel="All Practices" + options={practices.map((practice) => ({ + value: practice, + label: practice, + }))} + onChange={handlePracticeFilterChange} + /> + ); + const ownerFilterButton = ( + <TableFilters + label="Filter by owner" + value={ownerFilter} + allLabel="All Owners" + widthClassName="w-44" + options={ownerOptions} + onChange={handleOwnerFilterChange} + /> + ); + const filesFilterButton = ( + <TableFilters + label="Sort by files" + value={filesSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("files", direction)} + /> + ); + const chatsFilterButton = ( + <TableFilters + label="Sort by chats" + value={chatsSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("chats", direction)} + /> + ); + const reviewsFilterButton = ( + <TableFilters + label="Sort by tabular reviews" + value={reviewsSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("reviews", direction)} + /> + ); + const createdFilterButton = ( + <TableFilters + label="Sort by created date" + value={createdSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("created", direction)} + /> + ); async function handleProjectDetailsSave(values: { name: string; @@ -215,31 +455,27 @@ export function ProjectsOverview() { } } - const toolbarActions = ( - <> - {selectedIds.length > 0 && ( - <div ref={actionsRef} className="relative"> - <button - onClick={() => setActionsOpen((v) => !v)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors" - > - Actions - <ChevronDown className="h-3.5 w-3.5" /> - </button> - {actionsOpen && ( - <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> - <button - onClick={handleDeleteSelected} - className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" - > - Delete - </button> - </div> - )} - </div> - )} - </> - ); + const toolbarActions = + selectedIds.length > 0 ? ( + <div ref={actionsRef} className="relative"> + <TabPillButton + onClick={() => setActionsOpen((v) => !v)} + > + Actions + <ChevronDown className="h-3.5 w-3.5" /> + </TabPillButton> + {actionsOpen && ( + <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> + <button + onClick={handleDeleteSelected} + className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" + > + Delete + </button> + </div> + )} + </div> + ) : undefined; return ( <div className="flex h-full min-h-0 flex-1 flex-col overflow-hidden"> @@ -270,7 +506,7 @@ export function ProjectsOverview() { active={activeFilter} onChange={(nextFilter) => { setActiveFilter(nextFilter); - setSelectedIds([]); + clearSelection(); }} actions={toolbarActions} /> @@ -280,8 +516,8 @@ export function ProjectsOverview() { header={ <TableHeaderRow> <TableStickyCell header> - {loading ? ( - <SkeletonDot /> + {effectiveLoading ? ( + <SkeletonDot className="mr-4" /> ) : ( <input type="checkbox" @@ -293,23 +529,56 @@ export function ProjectsOverview() { className={TABLE_CHECKBOX_CLASS} /> )} - <span>Name</span> + <span className="mr-1">Name</span> + {!loading && nameFilterButton} </TableStickyCell> - <TableHeaderCell className="ml-auto w-32">CM</TableHeaderCell> - <TableHeaderCell className="w-36">Practice</TableHeaderCell> - <TableHeaderCell className="w-32">Owner</TableHeaderCell> - <TableHeaderCell className="w-24">Files</TableHeaderCell> - <TableHeaderCell className="w-24">Chats</TableHeaderCell> - <TableHeaderCell className="w-36"> - Tabular Reviews + <TableHeaderCell className="ml-auto w-32"> + <div className="flex items-center gap-1"> + <span>CM</span> + {!loading && cmFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-36"> + <div className="flex items-center gap-1"> + <span>Practice</span> + {!loading && practiceFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-32"> + <div className="flex items-center gap-1"> + <span>Owner</span> + {!loading && ownerFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-24"> + <div className="flex items-center gap-1"> + <span>Files</span> + {!loading && filesFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-24"> + <div className="flex items-center gap-1"> + <span>Chats</span> + {!loading && chatsFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-36"> + <div className="flex items-center gap-1"> + <span>Tabular Reviews</span> + {!loading && reviewsFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-32"> + <div className="flex items-center gap-1"> + <span>Created</span> + {!loading && createdFilterButton} + </div> </TableHeaderCell> - <TableHeaderCell className="w-32">Created</TableHeaderCell> <TableHeaderCell className="w-8" /> </TableHeaderRow> } > - - {loading ? ( + {effectiveLoading ? ( <TableBody> {[1, 2, 3].map((i) => ( <TableRow @@ -320,7 +589,8 @@ export function ProjectsOverview() { hover={false} bgClassName="bg-transparent" > - <SkeletonDot /> + <SkeletonDot className="mr-4" /> + <div className="mr-2 h-4 w-4 shrink-0 rounded bg-gray-100 animate-pulse" /> <SkeletonLine className="h-3.5 w-48" /> </TableStickyCell> <TableCell className="ml-auto w-32"> @@ -350,7 +620,7 @@ export function ProjectsOverview() { </TableBody> ) : loadError ? ( <TableEmptyState> - <FolderOpen className="h-8 w-8 text-gray-300 mb-4" /> + <OpenProjectSvgIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Projects </p> @@ -362,7 +632,7 @@ export function ProjectsOverview() { <TableEmptyState> {activeFilter === "all" || activeFilter === "mine" ? ( <> - <FolderOpen className="h-8 w-8 text-gray-300 mb-4" /> + <OpenProjectSvgIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Projects </p> @@ -371,12 +641,15 @@ export function ProjectsOverview() { commence chats and tabular reviews with them. </p> - <button + <PillButton + tone="black" + size="sm" onClick={() => setModalOpen(true)} - className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md" + className="mt-4 px-3" > - + Create New - </button> + <Plus className="h-3.5 w-3.5" /> + Create + </PillButton> </> ) : ( <p className="text-sm text-gray-400"> @@ -396,9 +669,10 @@ export function ProjectsOverview() { rightClickDropdown={ (project.is_owner ?? project.user_id === user?.id) - ? (close) => ( + ? (close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onEditDetails={() => { setDetailsProject(project); }} @@ -429,8 +703,12 @@ export function ProjectsOverview() { onSelectionChange={() => toggleOne(project.id) } - label={project.name} - /> + > + <ClosedProjectSvgIcon className="mr-2 h-4 w-4 shrink-0" /> + <span className="min-w-0 flex-1 truncate text-sm text-gray-800"> + {project.name} + </span> + </TablePrimaryCell> <TableCell className="ml-auto w-32"> {project.cm_number ?? ( diff --git a/frontend/src/app/components/shared/AddUserInput.tsx b/frontend/src/app/components/shared/AddUserInput.tsx index cd5aa3c..9ef056b 100644 --- a/frontend/src/app/components/shared/AddUserInput.tsx +++ b/frontend/src/app/components/shared/AddUserInput.tsx @@ -7,6 +7,7 @@ import { lookupUserByEmail, type UserLookupResult, } from "@/app/lib/mikeApi"; +import { PillButton } from "@/app/components/ui/pill-button"; import { cn } from "@/app/lib/utils"; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @@ -102,19 +103,21 @@ export function AddUserInput({ autoFocus={autoFocus} /> {showAddButton && ( - <button + <PillButton + tone="blue" + size="sm" type="button" onMouseDown={(event) => event.preventDefault()} onClick={() => void commitUser()} disabled={busy || checking} title={submitLabel} - className="inline-flex h-6 shrink-0 items-center gap-1 rounded-full border border-blue-500/35 bg-blue-600/90 px-2.5 text-[11px] font-medium leading-none text-white shadow-[0_3px_9px_rgba(37,99,235,0.10),inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(255,255,255,0.16),inset_0_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40" + className="h-6 shrink-0 px-2.5 text-[11px] leading-none" > {(busy || checking) && ( <Loader2 className="h-3 w-3 animate-spin" /> )} Add - </button> + </PillButton> )} </div> {error && <p className="mt-1.5 text-xs text-red-500">{error}</p>} diff --git a/frontend/src/app/components/shared/AppSidebar.tsx b/frontend/src/app/components/shared/AppSidebar.tsx index 9fb96be..834fd18 100644 --- a/frontend/src/app/components/shared/AppSidebar.tsx +++ b/frontend/src/app/components/shared/AppSidebar.tsx @@ -3,11 +3,6 @@ import { useState, useEffect, useMemo } from "react"; import { PanelLeft, - MessageSquare, - Folder, - FolderOpen, - Table2, - Library, User, ChevronsUpDown, ChevronDown, @@ -19,15 +14,26 @@ import { useRouter, usePathname } from "next/navigation"; import Link from "next/link"; import { MikeIcon } from "@/app/components/chat/mike-icon"; import { SidebarChatItem } from "@/app/components/shared/SidebarChatItem"; +import { + ChatSkeuoIcon, + FolderSkeuoIcon, + LibrarySkeuoIcon, + TabularReviewSkeuoIcon, + WorkflowSkeuoIcon, +} from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { + ProjectSvgIcon, +} from "@/app/components/shared/FolderSvgIcon"; import { listProjects } from "@/app/lib/mikeApi"; import type { Project } from "@/app/components/shared/types"; import { cn } from "@/app/lib/utils"; const NAV_ITEMS = [ - { href: "/assistant", label: "Assistant", icon: MessageSquare }, - { href: "/projects", label: "Projects", icon: FolderOpen }, - { href: "/tabular-reviews", label: "Tabular Review", icon: Table2 }, - { href: "/workflows", label: "Workflows", icon: Library }, + { href: "/assistant", label: "Assistant", icon: ChatSkeuoIcon }, + { href: "/projects", label: "Projects", icon: FolderSkeuoIcon }, + { href: "/library", label: "Library", icon: LibrarySkeuoIcon }, + { href: "/tabular-reviews", label: "Tabular Review", icon: TabularReviewSkeuoIcon }, + { href: "/workflows", label: "Workflows", icon: WorkflowSkeuoIcon }, ]; interface AppSidebarProps { @@ -137,8 +143,8 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { <div className={cn( isOpen - ? "w-64 h-[calc(100dvh-1rem)] md:h-[calc(100dvh-1.5rem)] bg-white/65" - : "max-md:hidden w-14 md:h-[calc(100dvh-1.5rem)] md:bg-white/65 h-auto bg-transparent pointer-events-none md:pointer-events-auto", + ? "w-64 h-[calc(100dvh-1rem)] md:h-[calc(100dvh-1.5rem)] bg-app-surface" + : "max-md:hidden w-14 md:h-[calc(100dvh-1.5rem)] md:bg-app-surface h-auto bg-transparent pointer-events-none md:pointer-events-auto", "my-2 ml-2 mr-0 md:my-3 md:ml-3 md:mr-0 rounded-2xl border border-white/70 shadow-[0_-1px_6px_rgba(15,23,42,0.034),0_4px_9px_rgba(15,23,42,0.074),inset_0_1px_0_rgba(255,255,255,0.85)] backdrop-blur-2xl overflow-visible", "flex flex-col transition-all duration-300 absolute md:relative z-[99]", )} @@ -195,7 +201,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { className={cn( "w-full h-9 flex items-center gap-3 px-2.5 py-2 rounded-md transition-colors text-left", isActive - ? "bg-gray-200/60 text-gray-900" + ? "bg-app-surface-active text-gray-900" : "text-gray-700 hover:bg-gray-100", !isOpen ? "hidden md:flex" : "flex", )} @@ -247,7 +253,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { {[50, 65, 45].map((w, i) => ( <div key={i} - className="h-9 flex items-center px-3 rounded-md" + className="flex h-8 items-center rounded-md px-3" > <div className="h-3 bg-gray-200 rounded animate-pulse" @@ -293,17 +299,16 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { } title={project.name} className={cn( - "flex h-9 w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs transition-colors", + "flex h-8 w-full items-center gap-2 rounded-md px-2.5 py-1 text-left text-xs transition-colors", isActive - ? "bg-gray-200/60 text-gray-900" + ? "bg-app-surface-active text-gray-900" : "text-gray-700 hover:bg-gray-100", )} > - {isActive ? ( - <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-600" /> - ) : ( - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-600" /> - )} + <ProjectSvgIcon + open={isActive} + className="h-3.5 w-3.5 shrink-0" + /> <span className="min-w-0 flex-1 truncate"> {project.name} </span> @@ -337,12 +342,13 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { }`} > {!chats ? ( - <div className="space-y-1 px-2.5"> + <div className="space-y-1.5 px-2.5"> {[40, 60, 50, 70, 45].map((w, i) => ( <div key={i} - className="h-9 flex items-center px-3 rounded-md" + className="flex h-8 items-center rounded-md px-2.5" > + <div className="mr-2 h-3.5 w-3.5 shrink-0 rounded bg-gray-200 animate-pulse" /> <div className="h-3 bg-gray-200 rounded animate-pulse" style={{ width: `${w}%` }} @@ -363,7 +369,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { ) : ( <> <div - className={`space-y-1 px-2.5 ${ + className={`space-y-1.5 px-2.5 ${ shouldAnimate ? "sidebar-fade-in-2" : "" @@ -430,7 +436,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { "rounded-xl border-white/60", !isOpen ? "hidden md:flex" : "", pathname === "/account" || isDropdownOpen - ? "bg-gray-200/60" + ? "bg-app-surface-active" : "hover:bg-gray-100", )} title={!isOpen ? user.email : undefined} @@ -464,7 +470,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { className={cn( "absolute bottom-full left-0 z-50 mb-1 p-1 whitespace-nowrap", isOpen ? "right-0" : "w-56", - "bg-white/80 rounded-xl shadow-[0_6px_17px_rgba(15,23,42,0.1)] border border-white/70 backdrop-blur-xl", + "bg-app-floating rounded-xl shadow-[0_6px_17px_rgba(15,23,42,0.1)] border border-white/70 backdrop-blur-xl", )} > <button @@ -474,7 +480,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { }} className={cn( "w-full px-4 py-2 text-left text-sm text-gray-700 flex items-center gap-2 rounded-md", - "hover:bg-white/70", + "hover:bg-white", )} > <User className="h-4 w-4" /> diff --git a/frontend/src/app/components/shared/AppSidebarSkeuoIcons.tsx b/frontend/src/app/components/shared/AppSidebarSkeuoIcons.tsx new file mode 100644 index 0000000..e66b70b --- /dev/null +++ b/frontend/src/app/components/shared/AppSidebarSkeuoIcons.tsx @@ -0,0 +1,49 @@ +import Image, { type ImageProps } from "next/image"; + +type IconProps = Omit< + ImageProps, + "alt" | "src" | "width" | "height" | "unoptimized" +>; + +const ICON_BASE_PATH = "/icons/app-sidebar"; +const ICON_VERSION = "27"; + +function AppSidebarIcon({ + name, + className, + ...props +}: IconProps & { name: string }) { + return ( + <Image + src={`${ICON_BASE_PATH}/${name}.svg?v=${ICON_VERSION}`} + alt="" + width={64} + height={64} + unoptimized + aria-hidden="true" + draggable={false} + className={`${className ?? ""} object-contain`} + {...props} + /> + ); +} + +export function ChatSkeuoIcon(props: IconProps) { + return <AppSidebarIcon name="chat" {...props} />; +} + +export function FolderSkeuoIcon(props: IconProps) { + return <AppSidebarIcon name="project-closed" {...props} />; +} + +export function LibrarySkeuoIcon(props: IconProps) { + return <AppSidebarIcon name="library" {...props} />; +} + +export function TabularReviewSkeuoIcon(props: IconProps) { + return <AppSidebarIcon name="tabular-review" {...props} />; +} + +export function WorkflowSkeuoIcon(props: IconProps) { + return <AppSidebarIcon name="workflow" {...props} />; +} diff --git a/frontend/src/app/components/projects/DocumentSidePanel.tsx b/frontend/src/app/components/shared/DocumentSidePanel.tsx similarity index 93% rename from frontend/src/app/components/projects/DocumentSidePanel.tsx rename to frontend/src/app/components/shared/DocumentSidePanel.tsx index 1936a5d..c971b71 100644 --- a/frontend/src/app/components/projects/DocumentSidePanel.tsx +++ b/frontend/src/app/components/shared/DocumentSidePanel.tsx @@ -13,25 +13,28 @@ import { X, } from "lucide-react"; import { ConfirmPopup } from "@/app/components/popups/ConfirmPopup"; +import { FileTypeIcon } from "@/app/components/shared/FileTypeIcon"; import { PdfView } from "@/app/components/shared/views/PdfView"; +import { DocxView } from "@/app/components/shared/views/DocxView"; import { SpreadsheetView } from "@/app/components/shared/views/SpreadsheetView"; +import { PillButton } from "@/app/components/ui/pill-button"; import { WarningPopup } from "@/app/components/popups/WarningPopup"; import type { Document } from "@/app/components/shared/types"; -import { isSpreadsheetFilename } from "@/app/components/shared/types"; +import { + isDocxFilename, + isSpreadsheetFilename, +} from "@/app/components/shared/types"; import type { DocumentVersion } from "@/app/lib/mikeApi"; import { cn } from "@/app/lib/utils"; -import { formatBytes } from "./ProjectPageParts"; +import { LIQUID_PANEL_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; +import { formatBytes } from "@/app/components/projects/ProjectPageParts"; const MIN_DOC_COLUMN_WIDTH = 420; const DEFAULT_DOC_COLUMN_WIDTH = 620; const MIN_DATA_COLUMN_WIDTH = 280; const DEFAULT_DATA_COLUMN_WIDTH = 340; -const RESIZER_WIDTH = 6; +const RESIZER_WIDTH = 0; const MAX_PANEL_WIDTH = 1180; -const primaryGlassButtonClass = - "inline-flex h-8 items-center justify-center gap-1.5 rounded-full border border-blue-800/35 bg-blue-700/90 px-3 text-xs font-medium text-white shadow-[0_3px_9px_rgba(30,64,175,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(30,64,175,0.18)] backdrop-blur-xl transition-all hover:bg-blue-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"; -const dangerGlassButtonClass = - "inline-flex h-8 items-center justify-center gap-1.5 rounded-full border border-red-700/35 bg-red-600/90 px-3 text-xs font-medium text-white shadow-[0_3px_9px_rgba(127,29,29,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(127,29,29,0.18)] backdrop-blur-xl transition-all hover:bg-red-600 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"; interface DocumentSidePanelProps { doc: Document | null; @@ -181,6 +184,11 @@ export function DocumentSidePanel({ selectedVersion != null ? fileTypeForVersion(selectedVersion, doc.file_type) : doc.file_type; + const selectedFileTypeKey = selectedFileType?.toLowerCase() ?? ""; + const selectedIsDocx = + isDocxFilename(selectedFilename) || + selectedFileTypeKey === "docx" || + selectedFileTypeKey === "doc"; const selectedSizeBytes = selectedVersion?.size_bytes === undefined ? doc.size_bytes @@ -191,8 +199,6 @@ export function DocumentSidePanel({ : selectedVersion.page_count; const selectedVersionNumber = selectedVersion?.version_number ?? doc.active_version_number ?? null; - const selectedVersionTag = - selectedVersionNumber != null ? `V${selectedVersionNumber}` : null; const selectedUploadedAt = selectedVersion?.created_at ?? doc.created_at; const selectedExtension = filenameExtension(selectedFilename); const replaceFileType = replaceTargetVersion @@ -201,9 +207,7 @@ export function DocumentSidePanel({ const replaceVersionAccept = replaceFileType === "pdf" ? ".pdf" : ".docx,.doc"; const ownerLabel = - doc.owner_display_name?.trim() || - doc.owner_email?.trim() || - "—"; + doc.owner_display_name?.trim() || doc.owner_email?.trim() || "—"; async function handleSaveName() { if (!selectedVersionId) return; @@ -405,7 +409,8 @@ export function DocumentSidePanel({ ref={panelRef} className={cn( "fixed z-[190] flex flex-col", - "inset-3 md:left-auto rounded-2xl border border-white/70 bg-gray-50/80 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18),inset_1px_0_0_rgba(255,255,255,0.5)] backdrop-blur-2xl overflow-hidden", + LIQUID_PANEL_SURFACE_CLASS, + "inset-3 md:left-auto overflow-hidden", )} style={isMobile ? undefined : { width: panelWidth }} > @@ -414,13 +419,12 @@ export function DocumentSidePanel({ className="absolute inset-y-0 left-0 z-20 hidden w-1 cursor-col-resize bg-transparent transition-colors hover:bg-blue-400/60 md:block" title="Resize document view" /> - <div className="flex min-h-11 shrink-0 items-center justify-between gap-3 px-4 py-2 md:h-11 md:py-0"> + <div className="mx-3 flex min-h-11 shrink-0 items-center justify-between gap-3 py-2 md:h-11 md:py-0"> <div className="flex min-w-0 items-center gap-2"> - {selectedVersionTag && ( - <span className="inline-flex h-5 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-white/75 px-2 text-[10px] font-semibold text-gray-600"> - {selectedVersionTag} - </span> - )} + <FileTypeIcon + fileType={selectedFileType ?? selectedFilename} + className="h-4 w-4" + /> <div className="min-w-0 truncate text-sm font-medium text-gray-700"> {selectedFilename} </div> @@ -455,10 +459,10 @@ export function DocumentSidePanel({ <button type="button" onClick={onClose} - className="flex h-7 w-7 items-center justify-center text-gray-500 transition-colors hover:text-gray-900" - title="Close" + className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/70 bg-white/55 text-gray-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-1px_0_rgba(255,255,255,0.55),0_6px_18px_rgba(15,23,42,0.08)] backdrop-blur-xl transition-colors hover:bg-white/75 hover:text-gray-700" + aria-label="Close" > - <X className="h-4 w-4" /> + <X className="h-3.5 w-3.5" /> </button> </div> </div> @@ -477,18 +481,18 @@ export function DocumentSidePanel({ mobilePane === "document" ? "flex" : "hidden", )} > - <div - className={cn( - "flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", - "rounded-xl border border-gray-200 bg-white/55 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] backdrop-blur-xl", - )} - > + <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden"> {isSpreadsheetFilename(selectedFilename) ? ( <SpreadsheetView key={`${selectedVersionId ?? "current"}:${selectedUploadedAt ?? ""}:${selectedSizeBytes ?? ""}`} documentId={doc.id} versionId={selectedVersionId} - rounded={false} + /> + ) : selectedIsDocx ? ( + <DocxView + key={`${selectedVersionId ?? "current"}:${selectedUploadedAt ?? ""}:${selectedSizeBytes ?? ""}`} + documentId={doc.id} + versionId={selectedVersionId} /> ) : ( <PdfView @@ -497,7 +501,6 @@ export function DocumentSidePanel({ document_id: doc.id, version_id: selectedVersionId, }} - rounded={false} /> )} </div> @@ -506,15 +509,15 @@ export function DocumentSidePanel({ <div onMouseDown={handleResizeMouseDown} className={cn( - "relative hidden cursor-col-resize transition-colors md:block", - "bg-white/25 hover:bg-blue-400/60", + "relative z-10 hidden w-1.5 -translate-x-1/2 cursor-col-resize transition-colors md:block", + "bg-transparent hover:bg-blue-400/60", )} title="Resize document panel" /> <aside className={cn( - "mx-3 mb-3 min-h-0 flex-col overflow-hidden rounded-xl md:ml-2 md:mr-3", + "mx-3 mb-3 min-h-0 flex-col overflow-hidden rounded-xl", mobilePane === "details" ? "flex" : "hidden md:flex", "border border-white/70 bg-white shadow-[0_3px_9px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.08)] backdrop-blur-2xl", )} @@ -621,9 +624,7 @@ export function DocumentSidePanel({ label="Uploaded" value={ selectedUploadedAt - ? formatDateTime( - selectedUploadedAt, - ) + ? formatDateTime(selectedUploadedAt) : "—" } /> @@ -668,9 +669,7 @@ export function DocumentSidePanel({ </div> ) : ( <div className="space-y-1.5"> - {uploading && ( - <VersionUploadSkeleton /> - )} + {uploading && <VersionUploadSkeleton />} {orderedVersions.map((version) => { const title = versionTitleFor(version); @@ -747,8 +746,8 @@ export function DocumentSidePanel({ ? "text-gray-300" : typeLabel === "PDF" - ? "text-red-600" - : "text-blue-600", + ? "text-red-600" + : "text-blue-600", )} > {typeLabel} @@ -899,14 +898,15 @@ export function DocumentSidePanel({ className="hidden" onChange={handleReplaceFileInputChange} /> - <button - type="button" + <PillButton + tone="danger" + size="sm" onClick={requestDeleteDocument} disabled={deletingDocument} className={cn( - dangerGlassButtonClass, + "h-8 px-3", !canDelete && - "cursor-not-allowed opacity-45 hover:bg-red-600/90 active:scale-100", + "cursor-not-allowed opacity-45 active:scale-100", )} title={ canDelete @@ -920,12 +920,13 @@ export function DocumentSidePanel({ <Trash2 className="h-3.5 w-3.5 shrink-0" /> )} Delete - </button> - <button - type="button" + </PillButton> + <PillButton + tone="blue" + size="sm" onClick={() => fileInputRef.current?.click()} disabled={uploading} - className={primaryGlassButtonClass} + className="h-8 px-3" > {uploading ? ( <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" /> @@ -933,7 +934,7 @@ export function DocumentSidePanel({ <Upload className="h-3.5 w-3.5 shrink-0" /> )} Upload new version - </button> + </PillButton> </div> </aside> </div> @@ -951,9 +952,7 @@ export function DocumentSidePanel({ title="Replace version?" message={`This will wipe ${versionTitleFor(replaceTargetVersion)} and replace it with ${replaceFile?.name ?? "the selected file"}. Save as a new version instead if you want to keep both copies.`} confirmLabel="Replace" - confirmStatus={ - replacingVersionId != null ? "loading" : "idle" - } + confirmStatus={replacingVersionId != null ? "loading" : "idle"} cancelLabel="Cancel" onCancel={() => { if (replacingVersionId != null) return; diff --git a/frontend/src/app/components/shared/FileDirectory.tsx b/frontend/src/app/components/shared/FileDirectory.tsx index d4ee15a..353d360 100644 --- a/frontend/src/app/components/shared/FileDirectory.tsx +++ b/frontend/src/app/components/shared/FileDirectory.tsx @@ -1,19 +1,29 @@ "use client"; -import { useState } from "react"; +import { type ReactNode, useEffect, useMemo, useState } from "react"; import { Check, - ChevronDown, - ChevronRight, - Folder, - FolderOpen, Loader2, } from "lucide-react"; -import type { Document, Project } from "./types"; -import { VersionChip } from "./VersionChip"; +import type { Document, LibraryFolder } from "./types"; import { FileTypeIcon } from "./FileTypeIcon"; +import { ProjectSvgIcon, SubfolderSvgIcon } from "./FolderSvgIcon"; import { SearchBar } from "@/app/components/ui/search-bar"; -import { ModalSegmentedToggle } from "../modals/ModalSegmentedToggle"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; +import { SkeletonLine } from "./TablePrimitive"; +import { useDirectoryData, type DirectoryTab } from "./useDirectoryData"; + +const DIRECTORY_GRID_CLASS = + "grid grid-cols-[14px_14px_minmax(0,1fr)_48px_84px_64px] items-center gap-2"; + +const DIRECTORY_TABS: { value: DirectoryTab; label: string }[] = [ + { value: "files", label: "Files" }, + { value: "templates", label: "Templates" }, + { value: "projects", label: "Projects" }, +]; + +const EMPTY_DOCUMENTS: Document[] = []; +const EMPTY_FOLDERS: LibraryFolder[] = []; function formatDate(iso: string | null) { if (!iso) return null; @@ -24,62 +34,129 @@ function formatDate(iso: string | null) { }); } +function formatBytes(bytes: number | null | undefined) { + if (bytes == null) return null; + if (bytes < 1024) return `${bytes} B`; + if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; + return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; +} + +function versionLabel(doc: Document) { + const n = doc.active_version_number ?? doc.latest_version_number; + return typeof n === "number" && Number.isFinite(n) && n >= 1 + ? `${n}` + : null; +} + export function DocFileIcon({ fileType }: { fileType: string | null }) { return <FileTypeIcon fileType={fileType} className="h-3.5 w-3.5" />; } interface FileDirectoryProps { - standaloneDocs: Document[]; - directoryProjects: Project[]; - loading: boolean; - selectedIds: Set<string>; - onChange: (ids: Set<string>) => void; - allowMultiple?: boolean; - forceExpanded?: boolean; - emptyMessage?: string; + documents?: Document[]; + loading?: boolean; + selectedDocuments: Document[]; + onChange: (documents: Document[]) => void; uploadingFilenames?: string[]; - searchable?: boolean; - searchPlaceholder?: string; - searchAutoFocus?: boolean; - searchNoResultsMessage?: string; - showProjectTabs?: boolean; + showTabs: boolean; + initialTab?: DirectoryTab; + excludeProjectId?: string; } export function FileDirectory({ - standaloneDocs, - directoryProjects, - loading, - selectedIds, + documents = EMPTY_DOCUMENTS, + loading: externalLoading = false, + selectedDocuments, onChange, - allowMultiple = true, - forceExpanded = false, - emptyMessage = "No documents yet", uploadingFilenames = [], - searchable = false, - searchPlaceholder = "Search...", - searchAutoFocus = false, - searchNoResultsMessage = "No matches found", - showProjectTabs, + showTabs, + initialTab = "files", + excludeProjectId, }: FileDirectoryProps) { const [expandedProjects, setExpandedProjects] = useState<Set<string>>( new Set(), ); - const [selectedTab, setSelectedTab] = useState<"files" | "projects">( - "files", - ); + const [expandedLibraryFolders, setExpandedLibraryFolders] = useState< + Set<string> + >(new Set()); + const [selectedTab, setSelectedTab] = useState<DirectoryTab>(initialTab); + + // Follow initialTab changes so keep-mounted parents (which never remount + // this component) can still steer the starting tab per open. + useEffect(() => { + setSelectedTab(initialTab); + }, [initialTab]); const [search, setSearch] = useState(""); + const { + loadingTabs, + standaloneDocuments, + templateDocuments, + fileFolders: loadedFileFolders, + templateFolders: loadedTemplateFolders, + projects, + loadTab, + } = useDirectoryData(showTabs, initialTab); + + useEffect(() => { + if (!showTabs || initialTab === "templates") return; + void loadTab("templates"); + }, [initialTab, showTabs, loadTab]); + const directoryStandaloneDocs = useMemo( + () => + showTabs + ? [ + ...documents.filter( + (doc) => + !standaloneDocuments.some( + (loadedDoc) => loadedDoc.id === doc.id, + ), + ), + ...standaloneDocuments, + ] + : documents, + [documents, showTabs, standaloneDocuments], + ); + const directoryTemplateDocs = showTabs + ? templateDocuments + : EMPTY_DOCUMENTS; + const directoryFileFolders = showTabs + ? loadedFileFolders + : EMPTY_FOLDERS; + const directoryTemplateFolders = showTabs + ? loadedTemplateFolders + : EMPTY_FOLDERS; + const localDirectoryProjects = useMemo( + () => + showTabs + ? projects.filter( + (project) => project.id !== excludeProjectId, + ) + : [], + [excludeProjectId, projects, showTabs], + ); + const selectedIds = useMemo( + () => new Set(selectedDocuments.map((document) => document.id)), + [selectedDocuments], + ); const q = search.trim().toLowerCase(); const visibleStandaloneDocs = q - ? standaloneDocs.filter((doc) => doc.filename.toLowerCase().includes(q)) - : standaloneDocs; + ? directoryStandaloneDocs.filter((doc) => + doc.filename.toLowerCase().includes(q), + ) + : directoryStandaloneDocs; const visibleUploadingFilenames = q ? uploadingFilenames.filter((filename) => filename.toLowerCase().includes(q), ) : uploadingFilenames; + const visibleTemplateDocs = q + ? directoryTemplateDocs.filter((doc) => + doc.filename.toLowerCase().includes(q), + ) + : directoryTemplateDocs; const visibleDirectoryProjects = q - ? directoryProjects + ? localDirectoryProjects .map((project) => { const docs = project.documents ?? []; const projectMatches = @@ -102,39 +179,35 @@ export function FileDirectory({ (project.cm_number ?? "").toLowerCase().includes(q) ); }) - : directoryProjects; - const showTabs = showProjectTabs ?? directoryProjects.length > 0; + : localDirectoryProjects; const activeTab = showTabs ? selectedTab : "files"; + const activeLoading = showTabs + ? !!loadingTabs[activeTab] + : externalLoading; const hasVisibleFiles = visibleStandaloneDocs.length > 0 || visibleUploadingFilenames.length > 0; const hasVisibleProjects = visibleDirectoryProjects.length > 0; + const hasVisibleTemplates = visibleTemplateDocs.length > 0; const activeTabHasNoResults = q && ((activeTab === "files" && !hasVisibleFiles) || - (activeTab === "projects" && !hasVisibleProjects)); + (activeTab === "projects" && !hasVisibleProjects) || + (activeTab === "templates" && !hasVisibleTemplates)); - const allDocs = [ - ...standaloneDocs, - ...directoryProjects.flatMap((p) => p.documents ?? []), - ]; - - function toggle(docId: string) { - if (!allowMultiple) { - onChange(new Set([docId])); - return; - } - const next = new Set(selectedIds); - if (next.has(docId)) { - next.delete(docId); + function toggle(doc: Document) { + const next = new Map( + selectedDocuments.map((document) => [document.id, document]), + ); + if (next.has(doc.id)) { + next.delete(doc.id); } else { - next.add(docId); + next.set(doc.id, doc); } - onChange(next); + onChange([...next.values()]); } function toggleFolder(projectId: string) { - if (forceExpanded) return; setExpandedProjects((prev) => { const next = new Set(prev); if (next.has(projectId)) { @@ -146,68 +219,267 @@ export function FileDirectory({ }); } - if (loading) { + function toggleDocuments(docs: Document[]) { + if (docs.length === 0) return; + + const allSelected = docs.every((doc) => selectedIds.has(doc.id)); + const next = new Map( + selectedDocuments.map((document) => [document.id, document]), + ); + if (allSelected) { + docs.forEach((doc) => next.delete(doc.id)); + } else { + docs.forEach((doc) => next.set(doc.id, doc)); + } + onChange([...next.values()]); + } + + function documentFolderId(doc: Document) { + return doc.folder_id ?? doc.library_folder_id ?? null; + } + + function childFolders( + folders: LibraryFolder[], + parentFolderId: string | null, + ) { + return folders.filter( + (folder) => (folder.parent_folder_id ?? null) === parentFolderId, + ); + } + + function folderDocuments(docs: Document[], folderId: string | null) { + return docs.filter((doc) => documentFolderId(doc) === folderId); + } + + function collectFolderDocuments( + folders: LibraryFolder[], + docs: Document[], + folderId: string, + ): Document[] { + const directDocs = folderDocuments(docs, folderId); + const nestedDocs = childFolders(folders, folderId).flatMap((folder) => + collectFolderDocuments(folders, docs, folder.id), + ); + return [...directDocs, ...nestedDocs]; + } + + function toggleLibraryFolder(folderId: string) { + setExpandedLibraryFolders((prev) => { + const next = new Set(prev); + if (next.has(folderId)) { + next.delete(folderId); + } else { + next.add(folderId); + } + return next; + }); + } + + function handleTabChange(tab: DirectoryTab) { + setSelectedTab(tab); + void loadTab(tab); + } + + function indentedRowPadding(depth: number) { + if (depth <= 0) return 8; + return 4 + depth * 20; + } + + function renderDocumentRow(doc: Document, depth = 0) { + const selected = selectedIds.has(doc.id); + return ( + <button + type="button" + key={doc.id} + onClick={() => toggle(doc)} + style={{ paddingLeft: indentedRowPadding(depth) }} + className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pr-2 text-xs transition-all text-left ${ + selected ? "bg-gray-100" : "hover:bg-gray-100/70" + }`} + > + <span + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + selected + ? "bg-gray-900 border-gray-900" + : "border-gray-300" + }`} + > + {selected && <Check className="h-2.5 w-2.5 text-white" />} + </span> + <DocFileIcon fileType={doc.file_type} /> + <span + className={`min-w-0 truncate ${ + selected ? "text-gray-900" : "text-gray-700" + }`} + > + {doc.filename} + </span> + <FileDirectoryMetaCells + version={versionLabel(doc)} + created={formatDate(doc.created_at)} + size={formatBytes(doc.size_bytes)} + /> + </button> + ); + } + + function renderLibraryFolderRows( + folders: LibraryFolder[], + docs: Document[], + parentFolderId: string | null, + depth = 0, + ): ReactNode { + return childFolders(folders, parentFolderId).map((folder) => { + const docsInFolder = collectFolderDocuments(folders, docs, folder.id); + const allSelected = + docsInFolder.length > 0 && + docsInFolder.every((doc) => selectedIds.has(doc.id)); + const someSelected = + docsInFolder.some((doc) => selectedIds.has(doc.id)) && + !allSelected; + const isExpanded = !!q || expandedLibraryFolders.has(folder.id); + return ( + <div key={folder.id}> + <button + type="button" + onClick={() => toggleLibraryFolder(folder.id)} + style={{ paddingLeft: indentedRowPadding(depth) }} + className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pr-2 text-xs transition-all text-left hover:bg-gray-100/70`} + > + <span + role="checkbox" + aria-checked={someSelected ? "mixed" : allSelected} + aria-label={`Select all files in ${folder.name}`} + onClick={(e) => { + e.stopPropagation(); + toggleDocuments(docsInFolder); + }} + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + allSelected || someSelected + ? "bg-gray-900 border-gray-900" + : docsInFolder.length === 0 + ? "border-gray-200 bg-gray-50" + : "border-gray-300" + }`} + > + {allSelected && ( + <Check className="h-2.5 w-2.5 text-white" /> + )} + {someSelected && <span className="h-px w-2 bg-white" />} + </span> + <SubfolderSvgIcon + open={isExpanded} + className="h-3.5 w-3.5 shrink-0" + /> + <span className="min-w-0 truncate font-medium text-gray-700"> + {folder.name} + </span> + <span className="truncate text-gray-400">-</span> + <span className="truncate text-gray-400"> + {formatDate(folder.created_at) ?? "--"} + </span> + <span className="truncate text-right text-gray-400"> + {docsInFolder.length}{" "} + {docsInFolder.length === 1 ? "file" : "files"} + </span> + </button> + {isExpanded && ( + <div> + {renderLibraryFolderRows( + folders, + docs, + folder.id, + depth + 1, + )} + {folderDocuments(docs, folder.id).map((doc) => + renderDocumentRow(doc, depth + 1), + )} + {docsInFolder.length === 0 && ( + <p + className="py-1 text-xs text-gray-400" + style={{ + paddingLeft: + indentedRowPadding(depth + 1), + }} + > + Empty + </p> + )} + </div> + )} + </div> + ); + }); + } + + if (activeLoading) { return ( <div className="flex min-h-0 flex-1 flex-col space-y-2"> - {searchable && ( - <SearchBar - value={search} - onValueChange={setSearch} - placeholder={searchPlaceholder} - autoFocus={searchAutoFocus} - wrapperClassName={showTabs ? "mb-4" : "mb-3"} - /> - )} - {showTabs && ( - <FileDirectoryTabs + <SearchBar + value={search} + onValueChange={setSearch} + placeholder="Search..." + autoFocus + wrapperClassName={showTabs ? "mb-4" : "mb-3"} + /> + {(showTabs || selectedIds.size > 0) && ( + <FileDirectoryControls activeTab={activeTab} - onChange={setSelectedTab} + onChange={handleTabChange} + selectedCount={selectedIds.size} + showTabs={showTabs} /> )} - <div className="min-h-0 flex-1 overflow-y-auto"> - {[60, 45, 75, 55, 40].map((w, i) => ( - <div - key={i} - className="flex items-center gap-2 rounded-md px-2 py-2" - > - <div className="h-3.5 w-3.5 rounded border border-gray-200 shrink-0" /> - <div className="h-3.5 w-3.5 rounded bg-gray-100 animate-pulse shrink-0" /> + <div className="flex min-h-0 flex-1 flex-col"> + <FileDirectoryHeader /> + <div className="min-h-0 flex-1 overflow-y-auto"> + {[60, 45, 75, 55, 40].map((w, i) => ( <div - className="h-3 rounded bg-gray-100 animate-pulse" - style={{ width: `${w}%` }} - /> - </div> - ))} + key={i} + className={`${DIRECTORY_GRID_CLASS} rounded-md px-2 py-2`} + > + <div className="h-3.5 w-3.5 rounded border border-gray-200 shrink-0" /> + <div className="h-3.5 w-3.5 rounded bg-gray-100 animate-pulse shrink-0" /> + <div + className="h-3 rounded bg-gray-100 animate-pulse" + style={{ width: `${w}%` }} + /> + <SkeletonLine className="w-8" /> + <SkeletonLine className="w-14" /> + <SkeletonLine className="ml-auto w-10" /> + </div> + ))} + </div> </div> </div> ); } if ( - allDocs.length === 0 && - directoryProjects.length === 0 && + !showTabs && + directoryStandaloneDocs.length === 0 && uploadingFilenames.length === 0 ) { return ( <div className="flex min-h-0 flex-1 flex-col space-y-2"> - {searchable && ( - <SearchBar - value={search} - onValueChange={setSearch} - placeholder={searchPlaceholder} - autoFocus={searchAutoFocus} - wrapperClassName={showTabs ? "mb-4" : "mb-3"} - /> - )} - {showTabs && ( - <FileDirectoryTabs + <SearchBar + value={search} + onValueChange={setSearch} + placeholder="Search..." + autoFocus + wrapperClassName={showTabs ? "mb-4" : "mb-3"} + /> + {(showTabs || selectedIds.size > 0) && ( + <FileDirectoryControls activeTab={activeTab} - onChange={setSelectedTab} + onChange={handleTabChange} + selectedCount={selectedIds.size} + showTabs={showTabs} /> )} <div className="min-h-0 flex-1 overflow-y-auto"> <p className="text-center text-sm text-gray-400 py-8"> - {emptyMessage} + No documents yet </p> </div> </div> @@ -216,99 +488,88 @@ export function FileDirectory({ return ( <div className="flex min-h-0 flex-1 flex-col space-y-2 rounded-sm"> - {searchable && ( - <SearchBar - value={search} - onValueChange={setSearch} - placeholder={searchPlaceholder} - autoFocus={searchAutoFocus} - wrapperClassName={showTabs ? "mb-4" : "mb-3"} - /> - )} - {showTabs && ( - <FileDirectoryTabs + <SearchBar + value={search} + onValueChange={setSearch} + placeholder="Search..." + autoFocus + wrapperClassName={showTabs ? "mb-4" : "mb-3"} + /> + {(showTabs || selectedIds.size > 0) && ( + <FileDirectoryControls activeTab={activeTab} - onChange={setSelectedTab} + onChange={handleTabChange} + selectedCount={selectedIds.size} + showTabs={showTabs} /> )} {activeTabHasNoResults ? ( <div className="min-h-0 flex-1 overflow-y-auto"> <p className="text-center text-sm text-gray-400 py-8"> - {searchNoResultsMessage} + No matches found </p> </div> ) : ( - <div className="min-h-0 flex-1 overflow-y-auto"> + <div className="flex min-h-0 flex-1 flex-col"> + <FileDirectoryHeader /> + <div className="min-h-0 flex-1 overflow-y-auto"> {activeTab === "files" && ( <> {visibleUploadingFilenames.map((filename) => ( <div key={`uploading-${filename}`} - className="w-full flex items-center gap-2 px-2 py-2 text-xs text-left" + className={`w-full ${DIRECTORY_GRID_CLASS} py-2 pl-2 pr-2 text-xs text-left`} > <span className="shrink-0 h-3.5 w-3.5 rounded border border-gray-300" /> <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-400 shrink-0" /> <span className="flex-1 truncate text-gray-400"> {filename} </span> - <span className="shrink-0 text-gray-300"> - Uploading - </span> + <FileDirectoryMetaCells + version={null} + created="Uploading" + size={null} + /> </div> ))} - {visibleStandaloneDocs.map((doc) => { - const selected = selectedIds.has(doc.id); - return ( - <button - type="button" - key={doc.id} - onClick={() => toggle(doc.id)} - className={`w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left ${ - selected - ? "bg-gray-100" - : "hover:bg-gray-100/70" - }`} - > - <span - className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ - selected - ? "bg-gray-900 border-gray-900" - : "border-gray-300" - }`} - > - {selected && ( - <Check className="h-2.5 w-2.5 text-white" /> - )} - </span> - <DocFileIcon fileType={doc.file_type} /> - <span - className={`flex-1 truncate ${ - selected - ? "text-gray-900" - : "text-gray-700" - }`} - > - {doc.filename} - </span> - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number - } - /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate(doc.created_at)} - </span> - )} - </button> - ); - })} + {!q && + renderLibraryFolderRows( + directoryFileFolders, + directoryStandaloneDocs, + null, + )} + {(q + ? visibleStandaloneDocs + : folderDocuments(directoryStandaloneDocs, null) + ).map((doc) => renderDocumentRow(doc))} {!q && visibleStandaloneDocs.length === 0 && + directoryFileFolders.length === 0 && visibleUploadingFilenames.length === 0 && ( <p className="text-center text-sm text-gray-400 py-8"> - {emptyMessage} + No documents yet + </p> + )} + </> + )} + + {activeTab === "templates" && ( + <> + {!q && + renderLibraryFolderRows( + directoryTemplateFolders, + directoryTemplateDocs, + null, + )} + {(q + ? visibleTemplateDocs + : folderDocuments(directoryTemplateDocs, null) + ).map((doc) => renderDocumentRow(doc))} + {!q && + visibleTemplateDocs.length === 0 && + directoryTemplateFolders.length === 0 && ( + <p className="text-center text-sm text-gray-400 py-8"> + No templates yet </p> )} </> @@ -317,10 +578,18 @@ export function FileDirectory({ {activeTab === "projects" && visibleDirectoryProjects.map((project) => { const isExpanded = - forceExpanded || - !!q || - expandedProjects.has(project.id); + !!q || expandedProjects.has(project.id); const docs = project.documents ?? []; + const projectDocIds = docs.map((doc) => doc.id); + const allProjectDocsSelected = + projectDocIds.length > 0 && + projectDocIds.every((id) => + selectedIds.has(id), + ); + const someProjectDocsSelected = + projectDocIds.some((id) => + selectedIds.has(id), + ) && !allProjectDocsSelected; return ( <div key={project.id}> <button @@ -328,19 +597,41 @@ export function FileDirectory({ onClick={() => toggleFolder(project.id) } - className="w-full rounded-md flex items-center gap-2 px-2 py-2 text-xs transition-all text-left hover:bg-gray-100/70" + className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} px-2 py-2 text-xs transition-all text-left hover:bg-gray-100/70`} > - {isExpanded ? ( - <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" /> - ) : ( - <ChevronRight className="h-3 w-3 text-gray-400 shrink-0" /> - )} - {isExpanded ? ( - <FolderOpen className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - ) : ( - <Folder className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - )} - <span className="flex-1 truncate font-medium text-gray-700"> + <span + role="checkbox" + aria-checked={ + someProjectDocsSelected + ? "mixed" + : allProjectDocsSelected + } + aria-label={`Select all files in ${project.name}`} + onClick={(e) => { + e.stopPropagation(); + toggleDocuments(docs); + }} + className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${ + allProjectDocsSelected || + someProjectDocsSelected + ? "bg-gray-900 border-gray-900" + : docs.length === 0 + ? "border-gray-200 bg-gray-50" + : "border-gray-300" + }`} + > + {allProjectDocsSelected && ( + <Check className="h-2.5 w-2.5 text-white" /> + )} + {someProjectDocsSelected && ( + <span className="h-px w-2 bg-white" /> + )} + </span> + <ProjectSvgIcon + open={isExpanded} + className="h-3.5 w-3.5 shrink-0" + /> + <span className="min-w-0 truncate font-medium text-gray-700"> {project.name} {project.cm_number && ( <span className="ml-1 font-normal text-gray-400"> @@ -348,8 +639,18 @@ export function FileDirectory({ </span> )} </span> - <span className="text-xs text-gray-400 shrink-0"> - {docs.length} + <span className="truncate text-gray-400"> + - + </span> + <span className="truncate text-gray-400"> + {formatDate(project.created_at) ?? + "--"} + </span> + <span className="truncate text-right text-gray-400"> + {docs.length}{" "} + {docs.length === 1 + ? "file" + : "files"} </span> </button> {isExpanded && ( @@ -367,9 +668,9 @@ export function FileDirectory({ type="button" key={doc.id} onClick={() => - toggle(doc.id) + toggle(doc) } - className={`w-full rounded-md flex items-center gap-2 pl-7 pr-2 py-2 text-xs transition-all text-left ${ + className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pl-7 pr-2 text-xs transition-all text-left ${ selected ? "bg-gray-100" : "hover:bg-gray-100/70" @@ -392,7 +693,7 @@ export function FileDirectory({ } /> <span - className={`flex-1 truncate min-w-0 ${ + className={`min-w-0 truncate ${ selected ? "text-gray-900" : "text-gray-700" @@ -400,19 +701,17 @@ export function FileDirectory({ > {doc.filename} </span> - <VersionChip - n={ - doc.active_version_number ?? - doc.latest_version_number - } + <FileDirectoryMetaCells + version={versionLabel( + doc, + )} + created={formatDate( + doc.created_at, + )} + size={formatBytes( + doc.size_bytes, + )} /> - {doc.created_at && ( - <span className="shrink-0 text-gray-300"> - {formatDate( - doc.created_at, - )} - </span> - )} </button> ); }) @@ -429,29 +728,85 @@ export function FileDirectory({ No projects yet </p> )} + </div> </div> )} </div> ); } -function FileDirectoryTabs({ - activeTab, - onChange, -}: { - activeTab: "files" | "projects"; - onChange: (tab: "files" | "projects") => void; -}) { +function FileDirectoryHeader({ indented = false }: { indented?: boolean }) { return ( - <ModalSegmentedToggle - value={activeTab} - onChange={onChange} - options={[ - { value: "files", label: "Files" }, - { value: "projects", label: "Projects" }, - ]} - size="sm" - className="self-start" - /> + <div + className={`${DIRECTORY_GRID_CLASS} ${ + indented ? "pl-7 pr-2" : "px-2" + } pb-1 pt-0.5 text-[11px] font-medium text-gray-400`} + > + <span /> + <span className="col-span-2">Name</span> + <span>Version</span> + <span>Created</span> + <span className="text-right">Size</span> + </div> + ); +} + +function FileDirectoryMetaCells({ + version, + created, + size, +}: { + version: string | null; + created: string | null; + size: string | null; +}) { + return ( + <> + <span className="truncate text-gray-400">{version ?? "--"}</span> + <span className="truncate text-gray-400">{created ?? "--"}</span> + <span className="truncate text-right text-gray-400"> + {size ?? "--"} + </span> + </> + ); +} + +function FileDirectoryControls({ + activeTab, + onChange, + selectedCount, + showTabs, +}: { + activeTab: DirectoryTab; + onChange: (tab: DirectoryTab) => void; + selectedCount: number; + showTabs: boolean; +}) { + return ( + <div className="flex items-center justify-between gap-3 pr-2"> + {showTabs ? ( + <div className="flex items-center gap-1.5"> + {DIRECTORY_TABS.map((tab) => { + const active = activeTab === tab.value; + return ( + <TabPillButton + key={tab.value} + active={active} + onClick={() => onChange(tab.value)} + > + {tab.label} + </TabPillButton> + ); + })} + </div> + ) : ( + <span /> + )} + {selectedCount > 0 && ( + <span className="shrink-0 text-xs text-gray-400"> + {selectedCount} selected + </span> + )} + </div> ); } diff --git a/frontend/src/app/components/shared/FileTypeIcon.tsx b/frontend/src/app/components/shared/FileTypeIcon.tsx index 0687e06..f791e88 100644 --- a/frontend/src/app/components/shared/FileTypeIcon.tsx +++ b/frontend/src/app/components/shared/FileTypeIcon.tsx @@ -1,4 +1,5 @@ -import { File, FileChartPie, FileSpreadsheet, FileText } from "lucide-react"; +import Image from "next/image"; +import { File } from "lucide-react"; export type FileTypeKind = "pdf" | "word" | "excel" | "ppt" | "other"; @@ -33,16 +34,81 @@ export function FileTypeIcon({ muted?: boolean; }) { const cls = `${className} shrink-0`; - if (muted) return <File className={`${cls} text-gray-300`} />; - switch (fileTypeKind(fileType)) { + const kind = fileTypeKind(fileType); + if (muted) { + const src = + kind === "pdf" + ? "/icons/file-types/pdf.svg" + : kind === "word" + ? "/icons/file-types/word.svg" + : kind === "excel" + ? "/icons/file-types/excel.svg" + : kind === "ppt" + ? "/icons/file-types/ppt.svg" + : null; + return src ? ( + <Image + src={src} + alt="" + aria-hidden="true" + width={64} + height={64} + unoptimized + className={`${cls} object-contain grayscale opacity-35`} + /> + ) : ( + <File className={`${cls} text-gray-300`} /> + ); + } + switch (kind) { case "pdf": - return <FileText className={`${cls} text-red-500`} />; + return ( + <Image + src="/icons/file-types/pdf.svg" + alt="" + aria-hidden="true" + width={64} + height={64} + unoptimized + className={`${cls} object-contain`} + /> + ); case "word": - return <File className={`${cls} text-blue-500`} />; + return ( + <Image + src="/icons/file-types/word.svg" + alt="" + aria-hidden="true" + width={64} + height={64} + unoptimized + className={`${cls} object-contain`} + /> + ); case "excel": - return <FileSpreadsheet className={`${cls} text-emerald-500`} />; + return ( + <Image + src="/icons/file-types/excel.svg" + alt="" + aria-hidden="true" + width={64} + height={64} + unoptimized + className={`${cls} object-contain`} + /> + ); case "ppt": - return <FileChartPie className={`${cls} text-red-500`} />; + return ( + <Image + src="/icons/file-types/ppt.svg" + alt="" + aria-hidden="true" + width={64} + height={64} + unoptimized + className={`${cls} object-contain`} + /> + ); default: return <File className={`${cls} text-gray-500`} />; } diff --git a/frontend/src/app/components/shared/FolderSvgIcon.tsx b/frontend/src/app/components/shared/FolderSvgIcon.tsx new file mode 100644 index 0000000..b9a705c --- /dev/null +++ b/frontend/src/app/components/shared/FolderSvgIcon.tsx @@ -0,0 +1,79 @@ +import Image, { type ImageProps } from "next/image"; + +type FolderSvgIconProps = Omit< + ImageProps, + "alt" | "src" | "width" | "height" | "unoptimized" +>; + +type FolderIconName = + | "folder-closed" + | "folder-open" + | "project-closed" + | "project-opened"; + +type FolderStateIconProps = FolderSvgIconProps & { + open?: boolean; +}; + +const FOLDER_ICON_VERSION = "19"; +const FOLDER_ICON_BASE_PATH = "/icons/app-sidebar"; + +function FolderSvgIcon({ + name, + className, + ...props +}: FolderSvgIconProps & { name: FolderIconName }) { + return ( + <Image + src={`${FOLDER_ICON_BASE_PATH}/${name}.svg?v=${FOLDER_ICON_VERSION}`} + alt="" + width={64} + height={64} + unoptimized + aria-hidden="true" + draggable={false} + className={`${className ?? ""} object-contain`} + {...props} + /> + ); +} + +export function ClosedSubfolderSvgIcon(props: FolderSvgIconProps) { + return <FolderSvgIcon name="folder-closed" {...props} />; +} + +export function OpenSubfolderSvgIcon(props: FolderSvgIconProps) { + return <FolderSvgIcon name="folder-open" {...props} />; +} + +export function SubfolderSvgIcon({ open = false, ...props }: FolderStateIconProps) { + return open ? ( + <OpenSubfolderSvgIcon {...props} /> + ) : ( + <ClosedSubfolderSvgIcon {...props} /> + ); +} + +export function ClosedProjectSvgIcon(props: FolderSvgIconProps) { + return <FolderSvgIcon name="project-closed" {...props} />; +} + +export function OpenProjectSvgIcon(props: FolderSvgIconProps) { + return <FolderSvgIcon name="project-opened" {...props} />; +} + +export function ProjectSvgIcon({ open = false, ...props }: FolderStateIconProps) { + return open ? ( + <OpenProjectSvgIcon {...props} /> + ) : ( + <ClosedProjectSvgIcon {...props} /> + ); +} + +export function ClosedFolderSvgIcon(props: FolderSvgIconProps) { + return <ClosedSubfolderSvgIcon {...props} />; +} + +export function OpenFolderSvgIcon(props: FolderSvgIconProps) { + return <OpenSubfolderSvgIcon {...props} />; +} diff --git a/frontend/src/app/components/shared/HeaderActionsMenu.tsx b/frontend/src/app/components/shared/HeaderActionsMenu.tsx index afe2949..31ebe7e 100644 --- a/frontend/src/app/components/shared/HeaderActionsMenu.tsx +++ b/frontend/src/app/components/shared/HeaderActionsMenu.tsx @@ -3,10 +3,12 @@ import { MoreHorizontal, type LucideIcon } from "lucide-react"; import { DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, DropdownMenuTrigger, } from "@/app/components/ui/dropdown-menu"; +import { + LiquidDropdownContent, + LiquidDropdownItem, +} from "@/app/components/ui/liquid-dropdown"; import { cn } from "@/app/lib/utils"; export type HeaderActionsMenuItem = { @@ -39,11 +41,11 @@ export function HeaderActionsMenu({ <MoreHorizontal className="h-4 w-4" /> </button> </DropdownMenuTrigger> - <DropdownMenuContent align="end" className="z-[160] w-48 bg-white"> + <LiquidDropdownContent align="end" className="z-[160] w-48"> {items.map((item) => { const Icon = item.icon; return ( - <DropdownMenuItem + <LiquidDropdownItem key={item.label} disabled={item.disabled} variant={ @@ -60,10 +62,10 @@ export function HeaderActionsMenu({ > {Icon && <Icon className="h-3.5 w-3.5" />} {item.label} - </DropdownMenuItem> + </LiquidDropdownItem> ); })} - </DropdownMenuContent> + </LiquidDropdownContent> </DropdownMenu> ); } diff --git a/frontend/src/app/components/shared/HeaderFilterDropdown.tsx b/frontend/src/app/components/shared/HeaderFilterDropdown.tsx deleted file mode 100644 index 07ad5e0..0000000 --- a/frontend/src/app/components/shared/HeaderFilterDropdown.tsx +++ /dev/null @@ -1,119 +0,0 @@ -"use client"; - -import { useEffect, useRef, useState, type ComponentType } from "react"; -import { Check, ChevronDown } from "lucide-react"; - -export const GLASS_DROPDOWN = - "rounded-2xl border border-white/70 bg-white/70 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl"; - -export const GLASS_MENU_ITEM = "transition-colors hover:bg-white/65"; - -export type HeaderFilterOption<T extends string> = { - value: T; - label: string; - icon?: ComponentType<{ className?: string }>; - className?: string; -}; - -export function HeaderFilterDropdown<T extends string>({ - label, - value, - allLabel, - options, - onChange, - widthClassName = "w-52", -}: { - label: string; - value: T | null; - allLabel: string; - options: HeaderFilterOption<T>[]; - onChange: (value: T | null) => void; - widthClassName?: string; -}) { - const [open, setOpen] = useState(false); - const ref = useRef<HTMLDivElement>(null); - const selected = options.find((option) => option.value === value); - - useEffect(() => { - if (!open) return; - - function handleClick(event: MouseEvent) { - if (!ref.current?.contains(event.target as Node)) setOpen(false); - } - - document.addEventListener("mousedown", handleClick); - return () => document.removeEventListener("mousedown", handleClick); - }, [open]); - - return ( - <div className="relative" ref={ref}> - <button - onClick={() => setOpen((next) => !next)} - aria-label={label} - title={selected?.label ?? label} - className={`flex h-5 w-5 items-center justify-center rounded-full transition-colors ${ - value - ? "text-gray-700 hover:bg-gray-100 hover:text-gray-900" - : "text-gray-400 hover:bg-gray-100 hover:text-gray-700" - }`} - > - <ChevronDown - className={`h-3 w-3 transition-transform ${ - open ? "rotate-180" : "" - }`} - /> - </button> - {open && ( - <div - className={`absolute right-0 top-full mt-1.5 z-[100] overflow-hidden ${widthClassName} ${GLASS_DROPDOWN}`} - > - <button - onClick={() => { - onChange(null); - setOpen(false); - }} - className={`flex w-full items-center justify-between px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} - > - {allLabel} - {!value && ( - <Check className="h-3.5 w-3.5 text-gray-400" /> - )} - </button> - {options.length > 0 && ( - <div className="border-t border-white/60" /> - )} - {options.map((option) => { - const Icon = option.icon; - - return ( - <button - key={option.value} - onClick={() => { - onChange(option.value); - setOpen(false); - }} - className={`flex w-full items-center justify-between px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} - > - <span - className={`truncate pr-2 ${ - Icon - ? "inline-flex items-center gap-1.5 font-medium" - : "" - } ${option.className ?? ""}`} - > - {Icon && ( - <Icon className="h-3.5 w-3.5 shrink-0" /> - )} - {option.label} - </span> - {value === option.value && ( - <Check className="h-3.5 w-3.5 shrink-0 text-gray-400" /> - )} - </button> - ); - })} - </div> - )} - </div> - ); -} diff --git a/frontend/src/app/components/shared/PageHeader.tsx b/frontend/src/app/components/shared/PageHeader.tsx index 6bc2aeb..b09c1b0 100644 --- a/frontend/src/app/components/shared/PageHeader.tsx +++ b/frontend/src/app/components/shared/PageHeader.tsx @@ -1,8 +1,6 @@ "use client"; import { - Fragment, - isValidElement, useEffect, useRef, useState, @@ -10,7 +8,7 @@ import { type ReactNode, } from "react"; import { createPortal } from "react-dom"; -import { ChevronLeft, Loader2, Plus, Search, Trash2 } from "lucide-react"; +import { ChevronLeft, Loader2, Plus, Search } from "lucide-react"; import { usePageChrome } from "@/app/contexts/PageChromeContext"; import { cn } from "@/app/lib/utils"; @@ -24,13 +22,12 @@ export interface PageHeaderBreadcrumb { } type PageHeaderButtonAction = { - type?: "button"; + type?: never; icon?: ReactNode; label?: ReactNode; onClick?: () => void; disabled?: boolean; title?: string; - variant?: "default" | "danger"; iconOnly?: boolean; tooltip?: ReactNode; }; @@ -42,14 +39,6 @@ type PageHeaderSearchAction = { placeholder?: string; }; -type PageHeaderDeleteAction = { - type: "delete"; - onClick?: () => void; - disabled?: boolean; - loading?: boolean; - title?: string; -}; - type PageHeaderNewAction = { type: "new"; onClick?: () => void; @@ -66,23 +55,22 @@ type PageHeaderCustomAction = { export type PageHeaderAction = | PageHeaderButtonAction | PageHeaderSearchAction - | PageHeaderDeleteAction | PageHeaderNewAction - | PageHeaderCustomAction - | ReactNode; + | PageHeaderCustomAction; + +type MaybePageHeaderAction = PageHeaderAction | null | false | undefined; type PageHeaderActionGroup = - | PageHeaderAction[] + | MaybePageHeaderAction[] | { - actions: PageHeaderAction[]; + actions: MaybePageHeaderAction[]; }; interface PageHeaderProps { children?: ReactNode; - actions?: PageHeaderAction[]; + actions?: MaybePageHeaderAction[]; actionGroups?: PageHeaderActionGroup[]; shrink?: boolean; - className?: string; breadcrumbs?: PageHeaderBreadcrumb[]; loading?: boolean; } @@ -92,7 +80,6 @@ export function PageHeader({ actions, actionGroups, shrink = false, - className, breadcrumbs, loading = false, }: PageHeaderProps) { @@ -104,7 +91,7 @@ export function PageHeader({ ); const actionsDisabled = loading || !!breadcrumbs?.some((item) => item.loading); - const actionItems = actions?.filter(Boolean) ?? []; + const actionItems = actions?.filter(isPresentAction) ?? []; const groupedActionItems = ( actionGroups ?.map(normalizeActionGroup) @@ -117,10 +104,9 @@ export function PageHeader({ <div className={cn( "flex items-center justify-between", - "px-4 md:px-10", + "mx-4 md:mx-6", "min-h-[76px] pb-4 pt-5.5", shrink && "shrink-0", - className, )} > {headerContent} @@ -163,16 +149,15 @@ function PageHeaderActionGroups({ key={groupIndex} className={cn( "flex shrink-0 items-center gap-2", - "rounded-full border border-white/70 bg-white px-1 py-1 shadow-[0_8px_24px_rgba(15,23,42,0.06)] backdrop-blur-2xl", + "rounded-full border border-white/70 bg-app-surface px-1 py-1 shadow-[0_8px_24px_rgba(15,23,42,0.06)] backdrop-blur-2xl", )} > {group.actions.map((action, index) => ( - <Fragment key={index}> - <PageHeaderActionRenderer - action={action} - disabled={actionsDisabled} - /> - </Fragment> + <PageHeaderActionRenderer + key={index} + action={action} + disabled={actionsDisabled} + /> ))} </div> ))} @@ -183,14 +168,18 @@ function PageHeaderActionGroups({ function normalizeActionGroup(group: PageHeaderActionGroup) { if (Array.isArray(group)) { return { - actions: group.filter(Boolean), + actions: group.filter(isPresentAction), }; } return { - actions: group.actions.filter(Boolean), + actions: group.actions.filter(isPresentAction), }; } +function isPresentAction(action: MaybePageHeaderAction): action is PageHeaderAction { + return Boolean(action); +} + function PageHeaderActionRenderer({ action, disabled, @@ -198,16 +187,6 @@ function PageHeaderActionRenderer({ action: PageHeaderAction; disabled: boolean; }) { - if (!isPageHeaderActionObject(action)) { - return disabled ? ( - <span className="inline-flex h-7 items-center opacity-40 pointer-events-none"> - {action} - </span> - ) : ( - <>{action}</> - ); - } - switch (action.type) { case "search": return ( @@ -216,13 +195,6 @@ function PageHeaderActionRenderer({ disabled={disabled} /> ); - case "delete": - return ( - <PageHeaderDeleteActionControl - action={action} - disabled={disabled} - /> - ); case "new": return ( <PageHeaderNewActionControl @@ -241,7 +213,6 @@ function PageHeaderActionRenderer({ {action.render} </span> ); - case "button": default: return ( <PageHeaderButtonActionControl @@ -252,12 +223,6 @@ function PageHeaderActionRenderer({ } } -function isPageHeaderActionObject( - action: PageHeaderAction, -): action is Exclude<PageHeaderAction, ReactNode> { - return !!action && typeof action === "object" && !isValidElement(action); -} - function PageHeaderButtonActionControl({ action, disabled, @@ -273,7 +238,6 @@ function PageHeaderButtonActionControl({ disabled={disabled || action.disabled} title={action.title} aria-label={action.title} - variant={action.variant} iconOnly={iconOnly} > {action.icon} @@ -313,32 +277,6 @@ function PageHeaderNewActionControl({ ); } -function PageHeaderDeleteActionControl({ - action, - disabled, -}: { - action: PageHeaderDeleteAction; - disabled: boolean; -}) { - const title = action.title ?? "Delete"; - return ( - <PageHeaderActionButton - onClick={action.onClick} - disabled={disabled || action.disabled || action.loading} - title={title} - aria-label={title} - iconOnly - variant="danger" - > - {action.loading ? ( - <Loader2 className="h-4 w-4 animate-spin" /> - ) : ( - <Trash2 className="h-4 w-4" /> - )} - </PageHeaderActionButton> - ); -} - function PageHeaderSearchActionControl({ action, disabled, @@ -370,7 +308,7 @@ function PageHeaderSearchActionControl({ className: "cursor-text justify-start gap-2 px-3 text-gray-700 hover:text-gray-700", }), - "w-56 bg-gray-100 sm:w-80", + "w-56 bg-app-surface-active sm:w-80", )} > <Search className="h-3.5 w-3.5 text-gray-400 shrink-0" /> @@ -403,40 +341,33 @@ type PageHeaderActionButtonProps = Omit< ButtonHTMLAttributes<HTMLButtonElement>, "className" > & { - variant?: "default" | "danger"; iconOnly?: boolean; }; type PageHeaderActionControlClassNameOptions = { - variant?: "default" | "danger"; iconOnly?: boolean; disabled?: boolean; className?: string; }; function pageHeaderActionControlClassName({ - variant = "default", iconOnly = false, disabled = false, className, }: PageHeaderActionControlClassNameOptions = {}) { return cn( - "flex h-7 items-center justify-center rounded-full text-sm transition-colors hover:bg-gray-100 active:bg-gray-100 disabled:cursor-default disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300", + "flex h-7 items-center justify-center rounded-full text-sm transition-colors hover:bg-app-surface-hover active:bg-app-surface-active disabled:cursor-default disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300", iconOnly ? "w-7" : "w-7 gap-1.5 px-0 sm:w-auto sm:px-3", disabled ? "cursor-default" : "cursor-pointer", - "hover:bg-gray-100 active:bg-gray-100", - variant === "danger" - ? "text-gray-500 hover:text-red-600" - : "text-gray-500 hover:text-gray-900", + "text-gray-500 hover:text-gray-900", className, ); } function PageHeaderActionButton({ children, - variant = "default", iconOnly = false, disabled, ...props @@ -445,7 +376,6 @@ function PageHeaderActionButton({ <button disabled={disabled} className={pageHeaderActionControlClassName({ - variant, iconOnly, disabled, })} diff --git a/frontend/src/app/components/shared/RowActions.tsx b/frontend/src/app/components/shared/RowActions.tsx index 375997b..6bd1ab2 100644 --- a/frontend/src/app/components/shared/RowActions.tsx +++ b/frontend/src/app/components/shared/RowActions.tsx @@ -1,28 +1,38 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { + forwardRef, + useEffect, + useRef, + useState, + type ComponentPropsWithoutRef, +} from "react"; +import { createPortal } from "react-dom"; import { Download, Eye, EyeOff, FolderMinus, - FolderPlus, Hash, History, Pencil, Trash2, Upload, } from "lucide-react"; +import { SubfolderSvgIcon } from "@/app/components/shared/FolderSvgIcon"; import { - GLASS_DROPDOWN, - GLASS_MENU_ITEM, -} from "@/app/components/shared/HeaderFilterDropdown"; + CLOSE_ROW_ACTIONS_EVENT, + closeRowActionMenus, +} from "@/app/components/shared/TablePrimitive"; +import { + LiquidDropdownButton, + LiquidDropdownSurface, +} from "@/app/components/ui/liquid-dropdown"; +import { cn } from "@/app/lib/utils"; -export const CLOSE_ROW_ACTIONS_EVENT = "mike:close-row-actions"; +export { CLOSE_ROW_ACTIONS_EVENT, closeRowActionMenus }; -export function closeRowActionMenus() { - document.dispatchEvent(new Event(CLOSE_ROW_ACTIONS_EVENT)); -} +export type RowActionMenuSurfaceProps = ComponentPropsWithoutRef<"div">; interface Props { onDelete?: () => void; @@ -43,7 +53,19 @@ interface Props { deleteLabel?: string; } -export function RowActionMenuItems({ +type RowActionMenuItemsProps = Props & { + onClose: () => void; + surfaceProps?: RowActionMenuSurfaceProps; +}; + +const ROW_ACTION_ITEM_CLASS = + "flex items-center gap-2 w-full px-3 py-2 text-gray-600"; +const ROW_ACTION_LEFT_ITEM_CLASS = `text-left ${ROW_ACTION_ITEM_CLASS}`; + +export const RowActionMenuItems = forwardRef< + HTMLDivElement, + RowActionMenuItemsProps +>(function RowActionMenuItems({ onDelete, onHide, onUnhide, @@ -61,98 +83,106 @@ export function RowActionMenuItems({ renameLabel = "Rename", deleteLabel = "Delete", onClose, -}: Props & { onClose: () => void }) { + surfaceProps, +}, ref) { + const { className: surfaceClassName, ...restSurfaceProps } = + surfaceProps ?? {}; + return ( - <> + <LiquidDropdownSurface + ref={ref} + className={cn("w-48 overflow-hidden", surfaceClassName)} + {...restSurfaceProps} + > {onNewSubfolder && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onNewSubfolder(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-left text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_LEFT_ITEM_CLASS} > - <FolderPlus className="h-3.5 w-3.5 shrink-0" /> + <SubfolderSvgIcon className="h-3.5 w-3.5 shrink-0" /> {newSubfolderLabel} - </button> + </LiquidDropdownButton> )} {onRename && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onRename(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_ITEM_CLASS} > <Pencil className="h-3.5 w-3.5" /> {renameLabel} - </button> + </LiquidDropdownButton> )} {onEditDetails && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onEditDetails(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_ITEM_CLASS} > <Pencil className="h-3.5 w-3.5" /> Edit details - </button> + </LiquidDropdownButton> )} {onUpdateCmNumber && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onUpdateCmNumber(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_ITEM_CLASS} > <Hash className="h-3.5 w-3.5" /> Edit CM No. - </button> + </LiquidDropdownButton> )} {onDownload && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onDownload(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_ITEM_CLASS} > <Download className="h-3.5 w-3.5" /> Download - </button> + </LiquidDropdownButton> )} {onShowAllVersions && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onShowAllVersions(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-left text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_LEFT_ITEM_CLASS} > <History className="h-3.5 w-3.5 shrink-0" /> Show all versions - </button> + </LiquidDropdownButton> )} {onUploadNewVersion && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onUploadNewVersion(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-left text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_LEFT_ITEM_CLASS} > <Upload className="h-3.5 w-3.5 shrink-0" /> Upload new version - </button> + </LiquidDropdownButton> )} {onRemoveFromFolder && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onRemoveFromFolder(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-left text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_LEFT_ITEM_CLASS} > <FolderMinus className="h-3.5 w-3.5 shrink-0" /> Remove from subfolder - </button> + </LiquidDropdownButton> )} {onUnhide && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onUnhide(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_ITEM_CLASS} > <Eye className="h-3.5 w-3.5" /> Activate - </button> + </LiquidDropdownButton> )} {onHide && ( - <button + <LiquidDropdownButton onClick={() => { onClose(); onHide(); }} - className={`flex items-center gap-2 w-full px-3 py-2 text-xs text-gray-600 ${GLASS_MENU_ITEM}`} + className={ROW_ACTION_ITEM_CLASS} > <EyeOff className="h-3.5 w-3.5" /> Deactivate - </button> + </LiquidDropdownButton> )} {onDelete && ( <button @@ -172,9 +202,9 @@ export function RowActionMenuItems({ {deleteLabel} </button> )} - </> + </LiquidDropdownSurface> ); -} +}); export function RowActions(props: Props) { const [open, setOpen] = useState(false); @@ -224,23 +254,28 @@ export function RowActions(props: Props) { <button ref={btnRef} onClick={handleToggle} - className="flex items-center justify-center w-6 h-6 rounded text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-colors leading-none" + className="flex items-center justify-center w-6 h-6 rounded text-gray-700 hover:text-gray-900 hover:bg-app-surface-hover transition-colors leading-none" > <span className="tracking-widest text-xs">···</span> </button> - {open && ( - <div - style={{ position: "fixed", top: coords.top, right: coords.right }} - className={`z-[120] w-48 overflow-hidden ${GLASS_DROPDOWN}`} - onClick={(e) => e.stopPropagation()} - > + {open && + createPortal( <RowActionMenuItems {...props} onClose={() => setOpen(false)} - /> - </div> - )} + surfaceProps={{ + style: { + position: "fixed", + top: coords.top, + right: coords.right, + }, + className: "z-[120]", + onClick: (e) => e.stopPropagation(), + }} + />, + document.body, + )} </> ); } diff --git a/frontend/src/app/components/shared/SidebarChatItem.tsx b/frontend/src/app/components/shared/SidebarChatItem.tsx index 1531e76..975a437 100644 --- a/frontend/src/app/components/shared/SidebarChatItem.tsx +++ b/frontend/src/app/components/shared/SidebarChatItem.tsx @@ -4,14 +4,17 @@ import { useState, useRef, useEffect } from "react"; import { MoreHorizontal, Pencil, Trash2, Check, X } from "lucide-react"; import { DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, DropdownMenuTrigger, } from "@/app/components/ui/dropdown-menu"; +import { + LiquidDropdownContent, + LiquidDropdownItem, +} from "@/app/components/ui/liquid-dropdown"; import { useChatHistoryContext } from "@/app/contexts/ChatHistoryContext"; import { useAuth } from "@/app/contexts/AuthContext"; import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import type { Chat } from "@/app/components/shared/types"; +import { ChatSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; import { cn } from "@/app/lib/utils"; interface Props { @@ -50,8 +53,10 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props return ( <div className={cn( - "group relative flex items-center w-full h-9 rounded-md transition-colors", - isActive ? "bg-gray-200/60" : "hover:bg-gray-100", + "group relative flex h-8 w-full items-center rounded-md transition-colors", + isActive + ? "bg-gray-200/60 pr-1" + : "pr-3 hover:bg-gray-100 hover:pr-1", )} > {isRenaming ? ( @@ -82,6 +87,7 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props </div> ) : ( <> + <ChatSkeuoIcon className="ml-2.5 h-3.5 w-3.5 shrink-0" /> <button onClick={onSelect} onMouseEnter={(e) => { @@ -92,9 +98,12 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props onMouseLeave={(e) => { e.currentTarget.scrollTo({ left: 0, behavior: "smooth" }); }} - className={`flex-1 min-w-0 text-left px-3 py-2 text-xs overflow-x-hidden whitespace-nowrap scrollbar-none ${ - isActive ? "text-gray-900" : "text-gray-700" - }`} + className={cn( + "min-w-0 flex-1 overflow-x-hidden whitespace-nowrap scrollbar-none py-1 pl-2 text-left text-xs", + isActive + ? "pr-3 text-gray-900" + : "pr-0 text-gray-700 group-hover:pr-3", + )} title={projectName ? `${projectName}: ${chat.title ?? "Untitled chat"}` : (chat.title ?? "Untitled chat")} > {projectName && ( @@ -106,17 +115,17 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props <DropdownMenu> <DropdownMenuTrigger asChild> <button - className={`mr-1 rounded-md p-1 text-gray-500 transition-all hover:bg-gray-200 hover:text-gray-900 ${ + className={`flex h-6 w-0 shrink-0 items-center justify-center overflow-hidden rounded-md bg-transparent text-gray-500 opacity-0 transition-opacity hover:text-gray-900 ${ isActive - ? "opacity-100" - : "opacity-0 group-hover:opacity-100" + ? "w-6 opacity-100" + : "pointer-events-none group-hover:w-6 group-hover:pointer-events-auto group-hover:opacity-100" }`} > <MoreHorizontal className="h-4 w-4" /> </button> </DropdownMenuTrigger> - <DropdownMenuContent align="end" className="z-101"> - <DropdownMenuItem + <LiquidDropdownContent align="end" className="z-101"> + <LiquidDropdownItem onClick={() => { if (!isChatOwner) { setOwnerOnlyAction("rename this chat"); @@ -128,8 +137,8 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props > <Pencil className="mr-2 h-4 w-4" /> Rename - </DropdownMenuItem> - <DropdownMenuItem + </LiquidDropdownItem> + <LiquidDropdownItem onClick={() => { if (!isChatOwner) { setOwnerOnlyAction("delete this chat"); @@ -141,8 +150,8 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props > <Trash2 className="mr-2 h-4 w-4" /> Delete - </DropdownMenuItem> - </DropdownMenuContent> + </LiquidDropdownItem> + </LiquidDropdownContent> </DropdownMenu> </> )} diff --git a/frontend/src/app/components/shared/TablePrimitive.tsx b/frontend/src/app/components/shared/TablePrimitive.tsx index b4fb8a6..9611850 100644 --- a/frontend/src/app/components/shared/TablePrimitive.tsx +++ b/frontend/src/app/components/shared/TablePrimitive.tsx @@ -5,24 +5,142 @@ import { useRef, useState, type HTMLAttributes, - type MouseEvent, + type ComponentType, + type MouseEvent as ReactMouseEvent, type ReactNode, + type RefObject, } from "react"; +import { createPortal } from "react-dom"; +import { Check, ChevronDown } from "lucide-react"; import { cn } from "@/app/lib/utils"; import { - CLOSE_ROW_ACTIONS_EVENT, - closeRowActionMenus, -} from "@/app/components/shared/RowActions"; -import { GLASS_DROPDOWN } from "@/app/components/shared/HeaderFilterDropdown"; + DropdownMenu, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/app/components/ui/dropdown-menu"; +import { + LiquidDropdownContent, + LiquidDropdownItem, +} from "@/app/components/ui/liquid-dropdown"; +import { LIQUID_TABLE_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; -export const TABLE_STICKY_CELL_BG = "bg-[#fafbfc]"; +export const CLOSE_ROW_ACTIONS_EVENT = "mike:close-row-actions"; + +export function closeRowActionMenus() { + document.dispatchEvent(new Event(CLOSE_ROW_ACTIONS_EVENT)); +} + +function canPortalToDocument() { + return typeof document !== "undefined"; +} + +export const TABLE_STICKY_CELL_BG = "bg-app-surface"; export const TABLE_PRIMARY_CELL_WIDTH_CLASS = "w-[248px] sm:w-[292px] md:w-[332px] shrink-0"; export const TABLE_CHECKBOX_CLASS = - "h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black"; + "mr-4 h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-pointer accent-black"; type DivProps = HTMLAttributes<HTMLDivElement>; +export type TableFilterOption<T extends string> = { + value: T; + label: string; + icon?: ComponentType<{ className?: string }>; + className?: string; +}; + +export type TableSortDirection = "asc" | "desc"; + +export function TableFilters<T extends string>({ + label, + value, + allLabel, + options, + onChange, + widthClassName = "w-52", + align = "left", +}: { + label: string; + value: T | null; + allLabel: string; + options: TableFilterOption<T>[]; + onChange: (value: T | null) => void; + widthClassName?: string; + /** + * Which side the menu opens toward. "left" (default) anchors the menu's + * right edge to the button and extends leftward; "right" anchors the menu's + * left edge to the button and extends rightward. + */ + align?: "left" | "right"; +}) { + const [open, setOpen] = useState(false); + const selected = options.find((option) => option.value === value); + + return ( + <DropdownMenu open={open} onOpenChange={setOpen}> + <DropdownMenuTrigger asChild> + <button + aria-label={label} + title={selected?.label ?? label} + className={`flex h-[18px] w-[22px] items-center justify-center rounded-sm transition-colors ${ + value + ? "text-gray-700 hover:bg-app-surface-hover hover:text-gray-900" + : "text-gray-400 hover:bg-app-surface-hover hover:text-gray-700" + }`} + > + <ChevronDown + className={`h-3 w-3 transition-transform ${ + open ? "rotate-180" : "" + }`} + /> + </button> + </DropdownMenuTrigger> + <LiquidDropdownContent + align={align === "right" ? "start" : "end"} + className={`z-[120] overflow-hidden ${widthClassName}`} + > + <LiquidDropdownItem + onSelect={() => onChange(null)} + className="flex w-full items-center justify-between px-3 py-2" + > + {allLabel} + {!value && <Check className="h-3.5 w-3.5 text-gray-400" />} + </LiquidDropdownItem> + {options.length > 0 && ( + <DropdownMenuSeparator className="-mx-1 my-1 bg-white/60" /> + )} + {options.map((option) => { + const Icon = option.icon; + + return ( + <LiquidDropdownItem + key={option.value} + onSelect={() => onChange(option.value)} + className="flex w-full items-center justify-between px-3 py-2" + > + <span + className={`truncate pr-2 ${ + Icon + ? "inline-flex items-center gap-1.5 font-medium" + : "" + } ${option.className ?? ""}`} + > + {Icon && ( + <Icon className="h-3.5 w-3.5 shrink-0" /> + )} + {option.label} + </span> + {value === option.value && ( + <Check className="h-3.5 w-3.5 shrink-0 text-gray-400" /> + )} + </LiquidDropdownItem> + ); + })} + </LiquidDropdownContent> + </DropdownMenu> + ); +} + export function SkeletonLine({ className }: { className?: string }) { return ( <div @@ -45,31 +163,37 @@ export function SkeletonDot({ className }: { className?: string }) { export function TableScrollArea({ children, className, - innerClassName, header, -}: DivProps & { innerClassName?: string; header?: ReactNode }) { - const bodyRef = useRef<HTMLDivElement>(null); - const headerRef = useRef<HTMLDivElement>(null); - - function syncHeader() { - if (headerRef.current && bodyRef.current) { - headerRef.current.scrollLeft = bodyRef.current.scrollLeft; - } - } + scrollRef, + onScroll, +}: DivProps & { + header?: ReactNode; + scrollRef?: RefObject<HTMLDivElement | null>; +}) { + const headerViewportRef = useRef<HTMLDivElement>(null); return ( - <div className={cn("w-full min-h-0 flex-1 flex flex-col overflow-hidden", className)}> - {header !== undefined && ( - <div ref={headerRef} className="shrink-0 overflow-hidden"> - {header} - </div> - )} - <div - ref={bodyRef} - className="min-h-0 flex-1 overflow-auto" - onScroll={header !== undefined ? syncHeader : undefined} - > - <div className={cn("flex min-h-full min-w-max flex-col", innerClassName)}> + <div className={cn("mx-4 mb-2 min-h-0 min-w-0 flex-1 rounded-2xl md:mx-6 md:mb-3", className)}> + <div className={cn("flex h-full min-h-0 min-w-0 flex-col overflow-hidden", LIQUID_TABLE_SURFACE_CLASS)}> + {header && ( + <div + ref={headerViewportRef} + className="min-w-0 shrink-0 overflow-hidden" + > + {header} + </div> + )} + <div + ref={scrollRef} + className="flex min-h-0 min-w-0 flex-1 flex-col overflow-auto overscroll-x-none" + onScroll={(event) => { + if (headerViewportRef.current) { + headerViewportRef.current.scrollLeft = + event.currentTarget.scrollLeft; + } + onScroll?.(event); + }} + > {children} </div> </div> @@ -81,7 +205,7 @@ export function TableHeaderRow({ children, className, ...props }: DivProps) { return ( <div className={cn( - "sticky top-0 z-[70] flex h-8 items-center border-b border-gray-200 bg-[#fafbfc] pr-3 text-xs font-medium text-gray-500 select-none md:pr-10", + "z-[70] flex h-10 min-w-max items-center bg-app-surface pr-3 text-xs font-medium text-gray-500 select-none backdrop-blur-xl", className, )} {...props} @@ -100,7 +224,9 @@ export function TableRow({ ...props }: DivProps & { interactive?: boolean; - rightClickDropdown?: ReactNode | ((close: () => void) => ReactNode); + rightClickDropdown?: + | ReactNode + | ((close: () => void, menuProps: DivProps) => ReactNode); }) { const [menuCoords, setMenuCoords] = useState<{ top: number; @@ -130,7 +256,7 @@ export function TableRow({ setMenuCoords(null); } - function handleContextMenu(e: MouseEvent<HTMLDivElement>) { + function handleContextMenu(e: ReactMouseEvent<HTMLDivElement>) { onContextMenu?.(e); if (!rightClickDropdown || e.defaultPrevented) return; e.preventDefault(); @@ -147,8 +273,8 @@ export function TableRow({ <> <div className={cn( - "group flex h-10 items-center border-b border-gray-50 pr-3 transition-colors md:pr-10", - interactive && "cursor-pointer hover:bg-gray-100", + "group flex h-10 min-w-max items-center pr-3 transition-colors", + interactive && "cursor-pointer hover:bg-app-surface-hover", className, )} onContextMenu={handleContextMenu} @@ -156,22 +282,24 @@ export function TableRow({ > {children} </div> - {menuCoords && rightClickDropdown && ( - <div - style={{ - position: "fixed", - top: menuCoords.top, - left: menuCoords.left, - }} - className={`z-[120] w-48 overflow-hidden ${GLASS_DROPDOWN}`} - onClick={(e) => e.stopPropagation()} - onContextMenu={(e) => e.preventDefault()} - > - {typeof rightClickDropdown === "function" - ? rightClickDropdown(closeRightClickDropdown) - : rightClickDropdown} - </div> - )} + {menuCoords && + rightClickDropdown && + canPortalToDocument() && + createPortal( + typeof rightClickDropdown === "function" + ? rightClickDropdown(closeRightClickDropdown, { + style: { + position: "fixed", + top: menuCoords.top, + left: menuCoords.left, + }, + className: "z-[120]", + onClick: (e) => e.stopPropagation(), + onContextMenu: (e) => e.preventDefault(), + }) + : rightClickDropdown, + document.body, + )} </> ); } @@ -192,13 +320,13 @@ export function TableStickyCell({ return ( <div className={cn( - "sticky left-0 z-[60] flex gap-4 pl-4 pr-2 text-left", + "sticky left-0 z-[60] flex pl-4 pr-2 text-left", widthClassName, bgClassName, header ? "z-[80] items-center self-stretch" : "py-2 transition-colors", - !header && hover && "group-hover:bg-gray-100", + !header && hover && "group-hover:bg-app-surface-hover", className, )} > @@ -264,7 +392,7 @@ export function TablePrimaryCell({ bgClassName={bgClassName} className={className} > - <div className="flex min-w-0 items-center gap-4"> + <div className="flex min-w-0 items-center"> <input type="checkbox" checked={selected} @@ -281,7 +409,10 @@ export function TablePrimaryCell({ export function TableHeaderCell({ children, className, ...props }: DivProps) { return ( - <div className={cn("shrink-0 text-left", className)} {...props}> + <div + className={cn("flex shrink-0 items-center text-left", className)} + {...props} + > {children} </div> ); diff --git a/frontend/src/app/components/shared/TableToolbar.tsx b/frontend/src/app/components/shared/TableToolbar.tsx index 82e5772..99f7e95 100644 --- a/frontend/src/app/components/shared/TableToolbar.tsx +++ b/frontend/src/app/components/shared/TableToolbar.tsx @@ -1,4 +1,31 @@ -import React from "react"; +"use client"; + +import React, { useSyncExternalStore } from "react"; +import { Settings2 } from "lucide-react"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; +import { + DropdownMenu, + DropdownMenuTrigger, +} from "@/app/components/ui/dropdown-menu"; +import { LiquidDropdownContent } from "@/app/components/ui/liquid-dropdown"; + +const DESKTOP_QUERY = "(min-width: 768px)"; + +function subscribeToDesktopQuery(onStoreChange: () => void) { + if (typeof window === "undefined") return () => {}; + const query = window.matchMedia(DESKTOP_QUERY); + query.addEventListener("change", onStoreChange); + return () => query.removeEventListener("change", onStoreChange); +} + +function getDesktopSnapshot() { + if (typeof window === "undefined") return true; + return window.matchMedia(DESKTOP_QUERY).matches; +} + +function getDesktopServerSnapshot() { + return true; +} interface ToolbarItem<T extends string> { id: T; @@ -6,51 +33,68 @@ interface ToolbarItem<T extends string> { } interface Props<T extends string> { - items: ToolbarItem<T>[]; - active: T; - onChange: (id: T) => void; + items?: ToolbarItem<T>[]; + active?: T; + onChange?: (id: T) => void; /** Optional content rendered on the right side of the toolbar */ actions?: React.ReactNode; } export function TableToolbar<T extends string>({ - items, + items = [], active, onChange, actions, }: Props<T>) { const hasItems = items.length > 0; + const isDesktop = useSyncExternalStore( + subscribeToDesktopQuery, + getDesktopSnapshot, + getDesktopServerSnapshot, + ); return ( - <div className="flex items-center h-10 px-4 border-b border-gray-200 md:px-10"> + <div className="mx-4 mb-2 flex h-10 items-center md:mx-6"> {hasItems && ( - <div className="flex-1 flex items-center gap-5"> + <div className="flex flex-1 items-center gap-1.5 overflow-x-auto"> {items.map((item) => ( - <button + <TabPillButton key={item.id} - onClick={() => onChange(item.id)} - className={`text-xs transition-colors ${ - active === item.id - ? "font-medium text-gray-700" - : "font-normal text-gray-500 hover:text-gray-700" - }`} + active={active === item.id} + onClick={() => onChange?.(item.id)} > {item.label} - </button> + </TabPillButton> ))} </div> )} - {actions && ( - <div - className={ - hasItems - ? "flex items-center gap-2" - : "flex flex-1 items-center gap-2" - } - > + {actions && isDesktop && ( + <div className="ml-auto flex items-center gap-2"> {actions} </div> )} + {actions && !isDesktop && ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <button + type="button" + title="Toolbar actions" + aria-label="Toolbar actions" + className="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/70 bg-white/65 text-gray-700 shadow-[0_3px_9px_rgba(15,23,42,0.05),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl transition-colors hover:bg-white hover:text-gray-900 active:scale-[0.98]" + > + <Settings2 className="h-3.5 w-3.5" /> + </button> + </DropdownMenuTrigger> + <LiquidDropdownContent + align="end" + className="z-[130] min-w-40 p-1" + > + <div className="flex flex-col gap-0.5 [&_.hidden]:inline [&>div]:flex [&>div]:flex-col [&>div]:items-stretch [&>div]:gap-0.5 [&_button]:h-auto [&_button]:w-full [&_button]:justify-start [&_button]:rounded-lg [&_button]:border-0 [&_button]:bg-transparent [&_button]:px-3 [&_button]:py-2 [&_button]:text-left [&_button]:text-xs [&_button]:font-medium [&_button]:text-gray-700 [&_button]:shadow-none [&_button]:backdrop-blur-none [&_button]:transition-colors [&_button]:active:scale-100 [&_button:hover]:bg-app-surface-hover [&_button:disabled]:opacity-40"> + {actions} + </div> + </LiquidDropdownContent> + </DropdownMenu> + )} </div> ); } diff --git a/frontend/src/app/components/shared/types.ts b/frontend/src/app/components/shared/types.ts index 33a1e9c..5ef3801 100644 --- a/frontend/src/app/components/shared/types.ts +++ b/frontend/src/app/components/shared/types.ts @@ -10,6 +10,16 @@ export interface Folder { updated_at: string; } +export interface LibraryFolder { + id: string; + user_id: string; + library_kind: "file" | "template"; + name: string; + parent_folder_id: string | null; + created_at: string; + updated_at: string; +} + export interface Project { id: string; user_id: string; @@ -34,6 +44,8 @@ export interface Document { user_id?: string; project_id: string | null; folder_id?: string | null; + library_kind?: "file" | "template"; + library_folder_id?: string | null; filename: string; owner_email?: string | null; owner_display_name?: string | null; @@ -371,6 +383,11 @@ export function isSpreadsheetFilename(filename: string): boolean { return ext === "xlsx" || ext === "xlsm" || ext === "xls"; } +export function isDocxFilename(filename: string): boolean { + const ext = filename.split(".").pop()?.toLowerCase(); + return ext === "docx" || ext === "doc"; +} + /** * Human-readable cell locator for a spreadsheet citation, e.g. "Sheet1!B7". * Falls back to whichever of `sheet`/`cell` is present. diff --git a/frontend/src/app/components/shared/useDirectoryData.ts b/frontend/src/app/components/shared/useDirectoryData.ts index a572232..87e23b9 100644 --- a/frontend/src/app/components/shared/useDirectoryData.ts +++ b/frontend/src/app/components/shared/useDirectoryData.ts @@ -1,73 +1,155 @@ "use client"; -import { useEffect, useState } from "react"; -import { getProject, listProjects, listStandaloneDocuments } from "@/app/lib/mikeApi"; -import type { Document, Project } from "./types"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { + getLibrary, + getProject, + listProjects, +} from "@/app/lib/mikeApi"; +import type { Document, LibraryFolder, Project } from "./types"; -const CACHE_TTL_MS = 30_000; +export type DirectoryTab = "files" | "templates" | "projects"; -interface DirectoryCache { - standaloneDocuments: Document[]; - projects: Project[]; - fetchedAt: number; +const EMPTY_LOADING: Record<DirectoryTab, boolean> = { + files: false, + templates: false, + projects: false, +}; + +const EMPTY_LOADED: Record<DirectoryTab, boolean> = { + files: false, + templates: false, + projects: false, +}; + +function sortDocuments(docs: Document[]) { + return [...docs].sort((a, b) => + (b.created_at ?? "").localeCompare(a.created_at ?? ""), + ); } -let cache: DirectoryCache | null = null; - -export function invalidateDirectoryCache() { - cache = null; +async function loadFiles() { + const files = await getLibrary("files"); + return { + documents: sortDocuments(files.documents), + folders: files.folders, + }; } -export function useDirectoryData(enabled: boolean) { - const [loading, setLoading] = useState(true); +async function loadTemplates() { + const templates = await getLibrary("templates"); + return { + documents: sortDocuments(templates.documents), + folders: templates.folders, + }; +} + +async function loadProjects() { + const projects = await listProjects(); + const fullProjects = await Promise.all( + projects.map((project) => getProject(project.id)), + ); + const projectCounts = new Map( + projects.map((project) => [project.id, project.document_count ?? 0]), + ); + return fullProjects.map((project) => ({ + ...project, + document_count: + project.documents?.length ?? projectCounts.get(project.id) ?? 0, + })); +} + +export function useDirectoryData( + enabled: boolean, + initialTab: DirectoryTab = "files", +) { const [standaloneDocuments, setStandaloneDocuments] = useState<Document[]>([]); + const [templateDocuments, setTemplateDocuments] = useState<Document[]>([]); + const [fileFolders, setFileFolders] = useState<LibraryFolder[]>([]); + const [templateFolders, setTemplateFolders] = useState<LibraryFolder[]>([]); const [projects, setProjects] = useState<Project[]>([]); + const [loadingTabs, setLoadingTabs] = + useState<Record<DirectoryTab, boolean>>(EMPTY_LOADING); + const loadingTabsRef = useRef<Record<DirectoryTab, boolean>>({ + ...EMPTY_LOADING, + }); + const loadedTabsRef = useRef<Record<DirectoryTab, boolean>>({ + ...EMPTY_LOADED, + }); + + const loadTab = useCallback( + async (tab: DirectoryTab) => { + if ( + !enabled || + loadingTabsRef.current[tab] || + loadedTabsRef.current[tab] + ) { + return; + } + + loadingTabsRef.current = { + ...loadingTabsRef.current, + [tab]: true, + }; + setLoadingTabs((prev) => ({ ...prev, [tab]: true })); + try { + if (tab === "files") { + const files = await loadFiles(); + setStandaloneDocuments(files.documents); + setFileFolders(files.folders); + } else if (tab === "templates") { + const templates = await loadTemplates(); + setTemplateDocuments(templates.documents); + setTemplateFolders(templates.folders); + } else { + setProjects(await loadProjects()); + } + loadedTabsRef.current = { + ...loadedTabsRef.current, + [tab]: true, + }; + } catch { + if (tab === "files") { + setStandaloneDocuments([]); + setFileFolders([]); + } else if (tab === "templates") { + setTemplateDocuments([]); + setTemplateFolders([]); + } else { + setProjects([]); + } + } finally { + loadingTabsRef.current = { + ...loadingTabsRef.current, + [tab]: false, + }; + setLoadingTabs((prev) => ({ ...prev, [tab]: false })); + } + }, + [enabled], + ); useEffect(() => { if (!enabled) return; + let cancelled = false; + queueMicrotask(() => { + if (cancelled) return; + void loadTab(initialTab); + }); - const now = Date.now(); - if (cache && now - cache.fetchedAt < CACHE_TTL_MS) { - setStandaloneDocuments(cache.standaloneDocuments); - setProjects(cache.projects); - setLoading(false); - return; - } + return () => { + cancelled = true; + }; + }, [enabled, initialTab, loadTab]); - setLoading(true); - Promise.all([listProjects(), listStandaloneDocuments()]) - .then(([ps, ds]) => { - const sorted = [...ds].sort((a, b) => - (b.created_at ?? "").localeCompare(a.created_at ?? ""), - ); - return Promise.all(ps.map((p) => getProject(p.id))).then( - (fullProjects) => { - const projectCounts = new Map( - ps.map((p) => [p.id, p.document_count ?? 0]), - ); - const projectsWithCounts = fullProjects.map((project) => ({ - ...project, - document_count: - project.documents?.length ?? - projectCounts.get(project.id) ?? - 0, - })); - cache = { - standaloneDocuments: sorted, - projects: projectsWithCounts, - fetchedAt: Date.now(), - }; - setStandaloneDocuments(sorted); - setProjects(projectsWithCounts); - }, - ); - }) - .catch(() => { - setStandaloneDocuments([]); - setProjects([]); - }) - .finally(() => setLoading(false)); - }, [enabled]); - - return { loading, standaloneDocuments, projects }; + return { + loading: loadingTabs[initialTab], + loadingTabs, + standaloneDocuments, + templateDocuments, + fileFolders, + templateFolders, + projects, + loadTab, + }; } diff --git a/frontend/src/app/components/shared/views/PdfView.tsx b/frontend/src/app/components/shared/views/PdfView.tsx index 86e0f52..7dca5d2 100644 --- a/frontend/src/app/components/shared/views/PdfView.tsx +++ b/frontend/src/app/components/shared/views/PdfView.tsx @@ -3,7 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Loader2, ZoomIn, ZoomOut } from "lucide-react"; import { useFetchSingleDoc } from "@/app/hooks/useFetchSingleDoc"; -import { DocxView } from "./DocxView"; import type { CitationQuote } from "../types"; import { clearHighlights, @@ -79,11 +78,6 @@ export function PdfView({ doc?.version_id ?? null, ); - // /display returned DOCX bytes — the active version has no PDF - // rendition, so fall back to docx-preview (still applies citation - // highlighting via the same `quotes` API). - const fallbackToDocx = result?.type === "docx"; - // Track container width via ResizeObserver so re-renders fire on resize useEffect(() => { const el = scrollContainerRef.current; @@ -173,6 +167,44 @@ export function PdfView({ [], ); + // Scroll so the first highlight on `pageNum` lands at the vertical center + // of the viewer. We compute the scroll position explicitly on the scroll + // container — calling `scrollIntoView` on a child of the absolutely- + // positioned text layer can scroll just the overlay while leaving the + // canvas untouched, which is why we don't use it here. + const scrollToHighlightOnPage = useCallback((pageNum: number) => { + const pageEntry = renderedPagesRef.current[pageNum - 1]; + const scrollEl = scrollContainerRef.current; + if (!pageEntry || !scrollEl) return; + + const highlightEl = pageEntry.wrapper.querySelector<HTMLElement>( + ".pdf-text-highlight", + ); + if (highlightEl) { + const containerRect = scrollEl.getBoundingClientRect(); + const highlightRect = highlightEl.getBoundingClientRect(); + const offsetWithinContainer = highlightRect.top - containerRect.top; + const targetTop = + scrollEl.scrollTop + + offsetWithinContainer - + scrollEl.clientHeight / 2 + + highlightRect.height / 2; + scrollEl.scrollTo({ + top: Math.max(0, targetTop), + behavior: "instant" as ScrollBehavior, + }); + } else { + const wrapperRect = pageEntry.wrapper.getBoundingClientRect(); + const containerRect = scrollEl.getBoundingClientRect(); + const targetTop = + scrollEl.scrollTop + (wrapperRect.top - containerRect.top); + scrollEl.scrollTo({ + top: Math.max(0, targetTop), + behavior: "instant" as ScrollBehavior, + }); + } + }, []); + const renderPDF = useCallback( async ( doc: import("pdfjs-dist").PDFDocumentProxy, @@ -292,47 +324,9 @@ export function PdfView({ reveal(); }, - [applyHighlights], + [applyHighlights, scrollToHighlightOnPage], ); - // Scroll so the first highlight on `pageNum` lands at the vertical center - // of the viewer. We compute the scroll position explicitly on the scroll - // container — calling `scrollIntoView` on a child of the absolutely- - // positioned text layer can scroll just the overlay while leaving the - // canvas untouched, which is why we don't use it here. - function scrollToHighlightOnPage(pageNum: number) { - const pageEntry = renderedPagesRef.current[pageNum - 1]; - const scrollEl = scrollContainerRef.current; - if (!pageEntry || !scrollEl) return; - - const highlightEl = pageEntry.wrapper.querySelector<HTMLElement>( - ".pdf-text-highlight", - ); - if (highlightEl) { - const containerRect = scrollEl.getBoundingClientRect(); - const highlightRect = highlightEl.getBoundingClientRect(); - const offsetWithinContainer = highlightRect.top - containerRect.top; - const targetTop = - scrollEl.scrollTop + - offsetWithinContainer - - scrollEl.clientHeight / 2 + - highlightRect.height / 2; - scrollEl.scrollTo({ - top: Math.max(0, targetTop), - behavior: "instant" as ScrollBehavior, - }); - } else { - const wrapperRect = pageEntry.wrapper.getBoundingClientRect(); - const containerRect = scrollEl.getBoundingClientRect(); - const targetTop = - scrollEl.scrollTop + (wrapperRect.top - containerRect.top); - scrollEl.scrollTo({ - top: Math.max(0, targetTop), - behavior: "instant" as ScrollBehavior, - }); - } - } - const rehighlightQuotes = useCallback( async (list: QuoteEntry[]) => { const targetPage = await applyHighlights(list); @@ -342,7 +336,7 @@ export function PdfView({ scrollToHighlightOnPage(scrollPage); } }, - [applyHighlights], + [applyHighlights, scrollToHighlightOnPage], ); // Trackpad pinch-to-zoom (wheel + ctrlKey) @@ -459,11 +453,15 @@ export function PdfView({ renderedPagesRef.current = []; quoteListRef.current = quoteList; zoomRef.current = 1.0; - setZoom(1.0); - setNumPages(0); const list = quoteList; let cancelled = false; + queueMicrotask(() => { + if (cancelled) return; + setZoom(1.0); + setNumPages(0); + }); + (async () => { const lib = await getPdfJs(); if (cancelled) return; @@ -489,7 +487,7 @@ export function PdfView({ } }, 150); return () => clearTimeout(timer); - }, [containerWidth, renderPDF]); // eslint-disable-line react-hooks/exhaustive-deps + }, [containerWidth, renderPDF]); // Re-highlight when quotes change without full re-render useEffect(() => { @@ -530,18 +528,6 @@ export function PdfView({ } } - if (fallbackToDocx && doc?.document_id) { - return ( - <DocxView - documentId={doc.document_id} - versionId={doc.version_id ?? null} - quotes={quotes} - quoteFocusKey={quoteFocusKey} - rounded={rounded} - /> - ); - } - return ( <div className={`relative flex flex-col bg-gray-100 flex-1 overflow-hidden ${rounded ? "rounded-lg" : ""}`} diff --git a/frontend/src/app/components/tabular/NewTRModal.tsx b/frontend/src/app/components/tabular/NewTRModal.tsx index 0c690d2..fd969cb 100644 --- a/frontend/src/app/components/tabular/NewTRModal.tsx +++ b/frontend/src/app/components/tabular/NewTRModal.tsx @@ -5,8 +5,6 @@ import { Loader2, Upload } from "lucide-react"; import type { Document, Project, Workflow } from "../shared/types"; import { getProject, - listProjects, - listStandaloneDocuments, listWorkflows, uploadProjectDocument, uploadStandaloneDocument, @@ -57,16 +55,10 @@ export function NewTRModal({ const [projectDocs, setProjectDocs] = useState<Document[]>([]); const [loadingDocs, setLoadingDocs] = useState(false); - // Full directory (when underProject is false) - const [standaloneDocs, setStandaloneDocs] = useState<Document[]>([]); - const [directoryProjects, setDirectoryProjects] = useState<Project[]>( + const [extraStandaloneDocs, setExtraStandaloneDocs] = useState<Document[]>( [], ); - const [loadingDirectory, setLoadingDirectory] = useState(false); - - const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>( - new Set(), - ); + const [selectedDocuments, setSelectedDocuments] = useState<Document[]>([]); const [uploading, setUploading] = useState(false); const fileInputRef = useRef<HTMLInputElement>(null); @@ -109,33 +101,8 @@ export function NewTRModal({ .finally(() => setLoadingWorkflows(false)); if (isProjectMode) { - setSelectedDocIds( - new Set((fixedProjectDocs ?? []).map((d) => d.id)), - ); - return; + setSelectedDocuments(fixedProjectDocs ?? []); } - - setLoadingDirectory(true); - // /projects only returns counts, not the documents array — fetch - // each project in parallel so FileDirectory can render the docs - // when the user expands a folder. - Promise.all([listStandaloneDocuments(), listProjects()]) - .then(async ([docs, projs]) => { - setStandaloneDocs( - [...docs].sort((a, b) => - (b.created_at ?? "").localeCompare(a.created_at ?? ""), - ), - ); - const fullProjects = await Promise.all( - projs.map((p) => getProject(p.id)), - ); - setDirectoryProjects(fullProjects); - }) - .catch(() => { - setStandaloneDocs([]); - setDirectoryProjects([]); - }) - .finally(() => setLoadingDirectory(false)); }, [open]); // eslint-disable-line react-hooks/exhaustive-deps if (!open) return null; @@ -146,9 +113,8 @@ export function NewTRModal({ setUnderProject(false); setSelectedProjectId(""); setProjectDocs([]); - setStandaloneDocs([]); - setDirectoryProjects([]); - setSelectedDocIds(new Set()); + setExtraStandaloneDocs([]); + setSelectedDocuments([]); setSelectedWorkflowId(null); onClose(); } @@ -175,7 +141,9 @@ export function NewTRModal({ onAdd( title.trim(), underProject ? selectedProjectId : undefined, - selectedDocIds.size > 0 ? [...selectedDocIds] : undefined, + selectedDocuments.length > 0 + ? selectedDocuments.map((document) => document.id) + : undefined, selectedWorkflow?.columns_config ?? undefined, ); handleClose(); @@ -184,7 +152,7 @@ export function NewTRModal({ async function handleSelectProject(projectId: string) { setSelectedProjectId(projectId); setProjectDocs([]); - setSelectedDocIds(new Set()); + setSelectedDocuments([]); setLoadingDocs(true); try { const proj = await getProject(projectId); @@ -192,7 +160,7 @@ export function NewTRModal({ (d) => d.status === "ready", ); setProjectDocs(docs); - setSelectedDocIds(new Set(docs.map((d) => d.id))); + setSelectedDocuments(docs); } finally { setLoadingDocs(false); } @@ -213,11 +181,15 @@ export function NewTRModal({ if (underProject && selectedProjectId) { setProjectDocs((prev) => [...uploaded, ...prev]); } else { - setStandaloneDocs((prev) => [...uploaded, ...prev]); + setExtraStandaloneDocs((prev) => [...uploaded, ...prev]); } - uploaded.forEach((d) => - setSelectedDocIds((prev) => new Set([...prev, d.id])), - ); + setSelectedDocuments((prev) => [ + ...prev, + ...uploaded.filter( + (document) => + !prev.some((selected) => selected.id === document.id), + ), + ]); } catch (err) { console.error("Upload failed:", err); } finally { @@ -248,23 +220,16 @@ export function NewTRModal({ : [{ value: "", label: "No projects found" }]; // What to show in the directory depends on mode and toggle state - const directoryStandalone = isProjectMode + const directoryDocuments = isProjectMode ? (fixedProjectDocs ?? []) : underProject - ? [] - : standaloneDocs; - const directoryFolders = isProjectMode - ? [] - : underProject - ? [] - : directoryProjects; - const flatProjectDocs: Document[] = - !isProjectMode && underProject ? projectDocs : []; + ? projectDocs + : extraStandaloneDocs; const directoryLoading = isProjectMode ? false : underProject ? loadingDocs - : loadingDirectory; + : false; const showDirectory = isProjectMode || !underProject || !!selectedProjectId; const breadcrumbs = isProjectMode && projectName @@ -392,7 +357,7 @@ export function NewTRModal({ if (!next) { setSelectedProjectId(""); setProjectDocs([]); - setSelectedDocIds(new Set()); + setSelectedDocuments([]); } }} className="flex w-fit items-center gap-2.5" @@ -430,31 +395,11 @@ export function NewTRModal({ <div className="flex min-h-0 flex-1 flex-col"> {showDirectory && ( <FileDirectory - standaloneDocs={ - isProjectMode - ? directoryStandalone - : underProject - ? flatProjectDocs - : directoryStandalone - } - directoryProjects={ - isProjectMode - ? [] - : underProject - ? [] - : directoryFolders - } + documents={directoryDocuments} loading={directoryLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - emptyMessage={ - isProjectMode || underProject - ? "No ready documents in this project" - : "No documents yet" - } - searchable - searchAutoFocus - showProjectTabs={!isProjectMode && !underProject} + selectedDocuments={selectedDocuments} + onChange={setSelectedDocuments} + showTabs={!isProjectMode && !underProject} /> )} </div> diff --git a/frontend/src/app/components/tabular/TRChatPanel.tsx b/frontend/src/app/components/tabular/TRChatPanel.tsx index be9af54..b7c6d83 100644 --- a/frontend/src/app/components/tabular/TRChatPanel.tsx +++ b/frontend/src/app/components/tabular/TRChatPanel.tsx @@ -1,17 +1,19 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState, type CSSProperties } from "react"; +import { createPortal } from "react-dom"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { - Clock, - MessageSquarePlus, + MoreHorizontal, + Pencil, + Plus, Search, Square, ArrowRight, ChevronDown, - ChevronLeft, Trash2, + X, } from "lucide-react"; import { MikeIcon } from "@/app/components/chat/mike-icon"; import { @@ -19,6 +21,7 @@ import { getTabularChats, getTabularChatMessages, deleteTabularChat, + renameTabularChat, mapTRMessages, type TRChat, type TRCitationAnnotation, @@ -27,6 +30,11 @@ import type { AssistantEvent, ColumnConfig, Document } from "../shared/types"; import { ModelToggle } from "../assistant/ModelToggle"; import { ApiKeyMissingPopup } from "../popups/ApiKeyMissingPopup"; import { PreResponseWrapper } from "../assistant/PreResponseWrapper"; +import { + DocReadBlock, + EventBlock, + ReasoningBlock, +} from "../assistant/message/EventBlocks"; import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { getModelProvider, @@ -34,6 +42,11 @@ import { type ModelProvider, } from "@/app/lib/modelAvailability"; import type { ApiKeyState } from "@/app/lib/mikeApi"; +import { LIQUID_PANEL_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; +import { + LiquidDropdownButton, + LiquidDropdownSurface, +} from "@/app/components/ui/liquid-dropdown"; import { cn } from "@/app/lib/utils"; // --------------------------------------------------------------------------- @@ -112,165 +125,6 @@ interface Props { onChatIdChange?: (chatId: string | null) => void; } -// --------------------------------------------------------------------------- -// Reasoning block -// --------------------------------------------------------------------------- - -const THINKING_PHRASES = [ - "Thinking...", - "Pondering...", - "Analyzing...", - "Reasoning...", -]; -const REASONING_COLLAPSED_MAX_LINES = 6; -const REASONING_COLLAPSED_MAX_HEIGHT_REM = 9; - -function ReasoningBlock({ - text, - isStreaming, -}: { - text: string; - isStreaming: boolean; -}) { - const [isOpen, setIsOpen] = useState(false); - const [userToggled, setUserToggled] = useState(false); - const [isOverflowing, setIsOverflowing] = useState(false); - const [hasMeasured, setHasMeasured] = useState(false); - const [phraseIdx, setPhraseIdx] = useState(0); - const contentRef = useRef<HTMLDivElement | null>(null); - - useEffect(() => { - if (!isStreaming) return; - const interval = setInterval( - () => setPhraseIdx((i) => (i + 1) % THINKING_PHRASES.length), - 2000, - ); - return () => clearInterval(interval); - }, [isStreaming]); - - useEffect(() => { - const el = contentRef.current; - if (!el) return; - const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 24; - const maxHeight = lineHeight * REASONING_COLLAPSED_MAX_LINES; - const nextOverflowing = el.scrollHeight > maxHeight + 2; - setIsOverflowing(nextOverflowing); - setHasMeasured(true); - if (nextOverflowing && !userToggled) setIsOpen(false); - }, [text, userToggled]); - - const showContent = isOpen || isStreaming || isOverflowing || !hasMeasured; - const isCollapsed = isOverflowing && !isOpen; - - return ( - <div className="ml-1"> - <button - onClick={() => { - if (isStreaming) return; - setUserToggled(true); - setIsOpen((v) => !v); - }} - className="flex items-center text-sm text-gray-400 hover:text-gray-500 transition-colors" - > - {isStreaming ? ( - <div className="w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div className="w-1.5 h-1.5 rounded-full bg-gray-300 shrink-0" /> - )} - <span className="font-medium ml-2"> - {isStreaming - ? THINKING_PHRASES[phraseIdx] - : "Thought process"} - </span> - {!isStreaming && ( - <ChevronDown - size={10} - className={`ml-1.5 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`} - /> - )} - </button> - {showContent && ( - <div className="mt-1.5 ml-[14px]"> - <div - className={`relative ${isCollapsed ? "overflow-hidden" : ""}`} - style={ - isCollapsed - ? { - maxHeight: `${REASONING_COLLAPSED_MAX_HEIGHT_REM}rem`, - } - : undefined - } - > - <div - ref={contentRef} - className="text-sm text-gray-400 prose prose-sm max-w-none [&>*]:text-gray-400 [&>*]:text-sm" - > - <ReactMarkdown remarkPlugins={[remarkGfm]}> - {text} - </ReactMarkdown> - </div> - {isCollapsed && ( - <> - <div className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-white/0 to-white" /> - <button - type="button" - onClick={() => { - setUserToggled(true); - setIsOpen(true); - }} - className="absolute left-1/2 bottom-2 z-10 -translate-x-1/2 text-gray-400 transition-colors hover:text-gray-600" - aria-label="Expand thought process" - > - <ChevronDown className="h-3.5 w-3.5" /> - </button> - </> - )} - </div> - {isOverflowing && isOpen && ( - <button - type="button" - onClick={() => { - setUserToggled(true); - setIsOpen(false); - }} - className="mx-auto mt-2 flex text-gray-400 transition-colors hover:text-gray-600" - aria-label="Minimise thought process" - > - <ChevronDown className="h-3.5 w-3.5 rotate-180" /> - </button> - )} - </div> - )} - </div> - ); -} - -// --------------------------------------------------------------------------- -// DocRead block -// --------------------------------------------------------------------------- - -function DocReadBlock({ - label, - isStreaming, -}: { - label: string; - isStreaming?: boolean; -}) { - return ( - <div className="flex items-center text-sm text-gray-400 ml-1"> - {isStreaming ? ( - <div className="w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - ) : ( - <div className="w-1.5 h-1.5 rounded-full bg-green-400 shrink-0" /> - )} - <span className="font-medium ml-2"> - {isStreaming ? "Reading" : "Read"} - </span> - <span className="ml-1 text-gray-500">{label}</span> - </div> - ); -} - // --------------------------------------------------------------------------- // Citation preprocessing (matches AssistantMessage.tsx pattern) // --------------------------------------------------------------------------- @@ -392,13 +246,23 @@ function TRAssistantMessage({ return false; }; - const renderPreEvent = (event: AssistantEvent, key: number) => { + const renderPreEvent = ( + event: AssistantEvent, + index: number, + allEvents: AssistantEvent[], + key: number, + ) => { + const nextEvent = allEvents[index + 1]; + const showConnector = + nextEvent !== undefined && nextEvent.type !== "content"; + if (event.type === "reasoning") { return ( <ReasoningBlock key={key} text={event.text} isStreaming={!!event.isStreaming && !!msg.isStreaming} + showConnector={showConnector} /> ); } @@ -406,20 +270,22 @@ function TRAssistantMessage({ return ( <DocReadBlock key={key} - label={event.filename} + filename={event.filename} isStreaming={event.isStreaming} + showConnector={showConnector} + showFileIcon={false} /> ); } if (event.type === "thinking") { return ( - <div + <EventBlock key={key} - className="flex items-center text-sm text-gray-400 ml-1" + showConnector={showConnector} + isStreaming > - <div className="w-1.5 h-1.5 rounded-full border border-gray-400 border-t-transparent animate-spin shrink-0" /> - <span className="ml-2">Thinking...</span> - </div> + <span>Thinking...</span> + </EventBlock> ); } return null; @@ -521,7 +387,12 @@ function TRAssistantMessage({ compact > {g.events.map((event, i) => - renderPreEvent(event, g.indices[i]), + renderPreEvent( + event, + i, + g.events, + g.indices[i], + ), )} </PreResponseWrapper> ); @@ -626,20 +497,20 @@ function TRChatInput({ <div ref={rootRef} className={cn( - "absolute bottom-0 left-0 right-0 px-4 pb-3", + "absolute bottom-0 left-0 right-0 z-10 px-3 pb-3", "bg-transparent", )} > <div className={cn( "pt-2 pb-1.5 flex flex-col gap-1", - "rounded-[18px] border border-white/65 bg-white/60 shadow-[0_6px_18px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.85),inset_0_-6px_14px_rgba(255,255,255,0.18)] backdrop-blur-2xl", + "rounded-xl border border-white/65 bg-white/60 shadow-[0_4px_10px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.85),inset_0_-6px_14px_rgba(255,255,255,0.18)] backdrop-blur-2xl", )} > <textarea ref={textareaRef} rows={1} - placeholder="Ask a question about your documents..." + placeholder="How can I help?" value={value} onChange={(e) => { setValue(e.target.value); @@ -653,7 +524,7 @@ function TRChatInput({ }} className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-gray-400 leading-6 max-h-48 overflow-hidden border-0 p-0 pl-3 pr-2 pt-0.5" /> - <div className="flex items-center justify-between pl-1 pr-2"> + <div className="flex items-center justify-end gap-1.5 pl-1 pr-2"> <ModelToggle value={model} onChange={onModelChange} @@ -692,12 +563,23 @@ function HistoryDropdown({ chats, currentChatId, onLoad, + onRename, + onDelete, }: { chats: TRChat[]; currentChatId: string | null; onLoad: (chatId: string) => void; + onRename: (chatId: string, title: string) => void; + onDelete: (chatId: string) => void; }) { const [query, setQuery] = useState(""); + const [menu, setMenu] = useState<{ + chatId: string; + top: number; + left: number; + } | null>(null); + const [renamingChatId, setRenamingChatId] = useState<string | null>(null); + const [renameValue, setRenameValue] = useState(""); const filtered = chats .filter((c) => c.id !== currentChatId) .filter((c) => { @@ -705,9 +587,15 @@ function HistoryDropdown({ return label.toLowerCase().includes(query.toLowerCase()); }); + function commitRename(chatId: string) { + const trimmed = renameValue.trim(); + setRenamingChatId(null); + if (trimmed) onRename(chatId, trimmed); + } + return ( <> - <div className="flex items-center gap-1.5 px-2 py-1.5 border-b border-gray-100"> + <div className="flex items-center gap-1.5 px-3 py-2 border-b border-white/40"> <Search className="h-3 w-3 text-gray-400 shrink-0" /> <input autoFocus @@ -718,9 +606,12 @@ function HistoryDropdown({ className="flex-1 text-xs bg-transparent outline-none placeholder:text-gray-400 text-gray-700" /> </div> - <div className="max-h-48 overflow-y-auto"> + <div + className="max-h-48 overflow-y-auto p-1" + onScroll={() => setMenu(null)} + > {filtered.length === 0 ? ( - <p className="px-3 py-2 text-xs text-gray-400"> + <p className="px-2 py-1.5 text-xs text-gray-400"> {chats.filter((c) => c.id !== currentChatId).length === 0 ? "No previous chats." @@ -729,14 +620,102 @@ function HistoryDropdown({ ) : ( filtered.map((chat) => { const label = chat.title ?? "Chat"; + if (renamingChatId === chat.id) { + return ( + <input + key={chat.id} + autoFocus + type="text" + value={renameValue} + onChange={(e) => + setRenameValue(e.target.value) + } + onKeyDown={(e) => { + if (e.key === "Enter") + commitRename(chat.id); + if (e.key === "Escape") + setRenamingChatId(null); + }} + onBlur={() => commitRename(chat.id)} + className="w-full rounded-lg bg-app-surface-active px-2 py-1.5 text-xs text-gray-700 outline-none" + /> + ); + } return ( - <button + <div key={chat.id} - onClick={() => onLoad(chat.id)} - className="w-full px-3 py-2 text-left text-xs text-gray-700 hover:bg-gray-50 transition-colors truncate" + className="group relative flex items-center" > - {label} - </button> + <LiquidDropdownButton + onClick={() => onLoad(chat.id)} + className="w-full min-w-0 rounded-lg px-2 py-1.5 pr-7 text-left truncate" + > + {label} + </LiquidDropdownButton> + <button + onClick={(e) => { + e.stopPropagation(); + const rect = + e.currentTarget.getBoundingClientRect(); + setMenu((v) => + v?.chatId === chat.id + ? null + : { + chatId: chat.id, + top: rect.bottom + 4, + left: rect.right - 112, + }, + ); + }} + title="Chat options" + className={cn( + "absolute right-1.5 flex h-5 w-5 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-app-surface-hover hover:text-gray-700", + menu?.chatId === chat.id + ? "opacity-100" + : "opacity-0 group-hover:opacity-100", + )} + > + <MoreHorizontal className="h-3.5 w-3.5" /> + </button> + {menu?.chatId === chat.id && + createPortal( + <LiquidDropdownSurface + onMouseDown={(e) => + e.stopPropagation() + } + className="fixed z-[130] w-28 p-1" + style={{ + top: menu.top, + left: menu.left, + }} + > + <LiquidDropdownButton + onClick={() => { + setMenu(null); + setRenameValue( + chat.title ?? "", + ); + setRenamingChatId(chat.id); + }} + className="flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left" + > + <Pencil className="h-3 w-3" /> + Rename + </LiquidDropdownButton> + <LiquidDropdownButton + onClick={() => { + setMenu(null); + onDelete(chat.id); + }} + className="flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-red-600 hover:text-red-600 focus:text-red-600" + > + <Trash2 className="h-3 w-3" /> + Delete + </LiquidDropdownButton> + </LiquidDropdownSurface>, + document.body, + )} + </div> ); }) )} @@ -756,6 +735,15 @@ function findLastContentIndex(events: AssistantEvent[]): number { return -1; } +// --------------------------------------------------------------------------- +// Header pills (matches PageHeader action group styling) +// --------------------------------------------------------------------------- + +const HEADER_PILL_CLASS = + "flex shrink-0 items-center gap-1 rounded-full border border-white/70 bg-app-surface px-1 py-0.5 shadow-[0_8px_24px_rgba(15,23,42,0.06)] backdrop-blur-2xl"; +const HEADER_PILL_BUTTON_CLASS = + "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-app-surface-hover hover:text-gray-900"; + // --------------------------------------------------------------------------- // Main component // --------------------------------------------------------------------------- @@ -793,12 +781,20 @@ export function TRChatPanel({ const [isResizing, setIsResizing] = useState(false); const [inputHeight, setInputHeight] = useState(96); + const resizeStartRef = useRef({ x: 0, width: 380 }); + useEffect(() => { if (!isResizing) return; const MIN_WIDTH = 280; const MAX_WIDTH = 800; function onMove(e: MouseEvent) { - setPanelWidth(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, e.clientX))); + const delta = resizeStartRef.current.x - e.clientX; + setPanelWidth( + Math.min( + MAX_WIDTH, + Math.max(MIN_WIDTH, resizeStartRef.current.width + delta), + ), + ); } function onUp() { setIsResizing(false); @@ -1084,15 +1080,27 @@ export function TRChatPanel({ setHistoryOpen(false); } - async function handleDeleteChat() { - if (!currentChatId) return; - const chatIdToDelete = currentChatId; - setChats((prev) => prev.filter((c) => c.id !== chatIdToDelete)); - setCurrentChatId(null); - setCurrentChatTitle(null); - setMessages([]); + async function handleDeleteChat(chatId: string) { + setChats((prev) => prev.filter((c) => c.id !== chatId)); + if (chatId === currentChatId) { + setCurrentChatId(null); + setCurrentChatTitle(null); + setMessages([]); + } try { - await deleteTabularChat(reviewId, chatIdToDelete); + await deleteTabularChat(reviewId, chatId); + } catch { + /* ignore */ + } + } + + async function handleRenameChat(chatId: string, title: string) { + setChats((prev) => + prev.map((c) => (c.id === chatId ? { ...c, title } : c)), + ); + if (chatId === currentChatId) setCurrentChatTitle(title); + try { + await renameTabularChat(reviewId, chatId, title); } catch { /* ignore */ } @@ -1751,109 +1759,99 @@ export function TRChatPanel({ return ( <div - style={{ width: panelWidth }} + style={ + { + "--tr-chat-panel-width": `${panelWidth}px`, + } as CSSProperties + } className={cn( - "shrink-0 flex flex-col border-r border-gray-200 h-full relative", - "bg-transparent", + "flex flex-col relative", + // Mobile: replaces the table, filling the row minus margins. + // md+: fixed width beside the table, top-aligned with it + // (below the toolbar). + "flex-1 min-w-0 mx-3 mb-3 md:flex-none md:w-[var(--tr-chat-panel-width)] md:mt-12 md:-ml-4 md:mr-6", + LIQUID_PANEL_SURFACE_CLASS, + "overflow-hidden", )} > {/* Resize handle */} <div onMouseDown={(e) => { e.preventDefault(); + resizeStartRef.current = { x: e.clientX, width: panelWidth }; setIsResizing(true); }} - className={`absolute top-0 right-0 h-full w-1 cursor-col-resize z-20 transition-colors ${ + className={`absolute top-0 left-0 h-full w-1 cursor-col-resize z-20 transition-colors hidden md:block ${ isResizing - ? "bg-blue-500" - : "bg-transparent hover:bg-blue-500" + ? "bg-blue-400/70" + : "bg-transparent hover:bg-blue-400/70" }`} /> - {/* Header */} - <div className="flex items-center justify-between h-8 pr-2 border-b border-gray-200 shrink-0"> - <div className="flex items-center gap-1 pl-2 pr-2 min-w-0"> - <button - onClick={onClose} - title="Close" - className="flex items-center justify-center h-7 w-7 shrink-0 rounded-md text-gray-600 hover:text-gray-900 transition-colors" - > - <ChevronLeft className="h-3.5 w-3.5" /> - </button> - <div - onMouseEnter={(e) => { - const el = e.currentTarget; - const overflow = el.scrollWidth - el.clientWidth; - if (overflow > 0) - el.scrollTo({ - left: overflow, - behavior: "smooth", - }); - }} - onMouseLeave={(e) => { - e.currentTarget.scrollTo({ - left: 0, - behavior: "smooth", - }); - }} - className="min-w-0 overflow-x-hidden whitespace-nowrap scrollbar-none" - > - <span className="text-xs font-medium text-gray-700"> - {currentChatTitle ?? "New chat"} - </span> - </div> - </div> - <div className="flex items-center"> - <div ref={historyRef} className="relative"> + {/* Header — fixed, overlaid on top of the messages */} + <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between gap-2 px-2 py-2"> + {/* Title pill — opens chat history */} + <div ref={historyRef} className="relative shrink min-w-0"> + <div className={cn(HEADER_PILL_CLASS, "min-w-0")}> <button onClick={() => setHistoryOpen((v) => !v)} title="Chat history" - className={`flex items-center justify-center h-7 w-7 rounded-md transition-colors ${historyOpen ? "text-gray-900" : "text-gray-600 hover:text-gray-900"}`} + className="flex h-5 min-w-0 items-center gap-1 rounded-full px-1.5 text-gray-700 transition-colors hover:bg-app-surface-hover" > - <Clock className="h-3.5 w-3.5" /> + <span className="min-w-0 truncate text-xs font-medium"> + {currentChatTitle ?? "New chat"} + </span> + <ChevronDown + className={cn( + "h-3 w-3 shrink-0 text-gray-400 transition-transform duration-200", + historyOpen && "rotate-180", + )} + /> </button> - {historyOpen && ( - <div className="absolute top-full right-0 mt-1 w-64 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> - <HistoryDropdown - chats={chats} - currentChatId={currentChatId} - onLoad={handleLoadChat} - /> - </div> - )} </div> - <button - onClick={handleNewChat} - title="New chat" - className="flex items-center justify-center h-7 w-7 rounded-md text-gray-600 hover:text-gray-900 transition-colors" - > - <MessageSquarePlus className="h-3.5 w-3.5" /> - </button> - {currentChatId && ( - <button - onClick={handleDeleteChat} - title="Delete chat" - className="flex items-center justify-center h-7 w-7 rounded-md text-gray-600 hover:text-red-600 transition-colors" - > - <Trash2 className="h-3.5 w-3.5" /> - </button> + {historyOpen && ( + <LiquidDropdownSurface className="absolute top-full left-0 z-50 mt-2 w-64 overflow-hidden"> + <HistoryDropdown + chats={chats} + currentChatId={currentChatId} + onLoad={handleLoadChat} + onRename={handleRenameChat} + onDelete={handleDeleteChat} + /> + </LiquidDropdownSurface> )} </div> + <div className="flex shrink-0 items-center gap-1.5"> + {/* New chat circle — only once a chat has started */} + {messages.length > 0 && ( + <div className={cn(HEADER_PILL_CLASS, "px-0.5")}> + <button + onClick={handleNewChat} + title="New chat" + className={HEADER_PILL_BUTTON_CLASS} + > + <Plus className="h-3.5 w-3.5" /> + </button> + </div> + )} + {/* Close circle */} + <div className={cn(HEADER_PILL_CLASS, "px-0.5")}> + <button + onClick={onClose} + title="Close" + className={HEADER_PILL_BUTTON_CLASS} + > + <X className="h-3.5 w-3.5" /> + </button> + </div> + </div> </div> {/* Messages */} <div ref={messagesContainerRef} - className="flex-1 overflow-y-auto px-4 pt-4 flex flex-col" + className="flex-1 overflow-y-auto px-4 pt-12 flex flex-col" style={{ paddingBottom: Math.ceil(inputHeight + 16) }} > - {messages.length === 0 && !isLoadingMessages && ( - <div className="flex flex-1 flex-col items-center justify-center gap-2"> - <MikeIcon size={24} /> - <p className="text-gray-400 font-serif text-center"> - Ask a question about this tabular review. - </p> - </div> - )} {isLoadingMessages && ( <div className="flex flex-col gap-4"> <div className="flex justify-end"> @@ -1900,6 +1898,12 @@ export function TRChatPanel({ )} </div> + {/* Top blur overlay — messages fade out under the header */} + <div className="pointer-events-none absolute top-0 left-0 right-2 z-[5] h-10 backdrop-blur-2xl bg-gradient-to-b from-white/80 to-transparent [mask-image:linear-gradient(to_bottom,black_65%,transparent)]" /> + + {/* Bottom blur overlay — messages fade out under the input */} + <div className="pointer-events-none absolute bottom-0 left-0 right-2 z-[5] h-32 backdrop-blur-2xl bg-gradient-to-t from-white/80 to-transparent [mask-image:linear-gradient(to_top,black_65%,transparent)]" /> + {/* Input */} <TRChatInput isLoading={isLoading} diff --git a/frontend/src/app/components/tabular/TREditColumnMenu.tsx b/frontend/src/app/components/tabular/TREditColumnMenu.tsx index 0edb226..9973ad7 100644 --- a/frontend/src/app/components/tabular/TREditColumnMenu.tsx +++ b/frontend/src/app/components/tabular/TREditColumnMenu.tsx @@ -9,11 +9,13 @@ import { FORMAT_OPTIONS, formatLabel, formatIcon } from "./columnFormat"; import { TAG_COLORS } from "./pillUtils"; import { DropdownMenu, - DropdownMenuContent, DropdownMenuRadioGroup, - DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/app/components/ui/dropdown-menu"; +import { + LiquidDropdownContent, + LiquidDropdownRadioItem, +} from "@/app/components/ui/liquid-dropdown"; import { PillButton } from "@/app/components/ui/pill-button"; // Liquid-glass field styling shared by the menu's inputs/controls, matching the @@ -287,9 +289,9 @@ export function TREditColumnMenu({ <ChevronDown className="h-3 w-3 text-gray-400" /> </button> </DropdownMenuTrigger> - <DropdownMenuContent + <LiquidDropdownContent align="start" - className="z-[50] border-white/70 bg-white/75 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl" + className="z-[50]" style={{ width: "var(--radix-dropdown-menu-trigger-width)", }} @@ -303,17 +305,17 @@ export function TREditColumnMenu({ }} > {FORMAT_OPTIONS.map((o) => ( - <DropdownMenuRadioItem + <LiquidDropdownRadioItem key={o.value} value={o.value} className="text-xs" > <o.icon className="h-3 w-3 text-gray-400" /> {o.label} - </DropdownMenuRadioItem> + </LiquidDropdownRadioItem> ))} </DropdownMenuRadioGroup> - </DropdownMenuContent> + </LiquidDropdownContent> </DropdownMenu> </div> @@ -397,8 +399,9 @@ export function TREditColumnMenu({ > Delete </PillButton> - <button - type="button" + <PillButton + tone="black" + size="sm" onClick={handleSave} disabled={ saving || @@ -407,10 +410,10 @@ export function TREditColumnMenu({ !name.trim() || !prompt.trim() } - className="rounded-full border border-gray-700/40 bg-gray-950/88 px-3 py-1 text-xs font-medium text-white shadow-[0_3px_9px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl transition-colors hover:bg-gray-900/90 disabled:opacity-40" + className="px-3" > {saving ? "Saving…" : "Save"} - </button> + </PillButton> </div> </div>, document.body, diff --git a/frontend/src/app/components/tabular/TRSidePanel.tsx b/frontend/src/app/components/tabular/TRSidePanel.tsx index e6d6412..23b6e8b 100644 --- a/frontend/src/app/components/tabular/TRSidePanel.tsx +++ b/frontend/src/app/components/tabular/TRSidePanel.tsx @@ -24,6 +24,7 @@ import { PdfView } from "../shared/views/PdfView"; import { SpreadsheetView } from "../shared/views/SpreadsheetView"; import { DocxView } from "../shared/views/DocxView"; import { cn } from "@/app/lib/utils"; +import { LIQUID_PANEL_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; function isDocxDocument(d: { file_type?: string | null; @@ -120,7 +121,8 @@ export function TRSidePanel({ <div className={cn( "fixed z-100 flex flex-row", - "right-3 top-3 bottom-3 overflow-hidden rounded-2xl border border-white/70 bg-white/20 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18),inset_1px_0_0_rgba(255,255,255,0.5)] backdrop-blur-2xl", + LIQUID_PANEL_SURFACE_CLASS, + "right-3 top-3 bottom-3 overflow-hidden", )} > {/* Document panel — left, 600px */} diff --git a/frontend/src/app/components/tabular/TRTable.tsx b/frontend/src/app/components/tabular/TRTable.tsx index 6f528e8..35e0aa4 100644 --- a/frontend/src/app/components/tabular/TRTable.tsx +++ b/frontend/src/app/components/tabular/TRTable.tsx @@ -1,7 +1,12 @@ "use client"; -import { forwardRef, useImperativeHandle, useRef, useState } from "react"; -import { Loader2, Plus, Table2, Upload } from "lucide-react"; +import { + forwardRef, + useImperativeHandle, + useRef, + useState, +} from "react"; +import { Loader2, Plus, Upload } from "lucide-react"; import type { ColumnConfig, Document, @@ -13,13 +18,19 @@ import { TABLE_CHECKBOX_CLASS, SkeletonDot, SkeletonLine, + TableScrollArea, } from "../shared/TablePrimitive"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { TabularReviewSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; const SKELETON_COLS = 4; const SKELETON_ROWS = 5; const COL_W = "w-[300px] shrink-0"; const DOC_COL_W = "w-[332px] shrink-0"; +const TR_STICKY_CELL_BG = "bg-app-surface"; +const TR_HEADER_BG = "bg-app-surface"; +const TR_ACTIVE_ROW_BG = "bg-app-surface-active"; // Pixel widths matching the CSS constants above const DOC_COL_W_PX = 332; @@ -72,20 +83,11 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( }, ref, ) { - const stickyCellBg = "bg-[#fafbfc]"; const scrollContainerRef = useRef<HTMLDivElement>(null); - const headerRef = useRef<HTMLDivElement>(null); const lastScrollLeftRef = useRef(0); const [scrollCloseSignal, setScrollCloseSignal] = useState(0); - function syncHeader() { - if (headerRef.current && scrollContainerRef.current) { - headerRef.current.scrollLeft = scrollContainerRef.current.scrollLeft; - } - } - function handleRowsScroll() { - syncHeader(); const container = scrollContainerRef.current; if (!container) return; @@ -157,17 +159,16 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( if (loading) { return ( - <div className="flex flex-1 flex-col overflow-hidden"> - {/* Header */} - <div className="shrink-0 overflow-hidden"> + <TableScrollArea + header={ <div - className={`flex h-8 ${stickyCellBg}`} + className={`flex h-10 shrink-0 ${TR_HEADER_BG}`} style={{ minWidth: skeletonContentWidth }} > <div - className={`${DOC_COL_W} flex items-center gap-4 border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500`} + className={`sticky left-0 z-[80] ${DOC_COL_W} ${TR_STICKY_CELL_BG} flex items-center border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500`} > - <SkeletonDot /> + <SkeletonDot className="mr-4" /> <span>Document</span> </div> {Array.from({ length: SKELETON_COLS }).map((_, i) => ( @@ -180,17 +181,16 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( ))} <div className="flex-1 border-b border-gray-200 min-w-8" /> </div> - </div> - {/* Rows */} - <div className="flex flex-1 flex-col overflow-auto min-h-0"> + } + > {Array.from({ length: SKELETON_ROWS }).map((_, row) => ( <div key={row} - className={`flex h-10 ${row % 2 === 0 ? stickyCellBg : "bg-gray-50"}`} + className="flex h-10" style={{ minWidth: skeletonContentWidth }} > - <div className={`${DOC_COL_W} flex items-center gap-4 border-b border-r border-gray-200 py-2 pl-4 pr-2`}> - <SkeletonDot /> + <div className={`sticky left-0 z-[60] ${DOC_COL_W} ${TR_STICKY_CELL_BG} flex items-center border-b border-r border-gray-200 py-2 pl-4 pr-2`}> + <SkeletonDot className="mr-4" /> <SkeletonLine className="h-4 w-32" /> </div> {Array.from({ length: SKELETON_COLS }).map((_, col) => ( @@ -204,8 +204,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( <div className="flex-1 border-b border-gray-200 min-w-8" /> </div> ))} - </div> - </div> + </TableScrollArea> ); } @@ -215,21 +214,24 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( uploadingFilenames.length === 0 ) { return ( - <div className="flex flex-1 flex-col overflow-hidden"> - <div className={`shrink-0 flex items-center border-b border-gray-200 ${stickyCellBg}`}> - <div - className={`${DOC_COL_W} border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500 select-none`} - > - Document + <TableScrollArea + header={ + <div className={`shrink-0 flex h-10 items-center border-b border-gray-200 ${TR_HEADER_BG}`}> + <div + className={`${DOC_COL_W} ${TR_STICKY_CELL_BG} flex items-center border-r border-gray-200 py-2 pl-4 pr-2 text-xs font-medium text-gray-500 select-none`} + > + Document + </div> + <div className="flex-1" /> </div> - <div className="flex-1" /> - </div> + } + > <div className="relative flex min-h-0 flex-1"> {dragOverFiles && ( <div className="absolute inset-0 z-[90] border-2 border-blue-400 bg-blue-50/40 pointer-events-none" /> )} <div className="flex flex-1 flex-col items-start justify-center w-full max-w-xs mx-auto"> - <Table2 className="h-8 w-8 text-gray-300 mb-4" /> + <TabularReviewSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Tabular Review </p> @@ -237,36 +239,42 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( Add columns and documents to get started. </p> <div className="mt-4 flex items-center gap-2"> - <button + <PillButton + tone="black" + size="sm" onClick={onAddColumn} - className="inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-gray-700 shadow-md" + className="px-3" > - + Add Columns - </button> - <button + <Plus className="h-3.5 w-3.5" /> + Add Columns + </PillButton> + <PillButton + tone="white" + size="sm" onClick={onAddDocuments} - className="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-600 hover:bg-gray-50 transition-colors shadow-sm" + className="px-3" > <Upload className="h-3.5 w-3.5" /> Add Documents - </button> + </PillButton> </div> </div> </div> - </div> + </TableScrollArea> ); } return ( - <div className="flex flex-1 flex-col overflow-hidden"> - {/* Header */} - <div ref={headerRef} className="shrink-0 overflow-hidden"> + <TableScrollArea + scrollRef={scrollContainerRef} + onScroll={handleRowsScroll} + header={ <div - className={`flex h-8 ${stickyCellBg}`} + className={`z-[70] flex h-10 shrink-0 ${TR_HEADER_BG}`} style={{ minWidth: totalContentWidth }} > <div - className={`sticky left-0 z-[80] ${DOC_COL_W} ${stickyCellBg} border-b border-r border-gray-200 flex items-center gap-4 py-2 pl-4 pr-2 text-left text-xs font-medium text-gray-500 select-none`} + className={`sticky left-0 z-[80] ${DOC_COL_W} ${TR_STICKY_CELL_BG} border-b border-r border-gray-200 flex items-center py-2 pl-4 pr-2 text-left text-xs font-medium text-gray-500 select-none`} > <input type="checkbox" @@ -283,9 +291,9 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( <div key={col.index} data-tr-col-header - className={`${COL_W} border-b border-r border-gray-200 p-2 text-left text-xs font-medium text-gray-500 select-none`} + className={`${COL_W} flex items-center border-b border-r border-gray-200 p-2 text-left text-xs font-medium text-gray-500 select-none`} > - <div className="flex items-center justify-between gap-3"> + <div className="flex min-w-0 flex-1 items-center justify-between gap-3"> <span className="truncate">{col.name}</span> <TREditColumnMenu column={col} @@ -307,33 +315,27 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( </button> </div> </div> - </div> - - {/* Rows */} - <div - className="flex flex-1 flex-col overflow-auto min-h-0" - ref={scrollContainerRef} - onScroll={handleRowsScroll} - > - <div className="relative min-h-0 flex-1"> - {dragOverFiles && ( - <div className="absolute inset-0 z-[90] border-2 border-blue-400 bg-blue-50/40 pointer-events-none" /> - )} - {uploadingFilenames.map((filename) => ( + } + > + <div className="relative min-h-0 flex-1"> + {dragOverFiles && ( + <div className="absolute inset-0 z-[90] border-2 border-blue-400 bg-blue-50/40 pointer-events-none" /> + )} + {uploadingFilenames.map((filename) => ( <div key={`uploading-${filename}`} className="flex h-10" style={{ minWidth: totalContentWidth }} > <div - className={`sticky left-0 z-[60] ${DOC_COL_W} ${stickyCellBg} border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs text-gray-400 flex items-center gap-4`} + className={`sticky left-0 z-[60] ${DOC_COL_W} ${TR_STICKY_CELL_BG} border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs text-gray-400 flex items-center`} > <input type="checkbox" disabled - className="h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-default accent-black disabled:opacity-100" + className="mr-4 h-2.5 w-2.5 shrink-0 rounded border-gray-200 cursor-default accent-black disabled:opacity-100" /> - <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0" /> + <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin shrink-0" /> <span className="line-clamp-1" title={filename}> {filename} </span> @@ -348,13 +350,14 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( ))} <div className="flex-1 border-b border-gray-200 min-h-8 min-w-8" /> </div> - ))} - {documents.map((doc, docIdx) => { - const baseRowBg = - docIdx % 2 === 0 ? stickyCellBg : "bg-gray-50"; + ))} + {documents.map((doc, docIdx) => { const rowBg = selectedDocIds.includes(doc.id) - ? "bg-gray-100" - : baseRowBg; + ? TR_ACTIVE_ROW_BG + : "bg-transparent"; + const stickyRowBg = selectedDocIds.includes(doc.id) + ? TR_ACTIVE_ROW_BG + : TR_STICKY_CELL_BG; return ( <div key={doc.id} @@ -362,7 +365,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( style={{ minWidth: totalContentWidth }} > <div - className={`sticky left-0 z-[60] ${DOC_COL_W} border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs text-gray-800 flex items-center gap-4 ${rowBg}`} + className={`sticky left-0 z-[60] ${DOC_COL_W} border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs text-gray-800 flex items-center ${stickyRowBg}`} > <input type="checkbox" @@ -414,9 +417,8 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( <div className="flex-1 border-b border-gray-200 min-h-8 min-w-8" /> </div> ); - })} - </div> - </div> - </div> + })} + </div> + </TableScrollArea> ); }); diff --git a/frontend/src/app/components/tabular/TabularCell.tsx b/frontend/src/app/components/tabular/TabularCell.tsx index 0b7e7ab..4a2e09e 100644 --- a/frontend/src/app/components/tabular/TabularCell.tsx +++ b/frontend/src/app/components/tabular/TabularCell.tsx @@ -26,7 +26,7 @@ const FLAG_STYLES = { function TabularCellSkeleton() { return ( - <div className="flex h-10 items-center px-2"> + <div className="flex h-8 items-center px-2"> <SkeletonLine className="h-3.5 w-full" /> </div> ); @@ -193,14 +193,14 @@ export function TabularCell({ if (cell.status === "error") { return ( - <div className="h-10 flex items-center justify-center text-gray-300"> + <div className="h-8 flex items-center justify-center text-gray-300"> <AlertCircle className="h-4 w-4 text-red-300" /> </div> ); } if (!cell.content?.summary) { - return <div className="h-10" />; + return <div className="h-8" />; } const { processed, citations, pills } = preprocessCellMarkdown( @@ -224,7 +224,7 @@ export function TabularCell({ <div ref={containerRef} className="relative"> {/* Normal cell row — always visible, preserves table layout */} <div - className="group relative h-10 px-2 flex items-center text-xs text-gray-800 leading-relaxed cursor-pointer hover:bg-gray-50 transition-colors" + className="group relative h-8 px-2 flex items-center text-xs text-gray-800 leading-relaxed cursor-pointer hover:bg-gray-50 transition-colors" onClick={() => setInlineExpanded((v) => !v)} > {cell.content.flag && ( diff --git a/frontend/src/app/components/tabular/TabularReviewView.tsx b/frontend/src/app/components/tabular/TabularReviewView.tsx index 2b1565d..6f1310c 100644 --- a/frontend/src/app/components/tabular/TabularReviewView.tsx +++ b/frontend/src/app/components/tabular/TabularReviewView.tsx @@ -8,6 +8,7 @@ import { Play, ChevronDown, MessageSquare, + MessageSquareX, Download, Users, Upload, @@ -62,6 +63,7 @@ import { exportTabularReviewToExcel } from "./exportToExcel"; import { useSidebar } from "@/app/contexts/SidebarContext"; import { PageHeader } from "../shared/PageHeader"; import { TableToolbar } from "../shared/TableToolbar"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; interface Props { reviewId: string; @@ -105,16 +107,17 @@ export function TRView({ reviewId, projectId }: Props) { string[] >([]); const searchParams = useSearchParams(); - const initialChatParamRef = useRef<string | null>( - searchParams.get("chat"), - ); + const initialChatParamRef = useRef<string | null>(searchParams.get("chat")); const [chatOpen, setChatOpen] = useState(!!initialChatParamRef.current); const [selectedChatId, setSelectedChatId] = useState<string | null>( initialChatParamRef.current && initialChatParamRef.current !== "new" ? initialChatParamRef.current : null, ); - const [highlightedCell, setHighlightedCell] = useState<{ colIdx: number; rowIdx: number } | null>(null); + const [highlightedCell, setHighlightedCell] = useState<{ + colIdx: number; + rowIdx: number; + } | null>(null); const [apiKeyModalProvider, setApiKeyModalProvider] = useState<ModelProvider | null>(null); const actionsRef = useRef<HTMLDivElement>(null); @@ -512,9 +515,7 @@ export function TRView({ reviewId, projectId }: Props) { if (idsToDelete.length === 0) return; const previousDocuments = documents; const previousCells = cells; - const remaining = documents.filter( - (d) => !idsToDelete.includes(d.id), - ); + const remaining = documents.filter((d) => !idsToDelete.includes(d.id)); setDocuments(remaining); setCells((prev) => prev.filter((c) => !idsToDelete.includes(c.document_id)), @@ -553,7 +554,9 @@ export function TRView({ reviewId, projectId }: Props) { } async function handleClearAllResults() { - await clearResultsForDocuments(documents.map((document) => document.id)); + await clearResultsForDocuments( + documents.map((document) => document.id), + ); } function requestReviewDetails() { @@ -672,7 +675,6 @@ export function TRView({ reviewId, projectId }: Props) { {/* Header */} <PageHeader shrink - className="gap-4" breadcrumbs={[ ...(projectId ? [ @@ -702,7 +704,8 @@ export function TRView({ reviewId, projectId }: Props) { : [ { label: "Tabular Reviews", - onClick: () => router.push("/tabular-reviews"), + onClick: () => + router.push("/tabular-reviews"), title: "Back to Tabular Reviews", }, ]), @@ -784,29 +787,20 @@ export function TRView({ reviewId, projectId }: Props) { { actions: [ { - onClick: () => { - if (!chatOpen) setSidebarOpen(false); - if (chatOpen) setSelectedChatId(null); - setChatOpen((v) => !v); - }, - disabled: - loading || - columns.length === 0 || - documents.length === 0, - title: chatOpen - ? "Close assistant" - : "Open assistant", - icon: chatOpen ? ( - <X className="h-4 w-4" /> - ) : ( - <MessageSquare className="h-4 w-4" /> - ), + onClick: () => setAddDocsOpen(true), + disabled: loading || savingColumnsConfig, + title: "Add documents", + icon: <Upload className="h-4 w-4" />, label: ( <span className="hidden sm:inline"> - Assistant + Documents </span> ), }, + ], + }, + { + actions: [ { onClick: handleGenerate, disabled: @@ -827,87 +821,177 @@ export function TRView({ reviewId, projectId }: Props) { }, ], }, + { + actions: [ + { + onClick: () => { + if (!chatOpen) setSidebarOpen(false); + if (chatOpen) setSelectedChatId(null); + setChatOpen((v) => !v); + }, + disabled: + loading || + columns.length === 0 || + documents.length === 0, + title: chatOpen + ? "Close chat" + : "Open chat", + icon: chatOpen ? ( + <MessageSquareX className="h-4 w-4" /> + ) : ( + <MessageSquare className="h-4 w-4" /> + ), + label: ( + <span className="hidden sm:inline"> + Chat + </span> + ), + }, + ], + }, ]} /> - {/* Toolbar */} - <TableToolbar - items={[]} - active="table" - onChange={() => undefined} - actions={ - <div className="ml-auto flex items-center gap-5"> - {loading ? ( - <> - <div className="h-3 w-24 rounded bg-gray-100 animate-pulse" /> - <div className="h-3 w-20 rounded bg-gray-100 animate-pulse" /> - </> - ) : null} - {!loading && selectedDocIds.length > 0 && ( - <div ref={actionsRef} className="relative"> - <button - onClick={() => - setActionsOpen((v) => !v) - } - className="flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors" - > - Actions - <ChevronDown className="h-3.5 w-3.5" /> - </button> - {actionsOpen && ( - <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> - <button + {/* Toolbar + table column, chat panel beside it */} + <div className="flex flex-1 overflow-hidden"> + {/* On mobile the chat panel replaces the table entirely */} + <div + className={`flex flex-1 flex-col overflow-hidden ${ + chatOpen ? "max-md:hidden" : "" + }`} + > + <TableToolbar + items={[]} + active="table" + onChange={() => undefined} + actions={ + <div className="flex items-center gap-1.5"> + {loading ? ( + <div className="h-3 w-24 rounded bg-gray-100 animate-pulse" /> + ) : null} + {!loading && selectedDocIds.length > 0 && ( + <> + {/* Desktop: compact Actions menu */} + <div + ref={actionsRef} + className="relative max-md:hidden" + > + <TabPillButton + onClick={() => + setActionsOpen( + (v) => !v, + ) + } + > + Actions + <ChevronDown className="h-3.5 w-3.5" /> + </TabPillButton> + {actionsOpen && ( + <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> + <button + onClick={ + handleClearResults + } + className="w-full px-3 py-1.5 text-left text-xs text-gray-700 hover:bg-gray-50 transition-colors" + > + Clear results + </button> + <button + onClick={ + handleDeleteDocuments + } + className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" + > + Delete + </button> + </div> + )} + </div> + {/* Mobile (toolbar dropdown): flattened entries */} + <TabPillButton onClick={handleClearResults} - className="w-full px-3 py-1.5 text-left text-xs text-gray-700 hover:bg-gray-50 transition-colors" + className="md:hidden" > Clear results - </button> - <button + </TabPillButton> + <TabPillButton onClick={handleDeleteDocuments} - className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" + className="md:hidden text-red-600" > Delete - </button> - </div> + </TabPillButton> + </> + )} + {!loading && ( + <TabPillButton + onClick={() => setAddColOpen(true)} + disabled={ + savingColumn || + savingColumnsConfig + } + > + <Plus className="h-3.5 w-3.5" /> + Add Columns + </TabPillButton> )} </div> - )} - {!loading && ( - <> - <button - onClick={() => setAddDocsOpen(true)} - disabled={savingColumnsConfig} - className={`flex items-center gap-1 text-xs font-medium transition-colors ${ - savingColumnsConfig - ? "text-gray-300 cursor-default" - : "text-gray-700 hover:text-gray-900" - }`} - > - <Upload className="h-3.5 w-3.5" /> - Add Documents - </button> - <button - onClick={() => setAddColOpen(true)} - disabled={ - savingColumn || savingColumnsConfig - } - className={`flex items-center gap-1 text-xs font-medium transition-colors ${ - savingColumn || savingColumnsConfig - ? "text-gray-300 cursor-default" - : "text-gray-700 hover:text-gray-900" - }`} - > - <Plus className="h-3.5 w-3.5" /> - Add Columns - </button> - </> - )} + } + /> + <div + className="relative flex flex-1 overflow-hidden" + onDragOver={(e) => { + if (!hasFilePayload(e.dataTransfer)) return; + e.preventDefault(); + e.dataTransfer.dropEffect = "copy"; + setDragOverReviewFiles(true); + }} + onDragLeave={(e) => { + if ( + !e.currentTarget.contains( + e.relatedTarget as Node, + ) + ) { + setDragOverReviewFiles(false); + } + }} + onDrop={(e) => { + if (!hasFilePayload(e.dataTransfer)) return; + e.preventDefault(); + e.stopPropagation(); + setDragOverReviewFiles(false); + void handleDropReviewFiles( + Array.from(e.dataTransfer.files), + ); + }} + > + <TRTable + ref={tableRef} + loading={loading} + columns={columns} + documents={filteredDocuments} + cells={cells} + highlightedCell={highlightedCell} + savingColumn={savingColumn} + savingColumnsConfig={savingColumnsConfig} + selectedDocIds={selectedDocIds} + uploadingFilenames={uploadingDroppedFilenames} + dragOverFiles={dragOverReviewFiles} + onSelectionChange={setSelectedDocIds} + onExpand={(cell) => { + setExpandedCell(cell); + setExpandedCellCitation(undefined); + }} + onCitationClick={(cell, page, quote) => { + setExpandedCell(cell); + setExpandedCellCitation({ quote, page }); + }} + onUpdateColumn={handleUpdateColumn} + onDeleteColumn={handleDeleteColumn} + onAddColumn={() => setAddColOpen(true)} + onAddDocuments={() => setAddDocsOpen(true)} + /> </div> - } - /> - - {/* Table area */} - <div className="flex flex-1 overflow-hidden"> + </div> {chatOpen && ( <TRChatPanel reviewId={reviewId} @@ -924,60 +1008,6 @@ export function TRView({ reviewId, projectId }: Props) { onChatIdChange={setSelectedChatId} /> )} - <div - className="relative flex flex-1 overflow-hidden" - onDragOver={(e) => { - if (!hasFilePayload(e.dataTransfer)) return; - e.preventDefault(); - e.dataTransfer.dropEffect = "copy"; - setDragOverReviewFiles(true); - }} - onDragLeave={(e) => { - if ( - !e.currentTarget.contains( - e.relatedTarget as Node, - ) - ) { - setDragOverReviewFiles(false); - } - }} - onDrop={(e) => { - if (!hasFilePayload(e.dataTransfer)) return; - e.preventDefault(); - e.stopPropagation(); - setDragOverReviewFiles(false); - void handleDropReviewFiles( - Array.from(e.dataTransfer.files), - ); - }} - > - <TRTable - ref={tableRef} - loading={loading} - columns={columns} - documents={filteredDocuments} - cells={cells} - highlightedCell={highlightedCell} - savingColumn={savingColumn} - savingColumnsConfig={savingColumnsConfig} - selectedDocIds={selectedDocIds} - uploadingFilenames={uploadingDroppedFilenames} - dragOverFiles={dragOverReviewFiles} - onSelectionChange={setSelectedDocIds} - onExpand={(cell) => { - setExpandedCell(cell); - setExpandedCellCitation(undefined); - }} - onCitationClick={(cell, page, quote) => { - setExpandedCell(cell); - setExpandedCellCitation({ quote, page }); - }} - onUpdateColumn={handleUpdateColumn} - onDeleteColumn={handleDeleteColumn} - onAddColumn={() => setAddColOpen(true)} - onAddDocuments={() => setAddDocsOpen(true)} - /> - </div> </div> </div> @@ -1037,9 +1067,7 @@ export function TRView({ reviewId, projectId }: Props) { <AddProjectDocsModal open={addDocsOpen} onClose={() => setAddDocsOpen(false)} - onSelect={(docs: Document[]) => - handleAddDocuments(docs) - } + onSelect={(docs: Document[]) => handleAddDocuments(docs)} breadcrumb={[ "Projects", project.name + @@ -1057,9 +1085,7 @@ export function TRView({ reviewId, projectId }: Props) { <AddDocumentsModal open={addDocsOpen} onClose={() => setAddDocsOpen(false)} - onSelect={(docs: Document[]) => - handleAddDocuments(docs) - } + onSelect={(docs: Document[]) => handleAddDocuments(docs)} breadcrumb={[ "Tabular Reviews", ...(review ? [review.title || "Untitled Review"] : []), @@ -1097,7 +1123,9 @@ export function TRView({ reviewId, projectId }: Props) { : async (next) => { const updated = await updateTabularReview( reviewId, - { shared_with: next }, + { + shared_with: next, + }, ); setReview((prev) => prev diff --git a/frontend/src/app/components/ui/liquid-dropdown.tsx b/frontend/src/app/components/ui/liquid-dropdown.tsx new file mode 100644 index 0000000..6b12495 --- /dev/null +++ b/frontend/src/app/components/ui/liquid-dropdown.tsx @@ -0,0 +1,78 @@ +"use client"; + +import * as React from "react"; +import { + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuRadioItem, +} from "@/app/components/ui/dropdown-menu"; +import { cn } from "@/app/lib/utils"; + +const LIQUID_DROPDOWN_CLASS = + "rounded-2xl border border-white/70 bg-app-surface shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl"; + +const LIQUID_DROPDOWN_ITEM_CLASS = + "cursor-pointer text-xs text-gray-600 transition-colors hover:bg-app-surface-hover focus:bg-app-surface-hover focus:text-gray-800"; + +export function LiquidDropdownContent({ + className, + ...props +}: React.ComponentProps<typeof DropdownMenuContent>) { + return ( + <DropdownMenuContent + className={cn(LIQUID_DROPDOWN_CLASS, className)} + {...props} + /> + ); +} + +export const LiquidDropdownSurface = React.forwardRef< + HTMLDivElement, + React.ComponentPropsWithoutRef<"div"> +>(function LiquidDropdownSurface({ className, ...props }, ref) { + return ( + <div + ref={ref} + className={cn(LIQUID_DROPDOWN_CLASS, className)} + {...props} + /> + ); +}); + +export function LiquidDropdownItem({ + className, + ...props +}: React.ComponentProps<typeof DropdownMenuItem>) { + return ( + <DropdownMenuItem + className={cn(LIQUID_DROPDOWN_ITEM_CLASS, className)} + {...props} + /> + ); +} + +export const LiquidDropdownButton = React.forwardRef< + HTMLButtonElement, + React.ComponentPropsWithoutRef<"button"> +>(function LiquidDropdownButton({ className, type = "button", ...props }, ref) { + return ( + <button + ref={ref} + type={type} + className={cn(LIQUID_DROPDOWN_ITEM_CLASS, className)} + {...props} + /> + ); +}); + +export function LiquidDropdownRadioItem({ + className, + ...props +}: React.ComponentProps<typeof DropdownMenuRadioItem>) { + return ( + <DropdownMenuRadioItem + className={cn(LIQUID_DROPDOWN_ITEM_CLASS, className)} + {...props} + /> + ); +} diff --git a/frontend/src/app/components/ui/liquid-surface.ts b/frontend/src/app/components/ui/liquid-surface.ts new file mode 100644 index 0000000..9818064 --- /dev/null +++ b/frontend/src/app/components/ui/liquid-surface.ts @@ -0,0 +1,5 @@ +export const LIQUID_TABLE_SURFACE_CLASS = + "rounded-2xl border-y border-white/70 bg-app-surface shadow-[0_10px_30px_rgba(15,23,42,0.11),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.16)] backdrop-blur-2xl"; + +export const LIQUID_PANEL_SURFACE_CLASS = + "rounded-2xl border border-white/70 bg-white/20 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18),inset_1px_0_0_rgba(255,255,255,0.5)] backdrop-blur-2xl"; diff --git a/frontend/src/app/components/ui/pill-button.tsx b/frontend/src/app/components/ui/pill-button.tsx index 88b477d..5745346 100644 --- a/frontend/src/app/components/ui/pill-button.tsx +++ b/frontend/src/app/components/ui/pill-button.tsx @@ -14,10 +14,10 @@ type PillButtonProps = React.ComponentProps<"button"> & { }; const toneClasses: Record<PillButtonTone, string> = { - black: "border-gray-700/40 bg-gray-950/88 text-white shadow-[0_3px_9px_rgba(15,23,42,0.10),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(255,255,255,0.12),inset_0_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl hover:bg-gray-900/90 disabled:hover:bg-gray-950/88", - white: "border-transparent bg-transparent text-gray-700 shadow-[0_1px_2px_rgba(0,0,0,0.10),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-1px_0_rgba(255,255,255,0.7)] hover:bg-gray-100 disabled:hover:bg-transparent", - blue: "border-blue-500/35 bg-blue-600/90 text-white shadow-[0_3px_9px_rgba(37,99,235,0.10),inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(255,255,255,0.16),inset_0_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl hover:bg-blue-600 disabled:hover:bg-blue-600/90", - danger: "border-red-700/35 bg-red-600/90 text-white shadow-[0_3px_9px_rgba(127,29,29,0.10),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-1px_0_rgba(255,255,255,0.14),inset_0_-4px_9px_rgba(127,29,29,0.18)] backdrop-blur-xl hover:bg-red-600 disabled:hover:bg-red-600/90", + black: "border-gray-700/40 bg-gray-950/88 text-white shadow-[0_3px_9px_rgba(15,23,42,0.10),inset_1px_1px_0_rgba(255,255,255,0.22),inset_-1px_-1px_0_rgba(255,255,255,0.10),inset_-4px_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl hover:bg-gray-900/90 disabled:hover:bg-gray-950/88", + white: "border-transparent bg-white text-gray-700 shadow-[0_2px_5px_rgba(0,0,0,0.14),inset_1px_1px_0_rgba(255,255,255,0.9),inset_-1px_-1px_0_rgba(255,255,255,0.68)] hover:bg-gray-100 disabled:hover:bg-white", + blue: "border-blue-500/35 bg-blue-600/90 text-white shadow-[0_3px_9px_rgba(37,99,235,0.10),inset_1px_1px_0_rgba(255,255,255,0.28),inset_-1px_-1px_0_rgba(255,255,255,0.14),inset_-4px_-4px_9px_rgba(29,78,216,0.2)] backdrop-blur-xl hover:bg-blue-600 disabled:hover:bg-blue-600/90", + danger: "border-red-700/35 bg-red-600/90 text-white shadow-[0_3px_9px_rgba(127,29,29,0.10),inset_1px_1px_0_rgba(255,255,255,0.22),inset_-1px_-1px_0_rgba(255,255,255,0.12),inset_-4px_-4px_9px_rgba(127,29,29,0.18)] backdrop-blur-xl hover:bg-red-600 disabled:hover:bg-red-600/90", }; const sizeClasses: Record<PillButtonSize, string> = { diff --git a/frontend/src/app/components/ui/tab-pill-button.tsx b/frontend/src/app/components/ui/tab-pill-button.tsx new file mode 100644 index 0000000..e973773 --- /dev/null +++ b/frontend/src/app/components/ui/tab-pill-button.tsx @@ -0,0 +1,35 @@ +"use client"; + +import * as React from "react"; +import { cn } from "@/app/lib/utils"; + +type TabPillButtonProps = React.ComponentProps<"button"> & { + active?: boolean; +}; + +export function TabPillButton({ + active, + type = "button", + className, + ...props +}: TabPillButtonProps) { + const stateClass = + active === true + ? "border-white/80 bg-white text-gray-900" + : active === false + ? "border-white/60 bg-white/45 text-gray-400 hover:bg-white/65 hover:text-gray-700" + : "border-white/70 bg-white/65 text-gray-700 hover:bg-white hover:text-gray-900"; + + return ( + <button + type={type} + aria-pressed={active} + className={cn( + "inline-flex h-7 items-center justify-center gap-1.5 rounded-full border px-3 text-xs font-medium shadow-[0_3px_9px_rgba(15,23,42,0.05),inset_0_1px_0_rgba(255,255,255,0.86),inset_0_-1px_0_rgba(255,255,255,0.58)] backdrop-blur-xl transition-all active:scale-[0.98] disabled:cursor-default disabled:opacity-40 disabled:active:scale-100", + stateClass, + className, + )} + {...props} + /> + ); +} diff --git a/frontend/src/app/components/workflows/UseWorkflowModal.tsx b/frontend/src/app/components/workflows/UseWorkflowModal.tsx index 3a2507b..a570b92 100644 --- a/frontend/src/app/components/workflows/UseWorkflowModal.tsx +++ b/frontend/src/app/components/workflows/UseWorkflowModal.tsx @@ -48,19 +48,16 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa const [selectedProjectId, setSelectedProjectId] = useState<string | null>( null, ); - const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>( - new Set(), - ); + const [selectedDocuments, setSelectedDocuments] = useState<Document[]>([]); const [assistantPrompt, setAssistantPrompt] = useState(""); const [saving, setSaving] = useState(false); const router = useRouter(); const { saveChat, setNewChatMessages } = useChatHistoryContext(); - const { - loading: dirLoading, - projects, - standaloneDocuments, - } = useDirectoryData(screen !== "select"); + const { loading: dirLoading, projects } = useDirectoryData( + screen === "details", + "projects", + ); useEffect(() => { if (workflow) { @@ -83,7 +80,7 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa function resetConfigureState() { setInProject(false); setSelectedProjectId(null); - setSelectedDocIds(new Set()); + setSelectedDocuments([]); setAssistantPrompt(""); } @@ -106,16 +103,10 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa const projectId = inProject ? selectedProjectId! : undefined; const chatId = await saveChat(projectId); if (!chatId) return; - const allDocs: Document[] = [ - ...standaloneDocuments, - ...projects.flatMap((p) => p.documents || []), - ]; - const files = allDocs - .filter((d) => selectedDocIds.has(d.id)) - .map((d) => ({ - filename: d.filename, - document_id: d.id, - })); + const files = selectedDocuments.map((document) => ({ + filename: document.filename, + document_id: document.id, + })); const content = assistantPrompt.trim() ? `implement workflow\n${assistantPrompt.trim()}` : "implement workflow"; @@ -139,13 +130,7 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa } async function handleCreateReview() { - const allDocs: Document[] = [ - ...standaloneDocuments, - ...projects.flatMap((p) => p.documents || []), - ]; - const docIds = allDocs - .filter((d) => selectedDocIds.has(d.id)) - .map((d) => d.id); + const docIds = selectedDocuments.map((document) => document.id); const projectId = inProject ? selectedProjectId! : undefined; setSaving(true); @@ -240,13 +225,6 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa disabled: saving, } } - footerStatus={ - screen === "documents" && selectedDocIds.size > 0 ? ( - <span className="text-xs text-gray-400"> - {selectedDocIds.size} selected - </span> - ) : null - } primaryAction={ screen === "select" ? { @@ -272,7 +250,7 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa onClick: handleCreateReview, disabled: saving || - selectedDocIds.size === 0 || + selectedDocuments.length === 0 || (inProject && !selectedProjectId), } } @@ -308,7 +286,7 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa onChange={(value) => { setInProject(value === "project"); setSelectedProjectId(null); - setSelectedDocIds(new Set()); + setSelectedDocuments([]); }} options={locationOptions} /> @@ -325,7 +303,7 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa options={projectOptions} onChange={(value) => { setSelectedProjectId(value || null); - setSelectedDocIds(new Set()); + setSelectedDocuments([]); }} placeholder={ dirLoading @@ -364,25 +342,10 @@ export function UseWorkflowModal({ workflows, workflow, onClose, skipSelect = fa <div className="flex min-h-0 flex-1 flex-col overflow-hidden"> <div className="flex min-h-0 flex-1 flex-col"> <FileDirectory - standaloneDocs={ - inProject ? projectDocs : standaloneDocuments - } - directoryProjects={ - inProject ? [] : projects - } - loading={dirLoading} - selectedIds={selectedDocIds} - onChange={setSelectedDocIds} - allowMultiple - forceExpanded={inProject} - emptyMessage={ - inProject - ? "No documents in this project" - : "No documents yet" - } - searchable - searchAutoFocus - showProjectTabs={!inProject} + documents={inProject ? projectDocs : undefined} + selectedDocuments={selectedDocuments} + onChange={setSelectedDocuments} + showTabs={!inProject} /> </div> </div> diff --git a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx index a276f6e..d80b1fd 100644 --- a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx +++ b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx @@ -1,7 +1,7 @@ "use client"; import { useCallback, useEffect, useRef, useState } from "react"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import dynamic from "next/dynamic"; import { Check, @@ -46,7 +46,9 @@ import { import { PeopleModal } from "@/app/components/modals/PeopleModal"; import { OpenSourceWorkflowModal } from "@/app/components/workflows/OpenSourceWorkflowModal"; import { PageHeader } from "@/app/components/shared/PageHeader"; +import { PillButton } from "@/app/components/ui/pill-button"; import { NewWorkflowModal } from "@/app/components/workflows/NewWorkflowModal"; +import { TabularReviewSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; import { useAuth } from "@/app/contexts/AuthContext"; import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { downloadWorkflowZip } from "./workflowZipExport"; @@ -98,6 +100,9 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { // Editor state const [promptMd, setPromptMd] = useState(""); const [columns, setColumns] = useState<ColumnConfig[]>([]); + const searchParams = useSearchParams(); + const previewEmptyStates = searchParams.get("emptyStates") === "1"; + const visibleColumns = previewEmptyStates ? [] : columns; // Save status const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle"); @@ -550,7 +555,8 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { {/* Toolbar */} {!readOnly && ( <div className="flex items-center justify-between h-10 shrink-0 border-b border-gray-200 px-4 md:px-10"> - {selectedColIndices.length > 0 && ( + {visibleColumns.length > 0 && + selectedColIndices.length > 0 && ( <div ref={colActionsRef} className="relative"> <button onClick={() => setColActionsOpen((v) => !v)} @@ -579,7 +585,8 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { )} </div> )} - {selectedColIndices.length === 0 && ( + {(visibleColumns.length === 0 || + selectedColIndices.length === 0) && ( <span aria-hidden="true" /> )} <button @@ -604,12 +611,12 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { {/* Table header */} <div className={`flex items-center h-8 pr-3 md:pr-10 border-b border-gray-200 text-xs text-gray-500 font-medium shrink-0 select-none ${readOnly ? "border-t" : ""}`}> <div className={`sticky left-0 z-[60] ${NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`}> - {columns.length > 0 ? ( + {visibleColumns.length > 0 ? ( <input type="checkbox" - checked={columns.length > 0 && selectedColIndices.length === columns.length} - ref={(el) => { if (el) el.indeterminate = selectedColIndices.length > 0 && selectedColIndices.length < columns.length; }} - onChange={() => setSelectedColIndices(selectedColIndices.length === columns.length ? [] : columns.map((c) => c.index))} + checked={selectedColIndices.length === visibleColumns.length} + ref={(el) => { if (el) el.indeterminate = selectedColIndices.length > 0 && selectedColIndices.length < visibleColumns.length; }} + onChange={() => setSelectedColIndices(selectedColIndices.length === visibleColumns.length ? [] : visibleColumns.map((c) => c.index))} className={`${CHECKBOX_GUTTER} rounded border-gray-200 cursor-pointer accent-black`} /> ) : ( @@ -627,9 +634,9 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { {/* Rows */} <div className="flex-1"> - {columns.length === 0 ? ( + {visibleColumns.length === 0 ? ( <div className="flex flex-col items-start py-24 w-full max-w-xs mx-auto"> - <Plus className="h-8 w-8 text-gray-300 mb-4" /> + <TabularReviewSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Columns </p> @@ -637,16 +644,19 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { Add columns to define what this tabular review workflow extracts from each document. </p> {!readOnly && ( - <button + <PillButton + tone="black" + size="sm" onClick={() => setAddColumnOpen(true)} - className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md" + className="mt-4 px-3" > - + Add Column - </button> + <Plus className="h-3.5 w-3.5" /> + Add Column + </PillButton> )} </div> ) : ( - columns.map((col) => { + visibleColumns.map((col) => { const FormatIcon = formatIcon(col.format ?? "text"); const isChecked = selectedColIndices.includes(col.index); return ( diff --git a/frontend/src/app/components/workflows/WorkflowList.tsx b/frontend/src/app/components/workflows/WorkflowList.tsx index fa7fb27..98217f5 100644 --- a/frontend/src/app/components/workflows/WorkflowList.tsx +++ b/frontend/src/app/components/workflows/WorkflowList.tsx @@ -1,11 +1,9 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; import { - Library, - Table2, - MessageSquare, + Plus, User, ChevronDown, } from "lucide-react"; @@ -23,12 +21,18 @@ import { TableToolbar } from "../shared/TableToolbar"; import { RowActionMenuItems, RowActions } from "../shared/RowActions"; import { MikeIcon } from "@/app/components/chat/mike-icon"; import { PageHeader } from "@/app/components/shared/PageHeader"; -import { workflowDetailPath } from "./workflowRoutes"; +import { PillButton } from "@/app/components/ui/pill-button"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; import { - GLASS_DROPDOWN, - GLASS_MENU_ITEM, - HeaderFilterDropdown, -} from "../shared/HeaderFilterDropdown"; + LiquidDropdownButton, + LiquidDropdownSurface, +} from "@/app/components/ui/liquid-dropdown"; +import { + ChatSkeuoIcon, + TabularReviewSkeuoIcon, + WorkflowSkeuoIcon, +} from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { workflowDetailPath } from "./workflowRoutes"; import { TABLE_CHECKBOX_CLASS, TABLE_STICKY_CELL_BG, @@ -39,20 +43,29 @@ import { TableEmptyState, TableHeaderCell, TableHeaderRow, + TableFilters, + type TableFilterOption, TablePrimaryCell, TableRow, TableScrollArea, + type TableSortDirection, TableStickyCell, } from "../shared/TablePrimitive"; -type WorkflowScope = "all" | "system" | "user" | "shared"; +type WorkflowSourceFilter = "system" | "user" | "shared"; +type WorkflowListTab = "all" | "assistant" | "tabular" | "system"; +type WorkflowSortKey = "name" | "type"; -const WORKFLOW_SCOPES: { id: WorkflowScope; label: string }[] = [ +const WORKFLOW_TABS: { id: WorkflowListTab; label: string }[] = [ { id: "all", label: "All" }, - { id: "user", label: "User" }, - { id: "shared", label: "Shared with me" }, + { id: "assistant", label: "Assistant" }, + { id: "tabular", label: "Tabular" }, { id: "system", label: "System" }, ]; +const SORT_OPTIONS: TableFilterOption<TableSortDirection>[] = [ + { value: "asc", label: "Ascending" }, + { value: "desc", label: "Descending" }, +]; const isDev = process.env.NODE_ENV !== "production"; const devLog = (...args: Parameters<typeof console.log>) => { @@ -61,10 +74,10 @@ const devLog = (...args: Parameters<typeof console.log>) => { export function WorkflowList() { const router = useRouter(); + const searchParams = useSearchParams(); const [workflows, setWorkflows] = useState<Workflow[]>([]); const [loading, setLoading] = useState(true); const [selected, setSelected] = useState<Workflow | null>(null); - const [activeScope, setActiveScope] = useState<WorkflowScope>("all"); const [newModalOpen, setNewModalOpen] = useState(false); const [editingWorkflow, setEditingWorkflow] = useState<Workflow | null>( null, @@ -72,12 +85,23 @@ export function WorkflowList() { const [hiddenSystemIds, setHiddenSystemIds] = useState<string[]>([]); const [selectedIds, setSelectedIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); + const [activeTab, setActiveTab] = useState<WorkflowListTab>("all"); const [practiceFilter, setPracticeFilter] = useState<string | null>(null); - const [typeFilter, setTypeFilter] = useState<Workflow["metadata"]["type"] | null>( + const [jurisdictionFilter, setJurisdictionFilter] = useState<string | null>( null, ); + const [languageFilter, setLanguageFilter] = useState<string | null>(null); + const [sourceFilter, setSourceFilter] = + useState<WorkflowSourceFilter | null>(null); + const [sort, setSort] = useState<{ + key: WorkflowSortKey; + direction: TableSortDirection; + } | null>(null); const [search, setSearch] = useState(""); const actionsRef = useRef<HTMLDivElement>(null); + const previewEmptyStates = searchParams.get("emptyStates") === "1"; + const effectiveLoading = loading && !previewEmptyStates; + const visibleWorkflows = previewEmptyStates ? [] : workflows; useEffect(() => { Promise.all([ @@ -130,11 +154,11 @@ export function WorkflowList() { return () => document.removeEventListener("mousedown", handleClick); }, [actionsOpen]); - const systemWorkflows = workflows.filter((wf) => wf.is_system); - const userWorkflows = workflows.filter( + const systemWorkflows = visibleWorkflows.filter((wf) => wf.is_system); + const userWorkflows = visibleWorkflows.filter( (wf) => !wf.is_system && wf.is_owner !== false, ); - const sharedWorkflows = workflows.filter( + const sharedWorkflows = visibleWorkflows.filter( (wf) => !wf.is_system && wf.is_owner === false, ); const hiddenSystem = systemWorkflows.filter((wf) => @@ -146,24 +170,48 @@ export function WorkflowList() { const systemRows = [...visibleSystem, ...hiddenSystem]; const activeRows = [...userWorkflows, ...sharedWorkflows, ...visibleSystem]; const allRows = [...userWorkflows, ...sharedWorkflows, ...systemRows]; - const byScope = - activeScope === "all" + const tabRows = + activeTab === "all" ? activeRows - : activeScope === "system" - ? systemRows - : activeScope === "user" - ? userWorkflows - : sharedWorkflows; + : activeTab === "system" + ? systemRows + : activeRows.filter((workflow) => workflow.metadata.type === activeTab); + const sourceRows = + sourceFilter === null + ? tabRows + : tabRows.filter( + (workflow) => getWorkflowSource(workflow) === sourceFilter, + ); const practices = Array.from( new Set( - byScope.map((wf) => wf.metadata.practice).filter((p): p is string => !!p), + sourceRows.map((wf) => wf.metadata.practice).filter((p): p is string => !!p), + ), + ).sort(); + const jurisdictions = Array.from( + new Set( + allRows + .flatMap((wf) => wf.metadata.jurisdictions ?? []) + .filter((jurisdiction): jurisdiction is string => !!jurisdiction), + ), + ).sort(); + const languages = Array.from( + new Set( + allRows + .map((wf) => wf.metadata.language) + .filter((language): language is string => !!language), ), ).sort(); const q = search.toLowerCase(); - const filtered = byScope + const filtered = sourceRows .filter((wf) => !practiceFilter || wf.metadata.practice === practiceFilter) - .filter((wf) => !typeFilter || wf.metadata.type === typeFilter) - .filter((wf) => !q || wf.metadata.title.toLowerCase().includes(q)); + .filter( + (wf) => + !jurisdictionFilter || + wf.metadata.jurisdictions?.includes(jurisdictionFilter), + ) + .filter((wf) => !languageFilter || wf.metadata.language === languageFilter) + .filter((wf) => !q || wf.metadata.title.toLowerCase().includes(q)) + .sort((a, b) => compareWorkflows(a, b, sort)); const allSelected = filtered.length > 0 && @@ -187,13 +235,8 @@ export function WorkflowList() { setActionsOpen(false); } - function handleScopeChange(scope: WorkflowScope) { - setActiveScope(scope); - clearSelection(); - } - - function handleTypeFilterChange(value: Workflow["metadata"]["type"] | null) { - setTypeFilter(value); + function handleTabChange(tab: WorkflowListTab) { + setActiveTab(tab); clearSelection(); } @@ -202,6 +245,29 @@ export function WorkflowList() { clearSelection(); } + function handleJurisdictionFilterChange(value: string | null) { + setJurisdictionFilter(value); + clearSelection(); + } + + function handleLanguageFilterChange(value: string | null) { + setLanguageFilter(value); + clearSelection(); + } + + function handleSourceFilterChange(value: WorkflowSourceFilter | null) { + setSourceFilter(value); + clearSelection(); + } + + function handleSortChange( + key: WorkflowSortKey, + direction: TableSortDirection | null, + ) { + setSort(direction ? { key, direction } : null); + clearSelection(); + } + async function handleHideWorkflow(id: string) { setHiddenSystemIds((prev) => [...prev, id]); await hideWorkflow(id).catch(() => { @@ -253,34 +319,39 @@ export function WorkflowList() { const getTypeMeta = (type: Workflow["metadata"]["type"]) => type === "tabular" - ? { label: "Tabular", Icon: Table2, className: "text-violet-700" } + ? { label: "Tabular", Icon: TabularReviewSkeuoIcon } : { label: "Assistant", - Icon: MessageSquare, - className: "text-blue-700", + Icon: ChatSkeuoIcon, }; - - const typeFilterButton = ( - <HeaderFilterDropdown - label="Filter by type" - value={typeFilter} - allLabel="All Types" + const nameSortDirection = + sort?.key === "name" ? sort.direction : null; + const typeSortDirection = + sort?.key === "type" ? sort.direction : null; + const nameFilterButton = ( + <TableFilters + label="Sort by name" + value={nameSortDirection} + allLabel="Default Order" widthClassName="w-40" - options={(["assistant", "tabular"] as const).map((type) => { - const { label, Icon, className } = getTypeMeta(type); - return { - value: type, - label, - icon: Icon, - className, - }; - })} - onChange={handleTypeFilterChange} + align="right" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("name", direction)} + /> + ); + const typeFilterButton = ( + <TableFilters + label="Sort by type" + value={typeSortDirection} + allLabel="Default Order" + widthClassName="w-40" + options={SORT_OPTIONS} + onChange={(direction) => handleSortChange("type", direction)} /> ); const practiceFilterButton = ( - <HeaderFilterDropdown + <TableFilters label="Filter by practice" value={practiceFilter} allLabel="All Practices" @@ -292,6 +363,50 @@ export function WorkflowList() { /> ); + const jurisdictionFilterButton = ( + <TableFilters + label="Filter by jurisdiction" + value={jurisdictionFilter} + allLabel="All Jurisdictions" + widthClassName="w-48" + options={jurisdictions.map((jurisdiction) => ({ + value: jurisdiction, + label: jurisdiction, + }))} + onChange={handleJurisdictionFilterChange} + /> + ); + + const languageFilterButton = ( + <TableFilters + label="Filter by language" + value={languageFilter} + allLabel="All Languages" + widthClassName="w-44" + options={languages.map((language) => ({ + value: language, + label: language, + }))} + onChange={handleLanguageFilterChange} + /> + ); + + const sourceOptions: TableFilterOption<WorkflowSourceFilter>[] = [ + { value: "system", label: "System" }, + { value: "user", label: "User" }, + { value: "shared", label: "Shared with me" }, + ]; + const sourceFilterButton = ( + <TableFilters + label="Filter by source" + value={sourceFilter} + allLabel="All Sources" + widthClassName="w-44" + options={sourceOptions} + onChange={handleSourceFilterChange} + /> + ); + const selectedHiddenSystemIds = selectedIds.filter((id) => hiddenSystemIds.includes(id), ); @@ -307,22 +422,21 @@ export function WorkflowList() { const toolbarActions = selectedIds.length > 0 ? ( <div ref={actionsRef} className="relative"> - <button + <TabPillButton onClick={() => setActionsOpen((v) => !v)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors" > Actions <ChevronDown className="h-3.5 w-3.5" /> - </button> + </TabPillButton> {actionsOpen && ( - <div className={`absolute top-full right-0 mt-1 z-[100] w-36 overflow-hidden ${GLASS_DROPDOWN}`}> + <LiquidDropdownSurface className="absolute top-full right-0 mt-1 z-[100] w-36 overflow-hidden"> {selectedOnlyHiddenSystem ? ( - <button + <LiquidDropdownButton onClick={handleBulkUnhide} - className={`w-full px-3 py-1.5 text-left text-xs text-gray-700 ${GLASS_MENU_ITEM}`} + className="w-full px-3 py-1.5 text-left text-gray-700" > Activate - </button> + </LiquidDropdownButton> ) : ( <button onClick={handleBulkRemove} @@ -331,7 +445,7 @@ export function WorkflowList() { {selectedOnlySystem ? "Deactivate" : "Delete"} </button> )} - </div> + </LiquidDropdownSurface> )} </div> ) : undefined; @@ -362,9 +476,9 @@ export function WorkflowList() { </PageHeader> <TableToolbar - items={WORKFLOW_SCOPES} - active={activeScope} - onChange={handleScopeChange} + items={WORKFLOW_TABS} + active={activeTab} + onChange={handleTabChange} actions={toolbarActions} /> @@ -373,8 +487,8 @@ export function WorkflowList() { header={ <TableHeaderRow> <TableStickyCell header> - {loading ? ( - <SkeletonDot /> + {effectiveLoading ? ( + <SkeletonDot className="mr-4" /> ) : ( <input type="checkbox" @@ -386,29 +500,45 @@ export function WorkflowList() { className={TABLE_CHECKBOX_CLASS} /> )} - <span>Name</span> + <span className="mr-1">Name</span> + {!loading && nameFilterButton} </TableStickyCell> <TableHeaderCell className="ml-auto w-28"> <div className="flex items-center gap-1"> <span>Type</span> - {typeFilterButton} + {!loading && typeFilterButton} </div> </TableHeaderCell> <TableHeaderCell className="w-40"> <div className="flex items-center gap-1"> <span>Practice</span> - {practiceFilterButton} + {!loading && practiceFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-40"> + <div className="flex items-center gap-1"> + <span>Jurisdiction</span> + {!loading && jurisdictionFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-28"> + <div className="flex items-center gap-1"> + <span>Language</span> + {!loading && languageFilterButton} + </div> + </TableHeaderCell> + <TableHeaderCell className="w-44"> + <div className="flex items-center gap-1"> + <span>Source</span> + {!loading && sourceFilterButton} </div> </TableHeaderCell> - <TableHeaderCell className="w-40">Jurisdiction</TableHeaderCell> - <TableHeaderCell className="w-28">Language</TableHeaderCell> - <TableHeaderCell className="w-44">Source</TableHeaderCell> <TableHeaderCell className="w-8" /> </TableHeaderRow> } > - {loading ? ( + {effectiveLoading ? ( <TableBody> {[1, 2, 3].map((i) => ( <TableRow @@ -418,8 +548,8 @@ export function WorkflowList() { <TableStickyCell hover={false} > - <div className="flex items-center gap-4"> - <SkeletonDot /> + <div className="flex items-center"> + <SkeletonDot className="mr-4" /> <SkeletonLine className="h-3.5 w-48" /> </div> </TableStickyCell> @@ -447,9 +577,9 @@ export function WorkflowList() { </TableBody> ) : filtered.length === 0 ? ( <TableEmptyState> - {activeScope === "user" ? ( + {sourceFilter === "user" ? ( <> - <Library className="h-8 w-8 text-gray-300 mb-4" /> + <WorkflowSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> User Workflows </p> @@ -458,16 +588,19 @@ export function WorkflowList() { review templates tailored to your practice. </p> - <button + <PillButton + tone="black" + size="sm" onClick={() => setNewModalOpen(true)} - className="mt-4 inline-flex items-center gap-1 rounded-full bg-gray-900 px-3 py-1 text-xs font-medium text-white hover:bg-gray-700 transition-colors shadow-md" + className="mt-4 px-3" > - + Create New - </button> + <Plus className="h-3.5 w-3.5" /> + Create + </PillButton> </> - ) : activeScope === "shared" ? ( + ) : sourceFilter === "shared" ? ( <> - <Library className="h-8 w-8 text-gray-300 mb-4" /> + <WorkflowSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Shared Workflows </p> @@ -478,7 +611,7 @@ export function WorkflowList() { </> ) : ( <> - <Library className="h-8 w-8 text-gray-300 mb-4" /> + <WorkflowSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Workflows </p> @@ -503,9 +636,10 @@ export function WorkflowList() { rightClickDropdown={ wf.is_system ? isHiddenSystem - ? (close) => ( + ? (close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onUnhide={() => handleUnhideWorkflow( wf.id, @@ -513,9 +647,10 @@ export function WorkflowList() { } /> ) - : (close) => ( + : (close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onHide={() => handleHideWorkflow( wf.id, @@ -525,9 +660,10 @@ export function WorkflowList() { ) : wf.is_owner === false ? undefined - : (close) => ( + : (close, menuProps) => ( <RowActionMenuItems onClose={close} + surfaceProps={menuProps} onEditDetails={() => setEditingWorkflow(wf) } @@ -556,13 +692,12 @@ export function WorkflowList() { /> <TableCell className="ml-auto w-28"> {(() => { - const { label, Icon, className } = - getTypeMeta(wf.metadata.type); + const { label, Icon } = getTypeMeta( + wf.metadata.type, + ); return ( <span className="inline-flex items-center gap-1.5 text-xs font-medium text-gray-700"> - <Icon - className={`h-3.5 w-3.5 ${className}`} - /> + <Icon className="h-4 w-4 shrink-0" /> {label} </span> ); @@ -708,6 +843,35 @@ function getSharedByLabel(workflow: Workflow) { return workflow.shared_by_name?.trim() || "Shared"; } +function getWorkflowSource(workflow: Workflow): WorkflowSourceFilter { + if (workflow.is_system) return "system"; + return workflow.is_owner === false ? "shared" : "user"; +} + +function compareWorkflows( + a: Workflow, + b: Workflow, + sort: { key: WorkflowSortKey; direction: TableSortDirection } | null, +) { + if (!sort) return 0; + + const direction = sort.direction === "asc" ? 1 : -1; + const aValue = + sort.key === "name" + ? a.metadata.title + : a.metadata.type === "tabular" + ? "Tabular" + : "Assistant"; + const bValue = + sort.key === "name" + ? b.metadata.title + : b.metadata.type === "tabular" + ? "Tabular" + : "Assistant"; + + return aValue.localeCompare(bValue) * direction; +} + // Liquid-glass treatment shared by every practice dot: a top inset highlight // and bottom inset shadow give it depth, plus a slight drop shadow so the bead // lifts off the row. The color class is appended per practice. diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 129c60a..a0a73be 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,9 +3,26 @@ @custom-variant dark (&:is(.dark *)); +@layer utilities { + .white-liquid-glass { + border: 1px solid rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 0.65); + box-shadow: + 0 -1px 6px rgba(15, 23, 42, 0.034), + 0 4px 9px rgba(15, 23, 42, 0.074), + inset 0 1px 0 rgba(255, 255, 255, 0.85); + backdrop-filter: blur(40px); + } +} + @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); + --color-app-background: var(--app-background); + --color-app-surface: var(--app-surface); + --color-app-surface-hover: var(--app-surface-hover); + --color-app-surface-active: var(--app-surface-active); + --color-app-floating: var(--app-floating); --font-sans: var(--font-inter); --font-serif: var(--font-eb-garamond); --color-blue: rgb(0, 136, 255); @@ -52,6 +69,11 @@ :root { --radius: 0.625rem; --color-azure: 0, 136, 255; + --app-background: #f9fafb; + --app-surface: #fdfdfe; + --app-surface-hover: #f9fafb; + --app-surface-active: #eff0f3; + --app-floating: #fefefe; --background: oklch(0.985 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); diff --git a/frontend/src/app/hooks/useFetchSingleDoc.ts b/frontend/src/app/hooks/useFetchSingleDoc.ts index 6c39c20..c1ae7ba 100644 --- a/frontend/src/app/hooks/useFetchSingleDoc.ts +++ b/frontend/src/app/hooks/useFetchSingleDoc.ts @@ -79,8 +79,8 @@ export function useFetchSingleDoc( if (!cancelled) setResult({ type: "spreadsheet", buffer }); } else { // Drain the body so the connection is reusable, but the - // bytes are useless to the PDF viewer — the caller will - // fall back to DocxView, which fetches `/docx` itself. + // bytes are useless to PDF/spreadsheet viewers. Callers + // should route DOC/DOCX files to DocxView directly. await response.arrayBuffer().catch(() => {}); if (!cancelled) setResult({ type: "docx" }); } diff --git a/frontend/src/app/lib/mikeApi.ts b/frontend/src/app/lib/mikeApi.ts index a1fb42b..ad3959c 100644 --- a/frontend/src/app/lib/mikeApi.ts +++ b/frontend/src/app/lib/mikeApi.ts @@ -11,6 +11,7 @@ import type { Citation, Document, Folder, + LibraryFolder, Message, OpenSourceWorkflowContributorMode, OpenSourceWorkflowResponse, @@ -551,6 +552,110 @@ export async function renameProjectDocument( ); } +export type LibraryKind = "files" | "templates"; + +export interface LibraryCollection { + documents: Document[]; + folders: LibraryFolder[]; +} + +export async function getLibrary( + kind: LibraryKind, +): Promise<LibraryCollection> { + return apiRequest<LibraryCollection>(`/library/${kind}`); +} + +export async function uploadLibraryDocument( + kind: LibraryKind, + file: File, +): Promise<Document> { + const authHeaders = await getAuthHeader(); + const form = new FormData(); + form.append("file", file); + const response = await fetch(`${API_BASE}/library/${kind}/documents`, { + method: "POST", + headers: { ...authHeaders }, + body: form, + }); + if (!response.ok) throw new Error(await response.text()); + return response.json() as Promise<Document>; +} + +export async function createLibraryFolder( + kind: LibraryKind, + name: string, + parentFolderId?: string | null, +): Promise<LibraryFolder> { + return apiRequest<LibraryFolder>(`/library/${kind}/folders`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + name, + parent_folder_id: parentFolderId ?? null, + }), + }); +} + +export async function renameLibraryFolder( + kind: LibraryKind, + folderId: string, + name: string, +): Promise<LibraryFolder> { + return apiRequest<LibraryFolder>(`/library/${kind}/folders/${folderId}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ name }), + }); +} + +export async function deleteLibraryFolder( + kind: LibraryKind, + folderId: string, +): Promise<void> { + await apiRequest(`/library/${kind}/folders/${folderId}`, { + method: "DELETE", + }); +} + +export async function moveLibraryFolder( + kind: LibraryKind, + folderId: string, + parentFolderId: string | null, +): Promise<LibraryFolder> { + return apiRequest<LibraryFolder>(`/library/${kind}/folders/${folderId}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ parent_folder_id: parentFolderId }), + }); +} + +export async function moveLibraryDocument( + kind: LibraryKind, + documentId: string, + folderId: string | null, +): Promise<Document> { + return apiRequest<Document>( + `/library/${kind}/documents/${documentId}/folder`, + { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ folder_id: folderId }), + }, + ); +} + +export async function renameLibraryDocument( + kind: LibraryKind, + documentId: string, + filename: string, +): Promise<Document> { + return apiRequest<Document>(`/library/${kind}/documents/${documentId}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ filename }), + }); +} + export async function addDocumentToProject( projectId: string, documentId: string, @@ -1142,6 +1247,18 @@ export async function deleteTabularChat( }); } +export async function renameTabularChat( + reviewId: string, + chatId: string, + title: string, +): Promise<void> { + await apiRequest(`/tabular-review/${reviewId}/chats/${chatId}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ title }), + }); +} + export async function regenerateTabularCell( reviewId: string, documentId: string, diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx index 5c6beb5..dc59301 100644 --- a/frontend/src/app/not-found.tsx +++ b/frontend/src/app/not-found.tsx @@ -1,4 +1,5 @@ import Link from "next/link"; +import { PillButton } from "@/app/components/ui/pill-button"; export default function NotFound() { return ( @@ -12,12 +13,9 @@ export default function NotFound() { have been moved. </p> - <Link - href="/" - className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium text-white bg-gray-900 hover:bg-gray-700 transition-colors" - > - Go home - </Link> + <PillButton asChild tone="black" size="normal"> + <Link href="/">Go home</Link> + </PillButton> </div> </div> ); diff --git a/frontend/src/app/verify-mfa/page.tsx b/frontend/src/app/verify-mfa/page.tsx index f5a3494..65f38a4 100644 --- a/frontend/src/app/verify-mfa/page.tsx +++ b/frontend/src/app/verify-mfa/page.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { Loader2 } from "lucide-react"; import { SiteLogo } from "@/app/components/site-logo"; -import { Button } from "@/app/components/ui/button"; +import { PillButton } from "@/app/components/ui/pill-button"; import { useAuth } from "@/app/contexts/AuthContext"; import { supabase } from "@/app/lib/supabase"; import { @@ -187,11 +187,12 @@ export default function VerifyMfaPage() { > Cancel </button> - <Button + <PillButton + tone="black" + size="normal" type="button" onClick={() => void verify()} disabled={!canVerify} - className="inline-flex items-center justify-center gap-1.5 rounded-full border border-gray-700/40 bg-gray-950/88 px-4 py-1.5 text-sm font-medium text-white shadow-[0_3px_9px_rgba(15,23,42,0.16),inset_0_1px_0_rgba(255,255,255,0.22),inset_0_-4px_9px_rgba(15,23,42,0.2)] backdrop-blur-xl transition-all hover:bg-gray-900/90 hover:text-white active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100" > {verifying ? ( <span className="inline-flex items-center gap-1.5"> @@ -201,7 +202,7 @@ export default function VerifyMfaPage() { ) : ( "Verify" )} - </Button> + </PillButton> </div> </div> </div> From f5abbac42c6dc63b0a2dc7cbd2e763d4ab82923a Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Fri, 17 Jul 2026 01:22:12 +0800 Subject: [PATCH 06/21] feat: refine liquid surfaces and document review panels --- .../src/app/(pages)/tabular-reviews/page.tsx | 6 +- .../assistant/CitationQuotesHeader.tsx | 12 +- .../assistant/message/EventBlocks.tsx | 2 +- .../src/app/components/documents/DocTable.tsx | 35 +- .../components/modals/ProjectPickerModal.tsx | 6 +- .../projects/ProjectAssistantTable.tsx | 7 +- .../projects/ProjectDocumentsView.tsx | 5 +- .../projects/ProjectReviewsTable.tsx | 7 +- .../components/projects/ProjectsOverview.tsx | 6 +- .../src/app/components/shared/AppSidebar.tsx | 21 +- .../components/shared/DocumentSidePanel.tsx | 730 +++++++++--------- .../app/components/shared/FileDirectory.tsx | 16 +- .../components/shared/HeaderActionsMenu.tsx | 4 +- .../src/app/components/shared/PageHeader.tsx | 11 +- .../src/app/components/shared/RowActions.tsx | 3 +- .../app/components/shared/SidebarChatItem.tsx | 8 +- .../app/components/shared/TablePrimitive.tsx | 26 +- .../app/components/tabular/TRChatPanel.tsx | 15 +- .../app/components/tabular/TRSidePanel.tsx | 522 ++++++++++--- .../src/app/components/tabular/TRTable.tsx | 40 +- .../app/components/tabular/TabularCell.tsx | 38 +- .../components/tabular/TabularReviewView.tsx | 39 +- .../app/components/tabular/citation-utils.ts | 66 +- .../src/app/components/ui/liquid-dropdown.tsx | 3 +- .../src/app/components/ui/liquid-surface.ts | 8 +- .../app/components/workflows/WorkflowList.tsx | 6 +- .../workflows/WorkflowPickerContent.tsx | 14 +- 27 files changed, 1070 insertions(+), 586 deletions(-) diff --git a/frontend/src/app/(pages)/tabular-reviews/page.tsx b/frontend/src/app/(pages)/tabular-reviews/page.tsx index 39776eb..99e88c6 100644 --- a/frontend/src/app/(pages)/tabular-reviews/page.tsx +++ b/frontend/src/app/(pages)/tabular-reviews/page.tsx @@ -23,7 +23,6 @@ import { useAuth } from "@/app/contexts/AuthContext"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { TABLE_CHECKBOX_CLASS, - TABLE_STICKY_CELL_BG, SkeletonDot, SkeletonLine, TableBody, @@ -519,12 +518,10 @@ export default function TabularReviewsPage() { const projectName = review.project_id ? projectNameById.get(review.project_id) : null; - const rowBg = selectedIds.includes(review.id) - ? "bg-gray-50" - : TABLE_STICKY_CELL_BG; return ( <TableRow key={review.id} + selected={selectedIds.includes(review.id)} rightClickDropdown={(close, menuProps) => ( <RowActionMenuItems onClose={close} @@ -563,7 +560,6 @@ export default function TabularReviewsPage() { }} > <TablePrimaryCell - bgClassName={rowBg} selected={selectedIds.includes( review.id, )} diff --git a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx index 528bfb4..2af657a 100644 --- a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx +++ b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx @@ -95,17 +95,17 @@ export function CitationQuotesHeader({ citationText ?? "" } - className="rounded-sm bg-white px-2 h-6 text-gray-600 shadow-[0_1px_3px_rgba(0,0,0,0.22)] hover:bg-gray-50" + className="rounded-full bg-white px-2 h-6 text-gray-600 shadow-[0_1px_3px_rgba(0,0,0,0.22)] hover:bg-gray-50" showText /> )} <div - className={`relative flex h-6 items-center justify-start gap-1 rounded-sm bg-gray-200 p-1 ${ + className={`relative flex h-6 items-center justify-start gap-1 rounded-full bg-gray-200 p-1 ${ hasMultipleQuotes ? "w-16" : "w-11" }`} > <div - className={`absolute top-1 h-4 w-4 rounded bg-white shadow-sm transition-all ${ + className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-all ${ !isExpanded ? "left-1" : hasMultipleQuotes && @@ -117,7 +117,7 @@ export function CitationQuotesHeader({ <button type="button" onClick={() => setIsExpanded(false)} - className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ + className={`relative z-10 flex h-4 w-4 items-center justify-center rounded-full ${ !isExpanded ? "text-gray-800" : "text-gray-500 hover:text-gray-700" @@ -132,7 +132,7 @@ export function CitationQuotesHeader({ setIsExpanded(true); setViewMode("single"); }} - className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ + className={`relative z-10 flex h-4 w-4 items-center justify-center rounded-full ${ isExpanded && viewMode === "single" ? "text-gray-800" : "text-gray-500 hover:text-gray-700" @@ -148,7 +148,7 @@ export function CitationQuotesHeader({ setIsExpanded(true); setViewMode("list"); }} - className={`relative z-10 flex h-4 w-4 items-center justify-center rounded ${ + className={`relative z-10 flex h-4 w-4 items-center justify-center rounded-full ${ isExpanded && viewMode === "list" ? "text-gray-800" : "text-gray-500 hover:text-gray-700" diff --git a/frontend/src/app/components/assistant/message/EventBlocks.tsx b/frontend/src/app/components/assistant/message/EventBlocks.tsx index 7e4a037..7cc57ae 100644 --- a/frontend/src/app/components/assistant/message/EventBlocks.tsx +++ b/frontend/src/app/components/assistant/message/EventBlocks.tsx @@ -43,7 +43,7 @@ export function EventBlock({ ? "bg-green-400 shadow-[0_1px_3px_rgba(15,23,42,0.15),inset_0_1px_0_rgba(255,255,255,0.5)]" : dotColor === "red" ? "bg-red-400 shadow-[0_1px_3px_rgba(15,23,42,0.15),inset_0_1px_0_rgba(255,255,255,0.5)]" - : "bg-gray-300 shadow-[0_1px_3px_rgba(15,23,42,0.15),inset_0_1px_0_rgba(255,255,255,0.35)]"; + : "bg-gray-500 shadow-[0_1px_3px_rgba(15,23,42,0.15)]"; return ( <div className="flex items-start text-sm font-serif text-gray-500 relative"> {showConnector && <EventConnector />} diff --git a/frontend/src/app/components/documents/DocTable.tsx b/frontend/src/app/components/documents/DocTable.tsx index b8717c7..050bdb9 100644 --- a/frontend/src/app/components/documents/DocTable.tsx +++ b/frontend/src/app/components/documents/DocTable.tsx @@ -64,6 +64,11 @@ import { } from "@/app/components/projects/ProjectPageParts"; import { DocumentSidePanel } from "@/app/components/shared/DocumentSidePanel"; import { LibrarySkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_GROUP_HOVER_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; import { TABLE_CHECKBOX_CLASS, TableFilters, @@ -271,9 +276,6 @@ export function DocTable({ const [addDocsOpen, setAddDocsOpen] = useState(false); const { user } = useAuth(); const stickyCellBg = "bg-app-surface"; - const activeRowBg = "bg-app-surface-active"; - const surfaceHoverBg = "hover:bg-app-surface-hover"; - const surfaceGroupHoverBg = "group-hover:bg-app-surface-hover"; const [viewingDoc, setViewingDoc] = useState<Document | null>(null); const [viewingDocVersion, setViewingDocVersion] = useState<{ id: string; @@ -1434,6 +1436,7 @@ export function DocTable({ const isUploadingVersion = uploadingVersionDocIds.has( doc.id, ); + const isSelected = selectedDocIds.includes(doc.id); const isDeletingDoc = deletingDocIds.has(doc.id); if (isDeletingDoc) { return renderDocumentActivityRow({ @@ -1447,6 +1450,7 @@ export function DocTable({ return ( <div key={`doc-${doc.id}`}> <div + data-document-row draggable={renamingDocumentId !== doc.id} onDragStart={(e) => { if (renamingDocumentId === doc.id) { @@ -1487,18 +1491,18 @@ export function DocTable({ showFolderActions: false, }); }} - className={`group flex h-10 min-w-max items-center pr-8 ${surfaceHoverBg} cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + className={`group flex h-10 min-w-max items-center pr-8 cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : isSelected ? APP_SURFACE_ACTIVE_CLASS : APP_SURFACE_HOVER_CLASS}`} > {(() => { const rowBg = isVersionDragOver ? "bg-blue-50" - : selectedDocIds.includes(doc.id) - ? activeRowBg + : isSelected + ? APP_SURFACE_ACTIVE_CLASS : stickyCellBg; return ( <> <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${rowBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver ? "" : surfaceGroupHoverBg}`} + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${rowBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver || isSelected ? "" : APP_SURFACE_GROUP_HOVER_CLASS}`} style={treeNameCellStyle(depth)} > <div className="flex items-center"> @@ -1632,7 +1636,7 @@ export function DocTable({ doc.id, ) } - className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-app-surface-hover transition-colors" + className={`flex items-center gap-1 rounded px-1 py-0.5 transition-colors ${APP_SURFACE_HOVER_CLASS}`} > <span> {versionNumber} @@ -1815,10 +1819,10 @@ export function DocTable({ showFolderActions: true, }); }} - className={`group flex h-10 min-w-max items-center pr-8 ${surfaceHoverBg} cursor-pointer transition-colors ${isRenaming ? "" : "select-none"} ${dragOverFolderId === folder.id ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + className={`group flex h-10 min-w-max items-center pr-8 ${APP_SURFACE_HOVER_CLASS} cursor-pointer transition-colors ${isRenaming ? "" : "select-none"} ${dragOverFolderId === folder.id ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} > <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} py-2 pl-4 pr-2 ${dragOverFolderId === folder.id ? "bg-blue-50" : stickyCellBg} transition-colors ${dragOverFolderId === folder.id ? "" : surfaceGroupHoverBg}`} + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} py-2 pl-4 pr-2 ${dragOverFolderId === folder.id ? "bg-blue-50" : stickyCellBg} transition-colors ${dragOverFolderId === folder.id ? "" : APP_SURFACE_GROUP_HOVER_CLASS}`} style={treeNameCellStyle(depth)} > <div className="flex items-center"> @@ -2557,6 +2561,10 @@ export function DocTable({ uploadingVersionDocIds.has( doc.id, ); + const isSelected = + selectedDocIds.includes( + doc.id, + ); const isDeletingDoc = deletingDocIds.has( doc.id, @@ -2578,6 +2586,7 @@ export function DocTable({ return ( <div key={doc.id}> <div + data-document-row draggable={ renamingDocumentId !== doc.id @@ -2652,10 +2661,10 @@ export function DocTable({ }, ); }} - className={`group flex h-10 min-w-max items-center pr-8 ${surfaceHoverBg} cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : ""}`} + className={`group flex h-10 min-w-max items-center pr-8 cursor-pointer transition-colors ${isVersionDragOver ? "bg-blue-50 ring-1 ring-inset ring-blue-200" : isSelected ? APP_SURFACE_ACTIVE_CLASS : APP_SURFACE_HOVER_CLASS}`} > <div - className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${isVersionDragOver ? "bg-blue-50" : selectedDocIds.includes(doc.id) ? activeRowBg : stickyCellBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver ? "" : surfaceGroupHoverBg}`} + className={`sticky left-0 z-[60] ${DOC_NAME_COL_W} ${isVersionDragOver ? "bg-blue-50" : isSelected ? APP_SURFACE_ACTIVE_CLASS : stickyCellBg} py-2 pl-4 pr-2 transition-colors ${isVersionDragOver || isSelected ? "" : APP_SURFACE_GROUP_HOVER_CLASS}`} > <div className="flex items-center"> {isProcessing || @@ -2806,7 +2815,7 @@ export function DocTable({ doc.id, ) } - className="flex items-center gap-1 rounded px-1 py-0.5 hover:bg-app-surface-hover transition-colors" + className={`flex items-center gap-1 rounded px-1 py-0.5 transition-colors ${APP_SURFACE_HOVER_CLASS}`} > <span> { diff --git a/frontend/src/app/components/modals/ProjectPickerModal.tsx b/frontend/src/app/components/modals/ProjectPickerModal.tsx index a8d629b..4ef73cb 100644 --- a/frontend/src/app/components/modals/ProjectPickerModal.tsx +++ b/frontend/src/app/components/modals/ProjectPickerModal.tsx @@ -5,6 +5,10 @@ import { SearchBar } from "@/app/components/ui/search-bar"; import { ClosedProjectSvgIcon } from "@/app/components/shared/FolderSvgIcon"; import type { Project } from "../shared/types"; import { Modal } from "./Modal"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; type PrimaryAction = Omit< ButtonHTMLAttributes<HTMLButtonElement>, @@ -101,7 +105,7 @@ export function ProjectPickerModal({ isSelected ? null : project.id, ) } - className={`w-full flex rounded-md items-center gap-2 px-2 py-2 text-xs transition-all text-left ${isSelected ? "bg-gray-100" : "hover:bg-gray-100/70"}`} + className={`w-full flex rounded-md items-center gap-2 px-2 py-2 text-xs transition-all text-left ${isSelected ? APP_SURFACE_ACTIVE_CLASS : APP_SURFACE_HOVER_CLASS}`} > <span className={`shrink-0 h-3.5 w-3.5 rounded border flex items-center justify-center ${isSelected ? "bg-gray-900 border-gray-900" : "border-gray-300"}`} diff --git a/frontend/src/app/components/projects/ProjectAssistantTable.tsx b/frontend/src/app/components/projects/ProjectAssistantTable.tsx index c9a5239..9d5457a 100644 --- a/frontend/src/app/components/projects/ProjectAssistantTable.tsx +++ b/frontend/src/app/components/projects/ProjectAssistantTable.tsx @@ -8,7 +8,6 @@ import { } from "@/app/components/shared/RowActions"; import { TABLE_CHECKBOX_CLASS, - TABLE_STICKY_CELL_BG, SkeletonDot, SkeletonLine, TableBody, @@ -249,6 +248,7 @@ export function ProjectAssistantTable({ {visibleChats.map((chat) => ( <TableRow key={chat.id} + selected={selectedChatIds.includes(chat.id)} rightClickDropdown={(close, menuProps) => ( <RowActionMenuItems onClose={close} @@ -276,11 +276,6 @@ export function ProjectAssistantTable({ className="pr-8 md:pr-8" > <TablePrimaryCell - bgClassName={ - selectedChatIds.includes(chat.id) - ? "bg-gray-50" - : TABLE_STICKY_CELL_BG - } selected={selectedChatIds.includes(chat.id)} onSelectionChange={() => setSelectedChatIds((prev) => diff --git a/frontend/src/app/components/projects/ProjectDocumentsView.tsx b/frontend/src/app/components/projects/ProjectDocumentsView.tsx index fbd780c..0e53bf0 100644 --- a/frontend/src/app/components/projects/ProjectDocumentsView.tsx +++ b/frontend/src/app/components/projects/ProjectDocumentsView.tsx @@ -29,6 +29,7 @@ import { } from "@/app/components/documents/DocTable"; import { TabPillButton } from "@/app/components/ui/tab-pill-button"; import { ProjectSectionToolbar, useProjectWorkspace } from "./ProjectWorkspace"; +import { APP_SURFACE_HOVER_CLASS } from "@/app/components/ui/liquid-surface"; interface Props { projectId: string; @@ -139,7 +140,7 @@ export function ProjectDocumentsView({ projectId }: Props) { setActionsOpen(false); void selectionActions.onDownload(); }} - className="w-full px-3 py-1.5 text-left text-xs text-gray-600 transition-colors hover:bg-app-surface-hover" + className={`w-full px-3 py-1.5 text-left text-xs text-gray-600 transition-colors ${APP_SURFACE_HOVER_CLASS}`} > Download </button> @@ -149,7 +150,7 @@ export function ProjectDocumentsView({ projectId }: Props) { setActionsOpen(false); void selectionActions.onRemoveFromFolder(); }} - className="w-full px-3 py-1.5 text-left text-xs text-gray-600 transition-colors hover:bg-app-surface-hover" + className={`w-full px-3 py-1.5 text-left text-xs text-gray-600 transition-colors ${APP_SURFACE_HOVER_CLASS}`} > Remove from subfolder </button> diff --git a/frontend/src/app/components/projects/ProjectReviewsTable.tsx b/frontend/src/app/components/projects/ProjectReviewsTable.tsx index b8b2f9a..3f08db5 100644 --- a/frontend/src/app/components/projects/ProjectReviewsTable.tsx +++ b/frontend/src/app/components/projects/ProjectReviewsTable.tsx @@ -8,7 +8,6 @@ import { } from "@/app/components/shared/RowActions"; import { TABLE_CHECKBOX_CLASS, - TABLE_STICKY_CELL_BG, SkeletonDot, SkeletonLine, TableBody, @@ -255,6 +254,7 @@ export function ProjectReviewsTable({ {visibleReviews.map((review) => ( <TableRow key={review.id} + selected={selectedReviewIds.includes(review.id)} rightClickDropdown={(close, menuProps) => ( <RowActionMenuItems onClose={close} @@ -278,11 +278,6 @@ export function ProjectReviewsTable({ className="pr-8 md:pr-8" > <TablePrimaryCell - bgClassName={ - selectedReviewIds.includes(review.id) - ? "bg-gray-50" - : TABLE_STICKY_CELL_BG - } selected={selectedReviewIds.includes(review.id)} onSelectionChange={() => setSelectedReviewIds((prev) => diff --git a/frontend/src/app/components/projects/ProjectsOverview.tsx b/frontend/src/app/components/projects/ProjectsOverview.tsx index 31e93d3..d5fb3bd 100644 --- a/frontend/src/app/components/projects/ProjectsOverview.tsx +++ b/frontend/src/app/components/projects/ProjectsOverview.tsx @@ -25,7 +25,6 @@ import { } from "@/app/components/shared/FolderSvgIcon"; import { TABLE_CHECKBOX_CLASS, - TABLE_STICKY_CELL_BG, SkeletonDot, SkeletonLine, TableBody, @@ -660,12 +659,10 @@ export function ProjectsOverview() { ) : ( <TableBody> {filtered.map((project) => { - const rowBg = selectedIds.includes(project.id) - ? "bg-gray-50" - : TABLE_STICKY_CELL_BG; return ( <TableRow key={project.id} + selected={selectedIds.includes(project.id)} rightClickDropdown={ (project.is_owner ?? project.user_id === user?.id) @@ -698,7 +695,6 @@ export function ProjectsOverview() { > {/* Project Name */} <TablePrimaryCell - bgClassName={rowBg} selected={selectedIds.includes(project.id)} onSelectionChange={() => toggleOne(project.id) diff --git a/frontend/src/app/components/shared/AppSidebar.tsx b/frontend/src/app/components/shared/AppSidebar.tsx index 834fd18..ec46d29 100644 --- a/frontend/src/app/components/shared/AppSidebar.tsx +++ b/frontend/src/app/components/shared/AppSidebar.tsx @@ -27,6 +27,10 @@ import { import { listProjects } from "@/app/lib/mikeApi"; import type { Project } from "@/app/components/shared/types"; import { cn } from "@/app/lib/utils"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; const NAV_ITEMS = [ { href: "/assistant", label: "Assistant", icon: ChatSkeuoIcon }, @@ -176,7 +180,8 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { onClick={handleToggle} className={cn( "h-9 w-9 p-2.5 items-center flex transition-colors", - "rounded-md hover:bg-gray-100", + "rounded-md", + APP_SURFACE_HOVER_CLASS, )} title={isOpen ? "Close sidebar" : "Open sidebar"} > @@ -201,8 +206,8 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { className={cn( "w-full h-9 flex items-center gap-3 px-2.5 py-2 rounded-md transition-colors text-left", isActive - ? "bg-app-surface-active text-gray-900" - : "text-gray-700 hover:bg-gray-100", + ? `${APP_SURFACE_ACTIVE_CLASS} text-gray-900` + : `text-gray-700 ${APP_SURFACE_HOVER_CLASS}`, !isOpen ? "hidden md:flex" : "flex", )} > @@ -301,8 +306,8 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { className={cn( "flex h-8 w-full items-center gap-2 rounded-md px-2.5 py-1 text-left text-xs transition-colors", isActive - ? "bg-app-surface-active text-gray-900" - : "text-gray-700 hover:bg-gray-100", + ? `${APP_SURFACE_ACTIVE_CLASS} text-gray-900` + : `text-gray-700 ${APP_SURFACE_HOVER_CLASS}`, )} > <ProjectSvgIcon @@ -409,7 +414,7 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { onClick={loadMoreChats} className={cn( "flex h-8 w-full items-center justify-start rounded-md px-3 text-left text-xs font-medium text-gray-500 transition-colors hover:text-gray-700", - "hover:bg-gray-100", + APP_SURFACE_HOVER_CLASS, )} > Load more @@ -436,8 +441,8 @@ export function AppSidebar({ isOpen, onToggle }: AppSidebarProps) { "rounded-xl border-white/60", !isOpen ? "hidden md:flex" : "", pathname === "/account" || isDropdownOpen - ? "bg-app-surface-active" - : "hover:bg-gray-100", + ? APP_SURFACE_ACTIVE_CLASS + : APP_SURFACE_HOVER_CLASS, )} title={!isOpen ? user.email : undefined} > diff --git a/frontend/src/app/components/shared/DocumentSidePanel.tsx b/frontend/src/app/components/shared/DocumentSidePanel.tsx index c971b71..68ea4c0 100644 --- a/frontend/src/app/components/shared/DocumentSidePanel.tsx +++ b/frontend/src/app/components/shared/DocumentSidePanel.tsx @@ -6,6 +6,7 @@ import { AlertCircle, Check, Download, + Eye, Loader2, Pencil, Trash2, @@ -164,6 +165,56 @@ export function DocumentSidePanel({ setMobilePane("document"); }, [doc?.id, versionId, currentVersionId]); + useEffect(() => { + if (!mounted || !doc) return; + + const handleOutsidePointerDown = (event: PointerEvent) => { + const target = event.target; + if ( + !(target instanceof Node) || + panelRef.current?.contains(target) + ) { + return; + } + + if ( + event + .composedPath() + .some( + (node) => + node instanceof HTMLElement && + node.hasAttribute("data-document-row"), + ) + ) { + return; + } + + if ( + extensionWarningOpen || + replaceConfirmOpen || + confirmDeleteDocumentOpen + ) { + return; + } + + onClose(); + }; + + document.addEventListener("pointerdown", handleOutsidePointerDown); + return () => + document.removeEventListener( + "pointerdown", + handleOutsidePointerDown, + ); + }, [ + confirmDeleteDocumentOpen, + doc, + extensionWarningOpen, + mounted, + onClose, + replaceConfirmOpen, + ]); + if (!mounted || !doc) return null; const activeDoc = doc; @@ -517,357 +568,337 @@ export function DocumentSidePanel({ <aside className={cn( - "mx-3 mb-3 min-h-0 flex-col overflow-hidden rounded-xl", + "mx-5 mt-2 min-h-0 flex-col", mobilePane === "details" ? "flex" : "hidden md:flex", - "border border-white/70 bg-white shadow-[0_3px_9px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-4px_9px_rgba(255,255,255,0.08)] backdrop-blur-2xl", )} > - <div className={cn("shrink-0 p-4")}> - <div className="mb-4"> - <div className="mb-3 text-xs font-medium text-gray-900"> - Name - </div> - {editingName ? ( - <div className="space-y-1.5"> - <div className="flex min-h-6 items-center gap-2"> - <input - value={nameDraft} - onChange={(e) => { - setNameDraft(e.target.value); - setNameError(null); - }} - onKeyDown={(e) => { - if (e.key === "Enter") { - e.preventDefault(); - void handleSaveName(); - } - if (e.key === "Escape") { - setEditingName(false); - setNameError(null); - } - }} - className="h-6 min-w-0 flex-1 border-0 border-b border-gray-300 bg-transparent px-0 text-xs leading-6 text-gray-900 outline-none transition-colors focus:border-gray-500" - autoFocus - /> - <button - type="button" - onClick={() => - void handleSaveName() - } - disabled={savingName} - className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-white/65 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40" - title="Save name" - > - {savingName ? ( - <Loader2 className="h-3.5 w-3.5 animate-spin" /> - ) : ( - <Check className="h-3.5 w-3.5" /> - )} - </button> - </div> - {nameError && ( - <div className="text-xs text-red-600"> - {nameError} - </div> - )} - </div> - ) : ( - <div className="flex min-h-6 items-center gap-2"> - <div className="min-w-0 flex-1 truncate text-xs leading-6 text-gray-800"> - {selectedFilename} - </div> - {selectedVersionId && ( - <button - type="button" - onClick={() => { - setNameDraft(selectedFilename); - setEditingName(true); - setNameError(null); - }} - className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-white/65 hover:text-gray-900" - title="Edit name" - > - <Pencil className="h-3.5 w-3.5" /> - </button> - )} - </div> - )} - </div> - + <div className="mb-4 shrink-0"> <div className="mb-3 text-xs font-medium text-gray-900"> - Document Data + Name </div> - <div className="rounded-xl bg-gray-100/70 px-3 py-3"> + {editingName ? ( <div className="space-y-1.5"> - <DataRow - label="Type" - value={selectedFileType ?? "—"} - /> - <DataRow - label="Size" - value={ - selectedSizeBytes != null - ? formatBytes(selectedSizeBytes) - : "—" - } - /> - <DataRow - label="Version" - value={ - selectedVersionNumber != null - ? String(selectedVersionNumber) - : "—" - } - /> - <DataRow label="Owner" value={ownerLabel} /> - <DataRow - label="Uploaded" - value={ - selectedUploadedAt - ? formatDateTime(selectedUploadedAt) - : "—" - } - /> - <DataRow - label="Pages" - value={ - selectedPageCount != null - ? String(selectedPageCount) - : "—" - } - /> - </div> - </div> - </div> - - <div className="flex min-h-0 flex-1 flex-col px-4 pt-0"> - <div className="mb-2 text-xs font-medium text-gray-900"> - Versions - </div> - <div - className={cn( - "flex min-h-0 flex-1 flex-col overflow-visible rounded-xl", - "bg-gray-100 px-2", - )} - > - <div className="min-h-0 flex-1 overflow-y-auto py-2"> - {versionsLoading && versions.length === 0 ? ( - <div className="space-y-1.5"> - {Array.from({ - length: versionSkeletonCount( - doc.active_version_number, - ), - }).map((_, index) => ( - <VersionUploadSkeleton - key={`version-skeleton-${index}`} - /> - ))} - </div> - ) : orderedVersions.length === 0 ? ( - <div className="py-2 text-xs text-gray-400"> - No version history. - </div> - ) : ( - <div className="space-y-1.5"> - {uploading && <VersionUploadSkeleton />} - {orderedVersions.map((version) => { - const title = - versionTitleFor(version); - const filename = - versionFilenameFor(version); - const selected = - selectedVersionId === - version.id; - const deleted = - version.deleted_at != null; - const versionDeleting = - deletingVersionId === - version.id; - const versionReplacing = - replacingVersionId === - version.id; - const fileType = fileTypeForVersion( - version, - doc.file_type, - ); - const typeLabel = - fileType === "pdf" - ? "PDF" - : "DOCX"; - return ( - <div - key={version.id} - role="button" - tabIndex={0} - onClick={() => { - if (deleted) return; - onSelectVersion( - version.id, - filename, - ); - }} - onKeyDown={(event) => { - if (deleted) return; - if ( - event.key !== - "Enter" && - event.key !== " " - ) - return; - event.preventDefault(); - onSelectVersion( - version.id, - filename, - ); - }} - aria-disabled={deleted} - className={cn( - "group relative flex w-full flex-col overflow-hidden rounded-lg border border-white/70 bg-white px-3 py-2 shadow-[0_1px_4px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.72)] backdrop-blur-xl transition-all hover:bg-white", - deleted - ? "cursor-not-allowed opacity-55" - : "cursor-pointer", - )} - > - {selected && ( - <span className="absolute inset-y-0 left-0 w-[3px] bg-blue-500" /> - )} - <div className="flex min-w-0 items-center gap-2"> - <div - className={cn( - "min-w-0 flex-1 truncate text-xs font-medium text-gray-800", - )} - > - {title} - </div> - <span - className={cn( - "shrink-0 text-[10px] font-semibold tracking-normal", - deleted - ? "text-gray-300" - : typeLabel === - "PDF" - ? "text-red-600" - : "text-blue-600", - )} - > - {typeLabel} - </span> - </div> - <div className="truncate text-[11px] text-gray-400"> - {filename} - </div> - <div className="flex min-w-0 items-center gap-2"> - <div className="min-w-0 flex-1 truncate text-[11px] text-gray-400"> - {version.created_at - ? new Date( - version.created_at, - ).toLocaleString() - : "—"} - </div> - <div - className={cn( - "flex h-5 shrink-0 items-center gap-0.5 transition-opacity", - deleted || - selected - ? "opacity-100" - : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100", - )} - > - {deleted ? ( - <span className="text-[11px] font-medium text-gray-800"> - Deleted - </span> - ) : ( - <> - <button - type="button" - onClick={( - event, - ) => { - event.stopPropagation(); - requestReplaceVersion( - version, - ); - }} - disabled={ - replacingVersionId != - null || - deletingVersionId != - null - } - className="inline-flex h-5 w-5 items-center justify-center rounded-full text-blue-500 transition-colors hover:bg-blue-50 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-40" - aria-label={`Replace ${title}`} - title="Replace version file" - > - {versionReplacing ? ( - <Loader2 className="h-3 w-3 animate-spin" /> - ) : ( - <Upload className="h-3 w-3" /> - )} - </button> - <button - type="button" - onClick={( - event, - ) => { - event.stopPropagation(); - void onDownloadVersion( - doc.id, - version.id, - filename, - ); - }} - className="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900" - aria-label={`Download ${title}`} - title="Download version" - > - <Download className="h-3 w-3" /> - </button> - <button - type="button" - onClick={( - event, - ) => { - event.stopPropagation(); - void handleDeleteVersion( - version.id, - ); - }} - disabled={ - (canDelete && - activeVersionCount <= - 1) || - deletingVersionId != - null - } - className={cn( - "inline-flex h-5 w-5 items-center justify-center rounded-full text-red-500 transition-colors hover:bg-red-50 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-40", - !canDelete && - "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-red-500", - )} - aria-label={`Delete ${title}`} - title={ - canDelete - ? "Delete version" - : "Only the document owner can delete versions" - } - > - {versionDeleting ? ( - <Loader2 className="h-3 w-3 animate-spin" /> - ) : ( - <Trash2 className="h-3 w-3" /> - )} - </button> - </> - )} - </div> - </div> - </div> - ); - })} + <div className="flex min-h-6 items-center gap-2"> + <input + value={nameDraft} + onChange={(e) => { + setNameDraft(e.target.value); + setNameError(null); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + void handleSaveName(); + } + if (e.key === "Escape") { + setEditingName(false); + setNameError(null); + } + }} + className="h-6 min-w-0 flex-1 border-0 border-b border-gray-300 bg-transparent px-0 text-xs leading-6 text-gray-900 outline-none transition-colors focus:border-gray-500" + autoFocus + /> + <button + type="button" + onClick={() => void handleSaveName()} + disabled={savingName} + className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-white/65 hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40" + title="Save name" + > + {savingName ? ( + <Loader2 className="h-3.5 w-3.5 animate-spin" /> + ) : ( + <Check className="h-3.5 w-3.5" /> + )} + </button> + </div> + {nameError && ( + <div className="text-xs text-red-600"> + {nameError} </div> )} </div> + ) : ( + <div className="flex min-h-6 items-center gap-2"> + <div className="min-w-0 flex-1 truncate text-xs leading-6 text-gray-800"> + {selectedFilename} + </div> + {selectedVersionId && ( + <button + type="button" + onClick={() => { + setNameDraft(selectedFilename); + setEditingName(true); + setNameError(null); + }} + className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-white/65 hover:text-gray-900" + title="Edit name" + > + <Pencil className="h-3.5 w-3.5" /> + </button> + )} + </div> + )} + </div> + + <div className="mb-3 shrink-0 text-xs font-medium text-gray-900"> + Document Data + </div> + <div className="shrink-0 rounded-xl py-2"> + <div className="space-y-1.5"> + <DataRow + label="Type" + value={selectedFileType ?? "—"} + /> + <DataRow + label="Size" + value={ + selectedSizeBytes != null + ? formatBytes(selectedSizeBytes) + : "—" + } + /> + <DataRow + label="Version" + value={ + selectedVersionNumber != null + ? String(selectedVersionNumber) + : "—" + } + /> + <DataRow label="Owner" value={ownerLabel} /> + <DataRow + label="Uploaded" + value={ + selectedUploadedAt + ? formatDateTime(selectedUploadedAt) + : "—" + } + /> + <DataRow + label="Pages" + value={ + selectedPageCount != null + ? String(selectedPageCount) + : "—" + } + /> + </div> + </div> + + <div className="mb-2 shrink-0 text-xs font-medium text-gray-900"> + Versions + </div> + <div + className={cn( + "flex min-h-0 flex-1 flex-col overflow-visible rounded-xl", + "bg-[#eceef1] px-2", + )} + > + <div className="min-h-0 flex-1 overflow-y-auto py-2"> + {versionsLoading && versions.length === 0 ? ( + <div className="space-y-1.5"> + {Array.from({ + length: versionSkeletonCount( + doc.active_version_number, + ), + }).map((_, index) => ( + <VersionUploadSkeleton + key={`version-skeleton-${index}`} + /> + ))} + </div> + ) : orderedVersions.length === 0 ? ( + <div className="py-2 text-xs text-gray-400"> + No version history. + </div> + ) : ( + <div className="space-y-1.5"> + {uploading && <VersionUploadSkeleton />} + {orderedVersions.map((version) => { + const title = versionTitleFor(version); + const filename = + versionFilenameFor(version); + const selected = + selectedVersionId === version.id; + const deleted = + version.deleted_at != null; + const versionDeleting = + deletingVersionId === version.id; + const versionReplacing = + replacingVersionId === version.id; + return ( + <div + key={version.id} + role="button" + tabIndex={0} + onClick={() => { + if (deleted) return; + onSelectVersion( + version.id, + filename, + ); + }} + onKeyDown={(event) => { + if (deleted) return; + if ( + event.key !== "Enter" && + event.key !== " " + ) + return; + event.preventDefault(); + onSelectVersion( + version.id, + filename, + ); + }} + aria-disabled={deleted} + className={cn( + "group relative flex w-full flex-col overflow-hidden rounded-lg border border-white/70 bg-white px-3 py-2 shadow-[0_1px_4px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.72)] backdrop-blur-xl transition-all hover:bg-white", + deleted + ? "cursor-not-allowed opacity-55" + : "cursor-pointer", + )} + > + <div className="flex min-w-0 items-center gap-1.5"> + <FileTypeIcon + fileType={filename} + className="h-3 w-3 shrink-0" + /> + <div + className={cn( + "min-w-0 flex-1 truncate text-xs font-medium text-gray-950", + )} + > + {filename} + </div> + <span + className={cn( + "inline-flex shrink-0 items-center gap-1 text-[11px] font-normal", + deleted + ? "text-gray-300" + : selected + ? "text-blue-500" + : "text-gray-400", + )} + > + {selected && + !deleted && ( + <Eye className="h-3 w-3" /> + )} + {title} + </span> + </div> + <div className="flex min-w-0 items-center gap-2"> + <div className="min-w-0 flex-1 truncate text-[11px] text-gray-400"> + {version.created_at + ? new Date( + version.created_at, + ).toLocaleString() + : "—"} + </div> + <div + className={cn( + "flex h-5 shrink-0 items-center gap-0.5 transition-opacity", + deleted || selected + ? "opacity-100" + : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100", + )} + > + {deleted ? ( + <span className="text-[11px] font-medium text-gray-800"> + Deleted + </span> + ) : ( + <> + <button + type="button" + onClick={( + event, + ) => { + event.stopPropagation(); + requestReplaceVersion( + version, + ); + }} + disabled={ + replacingVersionId != + null || + deletingVersionId != + null + } + className="inline-flex h-5 w-5 items-center justify-center rounded-full text-blue-500 transition-colors hover:bg-blue-50 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-40" + aria-label={`Replace ${title}`} + title="Replace version file" + > + {versionReplacing ? ( + <Loader2 className="h-3 w-3 animate-spin" /> + ) : ( + <Upload className="h-3 w-3" /> + )} + </button> + <button + type="button" + onClick={( + event, + ) => { + event.stopPropagation(); + void onDownloadVersion( + doc.id, + version.id, + filename, + ); + }} + className="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900" + aria-label={`Download ${title}`} + title="Download version" + > + <Download className="h-3 w-3" /> + </button> + <button + type="button" + onClick={( + event, + ) => { + event.stopPropagation(); + void handleDeleteVersion( + version.id, + ); + }} + disabled={ + (canDelete && + activeVersionCount <= + 1) || + deletingVersionId != + null + } + className={cn( + "inline-flex h-5 w-5 items-center justify-center rounded-full text-red-500 transition-colors hover:bg-red-50 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-40", + !canDelete && + "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-red-500", + )} + aria-label={`Delete ${title}`} + title={ + canDelete + ? "Delete version" + : "Only the document owner can delete versions" + } + > + {versionDeleting ? ( + <Loader2 className="h-3 w-3 animate-spin" /> + ) : ( + <Trash2 className="h-3 w-3" /> + )} + </button> + </> + )} + </div> + </div> + </div> + ); + })} + </div> + )} </div> </div> @@ -880,7 +911,7 @@ export function DocumentSidePanel({ <div className={cn( - "flex shrink-0 items-center justify-between px-4 py-3", + "flex shrink-0 items-center justify-between py-3", "bg-white/25", )} > @@ -990,7 +1021,7 @@ export function DocumentSidePanel({ function DataRow({ label, value }: { label: string; value: string }) { return ( <div className="grid grid-cols-[112px_minmax(0,1fr)] gap-2 text-xs"> - <span className="text-gray-400">{label}</span> + <span className="text-gray-600">{label}</span> <span className="truncate text-gray-800">{value}</span> </div> ); @@ -1001,10 +1032,15 @@ function VersionUploadSkeleton() { <div className="rounded-lg border border-white/70 bg-white px-3 py-2 shadow-[0_1px_4px_rgba(15,23,42,0.045),inset_0_1px_0_rgba(255,255,255,0.72)]"> <div className="animate-pulse space-y-2"> <div className="flex items-center justify-between gap-3"> - <div className="h-3 w-20 rounded-full bg-gray-200" /> - <div className="h-3 w-9 rounded-full bg-blue-100" /> + <div className="flex min-w-0 flex-1 items-center gap-1.5"> + <div className="h-3 w-3 shrink-0 rounded bg-gray-200" /> + <div className="h-3 w-3/5 rounded-full bg-gray-200" /> + </div> + <div className="flex shrink-0 items-center gap-1"> + <div className="h-3 w-3 rounded bg-gray-200" /> + <div className="h-[11px] w-12 rounded-full bg-gray-200" /> + </div> </div> - <div className="h-2.5 w-4/5 rounded-full bg-gray-200" /> <div className="h-2.5 w-2/5 rounded-full bg-gray-200" /> </div> </div> diff --git a/frontend/src/app/components/shared/FileDirectory.tsx b/frontend/src/app/components/shared/FileDirectory.tsx index 353d360..4b65ef2 100644 --- a/frontend/src/app/components/shared/FileDirectory.tsx +++ b/frontend/src/app/components/shared/FileDirectory.tsx @@ -12,6 +12,10 @@ import { SearchBar } from "@/app/components/ui/search-bar"; import { TabPillButton } from "@/app/components/ui/tab-pill-button"; import { SkeletonLine } from "./TablePrimitive"; import { useDirectoryData, type DirectoryTab } from "./useDirectoryData"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; const DIRECTORY_GRID_CLASS = "grid grid-cols-[14px_14px_minmax(0,1fr)_48px_84px_64px] items-center gap-2"; @@ -294,7 +298,9 @@ export function FileDirectory({ onClick={() => toggle(doc)} style={{ paddingLeft: indentedRowPadding(depth) }} className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pr-2 text-xs transition-all text-left ${ - selected ? "bg-gray-100" : "hover:bg-gray-100/70" + selected + ? APP_SURFACE_ACTIVE_CLASS + : APP_SURFACE_HOVER_CLASS }`} > <span @@ -344,7 +350,7 @@ export function FileDirectory({ type="button" onClick={() => toggleLibraryFolder(folder.id)} style={{ paddingLeft: indentedRowPadding(depth) }} - className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pr-2 text-xs transition-all text-left hover:bg-gray-100/70`} + className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pr-2 text-xs transition-all text-left ${APP_SURFACE_HOVER_CLASS}`} > <span role="checkbox" @@ -597,7 +603,7 @@ export function FileDirectory({ onClick={() => toggleFolder(project.id) } - className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} px-2 py-2 text-xs transition-all text-left hover:bg-gray-100/70`} + className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} px-2 py-2 text-xs transition-all text-left ${APP_SURFACE_HOVER_CLASS}`} > <span role="checkbox" @@ -672,8 +678,8 @@ export function FileDirectory({ } className={`w-full rounded-md ${DIRECTORY_GRID_CLASS} py-2 pl-7 pr-2 text-xs transition-all text-left ${ selected - ? "bg-gray-100" - : "hover:bg-gray-100/70" + ? APP_SURFACE_ACTIVE_CLASS + : APP_SURFACE_HOVER_CLASS }`} > <span diff --git a/frontend/src/app/components/shared/HeaderActionsMenu.tsx b/frontend/src/app/components/shared/HeaderActionsMenu.tsx index 31ebe7e..4ba0b15 100644 --- a/frontend/src/app/components/shared/HeaderActionsMenu.tsx +++ b/frontend/src/app/components/shared/HeaderActionsMenu.tsx @@ -10,6 +10,7 @@ import { LiquidDropdownItem, } from "@/app/components/ui/liquid-dropdown"; import { cn } from "@/app/lib/utils"; +import { APP_SURFACE_HOVER_CLASS } from "@/app/components/ui/liquid-surface"; export type HeaderActionsMenuItem = { label: string; @@ -33,7 +34,8 @@ export function HeaderActionsMenu({ type="button" className={cn( "inline-flex h-7 w-7 items-center justify-center rounded-full text-gray-600 transition-all", - "hover:bg-gray-100 hover:text-gray-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300", + APP_SURFACE_HOVER_CLASS, + "hover:text-gray-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300", )} aria-label={title} title={title} diff --git a/frontend/src/app/components/shared/PageHeader.tsx b/frontend/src/app/components/shared/PageHeader.tsx index b09c1b0..a7ca5f8 100644 --- a/frontend/src/app/components/shared/PageHeader.tsx +++ b/frontend/src/app/components/shared/PageHeader.tsx @@ -11,6 +11,11 @@ import { createPortal } from "react-dom"; import { ChevronLeft, Loader2, Plus, Search } from "lucide-react"; import { usePageChrome } from "@/app/contexts/PageChromeContext"; import { cn } from "@/app/lib/utils"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, + APP_SURFACE_PRESSED_CLASS, +} from "@/app/components/ui/liquid-surface"; export interface PageHeaderBreadcrumb { label?: ReactNode; @@ -308,7 +313,7 @@ function PageHeaderSearchActionControl({ className: "cursor-text justify-start gap-2 px-3 text-gray-700 hover:text-gray-700", }), - "w-56 bg-app-surface-active sm:w-80", + `w-56 sm:w-80 ${APP_SURFACE_ACTIVE_CLASS}`, )} > <Search className="h-3.5 w-3.5 text-gray-400 shrink-0" /> @@ -356,7 +361,9 @@ function pageHeaderActionControlClassName({ className, }: PageHeaderActionControlClassNameOptions = {}) { return cn( - "flex h-7 items-center justify-center rounded-full text-sm transition-colors hover:bg-app-surface-hover active:bg-app-surface-active disabled:cursor-default disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300", + "flex h-7 items-center justify-center rounded-full text-sm transition-colors disabled:cursor-default disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300", + APP_SURFACE_HOVER_CLASS, + APP_SURFACE_PRESSED_CLASS, iconOnly ? "w-7" : "w-7 gap-1.5 px-0 sm:w-auto sm:px-3", diff --git a/frontend/src/app/components/shared/RowActions.tsx b/frontend/src/app/components/shared/RowActions.tsx index 6bd1ab2..1ca5698 100644 --- a/frontend/src/app/components/shared/RowActions.tsx +++ b/frontend/src/app/components/shared/RowActions.tsx @@ -29,6 +29,7 @@ import { LiquidDropdownSurface, } from "@/app/components/ui/liquid-dropdown"; import { cn } from "@/app/lib/utils"; +import { APP_SURFACE_HOVER_CLASS } from "@/app/components/ui/liquid-surface"; export { CLOSE_ROW_ACTIONS_EVENT, closeRowActionMenus }; @@ -254,7 +255,7 @@ export function RowActions(props: Props) { <button ref={btnRef} onClick={handleToggle} - className="flex items-center justify-center w-6 h-6 rounded text-gray-700 hover:text-gray-900 hover:bg-app-surface-hover transition-colors leading-none" + className={`flex items-center justify-center w-6 h-6 rounded text-gray-700 hover:text-gray-900 transition-colors leading-none ${APP_SURFACE_HOVER_CLASS}`} > <span className="tracking-widest text-xs">···</span> </button> diff --git a/frontend/src/app/components/shared/SidebarChatItem.tsx b/frontend/src/app/components/shared/SidebarChatItem.tsx index 975a437..0940b91 100644 --- a/frontend/src/app/components/shared/SidebarChatItem.tsx +++ b/frontend/src/app/components/shared/SidebarChatItem.tsx @@ -16,6 +16,10 @@ import { OwnerOnlyPopup } from "@/app/components/popups/OwnerOnlyPopup"; import type { Chat } from "@/app/components/shared/types"; import { ChatSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; import { cn } from "@/app/lib/utils"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; interface Props { chat: Chat; @@ -55,8 +59,8 @@ export function SidebarChatItem({ chat, isActive, onSelect, projectName }: Props className={cn( "group relative flex h-8 w-full items-center rounded-md transition-colors", isActive - ? "bg-gray-200/60 pr-1" - : "pr-3 hover:bg-gray-100 hover:pr-1", + ? `${APP_SURFACE_ACTIVE_CLASS} pr-1` + : `pr-3 ${APP_SURFACE_HOVER_CLASS} hover:pr-1`, )} > {isRenaming ? ( diff --git a/frontend/src/app/components/shared/TablePrimitive.tsx b/frontend/src/app/components/shared/TablePrimitive.tsx index 9611850..a66545a 100644 --- a/frontend/src/app/components/shared/TablePrimitive.tsx +++ b/frontend/src/app/components/shared/TablePrimitive.tsx @@ -22,7 +22,12 @@ import { LiquidDropdownContent, LiquidDropdownItem, } from "@/app/components/ui/liquid-dropdown"; -import { LIQUID_TABLE_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_GROUP_HOVER_CLASS, + APP_SURFACE_HOVER_CLASS, + LIQUID_TABLE_SURFACE_CLASS, +} from "@/app/components/ui/liquid-surface"; export const CLOSE_ROW_ACTIONS_EVENT = "mike:close-row-actions"; @@ -84,8 +89,8 @@ export function TableFilters<T extends string>({ title={selected?.label ?? label} className={`flex h-[18px] w-[22px] items-center justify-center rounded-sm transition-colors ${ value - ? "text-gray-700 hover:bg-app-surface-hover hover:text-gray-900" - : "text-gray-400 hover:bg-app-surface-hover hover:text-gray-700" + ? `text-gray-700 ${APP_SURFACE_HOVER_CLASS} hover:text-gray-900` + : `text-gray-400 ${APP_SURFACE_HOVER_CLASS} hover:text-gray-700` }`} > <ChevronDown @@ -219,11 +224,13 @@ export function TableRow({ children, className, interactive = true, + selected = false, onContextMenu, rightClickDropdown, ...props }: DivProps & { interactive?: boolean; + selected?: boolean; rightClickDropdown?: | ReactNode | ((close: () => void, menuProps: DivProps) => ReactNode); @@ -274,7 +281,11 @@ export function TableRow({ <div className={cn( "group flex h-10 min-w-max items-center pr-3 transition-colors", - interactive && "cursor-pointer hover:bg-app-surface-hover", + interactive && "cursor-pointer", + interactive && + !selected && + APP_SURFACE_HOVER_CLASS, + selected && APP_SURFACE_ACTIVE_CLASS, className, )} onContextMenu={handleContextMenu} @@ -326,7 +337,7 @@ export function TableStickyCell({ header ? "z-[80] items-center self-stretch" : "py-2 transition-colors", - !header && hover && "group-hover:bg-app-surface-hover", + !header && hover && APP_SURFACE_GROUP_HOVER_CLASS, className, )} > @@ -389,8 +400,11 @@ export function TablePrimaryCell({ return ( <TableStickyCell widthClassName={widthClassName} - bgClassName={bgClassName} + bgClassName={ + selected ? APP_SURFACE_ACTIVE_CLASS : bgClassName + } className={className} + hover={!selected} > <div className="flex min-w-0 items-center"> <input diff --git a/frontend/src/app/components/tabular/TRChatPanel.tsx b/frontend/src/app/components/tabular/TRChatPanel.tsx index b7c6d83..3ab5163 100644 --- a/frontend/src/app/components/tabular/TRChatPanel.tsx +++ b/frontend/src/app/components/tabular/TRChatPanel.tsx @@ -42,7 +42,11 @@ import { type ModelProvider, } from "@/app/lib/modelAvailability"; import type { ApiKeyState } from "@/app/lib/mikeApi"; -import { LIQUID_PANEL_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, + LIQUID_PANEL_SURFACE_CLASS, +} from "@/app/components/ui/liquid-surface"; import { LiquidDropdownButton, LiquidDropdownSurface, @@ -637,7 +641,7 @@ function HistoryDropdown({ setRenamingChatId(null); }} onBlur={() => commitRename(chat.id)} - className="w-full rounded-lg bg-app-surface-active px-2 py-1.5 text-xs text-gray-700 outline-none" + className={`w-full rounded-lg px-2 py-1.5 text-xs text-gray-700 outline-none ${APP_SURFACE_ACTIVE_CLASS}`} /> ); } @@ -669,7 +673,7 @@ function HistoryDropdown({ }} title="Chat options" className={cn( - "absolute right-1.5 flex h-5 w-5 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-app-surface-hover hover:text-gray-700", + `absolute right-1.5 flex h-5 w-5 items-center justify-center rounded-full text-gray-400 transition-colors hover:text-gray-700 ${APP_SURFACE_HOVER_CLASS}`, menu?.chatId === chat.id ? "opacity-100" : "opacity-0 group-hover:opacity-100", @@ -741,8 +745,7 @@ function findLastContentIndex(events: AssistantEvent[]): number { const HEADER_PILL_CLASS = "flex shrink-0 items-center gap-1 rounded-full border border-white/70 bg-app-surface px-1 py-0.5 shadow-[0_8px_24px_rgba(15,23,42,0.06)] backdrop-blur-2xl"; -const HEADER_PILL_BUTTON_CLASS = - "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-app-surface-hover hover:text-gray-900"; +const HEADER_PILL_BUTTON_CLASS = `flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:text-gray-900 ${APP_SURFACE_HOVER_CLASS}`; // --------------------------------------------------------------------------- // Main component @@ -1795,7 +1798,7 @@ export function TRChatPanel({ <button onClick={() => setHistoryOpen((v) => !v)} title="Chat history" - className="flex h-5 min-w-0 items-center gap-1 rounded-full px-1.5 text-gray-700 transition-colors hover:bg-app-surface-hover" + className={`flex h-5 min-w-0 items-center gap-1 rounded-full px-1.5 text-gray-700 transition-colors ${APP_SURFACE_HOVER_CLASS}`} > <span className="min-w-0 truncate text-xs font-medium"> {currentChatTitle ?? "New chat"} diff --git a/frontend/src/app/components/tabular/TRSidePanel.tsx b/frontend/src/app/components/tabular/TRSidePanel.tsx index 23b6e8b..47e7d23 100644 --- a/frontend/src/app/components/tabular/TRSidePanel.tsx +++ b/frontend/src/app/components/tabular/TRSidePanel.tsx @@ -1,6 +1,12 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { + type PointerEvent as ReactPointerEvent, + type ReactNode, + useEffect, + useRef, + useState, +} from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; @@ -8,23 +14,27 @@ import { ChevronDown, ChevronLeft, ChevronRight, + ChevronUp, Loader2, + PanelLeft, RefreshCw, X, } from "lucide-react"; -import type { - ColumnConfig, - Document, - TabularCell, -} from "../shared/types"; +import type { ColumnConfig, Document, TabularCell } from "../shared/types"; import { isSpreadsheetFilename } from "../shared/types"; import { preprocessCitations, type ParsedCitation } from "./citation-utils"; import { getPillClass } from "./pillUtils"; import { PdfView } from "../shared/views/PdfView"; import { SpreadsheetView } from "../shared/views/SpreadsheetView"; import { DocxView } from "../shared/views/DocxView"; +import { FileTypeIcon } from "../shared/FileTypeIcon"; +import { CitationQuotesHeader } from "../assistant/CitationQuotesHeader"; import { cn } from "@/app/lib/utils"; -import { LIQUID_PANEL_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; +import { + APP_SURFACE_HOVER_CLASS, + APP_SURFACE_PRESSED_CLASS, + LIQUID_PANEL_SURFACE_CLASS, +} from "@/app/components/ui/liquid-surface"; function isDocxDocument(d: { file_type?: string | null; @@ -39,10 +49,11 @@ function isDocxDocument(d: { interface Props { cell: TabularCell; document: Document; + documents: Document[]; column: ColumnConfig; columns: ColumnConfig[]; onClose: () => void; - onNavigate: (columnIndex: number) => void; + onNavigate: (documentId: string, columnIndex: number) => void; onRegenerate?: () => Promise<void>; /** If true, open the document panel immediately */ displayDocument?: boolean; @@ -50,8 +61,22 @@ interface Props { citationQuote?: string; /** Page to scroll to when opening document panel */ citationPage?: number; + /** Spreadsheet worksheet containing the cited cell */ + citationSheet?: string; + /** Spreadsheet A1 cell address or range */ + citationCell?: string; + /** One-based citation number shown in the cell content */ + citationRef?: number; } +type TRPanelCitation = { + quote: string; + page?: number; + sheet?: string; + cell?: string; + citationRef?: number; +}; + const FLAG_BADGE: Record<string, string> = { green: "bg-emerald-600 backdrop-blur-md border border-emerald-300/20 text-white shadow-md", grey: "bg-slate-500 backdrop-blur-md border border-slate-300/20 text-white shadow-md", @@ -59,6 +84,11 @@ const FLAG_BADGE: Record<string, string> = { red: "bg-red-600 backdrop-blur-md border border-red-300/20 text-white shadow-md", }; +const MIN_DOCUMENT_PANE_WIDTH = 420; +const DEFAULT_DOCUMENT_PANE_WIDTH = 600; +const MAX_DOCUMENT_PANE_WIDTH = 1000; +const INFO_PANE_WIDTH = 300; + // --------------------------------------------------------------------------- // TRSidePanel // --------------------------------------------------------------------------- @@ -66,6 +96,7 @@ const FLAG_BADGE: Record<string, string> = { export function TRSidePanel({ cell, document: doc, + documents, column, columns, onClose, @@ -74,25 +105,47 @@ export function TRSidePanel({ displayDocument = false, citationQuote, citationPage, + citationSheet, + citationCell, + citationRef, }: Props) { const sortedColumns = [...columns].sort((a, b) => a.index - b.index); const currentPos = sortedColumns.findIndex((c) => c.index === column.index); - const prevColumn = currentPos > 0 ? sortedColumns[currentPos - 1] : null; + const previousColumn = + currentPos > 0 ? sortedColumns[currentPos - 1] : null; const nextColumn = - currentPos < sortedColumns.length - 1 + currentPos >= 0 && currentPos < sortedColumns.length - 1 ? sortedColumns[currentPos + 1] : null; + const currentDocumentPos = documents.findIndex( + (candidate) => candidate.id === doc.id, + ); + const previousDocument = + currentDocumentPos > 0 ? documents[currentDocumentPos - 1] : null; + const nextDocument = + currentDocumentPos >= 0 && currentDocumentPos < documents.length - 1 + ? documents[currentDocumentPos + 1] + : null; const [regenerating, setRegenerating] = useState(false); - const [quoteExpanded, setQuoteExpanded] = useState(false); - const [isTruncated, setIsTruncated] = useState(false); - const quoteParagraphRef = useRef<HTMLParagraphElement>(null); + const [documentPaneOpen, setDocumentPaneOpen] = useState(displayDocument); + const [documentPaneWidth, setDocumentPaneWidth] = useState( + DEFAULT_DOCUMENT_PANE_WIDTH, + ); + const panelRef = useRef<HTMLDivElement>(null); + const resizePointerId = useRef<number | null>(null); + const resizeStartX = useRef(0); + const resizeStartWidth = useRef(DEFAULT_DOCUMENT_PANE_WIDTH); // Internal state — initialised from props, also toggled by badge clicks inside the panel - const [docCitation, setDocCitation] = useState< - { quote: string; page: number } | undefined - >( + const [docCitation, setDocCitation] = useState<TRPanelCitation | undefined>( displayDocument && citationQuote - ? { quote: citationQuote, page: citationPage ?? 1 } + ? { + quote: citationQuote, + page: citationPage, + sheet: citationSheet, + cell: citationCell, + citationRef, + } : undefined, ); @@ -100,17 +153,100 @@ export function TRSidePanel({ useEffect(() => { setDocCitation( displayDocument && citationQuote - ? { quote: citationQuote, page: citationPage ?? 1 } + ? { + quote: citationQuote, + page: citationPage, + sheet: citationSheet, + cell: citationCell, + citationRef, + } : undefined, ); - setQuoteExpanded(false); - }, [cell.id, displayDocument, citationQuote, citationPage]); + setDocumentPaneOpen(displayDocument); + }, [ + cell.id, + displayDocument, + citationCell, + citationPage, + citationQuote, + citationRef, + citationSheet, + ]); + + useEffect( + () => () => { + document.body.style.cursor = ""; + document.body.style.userSelect = ""; + }, + [], + ); useEffect(() => { - const el = quoteParagraphRef.current; - if (!el || quoteExpanded) return; - setIsTruncated(el.scrollWidth > el.clientWidth); - }, [docCitation?.quote, quoteExpanded]); + const handleOutsidePointerDown = (event: PointerEvent) => { + const target = event.target; + if ( + !(target instanceof Node) || + panelRef.current?.contains(target) + ) { + return; + } + onClose(); + }; + + document.addEventListener("pointerdown", handleOutsidePointerDown); + return () => + document.removeEventListener( + "pointerdown", + handleOutsidePointerDown, + ); + }, [onClose]); + + function handleDocumentResizePointerDown( + event: ReactPointerEvent<HTMLDivElement>, + ) { + event.preventDefault(); + resizePointerId.current = event.pointerId; + resizeStartX.current = event.clientX; + resizeStartWidth.current = documentPaneWidth; + event.currentTarget.setPointerCapture(event.pointerId); + document.body.style.cursor = "col-resize"; + document.body.style.userSelect = "none"; + } + + function handleDocumentResizePointerMove( + event: ReactPointerEvent<HTMLDivElement>, + ) { + if (resizePointerId.current !== event.pointerId) return; + + const viewportMax = window.innerWidth - INFO_PANE_WIDTH - 2 * 12 - 24; + const maxWidth = Math.max( + MIN_DOCUMENT_PANE_WIDTH, + Math.min(MAX_DOCUMENT_PANE_WIDTH, viewportMax), + ); + const nextWidth = + resizeStartWidth.current + (resizeStartX.current - event.clientX); + + setDocumentPaneWidth( + Math.min(maxWidth, Math.max(MIN_DOCUMENT_PANE_WIDTH, nextWidth)), + ); + } + + function handleDocumentResizePointerEnd( + event: ReactPointerEvent<HTMLDivElement>, + ) { + if (resizePointerId.current !== event.pointerId) return; + if (event.currentTarget.hasPointerCapture(event.pointerId)) { + event.currentTarget.releasePointerCapture(event.pointerId); + } + resizePointerId.current = null; + document.body.style.cursor = ""; + document.body.style.userSelect = ""; + } + + function handleCitationOpen(citation: TRPanelCitation) { + setDocCitation(citation); + setDocumentPaneOpen(true); + } const { processed: summaryText, citations: summaryCitations } = preprocessCitations(cell.content?.summary ?? ""); @@ -119,74 +255,97 @@ export function TRSidePanel({ return ( <div + ref={panelRef} className={cn( "fixed z-100 flex flex-row", LIQUID_PANEL_SURFACE_CLASS, "right-3 top-3 bottom-3 overflow-hidden", )} > - {/* Document panel — left, 600px */} - {docCitation !== undefined && ( - <div className="relative flex w-[600px] shrink-0 flex-col border-r border-white/30 px-3 pb-3"> + {/* Resizable document panel — left */} + {documentPaneOpen && ( + <div + className="relative flex shrink-0 flex-col border-r border-white/30 px-3 pb-3" + style={{ width: documentPaneWidth }} + > + <div + onPointerDown={handleDocumentResizePointerDown} + onPointerMove={handleDocumentResizePointerMove} + onPointerUp={handleDocumentResizePointerEnd} + onPointerCancel={handleDocumentResizePointerEnd} + className="absolute inset-y-0 left-0 z-20 w-1.5 cursor-col-resize touch-none bg-transparent transition-colors hover:bg-blue-400/60" + title="Resize document pane" + /> {/* Doc header */} - <div className="flex items-center gap-2 pt-3 shrink-0 border-b border-white/30"> - <p - className="flex-1 truncate text-sm font-semibold font-sans text-slate-700 font-serif" - title={doc.filename} - > - {doc.filename} - </p> - <button - onClick={() => setDocCitation(undefined)} - className="shrink-0 rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-white/40 hover:text-slate-600" - > - <X className="h-4 w-4" /> - </button> + <div className="flex min-h-11 shrink-0 items-center gap-3"> + <div className="flex min-w-0 items-center gap-2"> + <FileTypeIcon + fileType={doc.file_type ?? doc.filename} + className="h-4 w-4" + /> + <div + className="min-w-0 truncate text-sm font-medium text-gray-700" + title={doc.filename} + > + {doc.filename} + </div> + </div> </div> {/* Quote row */} - {docCitation.quote && ( - <div className="py-2 shrink-0"> - <div className="w-full rounded-md bg-gray-50 border border-gray-200 px-2 py-2"> - <button - onClick={() => - isTruncated || quoteExpanded - ? setQuoteExpanded((v) => !v) - : undefined - } - className={`flex w-full items-start gap-1 text-left ${!(isTruncated || quoteExpanded) ? "cursor-default" : ""}`} - > - <p - ref={quoteParagraphRef} - className={`flex-1 text-sm text-gray-600 ${quoteExpanded ? "" : "truncate"}`} - > - "{docCitation.quote}" - </p> - {(isTruncated || quoteExpanded) && ( - <ChevronDown - className={`mt-0.5 h-3 w-3 shrink-0 text-gray-500 transition-transform ${quoteExpanded ? "rotate-180" : ""}`} - /> - )} - </button> - </div> + {docCitation?.quote && ( + <div className="-mx-3 shrink-0 py-2"> + <CitationQuotesHeader + quotes={[ + { + id: citationKey(cell.id, docCitation), + quote: docCitation.quote, + inlineDetail: + formatCitationLocation(docCitation), + citationText: `${doc.filename}, ${formatCitationLocation(docCitation)}`, + }, + ]} + activeQuoteId={citationKey( + cell.id, + docCitation, + )} + citationRef={docCitation.citationRef} + citationText={`${doc.filename}, ${formatCitationLocation(docCitation)}`} + /> </div> )} {isDocxDocument(doc) && !doc.pdf_storage_path ? ( <DocxView documentId={doc.id} - quotes={[ - { - page: docCitation.page, - quote: docCitation.quote, - }, - ]} + quotes={ + docCitation + ? [ + { + page: docCitation.page, + quote: docCitation.quote, + }, + ] + : undefined + } /> ) : isSpreadsheetFilename(doc.filename ?? "") ? ( - <SpreadsheetView documentId={doc.id} /> + <SpreadsheetView + documentId={doc.id} + highlightCells={ + docCitation?.sheet || docCitation?.cell + ? [ + { + sheet: docCitation.sheet, + cell: docCitation.cell, + }, + ] + : undefined + } + /> ) : ( <PdfView doc={{ document_id: doc.id }} - quote={docCitation.quote} - fallbackPage={docCitation.page} + quote={docCitation?.quote} + fallbackPage={docCitation?.page} /> )} </div> @@ -195,32 +354,28 @@ export function TRSidePanel({ {/* Info column — right, 300px fixed */} <div className="flex w-[300px] shrink-0 flex-col overflow-hidden"> {/* Header */} - <div className="flex items-center justify-end gap-3 px-5 pt-3 pb-1 shrink-0 border-b border-white/30"> - <div className="flex items-center gap-1 mr-auto"> - <button - onClick={() => - prevColumn && onNavigate(prevColumn.index) - } - disabled={!prevColumn} - title={prevColumn ? prevColumn.name : undefined} - className="rounded-lg p-0.5 text-slate-600 transition-colors hover:bg-slate-200 hover:text-slate-900 disabled:opacity-30 disabled:cursor-default" - > - <ChevronLeft className="h-4 w-4" /> - </button> - <span className="text-xs text-slate-600 font-sans tabular-nums"> - {currentPos + 1} / {sortedColumns.length} - </span> - <button - onClick={() => - nextColumn && onNavigate(nextColumn.index) - } - disabled={!nextColumn} - title={nextColumn ? nextColumn.name : undefined} - className="rounded-lg p-0.5 text-slate-600 transition-colors hover:bg-slate-200 hover:text-slate-900 disabled:opacity-30 disabled:cursor-default" - > - <ChevronRight className="h-4 w-4" /> - </button> - </div> + <div className="mb-2 flex min-h-11 shrink-0 items-center justify-end gap-1.5 border-b border-white/30 px-3"> + <button + type="button" + onClick={() => setDocumentPaneOpen((open) => !open)} + className={cn( + "mr-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-gray-500 transition-colors hover:bg-white/75 hover:text-gray-700", + documentPaneOpen && "bg-white/55 text-gray-700", + )} + aria-label={ + documentPaneOpen + ? "Collapse document pane" + : "Expand document pane" + } + title={ + documentPaneOpen + ? "Collapse document pane" + : "Expand document pane" + } + aria-pressed={documentPaneOpen} + > + <PanelLeft className="h-4 w-4" /> + </button> {onRegenerate && ( <button onClick={async () => { @@ -243,31 +398,51 @@ export function TRSidePanel({ </button> )} <button + type="button" onClick={onClose} - className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600" + className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/70 bg-white/55 text-gray-500 shadow-[inset_0_1px_0_rgba(255,255,255,0.75),inset_0_-1px_0_rgba(255,255,255,0.55),0_6px_18px_rgba(15,23,42,0.08)] backdrop-blur-xl transition-colors hover:bg-white/75 hover:text-gray-700" + aria-label="Close" > - <X className="h-4 w-4" /> + <X className="h-3.5 w-3.5" /> </button> </div> {/* Analysis panel */} <div className="flex-1 overflow-y-auto"> <div className="pb-2 px-5"> - {/* Column name */} - <div className="mb-1"> - <span className="text-lg font-semibold text-slate-900"> - {column.name} - </span> + {/* Document field */} + <div className="mb-4"> + <div className="mb-3 text-xs font-medium text-gray-900"> + Document + </div> + <div className="flex min-h-6 items-center gap-1.5"> + <FileTypeIcon + fileType={doc.file_type ?? doc.filename} + className="h-3 w-3" + /> + <div + className="min-w-0 flex-1 truncate text-xs leading-6 text-gray-800" + title={doc.filename} + > + {doc.filename} + </div> + </div> + </div> + + {/* Column field */} + <div className="mb-4"> + <div className="mb-3 text-xs font-medium text-gray-900"> + Column + </div> + <div className="min-h-6 truncate text-xs leading-6 text-gray-800"> + {column.name} + </div> </div> - {/* Document name */} - <p className="text-xs mb-4"> - {doc.filename} - </p> {/* Flag section */} {cell.content?.flag && ( <div className="mb-5"> - <h4 className="mb-2 text-sm font-semibold tracking-wider font-sans"> + <h4 className="mb-2 text-xs font-medium text-gray-900"> Flag </h4> <span @@ -281,13 +456,13 @@ export function TRSidePanel({ {/* Results */} <div className="mb-6"> - <h4 className="mb-2 text-sm font-semibold tracking-wider font-sans"> + <h4 className="mb-2 text-xs font-medium text-gray-900"> Results </h4> <div className="text-xs leading-relaxed text-slate-600"> <MarkdownContent citations={summaryCitations} - onCitationClick={setDocCitation} + onCitationClick={handleCitationOpen} column={column} > {summaryText || "—"} @@ -298,13 +473,13 @@ export function TRSidePanel({ {/* Reasoning */} {cell.content?.reasoning && ( <div> - <h4 className="mb-2 text-sm font-semibold tracking-wider font-sans"> + <h4 className="mb-2 text-xs font-medium text-gray-900"> Reasoning </h4> <div className="text-xs leading-relaxed text-slate-600"> <MarkdownContent citations={reasoningCitations} - onCitationClick={setDocCitation} + onCitationClick={handleCitationOpen} citationOffset={summaryCitations.length} column={column} inline @@ -316,15 +491,116 @@ export function TRSidePanel({ )} </div> </div> + <div className="flex shrink-0 justify-center bg-white/25 pb-7 pt-1"> + <div className="grid grid-cols-3 grid-rows-3 gap-0.5"> + <CellNavigatorButton + className="col-start-2 row-start-1" + label="Previous document" + title={previousDocument?.filename} + disabled={!previousDocument} + onClick={() => + previousDocument && + onNavigate(previousDocument.id, column.index) + } + > + <ChevronUp className="h-4 w-4" /> + </CellNavigatorButton> + <CellNavigatorButton + className="col-start-1 row-start-2" + label="Previous column" + title={previousColumn?.name} + disabled={!previousColumn} + onClick={() => + previousColumn && + onNavigate(doc.id, previousColumn.index) + } + > + <ChevronLeft className="h-4 w-4" /> + </CellNavigatorButton> + <div className="col-start-2 row-start-2 h-7 w-7 rounded-md bg-white/35" /> + <CellNavigatorButton + className="col-start-3 row-start-2" + label="Next column" + title={nextColumn?.name} + disabled={!nextColumn} + onClick={() => + nextColumn && + onNavigate(doc.id, nextColumn.index) + } + > + <ChevronRight className="h-4 w-4" /> + </CellNavigatorButton> + <CellNavigatorButton + className="col-start-2 row-start-3" + label="Next document" + title={nextDocument?.filename} + disabled={!nextDocument} + onClick={() => + nextDocument && + onNavigate(nextDocument.id, column.index) + } + > + <ChevronDown className="h-4 w-4" /> + </CellNavigatorButton> + </div> + </div> </div> </div> ); } +function CellNavigatorButton({ + label, + title, + disabled, + onClick, + className, + children, +}: { + label: string; + title?: string; + disabled: boolean; + onClick: () => void; + className?: string; + children: ReactNode; +}) { + return ( + <button + type="button" + onClick={onClick} + disabled={disabled} + aria-label={label} + title={title ? `${label}: ${title}` : label} + className={cn( + "flex h-7 w-7 items-center justify-center rounded-md text-gray-600 transition-colors disabled:cursor-default disabled:opacity-25", + APP_SURFACE_HOVER_CLASS, + APP_SURFACE_PRESSED_CLASS, + className, + )} + > + {children} + </button> + ); +} + // --------------------------------------------------------------------------- // Markdown renderer // --------------------------------------------------------------------------- +function formatCitationLocation(citation: ParsedCitation): string { + if (citation.sheet && citation.cell) { + return `${citation.sheet}, cell ${citation.cell}`; + } + return `Page ${citation.page ?? 1}`; +} + +function citationKey(cellId: string, citation: ParsedCitation): string { + const location = citation.sheet + ? `${citation.sheet}:${citation.cell ?? ""}` + : `page:${citation.page ?? 1}`; + return `tr-cell:${cellId}:${location}`; +} + function CitationBadge({ index, citation, @@ -332,16 +608,24 @@ function CitationBadge({ }: { index: number; citation: ParsedCitation; - onClick: (c: { quote: string; page: number }) => void; + onClick: (citation: TRPanelCitation) => void; }) { return ( <button type="button" data-page={citation.page} + data-sheet={citation.sheet} + data-cell={citation.cell} data-quote={citation.quote} - title={`Page ${citation.page}: "${citation.quote}"`} + title={`${formatCitationLocation(citation)}: "${citation.quote}"`} onClick={() => - onClick({ quote: citation.quote, page: citation.page }) + onClick({ + quote: citation.quote, + page: citation.page, + sheet: citation.sheet, + cell: citation.cell, + citationRef: index + 1, + }) } className="inline-flex items-center justify-center rounded-full bg-gray-200 w-3.5 h-3.5 text-[9px] font-medium text-gray-700 align-super cursor-pointer hover:bg-gray-300 transition-colors" > @@ -360,7 +644,7 @@ function MarkdownContent({ }: { children: string; citations: ParsedCitation[]; - onCitationClick: (c: { quote: string; page: number }) => void; + onCitationClick: (citation: TRPanelCitation) => void; inline?: boolean; citationOffset?: number; column?: ColumnConfig; diff --git a/frontend/src/app/components/tabular/TRTable.tsx b/frontend/src/app/components/tabular/TRTable.tsx index 35e0aa4..1da4b26 100644 --- a/frontend/src/app/components/tabular/TRTable.tsx +++ b/frontend/src/app/components/tabular/TRTable.tsx @@ -22,6 +22,11 @@ import { } from "../shared/TablePrimitive"; import { PillButton } from "@/app/components/ui/pill-button"; import { TabularReviewSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_GROUP_HOVER_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; const SKELETON_COLS = 4; const SKELETON_ROWS = 5; @@ -30,7 +35,6 @@ const COL_W = "w-[300px] shrink-0"; const DOC_COL_W = "w-[332px] shrink-0"; const TR_STICKY_CELL_BG = "bg-app-surface"; const TR_HEADER_BG = "bg-app-surface"; -const TR_ACTIVE_ROW_BG = "bg-app-surface-active"; // Pixel widths matching the CSS constants above const DOC_COL_W_PX = 332; @@ -54,7 +58,14 @@ interface Props { highlightedCell?: { colIdx: number; rowIdx: number } | null; onSelectionChange: (ids: string[]) => void; onExpand: (cell: TabularCell) => void; - onCitationClick: (cell: TabularCell, page: number, quote: string) => void; + onCitationClick: ( + cell: TabularCell, + page: number | undefined, + quote: string, + citationRef: number, + sheet?: string, + citationCell?: string, + ) => void; onUpdateColumn: (col: ColumnConfig) => void; onDeleteColumn: (colIndex: number) => void; onAddColumn: () => void; @@ -186,7 +197,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( {Array.from({ length: SKELETON_ROWS }).map((_, row) => ( <div key={row} - className="flex h-10" + className="flex h-8" style={{ minWidth: skeletonContentWidth }} > <div className={`sticky left-0 z-[60] ${DOC_COL_W} ${TR_STICKY_CELL_BG} flex items-center border-b border-r border-gray-200 py-2 pl-4 pr-2`}> @@ -324,7 +335,7 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( {uploadingFilenames.map((filename) => ( <div key={`uploading-${filename}`} - className="flex h-10" + className="flex h-8" style={{ minWidth: totalContentWidth }} > <div @@ -352,20 +363,21 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( </div> ))} {documents.map((doc, docIdx) => { - const rowBg = selectedDocIds.includes(doc.id) - ? TR_ACTIVE_ROW_BG - : "bg-transparent"; - const stickyRowBg = selectedDocIds.includes(doc.id) - ? TR_ACTIVE_ROW_BG + const isSelected = selectedDocIds.includes(doc.id); + const rowBg = isSelected + ? APP_SURFACE_ACTIVE_CLASS + : APP_SURFACE_HOVER_CLASS; + const stickyRowBg = isSelected + ? APP_SURFACE_ACTIVE_CLASS : TR_STICKY_CELL_BG; return ( <div key={doc.id} - className={`flex ${rowBg}`} + className={`group flex transition-colors ${rowBg}`} style={{ minWidth: totalContentWidth }} > <div - className={`sticky left-0 z-[60] ${DOC_COL_W} border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs text-gray-800 flex items-center ${stickyRowBg}`} + className={`sticky left-0 z-[60] ${DOC_COL_W} border-b border-r border-gray-200 py-2 pl-4 pr-2 text-xs text-gray-800 flex items-center transition-colors ${stickyRowBg} ${isSelected ? "" : APP_SURFACE_GROUP_HOVER_CLASS}`} > <input type="checkbox" @@ -402,11 +414,17 @@ export const TRTable = forwardRef<TRTableHandle, Props>(function TRTable( onCitationClick={( page, quote, + citationRef, + sheet, + citationCell, ) => onCitationClick( cell, page, quote, + citationRef, + sheet, + citationCell, ) } /> diff --git a/frontend/src/app/components/tabular/TabularCell.tsx b/frontend/src/app/components/tabular/TabularCell.tsx index 4a2e09e..41fbdb0 100644 --- a/frontend/src/app/components/tabular/TabularCell.tsx +++ b/frontend/src/app/components/tabular/TabularCell.tsx @@ -14,7 +14,13 @@ interface Props { column?: ColumnConfig; closeSignal?: number; onExpand: () => void; - onCitationClick?: (page: number, quote: string) => void; + onCitationClick?: ( + page: number | undefined, + quote: string, + citationRef: number, + sheet?: string, + cell?: string, + ) => void; } const FLAG_STYLES = { @@ -63,7 +69,13 @@ function CellMarkdown({ citations: ParsedCitation[]; pills: string[]; column?: ColumnConfig; - onCitationClick?: (page: number, quote: string) => void; + onCitationClick?: ( + page: number | undefined, + quote: string, + citationRef: number, + sheet?: string, + cell?: string, + ) => void; onExpand: () => void; inline?: boolean; }) { @@ -108,13 +120,16 @@ function CellMarkdown({ if (citation) { return ( <span - title={`Page ${citation.page}: "${citation.quote}"`} + title={`${formatCitationLocation(citation)}: "${citation.quote}"`} onClick={(e) => { e.stopPropagation(); if (onCitationClick) { onCitationClick( citation.page, citation.quote, + idx + 1, + citation.sheet, + citation.cell, ); } else { onExpand(); @@ -156,6 +171,13 @@ function CellMarkdown({ ); } +function formatCitationLocation(citation: ParsedCitation): string { + if (citation.sheet && citation.cell) { + return `${citation.sheet}!${citation.cell}`; + } + return `Page ${citation.page ?? 1}`; +} + export function TabularCell({ cell, column, @@ -210,9 +232,15 @@ export function TabularCell({ const firstLine = processed.split("\n").find((l) => l.trim()) ?? processed; const collapsedDisplay = firstLine.replace(/^[-*•]\s+/, ""); - function handleCitationClickInOverlay(page: number, quote: string) { + function handleCitationClickInOverlay( + page: number | undefined, + quote: string, + citationRef: number, + sheet?: string, + citationCell?: string, + ) { setInlineExpanded(false); - onCitationClick?.(page, quote); + onCitationClick?.(page, quote, citationRef, sheet, citationCell); } function handleSeeDetails() { diff --git a/frontend/src/app/components/tabular/TabularReviewView.tsx b/frontend/src/app/components/tabular/TabularReviewView.tsx index 6f1310c..760fd15 100644 --- a/frontend/src/app/components/tabular/TabularReviewView.tsx +++ b/frontend/src/app/components/tabular/TabularReviewView.tsx @@ -97,7 +97,13 @@ export function TRView({ reviewId, projectId }: Props) { const { user } = useAuth(); const [expandedCell, setExpandedCell] = useState<TabularCell | null>(null); const [expandedCellCitation, setExpandedCellCitation] = useState< - { quote: string; page: number } | undefined + { + quote: string; + page?: number; + sheet?: string; + cell?: string; + citationRef: number; + } | undefined >(undefined); const [selectedDocIds, setSelectedDocIds] = useState<string[]>([]); const [actionsOpen, setActionsOpen] = useState(false); @@ -981,9 +987,22 @@ export function TRView({ reviewId, projectId }: Props) { setExpandedCell(cell); setExpandedCellCitation(undefined); }} - onCitationClick={(cell, page, quote) => { + onCitationClick={( + cell, + page, + quote, + citationRef, + sheet, + citationCell, + ) => { setExpandedCell(cell); - setExpandedCellCitation({ quote, page }); + setExpandedCellCitation({ + quote, + page, + sheet, + cell: citationCell, + citationRef, + }); }} onUpdateColumn={handleUpdateColumn} onDeleteColumn={handleDeleteColumn} @@ -1025,18 +1044,19 @@ export function TRView({ reviewId, projectId }: Props) { <TRSidePanel cell={expandedCell} document={expandedDoc} + documents={filteredDocuments} column={expandedCol} columns={columns} onClose={() => { setExpandedCell(null); setExpandedCellCitation(undefined); }} - onNavigate={(columnIndex) => { + onNavigate={(documentId, columnIndex) => { const nextCell = cells.find( - (c) => - c.document_id === - expandedCell.document_id && - c.column_index === columnIndex, + (candidate) => + candidate.document_id === + documentId && + candidate.column_index === columnIndex, ); if (nextCell) { setExpandedCell(nextCell); @@ -1052,6 +1072,9 @@ export function TRView({ reviewId, projectId }: Props) { displayDocument={expandedCellCitation !== undefined} citationQuote={expandedCellCitation?.quote} citationPage={expandedCellCitation?.page} + citationSheet={expandedCellCitation?.sheet} + citationCell={expandedCellCitation?.cell} + citationRef={expandedCellCitation?.citationRef} /> ); })()} diff --git a/frontend/src/app/components/tabular/citation-utils.ts b/frontend/src/app/components/tabular/citation-utils.ts index 03e085a..e114fb4 100644 --- a/frontend/src/app/components/tabular/citation-utils.ts +++ b/frontend/src/app/components/tabular/citation-utils.ts @@ -1,9 +1,11 @@ "use client"; -const PAGE_CITATION_RE = /\[\[page:(\d+)\|\|(?:quote:)?((?:[^\[\]]|\[[^\]]*\])+)\]\]/gi; +const INLINE_METADATA_RE = /\[\[((?:[^\[\]]|\[[^\]]*\])+)\]\]/g; export interface ParsedCitation { - page: number; + page?: number; + sheet?: string; + cell?: string; quote: string; } @@ -16,11 +18,59 @@ export function preprocessCitations(text: string): { citations: ParsedCitation[]; } { const citations: ParsedCitation[] = []; - PAGE_CITATION_RE.lastIndex = 0; - const processed = text.replace(PAGE_CITATION_RE, (_, page, quote) => { - const idx = citations.length; - citations.push({ page: parseInt(page, 10), quote: quote.trim() }); - return `§${idx}§`; - }); + INLINE_METADATA_RE.lastIndex = 0; + const processed = text.replace( + INLINE_METADATA_RE, + (fullMarker, rawMetadata: string) => { + const pageCitation = parsePageCitation(rawMetadata); + const spreadsheetCitation = parseSpreadsheetCitation(rawMetadata); + const citation = pageCitation ?? spreadsheetCitation; + if (!citation) return fullMarker; + + const idx = citations.length; + citations.push(citation); + return `§${idx}§`; + }, + ); return { processed, citations }; } + +function parsePageCitation(metadata: string): ParsedCitation | null { + const match = metadata.match(/^page:(\d+)\|\|(?:quote:)?([\s\S]+)$/i); + if (!match) return null; + return { + page: parseInt(match[1], 10), + quote: match[2].trim(), + }; +} + +function parseSpreadsheetCitation(metadata: string): ParsedCitation | null { + if (!metadata.toLowerCase().startsWith("sheet:")) return null; + + const quoteSeparator = metadata.search(/\|\|quote:/i); + if (quoteSeparator < 0) return null; + + const locatorMetadata = metadata.slice(0, quoteSeparator); + const quote = metadata + .slice(quoteSeparator) + .replace(/^\|\|quote:/i, "") + .trim(); + if (!quote) return null; + + const fields = new Map<string, string>(); + for (const part of locatorMetadata.split("||")) { + const separator = part.indexOf(":"); + if (separator < 0) continue; + const key = part.slice(0, separator).trim().toLowerCase(); + const value = part.slice(separator + 1).trim(); + if (value) fields.set(key, value); + } + + const sheet = fields.get("sheet"); + const row = fields.get("row"); + const column = fields.get("col") ?? fields.get("column"); + const cell = fields.get("cell") ?? (column && row ? `${column}${row}` : undefined); + if (!sheet || !cell) return null; + + return { sheet, cell, quote }; +} diff --git a/frontend/src/app/components/ui/liquid-dropdown.tsx b/frontend/src/app/components/ui/liquid-dropdown.tsx index 6b12495..d16ce3d 100644 --- a/frontend/src/app/components/ui/liquid-dropdown.tsx +++ b/frontend/src/app/components/ui/liquid-dropdown.tsx @@ -7,12 +7,13 @@ import { DropdownMenuRadioItem, } from "@/app/components/ui/dropdown-menu"; import { cn } from "@/app/lib/utils"; +import { APP_SURFACE_HOVER_CLASS } from "@/app/components/ui/liquid-surface"; const LIQUID_DROPDOWN_CLASS = "rounded-2xl border border-white/70 bg-app-surface shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18)] backdrop-blur-2xl"; const LIQUID_DROPDOWN_ITEM_CLASS = - "cursor-pointer text-xs text-gray-600 transition-colors hover:bg-app-surface-hover focus:bg-app-surface-hover focus:text-gray-800"; + `cursor-pointer text-xs text-gray-600 transition-colors ${APP_SURFACE_HOVER_CLASS} focus:bg-app-surface-hover focus:text-gray-800`; export function LiquidDropdownContent({ className, diff --git a/frontend/src/app/components/ui/liquid-surface.ts b/frontend/src/app/components/ui/liquid-surface.ts index 9818064..f19b269 100644 --- a/frontend/src/app/components/ui/liquid-surface.ts +++ b/frontend/src/app/components/ui/liquid-surface.ts @@ -1,5 +1,11 @@ export const LIQUID_TABLE_SURFACE_CLASS = "rounded-2xl border-y border-white/70 bg-app-surface shadow-[0_10px_30px_rgba(15,23,42,0.11),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.16)] backdrop-blur-2xl"; +export const APP_SURFACE_HOVER_CLASS = "hover:bg-app-surface-hover"; +export const APP_SURFACE_ACTIVE_CLASS = "bg-app-surface-active"; +export const APP_SURFACE_PRESSED_CLASS = "active:bg-app-surface-active"; +export const APP_SURFACE_GROUP_HOVER_CLASS = + "group-hover:bg-app-surface-hover"; + export const LIQUID_PANEL_SURFACE_CLASS = - "rounded-2xl border border-white/70 bg-white/20 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18),inset_1px_0_0_rgba(255,255,255,0.5)] backdrop-blur-2xl"; + "rounded-2xl border border-white/70 bg-white/50 shadow-[0_8px_24px_rgba(15,23,42,0.12),inset_0_1px_0_rgba(255,255,255,0.9),inset_0_-10px_24px_rgba(255,255,255,0.18),inset_1px_0_0_rgba(255,255,255,0.5)] backdrop-blur-2xl"; diff --git a/frontend/src/app/components/workflows/WorkflowList.tsx b/frontend/src/app/components/workflows/WorkflowList.tsx index 98217f5..944a64b 100644 --- a/frontend/src/app/components/workflows/WorkflowList.tsx +++ b/frontend/src/app/components/workflows/WorkflowList.tsx @@ -35,7 +35,6 @@ import { import { workflowDetailPath } from "./workflowRoutes"; import { TABLE_CHECKBOX_CLASS, - TABLE_STICKY_CELL_BG, SkeletonDot, SkeletonLine, TableBody, @@ -626,12 +625,10 @@ export function WorkflowList() { <TableBody> {filtered.map((wf) => { const isHiddenSystem = hiddenSystemIds.includes(wf.id); - const rowBg = selectedIds.includes(wf.id) - ? "bg-gray-50" - : TABLE_STICKY_CELL_BG; return ( <TableRow key={wf.id} + selected={selectedIds.includes(wf.id)} className={isHiddenSystem ? "opacity-45" : undefined} rightClickDropdown={ wf.is_system @@ -685,7 +682,6 @@ export function WorkflowList() { onClick={() => setSelected(wf)} > <TablePrimaryCell - bgClassName={rowBg} selected={selectedIds.includes(wf.id)} onSelectionChange={() => toggleOne(wf.id)} label={wf.metadata.title} diff --git a/frontend/src/app/components/workflows/WorkflowPickerContent.tsx b/frontend/src/app/components/workflows/WorkflowPickerContent.tsx index 7bce04f..433a125 100644 --- a/frontend/src/app/components/workflows/WorkflowPickerContent.tsx +++ b/frontend/src/app/components/workflows/WorkflowPickerContent.tsx @@ -12,6 +12,10 @@ import { formatLabel, } from "../tabular/columnFormat"; import { TAG_COLORS } from "../tabular/pillUtils"; +import { + APP_SURFACE_ACTIVE_CLASS, + APP_SURFACE_HOVER_CLASS, +} from "@/app/components/ui/liquid-surface"; type WorkflowPreviewMode = "auto" | "prompt" | "columns"; type MobilePickerPane = "list" | "details"; @@ -157,8 +161,8 @@ export function WorkflowPickerContent({ } className={`flex min-w-0 w-full items-center gap-3 rounded-md px-3 py-2 text-left text-xs transition-all ${ isSelected - ? "bg-gray-100 text-gray-900" - : "hover:bg-gray-100/70" + ? `${APP_SURFACE_ACTIVE_CLASS} text-gray-900` + : APP_SURFACE_HOVER_CLASS } ${disabled ? "cursor-not-allowed opacity-45" : ""}`} > <span @@ -234,7 +238,7 @@ function WorkflowPreview({ <button type="button" onClick={onClear} - className="rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100/70 hover:text-gray-600" + className={`rounded-md p-1 text-gray-400 transition-colors hover:text-gray-600 ${APP_SURFACE_HOVER_CLASS}`} > <X className="h-3.5 w-3.5" /> </button> @@ -372,8 +376,8 @@ function WorkflowColumnPreview({ columns }: { columns: ColumnConfig[] }) { } className={`flex min-w-0 w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left text-xs transition-all ${ isExpanded - ? "bg-gray-100" - : "hover:bg-gray-100/70" + ? APP_SURFACE_ACTIVE_CLASS + : APP_SURFACE_HOVER_CLASS }`} > <FormatIcon From 9eb63ef3fd04c345fab09d4db60f6f3ce0597f34 Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Fri, 17 Jul 2026 16:18:29 +0800 Subject: [PATCH 07/21] docs: update readme --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 249c1b0..e5312b5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # Mike -Mike is a legal document assistant with a Next.js frontend, an Express backend, Supabase Auth/Postgres, and Cloudflare R2-compatible object storage. +![Mike](https://mikeoss.com/link-image.jpg) + +Mike or MIkeOSS is a legal AI platform that is able to assist you with document review, drafting and legal research. + +It has a Next.js frontend, an Express backend, Supabase Auth/Postgres, and Cloudflare R2-compatible object storage. Website: [mikeoss.com](https://mikeoss.com) From fa21ac8fd73b1e102edd0a5567daf238e191d88a Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Mon, 20 Jul 2026 03:04:47 +0800 Subject: [PATCH 08/21] feat: refresh workflows and workflow editor UI --- CONTRIBUTING.md | 11 +- README.md | 6 + backend/src/lib/systemWorkflows.ts | 377 ++++++------ frontend/public/icons/app-sidebar/library.svg | 11 +- .../assistant/message/MarkdownContent.tsx | 13 +- .../assistant/message/useSmoothedReveal.ts | 7 +- .../components/workflows/NewWorkflowModal.tsx | 111 +++- .../workflows/WorkflowDetailPage.tsx | 563 +++++++++--------- .../workflows/WorkflowPromptEditor.tsx | 13 +- frontend/src/app/hooks/useAssistantChat.ts | 15 +- scripts/build-workflows.js | 203 ++++--- 11 files changed, 745 insertions(+), 585 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 18bfb6f..47e61fe 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -22,9 +22,12 @@ Thanks for helping improve Mike. Please keep contributions small, focused, and e ## System Workflows -System workflows live in `mike-workflows/system/`. Put structured metadata in -the YAML frontmatter at the top of `SKILL.md`, put workflow instructions in the -body of `SKILL.md`, and use `table-config.yaml` for tabular review columns. +System workflows live in the sibling +[`Open-Legal-Products/mike-workflows`](https://github.com/Open-Legal-Products/mike-workflows) +repository under `assistant-workflows/` and `tabular-review-workflows/`. Put +structured metadata in the YAML frontmatter at the top of `SKILL.md`, set +`metadata.mike-availability` to `system`, put workflow instructions in the body +of `SKILL.md`, and use `table-columns.yaml` for tabular review columns. After changing system workflows, regenerate the app files: @@ -34,7 +37,7 @@ node scripts/build-workflows.js ## Security -Do not open a public issue for security vulnerabilities. Use [GitHub's private vulnerability reporting](https://github.com/willchen96/mike/security/advisories/new) instead. +Do not open a public issue for security vulnerabilities. Use [GitHub's private vulnerability reporting](https://github.com/Open-Legal-Products/mike/security/advisories/new) instead. We will aim to respond promptly and coordinate a disclosure timeline with you. diff --git a/README.md b/README.md index e5312b5..66bdc7b 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,12 @@ Website: [mikeoss.com](https://mikeoss.com) - `backend/schema.sql` - Supabase schema for fresh databases - `backend/migrations/` - dated, incremental schema migrations; on an existing database, apply the files dated after the Mike version you deployed +## System Workflows + +Mike's system assistant and tabular review workflows are maintained in the +[`Open-Legal-Products/mike-workflows`](https://github.com/Open-Legal-Products/mike-workflows) +repository. + ## Prerequisites - Node.js 20 or newer diff --git a/backend/src/lib/systemWorkflows.ts b/backend/src/lib/systemWorkflows.ts index d1d8dc1..6bd2d76 100644 --- a/backend/src/lib/systemWorkflows.ts +++ b/backend/src/lib/systemWorkflows.ts @@ -33,17 +33,17 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-coc-dd-tabular-review", + "id": "builtin-change-of-control-tabular-review", "metadata": { "title": "Change of Control Tabular Review", "description": "This workflow performs a change of control due diligence review across the selected documents.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -53,7 +53,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Change of Control Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents for change of control provisions and extract structured diligence findings into the columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, notice periods, party names, and defined terms where available.\n- For change of control triggers, capture the exact triggering language and summarize the practical effect in plain English.\n- For consent, termination, option, and financial consequence columns, identify who holds the right or obligation, when it is triggered, and any timing or procedural requirements.\n- If a document does not contain responsive change of control language, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context for legal diligence review.\n- Do not infer a change of control restriction from general assignment, transfer, merger, or affiliate provisions unless the document text supports that connection.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.", + "skill_md": "# Change of Control Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents for change of control provisions and extract structured diligence findings into the columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.\n## Change of Control Guidance\n\n- Capture the exact triggering language and summarize its practical effect in plain English.\n- For consent, termination, option, and financial-consequence provisions, identify who holds the right or obligation, when it is triggered, and any timing or procedural requirements.\n- Do not infer a change-of-control restriction from general assignment, transfer, merger, or affiliate provisions unless the document text supports that connection.", "columns_config": [ { "index": 0, @@ -76,26 +76,31 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 3, "name": "Change of Control Clause", + "format": "text", "prompt": "Identify and summarize the change of control clause(s) in this document. Quote the exact triggering language and specify what constitutes a 'change of control'." }, { "index": 4, "name": "Consent Required", + "format": "text", "prompt": "Does a change of control require prior consent from any party? Identify who must consent, the notice period, and any conditions." }, { "index": 5, "name": "Termination Rights", + "format": "text", "prompt": "What termination rights arise upon a change of control? Who can terminate, and what are the notice requirements?" }, { "index": 6, "name": "Put/Call Options", + "format": "text", "prompt": "Are there any put or call options triggered by a change of control? Summarize the terms, pricing, and exercise period." }, { "index": 7, "name": "Financial Implications", + "format": "text", "prompt": "What are the financial implications of a change of control? Include any fees, payments, accelerated obligations, or pricing adjustments." } ] @@ -107,14 +112,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-commercial-agreement-tabular-review", "metadata": { "title": "Commercial Agreement Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -124,7 +129,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Commercial Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Commercial Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -141,7 +146,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 2, "name": "Amends Earlier Agreement", - "format": "yes_no", + "format": "text", "prompt": "Does this agreement amend, restate, supplement, or replace an earlier agreement? If yes, identify the earlier agreement by name and date." }, { @@ -183,7 +188,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 9, "name": "Estimated Contract Value", - "format": "monetary_amount", + "format": "text", "prompt": "What is the total estimated or stated contract value? If no single figure is given, calculate or estimate based on stated rates and term. State the currency and any assumptions made." }, { @@ -247,10 +252,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -260,7 +265,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, { @@ -270,14 +275,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-commercial-lease-tabular-review", "metadata": { "title": "Commercial Lease Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -287,7 +292,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Commercial Lease Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Commercial Lease Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -382,7 +387,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 15, "name": "Security of Tenure", - "format": "yes_no", + "format": "text", "prompt": "Does the tenant have statutory security of tenure (e.g. under the Landlord and Tenant Act 1954 in England and Wales, or equivalent legislation in another jurisdiction)? Answer Yes if the lease is contracted in or benefits from security of tenure. Answer No if the lease has been contracted out or if security of tenure does not apply. State the basis for your answer." }, { @@ -394,7 +399,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 17, "name": "Rent Deposit", - "format": "monetary_amount", + "format": "text", "prompt": "Is a rent deposit required? If so, state the amount, the period for which it is held, the conditions under which the landlord may draw on it, and the circumstances in which it is returned to the tenant." }, { @@ -422,10 +427,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -445,14 +450,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-corporate-approvals-review", "metadata": { "title": "Corporate Approvals Review", - "description": "Review the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally cons...", + "description": "Review transaction documents, resolutions, authority materials, and corporate records to assess whether the relevant company approvals appear complete and internally consistent.", "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -469,44 +474,17 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-cp-checklist", + "id": "builtin-credit-agreement-review", "metadata": { - "title": "Draft CP Checklist", - "description": "Review the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.", + "title": "Credit Agreement Review", + "description": "Review the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" - } - ], - "language": "English", - "version": "1.0.0", - "practice": "General Transactions", - "jurisdictions": [ - "General" - ] - }, - "skill_md": "# Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status).", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-credit-agreement-tabular-review", - "metadata": { - "title": "Credit Agreement Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", - "type": "tabular", - "contributors": [ - { - "name": "Mike", - "organisation": "Open Legal Products", - "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -516,7 +494,34 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Credit Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-credit-agreement-tabular-review", + "metadata": { + "title": "Credit Agreement Tabular Review", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", + "type": "tabular", + "contributors": [ + { + "name": "Open Legal Products", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "Finance", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Credit Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -650,44 +655,17 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-credit-summary", + "id": "builtin-draft-cp-checklist", "metadata": { - "title": "Credit Agreement Review", - "description": "Review the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", + "title": "Draft CP Checklist", + "description": "Review the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.", "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" - } - ], - "language": "English", - "version": "1.0.0", - "practice": "Finance", - "jurisdictions": [ - "General" - ] - }, - "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", - "columns_config": null - }, - { - "user_id": null, - "is_system": true, - "created_at": "", - "id": "builtin-draft-from-template", - "metadata": { - "title": "Draft from Template", - "description": "Use an uploaded template to draft a new document tailored to the user instructions and source materials.", - "type": "assistant", - "contributors": [ - { - "name": "Mike", - "organisation": "Open Legal Products", - "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -697,7 +675,34 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Draft from Template\n\n## Instructions\n\nUse the uploaded template as the drafting structure for a new document. Treat the template as the primary source for document style, section order, clause structure, defined-term conventions, placeholders, and formatting cues.\n\nBefore drafting, identify whether the user has provided enough instructions and source information to complete the draft. If key information is missing, ask concise follow-up questions instead of inventing facts.\n\nWhen drafting:\n\n- Preserve the template structure unless the user asks for changes.\n- Replace placeholders, bracketed fields, blanks, and example text with the user-provided facts where available.\n- Keep definitions, cross-references, numbering, party names, dates, schedules, and exhibits internally consistent.\n- Do not remove protective clauses, boilerplate, signatures, schedules, or annexes unless the user asks you to do so.\n- If the user provides supporting documents, use them only for facts and context that are relevant to completing the template.\n- Flag any assumptions, missing inputs, unresolved placeholders, or provisions that require legal or commercial confirmation.\n\nIf the user asks for a downloadable draft, use the document generation tools available to produce the drafted document. Otherwise, provide the drafted text or the most relevant sections inline, matching the template as closely as possible.\n\nDo not invent parties, dates, amounts, governing law, notice details, commercial terms, or factual background. If information is unavailable, leave a clear placeholder and list it in an **Open Points** section.", + "skill_md": "# Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nProduce the checklist as an exportable Word (`.docx`) document in landscape\norientation. Return the completed document as a file rather than displaying the\nchecklist inline.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nPlace each category's rows in a table under the relevant category heading.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower | |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction | |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories | |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent | |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction | |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status).", + "columns_config": null + }, + { + "user_id": null, + "is_system": true, + "created_at": "", + "id": "builtin-draft-from-template", + "metadata": { + "title": "Draft from Template", + "description": "Edit a copy of an uploaded template using the user's instructions and source materials while preserving the original file.", + "type": "assistant", + "contributors": [ + { + "name": "Open Legal Products", + "organisation": null, + "role": null, + "linkedin": null + } + ], + "language": "English", + "version": "1.0.0", + "practice": "General Transactions", + "jurisdictions": [ + "General" + ] + }, + "skill_md": "# Draft from Template\n\n## Instructions\n\nIf the user has not provided a template file, ask them to upload one.\n\nUse an available file-copy tool call to create a copy of the uploaded template,\nthen edit that copy directly. Do not recreate the file from its extracted text,\nand never modify the original template. Preserve the copied file's format,\nlayout, styles, numbering, section order, clause structure, and other content\nunless the user asks for a change.\n\nReplace placeholders and template text using the user's instructions and any\nsupporting materials. Keep definitions, cross-references, names, dates,\nschedules, and exhibits internally consistent. Do not invent missing facts; ask\nfor essential information or leave a clear placeholder where appropriate.\n\nReturn the completed copy in the same file format as the uploaded template.", "columns_config": null }, { @@ -711,10 +716,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -724,24 +729,24 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder.", + "skill_md": "# Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, produce the issues list as an exportable\nWord (`.docx`) document in landscape orientation. Return the completed document\nas a file rather than displaying the issues list inline.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nPlace the issues list rows in the result table rather than presenting them as\nprose.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder.", "columns_config": null }, { "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-ediscovery-tabular-review", + "id": "builtin-e-discovery-tabular-review", "metadata": { "title": "E-Discovery Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -751,7 +756,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# E-Discovery Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# E-Discovery Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -792,7 +797,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 6, "name": "Privileged?", - "format": "yes_no", + "format": "text", "prompt": "Does this document appear to be legally privileged? Answer Yes if it appears to be a communication between a lawyer and client made for the dominant purpose of obtaining or giving legal advice, or created for the dominant purpose of litigation. Answer No otherwise. If uncertain, note the basis for uncertainty." } ] @@ -808,10 +813,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -821,7 +826,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, { @@ -831,14 +836,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-employment-agreement-tabular-review", "metadata": { "title": "Employment Agreement Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -848,7 +853,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Employment Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Employment Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -883,17 +888,13 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 5, "name": "Full Time / Part Time", - "format": "tag", - "tags": [ - "Full Time", - "Part Time" - ], + "format": "text", "prompt": "Is this a full-time or part-time position? If part-time, state the number of days or hours per week where specified." }, { "index": 6, "name": "Independent Contractor?", - "format": "yes_no", + "format": "text", "prompt": "Does the agreement characterise the worker as an independent contractor rather than an employee? Answer Yes if the agreement uses contractor, consultant, or self-employed language. Note any provisions that address the nature of the relationship." }, { @@ -963,10 +964,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -986,14 +987,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-guarantee-agreement-review", "metadata": { "title": "Guarantee Agreement Review", - "description": "Review the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented...", + "description": "Review an uploaded guarantee, guaranty, or guarantee-and-indemnity agreement from the perspective of the party represented by the user.", "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1003,24 +1004,24 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "skill_md": "# Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, { "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-lpa-tabular-review", + "id": "builtin-limited-partnership-agreement-tabular-review", "metadata": { "title": "Limited Partnership Agreement Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1030,7 +1031,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Limited Partnership Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Limited Partnership Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -1165,10 +1166,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1178,7 +1179,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "skill_md": "# NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, { @@ -1188,14 +1189,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-nda-tabular-review", "metadata": { "title": "NDA Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1205,16 +1206,12 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# NDA Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# NDA Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, "name": "Direction", - "format": "tag", - "tags": [ - "Mutual", - "Unilateral" - ], + "format": "text", "prompt": "Is this NDA mutual (both parties owe confidentiality obligations to each other) or unilateral (only one party owes confidentiality obligations)? Identify the direction and name the disclosing and receiving party or parties." }, { @@ -1232,7 +1229,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ { "index": 3, "name": "Standard Carveouts Present?", - "format": "yes_no", + "format": "text", "prompt": "Does the agreement include the standard carveouts to confidentiality obligations? Answer Yes if the agreement excludes information that: (a) is or becomes publicly available without breach; (b) was already known to the receiving party; (c) is independently developed; and (d) is received from a third party without restriction. Note any carveouts that are missing or are drafted differently from the standard formulation." }, { @@ -1278,10 +1275,10 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1298,17 +1295,17 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "user_id": null, "is_system": true, "created_at": "", - "id": "builtin-sha-summary", + "id": "builtin-shareholder-agreement-review", "metadata": { "title": "Shareholder Agreement Review", "description": "Review the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client.", "type": "assistant", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1318,7 +1315,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", + "skill_md": "# Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one.", "columns_config": null }, { @@ -1328,14 +1325,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-shareholder-agreement-tabular-review", "metadata": { "title": "Shareholder Agreement Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1345,7 +1342,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Shareholder Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Shareholder Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -1476,14 +1473,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-spa-tabular-review", "metadata": { "title": "SPA Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1493,7 +1490,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# SPA Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# SPA Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -1582,14 +1579,14 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "id": "builtin-supply-agreement-tabular-review", "metadata": { "title": "Supply Agreement Tabular Review", - "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-config.yaml.", + "description": "Use this workflow to review uploaded documents and extract structured information into the tabular review columns defined in table-columns.yaml.", "type": "tabular", "contributors": [ { - "name": "Mike", - "organisation": "Open Legal Products", + "name": "Open Legal Products", + "organisation": null, "role": null, - "linkedin": "https://www.linkedin.com/company/mike-oss/" + "linkedin": null } ], "language": "English", @@ -1599,7 +1596,7 @@ export const SYSTEM_WORKFLOWS: SystemWorkflow[] = [ "General" ] }, - "skill_md": "# Supply Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-config.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-config.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Use clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response according to the host system's expected format.\n- Keep cell outputs concise, but include enough context to make the extracted value useful.\n- Do not invent citations, facts, parties, dates, or obligations.", + "skill_md": "# Supply Agreement Tabular Review\n\n## Purpose\n\nUse this workflow to review uploaded documents and extract structured information into the tabular review columns defined in `table-columns.yaml`.\n\n## Instructions\n\n- Apply each column prompt in `table-columns.yaml` to each document independently.\n- Extract only information supported by the document text.\n- Include clause references, section names, dates, amounts, party names, and defined terms where available.\n- If responsive information is not found, return an empty value or a concise \"Not found\" response.\n- Keep cell outputs concise while including enough context to make each extracted value useful.\n- Do not invent citations, facts, parties, dates, rights, obligations, or financial consequences.\n- Render the completed results as an exportable Excel (`.xlsx`) file. If Excel output is not possible, render the results as a Markdown table.", "columns_config": [ { "index": 0, @@ -1695,7 +1692,7 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: { "id": "builtin-commercial-lease-review", "title": "Commercial Lease Review", - "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# Commercial Lease Review\n\n## Instructions\n\nReview the uploaded commercial lease and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — reinstatement obligation is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Break Rights | High — Clause [x] imposes vacant possession as a break condition with no cure period. The lessee-specific checklist point indicates the break is fragile and may be lost on a technicality. | For the lessee, remove vacant possession as a break condition or add a cure period and express the condition narrowly. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the premises. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, premises description, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Lessor or Lessee).\n\n| Issue | General | Lessor | Lessee |\n| --- | --- | --- | --- |\n| Parties and Premises | Identify landlord, tenant, guarantor, property, premises, title references, and included or excluded areas. Flag incorrect entities, missing plans, or premises description inconsistent with title. | | |\n| Term | State commencement, expiry, rent commencement, and any conditions precedent. | Flag renewal rights or holding-over provisions that limit the landlord's ability to recover the premises. | Flag uncertain commencement mechanics, no renewal clarity, or landlord-only discretion over start conditions. |\n| Rent and Payments | Confirm rent quantum, payment dates, and deposit mechanics. | Flag unclear payment mechanics, weak late-payment provisions, or rent-free periods exceeding what was agreed. | Flag unclear payment obligations, high default interest, or missing rent-free mechanics. |\n| Rent Review | Identify review dates, mechanism, assumptions, disregards, and dispute process. | Flag review mechanics too favorable to the tenant, downward review provisions, or no upward adjustment. | Flag upward-only review, no cap, aggressive assumptions, or tenant-unfriendly dispute process. |\n| Service Charge and Operating Costs | Identify tenant contribution scope, cap mechanics, audit rights, and reconciliation process. | Flag cost exclusions too broad, caps too low, or audit rights creating undue operational burden. | Flag broad pass-throughs, no cap, capital expenditure exposure, or weak audit rights. |\n| Use | State permitted use, prohibited uses, trading obligations, and change-of-use restrictions. | Flag permitted use too broad or absence of continuous trading obligation. | Flag narrow use restriction, continuous trading obligations, or restrictions inconsistent with operations. |\n| Repairs and Maintenance | Identify landlord and tenant repair obligations, condition standard, and schedule of condition. | Flag limited tenant repairing obligations, repair gaps, or yielding-up conditions below acceptable standard. | Flag full repairing obligation extending to pre-existing defects or structural issues outside tenant control. |\n| Alterations and Fit-Out | Identify consent requirements and reinstatement obligations. | Flag broad alteration rights without landlord consent or no reinstatement obligation. | Flag absolute consent rights, broad reinstatement obligations, or unclear fit-out approval timing. |\n| Assignment, Underletting, and Sharing Occupation | Identify transfer restrictions, consent tests, and group sharing rights. | Flag broad permitted transfer rights allowing assignment to unsuitable tenants without approval. | Flag absolute assignment bans, excessive consent conditions, or no group sharing rights. |\n| Insurance and Damage | Identify who insures, insured risks, rent suspension, and termination rights on damage. | Flag tenant insurance obligations too narrow or absence of rent suspension protection. | Flag no rent suspension on damage, uninsured risk exposure, or no termination right after prolonged damage. |\n| Break Rights | Identify break dates, notice periods, and conditions. | Flag broadly exercisable break conditions allowing tenant exit without adequate penalty. | Flag fragile break conditions, strict vacant possession tests, or excessive preconditions. |\n| Default and Remedies | Identify default events, cure periods, and enforcement rights. | Flag long cure periods, high default thresholds, or limited remedies that delay enforcement. | Flag short cure periods, broad default triggers, or landlord self-help without adequate notice. |\n| Compliance Obligations | Identify which party bears responsibility for regulatory compliance. | Flag compliance gaps exposing the landlord to regulatory liability. | Flag tenant responsibility for landlord works, historic contamination, or compliance beyond the demised premises. |\n| Security Package | Identify security type, quantum, and release conditions. | Flag security inadequate for the tenant's covenant strength or release mechanics too easy to trigger. | Flag excessive security requirements, no step-down on release, or unclear deposit return mechanics. |\n| Rights Reserved and Easements | Identify reserved landlord rights, access arrangements, and tenant rights over common parts. | Flag insufficient reserved rights limiting the landlord's ability to manage the building. | Flag broad landlord entry or disruption rights, or missing rights needed for the tenant's permitted use. |\n| End of Term | Identify yielding-up condition, reinstatement obligations, and dilapidations process. | Flag inadequate reinstatement obligations, unclear yielding-up conditions, or weak dilapidations recovery. | Flag overly broad reinstatement obligations or handback conditions requiring a better standard than at commencement. |\n| Governing Law and Dispute Resolution | State governing law, court forum, expert determination process, and mandatory dispute procedures. Flag ambiguous forum, missing expert determination terms, or inadequate dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { "id": "builtin-compare-documents", @@ -1708,29 +1705,29 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: "skill_md": "# Corporate Approvals Review\n\n## Instructions\n\nReview the uploaded transaction document, resolution, authority package, or corporate action to determine whether the relevant company approvals appear complete, internally consistent, and supported by the company's corporate records.\n\nBefore producing the review, ask the user to upload or identify the available corporate records to check against. Request the relevant records, including as applicable:\n\n- certificate of incorporation, certificate of formation, or equivalent constitutional filing\n- memorandum and articles, articles of association, bylaws, operating agreement, constitution, or equivalent governing document\n- register of directors, board register, officer register, or equivalent management records\n- register of shareholders, register of members, stock ledger, cap table, or equivalent ownership records\n- board minutes, written resolutions, consents, committee resolutions, shareholder resolutions, or member approvals\n- shareholder agreement, investors' rights agreement, voting agreement, operating agreement, or other approval-rights document\n- incumbency certificate, secretary's certificate, specimen signatures, powers of attorney, delegated authority matrix, or signing authority evidence\n- relevant filings, good standing certificates, prior approvals, or transaction-specific authority documents\n\nIf records are missing, do not assume they exist. Identify what is missing and explain how that limits the review.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Issue\n- Records Checked\n- Finding\n- Risk\n- Recommended Action\n\nUse these risk ratings in the **Risk** column:\n\n- Low: approval position appears standard or no material issue was identified from the records provided.\n- Medium: a gap, ambiguity, or missing supporting record should be clarified before completion.\n- High: a material approval, authority, capacity, or consistency issue may affect execution, validity, enforceability, or closing.\n- Critical: an apparent absence of required approval or authority may block signing or completion unless resolved.\n\nReview the uploaded materials for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Company Identity and Capacity | Check that the company's legal name, registration number, jurisdiction, entity type, capacity, and status match the corporate records and transaction documents. |\n| Constitutional Authority | Check whether the governing documents permit the transaction, execution of documents, borrowing, guarantees, security, share actions, asset disposals, or other relevant corporate action. |\n| Board Composition and Authority | Check current directors or managers against the board register, appointment records, quorum requirements, conflicts rules, voting thresholds, and authority to approve the transaction. |\n| Shareholder or Member Approvals | Check whether shareholder, member, class, investor, reserved matter, or special approval is required by law, governing documents, shareholder agreements, or other approval-rights documents. |\n| Signing Authority | Check signatories against incumbency records, delegated authority, resolutions, powers of attorney, secretary's certificates, and execution blocks. |\n| Approval Documents | Check board minutes, written resolutions, consents, certificates, and approval packs for correct parties, dates, quorum, votes, conflicts, recitals, authorized documents, and authorized signatories. |\n| Registers and Ownership Records | Check shareholder/member registers, cap tables, stock ledgers, and transfer records for consistency with approvals, voting thresholds, class rights, and parties entitled to approve. |\n| Transaction Document Consistency | Check that the documents approved match the documents being signed, including names, dates, document titles, parties, transaction description, limits, conditions, and schedules. |\n| Reserved Matters and Consent Rights | Check shareholder agreements, investor rights documents, financing documents, or other contracts for veto rights, consent rights, notice requirements, or approval thresholds. |\n| Filings and Ancillary Steps | Check whether filings, good standing certificates, registers, notices, public records updates, share certificates, or post-completion corporate records are required. |\n| Drafting and Record Inconsistencies | Flag inconsistent entity names, officer or director names, dates, document titles, approval thresholds, defined terms, numbering, cross-references, and conflicts between records. |\n\nFor each issue, cite the relevant corporate record or transaction document in the **Records Checked** column. In the **Finding** column, state what the records show and whether they support the proposed action. In the **Recommended Action** column, provide a specific cure, confirmation, document request, approval step, or drafting correction.\n\nIf no material approval issues are found, include a row stating that no material approval issue was identified based on the records provided, and separately identify any records that were not provided or assumptions that remain open.\n\nKeep the response focused on approval, authority, capacity, signing authority, and record consistency. Do not provide a broad commercial contract review unless the user asks for one." }, { - "id": "builtin-cp-checklist", - "title": "Draft CP Checklist", - "skill_md": "# Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nYou MUST use the generate_docx tool to produce the checklist as a downloadable Word document. You MUST pass landscape: true to the generate_docx tool — the document must be in landscape orientation. Do not display the checklist inline — generate the .docx file and provide the download link.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nUse the table field in the section object (not content) for each category's rows.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower |   |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction |   |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories |   |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent |   |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction |   |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status)." + "id": "builtin-credit-agreement-review", + "title": "Credit Agreement Review", + "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { - "id": "builtin-credit-summary", - "title": "Credit Agreement Review", - "skill_md": "# Credit Agreement Review\n\n## Instructions\n\nReview the uploaded credit agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — covenant headroom is tight\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause or schedule references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Financial Covenants | High — Clause [x] sets the leverage covenant at [x]x with quarterly testing and no equity cure right. The borrower-specific checklist point indicates limited headroom and no remedy for a technical breach. | For the borrower, widen the covenant threshold, add an equity cure right, and reduce testing frequency to semi-annual. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the facility amount. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, amounts, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Borrower or Lender).\n\n| Issue | General | Borrower | Lender |\n| --- | --- | --- | --- |\n| Parties | Identify all lenders, borrowers, guarantors, agents, and other finance parties with full legal names, roles, and jurisdictions. Flag missing or incorrect entities, unclear agent roles, missing authority confirmations, or transfer mechanics that could result in unknown lenders. | | |\n| Guarantors | Identify guarantors, guarantee scope, limits, and coverage requirements. | Flag uncapped guarantees, missing limits, or upstream guarantee concerns exposing the borrower group. | Flag weak guarantor coverage, missing entities, or guarantees not covering the full facility. |\n| Other Parties | Identify facility agent, security agent, arrangers, issuing banks, and other material parties. | Flag unclear agent roles or mechanics creating additional obligations on the borrower. | Flag inconsistent secured party mechanics or missing parties affecting security validity. |\n| Date of Agreement | State signing date, effective date, and conditions to effectiveness. Flag inconsistent or unclear dates or effectiveness conditions. | | |\n| Facilities | List each facility, type, tranche, availability, and key structural features. | Flag excessive lender discretion, unclear facility purpose, or mismatched terms restricting drawdown. | Flag unclear facility structure or purpose creating enforcement ambiguity. |\n| Amount | State total commitments, currencies, tranche amounts, and accordion or incremental facilities. | Flag unclear currency exposure, uncapped accordion provisions without borrower consent, or inconsistent commitment figures. | Flag uncapped increase mechanics or dilutive accordion provisions not agreed at signing. |\n| Purpose | Summarize permitted use of proceeds and restrictions. | Flag vague purpose wording restricting flexibility or creating sanctions risk. | Flag broad purpose language permitting restricted payment leakage or unapproved use of proceeds. |\n| Interest | Identify reference rate, margin, floors, fallback rates, interest periods, and default interest. | Flag high margins, aggressive floors, benchmark fallback gaps, or high default interest. | Flag unclear fallback rate mechanics or interest calculation ambiguities. |\n| Commitment Fee | State commitment, utilisation, ticking, arrangement, agency, and other fees. | Flag hidden fees, fees payable after cancellation, or unclear calculation basis. | Flag missing fee provisions or fee timing delaying recovery. |\n| Repayment Schedule | Summarize amortisation, scheduled repayments, bullet payments, and cash sweep. | Flag aggressive amortisation, unclear prepayment application, or cash sweep uncertainty. | Flag bullet repayments without adequate covenant or security protection. |\n| Maturity | State final maturity date and any extension options. | Flag short maturity, lender-only extension discretion, or mismatch with the business plan. | Flag unclear extension conditions or borrower-controlled extension mechanics. |\n| Security | Identify security package, assets, entities, perfection steps, and post-closing obligations. | Flag all-asset security beyond deal scope, onerous post-closing steps, or missing release mechanics on disposal. | Flag gaps in the security package, missing perfection steps, or inadequate post-closing obligations. |\n| Guarantees | Summarize guarantee obligations, guarantors, limitations, and release triggers. | Flag broad all-monies language, unlimited guarantees, or no release mechanics after repayment or disposal. | Flag guarantee gaps, weak limitations, or no coverage test requirements. |\n| Financial Covenants | Identify covenant metrics, thresholds, testing frequency, cure rights, and reporting. | Flag tight headroom, frequent testing, no equity cure, or ambiguous EBITDA adjustments. | Flag loose covenant thresholds or wide EBITDA adjustments obscuring true financial performance. |\n| Events of Default | Summarize default triggers, grace periods, materiality thresholds, cross-default, and MAE. | Flag low materiality thresholds, no cure periods, broad cross-default, or subjective MAE defaults. | Flag weak default triggers, long cure periods, or materiality thresholds delaying enforcement. |\n| Assignment | Summarize lender transfer rights, borrower consent mechanics, and disqualified institutions. | Flag free transfers to competitors, distressed investors, or lenders on a borrower blacklist. | Flag consent mechanics giving the borrower excessive veto over lender transfers. |\n| Change of Control | Identify triggers and resulting prepayment, cancellation, or default consequences. | Flag broad triggers, no cure period, or definitions catching ordinary-course ownership changes. | Flag narrow change of control definitions missing material ownership shifts. |\n| Prepayment Fee | Identify make-whole, soft-call, premium periods, and exceptions. | Flag excessive fees, long premium periods, or unclear exceptions for mandatory prepayments. | Flag exceptions allowing free prepayment during premium periods. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, forum, and service of process. Flag unclear or ambiguous governing law, jurisdiction, or service mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "id": "builtin-draft-cp-checklist", + "title": "Draft CP Checklist", + "skill_md": "# Draft Conditions Precedent Checklist\n\nReview the uploaded credit agreement or financing document and generate a comprehensive Conditions Precedent (CP) checklist.\n\nProduce the checklist as an exportable Word (`.docx`) document in landscape\norientation. Return the completed document as a file rather than displaying the\nchecklist inline.\n\nStructure the document as follows:\n- For each category of conditions (e.g. Corporate, Financial, Legal, Security), add a section with a heading\n- Under each category heading, include a table with exactly these four columns in this order:\n 1. Index — sequential number within the category (1, 2, 3…)\n 2. Clause Number — the clause or schedule reference from the agreement\n 3. Clause — a concise description of the condition precedent\n 4. Status — leave blank (empty string) for the user to fill in\n\nPlace each category's rows in a table under the relevant category heading.\n\n## Result Table Format\n\nThe document contains one section per category, each with a table in this format:\n\n### Corporate\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(a)(i) | Certificate of incorporation and constitutional documents of the borrower | |\n| 2 | Cl. 4.1(a)(ii) | Board resolution authorising execution of the finance documents and approving the terms of the transaction | |\n| 3 | Cl. 4.1(a)(iii) | Specimen signatures of all authorised signatories | |\n\n### Legal\n\n| Index | Clause Number | Clause | Status |\n| --- | --- | --- | --- |\n| 1 | Cl. 4.1(c)(i) | Legal opinion from counsel to the borrower in form and substance satisfactory to the agent | |\n| 2 | Cl. 4.1(c)(ii) | Legal opinion from counsel to the arrangers as to the laws of the relevant jurisdiction | |\n\nBefore finalizing, double-check that every table is formatted correctly: each table must have exactly the four columns above in the same order, headers must match exactly (Index, Clause Number, Clause, Status), every row must have the same number of cells as the headers, the Index column must be sequential starting from 1 within each category, and no cells should contain stray markdown, newlines, or placeholder text (use an empty string for Status)." }, { "id": "builtin-draft-from-template", "title": "Draft from Template", - "skill_md": "# Draft from Template\n\n## Instructions\n\nUse the uploaded template as the drafting structure for a new document. Treat the template as the primary source for document style, section order, clause structure, defined-term conventions, placeholders, and formatting cues.\n\nBefore drafting, identify whether the user has provided enough instructions and source information to complete the draft. If key information is missing, ask concise follow-up questions instead of inventing facts.\n\nWhen drafting:\n\n- Preserve the template structure unless the user asks for changes.\n- Replace placeholders, bracketed fields, blanks, and example text with the user-provided facts where available.\n- Keep definitions, cross-references, numbering, party names, dates, schedules, and exhibits internally consistent.\n- Do not remove protective clauses, boilerplate, signatures, schedules, or annexes unless the user asks you to do so.\n- If the user provides supporting documents, use them only for facts and context that are relevant to completing the template.\n- Flag any assumptions, missing inputs, unresolved placeholders, or provisions that require legal or commercial confirmation.\n\nIf the user asks for a downloadable draft, use the document generation tools available to produce the drafted document. Otherwise, provide the drafted text or the most relevant sections inline, matching the template as closely as possible.\n\nDo not invent parties, dates, amounts, governing law, notice details, commercial terms, or factual background. If information is unavailable, leave a clear placeholder and list it in an **Open Points** section." + "skill_md": "# Draft from Template\n\n## Instructions\n\nIf the user has not provided a template file, ask them to upload one.\n\nUse an available file-copy tool call to create a copy of the uploaded template,\nthen edit that copy directly. Do not recreate the file from its extracted text,\nand never modify the original template. Preserve the copied file's format,\nlayout, styles, numbering, section order, clause structure, and other content\nunless the user asks for a change.\n\nReplace placeholders and template text using the user's instructions and any\nsupporting materials. Keep definitions, cross-references, names, dates,\nschedules, and exhibits internally consistent. Do not invent missing facts; ask\nfor essential information or leave a clear placeholder where appropriate.\n\nReturn the completed copy in the same file format as the uploaded template." }, { "id": "builtin-draft-issues-list", "title": "Draft Issues List", - "skill_md": "# Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, use the generate_docx tool to produce the issues list as a downloadable Word document. Do not display the issues list inline — generate the .docx file and provide the download link.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nUse the table field in the document section object, not prose content, for the issues list rows.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder." + "skill_md": "# Draft Issues List\n\n## Instructions\n\nReview the uploaded agreement and draft a comprehensive issues list from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before drafting the issues list.\n\nAn issues list identifies open, unresolved, or contentious points in the current draft that require negotiation or resolution before signing. Focus on points that are material to the represented party's commercial and legal position.\n\nOnce the represented party is clear, produce the issues list as an exportable\nWord (`.docx`) document in landscape orientation. Return the completed document\nas a file rather than displaying the issues list inline.\n\nThe Word document must contain exactly one result table. List each open issue in order from highest to lowest priority and add a final row called **Overall Negotiation Position**. The result table must have exactly these columns:\n\n- Issue\n- Current Position\n- Proposed Change\n\nUse these priority ratings at the start of the **Current Position** column: Critical means a blocking issue that must be resolved before signing; High means a material point requiring negotiation; Medium means a negotiation concern but manageable; Low means a minor point for consideration only. Include relevant clause references in the **Current Position** column. The **Proposed Change** column must state the specific amendment or position the represented party should seek, drafted from that party's perspective. Keep the response concise and focused on actionable negotiation points.\n\n## Result Table Format\n\nThe Word document must use this result table structure. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Current Position | Proposed Change |\n| --- | --- | --- |\n| Liability Cap | High — Clause [x] contains no monetary cap on the represented party's total liability under the agreement. | Add a liability cap equal to [amount] or a multiple of fees paid, with carve-outs limited to fraud and wilful misconduct. |\n| Governing Law | Medium — Clause [x] specifies [jurisdiction] law, which is inconvenient for the represented party's operations and legal advisers. | Change governing law to [preferred jurisdiction] and amend the dispute resolution clause accordingly. |\n\nPlace the issues list rows in the result table rather than presenting them as\nprose.\n\nBefore finalizing, double-check that the table is formatted correctly: it must have exactly the three columns above in the same order, headers must match exactly (Issue, Current Position, Proposed Change), every row must have the same number of cells as the headers, issues must be ordered from highest to lowest priority, and no cells should contain stray markdown, newlines, or placeholder text unless the source document requires a placeholder." }, { "id": "builtin-employment-agreement-review", "title": "Employment Agreement Review", - "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# Employment Agreement Review\n\n## Instructions\n\nReview the uploaded employment agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - restrictive covenant scope is excessive\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Restrictive Covenants | High - Clause [x] imposes a long non-compete with broad geographic scope. The general covenant position and the employee-specific checklist point indicate enforceability and mobility risk for the employee. | For the employee, reduce the duration, territory, and restricted activities to what is necessary for legitimate business protection. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Employer or Employee).\n\n| Issue | General | Employer | Employee |\n| --- | --- | --- | --- |\n| Parties and Role | Identify employer and employee with correct legal names. Confirm job title, reporting line, work location, and employment type. Flag incorrect entities, unclear role scope, or terms creating unintended employment relationships. | | |\n| Start Date and Term | State commencement date, probation period, fixed term, renewal mechanics, and conditions precedent. | Flag unclear commencement mechanics or terms that limit employer flexibility during the probation period. | Flag long probation periods, unclear renewal mechanics, or employer-only extension rights. |\n| Duties | Summarize duties, working hours, exclusivity, travel requirements, and flexibility clauses. | Flag overly narrow duties that restrict operational flexibility or the employer's ability to change the role. | Flag open-ended duties, excessive hours, broad travel requirements, or unilateral employer change rights. |\n| Compensation | Identify salary, payment frequency, reviews, bonus, commission, allowances, and discretion. | Flag discretionary compensation arrangements that may create enforceable entitlement expectations. | Flag fully discretionary compensation, unclear bonus criteria, or missing payment timing. |\n| Benefits | Summarize pension, insurance, leave, expenses, equity incentives, and employer discretion. | Flag benefit commitments that may be difficult to modify or withdraw without breach. | Flag benefits that can be withdrawn without notice or that conflict with the offer letter. |\n| Holiday and Leave | State annual leave, sickness absence, statutory leave, notice requirements, and carry-over rules. | Flag carry-over obligations or leave accrual that creates significant financial liability. | Flag entitlements below statutory minimums, unclear carry-over rules, or inadequate sick pay. |\n| Policies and Handbook | Identify incorporated policies, contractual status, and amendment rights. | Flag policies incorporated as contractual that cannot be changed unilaterally without employee consent. | Flag policies incorporated as contractual while the employer retains unilateral amendment rights. |\n| Confidentiality | Summarize confidentiality obligations during and after employment. | Flag confidentiality obligations too narrow to protect business-critical information. | Flag overbroad confidential information definitions or indefinite restrictions beyond legitimate business interests. |\n| Intellectual Property | Identify ownership, assignment, inventions, works, moral rights waivers, and assistance obligations. | Flag gaps in IP assignment covering inventions or works made during employment or using company resources. | Flag assignment of unrelated personal inventions, works outside employment scope, or unpaid post-employment assistance obligations. |\n| Data Protection and Monitoring | Summarize monitoring, privacy, processing, and consent provisions. | Flag monitoring arrangements that may expose the employer to data protection liability. | Flag intrusive monitoring, blanket consent provisions, or missing privacy notice references. |\n| Conflicts and Outside Activities | Identify restrictions on outside work, directorships, investments, conflicts, and disclosure duties. | Flag insufficient restrictions on outside activities or conflicts that could harm business interests. | Flag broad bans on passive investments, restrictions on unrelated outside work, or disclosure obligations for non-conflicting activities. |\n| Termination | State notice periods, payment in lieu, garden leave, summary dismissal, severance, and survival terms. | Flag notice periods or severance obligations that unduly limit employer termination flexibility. | Flag one-sided notice rights, broad summary dismissal triggers, or unclear payment in lieu treatment. |\n| Restrictive Covenants | Summarize non-compete, non-solicit, non-dealing, non-poach, and confidentiality covenants. | Flag covenants too narrow in scope, too short in duration, or likely to be unenforceable. | Flag excessive duration, broad geographic scope, wide covered customers, or covenants that may be unenforceable restraints. |\n| Return of Property | Identify obligations to return devices, documents, data, confidential information, and property. | Flag unclear scope of return obligations or no mechanism to enforce retrieval of business property. | Flag no carve-out for personal materials or obligations that require returning statutory record retention copies. |\n| Governing Law and Dispute Resolution | State governing law, courts, tribunal forum, arbitration, and mandatory procedures. Flag unfamiliar law, unclear mandatory procedures, or arbitration clauses that may limit statutory rights. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { "id": "builtin-extract-key-terms", @@ -1740,12 +1737,12 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: { "id": "builtin-guarantee-agreement-review", "title": "Guarantee Agreement Review", - "skill_md": "# Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# Guarantee Agreement Review\n\n## Instructions\n\nReview the uploaded guarantee, guaranty, or guarantee-and-indemnity agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - guarantee is uncapped\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Cap and Limits | High - Clause [x] does not include a monetary cap or time limit. The general exposure point and the guarantor-specific checklist point indicate uncapped liability risk for the guarantor. | For the guarantor, add a monetary cap, currency limit, time limit, and exclusions for obligations outside the agreed transaction. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Guarantor or Guarantee Holder).\n\n| Issue | General | Guarantor | Guarantee Holder |\n| --- | --- | --- | --- |\n| Parties | Identify all parties with full legal names and roles, including guarantor, principal obligor, agent, and security trustee. Flag incorrect entities, missing capacity details, or unclear party or agent structure. | | |\n| Guaranteed Obligations | Summarize payment, performance, indemnity, costs, interest, fees, future advances, and all-monies coverage. | Flag broad all-monies coverage, obligations beyond the intended transaction, or future advances not agreed at outset. | Flag gaps in guaranteed obligations or exclusions of fees, interest, or enforcement costs. |\n| Nature of Liability | State whether liability is primary, secondary, joint and several, continuing, independent, on-demand, or principal debtor liability. | Flag primary, on-demand, or principal debtor liability where only secondary guarantee risk was intended. | Flag secondary-only liability or absence of principal debtor language that weakens enforcement. |\n| Guarantee vs Indemnity | Identify any separate indemnity or principal debtor language and explain practical effect. | Flag separate indemnity language that expands exposure beyond the underlying obligation or bypasses guarantor defences. | Flag absence of indemnity or principal debtor language that could allow defences to defeat enforcement. |\n| Cap and Limits | State monetary cap, currency, interest cap, time limit, excluded obligations, and other limits. | Flag uncapped exposure, unclear currency, or no temporal limit on guaranteed obligations. | Flag caps too low to cover the full facility, or caps that exclude interest, fees, and enforcement costs. |\n| Continuing Security | Summarize future, contingent, amended, refinanced, reinstated, or continuing obligations. | Flag coverage of unknown future obligations or amendments to the underlying facility without guarantor consent. | Flag gaps in continuing security coverage or restrictions on amendments that limit lender flexibility. |\n| Demand Mechanics | Explain demand triggers, notice, payment timing, evidence, and conclusiveness. | Flag immediate payment without adequate evidence, conclusive certificates, or no notice period before demand. | Flag demand mechanics too cumbersome or conditions that allow the guarantor to delay payment. |\n| Defences and Waivers | Identify waivers of suretyship defences, diligence, presentment, set-off, marshalling, subrogation, contribution, and notice. | Flag broad waivers of fundamental defences, excessive restriction of set-off, or waiver of subrogation rights. | Flag incomplete waiver of suretyship defences that could allow the guarantor to avoid payment. |\n| Variations and Releases | Summarize effect of amendments, waivers, releases, insolvency events, or underlying document changes. | Flag guarantee surviving material changes to the underlying facility without guarantor consent. | Flag restrictions on amendments or waivers requiring guarantor consent that limit lender flexibility. |\n| Reinstatement | Identify clawback, preference, invalid payment, or reinstatement provisions. | Flag indefinite reinstatement obligations or reinstatement beyond reasonable insolvency clawback risk. | Flag absence of reinstatement provisions that could leave the guarantee holder exposed after a clawback. |\n| Subordination | Summarize restrictions on guarantor claims, subrogation, contribution, or proof in insolvency. | Flag indefinite blockage of guarantor recovery or subrogation rights after the guarantee holder is paid in full. | Flag absence of subordination provisions that could allow the guarantor to compete with the guarantee holder in insolvency. |\n| Representations and Covenants | Identify capacity, authority, solvency, consents, sanctions, and compliance covenants. | Flag repeating representations, broad compliance obligations, or solvency statements that may be difficult to give. | Flag weak representations or covenants that do not adequately confirm guarantor capacity and authority. |\n| Termination and Release | State how the guarantee may be terminated, released, discharged, or reduced. | Flag no release mechanism after repayment or facility termination, or unclear discharge conditions. | Flag release mechanics too easy to trigger or that do not require full repayment and discharge. |\n| Costs, Expenses, and Taxes | Summarize reimbursement, gross-up, tax indemnities, and enforcement costs. | Flag unlimited costs, gross-up for avoidable taxes, or broad indemnities beyond reasonable enforcement costs. | Flag cost recovery gaps that leave enforcement costs unrecoverable from the guarantor. |\n| Assignment and Transfer | Identify whether the guarantee holder may assign or transfer benefit and whether guarantor consent is required. | Flag free transfer of benefit to unknown creditors, distressed debt purchasers, or competitors without consent. | Flag consent mechanics that give the guarantor excessive control over assignment of the guarantee benefit. |\n| Governing Law and Dispute Resolution | State governing law, jurisdiction, arbitration, service of process, and immunity waiver provisions. Flag unfamiliar law, inconvenient forum, broad immunity waiver, unclear service mechanics, or inadequate interim relief provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { "id": "builtin-nda-review", "title": "NDA Review", - "skill_md": "# NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# NDA Review\n\n## Instructions\n\nReview the uploaded non-disclosure agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High - confidential information definition is too narrow\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to another party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Definition of Confidential Information | Medium - Clause [x] covers broad categories of information but does not clearly address oral disclosures. The general definition point and the disclosing-party checklist point indicate a protection gap. | For the disclosing party, add oral and visual disclosures and require written confirmation within a defined period. |\n| Drafting Consistency | Medium - Clauses [x] and [y] use inconsistent defined terms or party names. The general drafting point indicates ambiguity that may affect the represented party's rights or obligations. | For the represented party, align the defined terms, party names, numbering, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Disclosing Party or Receiving Party).\n\n| Issue | General | Disclosing Party | Receiving Party |\n| --- | --- | --- | --- |\n| Parties | Identify each party and their role. Confirm whether the NDA is mutual or one-way and that obligations are correctly allocated. Flag missing affiliates, mismatched roles, or obligations inconsistent with the agreed structure. | | |\n| Purpose | Summarize the permitted purpose for which confidential information may be used. | Flag overly broad purpose language that permits use beyond the intended transaction. | Flag unclear or narrow purpose that prevents legitimate use of information in connection with the transaction. |\n| Definition of Confidential Information | Explain what information is protected, including oral, visual, derived, or pre-existing information. | Flag definitions too narrow to protect all disclosed information, or no protection for oral or unmarked information. | Flag definitions overbroad, capturing publicly available information or information not actually sensitive. |\n| Exclusions | Identify standard exclusions such as public domain, independently developed, already known, or third-party received information. | Flag missing standard exclusions that would allow the receiving party to escape obligations too easily. | Flag missing standard exclusions (public domain, independently developed, already known) or exclusions that are too difficult to prove. |\n| Disclosure Obligations | Summarize confidentiality obligations, standard of care, and use or disclosure restrictions. | Flag standards of care too weak to adequately protect the information. | Flag strict liability, vague standards, or obligations higher than own-information standards that expose the receiving party disproportionately. |\n| Permitted Recipients | Identify who may receive confidential information, including affiliates, representatives, advisers, financing sources, or investors. | Flag recipient categories too broad, or no requirement for recipients to be bound by equivalent obligations. | Flag missing adviser, affiliate, or financing source access rights needed to evaluate the transaction. |\n| Recipient Liability | State whether the receiving party is responsible for breaches by permitted recipients. | Flag absence of receiving party responsibility for breaches by permitted recipients. | Flag uncapped liability for actions of recipients outside the party's direct control. |\n| Compelled Disclosure | Summarize disclosure required by law, regulation, court order, stock exchange, or governmental authority. | Flag no notice right, no cooperation obligation, or overly broad compelled disclosure permissions. | Flag overly burdensome notice requirements or obligations to resist disclosure beyond what is practicable. |\n| Term | State the agreement term and the duration of confidentiality obligations. | Flag obligations that expire too soon or unclear continuation of obligations after agreement end. | Flag indefinite obligations or unusually long terms for non-trade-secret information. |\n| Return or Destruction | Summarize return, destruction, retention, and archival copy obligations. | Flag no return obligation or inadequate destruction mechanics. | Flag no carve-out for archival, compliance, backup, or legal retention copies. |\n| Residual Knowledge | Identify whether unaided memory or residual knowledge may be used. | Flag broad residual knowledge rights that could undermine confidentiality protections. | Flag absence of a residual knowledge carve-out that prevents legitimate use of unaided memory. |\n| Non-Solicit / Standstill | Identify non-solicitation, non-circumvention, standstill, exclusivity, or similar restrictions. | Flag absence of non-solicitation or standstill protections where commercially expected. | Flag hidden restrictive covenants, long durations, broad covered persons, or restrictions unrelated to confidentiality. |\n| No Warranty / No Obligation | Summarize disclaimers about accuracy, completeness, warranties, or obligation to proceed. | Flag missing disclaimers that could create liability for the accuracy or completeness of disclosed information. | Flag disclaimers that conflict with fraud or intentional misrepresentation, or that expressly exclude reliance. |\n| Remedies | Identify injunctive relief, equitable remedies, indemnities, liquidated damages, or enforcement provisions. | Flag absence of injunctive relief or inadequate remedies for breach. | Flag automatic injunction language, broad indemnities, or liquidated damages without adequate safeguards. |\n| Assignment | Summarize restrictions on assignment or transfer. | Flag free assignment rights that could transfer obligations to unknown parties. | Flag restrictions that block legitimate affiliate transfers needed for the deal process. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration provisions, and submission to jurisdiction. Flag unfamiliar law, asymmetric process, inconvenient forum, or missing service provisions. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." }, { "id": "builtin-proofread", @@ -1753,8 +1750,8 @@ export const SYSTEM_ASSISTANT_WORKFLOWS: { id: string; title: string; skill_md: "skill_md": "# Proofread\n\n## Instructions\n\nReview the uploaded document for drafting quality, internal consistency, and mechanical errors. Focus on issues that a lawyer or reviewer should correct before the document is circulated, signed, or filed.\n\nProduce a concise Markdown table with exactly these columns:\n\n- Severity\n- Category\n- Location\n- Issue\n- Recommended Fix\n\nUse these severity ratings:\n\n- Critical: an inconsistency or drafting error that may materially change rights, obligations, parties, timing, or enforceability.\n- High: an error likely to create ambiguity, negotiation friction, or implementation risk.\n- Medium: a proofreading or consistency issue that should be fixed but is unlikely to change the main legal effect.\n- Low: a minor typo, grammar, formatting, punctuation, or style issue.\n\nReview the document for these categories:\n\n| Category | What to Check |\n| --- | --- |\n| Definitions | Check that defined terms are used consistently, all capitalized defined terms are defined, definitions are not duplicated or conflicting, definitions are not circular, unused definitions are identified, and defined terms match the operative provisions. |\n| Cross-References | Check that clause, section, schedule, exhibit, annex, and document references exist, point to the correct place, use the correct numbering, and remain accurate after any apparent drafting changes. |\n| Internal Consistency | Check for terms, sections, dates, parties, amounts, thresholds, notice periods, conditions, remedies, or obligations that conflict with each other or create inconsistent outcomes. |\n| Parties and Entity Names | Check that party names, entity suffixes, registration details, capacities, addresses, signatory names, and role labels are consistent throughout the document. |\n| Numbers, Dates, and Calculations | Check monetary amounts, percentages, dates, deadlines, time periods, notice periods, interest rates, formulas, schedules, and words-versus-figures consistency. |\n| Grammar and Typos | Check spelling, grammar, punctuation, missing words, duplicate words, repeated phrases, tense, subject-verb agreement, and obvious typographical errors. |\n| Numbering | Check clause numbering, section numbering, sub-clause hierarchy, schedule numbering, exhibit numbering, table numbering, skipped numbers, duplicate numbers, and numbering sequences. If the document has a table of contents, check that clause numbers, headings, and hierarchy are consistent with the table of contents. |\n| Formatting | Check headings, list formatting, indentation, spacing, fonts, emphasis, table formatting, schedule formatting, and inconsistent styles that may affect readability or references. |\n\nFor each issue, include the best available clause, section, page, schedule, or paragraph reference in the **Location** column. If the location is unclear, describe where the issue appears as specifically as possible.\n\nIn the **Issue** column, explain the problem and why it matters. In the **Recommended Fix** column, provide a specific correction or drafting action. Where useful, include replacement wording, but keep it concise. Do not rewrite the whole document. If no material issues are found, provide a short table row stating that no material proofreading issues were identified and note any review limitations.\n\nBefore finalizing, double-check that definitions, cross-references, numbering, formatting, and internal inconsistencies have each been considered separately. If a table of contents is present, verify that the clause numbers and headings in the document match the table of contents. Keep the response focused on actionable corrections." }, { - "id": "builtin-sha-summary", + "id": "builtin-shareholder-agreement-review", "title": "Shareholder Agreement Review", - "skill_md": "# Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Include annotations such as [1] and [2] in the **Summary** and **Recommended Change** columns to reference the relevant sections of the document. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." + "skill_md": "# Shareholder Agreement Review\n\n## Instructions\n\nReview the uploaded shareholder agreement and produce a comprehensive table-based legal review from the perspective of the party represented by the user/client. If the user has not already identified which party they represent, ask them to clarify that party before producing the review.\n\nOnce the represented party is clear, provide exactly one Markdown result table. Use one row for each material issue found in the agreement, guided by the review checklist below, and add a final row called **Overall Risk Rating**. The result table must have exactly these columns:\n\n- Issue\n- Summary\n- Recommended Change\n\nUse these risk ratings inside the **Summary** column: Low means standard or minimal concern; Medium means a manageable negotiation concern; High means a material legal, commercial, operational, or enforceability concern requiring negotiation; Critical means a severe issue that may block signing unless resolved. Start each summary with the risk rating, e.g. \"High — drag threshold is too low\".\n\nThe **Summary** column should include only the relevant points from the **General** checklist column and the party-specific checklist column for the represented party, together with clause references where available. Do not include issues that are adverse only to the other party unless they also create risk for the represented party. The **Recommended Change** column must be drafted from the represented party's perspective. Also flag general drafting errors that may affect the represented party, including inconsistent defined terms, inconsistent entity names, cross-reference errors, numbering issues, duplicated provisions, missing schedules, and internal inconsistencies. Keep the response concise and avoid long prose outside the table.\n\n## Result Table Format\n\nUse this result table structure. Cite the relevant clause, section, schedule, or page directly in the **Summary** and **Recommended Change** columns. The example rows are illustrative only; tailor the actual rows to the uploaded agreement and represented party.\n\n| Issue | Summary | Recommended Change |\n| --- | --- | --- |\n| Drag-Along Rights | High — Clause [x] sets the drag threshold at [x]% and does not include a minimum price protection. The minority-specific checklist point indicates the minority can be forced to sell at an unfavorable price. | For the minority, raise the drag threshold, add a minimum price equal to fair market value, and limit warranties to proceeds received. |\n| Drafting Consistency | Medium — Clauses [x] and [y] use inconsistent defined terms for the share classes. The general drafting point indicates ambiguity that may affect the represented party's rights. | For the represented party, align defined terms, share class definitions, and cross-references before signing. |\n\n## Review Checklist\n\nUse this checklist as guidance for what to review and flag. It is not the result-table template and should not be reproduced verbatim. For each checklist issue, consider both the **General** column and the party-specific column for the represented party (Majority or Minority).\n\n| Issue | General | Majority | Minority |\n| --- | --- | --- | --- |\n| Parties and Shareholdings | Identify each shareholder, role, share class, percentage holding, and fully diluted position. Flag inconsistent cap table information, missing parties, or unclear beneficial ownership. | | |\n| Share Classes and Rights | Summarize voting rights, dividend rights, liquidation preferences, conversion rights, redemption rights, and class consents. | Flag class consents or voting requirements that effectively give minority approval rights over ordinary decisions. | Flag hidden preference rights, disproportionate majority voting rights, or unfavorable class economics. |\n| Board Composition and Governance | Identify board size, appointment rights, observer rights, quorum, chair, and casting vote. | Flag quorum or deadlock provisions giving minority an effective veto over governance. | Flag entrenched majority appointment rights, casting vote held by a majority nominee, or no observer rights for minority. |\n| Reserved Matters | List matters requiring special majority, unanimity, investor consent, or board consent. | Flag reserved matters requiring minority consent that constrain ordinary business decisions. | Flag absence of meaningful minority veto rights or low-dollar thresholds allowing majority to structure around them. |\n| Pre-emption on New Shares | Summarize pre-emption rights, offer process, timing, exclusions, and carve-outs. | Flag mechanics slowing fundraising or requiring minority consent to issue new shares. | Flag broad carve-outs, short exercise periods, or mechanics permitting dilution without proper notice. |\n| Transfer Restrictions | Summarize lock-ups, prohibited transfers, permitted transfers, and consent requirements. | Flag restrictions preventing majority exit or group reorganisation without minority consent. | Flag absence of lock-up on majority transfers or mechanics allowing majority to exit leaving minority trapped. |\n| Right of First Refusal / Pre-emption on Transfer | Identify trigger, process, pricing, matching rights, and exceptions. | Flag long ROFR processes or pricing mechanics delaying majority exit. | Flag unclear matching rights, long processes excluding minority participation, or exceptions removing minority protections. |\n| Drag-Along Rights | Identify drag threshold, sale conditions, minority protections, and power of attorney. | Flag high drag threshold or conditions preventing majority from executing a sale. | Flag low drag threshold, no minimum price protection, forced warranties beyond proceeds received, or broad power of attorney. |\n| Tag-Along Rights | Identify triggering transfers, eligible holders, and sale terms. | Flag broad tag triggers complicating majority exit. | Flag missing or narrow tag rights, or mechanics allowing majority to exclude minority from exit proceeds. |\n| Anti-Dilution Protections | Identify anti-dilution mechanics, carve-outs, and adjustment triggers. | Flag mechanics punishing founders or majority holders on down-rounds. | Flag absence of anti-dilution protection, full ratchet terms, or unclear carve-outs from adjustment. |\n| Dividend Policy | Summarize dividend rights, preferential dividends, restrictions, and discretion. | Flag mandatory dividend obligations impairing business cash flow or restricting majority discretion. | Flag unclear preferential dividend rights or majority discretion over dividends without minority consent. |\n| Exit and Liquidity | Identify IPO, trade sale, redemption, put/call rights, timelines, and liquidation preferences. | Flag forced exit timelines or investor put rights constraining majority exit strategy. | Flag unclear waterfall on exit, exit rights not applying equally, or no minority participation in liquidity events. |\n| Deadlock | Summarize deadlock definition, escalation, expert determination, shoot-out, and liquidation mechanics. | Flag deadlock provisions giving minority disproportionate leverage or effective veto. | Flag shoot-out rights triggered at low thresholds or mechanics structurally favoring majority. |\n| Non-Compete and Non-Solicitation | Identify who is bound, restricted activities, geography, duration, and carve-outs. | Flag restraints binding the majority entity or overly broad scope applied to the majority group. | Flag broad non-competes restricting the minority's ability to operate independently after exit. |\n| Information Rights | Identify reporting, inspection, management accounts, and confidentiality obligations. | Flag extensive information rights giving minority commercially sensitive operational visibility. | Flag absence of reporting or inspection rights, or inadequate confidentiality obligations on recipients. |\n| Related Party Transactions | Identify approval requirements, disclosure duties, and arm's-length standards. | Flag overly strict conflict controls restricting legitimate majority-group transactions. | Flag weak conflict controls, broad permitted related-party dealings, or no arm's-length enforcement. |\n| Governing Law and Dispute Resolution | State governing law, forum, arbitration, escalation, and interim relief rights. Flag unclear or ambiguous forum or dispute mechanics. | | |\n\nDeliver the review inline in your chat response. Do not generate a downloadable Word document unless the user explicitly asks for one." } ]; diff --git a/frontend/public/icons/app-sidebar/library.svg b/frontend/public/icons/app-sidebar/library.svg index e68ea92..067637b 100644 --- a/frontend/public/icons/app-sidebar/library.svg +++ b/frontend/public/icons/app-sidebar/library.svg @@ -44,13 +44,10 @@ <stop offset="0.5" stop-color="#D9A94E"/> <stop offset="1" stop-color="#B07E2C"/> </linearGradient> - <filter id="bookShadow" x="-30%" y="-10%" width="170%" height="130%"> - <feDropShadow dx="1.2" dy="1.4" stdDeviation="1.1" flood-color="#111827" flood-opacity="0.28"/> - </filter> </defs> <!-- brown book --> - <g filter="url(#bookShadow)"> + <g> <rect x="6" y="3.8" width="11" height="49.2" rx="3" fill="url(#leatherBrown)" stroke="url(#rim)" stroke-width="1.4"/> <rect x="6.7" y="4.5" width="9.6" height="47.8" rx="2.4" fill="url(#spineGloss)"/> <path d="M8.1 8V49" stroke="#F0C7A2" stroke-opacity="0.28" stroke-width="0.65"/> @@ -62,7 +59,7 @@ </g> <!-- blue book --> - <g filter="url(#bookShadow)"> + <g> <rect x="19" y="8" width="11.5" height="45" rx="3" fill="url(#leatherBlue)" stroke="url(#rim)" stroke-width="1.4"/> <rect x="19.7" y="8.7" width="10.1" height="43.6" rx="2.4" fill="url(#spineGloss)"/> <path d="M21.2 12V49" stroke="#B9DCFF" stroke-opacity="0.3" stroke-width="0.65"/> @@ -74,7 +71,7 @@ </g> <!-- red book --> - <g filter="url(#bookShadow)"> + <g> <rect x="32.5" y="5" width="11" height="48" rx="3" fill="url(#leatherRed)" stroke="url(#rim)" stroke-width="1.4"/> <rect x="33.2" y="5.7" width="9.6" height="46.6" rx="2.4" fill="url(#spineGloss)"/> <path d="M34.6 9V49" stroke="#FFD0D2" stroke-opacity="0.3" stroke-width="0.65"/> @@ -86,7 +83,7 @@ </g> <!-- green book, leaning against the red book --> - <g transform="rotate(-9 62.1 52)" filter="url(#bookShadow)"> + <g transform="rotate(-9 62.1 52)"> <rect x="51.6" y="5.2" width="10.5" height="46.8" rx="3" fill="url(#leatherGreen)" stroke="url(#rim)" stroke-width="1.4"/> <rect x="52.3" y="5.9" width="9.1" height="45.4" rx="2.4" fill="url(#spineGloss)"/> <path d="M53.7 9.5V48.5" stroke="#FFFFFF" stroke-opacity="0.24" stroke-width="0.65"/> diff --git a/frontend/src/app/components/assistant/message/MarkdownContent.tsx b/frontend/src/app/components/assistant/message/MarkdownContent.tsx index da605aa..c3af80f 100644 --- a/frontend/src/app/components/assistant/message/MarkdownContent.tsx +++ b/frontend/src/app/components/assistant/message/MarkdownContent.tsx @@ -110,6 +110,18 @@ export function MarkdownContent({ {...withoutMarkdownNode(props)} /> ), + h5: (props) => ( + <h5 + className="text-base font-semibold mt-3 mb-2" + {...withoutMarkdownNode(props)} + /> + ), + h6: (props) => ( + <h6 + className="text-sm font-semibold mt-3 mb-2" + {...withoutMarkdownNode(props)} + /> + ), p: ({ node, ...props }) => { const parent = node && typeof node === "object" && "parent" in node @@ -275,4 +287,3 @@ export function MarkdownContent({ </div> ); } - diff --git a/frontend/src/app/components/assistant/message/useSmoothedReveal.ts b/frontend/src/app/components/assistant/message/useSmoothedReveal.ts index 13bbda0..bfcc527 100644 --- a/frontend/src/app/components/assistant/message/useSmoothedReveal.ts +++ b/frontend/src/app/components/assistant/message/useSmoothedReveal.ts @@ -55,6 +55,11 @@ export function useSmoothedReveal(text: string, active: boolean): string { }; }, [text.length, active]); + // Once the stream ends, render the authoritative text immediately. The + // effect above keeps the animation cursor in sync, but updating a ref does + // not trigger a render; slicing with the last animated state here could + // otherwise leave the final few characters permanently hidden. + if (!active) return text; + return text.slice(0, Math.min(revealedInt, text.length)); } - diff --git a/frontend/src/app/components/workflows/NewWorkflowModal.tsx b/frontend/src/app/components/workflows/NewWorkflowModal.tsx index 8f7a955..fe19263 100644 --- a/frontend/src/app/components/workflows/NewWorkflowModal.tsx +++ b/frontend/src/app/components/workflows/NewWorkflowModal.tsx @@ -164,14 +164,33 @@ interface Props { onClose: () => void; onCreated: (workflow: Workflow) => void; editWorkflow?: Workflow; + readOnly?: boolean; onUpdated?: (workflow: Workflow) => void; } +function getWorkflowSourceLabel(workflow: Workflow) { + if (workflow.is_system) return "System"; + if (workflow.is_owner === false) { + return workflow.shared_by_name?.trim() || "Shared"; + } + return "User"; +} + +const OPEN_SOURCE_STATUS_LABELS: Record< + NonNullable<Workflow["open_source_submission"]>["status"], + string +> = { + pending: "Pending review", + approved: "Approved", + rejected: "Rejected", +}; + export function NewWorkflowModal({ open, onClose, onCreated, editWorkflow, + readOnly = false, onUpdated, }: Props) { const [title, setTitle] = useState(""); @@ -199,6 +218,41 @@ export function NewWorkflowModal({ const markdownInputRef = useRef<HTMLInputElement>(null); const isEditing = !!editWorkflow; + const viewOnly = isEditing && readOnly; + const workflowDetails = editWorkflow + ? [ + { + label: "Type", + value: + editWorkflow.metadata.type === "tabular" + ? "Tabular" + : "Assistant", + }, + { + label: "Source", + value: getWorkflowSourceLabel(editWorkflow), + }, + ...(editWorkflow.metadata.version + ? [ + { + label: "Version", + value: editWorkflow.metadata.version, + }, + ] + : []), + ...(editWorkflow.open_source_submission + ? [ + { + label: "Open source", + value: + OPEN_SOURCE_STATUS_LABELS[ + editWorkflow.open_source_submission.status + ], + }, + ] + : []), + ] + : []; const isOtherLanguage = language === "Other"; const isOtherPractice = practice === "Other"; const isOtherJurisdiction = jurisdiction === "Other"; @@ -332,6 +386,7 @@ export function NewWorkflowModal({ async function handleSubmit(e: React.FormEvent) { e.preventDefault(); + if (viewOnly) return; if (!title.trim()) return; setLoading(true); setError(""); @@ -417,20 +472,24 @@ export function NewWorkflowModal({ onClose={handleClose} breadcrumbs={[ "Workflows", - isEditing ? "Edit workflow" : "New workflow", + isEditing ? "View and Edit details" : "New workflow", ]} - primaryAction={{ - label: loading - ? isEditing - ? "Saving…" - : "Creating…" - : isEditing - ? "Save changes" - : "Create workflow", - type: "submit", - form: formId, - disabled: !title.trim() || loading, - }} + primaryAction={ + viewOnly + ? undefined + : { + label: loading + ? isEditing + ? "Saving…" + : "Creating…" + : isEditing + ? "Save changes" + : "Create workflow", + type: "submit", + form: formId, + disabled: !title.trim() || loading, + } + } secondaryAction={ !isEditing && type === "assistant" ? { @@ -445,9 +504,23 @@ export function NewWorkflowModal({ <form id={formId} onSubmit={handleSubmit} - className="flex min-h-0 flex-1 flex-col" + className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-5" > <div className="space-y-6"> + {workflowDetails.length > 0 && ( + <dl className="grid grid-cols-2 gap-x-5 gap-y-4 rounded-2xl border border-white/70 bg-white/45 p-4 text-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] backdrop-blur-xl"> + {workflowDetails.map((detail) => ( + <div key={detail.label} className="min-w-0"> + <dt className="text-xs text-gray-400"> + {detail.label} + </dt> + <dd className="mt-0.5 truncate text-gray-700"> + {detail.value} + </dd> + </div> + ))} + </dl> + )} <div> <ModalFieldLabel htmlFor="workflow-title"> Title @@ -459,7 +532,8 @@ export function NewWorkflowModal({ onChange={(e) => setTitle(e.target.value)} placeholder="Add workflow name" variant="minimal" - autoFocus + disabled={viewOnly} + autoFocus={!viewOnly} /> </div> @@ -494,6 +568,7 @@ export function NewWorkflowModal({ id="workflow-language" value={language} options={languageOptions} + disabled={viewOnly} open={openDropdown === "language"} onOpenChange={(nextOpen) => setOpenDropdown((current) => @@ -517,6 +592,7 @@ export function NewWorkflowModal({ ref={customLanguageInputRef} type="text" value={customLanguage} + disabled={viewOnly} onChange={(e) => setCustomLanguage(e.target.value) } @@ -534,6 +610,7 @@ export function NewWorkflowModal({ id="workflow-practice" value={practice} options={PRACTICE_OPTIONS} + disabled={viewOnly} open={openDropdown === "practice"} onOpenChange={(nextOpen) => setOpenDropdown((current) => @@ -557,6 +634,7 @@ export function NewWorkflowModal({ ref={customInputRef} type="text" value={customPractice} + disabled={viewOnly} onChange={(e) => setCustomPractice(e.target.value) } @@ -575,6 +653,7 @@ export function NewWorkflowModal({ id="workflow-jurisdiction" value={jurisdiction} options={jurisdictionOptions} + disabled={viewOnly} open={openDropdown === "jurisdiction"} onOpenChange={(nextOpen) => setOpenDropdown((current) => @@ -600,6 +679,7 @@ export function NewWorkflowModal({ className="mt-2" value={jurisdictionRegion} options={jurisdictionRegionOptions} + disabled={viewOnly} placeholder={ jurisdiction === "United States" ? "Select state..." @@ -626,6 +706,7 @@ export function NewWorkflowModal({ ref={customJurisdictionInputRef} type="text" value={customJurisdiction} + disabled={viewOnly} onChange={(e) => setCustomJurisdiction(e.target.value) } diff --git a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx index d80b1fd..15827db 100644 --- a/frontend/src/app/components/workflows/WorkflowDetailPage.tsx +++ b/frontend/src/app/components/workflows/WorkflowDetailPage.tsx @@ -47,8 +47,25 @@ import { PeopleModal } from "@/app/components/modals/PeopleModal"; import { OpenSourceWorkflowModal } from "@/app/components/workflows/OpenSourceWorkflowModal"; import { PageHeader } from "@/app/components/shared/PageHeader"; import { PillButton } from "@/app/components/ui/pill-button"; +import { TabPillButton } from "@/app/components/ui/tab-pill-button"; +import { LIQUID_TABLE_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; import { NewWorkflowModal } from "@/app/components/workflows/NewWorkflowModal"; import { TabularReviewSkeuoIcon } from "@/app/components/shared/AppSidebarSkeuoIcons"; +import { + TABLE_CHECKBOX_CLASS, + SkeletonDot, + SkeletonLine, + TableBody, + TableCell, + TableEmptyState, + TableHeaderCell, + TableHeaderRow, + TablePrimaryCell, + TableRow, + TableScrollArea, + TableStickyCell, +} from "@/app/components/shared/TablePrimitive"; +import { TableToolbar } from "@/app/components/shared/TableToolbar"; import { useAuth } from "@/app/contexts/AuthContext"; import { useUserProfile } from "@/app/contexts/UserProfileContext"; import { downloadWorkflowZip } from "./workflowZipExport"; @@ -71,7 +88,6 @@ type DeleteStatus = "idle" | "loading" | "complete"; type WorkflowShare = Awaited<ReturnType<typeof listWorkflowShares>>[number]; const NAME_COL_W = "w-[332px] shrink-0"; -const CHECKBOX_GUTTER = "h-2.5 w-2.5 shrink-0"; const WORKFLOW_CONTRIBUTIONS_ENABLED = process.env.NEXT_PUBLIC_WORKFLOW_CONTRIBUTIONS_ENABLED === "true"; @@ -82,8 +98,6 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { const router = useRouter(); const { user } = useAuth(); const { profile } = useUserProfile(); - const stickyCellBg = "bg-[#fafbfc]"; - const [workflow, setWorkflow] = useState<Workflow | null>(null); const [loading, setLoading] = useState(true); const [notFound, setNotFound] = useState(false); @@ -308,6 +322,16 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { setAddColumnOpen(false); } + function handleDeleteSelectedColumns() { + const next = columns + .filter((column) => !selectedColIndices.includes(column.index)) + .map((column, index) => ({ ...column, index })); + setColumns(next); + saveColumns(next); + setSelectedColIndices([]); + setColActionsOpen(false); + } + function handleColumnSaved(updated: ColumnConfig) { const next = columns.map((c) => c.index === updated.index ? updated : c, @@ -335,7 +359,6 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { ]} /> <div className="flex min-h-0 flex-1 flex-col"> - <WorkflowMetadataSkeleton /> {workflowType === "tabular" ? ( <TabularWorkflowEditorSkeleton /> ) : ( @@ -364,15 +387,14 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { icon: Download, onSelect: () => downloadWorkflowZip(workflow, promptMd, columns), }, + { + label: "View and Edit details", + icon: Pencil, + onSelect: () => setDetailsOpen(true), + }, ]; if (!readOnly) { - workflowActionItems.push({ - label: "Edit details", - icon: Pencil, - onSelect: () => setDetailsOpen(true), - }); - if (canOpenSource) { workflowActionItems.push({ label: "Open source this", @@ -467,6 +489,7 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { <NewWorkflowModal open={detailsOpen} editWorkflow={workflow} + readOnly={readOnly} onClose={() => setDetailsOpen(false)} onCreated={() => undefined} onUpdated={(updated) => { @@ -537,12 +560,9 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { {/* Body */} <div className="flex-1 min-h-0 flex flex-col"> - {/* Metadata */} - <WorkflowMetadata workflow={workflow} /> - {workflow.metadata.type === "assistant" ? ( /* ── Assistant: WYSIWYG editor ── */ - <div className="flex-1 min-h-0 px-4 pb-2 pt-4 md:px-10 md:pb-3"> + <div className="flex-1 min-h-0 px-4 pb-2 pt-4 md:px-6 md:pb-3"> <WorkflowPromptEditor value={promptMd} onChange={readOnly ? undefined : handlePromptChange} @@ -552,51 +572,62 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { ) : ( /* ── Tabular: Column table ── */ <div className="flex flex-col flex-1 min-h-0 pt-2"> - {/* Toolbar */} {!readOnly && ( - <div className="flex items-center justify-between h-10 shrink-0 border-b border-gray-200 px-4 md:px-10"> - {visibleColumns.length > 0 && - selectedColIndices.length > 0 && ( - <div ref={colActionsRef} className="relative"> - <button - onClick={() => setColActionsOpen((v) => !v)} - className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors" + <TableToolbar + actions={ + <div className="flex items-center gap-2"> + {visibleColumns.length > 0 && + selectedColIndices.length > 0 && ( + <> + <div + ref={colActionsRef} + className="relative max-md:hidden" + > + <TabPillButton + onClick={() => + setColActionsOpen( + (open) => + !open, + ) + } + > + Actions + <ChevronDown className="h-3.5 w-3.5" /> + </TabPillButton> + {colActionsOpen && ( + <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> + <button + onClick={ + handleDeleteSelectedColumns + } + className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" + > + Delete + </button> + </div> + )} + </div> + <TabPillButton + onClick={ + handleDeleteSelectedColumns + } + className="text-red-600 md:hidden" + > + Delete + </TabPillButton> + </> + )} + <TabPillButton + onClick={() => + setAddColumnOpen(true) + } > - Actions - <ChevronDown className="h-3.5 w-3.5" /> - </button> - {colActionsOpen && ( - <div className="absolute top-full right-0 mt-1 w-36 rounded-lg border border-gray-100 bg-white shadow-lg z-50 overflow-hidden"> - <button - onClick={() => { - const next = columns - .filter((c) => !selectedColIndices.includes(c.index)) - .map((c, i) => ({ ...c, index: i })); - setColumns(next); - saveColumns(next); - setSelectedColIndices([]); - setColActionsOpen(false); - }} - className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-50 transition-colors" - > - Delete - </button> - </div> - )} + <Plus className="h-3.5 w-3.5" /> + Add Column + </TabPillButton> </div> - )} - {(visibleColumns.length === 0 || - selectedColIndices.length === 0) && ( - <span aria-hidden="true" /> - )} - <button - onClick={() => setAddColumnOpen(true)} - className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 transition-colors" - > - <Plus className="h-3.5 w-3.5" /> - Add Column - </button> - </div> + } + /> )} {readOnly && ( <div className="flex h-10 shrink-0 items-center bg-gray-50 px-4 md:px-10"> @@ -606,36 +637,63 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { </div> )} - <div className="flex-1 min-h-0 overflow-auto"> - <div className="min-w-max flex min-h-full flex-col"> - {/* Table header */} - <div className={`flex items-center h-8 pr-3 md:pr-10 border-b border-gray-200 text-xs text-gray-500 font-medium shrink-0 select-none ${readOnly ? "border-t" : ""}`}> - <div className={`sticky left-0 z-[60] ${NAME_COL_W} ${stickyCellBg} flex items-center gap-4 self-stretch pl-4 pr-2 text-left`}> - {visibleColumns.length > 0 ? ( - <input - type="checkbox" - checked={selectedColIndices.length === visibleColumns.length} - ref={(el) => { if (el) el.indeterminate = selectedColIndices.length > 0 && selectedColIndices.length < visibleColumns.length; }} - onChange={() => setSelectedColIndices(selectedColIndices.length === visibleColumns.length ? [] : visibleColumns.map((c) => c.index))} - className={`${CHECKBOX_GUTTER} rounded border-gray-200 cursor-pointer accent-black`} - /> - ) : ( - <span - className={CHECKBOX_GUTTER} - aria-hidden="true" - /> - )} - <span>Column Title</span> - </div> - <div className="ml-auto w-36 shrink-0">Format</div> - <div className="flex-1 min-w-0">Prompt</div> - {!readOnly && <div className="w-8 shrink-0" />} - </div> - - {/* Rows */} - <div className="flex-1"> + <TableScrollArea + header={ + <TableHeaderRow className="md:pr-10"> + <TableStickyCell + header + widthClassName={NAME_COL_W} + > + {visibleColumns.length > 0 ? ( + <input + type="checkbox" + checked={ + selectedColIndices.length === + visibleColumns.length + } + ref={(el) => { + if (el) + el.indeterminate = + selectedColIndices.length > + 0 && + selectedColIndices.length < + visibleColumns.length; + }} + onChange={() => + setSelectedColIndices( + selectedColIndices.length === + visibleColumns.length + ? [] + : visibleColumns.map( + (column) => + column.index, + ), + ) + } + className={TABLE_CHECKBOX_CLASS} + /> + ) : ( + <span + className="mr-4 h-2.5 w-2.5 shrink-0" + aria-hidden="true" + /> + )} + <span>Column Title</span> + </TableStickyCell> + <TableHeaderCell className="ml-auto w-36"> + Format + </TableHeaderCell> + <TableHeaderCell className="min-w-[240px] flex-1"> + Prompt + </TableHeaderCell> + {!readOnly && ( + <TableHeaderCell className="w-8" /> + )} + </TableHeaderRow> + } + > {visibleColumns.length === 0 ? ( - <div className="flex flex-col items-start py-24 w-full max-w-xs mx-auto"> + <TableEmptyState> <TabularReviewSkeuoIcon className="mb-4 h-8 w-8" /> <p className="text-2xl font-medium font-serif text-gray-900"> Columns @@ -654,68 +712,100 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { Add Column </PillButton> )} - </div> + </TableEmptyState> ) : ( - visibleColumns.map((col) => { - const FormatIcon = formatIcon(col.format ?? "text"); - const isChecked = selectedColIndices.includes(col.index); - return ( - <div - key={col.index} - onClick={() => readOnly ? setViewingColumn(col) : setEditingColumn(col)} - className="group flex items-center h-10 pr-3 md:pr-10 border-b border-gray-50 hover:bg-gray-100/70 cursor-pointer transition-colors" - > - <div className={`sticky left-0 z-[60] ${NAME_COL_W} py-2 pl-4 pr-2 ${isChecked ? "bg-gray-50" : stickyCellBg} transition-colors group-hover:bg-gray-100/70`}> - <div className="flex min-w-0 items-center gap-4"> - <input - type="checkbox" - checked={isChecked} - onChange={() => setSelectedColIndices((prev) => prev.includes(col.index) ? prev.filter((i) => i !== col.index) : [...prev, col.index])} - onClick={(e) => e.stopPropagation()} - className={`${CHECKBOX_GUTTER} rounded border-gray-200 cursor-pointer accent-black`} - /> - <span className="min-w-0 flex-1 truncate text-sm text-gray-800"> - {col.name} + <TableBody> + {visibleColumns.map((col) => { + const FormatIcon = formatIcon( + col.format ?? "text", + ); + const isChecked = + selectedColIndices.includes( + col.index, + ); + return ( + <TableRow + key={col.index} + selected={isChecked} + onClick={() => + readOnly + ? setViewingColumn(col) + : setEditingColumn(col) + } + className="md:pr-10" + > + <TablePrimaryCell + widthClassName={NAME_COL_W} + selected={isChecked} + onSelectionChange={() => + setSelectedColIndices( + (previous) => + previous.includes( + col.index, + ) + ? previous.filter( + (index) => + index !== + col.index, + ) + : [ + ...previous, + col.index, + ], + ) + } + label={col.name} + /> + <TableCell className="ml-auto w-36"> + <span className="inline-flex items-center gap-1.5 text-xs text-gray-600"> + <FormatIcon + className={`h-3.5 w-3.5 ${formatIconClassName(col.format ?? "text")}`} + /> + {formatLabel( + col.format ?? + "text", + )} </span> - </div> - </div> - <div className="ml-auto w-36 shrink-0"> - <span className="inline-flex items-center gap-1.5 text-xs text-gray-600"> - <FormatIcon - className={`h-3.5 w-3.5 ${formatIconClassName(col.format ?? "text")}`} - /> - {formatLabel(col.format ?? "text")} - </span> - </div> - <div className="flex-1 min-w-0 pr-4"> - <span className="text-xs text-gray-500 truncate block"> + </TableCell> + <TableCell className="min-w-[240px] flex-1 pr-4 text-xs"> {col.prompt} - </span> - </div> - {!readOnly && ( - <div className="w-8 shrink-0 flex justify-end"> - <button - onClick={(e) => { - e.stopPropagation(); - const next = columns - .filter((c) => c.index !== col.index) - .map((c, i) => ({ ...c, index: i })); - setColumns(next); - saveColumns(next); - }} - className="p-1 text-gray-300 hover:text-red-500 transition-colors" - > - <X className="h-3.5 w-3.5" /> - </button> - </div> - )} - </div> - ); - }) + </TableCell> + {!readOnly && ( + <div className="w-8 shrink-0 flex justify-end"> + <button + onClick={(e) => { + e.stopPropagation(); + const next = + columns + .filter( + (column) => + column.index !== + col.index, + ) + .map( + ( + column, + index, + ) => ({ + ...column, + index, + }), + ); + setColumns(next); + saveColumns(next); + }} + className="p-1 text-gray-300 hover:text-red-500 transition-colors" + > + <X className="h-3.5 w-3.5" /> + </button> + </div> + )} + </TableRow> + ); + })} + </TableBody> )} - </div> - </div> - </div> + </TableScrollArea> </div> )} </div> @@ -753,81 +843,12 @@ export function WorkflowDetailPage({ id, workflowType }: Props) { ); } -function WorkflowMetadata({ workflow }: { workflow: Workflow }) { - const fields: { label: string; value: string }[] = [ - { label: "Type", value: workflow.metadata.type === "tabular" ? "Tabular" : "Assistant" }, - { label: "Source", value: getWorkflowSourceLabel(workflow) }, - ]; - if (workflow.metadata.language) fields.push({ label: "Language", value: workflow.metadata.language }); - if (workflow.metadata.version) fields.push({ label: "Version", value: workflow.metadata.version }); - if (workflow.metadata.practice) fields.push({ label: "Practice", value: workflow.metadata.practice }); - if (workflow.metadata.jurisdictions?.length) { - fields.push({ label: "Jurisdiction", value: workflow.metadata.jurisdictions.join(", ") }); - } - if (workflow.open_source_submission) { - const statusLabels: Record< - NonNullable<Workflow["open_source_submission"]>["status"], - string - > = { - pending: "Pending review", - approved: "Approved", - rejected: "Rejected", - }; - fields.push({ - label: "Open source", - value: statusLabels[workflow.open_source_submission.status], - }); - } - - return ( - <div className="flex flex-wrap gap-x-8 gap-y-3 px-4 pb-3 pt-1 text-xs shrink-0 md:px-10"> - {fields.map(({ label, value }) => ( - <div key={label} className="flex flex-col gap-0.5"> - <span className="text-gray-400">{label}</span> - <span className="text-gray-700">{value}</span> - </div> - ))} - </div> - ); -} - -function WorkflowMetadataSkeleton() { - const fields = [ - { labelWidth: "w-8", valueWidth: "w-16" }, - { labelWidth: "w-10", valueWidth: "w-14" }, - { labelWidth: "w-12", valueWidth: "w-20" }, - { labelWidth: "w-10", valueWidth: "w-12" }, - { labelWidth: "w-12", valueWidth: "w-24" }, - ]; - - return ( - <div className="flex shrink-0 flex-wrap gap-x-8 gap-y-3 px-4 pb-3 pt-1 md:px-10"> - {fields.map((field, index) => ( - <div key={index} className="flex flex-col gap-0.5"> - <div - className={`h-4 ${field.labelWidth} animate-pulse rounded bg-gray-100`} - /> - <div - className={`h-4 ${field.valueWidth} animate-pulse rounded bg-gray-100`} - /> - </div> - ))} - </div> - ); -} - -function getWorkflowSourceLabel(workflow: Workflow) { - if (workflow.is_system) return "System"; - if (workflow.is_owner === false) { - return workflow.shared_by_name?.trim() || "Shared"; - } - return "User"; -} - function AssistantWorkflowEditorSkeleton() { return ( - <div className="min-h-0 flex-1 px-4 pb-2 pt-4 md:px-10 md:pb-3"> - <div className="h-full rounded-md border border-gray-200 bg-gray-50 px-5 py-4"> + <div className="min-h-0 flex-1 px-4 pb-2 pt-4 md:px-6 md:pb-3"> + <div + className={`h-full px-5 py-4 ${LIQUID_TABLE_SURFACE_CLASS}`} + > <div className="space-y-3"> <div className="h-3 w-24 animate-pulse rounded bg-gray-100" /> <div className="h-3 w-5/6 animate-pulse rounded bg-gray-100" /> @@ -851,60 +872,68 @@ function AssistantWorkflowEditorSkeleton() { } function TabularWorkflowEditorSkeleton() { + const titleWidths = ["w-36", "w-44", "w-40", "w-52", "w-48"]; + const promptWidths = ["w-64", "w-80", "w-72", "w-96", "w-60"]; + return ( <div className="flex min-h-0 flex-1 flex-col pt-2"> - <div className="flex h-10 shrink-0 items-center justify-end border-b border-gray-200 px-4 md:px-10"> - <div className="h-3 w-20 animate-pulse rounded bg-gray-100" /> - </div> - - <div className="flex h-8 shrink-0 items-center border-b border-gray-200 pr-3 md:pr-10"> - <div - className={`${NAME_COL_W} flex shrink-0 items-center gap-4 self-stretch pl-4 pr-2`} - > - <div - className={`${CHECKBOX_GUTTER} animate-pulse rounded bg-gray-100`} - /> - <div className="h-2.5 w-20 animate-pulse rounded bg-gray-100" /> - </div> - <div className="w-36 shrink-0"> - <div className="h-2.5 w-14 animate-pulse rounded bg-gray-100" /> - </div> - <div className="flex-1"> - <div className="h-2.5 w-12 animate-pulse rounded bg-gray-100" /> - </div> - <div className="w-8 shrink-0" /> - </div> - - <div className="flex-1 overflow-hidden"> - {[1, 2, 3, 4, 5].map((i) => ( - <div - key={i} - className="flex h-10 items-center border-b border-gray-50 pr-3 md:pr-10" - > - <div - className={`${NAME_COL_W} flex shrink-0 items-center gap-4 pl-4 pr-2`} + <TableToolbar + actions={ + <SkeletonLine className="h-7 w-24 rounded-full" /> + } + /> + <TableScrollArea + header={ + <TableHeaderRow className="md:pr-10"> + <TableStickyCell + header + hover={false} + widthClassName={NAME_COL_W} > - <div - className={`${CHECKBOX_GUTTER} animate-pulse rounded bg-gray-100`} - /> - <div - className="h-3 animate-pulse rounded bg-gray-100" - style={{ width: `${40 + (i * 13) % 35}%` }} - /> - </div> - <div className="w-36 shrink-0"> - <div className="h-3 w-16 animate-pulse rounded bg-gray-100" /> - </div> - <div className="flex-1 pr-4"> - <div - className="h-3 animate-pulse rounded bg-gray-100" - style={{ width: `${50 + (i * 17) % 35}%` }} - /> - </div> - <div className="w-8 shrink-0" /> - </div> - ))} - </div> + <SkeletonDot className="mr-4" /> + <SkeletonLine className="h-2.5 w-20" /> + </TableStickyCell> + <TableHeaderCell className="ml-auto w-36"> + <SkeletonLine className="h-2.5 w-14" /> + </TableHeaderCell> + <TableHeaderCell className="min-w-[240px] flex-1"> + <SkeletonLine className="h-2.5 w-12" /> + </TableHeaderCell> + <TableHeaderCell className="w-8" /> + </TableHeaderRow> + } + > + <TableBody> + {[1, 2, 3, 4, 5].map((i) => ( + <TableRow + key={i} + interactive={false} + className="md:pr-10" + > + <TableStickyCell + hover={false} + widthClassName={NAME_COL_W} + > + <div className="flex min-w-0 flex-1 items-center"> + <SkeletonDot className="mr-4" /> + <SkeletonLine + className={`h-3 ${titleWidths[i - 1]}`} + /> + </div> + </TableStickyCell> + <TableCell className="ml-auto w-36"> + <SkeletonLine className="w-16" /> + </TableCell> + <TableCell className="min-w-[240px] flex-1 pr-4"> + <SkeletonLine + className={promptWidths[i - 1]} + /> + </TableCell> + <TableCell className="w-8" /> + </TableRow> + ))} + </TableBody> + </TableScrollArea> </div> ); } diff --git a/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx b/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx index 1b33ff8..2e6f004 100644 --- a/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx +++ b/frontend/src/app/components/workflows/WorkflowPromptEditor.tsx @@ -17,6 +17,7 @@ import { Table2, } from "lucide-react"; import { Button } from "@/app/components/ui/button"; +import { LIQUID_TABLE_SURFACE_CLASS } from "@/app/components/ui/liquid-surface"; interface Props { value: string; @@ -352,14 +353,10 @@ export function WorkflowPromptEditor({ return ( <div - className={`flex h-full flex-col overflow-hidden bg-white ${ - readOnly - ? "rounded-md border border-gray-200" - : "rounded-md border border-gray-200" - }`} + className={`flex h-full flex-col overflow-hidden ${LIQUID_TABLE_SURFACE_CLASS}`} > {!readOnly && editor && ( - <div className="flex items-center gap-0.5 px-2 py-1.5 border-b border-gray-100 bg-gray-50 shrink-0"> + <div className="flex shrink-0 items-center gap-0.5 border-b border-white/70 bg-app-surface px-2 py-1.5 backdrop-blur-xl"> <AppToolbarButton onClick={() => rawMode @@ -558,7 +555,7 @@ export function WorkflowPromptEditor({ </div> )} {readOnly && ( - <div className="flex h-9 shrink-0 items-center justify-between bg-gray-50 px-5"> + <div className="flex h-9 shrink-0 items-center justify-between bg-app-surface px-5 backdrop-blur-xl"> <span className="text-xs font-medium text-gray-500"> Read-only </span> @@ -591,7 +588,7 @@ export function WorkflowPromptEditor({ } readOnly={readOnly} spellCheck={false} - className="h-full min-h-full w-full resize-none bg-white px-5 py-4 font-mono text-xs leading-6 text-gray-800 outline-none placeholder:text-gray-400 read-only:cursor-default" + className="h-full min-h-full w-full resize-none bg-transparent px-5 py-4 font-mono text-xs leading-6 text-gray-800 outline-none placeholder:text-gray-400 read-only:cursor-default" aria-label="Raw Markdown" /> ) : ( diff --git a/frontend/src/app/hooks/useAssistantChat.ts b/frontend/src/app/hooks/useAssistantChat.ts index 62a0085..6de162f 100644 --- a/frontend/src/app/hooks/useAssistantChat.ts +++ b/frontend/src/app/hooks/useAssistantChat.ts @@ -380,11 +380,16 @@ export function useAssistantChat({ while (true) { const { done, value } = await reader.read(); - if (done) break; - - buffer += decoder.decode(value, { stream: true }); + if (done) { + // Flush any bytes still held by TextDecoder. A response is allowed + // to close without a final newline, so the remaining buffer must be + // parsed as the last SSE record instead of being discarded. + buffer += decoder.decode(); + } else { + buffer += decoder.decode(value, { stream: true }); + } const lines = buffer.split("\n"); - buffer = lines.pop() || ""; + buffer = done ? "" : lines.pop() || ""; for (const line of lines) { const trimmed = line.trim(); @@ -1181,6 +1186,8 @@ export function useAssistantChat({ ); } } + + if (done) break; } finalizeStreamingReasoning(); diff --git a/scripts/build-workflows.js b/scripts/build-workflows.js index f4fc14c..d739c94 100644 --- a/scripts/build-workflows.js +++ b/scripts/build-workflows.js @@ -6,7 +6,10 @@ const path = require("path"); const ROOT_DIR = path.resolve(__dirname, ".."); const WORKSPACE_DIR = path.resolve(ROOT_DIR, ".."); const WORKFLOWS_DIR = path.join(WORKSPACE_DIR, "mike-workflows"); -const SYSTEM_WORKFLOWS_DIR = path.join(WORKFLOWS_DIR, "system"); +const WORKFLOW_COLLECTIONS = [ + { directory: "assistant-workflows", type: "assistant" }, + { directory: "tabular-review-workflows", type: "tabular" }, +]; const BACKEND_OUT = path.join(ROOT_DIR, "backend/src/lib/systemWorkflows.ts"); const LANDING_OUT = path.join(ROOT_DIR, "landing/app/generated-workflows.ts"); @@ -75,6 +78,7 @@ function parseSimpleYaml(source, label) { const scalarItems = []; const objectItems = []; + const properties = {}; let mode = null; i++; for (; i < lines.length; i++) { @@ -116,6 +120,19 @@ function parseSimpleYaml(source, label) { continue; } + const childPropMatch = child.match(/^ ([A-Za-z_][A-Za-z0-9_-]*):(.*)$/); + if (childPropMatch) { + mode ??= "properties"; + if (mode !== "properties") { + fail(`${label}.${key} mixes mapping and list values`); + } + properties[childPropMatch[1]] = parseScalar( + childPropMatch[2], + `${label}.${key}.${childPropMatch[1]}`, + ); + continue; + } + const propMatch = child.match(/^ ([A-Za-z_][A-Za-z0-9_-]*):(.*)$/); if (!propMatch || mode !== "objects" || objectItems.length === 0) { fail(`${label}:${i + 1} has unsupported frontmatter structure`); @@ -126,7 +143,12 @@ function parseSimpleYaml(source, label) { ); } - result[key] = mode === "objects" ? objectItems : scalarItems; + result[key] = + mode === "objects" + ? objectItems + : mode === "properties" + ? properties + : scalarItems; } return result; @@ -152,7 +174,7 @@ function readSkillFile(filePath) { }; } -function parseTableConfigYaml(filePath) { +function parseTableColumnsYaml(filePath) { const lines = readText(filePath).replace(/\r\n/g, "\n").split("\n"); const result = { columns_config: [] }; let i = 0; @@ -171,8 +193,8 @@ function parseTableConfigYaml(filePath) { continue; } - if (line !== "columns_config:") { - fail(`${relative(filePath)}:${i + 1} is not valid table config YAML`); + if (line !== "columns:") { + fail(`${relative(filePath)}:${i + 1} is not valid table columns YAML`); } i++; break; @@ -300,9 +322,8 @@ function assertColumnConfig(columns, label) { }); } -function readWorkflow(category, dirent) { - const slug = dirent.name; - const workflowDir = path.join(SYSTEM_WORKFLOWS_DIR, category, slug); +function readWorkflow(category, workflowDir) { + const slug = path.basename(workflowDir); const metadataPath = path.join(workflowDir, "metadata.json"); if (fs.existsSync(metadataPath)) { fail(`${relative(metadataPath)} is no longer supported; use SKILL.md frontmatter`); @@ -311,103 +332,93 @@ function readWorkflow(category, dirent) { if (!fs.existsSync(skillPath)) { fail(`${relative(skillPath)} is required`); } - const { metadata, body: skillMd, fullText: sourceSkillMd } = readSkillFile(skillPath); + const { metadata: frontmatter, body: skillMd, fullText: sourceSkillMd } = + readSkillFile(skillPath); const label = `${relative(skillPath)} frontmatter`; + const metadata = frontmatter.metadata; const id = `builtin-${slug}`; - if (metadata.id !== undefined) { - fail(`${label}.id is not supported; the ID is generated from the directory name`); - } - if (metadata.$schema !== undefined) { - fail(`${label}.$schema is not supported in SKILL.md frontmatter`); - } - if (metadata.title !== undefined) { - fail(`${label}.title is not supported; use name`); - } - if (metadata.order !== undefined) { - fail(`${label}.order is not supported`); - } - assertString(metadata.name, `${label}.name`); - if (metadata.name !== slug) { + assertString(frontmatter.name, `${label}.name`); + if (frontmatter.name !== slug) { fail(`${label}.name must match the folder name "${slug}"`); } - assertString(metadata.display_name, `${label}.display_name`); - assertString(metadata.description, `${label}.description`); - const contributors = normalizeContributors( - metadata.contributors, - `${label}.contributors`, - ); + assertString(frontmatter.description, `${label}.description`); + assertString(frontmatter.license, `${label}.license`); + if (!metadata || typeof metadata !== "object" || Array.isArray(metadata)) { + fail(`${label}.metadata must be a mapping`); + } + assertString(metadata.author, `${label}.metadata.author`); assertString(metadata.language, `${label}.language`); assertString(metadata.version, `${label}.version`); - if (metadata.type !== category) { - fail(`${label}.type must be "${category}"`); + assertString(metadata["mike-display-name"], `${label}.metadata.mike-display-name`); + if (metadata["mike-type"] !== category) { + fail(`${label}.metadata.mike-type must be "${category}"`); } - if (metadata.category !== undefined) { - fail(`${label}.category is not supported`); + if (!["system", "add-on"].includes(metadata["mike-availability"])) { + fail(`${label}.metadata.mike-availability must be "system" or "add-on"`); } - if (metadata.action !== undefined) { - fail(`${label}.action is not supported`); - } - assertOptionalString(metadata.practice, `${label}.practice`); - assertOptionalStringArray(metadata.jurisdictions, `${label}.jurisdictions`); + assertString(metadata.practice, `${label}.metadata.practice`); + assertString(metadata.jurisdictions, `${label}.metadata.jurisdictions`); + + const normalizedMetadata = { + title: metadata["mike-display-name"], + description: frontmatter.description, + type: metadata["mike-type"], + contributors: [ + { + name: metadata.author.trim(), + organisation: null, + role: null, + linkedin: null, + }, + ], + language: metadata.language, + version: metadata.version, + practice: metadata.practice, + jurisdictions: metadata.jurisdictions + .split(",") + .map((item) => item.trim()) + .filter(Boolean), + }; if (category === "assistant") { if (!skillMd.trim()) { fail(`${relative(skillPath)} must include instructions after frontmatter`); } - const tableConfigPath = path.join(workflowDir, "table-config.yaml"); - if (fs.existsSync(tableConfigPath)) { - fail(`${relative(tableConfigPath)} is only supported for tabular workflows`); + const tableColumnsPath = path.join(workflowDir, "table-columns.yaml"); + if (fs.existsSync(tableColumnsPath)) { + fail(`${relative(tableColumnsPath)} is only supported for tabular workflows`); } return { id, - metadata: { - title: metadata.display_name, - description: metadata.description, - type: metadata.type, - contributors, - language: metadata.language, - version: metadata.version, - practice: metadata.practice ?? null, - jurisdictions: metadata.jurisdictions ?? null, - }, + availability: metadata["mike-availability"], + metadata: normalizedMetadata, skill_md: skillMd, source_skill_md: sourceSkillMd, columns_config: null, }; } - if (metadata.columns_config !== undefined) { - fail(`${label}.columns_config is not supported; use table-config.yaml`); + const tableColumnsPath = path.join(workflowDir, "table-columns.yaml"); + if (!fs.existsSync(tableColumnsPath)) { + fail(`${relative(tableColumnsPath)} is required for tabular workflows`); } - const legacyTableConfigPath = path.join(workflowDir, "table-config.json"); - if (fs.existsSync(legacyTableConfigPath)) { - fail(`${relative(legacyTableConfigPath)} is no longer supported; use table-config.yaml`); - } - const tableConfigPath = path.join(workflowDir, "table-config.yaml"); - if (!fs.existsSync(tableConfigPath)) { - fail(`${relative(tableConfigPath)} is required for tabular workflows`); - } - const tableConfig = parseTableConfigYaml(tableConfigPath); - const tableConfigLabel = relative(tableConfigPath); - const expectedTableConfigSchema = "../../../schema/table-config.schema.yaml"; - if (tableConfig.$schema !== expectedTableConfigSchema) { - fail(`${tableConfigLabel}.$schema must be "${expectedTableConfigSchema}"`); + const tableConfig = parseTableColumnsYaml(tableColumnsPath); + const tableConfigLabel = relative(tableColumnsPath); + const expectedSchemaPath = path.join( + WORKFLOWS_DIR, + "workflow-schema/table-columns.schema.yaml", + ); + const actualSchemaPath = path.resolve(workflowDir, tableConfig.$schema ?? ""); + if (actualSchemaPath !== expectedSchemaPath) { + fail(`${tableConfigLabel}.$schema must point to workflow-schema/table-columns.schema.yaml`); } assertColumnConfig(tableConfig.columns_config, tableConfigLabel); return { id, - metadata: { - title: metadata.display_name, - description: metadata.description, - type: metadata.type, - contributors, - language: metadata.language, - version: metadata.version, - practice: metadata.practice ?? null, - jurisdictions: metadata.jurisdictions ?? null, - }, + availability: metadata["mike-availability"], + metadata: normalizedMetadata, skill_md: skillMd || null, source_skill_md: sourceSkillMd, columns_config: tableConfig.columns_config, @@ -418,17 +429,30 @@ function loadWorkflows() { const workflows = []; const seenIds = new Set(); - for (const category of ["assistant", "tabular"]) { - const categoryDir = path.join(SYSTEM_WORKFLOWS_DIR, category); - if (!fs.existsSync(categoryDir)) continue; + for (const collection of WORKFLOW_COLLECTIONS) { + const collectionDir = path.join(WORKFLOWS_DIR, collection.directory); + if (!fs.existsSync(collectionDir)) continue; + const workflowDirs = fs + .readdirSync(collectionDir, { withFileTypes: true }) + .filter((entry) => entry.isDirectory() && !entry.name.startsWith(".")) + .flatMap((entry) => { + const entryDir = path.join(collectionDir, entry.name); + if (fs.existsSync(path.join(entryDir, "SKILL.md"))) return [entryDir]; + if (!fs.existsSync(path.join(entryDir, "pack.json"))) return []; + return fs + .readdirSync(entryDir, { withFileTypes: true }) + .filter( + (child) => + child.isDirectory() && + fs.existsSync(path.join(entryDir, child.name, "SKILL.md")), + ) + .map((child) => path.join(entryDir, child.name)); + }) + .sort((a, b) => a.localeCompare(b)); - const entries = fs - .readdirSync(categoryDir, { withFileTypes: true }) - .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith(".")) - .sort((a, b) => a.name.localeCompare(b.name)); - - for (const entry of entries) { - const workflow = readWorkflow(category, entry); + for (const workflowDir of workflowDirs) { + const workflow = readWorkflow(collection.type, workflowDir); + if (workflow.availability !== "system") continue; if (seenIds.has(workflow.id)) { fail(`Duplicate workflow id: ${workflow.id}`); } @@ -483,8 +507,11 @@ function main() { if (!fs.existsSync(WORKFLOWS_DIR)) { fail(`Workflow source directory not found: ${relative(WORKFLOWS_DIR)}`); } - if (!fs.existsSync(SYSTEM_WORKFLOWS_DIR)) { - fail(`System workflow source directory not found: ${relative(SYSTEM_WORKFLOWS_DIR)}`); + for (const collection of WORKFLOW_COLLECTIONS) { + const collectionDir = path.join(WORKFLOWS_DIR, collection.directory); + if (!fs.existsSync(collectionDir)) { + fail(`Workflow collection not found: ${relative(collectionDir)}`); + } } const workflows = loadWorkflows(); From 4039b949807b4f27f4511535990fd0a0d25f7ccf Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 10:42:28 -0700 Subject: [PATCH 09/21] test: minimal vitest harness for backend and frontend Ported from amal66/mike#24 onto current main; lockfiles regenerated against this tree. Adds vitest as a dev dependency with a `test` script in both packages, excludes test files from the backend tsc build, and seeds one suite per package (backend: downloadTokens, 12 tests; frontend: cn() utils, 8 tests). Verified locally: backend 12/12, frontend 8/8 passing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- backend/package-lock.json | 1230 ++++++++++++++- backend/package.json | 6 +- .../src/lib/__tests__/downloadTokens.test.ts | 109 ++ backend/tsconfig.json | 2 +- frontend/package-lock.json | 1320 ++++++++++++++++- frontend/package.json | 2 + frontend/src/app/lib/utils.test.ts | 45 + 7 files changed, 2683 insertions(+), 31 deletions(-) create mode 100644 backend/src/lib/__tests__/downloadTokens.test.ts create mode 100644 frontend/src/app/lib/utils.test.ts diff --git a/backend/package-lock.json b/backend/package-lock.json index c7597a9..65b2c63 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "mike-backend", "version": "1.0.0", + "license": "AGPL-3.0-only", "dependencies": { "@anthropic-ai/sdk": "^0.90.0", "@aws-sdk/client-s3": "^3.787.0", @@ -38,7 +39,8 @@ "@types/node": "^22.14.1", "prettier": "^3.8.1", "tsx": "^4.19.3", - "typescript": "^5.8.3" + "typescript": "^5.8.3", + "vitest": "^4.1.9" } }, "node_modules/@anthropic-ai/sdk": { @@ -975,6 +977,40 @@ "node": ">=6.9.0" } }, + "node_modules/@emnapi/core": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", + "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.2.2", + "tslib": "^2.4.0" + } + }, + "node_modules/@emnapi/runtime": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz", + "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@emnapi/wasi-threads": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz", + "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.27.7", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz", @@ -1452,6 +1488,13 @@ "hono": "^4" } }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "dev": true, + "license": "MIT" + }, "node_modules/@modelcontextprotocol/sdk": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz", @@ -2059,6 +2102,25 @@ "url": "https://github.com/sponsors/Brooooooklyn" } }, + "node_modules/@napi-rs/wasm-runtime": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz", + "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@tybys/wasm-util": "^0.10.3" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "peerDependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1" + } + }, "node_modules/@nodable/entities": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@nodable/entities/-/entities-2.1.0.tgz", @@ -2071,6 +2133,16 @@ ], "license": "MIT" }, + "node_modules/@oxc-project/types": { + "version": "0.139.0", + "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.139.0.tgz", + "integrity": "sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Boshen" + } + }, "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -2153,6 +2225,270 @@ "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc" } }, + "node_modules/@rolldown/binding-android-arm64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz", + "integrity": "sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-arm64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.5.tgz", + "integrity": "sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-x64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.5.tgz", + "integrity": "sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-freebsd-x64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.5.tgz", + "integrity": "sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm-gnueabihf": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.5.tgz", + "integrity": "sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.5.tgz", + "integrity": "sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-musl": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.5.tgz", + "integrity": "sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-ppc64-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.5.tgz", + "integrity": "sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-s390x-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.5.tgz", + "integrity": "sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.5.tgz", + "integrity": "sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-musl": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.5.tgz", + "integrity": "sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-openharmony-arm64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.5.tgz", + "integrity": "sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-wasm32-wasi": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.5.tgz", + "integrity": "sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==", + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "1.11.1", + "@emnapi/runtime": "1.11.1", + "@napi-rs/wasm-runtime": "^1.1.6" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-arm64-msvc": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz", + "integrity": "sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-x64-msvc": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.5.tgz", + "integrity": "sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz", + "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==", + "dev": true, + "license": "MIT" + }, "node_modules/@selderee/plugin-htmlparser2": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz", @@ -2885,6 +3221,13 @@ "node": ">=18.0.0" } }, + "node_modules/@standard-schema/spec": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", + "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", + "dev": true, + "license": "MIT" + }, "node_modules/@supabase/auth-js": { "version": "2.102.1", "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.102.1.tgz", @@ -2971,6 +3314,17 @@ "node": ">=20.0.0" } }, + "node_modules/@tybys/wasm-util": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz", + "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@types/body-parser": { "version": "1.19.6", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz", @@ -2982,6 +3336,17 @@ "@types/node": "*" } }, + "node_modules/@types/chai": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz", + "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/deep-eql": "*", + "assertion-error": "^2.0.1" + } + }, "node_modules/@types/connect": { "version": "3.4.38", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz", @@ -3002,6 +3367,20 @@ "@types/node": "*" } }, + "node_modules/@types/deep-eql": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz", + "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/express": { "version": "4.17.25", "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz", @@ -3123,6 +3502,119 @@ "@types/node": "*" } }, + "node_modules/@vitest/expect": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.10.tgz", + "integrity": "sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.1.0", + "@types/chai": "^5.2.2", + "@vitest/spy": "4.1.10", + "@vitest/utils": "4.1.10", + "chai": "^6.2.2", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/mocker": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.10.tgz", + "integrity": "sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/spy": "4.1.10", + "estree-walker": "^3.0.3", + "magic-string": "^0.30.21" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "msw": "^2.4.9", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "msw": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, + "node_modules/@vitest/pretty-format": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.10.tgz", + "integrity": "sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/runner": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.10.tgz", + "integrity": "sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/utils": "4.1.10", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/snapshot": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.10.tgz", + "integrity": "sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "4.1.10", + "@vitest/utils": "4.1.10", + "magic-string": "^0.30.21", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/spy": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.10.tgz", + "integrity": "sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.10.tgz", + "integrity": "sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "4.1.10", + "convert-source-map": "^2.0.0", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/@xmldom/xmldom": { "version": "0.8.12", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.12.tgz", @@ -3214,6 +3706,16 @@ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "license": "MIT" }, + "node_modules/assertion-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + } + }, "node_modules/async": { "version": "3.2.6", "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", @@ -3346,6 +3848,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/chai": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz", + "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/concat-stream": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", @@ -3382,6 +3894,13 @@ "node": ">= 0.6" } }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "license": "MIT" + }, "node_modules/cookie": { "version": "0.7.2", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", @@ -3480,6 +3999,16 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/dingbat-to-unicode": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz", @@ -3662,6 +4191,13 @@ "node": ">= 0.4" } }, + "node_modules/es-module-lexer": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz", + "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==", + "dev": true, + "license": "MIT" + }, "node_modules/es-object-atoms": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", @@ -3722,6 +4258,16 @@ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==", "license": "MIT" }, + "node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0" + } + }, "node_modules/etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", @@ -3752,6 +4298,16 @@ "node": ">=18.0.0" } }, + "node_modules/expect-type": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz", + "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/express": { "version": "4.22.1", "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz", @@ -3886,6 +4442,24 @@ "fxparser": "src/cli/cli.js" } }, + "node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, "node_modules/fetch-blob": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", @@ -4416,6 +4990,267 @@ "immediate": "~3.0.5" } }, + "node_modules/lightningcss": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz", + "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.33.0", + "lightningcss-darwin-arm64": "1.33.0", + "lightningcss-darwin-x64": "1.33.0", + "lightningcss-freebsd-x64": "1.33.0", + "lightningcss-linux-arm-gnueabihf": "1.33.0", + "lightningcss-linux-arm64-gnu": "1.33.0", + "lightningcss-linux-arm64-musl": "1.33.0", + "lightningcss-linux-x64-gnu": "1.33.0", + "lightningcss-linux-x64-musl": "1.33.0", + "lightningcss-win32-arm64-msvc": "1.33.0", + "lightningcss-win32-x64-msvc": "1.33.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz", + "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz", + "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz", + "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz", + "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz", + "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz", + "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz", + "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz", + "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz", + "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz", + "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz", + "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/long": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz", @@ -4433,6 +5268,16 @@ "underscore": "^1.13.1" } }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, "node_modules/mammoth": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.12.0.tgz", @@ -4664,6 +5509,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/obug": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz", + "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==", + "dev": true, + "funding": [ + "https://github.com/sponsors/sxzz", + "https://opencollective.com/debug" + ], + "license": "MIT", + "engines": { + "node": ">=12.20.0" + } + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -4771,6 +5630,13 @@ "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==", "license": "MIT" }, + "node_modules/pathe": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", + "dev": true, + "license": "MIT" + }, "node_modules/pdfjs-dist": { "version": "4.10.38", "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz", @@ -4792,6 +5658,26 @@ "url": "https://ko-fi.com/killymxi" } }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/pkce-challenge": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz", @@ -4801,6 +5687,54 @@ "node": ">=16.20.0" } }, + "node_modules/postcss": { + "version": "8.5.20", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz", + "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.16", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss/node_modules/nanoid": { + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/prettier": { "version": "3.8.1", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz", @@ -4991,6 +5925,40 @@ "node": ">= 4" } }, + "node_modules/rolldown": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz", + "integrity": "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@oxc-project/types": "=0.139.0", + "@rolldown/pluginutils": "^1.0.0" + }, + "bin": { + "rolldown": "bin/cli.mjs" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "optionalDependencies": { + "@rolldown/binding-android-arm64": "1.1.5", + "@rolldown/binding-darwin-arm64": "1.1.5", + "@rolldown/binding-darwin-x64": "1.1.5", + "@rolldown/binding-freebsd-x64": "1.1.5", + "@rolldown/binding-linux-arm-gnueabihf": "1.1.5", + "@rolldown/binding-linux-arm64-gnu": "1.1.5", + "@rolldown/binding-linux-arm64-musl": "1.1.5", + "@rolldown/binding-linux-ppc64-gnu": "1.1.5", + "@rolldown/binding-linux-s390x-gnu": "1.1.5", + "@rolldown/binding-linux-x64-gnu": "1.1.5", + "@rolldown/binding-linux-x64-musl": "1.1.5", + "@rolldown/binding-openharmony-arm64": "1.1.5", + "@rolldown/binding-wasm32-wasi": "1.1.5", + "@rolldown/binding-win32-arm64-msvc": "1.1.5", + "@rolldown/binding-win32-x64-msvc": "1.1.5" + } + }, "node_modules/router": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz", @@ -5244,12 +6212,36 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==", + "dev": true, + "license": "ISC" + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "license": "BSD-3-Clause" }, + "node_modules/stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", + "dev": true, + "license": "MIT" + }, "node_modules/statuses": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", @@ -5259,6 +6251,13 @@ "node": ">= 0.8" } }, + "node_modules/std-env": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz", + "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==", + "dev": true, + "license": "MIT" + }, "node_modules/streamsearch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", @@ -5294,6 +6293,50 @@ ], "license": "MIT" }, + "node_modules/tinybench": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", + "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/tinyexec": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz", + "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyrainbow": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz", + "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/tmp": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz", @@ -5422,6 +6465,174 @@ "node": ">= 0.8" } }, + "node_modules/vite": { + "version": "8.1.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.5.tgz", + "integrity": "sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==", + "dev": true, + "license": "MIT", + "dependencies": { + "lightningcss": "^1.32.0", + "picomatch": "^4.0.5", + "postcss": "^8.5.17", + "rolldown": "~1.1.5", + "tinyglobby": "^0.2.17" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "@vitejs/devtools": "^0.3.0", + "esbuild": "^0.27.0 || ^0.28.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "@vitejs/devtools": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vitest": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.10.tgz", + "integrity": "sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/expect": "4.1.10", + "@vitest/mocker": "4.1.10", + "@vitest/pretty-format": "4.1.10", + "@vitest/runner": "4.1.10", + "@vitest/snapshot": "4.1.10", + "@vitest/spy": "4.1.10", + "@vitest/utils": "4.1.10", + "es-module-lexer": "^2.0.0", + "expect-type": "^1.3.0", + "magic-string": "^0.30.21", + "obug": "^2.1.1", + "pathe": "^2.0.3", + "picomatch": "^4.0.3", + "std-env": "^4.0.0-rc.1", + "tinybench": "^2.9.0", + "tinyexec": "^1.0.2", + "tinyglobby": "^0.2.15", + "tinyrainbow": "^3.1.0", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0", + "why-is-node-running": "^2.3.0" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": "^20.0.0 || ^22.0.0 || >=24.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@opentelemetry/api": "^1.9.0", + "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", + "@vitest/browser-playwright": "4.1.10", + "@vitest/browser-preview": "4.1.10", + "@vitest/browser-webdriverio": "4.1.10", + "@vitest/coverage-istanbul": "4.1.10", + "@vitest/coverage-v8": "4.1.10", + "@vitest/ui": "4.1.10", + "happy-dom": "*", + "jsdom": "*", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@opentelemetry/api": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@vitest/browser-playwright": { + "optional": true + }, + "@vitest/browser-preview": { + "optional": true + }, + "@vitest/browser-webdriverio": { + "optional": true + }, + "@vitest/coverage-istanbul": { + "optional": true + }, + "@vitest/coverage-v8": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + }, + "vite": { + "optional": false + } + } + }, "node_modules/web-streams-polyfill": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz", @@ -5446,6 +6657,23 @@ "node": ">= 8" } }, + "node_modules/why-is-node-running": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz", + "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==", + "dev": true, + "license": "MIT", + "dependencies": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + }, + "bin": { + "why-is-node-running": "cli.js" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/backend/package.json b/backend/package.json index 195a6ac..d540717 100644 --- a/backend/package.json +++ b/backend/package.json @@ -5,7 +5,8 @@ "scripts": { "dev": "tsx watch src/index.ts", "build": "tsc", - "start": "node dist/index.js" + "start": "node dist/index.js", + "test": "vitest run" }, "dependencies": { "@anthropic-ai/sdk": "^0.90.0", @@ -38,7 +39,8 @@ "@types/node": "^22.14.1", "prettier": "^3.8.1", "tsx": "^4.19.3", - "typescript": "^5.8.3" + "typescript": "^5.8.3", + "vitest": "^4.1.9" }, "license": "AGPL-3.0-only" } diff --git a/backend/src/lib/__tests__/downloadTokens.test.ts b/backend/src/lib/__tests__/downloadTokens.test.ts new file mode 100644 index 0000000..84e0201 --- /dev/null +++ b/backend/src/lib/__tests__/downloadTokens.test.ts @@ -0,0 +1,109 @@ +import { describe, it, expect, beforeAll, afterAll } from "vitest"; +import { signDownload, verifyDownload, buildDownloadUrl } from "../downloadTokens"; + +const SECRET = "test-secret-32-bytes-long-enough!!"; + +beforeAll(() => { + process.env.DOWNLOAD_SIGNING_SECRET = SECRET; +}); + +afterAll(() => { + delete process.env.DOWNLOAD_SIGNING_SECRET; +}); + +describe("signDownload", () => { + it("returns a two-part dot-separated token", () => { + const token = signDownload("documents/user/doc.pdf", "contract.pdf"); + const parts = token.split("."); + expect(parts).toHaveLength(2); + expect(parts[0].length).toBeGreaterThan(0); + expect(parts[1].length).toBeGreaterThan(0); + }); + + it("produces different tokens for different paths", () => { + const t1 = signDownload("documents/a/file.pdf", "a.pdf"); + const t2 = signDownload("documents/b/file.pdf", "b.pdf"); + expect(t1).not.toBe(t2); + }); + + it("uses base64url characters only (no +, /, =)", () => { + const token = signDownload("documents/user/file.pdf", "file.pdf"); + expect(token).not.toMatch(/[+/=]/); + }); +}); + +describe("verifyDownload", () => { + it("round-trips a valid token", () => { + const path = "documents/user123/doc456/source.pdf"; + const filename = "Contract Final v2.pdf"; + const token = signDownload(path, filename); + const result = verifyDownload(token); + expect(result).not.toBeNull(); + expect(result!.path).toBe(path); + expect(result!.filename).toBe(filename); + }); + + it("returns null for a tampered payload", () => { + const token = signDownload("documents/user/file.pdf", "file.pdf"); + const [, sig] = token.split("."); + const fakePayload = Buffer.from( + JSON.stringify({ p: "documents/attacker/file.pdf", f: "file.pdf" }), + ) + .toString("base64") + .replace(/\+/g, "-") + .replace(/\//g, "_") + .replace(/=+$/g, ""); + expect(verifyDownload(`${fakePayload}.${sig}`)).toBeNull(); + }); + + it("returns null for a tampered signature", () => { + const token = signDownload("documents/user/file.pdf", "file.pdf"); + const [enc] = token.split("."); + const fakeSig = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"; + expect(verifyDownload(`${enc}.${fakeSig}`)).toBeNull(); + }); + + it("returns null for a token with too many parts", () => { + expect(verifyDownload("a.b.c")).toBeNull(); + }); + + it("returns null for a token with too few parts", () => { + expect(verifyDownload("onlyonepart")).toBeNull(); + }); + + it("returns null when payload JSON is missing required fields", () => { + const bad = Buffer.from(JSON.stringify({ x: 1 })) + .toString("base64") + .replace(/\+/g, "-") + .replace(/\//g, "_") + .replace(/=+$/g, ""); + const sig = Buffer.alloc(32).toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, ""); + expect(verifyDownload(`${bad}.${sig}`)).toBeNull(); + }); + + it("returns null when signed with a different secret", () => { + const token = signDownload("documents/user/file.pdf", "file.pdf"); + process.env.DOWNLOAD_SIGNING_SECRET = "different-secret-value-!!"; + const result = verifyDownload(token); + process.env.DOWNLOAD_SIGNING_SECRET = SECRET; + expect(result).toBeNull(); + }); +}); + +describe("buildDownloadUrl", () => { + it("returns a path starting with /download/", () => { + const url = buildDownloadUrl("documents/user/file.pdf", "file.pdf"); + expect(url).toMatch(/^\/download\//); + }); + + it("embeds a verifiable token in the URL", () => { + const path = "documents/user/file.pdf"; + const filename = "file.pdf"; + const url = buildDownloadUrl(path, filename); + const token = url.replace("/download/", ""); + const result = verifyDownload(token); + expect(result).not.toBeNull(); + expect(result!.path).toBe(path); + expect(result!.filename).toBe(filename); + }); +}); diff --git a/backend/tsconfig.json b/backend/tsconfig.json index a4b3abf..bc27281 100644 --- a/backend/tsconfig.json +++ b/backend/tsconfig.json @@ -16,5 +16,5 @@ } }, "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] + "exclude": ["node_modules", "dist", "src/**/*.test.ts", "src/**/__tests__/**"] } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a0a6a2d..1fb2be4 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "mike", "version": "0.1.0", + "license": "AGPL-3.0-only", "dependencies": { "@aws-sdk/client-s3": "^3.1025.0", "@aws-sdk/s3-request-presigner": "^3.1025.0", @@ -68,6 +69,7 @@ "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5", + "vitest": "^4.1.9", "wrangler": "^4.90.0" } }, @@ -1872,21 +1874,21 @@ } }, "node_modules/@emnapi/core": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz", - "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", + "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==", "dev": true, "license": "MIT", "optional": true, "dependencies": { - "@emnapi/wasi-threads": "1.2.1", + "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, "node_modules/@emnapi/runtime": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz", - "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz", + "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==", "license": "MIT", "optional": true, "dependencies": { @@ -1894,9 +1896,9 @@ } }, "node_modules/@emnapi/wasi-threads": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", - "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz", + "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==", "dev": true, "license": "MIT", "optional": true, @@ -3986,6 +3988,16 @@ "zod": "^3.25.0 || ^4.0.0" } }, + "node_modules/@oxc-project/types": { + "version": "0.139.0", + "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.139.0.tgz", + "integrity": "sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Boshen" + } + }, "node_modules/@poppinss/colors": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.6.tgz", @@ -4650,6 +4662,289 @@ "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==", "license": "MIT" }, + "node_modules/@rolldown/binding-android-arm64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz", + "integrity": "sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-arm64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.5.tgz", + "integrity": "sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-x64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.5.tgz", + "integrity": "sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-freebsd-x64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.5.tgz", + "integrity": "sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm-gnueabihf": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.5.tgz", + "integrity": "sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.5.tgz", + "integrity": "sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-musl": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.5.tgz", + "integrity": "sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-ppc64-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.5.tgz", + "integrity": "sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-s390x-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.5.tgz", + "integrity": "sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-gnu": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.5.tgz", + "integrity": "sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-musl": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.5.tgz", + "integrity": "sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-openharmony-arm64": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.5.tgz", + "integrity": "sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-wasm32-wasi": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.5.tgz", + "integrity": "sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==", + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "1.11.1", + "@emnapi/runtime": "1.11.1", + "@napi-rs/wasm-runtime": "^1.1.6" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz", + "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@tybys/wasm-util": "^0.10.3" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "peerDependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1" + } + }, + "node_modules/@rolldown/binding-win32-arm64-msvc": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz", + "integrity": "sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-x64-msvc": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.5.tgz", + "integrity": "sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz", + "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==", + "dev": true, + "license": "MIT" + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -6304,9 +6599,9 @@ "license": "MIT" }, "node_modules/@tybys/wasm-util": { - "version": "0.10.1", - "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz", - "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==", + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz", + "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==", "dev": true, "license": "MIT", "optional": true, @@ -6314,6 +6609,17 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/chai": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz", + "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/deep-eql": "*", + "assertion-error": "^2.0.1" + } + }, "node_modules/@types/d3-array": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz", @@ -6386,6 +6692,13 @@ "@types/ms": "*" } }, + "node_modules/@types/deep-eql": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz", + "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", @@ -7201,6 +7514,92 @@ "win32" ] }, + "node_modules/@vitest/expect": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.10.tgz", + "integrity": "sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.1.0", + "@types/chai": "^5.2.2", + "@vitest/spy": "4.1.10", + "@vitest/utils": "4.1.10", + "chai": "^6.2.2", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/pretty-format": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.10.tgz", + "integrity": "sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/runner": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.10.tgz", + "integrity": "sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/utils": "4.1.10", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/snapshot": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.10.tgz", + "integrity": "sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "4.1.10", + "@vitest/utils": "4.1.10", + "magic-string": "^0.30.21", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/spy": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.10.tgz", + "integrity": "sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.10.tgz", + "integrity": "sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "4.1.10", + "convert-source-map": "^2.0.0", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/@xmldom/xmldom": { "version": "0.8.12", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.12.tgz", @@ -7584,6 +7983,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/assertion-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + } + }, "node_modules/ast-types-flow": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz", @@ -8037,6 +8446,16 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chai": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz", + "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/chainsaw": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz", @@ -9145,6 +9564,13 @@ "node": ">= 0.4" } }, + "node_modules/es-module-lexer": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz", + "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==", + "dev": true, + "license": "MIT" + }, "node_modules/es-object-atoms": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", @@ -9745,6 +10171,16 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0" + } + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -9845,6 +10281,16 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/expect-type": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz", + "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/express": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz", @@ -14066,6 +14512,20 @@ "integrity": "sha512-9WXswnqINnnhOG/5SLimUlzuU1hFJUc8zkwyD59Sd+dPOMf05PmnYG/d6Q7HZ+KmgkZJa1PxRso6QdM3sTNHig==", "license": "MIT" }, + "node_modules/obug": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz", + "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==", + "dev": true, + "funding": [ + "https://github.com/sponsors/sxzz", + "https://opencollective.com/debug" + ], + "license": "MIT", + "engines": { + "node": ">=12.20.0" + } + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -14365,9 +14825,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", - "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "license": "MIT", "engines": { "node": ">=12" @@ -14393,9 +14853,9 @@ "license": "MIT-0" }, "node_modules/postcss": { - "version": "8.5.8", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz", - "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==", + "version": "8.5.20", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.20.tgz", + "integrity": "sha512-lW616l85ucIQL+FocMmL7pQFPqBmwejrCMg+iPxyImlrANNJG9NHq/RkyCZopDhd8C3LA03PHRJDjkbGu8vvug==", "dev": true, "funding": [ { @@ -14413,7 +14873,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -14422,9 +14882,9 @@ } }, "node_modules/postcss/node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "dev": true, "funding": [ { @@ -15500,6 +15960,40 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rolldown": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz", + "integrity": "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@oxc-project/types": "=0.139.0", + "@rolldown/pluginutils": "^1.0.0" + }, + "bin": { + "rolldown": "bin/cli.mjs" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "optionalDependencies": { + "@rolldown/binding-android-arm64": "1.1.5", + "@rolldown/binding-darwin-arm64": "1.1.5", + "@rolldown/binding-darwin-x64": "1.1.5", + "@rolldown/binding-freebsd-x64": "1.1.5", + "@rolldown/binding-linux-arm-gnueabihf": "1.1.5", + "@rolldown/binding-linux-arm64-gnu": "1.1.5", + "@rolldown/binding-linux-arm64-musl": "1.1.5", + "@rolldown/binding-linux-ppc64-gnu": "1.1.5", + "@rolldown/binding-linux-s390x-gnu": "1.1.5", + "@rolldown/binding-linux-x64-gnu": "1.1.5", + "@rolldown/binding-linux-x64-musl": "1.1.5", + "@rolldown/binding-openharmony-arm64": "1.1.5", + "@rolldown/binding-wasm32-wasi": "1.1.5", + "@rolldown/binding-win32-arm64-msvc": "1.1.5", + "@rolldown/binding-win32-x64-msvc": "1.1.5" + } + }, "node_modules/rope-sequence": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz", @@ -15935,6 +16429,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==", + "dev": true, + "license": "ISC" + }, "node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", @@ -15992,6 +16493,13 @@ "dev": true, "license": "MIT" }, + "node_modules/stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", + "dev": true, + "license": "MIT" + }, "node_modules/standardwebhooks": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz", @@ -16011,6 +16519,13 @@ "node": ">= 0.8" } }, + "node_modules/std-env": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz", + "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==", + "dev": true, + "license": "MIT" + }, "node_modules/stop-iteration-iterator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz", @@ -16440,15 +16955,32 @@ "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", "license": "MIT" }, + "node_modules/tinybench": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", + "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/tinyexec": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz", + "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "dev": true, "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -16457,6 +16989,16 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tinyrainbow": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz", + "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/tiptap-markdown": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.9.0.tgz", @@ -17201,6 +17743,713 @@ "d3-timer": "^3.0.1" } }, + "node_modules/vitest": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.10.tgz", + "integrity": "sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/expect": "4.1.10", + "@vitest/mocker": "4.1.10", + "@vitest/pretty-format": "4.1.10", + "@vitest/runner": "4.1.10", + "@vitest/snapshot": "4.1.10", + "@vitest/spy": "4.1.10", + "@vitest/utils": "4.1.10", + "es-module-lexer": "^2.0.0", + "expect-type": "^1.3.0", + "magic-string": "^0.30.21", + "obug": "^2.1.1", + "pathe": "^2.0.3", + "picomatch": "^4.0.3", + "std-env": "^4.0.0-rc.1", + "tinybench": "^2.9.0", + "tinyexec": "^1.0.2", + "tinyglobby": "^0.2.15", + "tinyrainbow": "^3.1.0", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0", + "why-is-node-running": "^2.3.0" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": "^20.0.0 || ^22.0.0 || >=24.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@opentelemetry/api": "^1.9.0", + "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", + "@vitest/browser-playwright": "4.1.10", + "@vitest/browser-preview": "4.1.10", + "@vitest/browser-webdriverio": "4.1.10", + "@vitest/coverage-istanbul": "4.1.10", + "@vitest/coverage-v8": "4.1.10", + "@vitest/ui": "4.1.10", + "happy-dom": "*", + "jsdom": "*", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@opentelemetry/api": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@vitest/browser-playwright": { + "optional": true + }, + "@vitest/browser-preview": { + "optional": true + }, + "@vitest/browser-webdriverio": { + "optional": true + }, + "@vitest/coverage-istanbul": { + "optional": true + }, + "@vitest/coverage-v8": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + }, + "vite": { + "optional": false + } + } + }, + "node_modules/vitest/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vitest/node_modules/@vitest/mocker": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.10.tgz", + "integrity": "sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/spy": "4.1.10", + "estree-walker": "^3.0.3", + "magic-string": "^0.30.21" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "msw": "^2.4.9", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "msw": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, + "node_modules/vitest/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "peer": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" + } + }, + "node_modules/vitest/node_modules/vite": { + "version": "8.1.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.5.tgz", + "integrity": "sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==", + "dev": true, + "license": "MIT", + "dependencies": { + "lightningcss": "^1.32.0", + "picomatch": "^4.0.5", + "postcss": "^8.5.17", + "rolldown": "~1.1.5", + "tinyglobby": "^0.2.17" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "@vitejs/devtools": "^0.3.0", + "esbuild": "^0.27.0 || ^0.28.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "@vitejs/devtools": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, "node_modules/w3c-keyname": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", @@ -17353,6 +18602,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/why-is-node-running": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz", + "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==", + "dev": true, + "license": "MIT", + "dependencies": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + }, + "bin": { + "why-is-node-running": "cli.js" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/word-wrap": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index a76e08c..16db224 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,7 @@ "build": "next build", "start": "next start", "lint": "eslint", + "test": "vitest run", "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview", "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy", "upload": "opennextjs-cloudflare build && opennextjs-cloudflare upload", @@ -73,6 +74,7 @@ "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5", + "vitest": "^4.1.9", "wrangler": "^4.90.0" }, "license": "AGPL-3.0-only" diff --git a/frontend/src/app/lib/utils.test.ts b/frontend/src/app/lib/utils.test.ts new file mode 100644 index 0000000..31dddcf --- /dev/null +++ b/frontend/src/app/lib/utils.test.ts @@ -0,0 +1,45 @@ +import { describe, expect, it } from "vitest"; +import { cn, diceCoefficient, isFuzzyMatch } from "./utils"; + +describe("cn", () => { + it("joins truthy class names and drops falsy ones", () => { + expect(cn("a", false && "b", undefined, "c")).toBe("a c"); + }); + + it("merges conflicting tailwind classes, keeping the last", () => { + expect(cn("px-2", "px-4")).toBe("px-4"); + }); +}); + +describe("diceCoefficient", () => { + it("returns 1 for identical strings (ignoring case and punctuation)", () => { + expect(diceCoefficient("Hello, World!", "hello world")).toBe(1); + }); + + it("returns 0 when either input is empty", () => { + expect(diceCoefficient("", "anything")).toBe(0); + expect(diceCoefficient("anything", "")).toBe(0); + }); + + it("returns a partial score for partially overlapping strings", () => { + const score = diceCoefficient("night", "nacht"); + expect(score).toBeGreaterThan(0); + expect(score).toBeLessThan(1); + }); +}); + +describe("isFuzzyMatch", () => { + it("matches near-identical strings above the default threshold", () => { + expect(isFuzzyMatch("organization", "organisation")).toBe(true); + }); + + it("rejects clearly different strings", () => { + expect(isFuzzyMatch("apple", "zebra")).toBe(false); + }); + + it("respects a custom threshold", () => { + // "night" vs "nacht" scores ~0.25 — passes a low bar, fails a high one. + expect(isFuzzyMatch("night", "nacht", 0.1)).toBe(true); + expect(isFuzzyMatch("night", "nacht", 0.9)).toBe(false); + }); +}); From b20109ac6c4a45fc1e6a9b947ec2e02a9c9af2ca Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 10:45:48 -0700 Subject: [PATCH 10/21] ci: build and test workflow for backend and frontend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ported from amal66/mike#46 onto current main, extended for this tree: backend job runs npm ci, tests (--if-present, so it is safe to merge in any order relative to the test-harness PR) and tsc build; frontend job runs tests, eslint as an advisory step (main currently carries 23 lint errors — flip to blocking once burned down), and a production next build with placeholder NEXT_PUBLIC_* env (verified locally that the build succeeds and contacts nothing); evals job runs node evals/run.mjs when present, else skips. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- .github/workflows/ci.yml | 102 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 .github/workflows/ci.yml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..fa7c276 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,102 @@ +# CI: build and test. +# +# Adapted from the amal66/mike fork's .github/workflows/ci.yml (monorepo +# layout) to this repository's backend/ + frontend/ layout. Test steps use +# `npm test --if-present`, and the eval job checks for evals/run.mjs, so this +# workflow is safe to merge before or after the test-harness and evals PRs: +# on a tree without those pieces the test steps no-op and the build still +# gates the merge. Beyond the fork version this also builds the frontend +# (placeholder NEXT_PUBLIC_* env — verified sufficient for `next build`) and +# runs eslint as an advisory step (see the comment on that step). +name: CI + +on: + push: + branches: [main] + pull_request: + branches: [main] + +jobs: + backend: + name: Backend build and tests + runs-on: ubuntu-latest + defaults: + run: + working-directory: backend + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + cache-dependency-path: backend/package-lock.json + + - run: npm ci + + # No-ops on a tree without a "test" script (e.g. before the vitest + # harness PR merges); runs the suite once it exists. + - run: npm test --if-present + + - run: npm run build + + frontend: + name: Frontend build and tests + runs-on: ubuntu-latest + defaults: + run: + working-directory: frontend + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + cache-dependency-path: frontend/package-lock.json + + - run: npm ci + + # No-ops on a tree without a "test" script (e.g. before the vitest + # harness PR merges); runs the suite once it exists. + - run: npm test --if-present + + # Advisory only for now: main currently carries 23 eslint errors, so a + # blocking gate would turn every PR red on inherited debt. Flip this to + # blocking (remove continue-on-error) once the backlog is burned down. + - run: npm run lint + continue-on-error: true + + # Production build. NEXT_PUBLIC_* values are inlined at build time and + # only need to be well-formed here — nothing is contacted during build. + # This catches type errors (next build runs tsc) and broken routes/imports. + - run: npm run build + env: + NEXT_PUBLIC_SUPABASE_URL: https://placeholder.supabase.co + NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY: sb_publishable_placeholder + NEXT_PUBLIC_API_BASE_URL: http://localhost:3001 + + # ----------------------------------------------------------------------- + # Offline eval harness: deterministic scorecard for citation accuracy, + # prompt-injection resistance, and privilege/PII leakage. Runs against + # committed fixtures (no network, no LLM calls, no secrets), so it is cheap + # enough to gate every PR. --threshold 1.0 = every case must pass. + # Skips gracefully until the evals PR merges. + # ----------------------------------------------------------------------- + evals: + name: Eval harness + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + + - name: Run eval harness (skips if evals/ not present) + run: | + if [ -f evals/run.mjs ]; then + node evals/run.mjs --threshold 1.0 + else + echo "evals/run.mjs not present on this tree; skipping" + fi From 15b7b4c925f4ba8f3ebea21cb8e8e9581d45d88f Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 10:46:47 -0700 Subject: [PATCH 11/21] docs: testing policy in CONTRIBUTING + PR template with verification checklist MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a Testing section documenting every suite the testing PR series introduces (unit/integration via vitest, Playwright e2e, offline evals, gated real-Supabase stack tests), the expectation that changes carry tests at the lowest layer that catches the regression, and a PR template (ported from the amal66 fork, Open-Legal-Products/mike#205) whose checklist asks how the change was verified. Intended as the capstone of the series — the commands it documents are introduced by the sibling test PRs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- .github/PULL_REQUEST_TEMPLATE.md | 30 ++++++++++++++++++++++++++++++ CONTRIBUTING.md | 19 +++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..9213ea8 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,30 @@ +## Summary + +<!-- What does this PR do, in one or two sentences? --> + +## Why / Motivation + +<!-- What problem does this solve? Why now, and why this approach? + Link the issue or context that prompted it. --> + +## Changes + +<!-- The notable changes, at a high level. Describe the outcome, not the diff. --> + +## Tradeoffs & risks + +<!-- What did you weigh? What could break, what's out of scope, and what + follow-ups (if any) does this leave behind? Note any security or + migration implications. --> + +## How verified + +<!-- How do you know this works? Tests added/run, manual steps, commands, + screenshots. Include the exact commands where relevant. --> + +## Checklist + +- [ ] Ran the relevant build/test command for the area changed. +- [ ] Reviewed `git diff` and removed unrelated changes. +- [ ] Updated docs / env examples if setup, config, or behavior changed. +- [ ] No secrets, API keys, real documents, or `.env` files committed. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 47e61fe..ba973e4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -54,3 +54,22 @@ Frontend: ```bash npm run build --prefix frontend ``` + +## Testing + +```bash +npm test --prefix backend # backend unit + route integration tests (vitest) +npm test --prefix frontend # frontend component/hook tests (vitest + jsdom) +npm run test:e2e # Playwright end-to-end suite — see docs/e2e-ci.md +node evals/run.mjs --threshold 1.0 # offline eval harness (no network, no API keys) +npm run test:stack --prefix backend # gated: real-Supabase auth/access tests (run `supabase start` first) +``` + +- New features and bug fixes should come with a test at the lowest layer that + can catch the regression: unit first, then route-level integration, then + end-to-end only for flows a browser is genuinely needed to prove. +- CI runs the build, unit/integration tests, and the eval harness on every PR + (`.github/workflows/ci.yml`), and the Playwright suite in a full local stack + (`.github/workflows/e2e.yml`). +- Tests that need a live Supabase or an LLM key are env-gated and skip cleanly + when the environment is absent — a plain `npm test` should always be green. From c139acc3c64aeead41d31e5245587f4b15318991 Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 10:48:53 -0700 Subject: [PATCH 12/21] test: unit tests for access, storage, userApiKeys, chat doc resolution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ported from the amal66 fork (see index Open-Legal-Products/mike#205) onto current main, adapted to this repo's backend/ layout (apps/api/src/lib -> backend/src/lib), plus a v8 coverage ratchet. Suites ported (51 new tests, verified locally): - access.test.ts (7): owner/shared/private project access, doc access, review sharing, document-ID filtering. Dropped the fork's "org RBAC" describe block (7 cases) — org_id/org_members multi-tenancy and the role/canManage fields do not exist in this repo's access.ts. - storage.test.ts (25): filename normalization/sanitization, RFC 5987 encoding, Content-Disposition, storage key helpers. Dropped the fork's vi.mock of lib/env — this repo has no env module; storage reads process.env directly and the tested helpers are pure. - userApiKeys.test.ts (10): normalizeApiKeyProvider + hasEnvApiKey. Added a beforeEach env clear so shell-exported API keys can't leak into assertions. - chatTypes.test.ts (9): resolveDoc/resolveDocLabel, which live in lib/chat/types.ts here (the fork's lib/chatTools.ts equivalent). Dropped generateSpotlightNonce cases (2) — no such export here. Suites dropped entirely (subject not present in this repo): - upload.test.ts — tested hasMagicBytes; this repo's lib/upload.ts is only the multer middleware and exports no magic-byte checker. - userSettings.test.ts — tested resolveTabularModel (fork-only keyed- provider fallback); this repo resolves tabular_model via resolveModel with a static default. Coverage ratchet: vitest.config.mts adds v8 coverage over src/lib/** with floors measured against this tree (2.58% stmts, 2.00% branches, 4.61% funcs, 2.58% lines -> floors 2/2/4/2). Full suite: 5 files, 63 tests passing (incl. the pre-existing 12 in downloadTokens.test.ts); npm run test:coverage and npm run build both pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- backend/package-lock.json | 242 ++++++++++++++++++ backend/package.json | 4 +- backend/src/lib/__tests__/access.test.ts | 163 ++++++++++++ backend/src/lib/__tests__/chatTypes.test.ts | 81 ++++++ backend/src/lib/__tests__/storage.test.ts | 149 +++++++++++ backend/src/lib/__tests__/userApiKeys.test.ts | 73 ++++++ backend/vitest.config.mts | 36 +++ 7 files changed, 747 insertions(+), 1 deletion(-) create mode 100644 backend/src/lib/__tests__/access.test.ts create mode 100644 backend/src/lib/__tests__/chatTypes.test.ts create mode 100644 backend/src/lib/__tests__/storage.test.ts create mode 100644 backend/src/lib/__tests__/userApiKeys.test.ts create mode 100644 backend/vitest.config.mts diff --git a/backend/package-lock.json b/backend/package-lock.json index 65b2c63..29bd3f9 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -37,6 +37,7 @@ "@types/express": "^4.17.21", "@types/multer": "^1.4.12", "@types/node": "^22.14.1", + "@vitest/coverage-v8": "^4.1.9", "prettier": "^3.8.1", "tsx": "^4.19.3", "typescript": "^5.8.3", @@ -968,6 +969,42 @@ "node": ">=18.0.0" } }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@babel/runtime": { "version": "7.29.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz", @@ -977,6 +1014,30 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/types": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@bcoe/v8-coverage": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz", + "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/@emnapi/core": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz", @@ -1488,6 +1549,16 @@ "hono": "^4" } }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", @@ -1495,6 +1566,17 @@ "dev": true, "license": "MIT" }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@modelcontextprotocol/sdk": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz", @@ -3502,6 +3584,37 @@ "@types/node": "*" } }, + "node_modules/@vitest/coverage-v8": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.10.tgz", + "integrity": "sha512-IM49HmthevbgAO4anp1hwtoT9wYe59w0LR00gr+eagHE+ZJ5lK4sLPeO0ubgoJcwLk6dehU3R24N+FbEEKDc8g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@bcoe/v8-coverage": "^1.0.2", + "@vitest/utils": "4.1.10", + "ast-v8-to-istanbul": "^1.0.0", + "istanbul-lib-coverage": "^3.2.2", + "istanbul-lib-report": "^3.0.1", + "istanbul-reports": "^3.2.0", + "magicast": "^0.5.2", + "obug": "^2.1.1", + "std-env": "^4.0.0-rc.1", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@vitest/browser": "4.1.10", + "vitest": "4.1.10" + }, + "peerDependenciesMeta": { + "@vitest/browser": { + "optional": true + } + } + }, "node_modules/@vitest/expect": { "version": "4.1.10", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.10.tgz", @@ -3716,6 +3829,18 @@ "node": ">=12" } }, + "node_modules/ast-v8-to-istanbul": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.5.tgz", + "integrity": "sha512-UPAgKJFSEGMWSDr3LX4tqnAb4f7KGT8O40Tyx8wbYmmZ/yn58lNCm8h3svs3eXgiGd5AXxz8NDOvXWvicq+rJA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.31", + "estree-walker": "^3.0.3", + "js-tokens": "^10.0.0" + } + }, "node_modules/async": { "version": "3.2.6", "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", @@ -4671,6 +4796,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/has-symbols": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", @@ -4723,6 +4858,13 @@ "node": ">=16.9.0" } }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true, + "license": "MIT" + }, "node_modules/html-to-text": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz", @@ -4883,6 +5025,45 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "license": "ISC" }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", + "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", + "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^4.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz", + "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jose": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz", @@ -4892,6 +5073,13 @@ "url": "https://github.com/sponsors/panva" } }, + "node_modules/js-tokens": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz", + "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==", + "dev": true, + "license": "MIT" + }, "node_modules/json-bigint": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz", @@ -5278,6 +5466,34 @@ "@jridgewell/sourcemap-codec": "^1.5.5" } }, + "node_modules/magicast": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.3.tgz", + "integrity": "sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.3", + "@babel/types": "^7.29.0", + "source-map-js": "^1.2.1" + } + }, + "node_modules/make-dir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", + "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/mammoth": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.12.0.tgz", @@ -6062,6 +6278,19 @@ "url": "https://ko-fi.com/killymxi" } }, + "node_modules/semver": { + "version": "7.8.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz", + "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/send": { "version": "0.19.2", "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", @@ -6293,6 +6522,19 @@ ], "license": "MIT" }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/tinybench": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", diff --git a/backend/package.json b/backend/package.json index d540717..d01ff88 100644 --- a/backend/package.json +++ b/backend/package.json @@ -6,7 +6,8 @@ "dev": "tsx watch src/index.ts", "build": "tsc", "start": "node dist/index.js", - "test": "vitest run" + "test": "vitest run", + "test:coverage": "vitest run --coverage" }, "dependencies": { "@anthropic-ai/sdk": "^0.90.0", @@ -37,6 +38,7 @@ "@types/express": "^4.17.21", "@types/multer": "^1.4.12", "@types/node": "^22.14.1", + "@vitest/coverage-v8": "^4.1.9", "prettier": "^3.8.1", "tsx": "^4.19.3", "typescript": "^5.8.3", diff --git a/backend/src/lib/__tests__/access.test.ts b/backend/src/lib/__tests__/access.test.ts new file mode 100644 index 0000000..ddc4656 --- /dev/null +++ b/backend/src/lib/__tests__/access.test.ts @@ -0,0 +1,163 @@ +import { describe, expect, it } from "vitest"; +import { + checkProjectAccess, + ensureDocAccess, + ensureReviewAccess, + filterAccessibleDocumentIds, + listAccessibleProjectIds, +} from "../access"; + +type Row = Record<string, unknown>; + +function makeDb(tables: Record<string, Row[]>) { + return { + from(table: string) { + let rows = [...(tables[table] ?? [])]; + const query = { + select: () => query, + eq: (column: string, value: unknown) => { + rows = rows.filter((row) => row[column] === value); + return query; + }, + neq: (column: string, value: unknown) => { + rows = rows.filter((row) => row[column] !== value); + return query; + }, + in: (column: string, values: unknown[]) => { + rows = rows.filter((row) => values.includes(row[column])); + return query; + }, + filter: (column: string, operator: string, value: string) => { + if (operator !== "cs") return query; + const expected = (JSON.parse(value) as string[]).map((item) => + item.toLowerCase(), + ); + rows = rows.filter((row) => { + const actual = row[column]; + const normalizedActual = Array.isArray(actual) + ? actual.map((item) => String(item).toLowerCase()) + : []; + return ( + Array.isArray(actual) && + expected.every((item) => normalizedActual.includes(item)) + ); + }); + return query; + }, + single: async () => ({ data: rows[0] ?? null, error: null }), + then: ( + resolve: (value: { data: Row[]; error: null }) => unknown, + reject?: (reason: unknown) => unknown, + ) => Promise.resolve({ data: rows, error: null }).then(resolve, reject), + }; + return query; + }, + } as any; +} + +describe("access helpers", () => { + const db = makeDb({ + projects: [ + { id: "own-project", user_id: "owner", shared_with: [] }, + { + id: "shared-project", + user_id: "other-owner", + shared_with: ["Reviewer@Example.com"], + }, + { id: "private-project", user_id: "other-owner", shared_with: [] }, + ], + documents: [ + { id: "own-doc", user_id: "owner", project_id: null }, + { + id: "shared-doc", + user_id: "other-owner", + project_id: "shared-project", + }, + { + id: "private-doc", + user_id: "other-owner", + project_id: "private-project", + }, + ], + }); + + it("allows project owners", async () => { + await expect( + checkProjectAccess("own-project", "owner", "owner@example.com", db), + ).resolves.toMatchObject({ ok: true, isOwner: true }); + }); + + it("allows shared project access case-insensitively", async () => { + await expect( + checkProjectAccess( + "shared-project", + "reviewer", + "reviewer@example.com", + db, + ), + ).resolves.toMatchObject({ ok: true, isOwner: false }); + }); + + it("denies private project access", async () => { + await expect( + checkProjectAccess( + "private-project", + "reviewer", + "reviewer@example.com", + db, + ), + ).resolves.toEqual({ ok: false }); + }); + + it("allows document owners and shared-project readers", async () => { + await expect( + ensureDocAccess( + { user_id: "owner", project_id: null }, + "owner", + "owner@example.com", + db, + ), + ).resolves.toMatchObject({ ok: true, isOwner: true }); + + await expect( + ensureDocAccess( + { user_id: "other-owner", project_id: "shared-project" }, + "reviewer", + "reviewer@example.com", + db, + ), + ).resolves.toMatchObject({ ok: true, isOwner: false }); + }); + + it("filters user-supplied document IDs to accessible documents only", async () => { + await expect( + filterAccessibleDocumentIds( + ["own-doc", "shared-doc", "private-doc", "missing-doc"], + "reviewer", + "reviewer@example.com", + db, + ), + ).resolves.toEqual(["shared-doc"]); + }); + + it("lists own and directly shared projects", async () => { + await expect( + listAccessibleProjectIds("owner", "reviewer@example.com", db), + ).resolves.toEqual(expect.arrayContaining(["own-project", "shared-project"])); + }); + + it("allows direct review sharing without project access", async () => { + await expect( + ensureReviewAccess( + { + user_id: "other-owner", + project_id: null, + shared_with: ["Reviewer@Example.com"], + }, + "reviewer", + "reviewer@example.com", + db, + ), + ).resolves.toMatchObject({ ok: true, isOwner: false }); + }); +}); diff --git a/backend/src/lib/__tests__/chatTypes.test.ts b/backend/src/lib/__tests__/chatTypes.test.ts new file mode 100644 index 0000000..5da834a --- /dev/null +++ b/backend/src/lib/__tests__/chatTypes.test.ts @@ -0,0 +1,81 @@ +import { describe, it, expect } from "vitest"; +import { + resolveDoc, + resolveDocLabel, + type DocIndex, + type DocStore, +} from "../chat/types"; + +// --------------------------------------------------------------------------- +// resolveDoc +// --------------------------------------------------------------------------- + +describe("resolveDoc", () => { + const index: DocIndex = { + "doc-1": { document_id: "uuid-aaa", filename: "contract.pdf" }, + "doc-2": { document_id: "uuid-bbb", filename: "nda.pdf" }, + }; + + it("returns the doc entry for a known label", () => { + expect(resolveDoc("doc-1", index)).toEqual({ + document_id: "uuid-aaa", + filename: "contract.pdf", + }); + }); + + it("returns undefined for an unknown label", () => { + expect(resolveDoc("doc-99", index)).toBeUndefined(); + }); + + it("returns undefined for an empty string", () => { + expect(resolveDoc("", index)).toBeUndefined(); + }); +}); + +// --------------------------------------------------------------------------- +// resolveDocLabel +// --------------------------------------------------------------------------- + +describe("resolveDocLabel", () => { + const store: DocStore = new Map([ + ["doc-1", { storage_path: "path/a", file_type: "pdf", filename: "contract.pdf" }], + ["doc-2", { storage_path: "path/b", file_type: "pdf", filename: "nda.pdf" }], + ]); + + const index: DocIndex = { + "doc-1": { document_id: "uuid-aaa", filename: "contract.pdf" }, + "doc-2": { document_id: "uuid-bbb", filename: "nda.pdf" }, + }; + + it("resolves by label when the label is in the store", () => { + expect(resolveDocLabel("doc-1", store, index)).toBe("doc-1"); + }); + + it("resolves by filename when the filename matches a store entry", () => { + expect(resolveDocLabel("contract.pdf", store, index)).toBe("doc-1"); + }); + + it("resolves by document UUID via the docIndex", () => { + expect(resolveDocLabel("uuid-bbb", store, index)).toBe("doc-2"); + }); + + it("returns null when nothing matches", () => { + expect(resolveDocLabel("unknown-id", store, index)).toBeNull(); + }); + + it("returns null when docIndex is omitted and only UUID matches", () => { + // Without the index there is no fallback for raw UUIDs. + expect(resolveDocLabel("uuid-aaa", store)).toBeNull(); + }); + + it("prioritises exact label match over filename match", () => { + // If a label happens to equal a filename of a different doc, + // the label match wins. + const storeWithCrossMatch: DocStore = new Map([ + ["nda.pdf", { storage_path: "path/c", file_type: "pdf", filename: "contract.pdf" }], + ]); + // "nda.pdf" is a label here, and it IS in the store, so it should + // be returned directly without the filename-fallback loop. + expect(resolveDocLabel("nda.pdf", storeWithCrossMatch)).toBe("nda.pdf"); + }); +}); diff --git a/backend/src/lib/__tests__/storage.test.ts b/backend/src/lib/__tests__/storage.test.ts new file mode 100644 index 0000000..7a70eab --- /dev/null +++ b/backend/src/lib/__tests__/storage.test.ts @@ -0,0 +1,149 @@ +import { describe, it, expect } from "vitest"; + +import { + normalizeDownloadFilename, + sanitizeDispositionFilename, + encodeRFC5987, + buildContentDisposition, + storageKey, + pdfStorageKey, + generatedDocKey, + versionStorageKey, +} from "../storage"; + +describe("normalizeDownloadFilename", () => { + it("trims surrounding whitespace", () => { + expect(normalizeDownloadFilename(" file.pdf ")).toBe("file.pdf"); + }); + + it("falls back to 'download' for empty string", () => { + expect(normalizeDownloadFilename("")).toBe("download"); + expect(normalizeDownloadFilename(" ")).toBe("download"); + }); + + it("replaces control characters with underscore", () => { + expect(normalizeDownloadFilename("file\x00name.pdf")).toBe("file_name.pdf"); + expect(normalizeDownloadFilename("file\x1fname.pdf")).toBe("file_name.pdf"); + }); + + it("replaces forward and backward slashes with underscore", () => { + expect(normalizeDownloadFilename("dir/file.pdf")).toBe("dir_file.pdf"); + expect(normalizeDownloadFilename("dir\\file.pdf")).toBe("dir_file.pdf"); + }); + + it("preserves normal filenames unchanged", () => { + expect(normalizeDownloadFilename("Contract v2 (Final).pdf")).toBe( + "Contract v2 (Final).pdf", + ); + }); +}); + +describe("sanitizeDispositionFilename", () => { + it("strips double-quote characters", () => { + expect(sanitizeDispositionFilename('file"name.pdf')).toBe("file_name.pdf"); + }); + + it("strips backslash characters", () => { + expect(sanitizeDispositionFilename("file\\name.pdf")).toBe("file_name.pdf"); + }); + + it("strips non-ASCII characters", () => { + expect(sanitizeDispositionFilename("filéname.pdf")).toBe("fil_name.pdf"); + }); + + it("still applies normalizeDownloadFilename rules first", () => { + expect(sanitizeDispositionFilename(" ")).toBe("download"); + }); +}); + +describe("encodeRFC5987", () => { + it("encodes spaces as %20", () => { + expect(encodeRFC5987("hello world")).toBe("hello%20world"); + }); + + it("encodes single-quote as %27", () => { + expect(encodeRFC5987("it's")).toContain("%27"); + }); + + it("encodes ( and ) as %28 and %29", () => { + const result = encodeRFC5987("a(b)c"); + expect(result).toContain("%28"); + expect(result).toContain("%29"); + }); + + it("encodes * as %2A", () => { + expect(encodeRFC5987("a*b")).toContain("%2A"); + }); + + it("leaves safe ASCII characters unencoded", () => { + expect(encodeRFC5987("file.pdf")).toBe("file.pdf"); + }); +}); + +describe("buildContentDisposition", () => { + it("produces an attachment header with ASCII filename", () => { + const header = buildContentDisposition("attachment", "contract.pdf"); + expect(header).toMatch(/^attachment;/); + expect(header).toContain('filename="contract.pdf"'); + expect(header).toContain("filename*=UTF-8''contract.pdf"); + }); + + it("produces an inline header", () => { + const header = buildContentDisposition("inline", "preview.pdf"); + expect(header).toMatch(/^inline;/); + }); + + it("encodes unicode filename in filename* param", () => { + const header = buildContentDisposition("attachment", "Ünïcödé.pdf"); + expect(header).toContain("filename*=UTF-8''"); + expect(header).not.toContain("Ü"); + }); +}); + +describe("storageKey", () => { + it("includes userId, docId, and correct extension", () => { + const key = storageKey("user1", "doc1", "contract.pdf"); + expect(key).toBe("documents/user1/doc1/source.pdf"); + }); + + it("falls back to .bin for extensions longer than 16 chars", () => { + const key = storageKey("user1", "doc1", "file.toolongextension1234"); + expect(key).toBe("documents/user1/doc1/source.bin"); + }); + + it("falls back to .bin when no extension", () => { + const key = storageKey("user1", "doc1", "noextension"); + expect(key).toBe("documents/user1/doc1/source.bin"); + }); +}); + +describe("pdfStorageKey", () => { + it("places PDF in the correct path with stem", () => { + const key = pdfStorageKey("user1", "doc1", "contract"); + expect(key).toBe("documents/user1/doc1/contract.pdf"); + }); +}); + +describe("generatedDocKey", () => { + it("uses generated/ prefix and .docx extension for docx files", () => { + const key = generatedDocKey("user1", "doc1", "output.docx"); + expect(key).toBe("generated/user1/doc1/generated.docx"); + }); + + it("falls back to .docx for extensions longer than 16 chars", () => { + const key = generatedDocKey("user1", "doc1", "output.toolongextension1234"); + expect(key).toBe("generated/user1/doc1/generated.docx"); + }); +}); + +describe("versionStorageKey", () => { + it("includes userId, docId, versionSlug, and extension", () => { + const key = versionStorageKey("user1", "doc1", "v2", "contract.pdf"); + expect(key).toBe("documents/user1/doc1/versions/v2.pdf"); + }); + + it("falls back to .bin for unknown extensions", () => { + const key = versionStorageKey("user1", "doc1", "v2", "file"); + expect(key).toBe("documents/user1/doc1/versions/v2.bin"); + }); +}); diff --git a/backend/src/lib/__tests__/userApiKeys.test.ts b/backend/src/lib/__tests__/userApiKeys.test.ts new file mode 100644 index 0000000..c7dbe72 --- /dev/null +++ b/backend/src/lib/__tests__/userApiKeys.test.ts @@ -0,0 +1,73 @@ +import { describe, it, expect, beforeEach, afterEach } from "vitest"; +import { normalizeApiKeyProvider, hasEnvApiKey } from "../userApiKeys"; + +describe("normalizeApiKeyProvider", () => { + it('returns "claude" for "claude"', () => { + expect(normalizeApiKeyProvider("claude")).toBe("claude"); + }); + + it('returns "openai" for "openai"', () => { + expect(normalizeApiKeyProvider("openai")).toBe("openai"); + }); + + it('returns "gemini" for "gemini"', () => { + expect(normalizeApiKeyProvider("gemini")).toBe("gemini"); + }); + + it("returns null for unknown provider strings", () => { + expect(normalizeApiKeyProvider("unknown")).toBeNull(); + expect(normalizeApiKeyProvider("")).toBeNull(); + expect(normalizeApiKeyProvider("Claude")).toBeNull(); + expect(normalizeApiKeyProvider("OPENAI")).toBeNull(); + }); +}); + +describe("hasEnvApiKey", () => { + const envVars = [ + "ANTHROPIC_API_KEY", + "CLAUDE_API_KEY", + "OPENAI_API_KEY", + "GEMINI_API_KEY", + ]; + + // Clear before AND after each test so keys exported in the developer's + // shell (or CI) can't leak into assertions. + beforeEach(() => { + for (const v of envVars) delete process.env[v]; + }); + + afterEach(() => { + for (const v of envVars) delete process.env[v]; + }); + + it("returns true for claude when ANTHROPIC_API_KEY is set", () => { + process.env.ANTHROPIC_API_KEY = "sk-ant-test"; + expect(hasEnvApiKey("claude")).toBe(true); + }); + + it("returns true for claude when CLAUDE_API_KEY is set as fallback", () => { + process.env.CLAUDE_API_KEY = "sk-claude-test"; + expect(hasEnvApiKey("claude")).toBe(true); + }); + + it("returns true for openai when OPENAI_API_KEY is set", () => { + process.env.OPENAI_API_KEY = "sk-openai-test"; + expect(hasEnvApiKey("openai")).toBe(true); + }); + + it("returns true for gemini when GEMINI_API_KEY is set", () => { + process.env.GEMINI_API_KEY = "gemini-key-test"; + expect(hasEnvApiKey("gemini")).toBe(true); + }); + + it("returns false when no env key is set for the provider", () => { + expect(hasEnvApiKey("claude")).toBe(false); + expect(hasEnvApiKey("openai")).toBe(false); + expect(hasEnvApiKey("gemini")).toBe(false); + }); + + it("ignores whitespace-only env values", () => { + process.env.ANTHROPIC_API_KEY = " "; + expect(hasEnvApiKey("claude")).toBe(false); + }); +}); diff --git a/backend/vitest.config.mts b/backend/vitest.config.mts new file mode 100644 index 0000000..2f39f1d --- /dev/null +++ b/backend/vitest.config.mts @@ -0,0 +1,36 @@ +import { defineConfig } from "vitest/config"; + +export default defineConfig({ + test: { + environment: "node", + include: ["src/**/*.test.ts"], + exclude: ["dist/**", "node_modules/**"], + // Generous timeouts so cold-start module transform/import latency + // can't cause spurious timeout failures on a cold CI runner. Warm + // tests finish in ~1s; this only guards the pathological cold case — + // it does not mask hangs. + testTimeout: 20000, + hookTimeout: 20000, + coverage: { + provider: "v8", + reporter: ["text", "lcov"], + include: ["src/lib/**"], + // No-regression RATCHET floor, not a target. src/lib/** spans the + // small, tested libs (access, storage keys/dispositions, + // downloadTokens, userApiKeys provider/env checks, chat doc + // resolution) AND the large, still-untested feature libs + // (courtlistener, mcp, chat tool dispatch, llm providers, + // spreadsheet/docx handling), so the global number is low. + // Measured on this tree: 2.58% statements, 2.00% branches, + // 4.61% functions, 2.58% lines. These floors sit just below + // that (rounded down to whole percents) so CI fails on a + // *drop*; raise them as the feature-lib backlog gets covered. + thresholds: { + statements: 2, + branches: 2, + functions: 4, + lines: 2, + }, + }, + }, +}); From a29e67deacee2d034157ad8c3af2348041fed6cc Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 10:50:11 -0700 Subject: [PATCH 13/21] test: component and hook unit tests for the web app MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ported from the amal66 fork (index: Open-Legal-Products/mike#205), adapted to this repo's frontend/ layout and current component behavior. Adds the jsdom + testing-library harness on top of the existing vitest setup: vitest.config.mts (jsdom environment, @/ alias mirroring tsconfig paths, dummy Supabase env for modules that build a client at import time) and vitest.setup.ts (jest-dom matchers). New devDependencies: jsdom, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, @vitejs/plugin-react. Ported suites (30 new tests): - FileTypeIcon.test.tsx (11) — fileTypeKind mapping + icon rendering - TRTable.test.tsx (1) — header/row render smoke test; the fork's ARIA role assertions (table/columnheader, "Tabular review" label) target fork-only markup — this repo's grid is div-based, so the test asserts rendered content instead - button.test.tsx (4), pill-button.test.tsx (8), cite-button.test.tsx (3) - useSmoothedReveal.test.ts (3) — passes against this repo's early-return snap behavior unchanged Dropped (subjects don't exist here): - HistoryDropdown.test.tsx — no tr-chat-panel/HistoryDropdown component - applyAssistantStreamEvent.test.ts — no such module - useProjectsQuery/useTabularReviewsQuery/useWorkflowsQuery tests — react-query is fork-only - lib/toast.test.ts — no frontend/src/lib/toast.ts - useAssistantChat.parsers.test.ts — the parser helpers exist inside useAssistantChat.ts but are not exported, and the fork's extracted module doesn't exist here Verified: frontend npm test 38/38 passing (30 new + 8 pre-existing cn() utils tests); npx tsc --noEmit clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- frontend/package-lock.json | 1973 ++++++++++++++++- frontend/package.json | 5 + .../message/useSmoothedReveal.test.ts | 47 + .../components/shared/FileTypeIcon.test.tsx | 92 + .../app/components/tabular/TRTable.test.tsx | 39 + .../src/app/components/ui/button.test.tsx | 44 + .../app/components/ui/cite-button.test.tsx | 40 + .../app/components/ui/pill-button.test.tsx | 91 + frontend/vitest.config.mts | 45 + frontend/vitest.setup.ts | 1 + 10 files changed, 2374 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/components/assistant/message/useSmoothedReveal.test.ts create mode 100644 frontend/src/app/components/shared/FileTypeIcon.test.tsx create mode 100644 frontend/src/app/components/tabular/TRTable.test.tsx create mode 100644 frontend/src/app/components/ui/button.test.tsx create mode 100644 frontend/src/app/components/ui/cite-button.test.tsx create mode 100644 frontend/src/app/components/ui/pill-button.test.tsx create mode 100644 frontend/vitest.config.mts create mode 100644 frontend/vitest.setup.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1fb2be4..d2f80ae 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -57,15 +57,20 @@ }, "devDependencies": { "@tailwindcss/postcss": "^4", + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^16.3.2", + "@testing-library/user-event": "^14.6.1", "@types/marked": "^5.0.2", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@types/uuid": "^10.0.0", + "@vitejs/plugin-react": "^4.7.0", "babel-plugin-react-compiler": "1.0.0", "baseline-browser-mapping": "^2.9.11", "eslint": "^9", "eslint-config-next": "^16.2.6", + "jsdom": "^27.0.1", "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5", @@ -73,6 +78,20 @@ "wrangler": "^4.90.0" } }, + "node_modules/@acemir/cssom": { + "version": "0.9.31", + "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz", + "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@adobe/css-tools": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz", + "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==", + "dev": true, + "license": "MIT" + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -86,6 +105,61 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@asamuzakjp/css-color": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz", + "integrity": "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@csstools/css-calc": "^3.0.0", + "@csstools/css-color-parser": "^4.0.1", + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0", + "lru-cache": "^11.2.5" + } + }, + "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": { + "version": "11.5.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz", + "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@asamuzakjp/dom-selector": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz", + "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@asamuzakjp/nwsapi": "^2.3.9", + "bidi-js": "^1.0.3", + "css-tree": "^3.1.0", + "is-potential-custom-element-name": "^1.0.1", + "lru-cache": "^11.2.6" + } + }, + "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": { + "version": "11.5.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz", + "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@asamuzakjp/nwsapi": { + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz", + "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==", + "dev": true, + "license": "MIT" + }, "node_modules/@ast-grep/napi": { "version": "0.40.5", "resolved": "https://registry.npmjs.org/@ast-grep/napi/-/napi-0.40.5.tgz", @@ -1592,6 +1666,16 @@ "@babel/core": "^7.0.0" } }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-string-parser": { "version": "7.27.1", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", @@ -1652,6 +1736,38 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/runtime": { "version": "7.29.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz", @@ -1835,6 +1951,146 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@csstools/color-helpers": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz", + "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=20.19.0" + } + }, + "node_modules/@csstools/css-calc": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz", + "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0" + } + }, + "node_modules/@csstools/css-color-parser": { + "version": "4.1.9", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.9.tgz", + "integrity": "sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "dependencies": { + "@csstools/color-helpers": "^6.1.0", + "@csstools/css-calc": "^3.2.1" + }, + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0" + } + }, + "node_modules/@csstools/css-parser-algorithms": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz", + "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^4.0.0" + } + }, + "node_modules/@csstools/css-syntax-patches-for-csstree": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.6.tgz", + "integrity": "sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "peerDependencies": { + "css-tree": "^3.2.1" + }, + "peerDependenciesMeta": { + "css-tree": { + "optional": true + } + } + }, + "node_modules/@csstools/css-tokenizer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz", + "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "engines": { + "node": ">=20.19.0" + } + }, "node_modules/@dotenvx/dotenvx": { "version": "1.31.0", "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.31.0.tgz", @@ -2466,6 +2722,24 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@exodus/bytes": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz", + "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@noble/hashes": "^1.8.0 || ^2.0.0" + }, + "peerDependenciesMeta": { + "@noble/hashes": { + "optional": true + } + } + }, "node_modules/@fast-csv/format": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz", @@ -4945,6 +5219,381 @@ "dev": true, "license": "MIT" }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz", + "integrity": "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.2.tgz", + "integrity": "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.2.tgz", + "integrity": "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.2.tgz", + "integrity": "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.2.tgz", + "integrity": "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.2.tgz", + "integrity": "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.2.tgz", + "integrity": "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.2.tgz", + "integrity": "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.2.tgz", + "integrity": "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.2.tgz", + "integrity": "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-loong64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.2.tgz", + "integrity": "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.2.tgz", + "integrity": "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-ppc64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.2.tgz", + "integrity": "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.2.tgz", + "integrity": "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.2.tgz", + "integrity": "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-riscv64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.2.tgz", + "integrity": "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.2.tgz", + "integrity": "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz", + "integrity": "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.2.tgz", + "integrity": "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true + }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.2.tgz", + "integrity": "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "peer": true + }, + "node_modules/@rollup/rollup-openharmony-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.2.tgz", + "integrity": "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "peer": true + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.2.tgz", + "integrity": "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.2.tgz", + "integrity": "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true + }, + "node_modules/@rollup/rollup-win32-x64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.2.tgz", + "integrity": "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.2.tgz", + "integrity": "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true + }, "node_modules/@rtsao/scc": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz", @@ -6144,6 +6793,107 @@ "tailwindcss": "4.2.2" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", + "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "picocolors": "1.1.1", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/jest-dom": { + "version": "6.9.1", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz", + "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@adobe/css-tools": "^4.4.0", + "aria-query": "^5.0.0", + "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.6.3", + "picocolors": "^1.1.1", + "redent": "^3.0.0" + }, + "engines": { + "node": ">=14", + "npm": ">=6", + "yarn": ">=1" + } + }, + "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", + "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@testing-library/react": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz", + "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0 || ^19.0.0", + "@types/react-dom": "^18.0.0 || ^19.0.0", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@testing-library/user-event": { + "version": "14.6.1", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz", + "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@tiptap/core": { "version": "3.22.3", "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.22.3.tgz", @@ -6609,6 +7359,59 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz", + "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz", + "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, "node_modules/@types/chai": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz", @@ -6700,9 +7503,9 @@ "license": "MIT" }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", "license": "MIT" }, "node_modules/@types/estree-jsx": { @@ -7514,6 +8317,34 @@ "win32" ] }, + "node_modules/@vitejs/plugin-react": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz", + "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.28.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-beta.27", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.17.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/@vitejs/plugin-react/node_modules/@rolldown/pluginutils": { + "version": "1.0.0-beta.27", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", + "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==", + "dev": true, + "license": "MIT" + }, "node_modules/@vitest/expect": { "version": "4.1.10", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.10.tgz", @@ -7656,6 +8487,16 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/agent-base": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz", + "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, "node_modules/agentkeepalive": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz", @@ -8141,6 +8982,16 @@ "node": ">=0.8" } }, + "node_modules/bidi-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz", + "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==", + "dev": true, + "license": "MIT", + "dependencies": { + "require-from-string": "^2.0.2" + } + }, "node_modules/big-integer": { "version": "1.6.52", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", @@ -8885,6 +9736,53 @@ ], "license": "MIT" }, + "node_modules/css-tree": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", + "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.27.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", + "dev": true, + "license": "MIT" + }, + "node_modules/cssstyle": { + "version": "5.3.7", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz", + "integrity": "sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@asamuzakjp/css-color": "^4.1.1", + "@csstools/css-syntax-patches-for-csstree": "^1.0.21", + "css-tree": "^3.1.0", + "lru-cache": "^11.2.4" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cssstyle/node_modules/lru-cache": { + "version": "11.5.2", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz", + "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", @@ -9019,6 +9917,67 @@ "dev": true, "license": "BSD-2-Clause" }, + "node_modules/data-urls": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.1.tgz", + "integrity": "sha512-euIQENZg6x8mj3fO6o9+fOW8MimUI4PpD/fZBhJfeioZVy9TUpM4UY7KjQNVZFlqwJ0UdzRDzkycB997HEq1BQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "whatwg-mimetype": "^5.0.0", + "whatwg-url": "^15.1.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/data-urls/node_modules/tr46": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz", + "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==", + "dev": true, + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/data-urls/node_modules/webidl-conversions": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz", + "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=20" + } + }, + "node_modules/data-urls/node_modules/whatwg-mimetype": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz", + "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + } + }, + "node_modules/data-urls/node_modules/whatwg-url": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz", + "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "tr46": "^6.0.0", + "webidl-conversions": "^8.0.0" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/data-view-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz", @@ -9096,6 +10055,13 @@ } } }, + "node_modules/decimal.js": { + "version": "10.6.0", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz", + "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==", + "dev": true, + "license": "MIT" + }, "node_modules/decimal.js-light": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", @@ -9286,6 +10252,14 @@ "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", "license": "MIT" }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/dompurify": { "version": "3.4.8", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.8.tgz", @@ -11479,6 +12453,19 @@ "hermes-estree": "0.25.1" } }, + "node_modules/html-encoding-sniffer": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz", + "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@exodus/bytes": "^1.6.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + } + }, "node_modules/html-url-attributes": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz", @@ -11519,6 +12506,34 @@ "url": "https://opencollective.com/express" } }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", + "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/https-proxy-agent": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz", + "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/human-signals": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", @@ -11634,6 +12649,16 @@ "node": ">=0.8.19" } }, + "node_modules/indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -12016,6 +13041,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true, + "license": "MIT" + }, "node_modules/is-promise": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz", @@ -12265,6 +13297,122 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsdom": { + "version": "27.4.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz", + "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@acemir/cssom": "^0.9.28", + "@asamuzakjp/dom-selector": "^6.7.6", + "@exodus/bytes": "^1.6.0", + "cssstyle": "^5.3.4", + "data-urls": "^6.0.0", + "decimal.js": "^10.6.0", + "html-encoding-sniffer": "^6.0.0", + "http-proxy-agent": "^7.0.2", + "https-proxy-agent": "^7.0.6", + "is-potential-custom-element-name": "^1.0.1", + "parse5": "^8.0.0", + "saxes": "^6.0.0", + "symbol-tree": "^3.2.4", + "tough-cookie": "^6.0.0", + "w3c-xmlserializer": "^5.0.0", + "webidl-conversions": "^8.0.0", + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^15.1.0", + "ws": "^8.18.3", + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "canvas": "^3.0.0" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, + "node_modules/jsdom/node_modules/entities": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz", + "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/jsdom/node_modules/parse5": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz", + "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==", + "dev": true, + "license": "MIT", + "dependencies": { + "entities": "^8.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/jsdom/node_modules/saxes": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", + "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", + "dev": true, + "license": "ISC", + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=v12.22.7" + } + }, + "node_modules/jsdom/node_modules/tr46": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz", + "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==", + "dev": true, + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/jsdom/node_modules/webidl-conversions": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz", + "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=20" + } + }, + "node_modules/jsdom/node_modules/whatwg-url": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz", + "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "tr46": "^6.0.0", + "webidl-conversions": "^8.0.0" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -12895,6 +14043,17 @@ "jszip": "^3.5.0" } }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, + "license": "MIT", + "peer": true, + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", @@ -13305,6 +14464,13 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.27.1", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz", + "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/mdurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", @@ -13991,6 +15157,16 @@ "node": ">=6" } }, + "node_modules/min-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/miniflare": { "version": "4.20260507.1", "resolved": "https://registry.npmjs.org/miniflare/-/miniflare-4.20260507.1.tgz", @@ -14910,6 +16086,44 @@ "node": ">= 0.8.0" } }, + "node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/pretty-format/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "license": "MIT", + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/pretty-format/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -15301,6 +16515,16 @@ } } }, + "node_modules/react-refresh": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", + "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/react-remove-scroll": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz", @@ -15445,6 +16669,20 @@ "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/redent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, + "license": "MIT", + "dependencies": { + "indent-string": "^4.0.0", + "strip-indent": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", @@ -15844,6 +17082,16 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/reselect": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", @@ -15994,6 +17242,52 @@ "@rolldown/binding-win32-x64-msvc": "1.1.5" } }, + "node_modules/rollup": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz", + "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.62.2", + "@rollup/rollup-android-arm64": "4.62.2", + "@rollup/rollup-darwin-arm64": "4.62.2", + "@rollup/rollup-darwin-x64": "4.62.2", + "@rollup/rollup-freebsd-arm64": "4.62.2", + "@rollup/rollup-freebsd-x64": "4.62.2", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", + "@rollup/rollup-linux-arm-musleabihf": "4.62.2", + "@rollup/rollup-linux-arm64-gnu": "4.62.2", + "@rollup/rollup-linux-arm64-musl": "4.62.2", + "@rollup/rollup-linux-loong64-gnu": "4.62.2", + "@rollup/rollup-linux-loong64-musl": "4.62.2", + "@rollup/rollup-linux-ppc64-gnu": "4.62.2", + "@rollup/rollup-linux-ppc64-musl": "4.62.2", + "@rollup/rollup-linux-riscv64-gnu": "4.62.2", + "@rollup/rollup-linux-riscv64-musl": "4.62.2", + "@rollup/rollup-linux-s390x-gnu": "4.62.2", + "@rollup/rollup-linux-x64-gnu": "4.62.2", + "@rollup/rollup-linux-x64-musl": "4.62.2", + "@rollup/rollup-openbsd-x64": "4.62.2", + "@rollup/rollup-openharmony-arm64": "4.62.2", + "@rollup/rollup-win32-arm64-msvc": "4.62.2", + "@rollup/rollup-win32-ia32-msvc": "4.62.2", + "@rollup/rollup-win32-x64-gnu": "4.62.2", + "@rollup/rollup-win32-x64-msvc": "4.62.2", + "fsevents": "~2.3.2" + } + }, "node_modules/rope-sequence": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz", @@ -16757,6 +18051,19 @@ "node": ">=6" } }, + "node_modules/strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "min-indent": "^1.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", @@ -16858,6 +18165,13 @@ "uuid": "^10.0.0" } }, + "node_modules/symbol-tree": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", + "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", + "dev": true, + "license": "MIT" + }, "node_modules/tailwind-merge": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz", @@ -17039,6 +18353,26 @@ "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==", "license": "MIT" }, + "node_modules/tldts": { + "version": "7.4.9", + "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.9.tgz", + "integrity": "sha512-3kZ8wQQ/k5DrChD4X4FVvr2D7E5uoRgAqkPyLpSCGUvqOvqu+JEdr3mwMUaVWb+vMHZaKhF5fp2PBigKsui7hA==", + "dev": true, + "license": "MIT", + "dependencies": { + "tldts-core": "^7.4.9" + }, + "bin": { + "tldts": "bin/cli.js" + } + }, + "node_modules/tldts-core": { + "version": "7.4.9", + "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.9.tgz", + "integrity": "sha512-DxKfPBI52p2msTEu7MPhdpdDTBhhVQg1a/8PjQckeyAvO13eMYElX545grIp6nnTGIMZlRvFZPvFhvI/WIz2Vg==", + "dev": true, + "license": "MIT" + }, "node_modules/tmp": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz", @@ -17070,6 +18404,19 @@ "node": ">=0.6" } }, + "node_modules/tough-cookie": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz", + "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "tldts": "^7.0.5" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", @@ -17743,6 +19090,593 @@ "d3-timer": "^3.0.1" } }, + "node_modules/vite": { + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "esbuild": "^0.27.0 || ^0.28.0", + "fdir": "^6.5.0", + "picomatch": "^4.0.3", + "postcss": "^8.5.6", + "rollup": "^4.43.0", + "tinyglobby": "^0.2.15" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "lightningcss": "^1.21.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/vite/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "peer": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" + } + }, "node_modules/vitest": { "version": "4.1.10", "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.10.tgz", @@ -18456,6 +20390,19 @@ "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", "license": "MIT" }, + "node_modules/w3c-xmlserializer": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", + "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/web-namespaces": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz", @@ -18481,6 +20428,16 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "license": "BSD-2-Clause" }, + "node_modules/whatwg-mimetype": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", @@ -19213,6 +21170,16 @@ "xml-js": "bin/cli.js" } }, + "node_modules/xml-name-validator": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz", + "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18" + } + }, "node_modules/xml-naming": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/xml-naming/-/xml-naming-0.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 16db224..9ed7735 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -62,15 +62,20 @@ }, "devDependencies": { "@tailwindcss/postcss": "^4", + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^16.3.2", + "@testing-library/user-event": "^14.6.1", "@types/marked": "^5.0.2", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@types/uuid": "^10.0.0", + "@vitejs/plugin-react": "^4.7.0", "babel-plugin-react-compiler": "1.0.0", "baseline-browser-mapping": "^2.9.11", "eslint": "^9", "eslint-config-next": "^16.2.6", + "jsdom": "^27.0.1", "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5", diff --git a/frontend/src/app/components/assistant/message/useSmoothedReveal.test.ts b/frontend/src/app/components/assistant/message/useSmoothedReveal.test.ts new file mode 100644 index 0000000..f1e8781 --- /dev/null +++ b/frontend/src/app/components/assistant/message/useSmoothedReveal.test.ts @@ -0,0 +1,47 @@ +import { describe, expect, it } from "vitest"; +import { act, renderHook } from "@testing-library/react"; +import { useSmoothedReveal } from "./useSmoothedReveal"; + +const FULL = "**Demo mode** — no AI provider key is configured."; + +describe("useSmoothedReveal", () => { + it("snaps to the full text when the stream ends mid-reveal", async () => { + // Stream a long body in one chunk while active: the rAF pacer will only + // have revealed a prefix by the time the stream ends. + const { result, rerender } = renderHook( + ({ text, active }) => useSmoothedReveal(text, active), + { initialProps: { text: "", active: true } }, + ); + + rerender({ text: FULL, active: true }); + expect(result.current.length).toBeLessThan(FULL.length); + + // Stream ends. The hook must snap to the full text — it drives the + // rendered slice off `revealedInt`, so updating only the internal ref + // would leave the reply frozen at a partial prefix (e.g. "**Demo mo"). + await act(async () => { + rerender({ text: FULL, active: false }); + }); + + expect(result.current).toBe(FULL); + }); + + it("returns the full text immediately for a replayed (non-streaming) message", () => { + const { result } = renderHook(() => useSmoothedReveal(FULL, false)); + expect(result.current).toBe(FULL); + }); + + it("never returns more than the text it was given", async () => { + const { result, rerender } = renderHook( + ({ text, active }) => useSmoothedReveal(text, active), + { initialProps: { text: FULL, active: false } }, + ); + + // Text replaced by something shorter (edited / retried turn). + await act(async () => { + rerender({ text: "short", active: false }); + }); + + expect(result.current).toBe("short"); + }); +}); diff --git a/frontend/src/app/components/shared/FileTypeIcon.test.tsx b/frontend/src/app/components/shared/FileTypeIcon.test.tsx new file mode 100644 index 0000000..ee0007f --- /dev/null +++ b/frontend/src/app/components/shared/FileTypeIcon.test.tsx @@ -0,0 +1,92 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + +import { FileTypeIcon, fileTypeKind } from "./FileTypeIcon"; + +describe("fileTypeKind", () => { + it("maps bare file_type values to a kind", () => { + expect(fileTypeKind("pdf")).toBe("pdf"); + expect(fileTypeKind("docx")).toBe("word"); + expect(fileTypeKind("doc")).toBe("word"); + expect(fileTypeKind("xlsx")).toBe("excel"); + expect(fileTypeKind("xlsm")).toBe("excel"); + expect(fileTypeKind("xls")).toBe("excel"); + expect(fileTypeKind("pptx")).toBe("ppt"); + expect(fileTypeKind("ppt")).toBe("ppt"); + }); + + it("maps filenames by their extension", () => { + expect(fileTypeKind("report.pdf")).toBe("pdf"); + expect(fileTypeKind("Quarterly Deck.PPTX")).toBe("ppt"); + expect(fileTypeKind("model.final.xlsx")).toBe("excel"); + }); + + it("is case-insensitive and trims whitespace", () => { + expect(fileTypeKind(" PDF ")).toBe("pdf"); + expect(fileTypeKind("DOCX")).toBe("word"); + }); + + it("falls back to other for unknown, empty, or nullish input", () => { + expect(fileTypeKind("txt")).toBe("other"); + expect(fileTypeKind("")).toBe("other"); + expect(fileTypeKind(null)).toBe("other"); + expect(fileTypeKind(undefined)).toBe("other"); + }); +}); + +describe("FileTypeIcon", () => { + const svgOf = (container: HTMLElement) => container.querySelector("svg"); + const imgOf = (container: HTMLElement) => container.querySelector("img"); + + it("renders the PDF icon image", () => { + const { container } = render(<FileTypeIcon fileType="pdf" />); + expect(imgOf(container)).toHaveAttribute( + "src", + expect.stringContaining("/icons/file-types/pdf.svg"), + ); + }); + + it("renders the Word icon image", () => { + const { container } = render(<FileTypeIcon fileType="deck.docx" />); + expect(imgOf(container)).toHaveAttribute( + "src", + expect.stringContaining("/icons/file-types/word.svg"), + ); + }); + + it("renders the Excel icon image", () => { + const { container } = render(<FileTypeIcon fileType="xlsx" />); + expect(imgOf(container)).toHaveAttribute( + "src", + expect.stringContaining("/icons/file-types/excel.svg"), + ); + }); + + it("renders a grey icon for unknown types", () => { + const { container } = render(<FileTypeIcon fileType={null} />); + expect(svgOf(container)).toHaveClass("text-gray-500"); + }); + + it("renders a muted grayscale image for a known kind", () => { + const { container } = render(<FileTypeIcon fileType="pdf" muted />); + const img = imgOf(container); + expect(img).toHaveClass("grayscale"); + expect(img).toHaveClass("opacity-35"); + }); + + it("renders a muted grey placeholder for unknown types", () => { + const { container } = render(<FileTypeIcon fileType={null} muted />); + const svg = svgOf(container); + expect(svg).toHaveClass("text-gray-300"); + }); + + it("always applies shrink-0 and merges a custom className", () => { + const { container } = render( + <FileTypeIcon fileType="pdf" className="h-6 w-6" />, + ); + const img = imgOf(container); + expect(img).toHaveClass("shrink-0"); + expect(img).toHaveClass("h-6"); + expect(img).toHaveClass("w-6"); + }); +}); diff --git a/frontend/src/app/components/tabular/TRTable.test.tsx b/frontend/src/app/components/tabular/TRTable.test.tsx new file mode 100644 index 0000000..7d13e78 --- /dev/null +++ b/frontend/src/app/components/tabular/TRTable.test.tsx @@ -0,0 +1,39 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import { TRTable } from "./TRTable"; +import type { Document } from "../shared/types"; + +const doc = { id: "doc-1", filename: "report.pdf" } as Document; + +function renderTable() { + return render( + <TRTable + loading={false} + columns={[]} + documents={[doc]} + cells={[]} + savingColumn={false} + savingColumnsConfig={false} + selectedDocIds={[]} + onSelectionChange={vi.fn()} + onExpand={vi.fn()} + onCitationClick={vi.fn()} + onUpdateColumn={vi.fn()} + onDeleteColumn={vi.fn()} + onAddColumn={vi.fn()} + onAddDocuments={vi.fn()} + />, + ); +} + +describe("TRTable", () => { + // The grid here is div-based (no table/columnheader/rowheader roles), so + // this asserts on rendered content rather than ARIA table semantics. + it("renders the Document header and a row for each document", () => { + renderTable(); + expect(screen.getByText("Document")).toBeInTheDocument(); + expect(screen.getByText("report.pdf")).toBeInTheDocument(); + // One select-all checkbox in the header plus one per document row. + expect(screen.getAllByRole("checkbox")).toHaveLength(2); + }); +}); diff --git a/frontend/src/app/components/ui/button.test.tsx b/frontend/src/app/components/ui/button.test.tsx new file mode 100644 index 0000000..a2deeea --- /dev/null +++ b/frontend/src/app/components/ui/button.test.tsx @@ -0,0 +1,44 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; +import { Button } from "./button"; + +describe("Button", () => { + it("renders its children", () => { + render(<Button>Click me</Button>); + expect( + screen.getByRole("button", { name: "Click me" }), + ).toBeInTheDocument(); + }); + + it("fires onClick when activated", async () => { + const onClick = vi.fn(); + const user = userEvent.setup(); + render(<Button onClick={onClick}>Submit</Button>); + + await user.click(screen.getByRole("button", { name: "Submit" })); + + expect(onClick).toHaveBeenCalledTimes(1); + }); + + it("applies the variant class for destructive buttons", () => { + render(<Button variant="destructive">Delete</Button>); + expect(screen.getByRole("button", { name: "Delete" })).toHaveClass( + "bg-destructive", + ); + }); + + it("does not fire onClick while disabled", async () => { + const onClick = vi.fn(); + const user = userEvent.setup(); + render( + <Button disabled onClick={onClick}> + Disabled + </Button>, + ); + + await user.click(screen.getByRole("button", { name: "Disabled" })); + + expect(onClick).not.toHaveBeenCalled(); + }); +}); diff --git a/frontend/src/app/components/ui/cite-button.test.tsx b/frontend/src/app/components/ui/cite-button.test.tsx new file mode 100644 index 0000000..ac9e1ad --- /dev/null +++ b/frontend/src/app/components/ui/cite-button.test.tsx @@ -0,0 +1,40 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { CiteButton } from "./cite-button"; + +describe("CiteButton", () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + it("renders the default 'Cite' label", () => { + render(<CiteButton quoteText="hello" citationText="Doe 2020" />); + expect( + screen.getByRole("button", { name: /cite/i }), + ).toBeInTheDocument(); + }); + + it("hides the label when showText is false", () => { + render( + <CiteButton + quoteText="hello" + citationText="Doe 2020" + showText={false} + />, + ); + expect(screen.queryByText("Cite")).not.toBeInTheDocument(); + }); + + it("copies the quote and citation, then shows 'Copied'", async () => { + // userEvent.setup() installs a clipboard stub on navigator; spy on it. + const user = userEvent.setup(); + const writeText = vi.spyOn(navigator.clipboard, "writeText"); + render(<CiteButton quoteText={`he said "hi"`} citationText="Doe 2020" />); + + await user.click(screen.getByRole("button")); + + expect(writeText).toHaveBeenCalledWith(`"he said 'hi'" Doe 2020`); + expect(await screen.findByText("Copied")).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/app/components/ui/pill-button.test.tsx b/frontend/src/app/components/ui/pill-button.test.tsx new file mode 100644 index 0000000..de2f084 --- /dev/null +++ b/frontend/src/app/components/ui/pill-button.test.tsx @@ -0,0 +1,91 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; + +import { PillButton } from "./pill-button"; + +describe("PillButton", () => { + it("renders its children as a button by default", () => { + render(<PillButton tone="black">Save</PillButton>); + expect( + screen.getByRole("button", { name: "Save" }), + ).toBeInTheDocument(); + }); + + it("defaults to type=button", () => { + render(<PillButton tone="black">Save</PillButton>); + expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute( + "type", + "button", + ); + }); + + it("applies the tone class", () => { + render(<PillButton tone="danger">Delete</PillButton>); + expect(screen.getByRole("button", { name: "Delete" })).toHaveClass( + "bg-red-600/90", + ); + }); + + it("applies the normal size class when requested", () => { + render( + <PillButton tone="blue" size="normal"> + Continue + </PillButton>, + ); + expect(screen.getByRole("button", { name: "Continue" })).toHaveClass( + "text-sm", + ); + }); + + it("defaults to the sm size class", () => { + render(<PillButton tone="blue">Next</PillButton>); + expect(screen.getByRole("button", { name: "Next" })).toHaveClass( + "text-xs", + ); + }); + + it("fires onClick when activated", async () => { + const onClick = vi.fn(); + const user = userEvent.setup(); + render( + <PillButton tone="white" onClick={onClick}> + Click me + </PillButton>, + ); + + await user.click(screen.getByRole("button", { name: "Click me" })); + + expect(onClick).toHaveBeenCalledTimes(1); + }); + + it("does not fire onClick while disabled", async () => { + const onClick = vi.fn(); + const user = userEvent.setup(); + render( + <PillButton tone="black" disabled onClick={onClick}> + Disabled + </PillButton>, + ); + + await user.click(screen.getByRole("button", { name: "Disabled" })); + + expect(onClick).not.toHaveBeenCalled(); + }); + + it("renders as its child element via asChild", () => { + render( + <PillButton tone="blue" asChild> + <a href="/docs">Docs</a> + </PillButton>, + ); + + const link = screen.getByRole("link", { name: "Docs" }); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute("href", "/docs"); + // asChild drops the intrinsic button type onto the child. + expect(link).not.toHaveAttribute("type"); + // Pill styling still lands on the rendered child. + expect(link).toHaveClass("rounded-full"); + }); +}); diff --git a/frontend/vitest.config.mts b/frontend/vitest.config.mts new file mode 100644 index 0000000..8e111b6 --- /dev/null +++ b/frontend/vitest.config.mts @@ -0,0 +1,45 @@ +import { fileURLToPath } from "node:url"; +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vitest/config"; + +const resolvePath = (relative: string) => + fileURLToPath(new URL(relative, import.meta.url)); + +export default defineConfig({ + plugins: [react()], + resolve: { + // Mirror the `@/*` path alias from tsconfig.json so unit tests resolve + // the same module specifiers the app uses. + alias: [ + { + find: /^@\/(.*)$/, + replacement: resolvePath("./src/$1"), + }, + ], + }, + test: { + globals: true, + environment: "jsdom", + setupFiles: ["./vitest.setup.ts"], + // app/lib/supabase.ts creates its client at module load, so any + // component whose import graph reaches it needs these set. Dummy + // values — unit tests never talk to Supabase. + env: { + NEXT_PUBLIC_SUPABASE_URL: "http://localhost:54321", + NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY: "test-anon-key", + }, + // jsdom 27's CSS-color parser (@asamuzakjp/css-color) is CJS but + // require()s the ESM-only @csstools/css-calc. That require() happens + // in the worker process while the jsdom environment boots — before + // Vite's transform pipeline is involved — so deps.inline can't fix it. + // Instead, let Node itself handle require(esm): default on >=22.12, + // and enabled by this (there harmless) flag on 22.0–22.11. + execArgv: ["--experimental-require-module"], + // Unit tests only. Keep any Playwright e2e specs (*.spec.ts) out. + include: ["src/**/*.test.{ts,tsx}"], + exclude: ["node_modules/**", "e2e/**", "**/*.spec.ts"], + // Generous timeouts to absorb cold-start jsdom + transform latency on CI. + testTimeout: 20000, + hookTimeout: 20000, + }, +}); diff --git a/frontend/vitest.setup.ts b/frontend/vitest.setup.ts new file mode 100644 index 0000000..f149f27 --- /dev/null +++ b/frontend/vitest.setup.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom/vitest"; From 45a4f7508c0d2d0195ece1329c0f9fe6a594cf87 Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 11:00:01 -0700 Subject: [PATCH 14/21] test: route-level integration tests + app/index split Ports the backend route-level integration suites from the amal66 fork (index: Open-Legal-Products/mike#205), adapted from the fork's apps/api modules/services layout to this repo's monolithic backend/src/routes/*.ts layout. app/index split (the only production change; mechanical, zero behavior change): backend/src/index.ts previously built the express app and called app.listen at the bottom. Everything except the listen call moved verbatim into backend/src/app.ts, which now exports `app` (same middleware order, same routes, same rate-limiter setup, dotenv/config still imported first). index.ts is now a tiny entry that imports { app } and calls listen with the same log line. `npm run build` still emits dist/index.js and the `start` script is unchanged. New suites under backend/src/__tests__/integration/ (94 tests): - health.test.ts (5): /health, requireAuth 401 paths, 404 fallthrough - chat.routes.test.ts (6): POST /chat validation + SSE happy/error paths - projects.routes.test.ts (18): overview/create/detail/patch/delete, sharing normalisation, ownership guards - projectChat.routes.test.ts (3): project access guard + SSE paths - tabular.routes.test.ts (31): review CRUD, access guards, document-access filtering, missing_api_key guards - user.routes.test.ts (27): profile, API-key crypto boundary, MFA guards, export/deletion endpoints - documentsUpload.routes.test.ts (4): upload validation + download-zip bounds/access - access.supabase.test.ts (1) + stack.supabase.test.ts (4): gated on SUPABASE_TEST_URL / SUPABASE_TEST_SERVICE_ROLE_KEY (stack suite also needs SUPABASE_TEST_ANON_KEY); describe.skip otherwise - scripts/test-stack.sh + `npm run test:stack`: reads a running `supabase status -o json` and runs the gated suites Adds supertest + @types/supertest as devDependencies. Dropped relative to the fork (subjects that do not exist in this repo): - orgs.routes, credits.concurrency.supabase, dmsConnectors suites (fork-only features) - all credit-reservation cases (429 CREDIT_LIMIT_EXCEEDED, reserve-then-refund) in chat/projectChat: no credit system here - health /ready case: no /ready endpoint here - org-membership project access case: no org model here - upload magic-byte validation cases: this repo validates extension only (the fork adds content sniffing; replaced with a missing-file 400 case) - download-zip 50-document cap case: no cap here (replaced with a no-accessible-documents 404 case) - stack.supabase PUBLIC_TABLES updated to this repo's schema; the fork's credit-RPC coverage is n/a Verified locally: backend `npm test` -> 8 files passed, 2 skipped; 106 tests passed, 5 skipped (gated suites skip without env). `npm run build` passes. The gated suites were additionally run against a live local Supabase stack: 2 files, 5/5 tests passed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- backend/package-lock.json | 292 ++++++- backend/package.json | 5 +- backend/scripts/test-stack.sh | 38 + .../integration/access.supabase.test.ts | 84 +++ .../__tests__/integration/chat.routes.test.ts | 173 +++++ .../documentsUpload.routes.test.ts | 108 +++ .../src/__tests__/integration/health.test.ts | 80 ++ .../integration/projectChat.routes.test.ts | 149 ++++ .../integration/projects.routes.test.ts | 415 ++++++++++ .../integration/stack.supabase.test.ts | 146 ++++ .../integration/tabular.routes.test.ts | 713 ++++++++++++++++++ .../__tests__/integration/user.routes.test.ts | 588 +++++++++++++++ backend/src/app.ts | 161 ++++ backend/src/index.ts | 161 +--- 14 files changed, 2949 insertions(+), 164 deletions(-) create mode 100755 backend/scripts/test-stack.sh create mode 100644 backend/src/__tests__/integration/access.supabase.test.ts create mode 100644 backend/src/__tests__/integration/chat.routes.test.ts create mode 100644 backend/src/__tests__/integration/documentsUpload.routes.test.ts create mode 100644 backend/src/__tests__/integration/health.test.ts create mode 100644 backend/src/__tests__/integration/projectChat.routes.test.ts create mode 100644 backend/src/__tests__/integration/projects.routes.test.ts create mode 100644 backend/src/__tests__/integration/stack.supabase.test.ts create mode 100644 backend/src/__tests__/integration/tabular.routes.test.ts create mode 100644 backend/src/__tests__/integration/user.routes.test.ts create mode 100644 backend/src/app.ts diff --git a/backend/package-lock.json b/backend/package-lock.json index 65b2c63..fde72bd 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -37,7 +37,9 @@ "@types/express": "^4.17.21", "@types/multer": "^1.4.12", "@types/node": "^22.14.1", + "@types/supertest": "^7.2.1", "prettier": "^3.8.1", + "supertest": "^7.2.2", "tsx": "^4.19.3", "typescript": "^5.8.3", "vitest": "^4.1.9" @@ -2121,6 +2123,19 @@ "@emnapi/runtime": "^1.7.1" } }, + "node_modules/@noble/hashes": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz", + "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^14.21.3 || >=16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@nodable/entities": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@nodable/entities/-/entities-2.1.0.tgz", @@ -2143,6 +2158,16 @@ "url": "https://github.com/sponsors/Boshen" } }, + "node_modules/@paralleldrive/cuid2": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@paralleldrive/cuid2/-/cuid2-2.3.1.tgz", + "integrity": "sha512-XO7cAxhnTZl0Yggq6jOgjiOHhbgcO4NqFqwSmQpjK3b6TEE6Uj/jfSk6wzYyemh3+I0sHirKSetjQwn5cZktFw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@noble/hashes": "^1.1.5" + } + }, "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -3357,6 +3382,13 @@ "@types/node": "*" } }, + "node_modules/@types/cookiejar": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@types/cookiejar/-/cookiejar-2.1.5.tgz", + "integrity": "sha512-he+DHOWReW0nghN24E1WUqM0efK4kI9oTqDm6XmK8ZPe2djZ90BSNdGnIyCLzCPw7/pogPlGbzI2wHGGmi4O/Q==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/cors": { "version": "2.8.19", "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz", @@ -3414,6 +3446,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/methods": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@types/methods/-/methods-1.1.4.tgz", + "integrity": "sha512-ymXWVrDiCxTBE3+RIrrP533E70eA+9qu7zdWoHuOmGujkYtzf4HQF96b8nwHLqhuf4ykX61IGRIB38CC6/sImQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", @@ -3493,6 +3532,30 @@ "@types/node": "*" } }, + "node_modules/@types/superagent": { + "version": "8.1.11", + "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-8.1.11.tgz", + "integrity": "sha512-KA7srSW/HENDtOw9DOqaFLgWuMqN9WgjEw62lh9dpvRaZDkhdOkazASd7X7i2eMUYLHa1U37ZttnePsH5zTDHw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/cookiejar": "^2.1.5", + "@types/methods": "^1.1.4", + "@types/node": "*", + "form-data": "^4.0.0" + } + }, + "node_modules/@types/supertest": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/@types/supertest/-/supertest-7.2.1.tgz", + "integrity": "sha512-4CbBvoYVLHL7+yhbYrZET0vsvuyXTC05aRe7dNQkwMzm56auceoy6Yu3K50uZmwfHna1os3CMSgM/3QVkUtPTw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/methods": "^1.1.4", + "@types/superagent": "^8.1.0" + } + }, "node_modules/@types/ws": { "version": "8.18.1", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", @@ -3706,6 +3769,13 @@ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "license": "MIT" }, + "node_modules/asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==", + "dev": true, + "license": "MIT" + }, "node_modules/assertion-error": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", @@ -3722,6 +3792,13 @@ "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", "license": "MIT" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true, + "license": "MIT" + }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -3858,6 +3935,29 @@ "node": ">=18" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/component-emitter": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz", + "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/concat-stream": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", @@ -3916,6 +4016,13 @@ "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", "license": "MIT" }, + "node_modules/cookiejar": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.4.tgz", + "integrity": "sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==", + "dev": true, + "license": "MIT" + }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -3980,6 +4087,16 @@ "node": ">=0.10.0" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -4009,6 +4126,17 @@ "node": ">=8" } }, + "node_modules/dezalgo": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz", + "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==", + "dev": true, + "license": "ISC", + "dependencies": { + "asap": "^2.0.0", + "wrappy": "1" + } + }, "node_modules/dingbat-to-unicode": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dingbat-to-unicode/-/dingbat-to-unicode-1.0.1.tgz", @@ -4210,6 +4338,22 @@ "node": ">= 0.4" } }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/esbuild": { "version": "0.27.7", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz", @@ -4390,6 +4534,13 @@ "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", "license": "Apache-2.0" }, + "node_modules/fast-safe-stringify": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz", + "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==", + "dev": true, + "license": "MIT" + }, "node_modules/fast-uri": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz", @@ -4501,6 +4652,23 @@ "node": ">= 0.8" } }, + "node_modules/form-data": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz", + "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.4", + "mime-types": "^2.1.35" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/formdata-polyfill": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", @@ -4513,6 +4681,24 @@ "node": ">=12.20.0" } }, + "node_modules/formidable": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.4.tgz", + "integrity": "sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@paralleldrive/cuid2": "^2.2.2", + "dezalgo": "^1.0.4", + "once": "^1.4.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "url": "https://ko-fi.com/tunnckoCore/commissions" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -4683,6 +4869,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/hash.js": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", @@ -4694,9 +4896,9 @@ } }, "node_modules/hasown": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", - "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", "license": "MIT", "dependencies": { "function-bind": "^1.1.2" @@ -6293,6 +6495,90 @@ ], "license": "MIT" }, + "node_modules/superagent": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/superagent/-/superagent-10.3.0.tgz", + "integrity": "sha512-B+4Ik7ROgVKrQsXTV0Jwp2u+PXYLSlqtDAhYnkkD+zn3yg8s/zjA2MeGayPoY/KICrbitwneDHrjSotxKL+0XQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "component-emitter": "^1.3.1", + "cookiejar": "^2.1.4", + "debug": "^4.3.7", + "fast-safe-stringify": "^2.1.1", + "form-data": "^4.0.5", + "formidable": "^3.5.4", + "methods": "^1.1.2", + "mime": "2.6.0", + "qs": "^6.14.1" + }, + "engines": { + "node": ">=14.18.0" + } + }, + "node_modules/superagent/node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/superagent/node_modules/mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "dev": true, + "license": "MIT", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/superagent/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/supertest": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/supertest/-/supertest-7.2.2.tgz", + "integrity": "sha512-oK8WG9diS3DlhdUkcFn4tkNIiIbBx9lI2ClF8K+b2/m8Eyv47LSawxUzZQSNKUrVb2KsqeTDCcjAAVPYaSLVTA==", + "dev": true, + "license": "MIT", + "dependencies": { + "cookie-signature": "^1.2.2", + "methods": "^1.1.2", + "superagent": "^10.3.0" + }, + "engines": { + "node": ">=14.18.0" + } + }, + "node_modules/supertest/node_modules/cookie-signature": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz", + "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.6.0" + } + }, "node_modules/tinybench": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", diff --git a/backend/package.json b/backend/package.json index d540717..5a91f70 100644 --- a/backend/package.json +++ b/backend/package.json @@ -6,7 +6,8 @@ "dev": "tsx watch src/index.ts", "build": "tsc", "start": "node dist/index.js", - "test": "vitest run" + "test": "vitest run", + "test:stack": "bash scripts/test-stack.sh" }, "dependencies": { "@anthropic-ai/sdk": "^0.90.0", @@ -37,7 +38,9 @@ "@types/express": "^4.17.21", "@types/multer": "^1.4.12", "@types/node": "^22.14.1", + "@types/supertest": "^7.2.1", "prettier": "^3.8.1", + "supertest": "^7.2.2", "tsx": "^4.19.3", "typescript": "^5.8.3", "vitest": "^4.1.9" diff --git a/backend/scripts/test-stack.sh b/backend/scripts/test-stack.sh new file mode 100755 index 0000000..2f647a7 --- /dev/null +++ b/backend/scripts/test-stack.sh @@ -0,0 +1,38 @@ +#!/usr/bin/env bash +# Run the gated stack-level integration tests against a local Supabase stack. +# +# These tests exercise the REAL stack (GoTrue auth + Postgres RLS) instead of +# mocks. They are the harness you re-run on every Supabase image bump to prove +# the auth↔API contract and the deny-all RLS firewall still hold. +# +# Usage: supabase start # in the repo, once +# npm run test:stack (from backend/) +set -euo pipefail + +if ! command -v supabase >/dev/null 2>&1; then + echo "supabase CLI not found. Install: brew install supabase/tap/supabase" >&2 + exit 1 +fi + +STATUS="$(supabase status -o json 2>/dev/null)" || { + echo "No running Supabase stack. Start one with: supabase start" >&2 + exit 1 +} + +read_key() { node -e "let s='';process.stdin.on('data',d=>s+=d).on('end',()=>process.stdout.write(String(JSON.parse(s)['$1']??'')))" <<<"$STATUS"; } + +SUPABASE_TEST_URL="$(read_key API_URL)" +SUPABASE_TEST_SERVICE_ROLE_KEY="$(read_key SERVICE_ROLE_KEY)" +SUPABASE_TEST_ANON_KEY="$(read_key ANON_KEY)" + +if [[ -z "$SUPABASE_TEST_URL" || -z "$SUPABASE_TEST_SERVICE_ROLE_KEY" || -z "$SUPABASE_TEST_ANON_KEY" ]]; then + echo "Could not read API_URL/SERVICE_ROLE_KEY/ANON_KEY from 'supabase status'." >&2 + exit 1 +fi +export SUPABASE_TEST_URL SUPABASE_TEST_SERVICE_ROLE_KEY SUPABASE_TEST_ANON_KEY + +echo "Running stack integration tests against $SUPABASE_TEST_URL" +exec npx vitest run \ + src/__tests__/integration/stack.supabase.test.ts \ + src/__tests__/integration/access.supabase.test.ts \ + "$@" diff --git a/backend/src/__tests__/integration/access.supabase.test.ts b/backend/src/__tests__/integration/access.supabase.test.ts new file mode 100644 index 0000000..65b9244 --- /dev/null +++ b/backend/src/__tests__/integration/access.supabase.test.ts @@ -0,0 +1,84 @@ +import { createClient } from "@supabase/supabase-js"; +import { describe, expect, it } from "vitest"; +import { + filterAccessibleDocumentIds, + listAccessibleProjectIds, +} from "../../lib/access"; + +// Gated: runs only against a real (local) Supabase stack. +// supabase start, then export: +// SUPABASE_TEST_URL, SUPABASE_TEST_SERVICE_ROLE_KEY +// or use scripts/test-stack.sh which reads them from `supabase status`. +const url = process.env.SUPABASE_TEST_URL; +const serviceKey = process.env.SUPABASE_TEST_SERVICE_ROLE_KEY; + +const maybeDescribe = url && serviceKey ? describe : describe.skip; + +maybeDescribe("Supabase access integration", () => { + it("proves tabular document filtering drops foreign document IDs", async () => { + const admin = createClient(url!, serviceKey!, { + auth: { persistSession: false }, + }); + const suffix = `${Date.now()}-${Math.random().toString(16).slice(2)}`; + const ownerId = crypto.randomUUID(); + const reviewerId = crypto.randomUUID(); + const sharedProjectId = crypto.randomUUID(); + const privateProjectId = crypto.randomUUID(); + const sharedDocId = crypto.randomUUID(); + const privateDocId = crypto.randomUUID(); + + try { + await admin.from("projects").insert([ + { + id: sharedProjectId, + user_id: ownerId, + name: `shared-${suffix}`, + shared_with: [`reviewer-${suffix}@example.com`], + }, + { + id: privateProjectId, + user_id: ownerId, + name: `private-${suffix}`, + shared_with: [], + }, + ]); + // filename/file_type live on document_versions in this schema — + // the documents rows only need identity + ownership columns. + await admin.from("documents").insert([ + { + id: sharedDocId, + user_id: ownerId, + project_id: sharedProjectId, + }, + { + id: privateDocId, + user_id: ownerId, + project_id: privateProjectId, + }, + ]); + + await expect( + listAccessibleProjectIds( + reviewerId, + `reviewer-${suffix}@example.com`, + admin as any, + ), + ).resolves.toContain(sharedProjectId); + + await expect( + filterAccessibleDocumentIds( + [sharedDocId, privateDocId], + reviewerId, + `reviewer-${suffix}@example.com`, + admin as any, + ), + ).resolves.toEqual([sharedDocId]); + } finally { + await admin.from("documents").delete().in("id", [sharedDocId, privateDocId]); + await admin + .from("projects") + .delete() + .in("id", [sharedProjectId, privateProjectId]); + } + }); +}); diff --git a/backend/src/__tests__/integration/chat.routes.test.ts b/backend/src/__tests__/integration/chat.routes.test.ts new file mode 100644 index 0000000..64e71ec --- /dev/null +++ b/backend/src/__tests__/integration/chat.routes.test.ts @@ -0,0 +1,173 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import request from "supertest"; + +// Hoisted mock fn so the vi.mock factory below (which is itself hoisted above +// the imports) can reference it. Lets each test drive the stream outcome. +const { runLLMStream } = vi.hoisted(() => ({ + runLLMStream: vi.fn(), +})); + +// A permissive, chainable Supabase stub. Every query-builder method returns the +// same object (so arbitrary chains work), the object is awaitable (thenable), +// and the terminal single()/maybeSingle() resolve to a chat row. The chat +// routes only read `.id`/`.title` and check `.error`, so this is enough to let +// a request flow through chat creation and message inserts without real IO. +function makeQuery() { + const result = { data: { id: "chat-1", title: null }, error: null }; + const q: Record<string, unknown> = {}; + const chain = [ + "select", "insert", "update", "delete", "upsert", + "eq", "neq", "in", "is", "or", "lt", "gt", "gte", "lte", + "filter", "order", "limit", "range", "contains", + ]; + for (const m of chain) q[m] = vi.fn(() => q); + q.single = vi.fn(() => Promise.resolve(result)); + q.maybeSingle = vi.fn(() => Promise.resolve(result)); + q.then = (resolve: (v: unknown) => unknown, reject?: (e: unknown) => unknown) => + Promise.resolve(result).then(resolve, reject); + return q; +} + +function mockSupabase() { + return { + from: vi.fn(() => makeQuery()), + rpc: vi.fn(() => Promise.resolve({ data: null, error: null })), + auth: { + getUser: () => + Promise.resolve({ data: { user: { id: "u1" } }, error: null }), + }, + }; +} + +vi.mock("../../lib/supabase", () => ({ + createServerSupabase: vi.fn(() => mockSupabase()), + getUserIdFromRequest: vi.fn(async () => "u1"), +})); + +// Authenticate every request as user "u1" without exercising the real Supabase +// JWT path. requireMfaIfEnrolled must be exported too — userRouter (mounted by +// the app) imports it at module load. +vi.mock("../../middleware/auth", () => ({ + requireAuth: ( + _req: unknown, + res: { locals: Record<string, unknown> }, + next: () => void, + ) => { + res.locals.userId = "u1"; + res.locals.userEmail = "u1@test.local"; + next(); + }, + requireMfaIfEnrolled: (_req: unknown, _res: unknown, next: () => void) => + next(), +})); + +// Keep the real error helpers (the failure-path test relies on genuine +// isAbortError + AssistantStreamError behavior) but stub the functions that +// would otherwise hit the DB or the LLM. +vi.mock("../../lib/chat", async (importOriginal) => { + const actual = await importOriginal<typeof import("../../lib/chat")>(); + return { + ...actual, + buildDocContext: vi.fn(async () => ({ docIndex: {}, docStore: new Map() })), + enrichWithPriorEvents: vi.fn(async (messages: unknown) => messages), + buildWorkflowStore: vi.fn(async () => new Map()), + buildMessages: vi.fn(() => []), + runLLMStream: (...args: unknown[]) => runLLMStream(...args), + }; +}); + +vi.mock("../../lib/userSettings", () => ({ + getUserModelSettings: vi.fn(async () => ({ + legal_research_us: false, + title_model: "test-model", + tabular_model: "test-model", + api_keys: {}, + })), + getUserApiKeys: vi.fn(async () => ({})), +})); + +import { app } from "../../app"; + +const VALID_BODY = { messages: [{ role: "user", content: "hello" }] }; + +describe("POST /chat — streaming endpoint", () => { + beforeEach(() => { + vi.clearAllMocks(); + runLLMStream.mockResolvedValue({ + fullText: "hi there", + events: [], + citations: [], + }); + }); + + it("streams SSE with a chat_id event on the happy path", async () => { + const res = await request(app) + .post("/chat") + .set("Authorization", "Bearer test") + .send(VALID_BODY); + + expect(res.status).toBe(200); + expect(res.headers["content-type"]).toContain("text/event-stream"); + expect(res.text).toContain('"type":"chat_id"'); + expect(runLLMStream).toHaveBeenCalledTimes(1); + }); + + it("surfaces a stream failure as an in-stream error event, not an HTTP error", async () => { + runLLMStream.mockRejectedValue(new Error("upstream LLM failure")); + + const res = await request(app) + .post("/chat") + .set("Authorization", "Bearer test") + .send(VALID_BODY); + + // Headers were already flushed (200) before the stream threw, so the + // failure surfaces as an in-stream error event + [DONE]. + expect(res.status).toBe(200); + expect(res.text).toContain('"type":"error"'); + expect(res.text).toContain("[DONE]"); + }); + + it("returns 400 on an empty messages array (never starts a stream)", async () => { + const res = await request(app) + .post("/chat") + .set("Authorization", "Bearer test") + .send({ messages: [] }); + + expect(res.status).toBe(400); + expect(res.body).toHaveProperty("detail"); + expect(runLLMStream).not.toHaveBeenCalled(); + }); + + it("returns 400 when messages is missing entirely", async () => { + const res = await request(app) + .post("/chat") + .set("Authorization", "Bearer test") + .send({}); + + expect(res.status).toBe(400); + expect(runLLMStream).not.toHaveBeenCalled(); + }); + + it("returns 400 when chat_id is not a non-empty string", async () => { + const res = await request(app) + .post("/chat") + .set("Authorization", "Bearer test") + .send({ ...VALID_BODY, chat_id: " " }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("chat_id must be a non-empty string"); + expect(runLLMStream).not.toHaveBeenCalled(); + }); +}); + +describe("PATCH /chat/:chatId", () => { + it("returns 400 when title is missing", async () => { + const res = await request(app) + .patch("/chat/chat-1") + .set("Authorization", "Bearer test") + .send({}); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("title is required"); + }); +}); diff --git a/backend/src/__tests__/integration/documentsUpload.routes.test.ts b/backend/src/__tests__/integration/documentsUpload.routes.test.ts new file mode 100644 index 0000000..e7544cf --- /dev/null +++ b/backend/src/__tests__/integration/documentsUpload.routes.test.ts @@ -0,0 +1,108 @@ +import { describe, it, expect, vi } from "vitest"; +import request from "supertest"; + +function mockSupabase() { + const result = { data: null, error: null }; + const q: Record<string, unknown> = {}; + const chain = [ + "select", "insert", "update", "delete", "upsert", + "eq", "neq", "in", "is", "or", "not", "lt", "order", "limit", + ]; + for (const m of chain) q[m] = vi.fn(() => q); + q.single = vi.fn(() => Promise.resolve(result)); + q.maybeSingle = vi.fn(() => Promise.resolve(result)); + q.then = (resolve: (v: unknown) => unknown) => + Promise.resolve(result).then(resolve); + return { + from: vi.fn(() => q), + rpc: vi.fn(() => Promise.resolve(result)), + auth: { + getUser: () => + Promise.resolve({ data: { user: { id: "u1" } }, error: null }), + }, + }; +} + +vi.mock("../../lib/supabase", () => ({ + createServerSupabase: vi.fn(() => mockSupabase()), + getUserIdFromRequest: vi.fn(async () => "u1"), +})); + +vi.mock("../../middleware/auth", () => ({ + requireAuth: ( + _req: unknown, + res: { locals: Record<string, unknown> }, + next: () => void, + ) => { + res.locals.userId = "u1"; + res.locals.userEmail = "u1@test.local"; + next(); + }, + requireMfaIfEnrolled: (_req: unknown, _res: unknown, next: () => void) => + next(), +})); + +// Stub the storage IO functions so a request that clears validation never +// touches R2/S3, while keeping the rest of the storage module (key builders, +// disposition helpers) real. The validation tests below reject before storage +// is reached, but this guards against accidental real IO regardless. +vi.mock("../../lib/storage", async (importOriginal) => { + const actual = await importOriginal<typeof import("../../lib/storage")>(); + return { + ...actual, + uploadFile: vi.fn(async () => {}), + downloadFile: vi.fn(async () => null), + deleteFile: vi.fn(async () => {}), + }; +}); + +import { app } from "../../app"; + +describe("POST /single-documents — upload validation", () => { + it("rejects an unsupported file extension with 400", async () => { + const res = await request(app) + .post("/single-documents") + .set("Authorization", "Bearer test") + .attach("file", Buffer.from("hello world"), { + filename: "notes.txt", + contentType: "text/plain", + }); + + expect(res.status).toBe(400); + expect(res.body.detail).toMatch(/unsupported file type/i); + }); + + it("rejects a request with no file attached with 400", async () => { + const res = await request(app) + .post("/single-documents") + .set("Authorization", "Bearer test") + .field("note", "no file here"); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("file is required"); + }); +}); + +describe("POST /single-documents/download-zip — bounds", () => { + it("returns 400 when document_ids is empty", async () => { + const res = await request(app) + .post("/single-documents/download-zip") + .set("Authorization", "Bearer test") + .send({ document_ids: [] }); + + expect(res.status).toBe(400); + expect(res.body.detail).toMatch(/document_ids is required/i); + }); + + it("returns 404 when none of the requested documents are accessible", async () => { + // The documents lookup resolves to no rows (stubbed DB), so the + // access filter leaves nothing to zip. + const res = await request(app) + .post("/single-documents/download-zip") + .set("Authorization", "Bearer test") + .send({ document_ids: ["d-other-user"] }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("No documents found"); + }); +}); diff --git a/backend/src/__tests__/integration/health.test.ts b/backend/src/__tests__/integration/health.test.ts new file mode 100644 index 0000000..8a36172 --- /dev/null +++ b/backend/src/__tests__/integration/health.test.ts @@ -0,0 +1,80 @@ +import { describe, it, expect, vi } from "vitest"; +import request from "supertest"; + +// requireAuth reads SUPABASE_URL / SUPABASE_SECRET_KEY from process.env at +// request time (not import time), so setting them here is early enough even +// though imported modules evaluate before this assignment runs. +process.env.SUPABASE_URL = "http://supabase.test.local"; +process.env.SUPABASE_SECRET_KEY = "test-service-key"; + +// Mock the supabase-js client factory so the real requireAuth middleware never +// makes a network call: auth.getUser() resolves to no user for any token, +// simulating an invalid/expired JWT. +vi.mock("@supabase/supabase-js", () => ({ + createClient: vi.fn(() => ({ + from: () => { + const q: Record<string, unknown> = {}; + const chain = [ + "select", "insert", "update", "delete", "upsert", + "eq", "neq", "in", "is", "or", "not", "filter", + "order", "limit", + ]; + for (const m of chain) q[m] = () => q; + q.single = () => Promise.resolve({ data: null, error: null }); + q.maybeSingle = () => Promise.resolve({ data: null, error: null }); + q.then = (resolve: (v: unknown) => unknown) => + Promise.resolve({ data: null, error: null }).then(resolve); + return q; + }, + rpc: () => Promise.resolve({ data: null, error: null }), + auth: { + getUser: () => + Promise.resolve({ data: { user: null }, error: null }), + }, + })), +})); + +// Vitest hoists vi.mock() calls before all imports, so this regular import +// receives the mocked supabase-js module even though it appears after the +// vi.mock() call in source order. +import { app } from "../../app"; + +describe("GET /health", () => { + it("returns 200 with { ok: true }", async () => { + const res = await request(app).get("/health"); + expect(res.status).toBe(200); + expect(res.body).toEqual({ ok: true }); + }); +}); + +describe("requireAuth middleware", () => { + it("rejects requests with no Authorization header (401)", async () => { + const res = await request(app).get("/chat"); + expect(res.status).toBe(401); + expect(res.body).toHaveProperty("detail"); + }); + + it("rejects requests with a non-Bearer Authorization header (401)", async () => { + const res = await request(app) + .get("/chat") + .set("Authorization", "Basic dXNlcjpwYXNz"); + expect(res.status).toBe(401); + }); + + it("rejects requests with an invalid Bearer token (401)", async () => { + // The mocked createClient().auth.getUser returns { user: null } for + // any token — simulating an expired/invalid token. + const res = await request(app) + .get("/chat") + .set("Authorization", "Bearer invalid-token"); + expect(res.status).toBe(401); + expect(res.body.detail).toMatch(/invalid|expired/i); + }); +}); + +describe("404 handling", () => { + it("returns 404 for unknown routes", async () => { + const res = await request(app).get("/this-route-does-not-exist"); + expect(res.status).toBe(404); + }); +}); diff --git a/backend/src/__tests__/integration/projectChat.routes.test.ts b/backend/src/__tests__/integration/projectChat.routes.test.ts new file mode 100644 index 0000000..8f6af78 --- /dev/null +++ b/backend/src/__tests__/integration/projectChat.routes.test.ts @@ -0,0 +1,149 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import request from "supertest"; + +const { runLLMStream, checkProjectAccess } = vi.hoisted(() => ({ + runLLMStream: vi.fn(), + checkProjectAccess: vi.fn(), +})); + +function makeQuery() { + const result = { + data: { id: "chat-1", title: null, project_id: "p1" }, + error: null, + }; + const q: Record<string, unknown> = {}; + const chain = [ + "select", "insert", "update", "delete", "upsert", + "eq", "neq", "in", "is", "or", "lt", "gt", "gte", "lte", + "filter", "order", "limit", "range", "contains", + ]; + for (const m of chain) q[m] = vi.fn(() => q); + q.single = vi.fn(() => Promise.resolve(result)); + q.maybeSingle = vi.fn(() => Promise.resolve(result)); + q.then = (resolve: (v: unknown) => unknown, reject?: (e: unknown) => unknown) => + Promise.resolve(result).then(resolve, reject); + return q; +} + +function mockSupabase() { + return { + from: vi.fn(() => makeQuery()), + rpc: vi.fn(() => Promise.resolve({ data: null, error: null })), + auth: { + getUser: () => + Promise.resolve({ data: { user: { id: "u1" } }, error: null }), + }, + }; +} + +vi.mock("../../lib/supabase", () => ({ + createServerSupabase: vi.fn(() => mockSupabase()), + getUserIdFromRequest: vi.fn(async () => "u1"), +})); + +vi.mock("../../middleware/auth", () => ({ + requireAuth: ( + _req: unknown, + res: { locals: Record<string, unknown> }, + next: () => void, + ) => { + res.locals.userId = "u1"; + res.locals.userEmail = "u1@test.local"; + next(); + }, + requireMfaIfEnrolled: (_req: unknown, _res: unknown, next: () => void) => + next(), +})); + +vi.mock("../../lib/chat", async (importOriginal) => { + const actual = await importOriginal<typeof import("../../lib/chat")>(); + return { + ...actual, + buildProjectDocContext: vi.fn(async () => ({ + docIndex: {}, + docStore: new Map(), + folderPaths: new Map(), + })), + enrichWithPriorEvents: vi.fn(async (messages: unknown) => messages), + buildWorkflowStore: vi.fn(async () => new Map()), + buildMessages: vi.fn(() => []), + runLLMStream: (...args: unknown[]) => runLLMStream(...args), + }; +}); + +vi.mock("../../lib/userSettings", () => ({ + getUserModelSettings: vi.fn(async () => ({ + legal_research_us: false, + title_model: "test-model", + tabular_model: "test-model", + api_keys: {}, + })), + getUserApiKeys: vi.fn(async () => ({})), +})); + +vi.mock("../../lib/access", () => ({ + checkProjectAccess: (...args: unknown[]) => checkProjectAccess(...args), + ensureDocAccess: vi.fn(async () => ({ ok: true, isOwner: true })), + ensureReviewAccess: vi.fn(async () => ({ ok: true, isOwner: true })), + filterAccessibleDocumentIds: vi.fn(async (ids: string[]) => ids), + listAccessibleProjectIds: vi.fn(async () => []), +})); + +import { app } from "../../app"; + +const VALID_BODY = { messages: [{ role: "user", content: "hello" }] }; + +describe("POST /projects/:projectId/chat", () => { + beforeEach(() => { + vi.clearAllMocks(); + runLLMStream.mockResolvedValue({ + fullText: "", + events: [], + citations: [], + }); + checkProjectAccess.mockResolvedValue({ + ok: true, + isOwner: true, + project: { id: "p1", user_id: "u1", shared_with: null }, + }); + }); + + it("returns 404 and never streams when project access is denied", async () => { + checkProjectAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .post("/projects/p1/chat") + .set("Authorization", "Bearer test") + .send(VALID_BODY); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + // The guard fires before any LLM stream. + expect(runLLMStream).not.toHaveBeenCalled(); + }); + + it("streams SSE on the happy path with project access granted", async () => { + const res = await request(app) + .post("/projects/p1/chat") + .set("Authorization", "Bearer test") + .send(VALID_BODY); + + expect(res.status).toBe(200); + expect(res.headers["content-type"]).toContain("text/event-stream"); + expect(res.text).toContain('"type":"chat_id"'); + expect(runLLMStream).toHaveBeenCalledTimes(1); + }); + + it("surfaces a stream failure as an in-stream error event, not an HTTP error", async () => { + runLLMStream.mockRejectedValue(new Error("upstream LLM failure")); + + const res = await request(app) + .post("/projects/p1/chat") + .set("Authorization", "Bearer test") + .send(VALID_BODY); + + expect(res.status).toBe(200); + expect(res.text).toContain('"type":"error"'); + expect(res.text).toContain("[DONE]"); + }); +}); diff --git a/backend/src/__tests__/integration/projects.routes.test.ts b/backend/src/__tests__/integration/projects.routes.test.ts new file mode 100644 index 0000000..408f24e --- /dev/null +++ b/backend/src/__tests__/integration/projects.routes.test.ts @@ -0,0 +1,415 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import request from "supertest"; + +// --------------------------------------------------------------------------- +// Hoisted mock fns we want to reconfigure per-test. +// --------------------------------------------------------------------------- +const { checkProjectAccess, deleteUserProjects } = vi.hoisted(() => ({ + checkProjectAccess: vi.fn(), + deleteUserProjects: vi.fn(), +})); + +// --------------------------------------------------------------------------- +// Configurable Supabase stub. Each test seeds `supabaseState` in beforeEach; +// terminal query operations (.single()/.maybeSingle()/thenable) resolve to the +// per-table result, and rpc() resolves to a per-call result. Insert payloads +// are recorded so tests can assert on normalisation (lowercasing / dedupe). +// --------------------------------------------------------------------------- +type QueryResult = { data: unknown; error: unknown }; + +let supabaseState: { + rpc: QueryResult; + tables: Record<string, QueryResult>; + inserts: { table: string; payload: unknown }[]; +}; + +function resetSupabaseState() { + supabaseState = { + rpc: { data: [], error: null }, + tables: {}, + inserts: [], + }; +} +resetSupabaseState(); + +function resultForTable(table: string): QueryResult { + return supabaseState.tables[table] ?? { data: null, error: null }; +} + +function makeQuery(table: string) { + const q: Record<string, unknown> = {}; + const chain = [ + "select", "update", "delete", "upsert", + "eq", "neq", "in", "is", "or", "not", "lt", "gt", "gte", "lte", + "filter", "order", "limit", "range", "contains", + ]; + for (const m of chain) q[m] = vi.fn(() => q); + q.insert = vi.fn((payload: unknown) => { + supabaseState.inserts.push({ table, payload }); + return q; + }); + q.single = vi.fn(() => Promise.resolve(resultForTable(table))); + q.maybeSingle = vi.fn(() => Promise.resolve(resultForTable(table))); + q.then = (resolve: (v: unknown) => unknown, reject?: (e: unknown) => unknown) => + Promise.resolve(resultForTable(table)).then(resolve, reject); + return q; +} + +function mockSupabase() { + return { + from: vi.fn((table: string) => makeQuery(table)), + rpc: vi.fn(() => Promise.resolve(supabaseState.rpc)), + auth: { + getUser: () => + Promise.resolve({ data: { user: { id: "u1" } }, error: null }), + }, + }; +} + +vi.mock("../../lib/supabase", () => ({ + createServerSupabase: vi.fn(() => mockSupabase()), + getUserIdFromRequest: vi.fn(async () => "u1"), +})); + +vi.mock("../../middleware/auth", () => ({ + requireAuth: ( + _req: unknown, + res: { locals: Record<string, unknown> }, + next: () => void, + ) => { + res.locals.userId = "u1"; + res.locals.userEmail = "u1@test.local"; + next(); + }, + requireMfaIfEnrolled: (_req: unknown, _res: unknown, next: () => void) => + next(), +})); + +// Every export of lib/access must be present — other routers (chat, documents, +// downloads, tabular) import from it at app load. +vi.mock("../../lib/access", () => ({ + checkProjectAccess: (...args: unknown[]) => checkProjectAccess(...args), + ensureDocAccess: vi.fn(async () => ({ ok: true, isOwner: true })), + ensureReviewAccess: vi.fn(async () => ({ ok: true, isOwner: true })), + filterAccessibleDocumentIds: vi.fn(async (ids: string[]) => ids), + listAccessibleProjectIds: vi.fn(async () => []), +})); + +// user router imports all four cleanup helpers at module load. +vi.mock("../../lib/userDataCleanup", () => ({ + deleteUserProjects: (...args: unknown[]) => deleteUserProjects(...args), + deleteAllUserChats: vi.fn(async () => {}), + deleteAllUserTabularReviews: vi.fn(async () => {}), + deleteUserAccountData: vi.fn(async () => {}), +})); + +// Version-path enrichment hits the DB in real life; no-op it so the route +// responses are driven purely by the documents/projects table stubs. +vi.mock("../../lib/documentVersions", () => ({ + attachActiveVersionPaths: vi.fn(async () => {}), + attachLatestVersionNumbers: vi.fn(async () => {}), + loadActiveVersion: vi.fn(async () => null), +})); + +import { app } from "../../app"; + +const AUTH = ["Authorization", "Bearer test"] as const; + +describe("projects.routes", () => { + beforeEach(() => { + vi.clearAllMocks(); + resetSupabaseState(); + checkProjectAccess.mockResolvedValue({ + ok: true, + isOwner: true, + project: { id: "p1", user_id: "u1", shared_with: null }, + }); + deleteUserProjects.mockResolvedValue(1); + }); + + // ── GET /projects (overview) ────────────────────────────────────────── + describe("GET /projects", () => { + it("returns the overview rows from the RPC", async () => { + supabaseState.rpc = { + data: [{ id: "p1", name: "Alpha" }], + error: null, + }; + + const res = await request(app).get("/projects").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual([{ id: "p1", name: "Alpha" }]); + }); + + it("returns 500 with detail when the RPC errors", async () => { + supabaseState.rpc = { data: null, error: { message: "boom" } }; + + const res = await request(app).get("/projects").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("boom"); + }); + }); + + // ── POST /projects (create) ─────────────────────────────────────────── + describe("POST /projects", () => { + it("returns 400 when name is missing/blank", async () => { + const res = await request(app) + .post("/projects") + .set(...AUTH) + .send({ name: " " }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("name is required"); + }); + + it("returns 400 when sharing the project with yourself", async () => { + // The authed user's email is u1@test.local; supplying it (in any + // case) must be rejected. + const res = await request(app) + .post("/projects") + .set(...AUTH) + .send({ name: "Beta", shared_with: ["U1@Test.Local"] }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe( + "You cannot share a project with yourself.", + ); + }); + + it("creates the project (201) and normalises shared_with", async () => { + // Sharing requires each recipient to have a mirrored user_profiles + // row (findMissingUserEmails); seed both emails so validation + // passes and the create path proceeds. + supabaseState.tables.user_profiles = { + data: [{ email: "a@x.com" }, { email: "b@x.com" }], + error: null, + }; + supabaseState.tables.projects = { + data: { + id: "p9", + name: "Gamma", + user_id: "u1", + shared_with: ["a@x.com", "b@x.com"], + }, + error: null, + }; + + const res = await request(app) + .post("/projects") + .set(...AUTH) + .send({ + name: " Gamma ", + shared_with: ["A@x.com", "a@x.com", "B@X.com", "", " "], + }); + + expect(res.status).toBe(201); + expect(res.body).toMatchObject({ id: "p9", documents: [] }); + + // The insert payload should be lowercased, deduped, trimmed and + // the name trimmed. + const insert = supabaseState.inserts.find( + (i) => i.table === "projects", + ); + expect(insert?.payload).toMatchObject({ + name: "Gamma", + shared_with: ["a@x.com", "b@x.com"], + }); + }); + + it("returns 400 when a shared_with recipient is not a Mike user", async () => { + // No user_profiles rows seeded → findMissingUserEmails reports the + // recipient as unknown and the create is rejected before insert. + const res = await request(app) + .post("/projects") + .set(...AUTH) + .send({ name: "Gamma", shared_with: ["ghost@x.com"] }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe( + "ghost@x.com does not belong to a Mike user.", + ); + expect( + supabaseState.inserts.find((i) => i.table === "projects"), + ).toBeUndefined(); + }); + + it("returns 500 when the insert errors", async () => { + supabaseState.tables.projects = { + data: null, + error: { message: "insert failed" }, + }; + + const res = await request(app) + .post("/projects") + .set(...AUTH) + .send({ name: "Delta" }); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("insert failed"); + }); + }); + + // ── GET /projects/:projectId (detail, inline access) ────────────────── + describe("GET /projects/:projectId", () => { + it("returns 404 when the project does not exist", async () => { + supabaseState.tables.projects = { data: null, error: null }; + + const res = await request(app).get("/projects/p1").set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + }); + + it("returns 404 when the caller is neither owner nor shared", async () => { + supabaseState.tables.projects = { + data: { + id: "p1", + user_id: "someone-else", + shared_with: ["other@x.com"], + }, + error: null, + }; + + const res = await request(app).get("/projects/p1").set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + }); + + it("grants access to a shared member (is_owner false)", async () => { + supabaseState.tables.projects = { + data: { + id: "p1", + user_id: "someone-else", + shared_with: ["u1@test.local"], + }, + error: null, + }; + supabaseState.tables.documents = { data: [], error: null }; + supabaseState.tables.project_subfolders = { data: [], error: null }; + + const res = await request(app).get("/projects/p1").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toMatchObject({ id: "p1", is_owner: false }); + }); + + it("returns 200 with documents/folders/is_owner when owned", async () => { + supabaseState.tables.projects = { + data: { id: "p1", user_id: "u1", shared_with: null }, + error: null, + }; + supabaseState.tables.documents = { + data: [{ id: "d1", user_id: "u1" }], + error: null, + }; + supabaseState.tables.project_subfolders = { + data: [{ id: "f1" }], + error: null, + }; + + const res = await request(app).get("/projects/p1").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toMatchObject({ + id: "p1", + is_owner: true, + documents: [{ id: "d1" }], + folders: [{ id: "f1" }], + }); + }); + }); + + // ── GET /projects/:projectId/documents (checkProjectAccess guard) ───── + describe("GET /projects/:projectId/documents", () => { + it("returns 404 when checkProjectAccess denies access", async () => { + checkProjectAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .get("/projects/p1/documents") + .set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + expect(checkProjectAccess).toHaveBeenCalledTimes(1); + }); + + it("returns 200 with documents when access is granted", async () => { + supabaseState.tables.documents = { + data: [{ id: "d1" }, { id: "d2" }], + error: null, + }; + + const res = await request(app) + .get("/projects/p1/documents") + .set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual([{ id: "d1" }, { id: "d2" }]); + expect(checkProjectAccess).toHaveBeenCalledTimes(1); + }); + }); + + // ── PATCH /projects/:projectId (sharing normalisation) ──────────────── + describe("PATCH /projects/:projectId", () => { + it("returns 400 when sharing the project with yourself", async () => { + const res = await request(app) + .patch("/projects/p1") + .set(...AUTH) + .send({ shared_with: ["u1@test.local"] }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe( + "You cannot share a project with yourself.", + ); + }); + + it("returns 404 when the update matches no owned project", async () => { + supabaseState.tables.projects = { data: null, error: null }; + + const res = await request(app) + .patch("/projects/p1") + .set(...AUTH) + .send({ name: "Renamed" }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + }); + }); + + // ── DELETE /projects/:projectId ─────────────────────────────────────── + describe("DELETE /projects/:projectId", () => { + it("returns 404 when nothing was deleted", async () => { + deleteUserProjects.mockResolvedValue(0); + + const res = await request(app).delete("/projects/p1").set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + }); + + it("returns 204 when the project is deleted", async () => { + deleteUserProjects.mockResolvedValue(1); + + const res = await request(app).delete("/projects/p1").set(...AUTH); + + expect(res.status).toBe(204); + // Signature is deleteUserProjects(db, userId, [projectId]). + expect(deleteUserProjects).toHaveBeenCalledWith( + expect.anything(), + "u1", + ["p1"], + ); + }); + + it("returns 500 when deletion throws", async () => { + deleteUserProjects.mockRejectedValue(new Error("cascade failed")); + + const res = await request(app).delete("/projects/p1").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("cascade failed"); + }); + }); +}); diff --git a/backend/src/__tests__/integration/stack.supabase.test.ts b/backend/src/__tests__/integration/stack.supabase.test.ts new file mode 100644 index 0000000..b74a051 --- /dev/null +++ b/backend/src/__tests__/integration/stack.supabase.test.ts @@ -0,0 +1,146 @@ +import { createClient, type SupabaseClient } from "@supabase/supabase-js"; +import { afterAll, beforeAll, describe, expect, it } from "vitest"; + +// Stack-level integration test: exercises the REAL Supabase stack (GoTrue auth + +// Postgres RLS) rather than mocks. This is the harness that makes pinning a fixed +// Supabase version set safe — it's what you re-run on every image bump to prove +// the auth↔API contract and the deny-all RLS firewall still hold. It also anchors +// the security model's central claim: RLS denies the user/anon path, and the API +// reaches data only via the service-role key. +// +// Gated: skipped unless a stack is provided (default CI unit run skips it). +// Locally: `supabase start`, then export the printed keys as: +// SUPABASE_TEST_URL, SUPABASE_TEST_SERVICE_ROLE_KEY, SUPABASE_TEST_ANON_KEY +const url = process.env.SUPABASE_TEST_URL; +const serviceKey = process.env.SUPABASE_TEST_SERVICE_ROLE_KEY; +const anonKey = process.env.SUPABASE_TEST_ANON_KEY; +const maybeDescribe = + url && serviceKey && anonKey ? describe : describe.skip; + +// Every public table the app owns (backend/schema.sql + migrations). The +// anon/user path must never return rows from any of these (deny-all); a +// regression that ships a table without RLS — or with a permissive policy — +// trips the leak sweep below. A table missing from an older local stack +// returns an error (no rows), which never counts as a leak. +const PUBLIC_TABLES = [ + "chat_messages", "chats", "courtlistener_citation_index", + "courtlistener_opinion_cluster_index", "document_edits", + "document_versions", "documents", "hidden_workflows", "library_folders", + "project_subfolders", "projects", "tabular_cells", + "tabular_review_chat_messages", "tabular_review_chats", "tabular_reviews", + "user_api_keys", "user_mcp_connector_tools", "user_mcp_connectors", + "user_mcp_oauth_states", "user_mcp_oauth_tokens", + "user_mcp_tool_audit_logs", "user_profiles", + "workflow_open_source_submissions", "workflow_shares", "workflows", +]; + +maybeDescribe("Supabase stack — auth contract + RLS deny-all firewall", () => { + const password = "StackTest1!"; + const emailA = `stack-a-${Date.now()}@test.local`; + const emailB = `stack-b-${Date.now()}@test.local`; + + let admin: SupabaseClient; // service-role: BYPASSRLS, the app's data path + let userA = ""; + let userB = ""; + let tokenA = ""; + let projectId = ""; + + // A client acting as a signed-in end user (anon key + the user's JWT): this is + // the path RLS must fence off. + const asUser = (token: string) => + createClient(url!, anonKey!, { + auth: { persistSession: false, autoRefreshToken: false }, + global: { headers: { Authorization: `Bearer ${token}` } }, + }); + + beforeAll(async () => { + admin = createClient(url!, serviceKey!, { + auth: { persistSession: false, autoRefreshToken: false }, + }); + + const a = await admin.auth.admin.createUser({ + email: emailA, password, email_confirm: true, + }); + const b = await admin.auth.admin.createUser({ + email: emailB, password, email_confirm: true, + }); + if (a.error || !a.data.user) throw a.error ?? new Error("no user A"); + if (b.error || !b.data.user) throw b.error ?? new Error("no user B"); + userA = a.data.user.id; + userB = b.data.user.id; + + // Sign in as A to get a real access token (the token the API middleware + // validates via auth.getUser). + const signIn = await createClient(url!, anonKey!, { + auth: { persistSession: false, autoRefreshToken: false }, + }).auth.signInWithPassword({ email: emailA, password }); + if (signIn.error || !signIn.data.session) { + throw signIn.error ?? new Error("no session for A"); + } + tokenA = signIn.data.session.access_token; + + // Seed one row owned by A via the service role (the app's real write path). + const proj = await admin + .from("projects") + .insert({ user_id: userA, name: "Stack Test Project" }) + .select("id") + .single(); + if (proj.error || !proj.data) throw proj.error ?? new Error("no project"); + projectId = proj.data.id; + }); + + afterAll(async () => { + if (projectId) await admin.from("projects").delete().eq("id", projectId); + if (userA) await admin.auth.admin.deleteUser(userA); + if (userB) await admin.auth.admin.deleteUser(userB); + }); + + it("auth contract: the access token resolves to its user (middleware path)", async () => { + const { data, error } = await admin.auth.getUser(tokenA); + expect(error).toBeNull(); + expect(data.user?.id).toBe(userA); + expect(data.user?.email).toBe(emailA); + }); + + it("RLS: the service role sees seeded rows the owner cannot see via the user path", async () => { + // Service role (app data path) sees the project… + const svc = await admin + .from("projects").select("id").eq("id", projectId); + expect(svc.error).toBeNull(); + expect(svc.data ?? []).toHaveLength(1); + + // …but the owner, going through the user/anon path, sees zero rows — + // deny-all RLS is the firewall; the app must use the service role. + const owner = await asUser(tokenA) + .from("projects").select("id").eq("id", projectId); + expect(owner.data ?? []).toHaveLength(0); + + // And the owner's profile (if any) is equally invisible to the user path. + const prof = await asUser(tokenA) + .from("user_profiles").select("user_id").eq("user_id", userA); + expect(prof.data ?? []).toHaveLength(0); + }); + + it("tenant isolation: user B cannot read user A's project via the user path", async () => { + const signInB = await createClient(url!, anonKey!, { + auth: { persistSession: false, autoRefreshToken: false }, + }).auth.signInWithPassword({ email: emailB, password }); + const tokenB = signInB.data.session!.access_token; + + const cross = await asUser(tokenB) + .from("projects").select("id").eq("id", projectId); + expect(cross.data ?? []).toHaveLength(0); + }); + + it("leak sweep: no public table returns rows to the authenticated user path", async () => { + const client = asUser(tokenA); + const leaks: string[] = []; + for (const table of PUBLIC_TABLES) { + const { data } = await client.from(table).select("*").limit(1); + if ((data ?? []).length > 0) leaks.push(table); + } + // Any table returning rows to a normal user means RLS is missing or a + // policy is permissive — the exact regression this guards against. + expect(leaks).toEqual([]); + }); +}); diff --git a/backend/src/__tests__/integration/tabular.routes.test.ts b/backend/src/__tests__/integration/tabular.routes.test.ts new file mode 100644 index 0000000..c828148 --- /dev/null +++ b/backend/src/__tests__/integration/tabular.routes.test.ts @@ -0,0 +1,713 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import request from "supertest"; + +// --------------------------------------------------------------------------- +// Hoisted mock fns reconfigured per-test. Access helpers + model settings are +// mocked so the tests drive review-access decisions, document-access filtering +// and the missing-API-key guard without touching real Supabase / LLM IO. The +// streaming endpoints (chat/generate) are only exercised up to their GUARDS — +// the SSE loop itself is never reached in these tests. +// --------------------------------------------------------------------------- +const { + ensureReviewAccess, + checkProjectAccess, + filterAccessibleDocumentIds, + getUserModelSettings, + loadActiveVersion, +} = vi.hoisted(() => ({ + ensureReviewAccess: vi.fn(), + checkProjectAccess: vi.fn(), + filterAccessibleDocumentIds: vi.fn(), + getUserModelSettings: vi.fn(), + loadActiveVersion: vi.fn(), +})); + +// --------------------------------------------------------------------------- +// Configurable Supabase stub (mirrors projects.routes.test). Each test seeds +// `supabaseState` in beforeEach; terminal query operations resolve to the +// per-table result, rpc() resolves to a per-call result. Insert payloads are +// recorded so tests can assert on what got persisted. +// --------------------------------------------------------------------------- +type QueryResult = { data: unknown; error: unknown }; + +let supabaseState: { + rpc: QueryResult; + tables: Record<string, QueryResult>; + inserts: { table: string; payload: unknown }[]; +}; + +function resetSupabaseState() { + supabaseState = { + rpc: { data: [], error: null }, + tables: {}, + inserts: [], + }; +} +resetSupabaseState(); + +function resultForTable(table: string): QueryResult { + return supabaseState.tables[table] ?? { data: null, error: null }; +} + +function makeQuery(table: string) { + const q: Record<string, unknown> = {}; + const chain = [ + "select", "update", "delete", "upsert", + "eq", "neq", "in", "is", "or", "not", "lt", "gt", "gte", "lte", + "filter", "order", "limit", "range", "contains", + ]; + for (const m of chain) q[m] = vi.fn(() => q); + q.insert = vi.fn((payload: unknown) => { + supabaseState.inserts.push({ table, payload }); + return q; + }); + q.single = vi.fn(() => Promise.resolve(resultForTable(table))); + q.maybeSingle = vi.fn(() => Promise.resolve(resultForTable(table))); + q.then = (resolve: (v: unknown) => unknown, reject?: (e: unknown) => unknown) => + Promise.resolve(resultForTable(table)).then(resolve, reject); + return q; +} + +function mockSupabase() { + return { + from: vi.fn((table: string) => makeQuery(table)), + rpc: vi.fn(() => Promise.resolve(supabaseState.rpc)), + auth: { + getUser: () => + Promise.resolve({ data: { user: { id: "u1" } }, error: null }), + }, + }; +} + +vi.mock("../../lib/supabase", () => ({ + createServerSupabase: vi.fn(() => mockSupabase()), + getUserIdFromRequest: vi.fn(async () => "u1"), +})); + +vi.mock("../../middleware/auth", () => ({ + requireAuth: ( + _req: unknown, + res: { locals: Record<string, unknown> }, + next: () => void, + ) => { + res.locals.userId = "u1"; + res.locals.userEmail = "u1@test.local"; + next(); + }, + requireMfaIfEnrolled: (_req: unknown, _res: unknown, next: () => void) => + next(), +})); + +vi.mock("../../lib/access", () => ({ + ensureReviewAccess: (...args: unknown[]) => ensureReviewAccess(...args), + checkProjectAccess: (...args: unknown[]) => checkProjectAccess(...args), + filterAccessibleDocumentIds: (...args: unknown[]) => + filterAccessibleDocumentIds(...args), + ensureDocAccess: vi.fn(async () => ({ ok: true, isOwner: true })), + listAccessibleProjectIds: vi.fn(async () => []), +})); + +vi.mock("../../lib/userSettings", () => ({ + getUserModelSettings: (...args: unknown[]) => getUserModelSettings(...args), + getUserApiKeys: vi.fn(async () => ({})), +})); + +// Version-path enrichment + active-version resolution hit the DB in real life; +// no-op them so route responses are driven purely by the table stubs. +vi.mock("../../lib/documentVersions", () => ({ + attachActiveVersionPaths: vi.fn(async () => {}), + attachLatestVersionNumbers: vi.fn(async () => {}), + loadActiveVersion: (...args: unknown[]) => loadActiveVersion(...args), +})); + +import { app } from "../../app"; + +const AUTH = ["Authorization", "Bearer test"] as const; + +describe("tabular.routes", () => { + beforeEach(() => { + vi.clearAllMocks(); + resetSupabaseState(); + // Default: caller is the owner with full access. + ensureReviewAccess.mockResolvedValue({ ok: true, isOwner: true }); + checkProjectAccess.mockResolvedValue({ + ok: true, + isOwner: true, + project: { id: "p1", user_id: "u1", shared_with: null }, + }); + // Default: every requested doc is accessible (identity passthrough). + filterAccessibleDocumentIds.mockImplementation( + async (ids: string[]) => ids, + ); + getUserModelSettings.mockResolvedValue({ + title_model: "claude-haiku-4-5", + tabular_model: "claude-sonnet-4-5", + legal_research_us: false, + api_keys: { claude: "sk-test" }, + }); + loadActiveVersion.mockResolvedValue(null); + }); + + // ── GET /tabular-review (overview) ──────────────────────────────────── + describe("GET /tabular-review", () => { + it("returns the overview rows from the RPC", async () => { + supabaseState.rpc = { + data: [{ id: "r1", title: "Alpha" }], + error: null, + }; + + const res = await request(app).get("/tabular-review").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual([{ id: "r1", title: "Alpha" }]); + }); + + it("returns 500 with detail when the RPC errors", async () => { + supabaseState.rpc = { data: null, error: { message: "boom" } }; + + const res = await request(app).get("/tabular-review").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("boom"); + }); + }); + + // ── POST /tabular-review (create) ───────────────────────────────────── + describe("POST /tabular-review", () => { + it("creates a review (201) and only persists accessible documents", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r9", title: "Gamma", document_ids: ["d1"] }, + error: null, + }; + // d2 is not accessible — it must be filtered out of the insert. + filterAccessibleDocumentIds.mockResolvedValue(["d1"]); + + const res = await request(app) + .post("/tabular-review") + .set(...AUTH) + .send({ + title: "Gamma", + document_ids: ["d1", "d2"], + columns_config: [{ index: 0, name: "Col", prompt: "p" }], + }); + + expect(res.status).toBe(201); + expect(res.body).toMatchObject({ id: "r9" }); + + const reviewInsert = supabaseState.inserts.find( + (i) => i.table === "tabular_reviews", + ); + expect(reviewInsert?.payload).toMatchObject({ + document_ids: ["d1"], + }); + // Cells are created for accessible docs × columns only (1 × 1). + const cellInsert = supabaseState.inserts.find( + (i) => i.table === "tabular_cells", + ); + expect(cellInsert?.payload).toEqual([ + { + review_id: "r9", + document_id: "d1", + column_index: 0, + status: "pending", + }, + ]); + }); + + it("returns 404 when project access is denied", async () => { + checkProjectAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .post("/tabular-review") + .set(...AUTH) + .send({ + project_id: "p-nope", + document_ids: [], + columns_config: [], + }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Project not found"); + }); + + it("returns 500 when the review insert errors", async () => { + supabaseState.tables.tabular_reviews = { + data: null, + error: { message: "insert failed" }, + }; + + const res = await request(app) + .post("/tabular-review") + .set(...AUTH) + .send({ document_ids: [], columns_config: [] }); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("insert failed"); + }); + }); + + // ── GET /tabular-review/:reviewId (detail) ──────────────────────────── + describe("GET /tabular-review/:reviewId", () => { + it("returns 404 when the review does not exist", async () => { + supabaseState.tables.tabular_reviews = { data: null, error: null }; + + const res = await request(app) + .get("/tabular-review/r1") + .set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 404 when review access is denied", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: null }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .get("/tabular-review/r1") + .set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 200 with review/cells/documents + is_owner", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + document_ids: ["d1"], + columns_config: [], + }, + error: null, + }; + supabaseState.tables.tabular_cells = { + data: [ + { + id: "c1", + document_id: "d1", + column_index: 0, + content: null, + status: "pending", + }, + ], + error: null, + }; + supabaseState.tables.documents = { + data: [{ id: "d1", current_version_id: null }], + error: null, + }; + + const res = await request(app) + .get("/tabular-review/r1") + .set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body.review).toMatchObject({ id: "r1", is_owner: true }); + expect(res.body.cells).toHaveLength(1); + expect(res.body.documents).toEqual([ + { id: "d1", current_version_id: null }, + ]); + }); + }); + + // ── PATCH /tabular-review/:reviewId ─────────────────────────────────── + describe("PATCH /tabular-review/:reviewId", () => { + it("returns 400 when project_id is an invalid type", async () => { + const res = await request(app) + .patch("/tabular-review/r1") + .set(...AUTH) + .send({ project_id: 123 }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe( + "project_id must be a non-empty string or null", + ); + }); + + it("returns 400 when sharing the review with yourself", async () => { + const res = await request(app) + .patch("/tabular-review/r1") + .set(...AUTH) + .send({ shared_with: ["U1@Test.Local"] }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe( + "You cannot share a tabular review with yourself.", + ); + }); + + it("returns 404 when the review does not exist", async () => { + supabaseState.tables.tabular_reviews = { data: null, error: null }; + + const res = await request(app) + .patch("/tabular-review/r1") + .set(...AUTH) + .send({ title: "Renamed" }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 403 when a non-owner edits columns_config", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: "p1" }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: true, isOwner: false }); + + const res = await request(app) + .patch("/tabular-review/r1") + .set(...AUTH) + .send({ columns_config: [{ index: 0, name: "X", prompt: "p" }] }); + + expect(res.status).toBe(403); + expect(res.body.detail).toBe("Only the review owner can change columns"); + }); + }); + + // ── DELETE /tabular-review/:reviewId ────────────────────────────────── + describe("DELETE /tabular-review/:reviewId", () => { + it("returns 204 on success", async () => { + supabaseState.tables.tabular_reviews = { data: null, error: null }; + + const res = await request(app) + .delete("/tabular-review/r1") + .set(...AUTH); + + expect(res.status).toBe(204); + }); + + it("returns 500 when the delete errors", async () => { + supabaseState.tables.tabular_reviews = { + data: null, + error: { message: "delete failed" }, + }; + + const res = await request(app) + .delete("/tabular-review/r1") + .set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("delete failed"); + }); + }); + + // ── POST /tabular-review/:reviewId/clear-cells ──────────────────────── + describe("POST /tabular-review/:reviewId/clear-cells", () => { + it("returns 400 when document_ids is missing", async () => { + const res = await request(app) + .post("/tabular-review/r1/clear-cells") + .set(...AUTH) + .send({}); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("document_ids is required"); + }); + + it("returns 404 when review access is denied", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: null }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .post("/tabular-review/r1/clear-cells") + .set(...AUTH) + .send({ document_ids: ["d1"] }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 204 on success", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "u1", project_id: null }, + error: null, + }; + + const res = await request(app) + .post("/tabular-review/r1/clear-cells") + .set(...AUTH) + .send({ document_ids: ["d1"] }); + + expect(res.status).toBe(204); + }); + }); + + // ── POST /tabular-review/:reviewId/regenerate-cell ──────────────────── + describe("POST /tabular-review/:reviewId/regenerate-cell", () => { + it("returns 400 when document_id / column_index are missing", async () => { + const res = await request(app) + .post("/tabular-review/r1/regenerate-cell") + .set(...AUTH) + .send({}); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe( + "document_id and column_index are required", + ); + }); + + it("returns 404 when review access is denied", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: null }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .post("/tabular-review/r1/regenerate-cell") + .set(...AUTH) + .send({ document_id: "d1", column_index: 0 }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 400 when the column is not configured", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + columns_config: [{ index: 5, name: "Other", prompt: "p" }], + }, + error: null, + }; + + const res = await request(app) + .post("/tabular-review/r1/regenerate-cell") + .set(...AUTH) + .send({ document_id: "d1", column_index: 0 }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("Column not found"); + }); + + it("returns 404 when the document is not accessible", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + columns_config: [{ index: 0, name: "Col", prompt: "p" }], + }, + error: null, + }; + filterAccessibleDocumentIds.mockResolvedValue([]); + + const res = await request(app) + .post("/tabular-review/r1/regenerate-cell") + .set(...AUTH) + .send({ document_id: "d-forbidden", column_index: 0 }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Document not found"); + }); + + it("returns 422 with missing_api_key when the model key is absent", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + columns_config: [{ index: 0, name: "Col", prompt: "p" }], + }, + error: null, + }; + supabaseState.tables.documents = { + data: { id: "d1", current_version_id: null }, + error: null, + }; + getUserModelSettings.mockResolvedValue({ + title_model: "claude-haiku-4-5", + tabular_model: "claude-sonnet-4-5", + legal_research_us: false, + api_keys: {}, + }); + + const res = await request(app) + .post("/tabular-review/r1/regenerate-cell") + .set(...AUTH) + .send({ document_id: "d1", column_index: 0 }); + + expect(res.status).toBe(422); + expect(res.body.code).toBe("missing_api_key"); + expect(res.body.provider).toBe("claude"); + }); + }); + + // ── POST /tabular-review/:reviewId/generate (streaming GUARDS only) ─── + describe("POST /tabular-review/:reviewId/generate", () => { + it("returns 404 when the review does not exist", async () => { + supabaseState.tables.tabular_reviews = { data: null, error: null }; + + const res = await request(app) + .post("/tabular-review/r1/generate") + .set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 404 when review access is denied", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: null }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .post("/tabular-review/r1/generate") + .set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 400 when no columns are configured", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + columns_config: [], + }, + error: null, + }; + + const res = await request(app) + .post("/tabular-review/r1/generate") + .set(...AUTH); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("No columns configured"); + }); + + it("returns 422 missing_api_key before streaming when the key is absent", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + columns_config: [{ index: 0, name: "Col", prompt: "p" }], + }, + error: null, + }; + supabaseState.tables.tabular_cells = { data: [], error: null }; + getUserModelSettings.mockResolvedValue({ + title_model: "claude-haiku-4-5", + tabular_model: "claude-sonnet-4-5", + legal_research_us: false, + api_keys: {}, + }); + + const res = await request(app) + .post("/tabular-review/r1/generate") + .set(...AUTH); + + expect(res.status).toBe(422); + expect(res.body.code).toBe("missing_api_key"); + }); + }); + + // ── POST /tabular-review/:reviewId/chat (streaming GUARDS only) ─────── + describe("POST /tabular-review/:reviewId/chat", () => { + it("returns 400 when no user message is present", async () => { + const res = await request(app) + .post("/tabular-review/r1/chat") + .set(...AUTH) + .send({ messages: [{ role: "assistant", content: "hi" }] }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("messages must include a user message"); + }); + + it("returns 404 when review access is denied", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: null }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .post("/tabular-review/r1/chat") + .set(...AUTH) + .send({ messages: [{ role: "user", content: "hello" }] }); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns 422 missing_api_key before streaming when the key is absent", async () => { + supabaseState.tables.tabular_reviews = { + data: { + id: "r1", + user_id: "u1", + project_id: null, + columns_config: [], + }, + error: null, + }; + supabaseState.tables.tabular_cells = { data: [], error: null }; + getUserModelSettings.mockResolvedValue({ + title_model: "claude-haiku-4-5", + tabular_model: "claude-sonnet-4-5", + legal_research_us: false, + api_keys: {}, + }); + + const res = await request(app) + .post("/tabular-review/r1/chat") + .set(...AUTH) + .send({ messages: [{ role: "user", content: "hello" }] }); + + expect(res.status).toBe(422); + expect(res.body.code).toBe("missing_api_key"); + }); + }); + + // ── GET /tabular-review/:reviewId/chats ─────────────────────────────── + describe("GET /tabular-review/:reviewId/chats", () => { + it("returns 404 when review access is denied", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "other", project_id: null }, + error: null, + }; + ensureReviewAccess.mockResolvedValue({ ok: false }); + + const res = await request(app) + .get("/tabular-review/r1/chats") + .set(...AUTH); + + expect(res.status).toBe(404); + expect(res.body.detail).toBe("Review not found"); + }); + + it("returns the chat list when access is granted", async () => { + supabaseState.tables.tabular_reviews = { + data: { id: "r1", user_id: "u1", project_id: null }, + error: null, + }; + supabaseState.tables.tabular_review_chats = { + data: [{ id: "chat-1", title: "T", user_id: "u1" }], + error: null, + }; + + const res = await request(app) + .get("/tabular-review/r1/chats") + .set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual([ + { id: "chat-1", title: "T", user_id: "u1" }, + ]); + }); + }); +}); diff --git a/backend/src/__tests__/integration/user.routes.test.ts b/backend/src/__tests__/integration/user.routes.test.ts new file mode 100644 index 0000000..d47b5bb --- /dev/null +++ b/backend/src/__tests__/integration/user.routes.test.ts @@ -0,0 +1,588 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import request from "supertest"; + +// --------------------------------------------------------------------------- +// Hoisted mock fns we reconfigure per-test. These cover the three security +// surfaces this suite baselines: +// - the MFA route guard (requireMfaIfEnrolled) +// - the API-key crypto boundary (userApiKeys) +// - the destructive data export / deletion helpers (userDataExport / +// userDataCleanup) +// Each is a vi.fn so we can both reconfigure behaviour and assert call args. +// --------------------------------------------------------------------------- +const { + requireMfaIfEnrolled, + getUserApiKeyStatus, + saveUserApiKey, + hasEnvApiKey, + normalizeApiKeyProvider, + deleteAllUserChats, + deleteAllUserTabularReviews, + deleteUserAccountData, + deleteUserProjects, + buildUserAccountExport, + buildUserChatsExport, + buildUserTabularReviewsExport, +} = vi.hoisted(() => ({ + requireMfaIfEnrolled: vi.fn(), + getUserApiKeyStatus: vi.fn(), + saveUserApiKey: vi.fn(), + hasEnvApiKey: vi.fn(), + normalizeApiKeyProvider: vi.fn(), + deleteAllUserChats: vi.fn(), + deleteAllUserTabularReviews: vi.fn(), + deleteUserAccountData: vi.fn(), + deleteUserProjects: vi.fn(), + buildUserAccountExport: vi.fn(), + buildUserChatsExport: vi.fn(), + buildUserTabularReviewsExport: vi.fn(), +})); + +// --------------------------------------------------------------------------- +// Configurable Supabase stub. The only route in this suite that reaches the +// DB directly is GET /user/profile (via loadProfile → selectProfile). Tests +// seed `supabaseState.tables.user_profiles`; terminal query ops resolve to the +// per-table result and auth.admin methods are stubbed where routes call them. +// --------------------------------------------------------------------------- +type QueryResult = { data: unknown; error: unknown }; + +let supabaseState: { + tables: Record<string, QueryResult>; + adminGetUserById: QueryResult; + adminDeleteUser: { error: unknown }; +}; + +function resetSupabaseState() { + supabaseState = { + tables: {}, + adminGetUserById: { + data: { user: { id: "u1", factors: [] } }, + error: null, + }, + adminDeleteUser: { error: null }, + }; +} +resetSupabaseState(); + +function resultForTable(table: string): QueryResult { + return supabaseState.tables[table] ?? { data: null, error: null }; +} + +function makeQuery(table: string) { + const q: Record<string, unknown> = {}; + const chain = [ + "select", "update", "delete", "upsert", "insert", + "eq", "neq", "in", "is", "or", "not", "lt", "gt", "gte", "lte", + "filter", "order", "limit", "range", "contains", + ]; + for (const m of chain) q[m] = vi.fn(() => q); + q.single = vi.fn(() => Promise.resolve(resultForTable(table))); + q.maybeSingle = vi.fn(() => Promise.resolve(resultForTable(table))); + q.then = ( + resolve: (v: unknown) => unknown, + reject?: (e: unknown) => unknown, + ) => Promise.resolve(resultForTable(table)).then(resolve, reject); + return q; +} + +function mockSupabase() { + return { + from: vi.fn((table: string) => makeQuery(table)), + rpc: vi.fn(() => Promise.resolve({ data: null, error: null })), + auth: { + getUser: () => + Promise.resolve({ data: { user: { id: "u1" } }, error: null }), + admin: { + getUserById: vi.fn(() => + Promise.resolve(supabaseState.adminGetUserById), + ), + deleteUser: vi.fn(() => + Promise.resolve(supabaseState.adminDeleteUser), + ), + }, + }, + }; +} + +vi.mock("../../lib/supabase", () => ({ + createServerSupabase: vi.fn(() => mockSupabase()), + getUserIdFromRequest: vi.fn(async () => "u1"), +})); + +// requireAuth always authenticates u1. requireMfaIfEnrolled is a reconfigurable +// guard so we can drive both the satisfied (next()) and rejected +// (403 mfa_verification_required) paths. +vi.mock("../../middleware/auth", () => ({ + requireAuth: ( + _req: unknown, + res: { locals: Record<string, unknown> }, + next: () => void, + ) => { + res.locals.userId = "u1"; + res.locals.userEmail = "u1@test.local"; + res.locals.token = "test-token"; + next(); + }, + requireMfaIfEnrolled: (req: unknown, res: unknown, next: () => void) => + requireMfaIfEnrolled(req, res, next), +})); + +// API-key crypto boundary: the route must funnel writes through saveUserApiKey +// (which encrypts) and never echo plaintext — getUserApiKeyStatus returns +// presence-only booleans. getUserApiKeys must be exported too — lib/userSettings +// imports it at module load. +vi.mock("../../lib/userApiKeys", () => ({ + getUserApiKeyStatus: (...args: unknown[]) => getUserApiKeyStatus(...args), + saveUserApiKey: (...args: unknown[]) => saveUserApiKey(...args), + hasEnvApiKey: (...args: unknown[]) => hasEnvApiKey(...args), + normalizeApiKeyProvider: (...args: unknown[]) => + normalizeApiKeyProvider(...args), + getUserApiKeys: vi.fn(async () => ({})), +})); + +vi.mock("../../lib/userDataCleanup", () => ({ + deleteAllUserChats: (...args: unknown[]) => deleteAllUserChats(...args), + deleteAllUserTabularReviews: (...args: unknown[]) => + deleteAllUserTabularReviews(...args), + deleteUserAccountData: (...args: unknown[]) => + deleteUserAccountData(...args), + deleteUserProjects: (...args: unknown[]) => deleteUserProjects(...args), +})); + +vi.mock("../../lib/userDataExport", () => ({ + buildUserAccountExport: (...args: unknown[]) => + buildUserAccountExport(...args), + buildUserChatsExport: (...args: unknown[]) => buildUserChatsExport(...args), + buildUserTabularReviewsExport: (...args: unknown[]) => + buildUserTabularReviewsExport(...args), + userExportFilename: (kind: string, userId: string) => + `mike-${kind}-export-${userId.slice(0, 8)}.json`, +})); + +import { app } from "../../app"; + +const AUTH = ["Authorization", "Bearer test"] as const; + +// A complete user_profiles row with credits_reset_date in the future so the +// monthly-reset branch in loadProfile is not triggered. +function profileRow(overrides: Record<string, unknown> = {}) { + return { + display_name: "Ada", + organisation: "Acme", + message_credits_used: 3, + credits_reset_date: "2999-01-01T00:00:00.000Z", + tier: "Pro", + title_model: null, + tabular_model: "gemini-3-flash-preview", + mfa_on_login: false, + legal_research_us: true, + ...overrides, + }; +} + +const STATUS = { claude: true, openai: false, gemini: false, sources: {} }; + +// The exact 403 body the web client's MFA gate consumes (mirrors the real +// requireMfaIfEnrolled). Used by tests that simulate an unsatisfied factor. +function rejectMfa(_req: unknown, res: any) { + res.status(403).json({ + code: "mfa_verification_required", + detail: "MFA verification required", + }); +} + +describe("user.routes", () => { + beforeEach(() => { + vi.clearAllMocks(); + resetSupabaseState(); + // Default: MFA satisfied (guard passes through). + requireMfaIfEnrolled.mockImplementation( + (_req: unknown, _res: unknown, next: () => void) => next(), + ); + getUserApiKeyStatus.mockResolvedValue(STATUS); + saveUserApiKey.mockResolvedValue(undefined); + hasEnvApiKey.mockReturnValue(false); + normalizeApiKeyProvider.mockImplementation((v: string) => + ["claude", "openai", "gemini"].includes(v) ? v : null, + ); + deleteAllUserChats.mockResolvedValue(undefined); + deleteAllUserTabularReviews.mockResolvedValue(undefined); + deleteUserAccountData.mockResolvedValue(undefined); + deleteUserProjects.mockResolvedValue(undefined); + buildUserAccountExport.mockResolvedValue({ account: "data" }); + buildUserChatsExport.mockResolvedValue({ chats: "data" }); + buildUserTabularReviewsExport.mockResolvedValue({ reviews: "data" }); + }); + + // ── GET /user/profile (MFA bootstrap path) ──────────────────────────── + describe("GET /user/profile", () => { + it("returns the serialized profile plus apiKeyStatus", async () => { + supabaseState.tables.user_profiles = { + data: profileRow(), + error: null, + }; + + const res = await request(app).get("/user/profile").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toMatchObject({ + displayName: "Ada", + organisation: "Acme", + messageCreditsUsed: 3, + tier: "Pro", + legalResearchUs: true, + mfaOnLogin: false, + apiKeyStatus: STATUS, + }); + // Presence-only key status — never plaintext. + expect(JSON.stringify(res.body)).not.toContain("sk-"); + }); + + it("is NOT guarded by requireMfaIfEnrolled (bootstrap route)", async () => { + // Even if the MFA factor were unsatisfied, profile must remain + // reachable so the client can render the verification gate. + requireMfaIfEnrolled.mockImplementation(rejectMfa); + supabaseState.tables.user_profiles = { + data: profileRow(), + error: null, + }; + + const res = await request(app).get("/user/profile").set(...AUTH); + + expect(res.status).toBe(200); + expect(requireMfaIfEnrolled).not.toHaveBeenCalled(); + }); + + it("returns 500 with detail when the profile load errors", async () => { + supabaseState.tables.user_profiles = { + data: null, + error: { message: "db down" }, + }; + + const res = await request(app).get("/user/profile").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("db down"); + }); + }); + + // ── POST /user/profile (bootstrap upsert) ───────────────────────────── + describe("POST /user/profile", () => { + it("ensures the profile row and returns ok", async () => { + const res = await request(app).post("/user/profile").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual({ ok: true }); + expect(requireMfaIfEnrolled).not.toHaveBeenCalled(); + }); + }); + + // ── GET /user/api-keys (presence without plaintext) ─────────────────── + describe("GET /user/api-keys", () => { + it("returns the boolean key-status map", async () => { + const res = await request(app).get("/user/api-keys").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual(STATUS); + expect(getUserApiKeyStatus).toHaveBeenCalledWith( + "u1", + expect.anything(), + ); + }); + }); + + // ── PUT /user/api-keys/:provider (crypto + MFA guard) ───────────────── + describe("PUT /user/api-keys/:provider", () => { + it("stores the key via the encryption helper and returns status", async () => { + const res = await request(app) + .put("/user/api-keys/claude") + .set(...AUTH) + .send({ api_key: "sk-secret-value" }); + + expect(res.status).toBe(200); + expect(res.body).toEqual(STATUS); + // The plaintext key must go through saveUserApiKey (the encryption + // boundary), keyed by provider + value, never persisted by the route. + expect(saveUserApiKey).toHaveBeenCalledWith( + "u1", + "claude", + "sk-secret-value", + expect.anything(), + ); + }); + + it("deletes the key when api_key is omitted (null value)", async () => { + const res = await request(app) + .put("/user/api-keys/openai") + .set(...AUTH) + .send({}); + + expect(res.status).toBe(200); + expect(saveUserApiKey).toHaveBeenCalledWith( + "u1", + "openai", + null, + expect.anything(), + ); + }); + + it("returns 400 for an unsupported provider", async () => { + const res = await request(app) + .put("/user/api-keys/bogus") + .set(...AUTH) + .send({ api_key: "x" }); + + expect(res.status).toBe(400); + expect(res.body.detail).toBe("Unsupported provider"); + expect(saveUserApiKey).not.toHaveBeenCalled(); + }); + + it("returns 409 when the provider is configured by the server env", async () => { + hasEnvApiKey.mockReturnValue(true); + + const res = await request(app) + .put("/user/api-keys/claude") + .set(...AUTH) + .send({ api_key: "sk-x" }); + + expect(res.status).toBe(409); + expect(saveUserApiKey).not.toHaveBeenCalled(); + }); + + it("returns 500 when saving the key throws", async () => { + saveUserApiKey.mockRejectedValue(new Error("kms unavailable")); + + const res = await request(app) + .put("/user/api-keys/claude") + .set(...AUTH) + .send({ api_key: "sk-x" }); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("kms unavailable"); + }); + + it("is rejected with 403 mfa_verification_required when MFA is unsatisfied", async () => { + requireMfaIfEnrolled.mockImplementation(rejectMfa); + + const res = await request(app) + .put("/user/api-keys/claude") + .set(...AUTH) + .send({ api_key: "sk-x" }); + + expect(res.status).toBe(403); + expect(res.body).toEqual({ + code: "mfa_verification_required", + detail: "MFA verification required", + }); + // Guarded: the crypto path is never reached. + expect(saveUserApiKey).not.toHaveBeenCalled(); + }); + }); + + // ── Data export endpoints (MFA-guarded, attachment headers) ─────────── + describe("data export endpoints", () => { + it("GET /user/export returns the account export as a JSON attachment", async () => { + const res = await request(app).get("/user/export").set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual({ account: "data" }); + expect(res.headers["content-type"]).toContain("application/json"); + expect(res.headers["content-disposition"]).toContain("attachment"); + expect(res.headers["content-disposition"]).toContain( + "mike-account-export-u1.json", + ); + expect(buildUserAccountExport).toHaveBeenCalledWith( + expect.anything(), + "u1", + "u1@test.local", + ); + }); + + it("GET /user/chats/export returns the chats export", async () => { + const res = await request(app) + .get("/user/chats/export") + .set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual({ chats: "data" }); + expect(res.headers["content-disposition"]).toContain( + "mike-chats-export-u1.json", + ); + expect(buildUserChatsExport).toHaveBeenCalledTimes(1); + }); + + it("GET /user/tabular-reviews/export returns the reviews export", async () => { + const res = await request(app) + .get("/user/tabular-reviews/export") + .set(...AUTH); + + expect(res.status).toBe(200); + expect(res.body).toEqual({ reviews: "data" }); + expect(res.headers["content-disposition"]).toContain( + "mike-tabular-reviews-export-u1.json", + ); + expect(buildUserTabularReviewsExport).toHaveBeenCalledTimes(1); + }); + + it("GET /user/export returns 500 when the builder throws", async () => { + buildUserAccountExport.mockRejectedValue(new Error("export boom")); + + const res = await request(app).get("/user/export").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("export boom"); + }); + + it("GET /user/export is rejected when MFA is unsatisfied", async () => { + requireMfaIfEnrolled.mockImplementation(rejectMfa); + + const res = await request(app).get("/user/export").set(...AUTH); + + expect(res.status).toBe(403); + expect(res.body.code).toBe("mfa_verification_required"); + expect(buildUserAccountExport).not.toHaveBeenCalled(); + }); + }); + + // ── Data deletion endpoints (MFA-guarded, cleanup helpers) ──────────── + describe("data deletion endpoints", () => { + it("DELETE /user/chats invokes deleteAllUserChats and returns 204", async () => { + const res = await request(app).delete("/user/chats").set(...AUTH); + + expect(res.status).toBe(204); + expect(deleteAllUserChats).toHaveBeenCalledWith( + expect.anything(), + "u1", + ); + }); + + it("DELETE /user/projects invokes deleteUserProjects and returns 204", async () => { + const res = await request(app) + .delete("/user/projects") + .set(...AUTH); + + expect(res.status).toBe(204); + expect(deleteUserProjects).toHaveBeenCalledWith( + expect.anything(), + "u1", + ); + }); + + it("DELETE /user/tabular-reviews invokes the cleanup helper and returns 204", async () => { + const res = await request(app) + .delete("/user/tabular-reviews") + .set(...AUTH); + + expect(res.status).toBe(204); + expect(deleteAllUserTabularReviews).toHaveBeenCalledWith( + expect.anything(), + "u1", + ); + }); + + it("DELETE /user/account purges data then deletes the auth user (204)", async () => { + const res = await request(app).delete("/user/account").set(...AUTH); + + expect(res.status).toBe(204); + // Account purge runs the cleanup helper with id + email. + expect(deleteUserAccountData).toHaveBeenCalledWith( + expect.anything(), + "u1", + "u1@test.local", + ); + }); + + it("DELETE /user/account returns 500 when the auth-user delete errors", async () => { + supabaseState.adminDeleteUser = { error: { message: "auth boom" } }; + + const res = await request(app).delete("/user/account").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("auth boom"); + }); + + it("DELETE /user/chats returns 500 when cleanup throws", async () => { + deleteAllUserChats.mockRejectedValue(new Error("cascade failed")); + + const res = await request(app).delete("/user/chats").set(...AUTH); + + expect(res.status).toBe(500); + expect(res.body.detail).toBe("cascade failed"); + }); + + it("DELETE /user/account is rejected when MFA is unsatisfied (no cleanup)", async () => { + requireMfaIfEnrolled.mockImplementation(rejectMfa); + + const res = await request(app).delete("/user/account").set(...AUTH); + + expect(res.status).toBe(403); + expect(res.body.code).toBe("mfa_verification_required"); + expect(deleteUserAccountData).not.toHaveBeenCalled(); + }); + }); + + // ── PATCH /user/security/mfa-login (factor-gated, MFA-guarded) ──────── + describe("PATCH /user/security/mfa-login", () => { + it("returns 400 when enabling without a verified TOTP factor", async () => { + supabaseState.adminGetUserById = { + data: { user: { id: "u1", factors: [] } }, + error: null, + }; + + const res = await request(app) + .patch("/user/security/mfa-login") + .set(...AUTH) + .send({ enabled: true }); + + expect(res.status).toBe(400); + expect(res.body.detail).toContain("authenticator app"); + }); + + it("enables MFA-on-login when a verified TOTP factor exists", async () => { + supabaseState.adminGetUserById = { + data: { + user: { + id: "u1", + factors: [ + { factor_type: "totp", status: "verified" }, + ], + }, + }, + error: null, + }; + supabaseState.tables.user_profiles = { + data: profileRow({ mfa_on_login: true }), + error: null, + }; + + const res = await request(app) + .patch("/user/security/mfa-login") + .set(...AUTH) + .send({ enabled: true }); + + expect(res.status).toBe(200); + expect(res.body).toMatchObject({ mfaOnLogin: true }); + }); + + it("returns 400 on a non-boolean enabled field", async () => { + const res = await request(app) + .patch("/user/security/mfa-login") + .set(...AUTH) + .send({ enabled: "yes" }); + + expect(res.status).toBe(400); + }); + + it("is rejected with 403 when MFA is unsatisfied", async () => { + requireMfaIfEnrolled.mockImplementation(rejectMfa); + + const res = await request(app) + .patch("/user/security/mfa-login") + .set(...AUTH) + .send({ enabled: false }); + + expect(res.status).toBe(403); + expect(res.body.code).toBe("mfa_verification_required"); + }); + }); +}); diff --git a/backend/src/app.ts b/backend/src/app.ts new file mode 100644 index 0000000..19cb5c3 --- /dev/null +++ b/backend/src/app.ts @@ -0,0 +1,161 @@ +import "dotenv/config"; +import express from "express"; +import cors from "cors"; +import helmet from "helmet"; +import rateLimit from "express-rate-limit"; +import { chatRouter } from "./routes/chat"; +import { projectsRouter } from "./routes/projects"; +import { projectChatRouter } from "./routes/projectChat"; +import { documentsRouter } from "./routes/documents"; +import { libraryRouter } from "./routes/library"; +import { tabularRouter } from "./routes/tabular"; +import { workflowsRouter } from "./routes/workflows"; +import { userRouter } from "./routes/user"; +import { downloadsRouter } from "./routes/downloads"; +import { caseLawRouter } from "./routes/caseLaw"; + +export const app = express(); +const isProduction = process.env.NODE_ENV === "production"; + +function envInt(name: string, fallback: number): number { + const raw = process.env[name]; + if (!raw) return fallback; + const parsed = Number.parseInt(raw, 10); + return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback; +} + +function minutes(value: number): number { + return value * 60 * 1000; +} + +function hours(value: number): number { + return minutes(value * 60); +} + +function makeLimiter(options: { + windowMs: number; + max: number; + message?: string; +}) { + return rateLimit({ + windowMs: options.windowMs, + max: options.max, + standardHeaders: true, + legacyHeaders: false, + skip: (req) => req.method === "OPTIONS", + message: { + detail: + options.message ?? "Too many requests. Please try again later.", + }, + }); +} + +const generalLimiter = makeLimiter({ + windowMs: minutes(envInt("RATE_LIMIT_GENERAL_WINDOW_MINUTES", 15)), + max: envInt("RATE_LIMIT_GENERAL_MAX", 300), +}); + +const chatLimiter = makeLimiter({ + windowMs: minutes(envInt("RATE_LIMIT_CHAT_WINDOW_MINUTES", 15)), + max: envInt("RATE_LIMIT_CHAT_MAX", 30), + message: "Too many chat requests. Please try again later.", +}); + +const chatCreateLimiter = makeLimiter({ + windowMs: minutes(envInt("RATE_LIMIT_CHAT_CREATE_WINDOW_MINUTES", 15)), + max: envInt("RATE_LIMIT_CHAT_CREATE_MAX", 60), +}); + +const uploadLimiter = makeLimiter({ + windowMs: hours(envInt("RATE_LIMIT_UPLOAD_WINDOW_HOURS", 1)), + max: envInt("RATE_LIMIT_UPLOAD_MAX", 50), + message: "Too many upload requests. Please try again later.", +}); + +const exportLimiter = makeLimiter({ + windowMs: hours(envInt("RATE_LIMIT_EXPORT_WINDOW_HOURS", 1)), + max: envInt("RATE_LIMIT_EXPORT_MAX", 10), + message: "Too many export requests. Please try again later.", +}); + +const dataDeleteLimiter = makeLimiter({ + windowMs: hours(envInt("RATE_LIMIT_DATA_DELETE_WINDOW_HOURS", 1)), + max: envInt("RATE_LIMIT_DATA_DELETE_MAX", 20), + message: "Too many data deletion requests. Please try again later.", +}); + +function jsonLimitForPath(path: string): string { + return "50mb"; +} + +app.disable("x-powered-by"); +app.set("trust proxy", envInt("TRUST_PROXY_HOPS", 1)); + +app.use( + helmet({ + contentSecurityPolicy: { + directives: { + defaultSrc: ["'none'"], + baseUri: ["'none'"], + frameAncestors: ["'none'"], + }, + }, + crossOriginEmbedderPolicy: false, + hsts: isProduction + ? { + maxAge: 15552000, + includeSubDomains: true, + } + : false, + referrerPolicy: { policy: "no-referrer" }, + }), +); + +app.use( + cors({ + origin: process.env.FRONTEND_URL ?? "http://localhost:3000", + credentials: true, + }), +); + +app.use(generalLimiter); + +app.post("/chat", chatLimiter); +app.post("/projects/:projectId/chat", chatLimiter); +app.post("/tabular-review/:reviewId/chat", chatLimiter); +app.post("/tabular-review/:reviewId/generate", chatLimiter); +app.post("/chat/create", chatCreateLimiter); +app.post("/chat/:chatId/generate-title", chatCreateLimiter); +app.post("/single-documents", uploadLimiter); +app.post("/library/:kind/documents", uploadLimiter); +app.post("/single-documents/:documentId/versions", uploadLimiter); +app.put( + "/single-documents/:documentId/versions/:versionId/file", + uploadLimiter, +); +app.post("/projects/:projectId/documents", uploadLimiter); +app.get("/user/export", exportLimiter); +app.get("/user/chats/export", exportLimiter); +app.get("/user/tabular-reviews/export", exportLimiter); +app.delete("/user/account", dataDeleteLimiter); +app.delete("/user/chats", dataDeleteLimiter); +app.delete("/user/projects", dataDeleteLimiter); +app.delete("/user/tabular-reviews", dataDeleteLimiter); + +app.use((req, res, next) => + express.json({ limit: jsonLimitForPath(req.path) })(req, res, next), +); + +app.use("/chat", chatRouter); +app.use("/projects", projectsRouter); +app.use("/projects/:projectId/chat", projectChatRouter); +app.use("/single-documents", documentsRouter); +app.use("/library", libraryRouter); +app.use("/tabular-review", tabularRouter); +app.use("/workflows", workflowsRouter); +app.use("/user", userRouter); +app.use("/users", userRouter); +app.use("/download", downloadsRouter); +app.use("/case-law", caseLawRouter); + +app.get("/health", (_req, res) => res.json({ ok: true })); diff --git a/backend/src/index.ts b/backend/src/index.ts index b8d36cf..ddf28c7 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -1,165 +1,6 @@ -import "dotenv/config"; -import express from "express"; -import cors from "cors"; -import helmet from "helmet"; -import rateLimit from "express-rate-limit"; -import { chatRouter } from "./routes/chat"; -import { projectsRouter } from "./routes/projects"; -import { projectChatRouter } from "./routes/projectChat"; -import { documentsRouter } from "./routes/documents"; -import { libraryRouter } from "./routes/library"; -import { tabularRouter } from "./routes/tabular"; -import { workflowsRouter } from "./routes/workflows"; -import { userRouter } from "./routes/user"; -import { downloadsRouter } from "./routes/downloads"; -import { caseLawRouter } from "./routes/caseLaw"; +import { app } from "./app"; -const app = express(); const PORT = process.env.PORT ?? 3001; -const isProduction = process.env.NODE_ENV === "production"; - -function envInt(name: string, fallback: number): number { - const raw = process.env[name]; - if (!raw) return fallback; - const parsed = Number.parseInt(raw, 10); - return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback; -} - -function minutes(value: number): number { - return value * 60 * 1000; -} - -function hours(value: number): number { - return minutes(value * 60); -} - -function makeLimiter(options: { - windowMs: number; - max: number; - message?: string; -}) { - return rateLimit({ - windowMs: options.windowMs, - max: options.max, - standardHeaders: true, - legacyHeaders: false, - skip: (req) => req.method === "OPTIONS", - message: { - detail: - options.message ?? "Too many requests. Please try again later.", - }, - }); -} - -const generalLimiter = makeLimiter({ - windowMs: minutes(envInt("RATE_LIMIT_GENERAL_WINDOW_MINUTES", 15)), - max: envInt("RATE_LIMIT_GENERAL_MAX", 300), -}); - -const chatLimiter = makeLimiter({ - windowMs: minutes(envInt("RATE_LIMIT_CHAT_WINDOW_MINUTES", 15)), - max: envInt("RATE_LIMIT_CHAT_MAX", 30), - message: "Too many chat requests. Please try again later.", -}); - -const chatCreateLimiter = makeLimiter({ - windowMs: minutes(envInt("RATE_LIMIT_CHAT_CREATE_WINDOW_MINUTES", 15)), - max: envInt("RATE_LIMIT_CHAT_CREATE_MAX", 60), -}); - -const uploadLimiter = makeLimiter({ - windowMs: hours(envInt("RATE_LIMIT_UPLOAD_WINDOW_HOURS", 1)), - max: envInt("RATE_LIMIT_UPLOAD_MAX", 50), - message: "Too many upload requests. Please try again later.", -}); - -const exportLimiter = makeLimiter({ - windowMs: hours(envInt("RATE_LIMIT_EXPORT_WINDOW_HOURS", 1)), - max: envInt("RATE_LIMIT_EXPORT_MAX", 10), - message: "Too many export requests. Please try again later.", -}); - -const dataDeleteLimiter = makeLimiter({ - windowMs: hours(envInt("RATE_LIMIT_DATA_DELETE_WINDOW_HOURS", 1)), - max: envInt("RATE_LIMIT_DATA_DELETE_MAX", 20), - message: "Too many data deletion requests. Please try again later.", -}); - -function jsonLimitForPath(path: string): string { - return "50mb"; -} - -app.disable("x-powered-by"); -app.set("trust proxy", envInt("TRUST_PROXY_HOPS", 1)); - -app.use( - helmet({ - contentSecurityPolicy: { - directives: { - defaultSrc: ["'none'"], - baseUri: ["'none'"], - frameAncestors: ["'none'"], - }, - }, - crossOriginEmbedderPolicy: false, - hsts: isProduction - ? { - maxAge: 15552000, - includeSubDomains: true, - } - : false, - referrerPolicy: { policy: "no-referrer" }, - }), -); - -app.use( - cors({ - origin: process.env.FRONTEND_URL ?? "http://localhost:3000", - credentials: true, - }), -); - -app.use(generalLimiter); - -app.post("/chat", chatLimiter); -app.post("/projects/:projectId/chat", chatLimiter); -app.post("/tabular-review/:reviewId/chat", chatLimiter); -app.post("/tabular-review/:reviewId/generate", chatLimiter); -app.post("/chat/create", chatCreateLimiter); -app.post("/chat/:chatId/generate-title", chatCreateLimiter); -app.post("/single-documents", uploadLimiter); -app.post("/library/:kind/documents", uploadLimiter); -app.post("/single-documents/:documentId/versions", uploadLimiter); -app.put( - "/single-documents/:documentId/versions/:versionId/file", - uploadLimiter, -); -app.post("/projects/:projectId/documents", uploadLimiter); -app.get("/user/export", exportLimiter); -app.get("/user/chats/export", exportLimiter); -app.get("/user/tabular-reviews/export", exportLimiter); -app.delete("/user/account", dataDeleteLimiter); -app.delete("/user/chats", dataDeleteLimiter); -app.delete("/user/projects", dataDeleteLimiter); -app.delete("/user/tabular-reviews", dataDeleteLimiter); - -app.use((req, res, next) => - express.json({ limit: jsonLimitForPath(req.path) })(req, res, next), -); - -app.use("/chat", chatRouter); -app.use("/projects", projectsRouter); -app.use("/projects/:projectId/chat", projectChatRouter); -app.use("/single-documents", documentsRouter); -app.use("/library", libraryRouter); -app.use("/tabular-review", tabularRouter); -app.use("/workflows", workflowsRouter); -app.use("/user", userRouter); -app.use("/users", userRouter); -app.use("/download", downloadsRouter); -app.use("/case-law", caseLawRouter); - -app.get("/health", (_req, res) => res.json({ ok: true })); app.listen(PORT, () => { console.log(`Mike backend running on port ${PORT}`); From 0740f656e64bada9320c40918184ab2371a6853b Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 11:17:24 -0700 Subject: [PATCH 15/21] fix: burn down frontend eslint errors; make CI lint blocking MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Takes frontend/npm run lint from 23 errors / 40 warnings to 0 errors / 40 warnings, then removes continue-on-error from the CI lint step so it gates merges. Errors fixed outright: - @typescript-eslint/no-explicit-any (5, ChatView.tsx): dropped redundant (msg as any) casts — Message already declares files, workflow, and error with the exact shapes the props expect. - react/no-unescaped-entities (1, support/page.tsx): "We'll" -> "We'll". Targeted disables (17, all react-hooks/set-state-in-effect): every site is an intentional effect-driven state pattern — SSR/hydration mount gates (Modal, useSelectedModel), reset-on-prop/identity-change (CaseLawPanel x3, ChatView chat switch, CitationQuotesHeader, ChatHistoryContext logout, useFetchDocxBytes), sync fast paths of async fetch/check effects (CaseLawPanel, MfaLoginGate x2), DOM-measured state (ChatView scroll button, message-visibility restore), and timed UI latches (PreResponseWrapper, TRChatPanel, AskInputPopup auto-submit). Rewriting any of them would change runtime behavior, so each carries a // eslint-disable-next-line with a one-line reason instead of a fix or a repo-wide rule change. CI: lint step is now blocking; comments updated to say the backlog is at zero. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- .github/workflows/ci.yml | 8 +++----- .../app/components/assistant/AskInputPopup.tsx | 1 + .../src/app/components/assistant/CaseLawPanel.tsx | 4 ++++ .../src/app/components/assistant/ChatView.tsx | 15 +++++++++------ .../components/assistant/CitationQuotesHeader.tsx | 1 + .../components/assistant/PreResponseWrapper.tsx | 1 + frontend/src/app/components/modals/Modal.tsx | 1 + .../src/app/components/shared/MfaLoginGate.tsx | 2 ++ .../src/app/components/tabular/TRChatPanel.tsx | 1 + frontend/src/app/contexts/ChatHistoryContext.tsx | 1 + frontend/src/app/hooks/useFetchDocxBytes.ts | 1 + frontend/src/app/hooks/useSelectedModel.ts | 1 + frontend/src/app/support/page.tsx | 2 +- 13 files changed, 27 insertions(+), 12 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index fa7c276..b14ec8a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,7 +7,7 @@ # on a tree without those pieces the test steps no-op and the build still # gates the merge. Beyond the fork version this also builds the frontend # (placeholder NEXT_PUBLIC_* env — verified sufficient for `next build`) and -# runs eslint as an advisory step (see the comment on that step). +# runs eslint as a blocking gate (the error backlog is at zero). name: CI on: @@ -61,11 +61,9 @@ jobs: # harness PR merges); runs the suite once it exists. - run: npm test --if-present - # Advisory only for now: main currently carries 23 eslint errors, so a - # blocking gate would turn every PR red on inherited debt. Flip this to - # blocking (remove continue-on-error) once the backlog is burned down. + # Blocking gate: the eslint error backlog was burned down in this PR + # (0 errors; warnings do not fail the step), so any new error fails CI. - run: npm run lint - continue-on-error: true # Production build. NEXT_PUBLIC_* values are inlined at build time and # only need to be well-formed here — nothing is contacted during build. diff --git a/frontend/src/app/components/assistant/AskInputPopup.tsx b/frontend/src/app/components/assistant/AskInputPopup.tsx index 05a20b2..52da7ea 100644 --- a/frontend/src/app/components/assistant/AskInputPopup.tsx +++ b/frontend/src/app/components/assistant/AskInputPopup.tsx @@ -242,6 +242,7 @@ export function AskInputPopup({ }; useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect -- auto-submit when every question is answered; submit() sets state as part of the side effect if (canSubmit) submit(); }); diff --git a/frontend/src/app/components/assistant/CaseLawPanel.tsx b/frontend/src/app/components/assistant/CaseLawPanel.tsx index e60e536..0be4ea7 100644 --- a/frontend/src/app/components/assistant/CaseLawPanel.tsx +++ b/frontend/src/app/components/assistant/CaseLawPanel.tsx @@ -216,6 +216,7 @@ export function CaseLawPanel({ useEffect(() => { if (tab.opinions?.length) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- sync path of an async fetch effect: serve prop/cache data without a loading flash setOpinions(tab.opinions); setLoading(false); setError(null); @@ -269,10 +270,12 @@ export function CaseLawPanel({ orderOpinions(opinions).find( ({ opinion }) => typeof opinion.opinionId === "number", )?.opinion.opinionId ?? null; + // eslint-disable-next-line react-hooks/set-state-in-effect -- reset active opinion after opinions load setActiveOpinionId(firstOpinionId); }, [opinions]); useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect -- sync quote list when the tab prop changes setRelevantQuotes(tab.quotes ?? []); }, [tab.quotes]); @@ -321,6 +324,7 @@ export function CaseLawPanel({ ); useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect -- reset quote selection when the quote set changes setQuoteIndexState({ cacheKey: quoteCacheKey, index: 0 }); const firstQuote = relevantQuotes[0]; setActiveQuoteKey(firstQuote ? relevantQuoteKey(firstQuote, 0) : null); diff --git a/frontend/src/app/components/assistant/ChatView.tsx b/frontend/src/app/components/assistant/ChatView.tsx index f49e7e4..92591cb 100644 --- a/frontend/src/app/components/assistant/ChatView.tsx +++ b/frontend/src/app/components/assistant/ChatView.tsx @@ -83,6 +83,7 @@ export function ChatView({ const panelCloseTimerRef = useRef<number | null>(null); useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect -- reset per-chat UI state when switching chats setHiddenAskInputKeys(new Set()); }, [chatId]); @@ -519,6 +520,7 @@ export function ChatView({ const c = messagesContainerRef.current; if (!c) return; c.addEventListener("scroll", updateScrollButton); + // eslint-disable-next-line react-hooks/set-state-in-effect -- initial scroll-button state must be measured from the live DOM updateScrollButton(); return () => c.removeEventListener("scroll", updateScrollButton); }, [messages, updateScrollButton]); @@ -553,6 +555,7 @@ export function ChatView({ useEffect(() => { if (messages.length === 0) { hasScrolledRef.current = false; + // eslint-disable-next-line react-hooks/set-state-in-effect -- hide messages until scroll position is restored to avoid a visible jump setMessagesVisible(false); } else if (!hasScrolledRef.current) { const userMsgCount = messages.filter( @@ -682,8 +685,8 @@ export function ChatView({ {msg.role === "user" ? ( <UserMessage content={msg.content ?? ""} - files={(msg as any).files} - workflow={(msg as any).workflow} + files={msg.files} + workflow={msg.workflow} /> ) : ( <AssistantMessage @@ -692,11 +695,11 @@ export function ChatView({ i === messages.length - 1 && isResponseLoading } - isError={!!(msg as any).error} + isError={!!msg.error} errorMessage={ - typeof (msg as any) - .error === "string" - ? (msg as any).error + typeof msg.error === + "string" + ? msg.error : undefined } citations={msg.citations} diff --git a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx index 2af657a..1f5ceb9 100644 --- a/frontend/src/app/components/assistant/CitationQuotesHeader.tsx +++ b/frontend/src/app/components/assistant/CitationQuotesHeader.tsx @@ -47,6 +47,7 @@ export function CitationQuotesHeader({ useEffect(() => { if (!hasMultipleQuotes && viewMode === "list") { + // eslint-disable-next-line react-hooks/set-state-in-effect -- collapse list view when quotes drop to a single item setViewMode("single"); } }, [hasMultipleQuotes, viewMode]); diff --git a/frontend/src/app/components/assistant/PreResponseWrapper.tsx b/frontend/src/app/components/assistant/PreResponseWrapper.tsx index 77f3255..e27c45a 100644 --- a/frontend/src/app/components/assistant/PreResponseWrapper.tsx +++ b/frontend/src/app/components/assistant/PreResponseWrapper.tsx @@ -29,6 +29,7 @@ export function PreResponseWrapper({ useEffect(() => { if (forceOpen) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- streaming open/minimize latch (see comment above) setIsOpen(true); return; } diff --git a/frontend/src/app/components/modals/Modal.tsx b/frontend/src/app/components/modals/Modal.tsx index cacffcd..30a1b62 100644 --- a/frontend/src/app/components/modals/Modal.tsx +++ b/frontend/src/app/components/modals/Modal.tsx @@ -61,6 +61,7 @@ export function Modal({ // Portals can't render during SSR, so a keep-mounted modal only renders // (hidden) after the first client mount. const [hasMounted, setHasMounted] = useState(false); + // eslint-disable-next-line react-hooks/set-state-in-effect -- SSR portal gate: must flip after first client mount useEffect(() => setHasMounted(true), []); const hasHeader = breadcrumbs?.length; const hasFooter = diff --git a/frontend/src/app/components/shared/MfaLoginGate.tsx b/frontend/src/app/components/shared/MfaLoginGate.tsx index bf0f367..93718c6 100644 --- a/frontend/src/app/components/shared/MfaLoginGate.tsx +++ b/frontend/src/app/components/shared/MfaLoginGate.tsx @@ -21,6 +21,7 @@ export function MfaLoginGate({ children }: { children: ReactNode }) { useEffect(() => { if (!user) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- sync fast paths of the async MFA check effect setGateState("idle"); return; } @@ -64,6 +65,7 @@ export function MfaLoginGate({ children }: { children: ReactNode }) { if (gateState === "required" && !isVerifyPage) { if (hasRecentMfaVerification()) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- clear gate when a recent MFA verification exists instead of redirecting setGateState("verified"); return; } diff --git a/frontend/src/app/components/tabular/TRChatPanel.tsx b/frontend/src/app/components/tabular/TRChatPanel.tsx index 3ab5163..9119953 100644 --- a/frontend/src/app/components/tabular/TRChatPanel.tsx +++ b/frontend/src/app/components/tabular/TRChatPanel.tsx @@ -164,6 +164,7 @@ function TRResponseStatus({ isActive }: { isActive: boolean }) { useEffect(() => { if (wasActiveRef.current && !isActive) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- timed 'Done' flash on the active->idle transition setShowDone(true); setDoneVisible(true); const t = setTimeout(() => setDoneVisible(false), 1500); diff --git a/frontend/src/app/contexts/ChatHistoryContext.tsx b/frontend/src/app/contexts/ChatHistoryContext.tsx index 718fc5f..2bca6d4 100644 --- a/frontend/src/app/contexts/ChatHistoryContext.tsx +++ b/frontend/src/app/contexts/ChatHistoryContext.tsx @@ -73,6 +73,7 @@ export function ChatHistoryProvider({ children }: { children: ReactNode }) { useEffect(() => { if (!user) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- clear chat state on logout inside the effect that loads chats setChats([]); setChatLimit(INITIAL_CHAT_LIMIT); setHasMoreChats(false); diff --git a/frontend/src/app/hooks/useFetchDocxBytes.ts b/frontend/src/app/hooks/useFetchDocxBytes.ts index f74bf47..d7cccfe 100644 --- a/frontend/src/app/hooks/useFetchDocxBytes.ts +++ b/frontend/src/app/hooks/useFetchDocxBytes.ts @@ -49,6 +49,7 @@ export function useFetchDocxBytes( useEffect(() => { if (!documentId) { + // eslint-disable-next-line react-hooks/set-state-in-effect -- clear stale bytes when documentId is removed, within the fetch effect setBytes(null); setDownloadUrl(null); return; diff --git a/frontend/src/app/hooks/useSelectedModel.ts b/frontend/src/app/hooks/useSelectedModel.ts index 93a637f..5b5530e 100644 --- a/frontend/src/app/hooks/useSelectedModel.ts +++ b/frontend/src/app/hooks/useSelectedModel.ts @@ -16,6 +16,7 @@ export function useSelectedModel(): [string, (id: string) => void] { const [model, setModelState] = useState<string>(DEFAULT_MODEL_ID); useEffect(() => { + // eslint-disable-next-line react-hooks/set-state-in-effect -- hydration-safe localStorage read; SSR must render the default model setModelState(readStored()); }, []); diff --git a/frontend/src/app/support/page.tsx b/frontend/src/app/support/page.tsx index 08b08d4..b405d92 100644 --- a/frontend/src/app/support/page.tsx +++ b/frontend/src/app/support/page.tsx @@ -228,7 +228,7 @@ export default function SupportPage() { {/* Email Display (if logged in) */} {user?.email && ( <div className="text-sm text-gray-500"> - We'll respond to:{" "} + We'll respond to:{" "} <span className="font-medium"> {user.email} </span> From 2053ca15c845d8d0db6c565398de0c5ace445f85 Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 11:21:35 -0700 Subject: [PATCH 16/21] test: cover critical backend libs, raise coverage ratchet, add roadmap Six new unit suites (102 tests) for the highest-risk untested libs: userDataCleanup (destructive account/project deletes), documentVersions (document integrity), chat/citations (legal-citation parsing), safeError (secret redaction), llm/models (model resolution), and userLookup (profile email sync). Coverage floors ratchet up 2/2/4/2 -> 11/10/14/10 (measured 11.18/10.98/14.43/10.91), and docs/testing-coverage.md gives contributors a prioritized backlog for the remaining untested libs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- backend/src/lib/__tests__/citations.test.ts | 397 ++++++++++++++++ .../lib/__tests__/documentVersions.test.ts | 315 +++++++++++++ backend/src/lib/__tests__/llmModels.test.ts | 119 +++++ backend/src/lib/__tests__/safeError.test.ts | 154 +++++++ .../src/lib/__tests__/userDataCleanup.test.ts | 432 ++++++++++++++++++ backend/src/lib/__tests__/userLookup.test.ts | 267 +++++++++++ backend/vitest.config.mts | 28 +- docs/testing-coverage.md | 122 +++++ 8 files changed, 1821 insertions(+), 13 deletions(-) create mode 100644 backend/src/lib/__tests__/citations.test.ts create mode 100644 backend/src/lib/__tests__/documentVersions.test.ts create mode 100644 backend/src/lib/__tests__/llmModels.test.ts create mode 100644 backend/src/lib/__tests__/safeError.test.ts create mode 100644 backend/src/lib/__tests__/userDataCleanup.test.ts create mode 100644 backend/src/lib/__tests__/userLookup.test.ts create mode 100644 docs/testing-coverage.md diff --git a/backend/src/lib/__tests__/citations.test.ts b/backend/src/lib/__tests__/citations.test.ts new file mode 100644 index 0000000..08b0c9c --- /dev/null +++ b/backend/src/lib/__tests__/citations.test.ts @@ -0,0 +1,397 @@ +import { describe, it, expect } from "vitest"; +import { + parseCitations, + parseCitationsWithDiagnostics, + parsePartialCitationObjects, + createCitation, + CITATIONS_OPEN_TAG, + CITATIONS_CLOSE_TAG, +} from "../chat/citations"; +import type { DocIndex } from "../chat/types"; + +function citationsBlock(json: string) { + return `Answer text.\n${CITATIONS_OPEN_TAG}\n${json}\n${CITATIONS_CLOSE_TAG}`; +} + +// --------------------------------------------------------------------------- +// parseCitationsWithDiagnostics +// --------------------------------------------------------------------------- + +describe("parseCitationsWithDiagnostics", () => { + it("reports no block when the tags are absent", () => { + const { citations, diagnostics } = + parseCitationsWithDiagnostics("plain answer"); + expect(citations).toEqual([]); + expect(diagnostics).toEqual({ hasBlock: false, rawLength: 0, error: null }); + }); + + it("reports a JSON parse error for malformed block content", () => { + const { citations, diagnostics } = parseCitationsWithDiagnostics( + citationsBlock("[{not json"), + ); + expect(citations).toEqual([]); + expect(diagnostics.hasBlock).toBe(true); + expect(diagnostics.rawLength).toBeGreaterThan(0); + expect(diagnostics.error).toBeTruthy(); + }); + + it("reports an error when the block JSON is not an array", () => { + const { citations, diagnostics } = parseCitationsWithDiagnostics( + citationsBlock('{"ref": 1}'), + ); + expect(citations).toEqual([]); + expect(diagnostics.error).toBe("CITATIONS block JSON was not an array."); + }); +}); + +// --------------------------------------------------------------------------- +// parseCitations — document citations +// --------------------------------------------------------------------------- + +describe("parseCitations (document citations)", () => { + it("parses a minimal document citation", () => { + const [citation] = parseCitations( + citationsBlock( + '[{"ref": 1, "doc_id": "doc-1", "page": 3, "quote": "the term"}]', + ), + ); + expect(citation).toMatchObject({ + kind: "document", + ref: 1, + doc_id: "doc-1", + page: 3, + quote: "the term", + }); + expect(citation.quotes).toHaveLength(1); + }); + + it("derives ref from a [N] marker when ref is missing", () => { + const [citation] = parseCitations( + citationsBlock( + '[{"marker": "[7]", "doc_id": "doc-1", "page": 1, "quote": "q"}]', + ), + ); + expect(citation.ref).toBe(7); + }); + + it("drops entries without a usable ref or marker", () => { + expect( + parseCitations( + citationsBlock('[{"doc_id": "doc-1", "quote": "q", "marker": "nope"}]'), + ), + ).toEqual([]); + }); + + it("drops document entries without doc_id or quote", () => { + expect( + parseCitations(citationsBlock('[{"ref": 1, "doc_id": "doc-1"}]')), + ).toEqual([]); + expect( + parseCitations(citationsBlock('[{"ref": 1, "quote": "q"}]')), + ).toEqual([]); + }); + + it("drops non-object entries but keeps valid ones", () => { + const citations = parseCitations( + citationsBlock( + '[null, "junk", {"ref": 2, "doc_id": "doc-2", "page": 4, "quote": "kept"}]', + ), + ); + expect(citations).toHaveLength(1); + expect(citations[0]).toMatchObject({ ref: 2, doc_id: "doc-2" }); + }); + + it("accepts a text field as a quote alias", () => { + const [citation] = parseCitations( + citationsBlock('[{"ref": 1, "doc_id": "doc-1", "page": 2, "text": "aliased"}]'), + ); + expect(citation.kind).toBe("document"); + expect((citation as { quote: string }).quote).toBe("aliased"); + }); + + it("normalizes pages: numbers kept, ranges kept, junk becomes 1", () => { + const citations = parseCitations( + citationsBlock( + '[{"ref": 1, "doc_id": "d", "page": 5, "quote": "a"},' + + '{"ref": 2, "doc_id": "d", "page": "3-5", "quote": "b"},' + + '{"ref": 3, "doc_id": "d", "page": "12", "quote": "c"},' + + '{"ref": 4, "doc_id": "d", "page": "unknown", "quote": "d"}]', + ), + ); + expect(citations.map((c) => (c as { page: number | string }).page)).toEqual([ + 5, + "3-5", + 12, + 1, + ]); + }); + + it("keeps at most 3 quotes and inherits top-level page/sheet/cell", () => { + const [citation] = parseCitations( + citationsBlock( + JSON.stringify([ + { + ref: 1, + doc_id: "doc-1", + page: 9, + sheet: "Summary", + cell: "B7", + quotes: [ + { quote: "one" }, + { quote: "two", page: 2 }, + { quote: "three", sheet: "Detail", cell: "C1" }, + { quote: "four" }, + ], + }, + ]), + ), + ); + expect(citation.kind).toBe("document"); + const doc = citation as { + page: number | string; + quotes: { page: number | string; quote: string; sheet?: string; cell?: string }[]; + }; + expect(doc.quotes).toHaveLength(3); + expect(doc.quotes[0]).toEqual({ + page: 9, + quote: "one", + sheet: "Summary", + cell: "B7", + }); + expect(doc.quotes[1].page).toBe(2); + expect(doc.quotes[2]).toMatchObject({ sheet: "Detail", cell: "C1" }); + // Top-level fields mirror the first quote. + expect(doc.page).toBe(9); + }); + + it("skips quote rows without text", () => { + const [citation] = parseCitations( + citationsBlock( + '[{"ref": 1, "doc_id": "doc-1", "page": 1,' + + ' "quotes": [{"page": 2}, {"quote": " "}, {"quote": "real"}]}]', + ), + ); + expect((citation as { quotes: unknown[] }).quotes).toHaveLength(1); + }); +}); + +// --------------------------------------------------------------------------- +// parseCitations — case citations +// --------------------------------------------------------------------------- + +describe("parseCitations (case citations)", () => { + it("parses a case citation from a numeric cluster_id", () => { + const [citation] = parseCitations( + citationsBlock('[{"ref": 1, "cluster_id": 12345, "quote": "held that"}]'), + ); + expect(citation).toMatchObject({ kind: "case", ref: 1, cluster_id: 12345 }); + expect((citation as { quotes: unknown[] }).quotes).toEqual([ + { opinionId: null, type: null, author: null, quote: "held that" }, + ]); + }); + + it("accepts clusterId camelCase and string cluster ids", () => { + const citations = parseCitations( + citationsBlock( + '[{"ref": 1, "clusterId": 7, "quote": "a"},' + + '{"ref": 2, "cluster_id": "42", "quote": "b"}]', + ), + ); + expect(citations.map((c) => (c as { cluster_id: number }).cluster_id)).toEqual([ + 7, 42, + ]); + }); + + it("floors fractional cluster ids", () => { + const [citation] = parseCitations( + citationsBlock('[{"ref": 1, "cluster_id": 12.9, "quote": "q"}]'), + ); + expect((citation as { cluster_id: number }).cluster_id).toBe(12); + }); + + it("treats non-positive cluster ids as document citations", () => { + // cluster_id 0 fails the > 0 check, so the entry needs a doc_id. + expect( + parseCitations(citationsBlock('[{"ref": 1, "cluster_id": 0, "quote": "q"}]')), + ).toEqual([]); + }); + + it("normalizes structured case quotes with opinion metadata", () => { + const [citation] = parseCitations( + citationsBlock( + JSON.stringify([ + { + ref: 3, + cluster_id: 99, + quotes: [ + { + quote: "majority text", + opinion_id: 11.7, + type: "majority", + author: "Judge A", + }, + { text: "concurrence text", opinionId: 12 }, + { type: "no quote text, dropped" }, + ], + }, + ]), + ), + ); + expect((citation as { quotes: unknown[] }).quotes).toEqual([ + { + opinionId: 11, + type: "majority", + author: "Judge A", + quote: "majority text", + }, + { opinionId: 12, type: null, author: null, quote: "concurrence text" }, + ]); + }); + + it("drops case citations with no quotes at all", () => { + expect( + parseCitations(citationsBlock('[{"ref": 1, "cluster_id": 5}]')), + ).toEqual([]); + }); +}); + +// --------------------------------------------------------------------------- +// parsePartialCitationObjects +// --------------------------------------------------------------------------- + +describe("parsePartialCitationObjects", () => { + it("returns [] when no array has started", () => { + expect(parsePartialCitationObjects("streaming <CITATIONS>")).toEqual([]); + }); + + it("extracts complete objects and ignores a trailing incomplete one", () => { + const partial = + '<CITATIONS>[{"ref": 1, "doc_id": "doc-1", "page": 2, "quote": "done"},' + + ' {"ref": 2, "doc_id": "doc-2", "page": 3, "quote": "still stream'; + const citations = parsePartialCitationObjects(partial); + expect(citations).toHaveLength(1); + expect(citations[0]).toMatchObject({ ref: 1, doc_id: "doc-1" }); + }); + + it("handles braces and escaped quotes inside string values", () => { + const partial = + '<CITATIONS>[{"ref": 1, "doc_id": "doc-1", "page": 1,' + + ' "quote": "clause {a} says \\"stop\\""}'; + const citations = parsePartialCitationObjects(partial); + expect(citations).toHaveLength(1); + expect((citations[0] as { quote: string }).quote).toBe( + 'clause {a} says "stop"', + ); + }); + + it("ignores content after the closing tag", () => { + const text = + '<CITATIONS>[{"ref": 1, "doc_id": "a", "page": 1, "quote": "q"}]</CITATIONS>' + + '[{"ref": 9, "doc_id": "b", "page": 1, "quote": "after"}]'; + const citations = parsePartialCitationObjects(text); + expect(citations).toHaveLength(1); + expect(citations[0]).toMatchObject({ ref: 1 }); + }); + + it("stops at the array close bracket", () => { + const text = + '[{"ref": 1, "doc_id": "a", "page": 1, "quote": "q"}] {"ref": 2, "doc_id": "b", "page": 1, "quote": "outside"}'; + const citations = parsePartialCitationObjects(text); + expect(citations).toHaveLength(1); + }); + + it("skips malformed objects but keeps later valid ones", () => { + const text = + '[{"ref": bad}, {"ref": 2, "doc_id": "doc-2", "page": 1, "quote": "ok"}'; + const citations = parsePartialCitationObjects(text); + expect(citations).toHaveLength(1); + expect(citations[0]).toMatchObject({ ref: 2 }); + }); +}); + +// --------------------------------------------------------------------------- +// createCitation +// --------------------------------------------------------------------------- + +describe("createCitation", () => { + const docIndex: DocIndex = { + "doc-1": { + document_id: "uuid-aaa", + filename: "contract.pdf", + version_id: "ver-1", + version_number: 2, + }, + }; + + it("builds a document citation payload from the doc index", () => { + const [parsed] = parseCitations( + citationsBlock('[{"ref": 1, "doc_id": "doc-1", "page": 4, "quote": "q"}]'), + ); + expect(createCitation(parsed, docIndex)).toMatchObject({ + type: "citation_data", + kind: "document", + ref: 1, + doc_id: "doc-1", + document_id: "uuid-aaa", + version_id: "ver-1", + version_number: 2, + filename: "contract.pdf", + page: 4, + quote: "q", + }); + }); + + it("falls back to the raw doc_id as filename when unresolvable", () => { + const [parsed] = parseCitations( + citationsBlock('[{"ref": 1, "doc_id": "doc-9", "page": 1, "quote": "q"}]'), + ); + const citation = createCitation(parsed, docIndex); + expect(citation).toMatchObject({ + filename: "doc-9", + document_id: undefined, + version_id: null, + }); + }); + + it("enriches a case citation from the cluster map", () => { + const [parsed] = parseCitations( + citationsBlock('[{"ref": 2, "cluster_id": 55, "quote": "held"}]'), + ); + const cases = new Map([ + [ + 55, + { + caseName: "Smith v. Jones", + citations: ["123 U.S. 456", "alt cite"], + url: "https://example.test/case", + pdfUrl: null, + dateFiled: "1990-01-02", + }, + ], + ]); + expect(createCitation(parsed, docIndex, cases)).toMatchObject({ + type: "citation_data", + kind: "case", + ref: 2, + cluster_id: 55, + case_name: "Smith v. Jones", + citation: "123 U.S. 456", + url: "https://example.test/case", + pdfUrl: null, + dateFiled: "1990-01-02", + }); + }); + + it("nulls case metadata when the cluster map has no entry", () => { + const [parsed] = parseCitations( + citationsBlock('[{"ref": 2, "cluster_id": 55, "quote": "held"}]'), + ); + expect(createCitation(parsed, docIndex)).toMatchObject({ + case_name: null, + citation: null, + url: null, + pdfUrl: null, + dateFiled: null, + }); + }); +}); diff --git a/backend/src/lib/__tests__/documentVersions.test.ts b/backend/src/lib/__tests__/documentVersions.test.ts new file mode 100644 index 0000000..4442fa3 --- /dev/null +++ b/backend/src/lib/__tests__/documentVersions.test.ts @@ -0,0 +1,315 @@ +import { describe, it, expect } from "vitest"; +import { + loadActiveVersion, + attachActiveVersionPaths, + attachLatestVersionNumbers, +} from "../documentVersions"; + +type Row = Record<string, unknown>; + +/** + * Read-only Supabase mock covering the query chains documentVersions uses: + * select/eq/in/is/not filters plus single() and awaiting the builder. + */ +function makeDb(tables: Record<string, Row[]>) { + return { + from(table: string) { + let rows = [...(tables[table] ?? [])]; + const query: any = { + select: () => query, + eq: (column: string, value: unknown) => { + rows = rows.filter((row) => row[column] === value); + return query; + }, + in: (column: string, values: unknown[]) => { + rows = rows.filter((row) => values.includes(row[column])); + return query; + }, + is: (column: string, value: unknown) => { + rows = rows.filter((row) => (row[column] ?? null) === value); + return query; + }, + not: (column: string, operator: string, value: unknown) => { + if (operator === "is" && value === null) { + rows = rows.filter((row) => row[column] != null); + } + return query; + }, + single: async () => ({ data: rows[0] ?? null, error: null }), + then: ( + resolve: (value: { data: Row[]; error: null }) => unknown, + reject?: (reason: unknown) => unknown, + ) => Promise.resolve({ data: rows, error: null }).then(resolve, reject), + }; + return query; + }, + } as any; +} + +/** Shape of the mutable doc rows the attach* helpers annotate in place. */ +type TestDoc = { + id: string; + current_version_id?: string | null; + latest_version_number?: number | null; + [k: string]: unknown; +}; + +const FULL_VERSION = { + id: "ver-1", + document_id: "doc-1", + storage_path: "documents/u/doc-1/source.pdf", + pdf_storage_path: "documents/u/doc-1/converted.pdf", + version_number: 3, + filename: "contract.pdf", + source: "upload", + file_type: "application/pdf", + size_bytes: 1024, + page_count: 12, + deleted_at: null, +}; + +// --------------------------------------------------------------------------- +// loadActiveVersion +// --------------------------------------------------------------------------- + +describe("loadActiveVersion", () => { + it("resolves the document's current version by default", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: "ver-1" }], + document_versions: [FULL_VERSION], + }); + await expect(loadActiveVersion("doc-1", db)).resolves.toEqual({ + id: "ver-1", + storage_path: "documents/u/doc-1/source.pdf", + pdf_storage_path: "documents/u/doc-1/converted.pdf", + version_number: 3, + filename: "contract.pdf", + source: "upload", + file_type: "application/pdf", + size_bytes: 1024, + page_count: 12, + }); + }); + + it("prefers an explicit versionId over current_version_id", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: "ver-1" }], + document_versions: [ + FULL_VERSION, + { ...FULL_VERSION, id: "ver-2", version_number: 2 }, + ], + }); + const version = await loadActiveVersion("doc-1", db, "ver-2"); + expect(version?.id).toBe("ver-2"); + expect(version?.version_number).toBe(2); + }); + + it("returns null when neither versionId nor current_version_id exist", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: null }], + document_versions: [FULL_VERSION], + }); + await expect(loadActiveVersion("doc-1", db)).resolves.toBeNull(); + }); + + it("returns null when the version belongs to a different document", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: "ver-other" }], + document_versions: [ + { ...FULL_VERSION, id: "ver-other", document_id: "doc-2" }, + ], + }); + await expect(loadActiveVersion("doc-1", db)).resolves.toBeNull(); + // Also guards against a spoofed explicit versionId. + await expect( + loadActiveVersion("doc-1", db, "ver-other"), + ).resolves.toBeNull(); + }); + + it("returns null for soft-deleted versions", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: "ver-1" }], + document_versions: [ + { ...FULL_VERSION, deleted_at: "2026-01-01T00:00:00Z" }, + ], + }); + await expect(loadActiveVersion("doc-1", db)).resolves.toBeNull(); + }); + + it("returns null when the version has no storage_path", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: "ver-1" }], + document_versions: [{ ...FULL_VERSION, storage_path: null }], + }); + await expect(loadActiveVersion("doc-1", db)).resolves.toBeNull(); + }); + + it("defaults optional metadata fields to null", async () => { + const db = makeDb({ + documents: [{ id: "doc-1", current_version_id: "ver-1" }], + document_versions: [ + { + id: "ver-1", + document_id: "doc-1", + storage_path: "documents/u/doc-1/source.docx", + deleted_at: null, + }, + ], + }); + await expect(loadActiveVersion("doc-1", db)).resolves.toEqual({ + id: "ver-1", + storage_path: "documents/u/doc-1/source.docx", + pdf_storage_path: null, + version_number: null, + filename: null, + source: null, + file_type: null, + size_bytes: null, + page_count: null, + }); + }); +}); + +// --------------------------------------------------------------------------- +// attachActiveVersionPaths +// --------------------------------------------------------------------------- + +describe("attachActiveVersionPaths", () => { + it("returns the same empty array untouched", async () => { + const db = makeDb({ document_versions: [] }); + const docs: TestDoc[] = []; + await expect(attachActiveVersionPaths(db, docs)).resolves.toBe(docs); + }); + + it("nulls all fields when no document has a current version", async () => { + const db = makeDb({ document_versions: [FULL_VERSION] }); + const [doc] = await attachActiveVersionPaths<TestDoc>(db, [ + { id: "doc-1", current_version_id: null }, + ]); + expect(doc).toMatchObject({ + filename: "Untitled document", + storage_path: null, + pdf_storage_path: null, + file_type: null, + size_bytes: null, + page_count: null, + }); + }); + + it("merges active-version metadata onto each row", async () => { + const db = makeDb({ + document_versions: [ + FULL_VERSION, + { + ...FULL_VERSION, + id: "ver-2", + storage_path: "documents/u/doc-2/source.docx", + pdf_storage_path: null, + filename: "nda.docx", + version_number: 1, + }, + ], + }); + const docs = await attachActiveVersionPaths<TestDoc>(db, [ + { id: "doc-1", current_version_id: "ver-1" }, + { id: "doc-2", current_version_id: "ver-2" }, + { id: "doc-3", current_version_id: null }, + ]); + expect(docs[0]).toMatchObject({ + storage_path: "documents/u/doc-1/source.pdf", + pdf_storage_path: "documents/u/doc-1/converted.pdf", + active_version_number: 3, + filename: "contract.pdf", + file_type: "application/pdf", + size_bytes: 1024, + page_count: 12, + }); + expect(docs[1]).toMatchObject({ + storage_path: "documents/u/doc-2/source.docx", + pdf_storage_path: null, + active_version_number: 1, + filename: "nda.docx", + }); + // Mixed list: the version-less doc still gets explicit nulls. + expect(docs[2]).toMatchObject({ + storage_path: null, + filename: "Untitled document", + }); + }); + + it("falls back to 'Untitled document' for blank filenames", async () => { + const db = makeDb({ + document_versions: [{ ...FULL_VERSION, filename: " " }], + }); + const [doc] = await attachActiveVersionPaths<TestDoc>(db, [ + { id: "doc-1", current_version_id: "ver-1" }, + ]); + expect(doc.filename).toBe("Untitled document"); + }); + + it("ignores soft-deleted versions", async () => { + const db = makeDb({ + document_versions: [ + { ...FULL_VERSION, deleted_at: "2026-01-01T00:00:00Z" }, + ], + }); + const [doc] = await attachActiveVersionPaths<TestDoc>(db, [ + { id: "doc-1", current_version_id: "ver-1" }, + ]); + expect(doc.storage_path).toBeNull(); + expect(doc.filename).toBe("Untitled document"); + }); +}); + +// --------------------------------------------------------------------------- +// attachLatestVersionNumbers +// --------------------------------------------------------------------------- + +describe("attachLatestVersionNumbers", () => { + const versionRow = ( + document_id: string, + version_number: number | null, + overrides: Row = {}, + ) => ({ + document_id, + version_number, + source: "assistant_edit", + deleted_at: null, + ...overrides, + }); + + it("returns the same empty array untouched", async () => { + const db = makeDb({ document_versions: [] }); + const docs: TestDoc[] = []; + await expect(attachLatestVersionNumbers(db, docs)).resolves.toBe(docs); + }); + + it("attaches the max assistant_edit version number per document", async () => { + const db = makeDb({ + document_versions: [ + versionRow("doc-1", 1), + versionRow("doc-1", 4), + versionRow("doc-1", 2), + versionRow("doc-2", 7), + ], + }); + const docs = await attachLatestVersionNumbers<TestDoc>(db, [ + { id: "doc-1" }, + { id: "doc-2" }, + { id: "doc-3" }, + ]); + expect(docs.map((d) => d.latest_version_number)).toEqual([4, 7, null]); + }); + + it("ignores non-assistant_edit and soft-deleted versions", async () => { + const db = makeDb({ + document_versions: [ + versionRow("doc-1", 9, { source: "upload" }), + versionRow("doc-1", 8, { deleted_at: "2026-01-01T00:00:00Z" }), + versionRow("doc-1", 2), + ], + }); + const docs = await attachLatestVersionNumbers<TestDoc>(db, [{ id: "doc-1" }]); + expect(docs[0].latest_version_number).toBe(2); + }); +}); diff --git a/backend/src/lib/__tests__/llmModels.test.ts b/backend/src/lib/__tests__/llmModels.test.ts new file mode 100644 index 0000000..be3d7d5 --- /dev/null +++ b/backend/src/lib/__tests__/llmModels.test.ts @@ -0,0 +1,119 @@ +import { describe, it, expect } from "vitest"; +import { + CLAUDE_MAIN_MODELS, + GEMINI_MAIN_MODELS, + OPENAI_MAIN_MODELS, + CLAUDE_MID_MODELS, + GEMINI_MID_MODELS, + OPENAI_MID_MODELS, + CLAUDE_LOW_MODELS, + GEMINI_LOW_MODELS, + OPENAI_LOW_MODELS, + DEFAULT_MAIN_MODEL, + DEFAULT_TITLE_MODEL, + DEFAULT_TABULAR_MODEL, + providerForModel, + resolveModel, +} from "../llm/models"; + +// --------------------------------------------------------------------------- +// providerForModel +// --------------------------------------------------------------------------- + +describe("providerForModel", () => { + it("maps claude-* ids to the claude provider", () => { + for (const model of [...CLAUDE_MAIN_MODELS, ...CLAUDE_MID_MODELS, ...CLAUDE_LOW_MODELS]) { + expect(providerForModel(model)).toBe("claude"); + } + }); + + it("maps gemini-* ids to the gemini provider", () => { + for (const model of [...GEMINI_MAIN_MODELS, ...GEMINI_MID_MODELS, ...GEMINI_LOW_MODELS]) { + expect(providerForModel(model)).toBe("gemini"); + } + }); + + it("maps gpt-* ids to the openai provider", () => { + for (const model of [...OPENAI_MAIN_MODELS, ...OPENAI_MID_MODELS, ...OPENAI_LOW_MODELS]) { + expect(providerForModel(model)).toBe("openai"); + } + }); + + it("throws on an unknown model id", () => { + expect(() => providerForModel("llama-3")).toThrow(/Unknown model id/); + expect(() => providerForModel("")).toThrow(/Unknown model id/); + }); + + it("infers by prefix only, without validating against the catalog", () => { + // Documents current behavior: any claude-/gemini-/gpt- prefix is + // accepted even if the id is not a canonical model. + expect(providerForModel("claude-nonexistent")).toBe("claude"); + expect(providerForModel("gpt-nonexistent")).toBe("openai"); + }); +}); + +// --------------------------------------------------------------------------- +// resolveModel +// --------------------------------------------------------------------------- + +describe("resolveModel", () => { + it("returns a known model id unchanged", () => { + expect(resolveModel("claude-sonnet-4-6", DEFAULT_MAIN_MODEL)).toBe( + "claude-sonnet-4-6", + ); + expect(resolveModel("gpt-5.4-lite", DEFAULT_TITLE_MODEL)).toBe( + "gpt-5.4-lite", + ); + }); + + it("falls back for unknown model ids", () => { + expect(resolveModel("gpt-3.5-turbo", DEFAULT_MAIN_MODEL)).toBe( + DEFAULT_MAIN_MODEL, + ); + }); + + it("falls back for null, undefined, and empty ids", () => { + expect(resolveModel(null, DEFAULT_MAIN_MODEL)).toBe(DEFAULT_MAIN_MODEL); + expect(resolveModel(undefined, DEFAULT_TABULAR_MODEL)).toBe( + DEFAULT_TABULAR_MODEL, + ); + expect(resolveModel("", DEFAULT_TITLE_MODEL)).toBe(DEFAULT_TITLE_MODEL); + }); + + it("accepts models from every tier of the catalog", () => { + const catalog = [ + ...CLAUDE_MAIN_MODELS, + ...GEMINI_MAIN_MODELS, + ...OPENAI_MAIN_MODELS, + ...CLAUDE_MID_MODELS, + ...GEMINI_MID_MODELS, + ...OPENAI_MID_MODELS, + ...CLAUDE_LOW_MODELS, + ...GEMINI_LOW_MODELS, + ...OPENAI_LOW_MODELS, + ]; + for (const model of catalog) { + expect(resolveModel(model, "fallback-model")).toBe(model); + } + }); +}); + +// --------------------------------------------------------------------------- +// Default model sanity +// --------------------------------------------------------------------------- + +describe("default models", () => { + it("every default resolves to itself (defaults are in the catalog)", () => { + expect(resolveModel(DEFAULT_MAIN_MODEL, "x")).toBe(DEFAULT_MAIN_MODEL); + expect(resolveModel(DEFAULT_TITLE_MODEL, "x")).toBe(DEFAULT_TITLE_MODEL); + expect(resolveModel(DEFAULT_TABULAR_MODEL, "x")).toBe( + DEFAULT_TABULAR_MODEL, + ); + }); + + it("every default has a resolvable provider", () => { + expect(providerForModel(DEFAULT_MAIN_MODEL)).toBe("gemini"); + expect(providerForModel(DEFAULT_TITLE_MODEL)).toBe("gemini"); + expect(providerForModel(DEFAULT_TABULAR_MODEL)).toBe("gemini"); + }); +}); diff --git a/backend/src/lib/__tests__/safeError.test.ts b/backend/src/lib/__tests__/safeError.test.ts new file mode 100644 index 0000000..4bd8373 --- /dev/null +++ b/backend/src/lib/__tests__/safeError.test.ts @@ -0,0 +1,154 @@ +import { describe, it, expect } from "vitest"; +import { + redactSensitiveText, + safeErrorMessage, + safeErrorLog, +} from "../safeError"; + +// --------------------------------------------------------------------------- +// redactSensitiveText +// --------------------------------------------------------------------------- + +describe("redactSensitiveText", () => { + it('redacts the OpenAI "Incorrect API key provided" message', () => { + expect( + redactSensitiveText( + "Incorrect API key provided: sk-proj-abc123def456ghi789.", + ), + ).toBe("Incorrect API key provided: [redacted]."); + }); + + it("keeps the trailing period optional in the incorrect-key message", () => { + expect( + redactSensitiveText("Incorrect API key provided: badkey123"), + ).toBe("Incorrect API key provided: [redacted]"); + }); + + it("redacts secrets after api_key labels", () => { + expect(redactSensitiveText("api_key: mysecret123")).toBe( + "api_key: [redacted]", + ); + expect(redactSensitiveText("api key = mysecret123")).toBe( + "api key = [redacted]", + ); + }); + + it("redacts secrets after token/secret/authorization labels", () => { + expect(redactSensitiveText("token: abcdef123456")).toBe( + "token: [redacted]", + ); + expect(redactSensitiveText("secret is abcdef123456")).toBe( + "secret is [redacted]", + ); + expect(redactSensitiveText("authorization: abcdef123456")).toBe( + "authorization: [redacted]", + ); + }); + + it("leaves short values after labels alone (below 6 chars)", () => { + expect(redactSensitiveText("token: abc")).toBe("token: abc"); + }); + + it("redacts bare OpenAI-style sk- keys anywhere in the text", () => { + expect( + redactSensitiveText("request failed for sk-abc123def456ghi789 today"), + ).toBe("request failed for [redacted] today"); + }); + + it("redacts bare Anthropic-style sk-ant- keys", () => { + expect( + redactSensitiveText("used sk-ant-api03-abc123def456"), + ).toBe("used [redacted]"); + }); + + it("redacts bare Google AIza keys", () => { + expect( + redactSensitiveText("key AIzaSyA1234567890abcdefghij failed"), + ).toBe("key [redacted] failed"); + }); + + it("redacts multiple secrets in one string", () => { + const result = redactSensitiveText( + "first sk-abc123def456ghi789 then AIzaSyA1234567890abcdefghij", + ); + expect(result).toBe("first [redacted] then [redacted]"); + }); + + it("leaves ordinary text unchanged", () => { + expect(redactSensitiveText("Document not found")).toBe( + "Document not found", + ); + }); +}); + +// --------------------------------------------------------------------------- +// safeErrorMessage +// --------------------------------------------------------------------------- + +describe("safeErrorMessage", () => { + it("uses the message of an Error instance", () => { + expect(safeErrorMessage(new Error("boom"))).toBe("boom"); + }); + + it("redacts secrets inside an Error message", () => { + expect( + safeErrorMessage(new Error("bad key sk-abc123def456ghi789")), + ).toBe("bad key [redacted]"); + }); + + it("passes plain strings through (redacted)", () => { + expect(safeErrorMessage("token: abcdef123456")).toBe( + "token: [redacted]", + ); + }); + + it("falls back for non-Error, non-string values", () => { + expect(safeErrorMessage(42)).toBe("Unexpected error"); + expect(safeErrorMessage(null)).toBe("Unexpected error"); + expect(safeErrorMessage({ message: "obj" })).toBe("Unexpected error"); + }); + + it("falls back for an Error with an empty message", () => { + expect(safeErrorMessage(new Error(""))).toBe("Unexpected error"); + }); + + it("honors a custom fallback", () => { + expect(safeErrorMessage(undefined, "Chat failed")).toBe("Chat failed"); + }); +}); + +// --------------------------------------------------------------------------- +// safeErrorLog +// --------------------------------------------------------------------------- + +describe("safeErrorLog", () => { + it("captures name, message, and stack for an Error", () => { + const error = new Error("boom"); + const log = safeErrorLog(error); + expect(log.name).toBe("Error"); + expect(log.message).toBe("boom"); + expect(log.stack).toContain("boom"); + }); + + it("redacts secrets in the message and stack", () => { + const error = new Error("bad key sk-abc123def456ghi789"); + const log = safeErrorLog(error); + expect(log.message).toBe("bad key [redacted]"); + expect(log.stack).not.toContain("sk-abc123def456ghi789"); + }); + + it("falls back to 'Unexpected error' for an empty Error message", () => { + expect(safeErrorLog(new Error("")).message).toBe("Unexpected error"); + }); + + it("omits the stack when the Error has none", () => { + const error = new Error("boom"); + error.stack = undefined; + expect(safeErrorLog(error).stack).toBeUndefined(); + }); + + it("handles non-Error values with a null name and no stack", () => { + const log = safeErrorLog("plain failure"); + expect(log).toEqual({ name: null, message: "plain failure" }); + }); +}); diff --git a/backend/src/lib/__tests__/userDataCleanup.test.ts b/backend/src/lib/__tests__/userDataCleanup.test.ts new file mode 100644 index 0000000..35a8ed1 --- /dev/null +++ b/backend/src/lib/__tests__/userDataCleanup.test.ts @@ -0,0 +1,432 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; + +vi.mock("../storage", () => ({ + deleteFile: vi.fn(async () => {}), + listFiles: vi.fn(async () => [] as string[]), +})); + +import { deleteFile, listFiles } from "../storage"; +import { + deleteAllUserChats, + deleteAllUserTabularReviews, + deleteUserProjects, + deleteUserAccountData, +} from "../userDataCleanup"; + +const deleteFileMock = vi.mocked(deleteFile); +const listFilesMock = vi.mocked(listFiles); + +type Row = Record<string, unknown>; + +/** + * Stateful Supabase mock: deletes and updates mutate `tables`, so tests can + * assert on exactly which rows survived a cleanup call. Supports the chains + * userDataCleanup uses (select/delete/update + eq/in/filter-cs) and can + * inject a delete error per table to exercise error propagation. + */ +function makeDb( + initialTables: Record<string, Row[]>, + options: { deleteErrors?: Record<string, string> } = {}, +) { + const tables: Record<string, Row[]> = {}; + for (const [name, rows] of Object.entries(initialTables)) { + tables[name] = rows.map((row) => ({ ...row })); + } + const db = { + from(table: string) { + const rowsOf = () => tables[table] ?? (tables[table] = []); + let predicate: (row: Row) => boolean = () => true; + let mode: "select" | "delete" | "update" = "select"; + let patch: Row = {}; + const narrow = (next: (row: Row) => boolean) => { + const prev = predicate; + predicate = (row) => prev(row) && next(row); + }; + const query: any = { + select: () => query, + delete: () => { + mode = "delete"; + return query; + }, + update: (value: Row) => { + mode = "update"; + patch = value; + return query; + }, + eq: (column: string, value: unknown) => { + narrow((row) => row[column] === value); + return query; + }, + in: (column: string, values: unknown[]) => { + narrow((row) => values.includes(row[column])); + return query; + }, + filter: (column: string, operator: string, value: string) => { + if (operator !== "cs") return query; + const expected = (JSON.parse(value) as string[]).map((item) => + item.toLowerCase(), + ); + narrow((row) => { + const actual = row[column]; + if (!Array.isArray(actual)) return false; + const normalized = actual.map((item) => + String(item).toLowerCase(), + ); + return expected.every((item) => normalized.includes(item)); + }); + return query; + }, + then: ( + resolve: (value: { data: Row[] | null; error: unknown }) => unknown, + reject?: (reason: unknown) => unknown, + ) => { + let result: { data: Row[] | null; error: unknown }; + if (mode === "delete") { + const message = options.deleteErrors?.[table]; + if (message) { + result = { data: null, error: { message } }; + } else { + tables[table] = rowsOf().filter((row) => !predicate(row)); + result = { data: null, error: null }; + } + } else if (mode === "update") { + for (const row of rowsOf().filter(predicate)) { + Object.assign(row, patch); + } + result = { data: null, error: null }; + } else { + result = { + data: rowsOf().filter(predicate).map((row) => ({ ...row })), + error: null, + }; + } + return Promise.resolve(result).then(resolve, reject); + }, + }; + return query; + }, + }; + return { db: db as any, tables }; +} + +const ids = (rows: Row[] | undefined) => (rows ?? []).map((row) => row.id); + +beforeEach(() => { + deleteFileMock.mockClear(); + deleteFileMock.mockResolvedValue(undefined as never); + listFilesMock.mockClear(); + listFilesMock.mockResolvedValue([]); +}); + +// --------------------------------------------------------------------------- +// deleteAllUserChats +// --------------------------------------------------------------------------- + +describe("deleteAllUserChats", () => { + it("deletes only the target user's assistant and tabular chats", async () => { + const { db, tables } = makeDb({ + chats: [ + { id: "c1", user_id: "u1" }, + { id: "c2", user_id: "u2" }, + ], + tabular_review_chats: [ + { id: "tc1", user_id: "u1" }, + { id: "tc2", user_id: "u2" }, + ], + }); + await deleteAllUserChats(db, "u1"); + expect(ids(tables.chats)).toEqual(["c2"]); + expect(ids(tables.tabular_review_chats)).toEqual(["tc2"]); + }); + + it("surfaces delete failures with context", async () => { + const { db } = makeDb( + { chats: [{ id: "c1", user_id: "u1" }], tabular_review_chats: [] }, + { deleteErrors: { chats: "boom" } }, + ); + await expect(deleteAllUserChats(db, "u1")).rejects.toThrow( + "Failed to delete assistant chats: boom", + ); + }); +}); + +// --------------------------------------------------------------------------- +// deleteAllUserTabularReviews +// --------------------------------------------------------------------------- + +describe("deleteAllUserTabularReviews", () => { + const fixture = () => + makeDb({ + tabular_reviews: [ + { id: "r1", user_id: "u1" }, + { id: "r2", user_id: "u1" }, + { id: "r-other", user_id: "u2" }, + ], + tabular_review_chats: [ + { id: "rc1", review_id: "r1" }, + { id: "rc-other", review_id: "r-other" }, + ], + tabular_review_chat_messages: [ + { id: "rm1", chat_id: "rc1" }, + { id: "rm-other", chat_id: "rc-other" }, + ], + tabular_cells: [ + { id: "cell1", review_id: "r1" }, + { id: "cell-other", review_id: "r-other" }, + ], + }); + + it("cascades messages, chats, and cells before the reviews", async () => { + const { db, tables } = fixture(); + await expect(deleteAllUserTabularReviews(db, "u1")).resolves.toBe(2); + expect(ids(tables.tabular_reviews)).toEqual(["r-other"]); + expect(ids(tables.tabular_review_chats)).toEqual(["rc-other"]); + expect(ids(tables.tabular_review_chat_messages)).toEqual(["rm-other"]); + expect(ids(tables.tabular_cells)).toEqual(["cell-other"]); + }); + + it("returns 0 and deletes nothing for a user with no reviews", async () => { + const { db, tables } = fixture(); + await expect(deleteAllUserTabularReviews(db, "u3")).resolves.toBe(0); + expect(tables.tabular_reviews).toHaveLength(3); + expect(tables.tabular_cells).toHaveLength(2); + }); +}); + +// --------------------------------------------------------------------------- +// deleteUserProjects +// --------------------------------------------------------------------------- + +describe("deleteUserProjects", () => { + const fixture = () => + makeDb({ + projects: [ + { id: "p1", user_id: "u1" }, + { id: "p2", user_id: "u1" }, + { id: "p-other", user_id: "u2" }, + ], + documents: [ + { id: "d1", user_id: "u1", project_id: "p1" }, + { id: "d-loose", user_id: "u1", project_id: null }, + { id: "d-other", user_id: "u2", project_id: "p-other" }, + ], + document_versions: [ + { + id: "v1", + document_id: "d1", + storage_path: "documents/u1/d1/source.pdf", + pdf_storage_path: "documents/u1/d1/converted.pdf", + }, + { + id: "v-other", + document_id: "d-other", + storage_path: "documents/u2/d-other/source.pdf", + pdf_storage_path: null, + }, + ], + chats: [ + { id: "c1", project_id: "p1" }, + { id: "c-other", project_id: "p-other" }, + ], + chat_messages: [ + { id: "m1", chat_id: "c1" }, + { id: "m-other", chat_id: "c-other" }, + ], + tabular_reviews: [ + { id: "r1", project_id: "p1" }, + { id: "r-other", project_id: "p-other" }, + ], + tabular_review_chats: [ + { id: "rc1", review_id: "r1" }, + { id: "rc-other", review_id: "r-other" }, + ], + tabular_review_chat_messages: [ + { id: "rm1", chat_id: "rc1" }, + { id: "rm-other", chat_id: "rc-other" }, + ], + tabular_cells: [ + { id: "cell1", review_id: "r1" }, + { id: "cell-other", review_id: "r-other" }, + ], + project_subfolders: [ + { id: "f1", project_id: "p1" }, + { id: "f-other", project_id: "p-other" }, + ], + }); + + it("cascades project contents and storage files for owned projects", async () => { + const { db, tables } = fixture(); + await expect(deleteUserProjects(db, "u1")).resolves.toBe(2); + + expect(ids(tables.projects)).toEqual(["p-other"]); + expect(ids(tables.documents)).toEqual(["d-loose", "d-other"]); + expect(ids(tables.chats)).toEqual(["c-other"]); + expect(ids(tables.chat_messages)).toEqual(["m-other"]); + expect(ids(tables.tabular_reviews)).toEqual(["r-other"]); + expect(ids(tables.tabular_review_chats)).toEqual(["rc-other"]); + expect(ids(tables.tabular_review_chat_messages)).toEqual(["rm-other"]); + expect(ids(tables.tabular_cells)).toEqual(["cell-other"]); + expect(ids(tables.project_subfolders)).toEqual(["f-other"]); + + const deletedPaths = deleteFileMock.mock.calls.map(([path]) => path); + expect(deletedPaths.sort()).toEqual([ + "documents/u1/d1/converted.pdf", + "documents/u1/d1/source.pdf", + ]); + }); + + it("restricts deletion to the requested owned projects", async () => { + const { db, tables } = fixture(); + // p-other belongs to u2, so requesting it must not delete anything of theirs. + await expect( + deleteUserProjects(db, "u1", ["p2", "p-other", "p2"]), + ).resolves.toBe(1); + expect(ids(tables.projects)).toEqual(["p1", "p-other"]); + expect(ids(tables.documents)).toEqual(["d1", "d-loose", "d-other"]); + }); + + it("returns 0 for an explicitly empty project list", async () => { + const { db, tables } = fixture(); + await expect(deleteUserProjects(db, "u1", [])).resolves.toBe(0); + expect(tables.projects).toHaveLength(3); + }); + + it("returns 0 when the user owns no projects", async () => { + const { db, tables } = fixture(); + await expect(deleteUserProjects(db, "u3")).resolves.toBe(0); + expect(tables.projects).toHaveLength(3); + expect(deleteFileMock).not.toHaveBeenCalled(); + }); +}); + +// --------------------------------------------------------------------------- +// deleteUserAccountData +// --------------------------------------------------------------------------- + +describe("deleteUserAccountData", () => { + const fixture = () => + makeDb({ + projects: [ + { id: "p1", user_id: "u1", shared_with: [] }, + { + id: "p-other", + user_id: "u2", + shared_with: ["u1@example.com", " U1@Example.com ", "keep@example.com"], + }, + ], + tabular_reviews: [ + { id: "r1", user_id: "u1", shared_with: [] }, + { id: "r-other", user_id: "u2", shared_with: ["u1@example.com"] }, + ], + documents: [ + { id: "d1", user_id: "u1", project_id: null }, + // Guest doc uploaded by another user into u1's project: deleted too. + { id: "d-guest", user_id: "u2", project_id: "p1" }, + { id: "d-other", user_id: "u2", project_id: "p-other" }, + ], + document_versions: [ + { + id: "v1", + document_id: "d1", + storage_path: "documents/u1/d1/source.pdf", + pdf_storage_path: "documents/u1/d1/converted.pdf", + }, + { + id: "v-guest", + document_id: "d-guest", + storage_path: "documents/u2/d-guest/source.docx", + pdf_storage_path: null, + }, + { + id: "v-other", + document_id: "d-other", + storage_path: "documents/u2/d-other/source.pdf", + pdf_storage_path: null, + }, + ], + chats: [ + { id: "c1", user_id: "u1" }, + { id: "c-other", user_id: "u2" }, + ], + tabular_review_chats: [{ id: "rc1", user_id: "u1" }], + project_subfolders: [{ id: "f1", user_id: "u1" }], + hidden_workflows: [{ id: "h1", user_id: "u1" }], + workflow_open_source_submissions: [ + { id: "s1", submitted_by_user_id: "u1" }, + ], + workflow_shares: [ + { id: "ws-by", shared_by_user_id: "u1", shared_with_email: "x@y.z" }, + { + id: "ws-to", + shared_by_user_id: "u2", + shared_with_email: "u1@example.com", + }, + { + id: "ws-keep", + shared_by_user_id: "u2", + shared_with_email: "keep@example.com", + }, + ], + workflows: [ + { id: "w1", user_id: "u1" }, + { id: "w-other", user_id: "u2" }, + ], + }); + + it("removes the user's rows, files, and share references everywhere", async () => { + const { db, tables } = fixture(); + listFilesMock.mockResolvedValue(["documents/u1/orphan.bin"]); + + await deleteUserAccountData(db, "u1", " U1@Example.COM "); + + // Owned docs and guest docs inside owned projects are gone. + expect(ids(tables.documents)).toEqual(["d-other"]); + expect(ids(tables.projects)).toEqual(["p-other"]); + expect(ids(tables.chats)).toEqual(["c-other"]); + expect(tables.tabular_review_chats).toEqual([]); + expect(ids(tables.tabular_reviews)).toEqual(["r-other"]); + expect(tables.project_subfolders).toEqual([]); + expect(tables.hidden_workflows).toEqual([]); + expect(tables.workflow_open_source_submissions).toEqual([]); + expect(ids(tables.workflows)).toEqual(["w-other"]); + + // Shares by the user and shares to the user's email are both removed. + expect(ids(tables.workflow_shares)).toEqual(["ws-keep"]); + + // The email is scrubbed from other users' shared_with lists + // (case-insensitively), preserving other collaborators. + expect(tables.projects[0].shared_with).toEqual(["keep@example.com"]); + expect(tables.tabular_reviews[0].shared_with).toEqual([]); + + // Version files for deleted docs plus orphans under the user's prefix. + const deletedPaths = deleteFileMock.mock.calls.map(([path]) => path); + expect(deletedPaths.sort()).toEqual([ + "documents/u1/d1/converted.pdf", + "documents/u1/d1/source.pdf", + "documents/u1/orphan.bin", + "documents/u2/d-guest/source.docx", + ]); + expect(listFilesMock).toHaveBeenCalledWith("documents/u1/"); + }); + + it("treats storage prefix cleanup as best-effort", async () => { + const { db, tables } = fixture(); + listFilesMock.mockRejectedValue(new Error("storage unavailable")); + await expect( + deleteUserAccountData(db, "u1", "u1@example.com"), + ).resolves.toBeUndefined(); + expect(ids(tables.documents)).toEqual(["d-other"]); + }); + + it("skips shared_with scrubbing when no email is known", async () => { + const { db, tables } = fixture(); + await deleteUserAccountData(db, "u1", null); + // Rows referencing the email by value are left in place... + expect(tables.projects.find((row) => row.id === "p-other")?.shared_with) + .toContain("u1@example.com"); + expect(ids(tables.workflow_shares)).toEqual(["ws-to", "ws-keep"]); + // ...but the user's own data is still deleted. + expect(ids(tables.documents)).toEqual(["d-other"]); + expect(tables.workflows.map((row) => row.id)).toEqual(["w-other"]); + }); +}); diff --git a/backend/src/lib/__tests__/userLookup.test.ts b/backend/src/lib/__tests__/userLookup.test.ts new file mode 100644 index 0000000..c954bf4 --- /dev/null +++ b/backend/src/lib/__tests__/userLookup.test.ts @@ -0,0 +1,267 @@ +import { describe, it, expect } from "vitest"; +import { + normalizeEmail, + normalizeDisplayName, + loadProfileUsersByEmail, + findProfileUserByEmail, + findMissingUserEmails, + syncProfileEmail, +} from "../userLookup"; + +type Row = Record<string, unknown>; + +/** + * Minimal user_profiles-shaped Supabase mock. Supports the query chains + * userLookup uses (select/eq/in/not + single-row readers) plus insert and + * update so syncProfileEmail can be exercised end to end. + */ +function makeDb(initialRows: Row[]) { + const tables: Record<string, Row[]> = { + user_profiles: initialRows.map((row) => ({ ...row })), + }; + return { + tables, + from(table: string) { + const all = () => tables[table] ?? []; + let predicate: (row: Row) => boolean = () => true; + let mode: "select" | "insert" | "update" = "select"; + let pendingRow: Row = {}; + const narrow = (next: (row: Row) => boolean) => { + const prev = predicate; + predicate = (row) => prev(row) && next(row); + }; + const query: any = { + select: () => query, + insert: (row: Row) => { + mode = "insert"; + pendingRow = row; + return query; + }, + update: (patch: Row) => { + mode = "update"; + pendingRow = patch; + return query; + }, + eq: (column: string, value: unknown) => { + narrow((row) => row[column] === value); + return query; + }, + in: (column: string, values: unknown[]) => { + narrow((row) => values.includes(row[column])); + return query; + }, + not: (column: string, operator: string, value: unknown) => { + if (operator === "is" && value === null) { + narrow((row) => row[column] != null); + } + return query; + }, + maybeSingle: async () => ({ + data: all().filter(predicate)[0] ?? null, + error: null, + }), + then: ( + resolve: (value: { data: Row[] | null; error: null }) => unknown, + reject?: (reason: unknown) => unknown, + ) => { + if (mode === "insert") { + all().push({ ...pendingRow }); + return Promise.resolve({ data: null, error: null }).then( + resolve, + reject, + ); + } + if (mode === "update") { + for (const row of all().filter(predicate)) { + Object.assign(row, pendingRow); + } + return Promise.resolve({ data: null, error: null }).then( + resolve, + reject, + ); + } + return Promise.resolve({ + data: all().filter(predicate), + error: null, + }).then(resolve, reject); + }, + }; + return query; + }, + }; +} + +// --------------------------------------------------------------------------- +// normalizeEmail / normalizeDisplayName +// --------------------------------------------------------------------------- + +describe("normalizeEmail", () => { + it("trims and lowercases", () => { + expect(normalizeEmail(" User@Example.COM ")).toBe("user@example.com"); + }); + + it("returns empty string for non-strings", () => { + expect(normalizeEmail(null)).toBe(""); + expect(normalizeEmail(undefined)).toBe(""); + expect(normalizeEmail(42)).toBe(""); + }); +}); + +describe("normalizeDisplayName", () => { + it("trims usable names", () => { + expect(normalizeDisplayName(" Ada Lovelace ")).toBe("Ada Lovelace"); + }); + + it("returns null for empty or non-string values", () => { + expect(normalizeDisplayName(" ")).toBeNull(); + expect(normalizeDisplayName("")).toBeNull(); + expect(normalizeDisplayName(null)).toBeNull(); + expect(normalizeDisplayName(7)).toBeNull(); + }); +}); + +// --------------------------------------------------------------------------- +// loadProfileUsersByEmail +// --------------------------------------------------------------------------- + +describe("loadProfileUsersByEmail", () => { + it("indexes profiles by normalized email and by id", async () => { + const db = makeDb([ + { user_id: "u1", email: "Alice@Example.com", display_name: " Alice " }, + { user_id: "u2", email: "bob@example.com", display_name: null }, + ]); + const { userByEmail, userById } = await loadProfileUsersByEmail( + db as any, + ); + expect(userByEmail.get("alice@example.com")).toEqual({ + id: "u1", + email: "alice@example.com", + display_name: "Alice", + }); + expect(userById.get("u2")).toEqual({ + id: "u2", + email: "bob@example.com", + display_name: null, + }); + expect(userByEmail.size).toBe(2); + }); + + it("skips rows whose email normalizes to empty", async () => { + const db = makeDb([ + { user_id: "u1", email: " ", display_name: null }, + { user_id: "u2", email: "ok@example.com", display_name: null }, + ]); + const { userByEmail } = await loadProfileUsersByEmail(db as any); + expect(userByEmail.size).toBe(1); + expect(userByEmail.has("ok@example.com")).toBe(true); + }); +}); + +// --------------------------------------------------------------------------- +// findProfileUserByEmail +// --------------------------------------------------------------------------- + +describe("findProfileUserByEmail", () => { + const rows = [ + { user_id: "u1", email: "alice@example.com", display_name: "Alice" }, + ]; + + it("finds a profile by normalized email", async () => { + const db = makeDb(rows); + await expect( + findProfileUserByEmail(db as any, " ALICE@example.com "), + ).resolves.toEqual({ + id: "u1", + email: "alice@example.com", + display_name: "Alice", + }); + }); + + it("returns null when no profile matches", async () => { + const db = makeDb(rows); + await expect( + findProfileUserByEmail(db as any, "missing@example.com"), + ).resolves.toBeNull(); + }); + + it("returns null without querying for empty input", async () => { + const db = makeDb(rows); + await expect(findProfileUserByEmail(db as any, " ")).resolves.toBeNull(); + }); +}); + +// --------------------------------------------------------------------------- +// findMissingUserEmails +// --------------------------------------------------------------------------- + +describe("findMissingUserEmails", () => { + const db = makeDb([ + { user_id: "u1", email: "alice@example.com", display_name: null }, + ]); + + it("returns only emails with no matching profile", async () => { + await expect( + findMissingUserEmails(db as any, [ + "Alice@Example.com", + "carol@example.com", + ]), + ).resolves.toEqual(["carol@example.com"]); + }); + + it("dedupes and drops empty entries before querying", async () => { + await expect( + findMissingUserEmails(db as any, [ + "carol@example.com", + " CAROL@example.com ", + "", + " ", + ]), + ).resolves.toEqual(["carol@example.com"]); + }); + + it("returns [] for an empty input list", async () => { + await expect(findMissingUserEmails(db as any, [])).resolves.toEqual([]); + }); +}); + +// --------------------------------------------------------------------------- +// syncProfileEmail +// --------------------------------------------------------------------------- + +describe("syncProfileEmail", () => { + it("inserts a profile row when none exists", async () => { + const db = makeDb([]); + const result = await syncProfileEmail(db as any, "u1", "New@Example.com"); + expect(result).toBeNull(); + expect(db.tables.user_profiles).toEqual([ + { user_id: "u1", email: "new@example.com" }, + ]); + }); + + it("is a no-op when the stored email already matches (case-insensitive)", async () => { + const db = makeDb([ + { user_id: "u1", email: "Same@Example.com", display_name: null }, + ]); + const result = await syncProfileEmail(db as any, "u1", "same@example.com"); + expect(result).toBeNull(); + expect(db.tables.user_profiles[0].email).toBe("Same@Example.com"); + }); + + it("updates the stored email when it changed", async () => { + const db = makeDb([ + { user_id: "u1", email: "old@example.com", display_name: null }, + ]); + const result = await syncProfileEmail(db as any, "u1", "New@Example.com"); + expect(result).toBeNull(); + expect(db.tables.user_profiles[0].email).toBe("new@example.com"); + expect(db.tables.user_profiles[0].updated_at).toEqual(expect.any(String)); + }); + + it("returns null without touching the table for missing inputs", async () => { + const db = makeDb([]); + await expect(syncProfileEmail(db as any, "", "a@b.com")).resolves.toBeNull(); + await expect(syncProfileEmail(db as any, "u1", null)).resolves.toBeNull(); + await expect(syncProfileEmail(db as any, "u1", " ")).resolves.toBeNull(); + expect(db.tables.user_profiles).toEqual([]); + }); +}); diff --git a/backend/vitest.config.mts b/backend/vitest.config.mts index 2f39f1d..b945289 100644 --- a/backend/vitest.config.mts +++ b/backend/vitest.config.mts @@ -16,20 +16,22 @@ export default defineConfig({ reporter: ["text", "lcov"], include: ["src/lib/**"], // No-regression RATCHET floor, not a target. src/lib/** spans the - // small, tested libs (access, storage keys/dispositions, - // downloadTokens, userApiKeys provider/env checks, chat doc - // resolution) AND the large, still-untested feature libs - // (courtlistener, mcp, chat tool dispatch, llm providers, - // spreadsheet/docx handling), so the global number is low. - // Measured on this tree: 2.58% statements, 2.00% branches, - // 4.61% functions, 2.58% lines. These floors sit just below - // that (rounded down to whole percents) so CI fails on a - // *drop*; raise them as the feature-lib backlog gets covered. + // tested libs (access, storage keys/dispositions, downloadTokens, + // userApiKeys provider/env checks, chat doc resolution, safeError, + // llm model resolution, chat citations, userLookup, + // documentVersions, userDataCleanup) AND the large, still-untested + // feature libs (courtlistener, mcp, chat tool dispatch, llm + // providers, spreadsheet/docx handling), so the global number is + // still low. Measured on this tree: 11.18% statements, 10.98% + // branches, 14.43% functions, 10.91% lines. These floors sit just + // below that (rounded down to whole percents) so CI fails on a + // *drop*. Floors only go up: when you add tests, raise them in the + // same PR. Backlog + per-area status: docs/testing-coverage.md. thresholds: { - statements: 2, - branches: 2, - functions: 4, - lines: 2, + statements: 11, + branches: 10, + functions: 14, + lines: 10, }, }, }, diff --git a/docs/testing-coverage.md b/docs/testing-coverage.md new file mode 100644 index 0000000..c62789c --- /dev/null +++ b/docs/testing-coverage.md @@ -0,0 +1,122 @@ +# Backend unit-test coverage + +The backend has a Vitest unit-test harness over `backend/src/lib/**`. This doc +tracks what is covered, what still needs tests, and how the coverage ratchet +works — so you can pick up a checkbox below and land it as a small PR. + +## Running the tests + +```bash +cd backend +npm install +npm test # run all unit tests +npm run test:coverage # same, plus the per-file coverage table + floor check +``` + +Tests live in `backend/src/lib/__tests__/*.test.ts`. Read a couple of the +existing suites first (`access.test.ts`, `userDataCleanup.test.ts`) and match +their conventions: plain in-memory Supabase query mocks (no network, no real +database), one `describe` block per exported function, and tests that assert +current behavior. + +## Current coverage (measured 2026-07) + +Per-area statement coverage from `npm run test:coverage`: + +| Lib area | % statements | Tested? | +| --- | ---: | :---: | +| `lib/safeError.ts` | 100 | ✓ | +| `lib/userDataCleanup.ts` | 100 | ✓ | +| `lib/llm/models.ts` | 100 | ✓ | +| `lib/documentVersions.ts` | 98 | ✓ | +| `lib/chat/citations.ts` | 98 | ✓ | +| `lib/userLookup.ts` | 91 | ✓ | +| `lib/downloadTokens.ts` | 87 | ✓ | +| `lib/chat/types.ts` | 85 | ✓ | +| `lib/access.ts` | 76 | ✓ | +| `lib/storage.ts` | 33 | partial — key/disposition helpers only | +| `lib/userApiKeys.ts` | 13 | partial — provider/env helpers only | +| `lib/documentTypes.ts`, `lib/userSettings.ts`, `lib/upload.ts`, `lib/officeText.ts` | 0 | ✗ | +| `lib/convert.ts`, `lib/spreadsheet.ts`, `lib/docxTrackedChanges.ts` | 0 | ✗ | +| `lib/userDataExport.ts` | 0 | ✗ | +| `lib/courtlistener.ts`, `lib/systemWorkflows.ts` | 0 | ✗ | +| `lib/chat/prompts.ts`, `lib/chat/contextBuilders.ts`, `lib/chat/streaming.ts` | 0 | ✗ | +| `lib/chat/tools/**` (schemas, documentOps, toolDispatcher) | 0 | ✗ | +| `lib/llm/**` (providers, tools, index, rawStreamLog) | ~4 | ✗ (only models.ts) | +| `lib/mcp/**` (client, servers, oauth, types) | 0 | ✗ | + +Global: **11.18% statements / 10.98% branches / 14.43% functions / 10.91% +lines**. The global number is low because `src/lib/**` includes several very +large feature libs (toolDispatcher, documentOps, systemWorkflows, +courtlistener, docxTrackedChanges) that dominate the line count. + +## TODO — untested libs, in priority order + +Each item is meant to be one self-contained PR: add the suite, then raise the +floors in `backend/vitest.config.mts` to just below the new measured numbers. +Size is a rough guess: S ≈ an hour, M ≈ an afternoon. + +- [ ] `lib/documentTypes.ts` — pure catalog/lookup of document types; assert + known types resolve and unknown inputs fall back sanely. (S) +- [ ] `lib/chat/prompts.ts` — pure prompt builders; assert key instructions and + interpolated values appear in the output strings. (S) +- [ ] `lib/userSettings.ts` — title/tabular model resolution from which API + keys a user has; reuse the Supabase mock pattern from + `userLookup.test.ts`. (S) +- [ ] `lib/upload.ts` — multer wrapper: assert LIMIT_FILE_SIZE maps to a 413 + with the right message and other errors pass through. (S) +- [ ] `lib/officeText.ts` — office XML text extraction; build a tiny in-memory + zip fixture with JSZip and assert extracted/decoded text. (S) +- [ ] `lib/chat/tools/toolSchemas.ts` — assert every tool schema has a name, + description, and well-formed parameters (guards against schema drift). (S) +- [ ] `lib/userApiKeys.ts` (rest) — encrypt/decrypt round-trip and DB + load/store paths with a mocked Supabase client. (M) +- [ ] `lib/storage.ts` (rest) — S3 upload/download/list/delete wrappers with a + mocked AWS SDK client. (M) +- [ ] `lib/userDataExport.ts` — export assembly: given seeded mock tables, + assert the export contains the user's data and nobody else's. (M) +- [ ] `lib/spreadsheet.ts` — parse a small in-memory xlsx fixture; assert sheet + and cell extraction, including empty/edge cells. (M) +- [ ] `lib/chat/contextBuilders.ts` — context assembly from doc stores; assert + doc labels, truncation, and ordering. (M) +- [ ] `lib/docxTrackedChanges.ts` — tracked-changes XML round-trip on a minimal + docx fixture: insert/delete runs, accept/reject. High value: document + integrity. (M) +- [ ] `lib/courtlistener.ts` — API client with mocked fetch: query building, + pagination, and error paths. Legal-research correctness. (M) +- [ ] `lib/systemWorkflows.ts` — mostly data: assert workflow definitions are + well-formed (unique ids, non-empty skill markdown). (S) +- [ ] `lib/llm/tools.ts` + `lib/llm/index.ts` — provider-neutral tool plumbing + and provider selection with mocked provider modules. (M) +- [ ] `lib/mcp/types.ts` + `lib/mcp/servers.ts` — server config validation and + allow-listing logic; security relevant. (M) +- [ ] `lib/mcp/client.ts` + `lib/mcp/oauth.ts` — connection lifecycle and OAuth + token handling with a mocked MCP SDK; security relevant. (M) +- [ ] `lib/llm/rawStreamLog.ts` — log path construction and redaction with a + mocked fs. (S) +- [ ] `lib/chat/tools/documentOps.ts` — start with the pure helpers (diff/match + utilities), not the full tool handlers. (M) +- [ ] `lib/chat/tools/toolDispatcher.ts` — dispatch table routing and argument + validation with stubbed tools; don't try to cover every tool body. (M) +- [ ] `lib/chat/streaming.ts` + `lib/llm/{claude,gemini,openai}.ts` — streaming + loops and provider adapters; hardest to unit test, consider extracting + pure chunk-parsing helpers first. (M) + +Not worth unit testing directly: `lib/supabase.ts` and `lib/convert.ts` are +thin wrappers around external services (Supabase auth, LibreOffice); they are +better exercised by the e2e suite. + +## Ratchet policy + +`backend/vitest.config.mts` enforces global coverage **floors** (currently +statements 11 / branches 10 / functions 14 / lines 10). They are a +no-regression ratchet, not a target: + +- **Floors only go up.** Never lower them to get a PR green — that means your + change removed tested behavior or added a large untested lib; add tests + instead. +- **Raise them in the same PR that adds tests.** After your suite passes, run + `npm run test:coverage`, take the new global numbers, and set each floor to + the measured value rounded down to a whole percent. +- Keep the measured numbers in the config comment and the table above honest + when you do. From 36cddb256662cb0ac49c3cf522a68c70ec71bd6f Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Mon, 20 Jul 2026 11:30:05 -0700 Subject: [PATCH 17/21] fix: batch directory-modal project fetch instead of N+1 getProject burst MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Every directory picker (AddDocumentsModal, UseWorkflowModal, the assistant project selector) loads its "Projects" tab through useDirectoryData, which fired one GET /projects/:id for EVERY existing project the moment the modal opened. Each of those requests costs an auth verification against GoTrue plus ~6 PostgREST queries, so an account with N projects produced an ~8xN-request burst on the Supabase gateway per modal open. Under that burst the gateway genuinely falls over: measured locally against the Supabase CLI stack, overlapping modal-open storms drove GoTrue into Postgres connection exhaustion ("failed to connect ... context deadline exceeded") and produced 467x 500 + 641x 504 on /auth/v1/user in a single run — surfacing to users as failed project creates/loads, and to the e2e suite as the intermittent Kong 502s its specs currently retry around. Fix: GET /projects now accepts ?include=documents and returns each project's documents from one batched query (same attach helpers as GET /projects/:id, run once across all documents), and useDirectoryData uses it. A modal open is now 1 API request and a fixed number of DB queries regardless of project count. After the change the same storm harness produced zero 5xx and zero auth failures. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- backend/src/routes/projects.ts | 47 ++++++++++++++++++- .../app/components/shared/useDirectoryData.ts | 21 +++------ frontend/src/app/lib/mikeApi.ts | 7 ++- 3 files changed, 58 insertions(+), 17 deletions(-) diff --git a/backend/src/routes/projects.ts b/backend/src/routes/projects.ts index cdf03b4..bea8eca 100644 --- a/backend/src/routes/projects.ts +++ b/backend/src/routes/projects.ts @@ -152,9 +152,16 @@ async function attachChatCreatorLabels( } // GET /projects +// Pass ?include=documents to also receive each project's documents in the +// same response. The directory pickers (useDirectoryData) previously fanned +// out one GET /projects/:id per project to obtain those documents; with N +// projects that burst — auth check plus several DB queries per request — +// could overwhelm the Supabase gateway. Batching keeps it at one request +// and a fixed number of queries regardless of project count. projectsRouter.get("/", requireAuth, async (req, res) => { const userId = res.locals.userId as string; const userEmail = res.locals.userEmail as string | undefined; + const includeDocuments = req.query.include === "documents"; const db = createServerSupabase(); const { data, error } = await db.rpc("get_projects_overview", { @@ -163,7 +170,45 @@ projectsRouter.get("/", requireAuth, async (req, res) => { }); if (error) return void res.status(500).json({ detail: error.message }); - res.json(data ?? []); + const projects = (data ?? []) as { id: string }[]; + if (!includeDocuments || projects.length === 0) { + return void res.json(projects); + } + + const { data: docs, error: docsError } = await db + .from("documents") + .select("*") + .in( + "project_id", + projects.map((p) => p.id), + ) + .order("created_at", { ascending: true }); + if (docsError) + return void res.status(500).json({ detail: docsError.message }); + + const docsTyped = (docs ?? []) as unknown as { + id: string; + project_id?: string | null; + user_id?: string | null; + current_version_id?: string | null; + }[]; + await attachLatestVersionNumbers(db, docsTyped); + await attachActiveVersionPaths(db, docsTyped); + await attachDocumentOwnerLabels(db, docsTyped); + + const docsByProject = new Map<string, typeof docsTyped>(); + for (const doc of docsTyped) { + if (!doc.project_id) continue; + const bucket = docsByProject.get(doc.project_id); + if (bucket) bucket.push(doc); + else docsByProject.set(doc.project_id, [doc]); + } + res.json( + projects.map((p) => ({ + ...p, + documents: docsByProject.get(p.id) ?? [], + })), + ); }); // POST /projects diff --git a/frontend/src/app/components/shared/useDirectoryData.ts b/frontend/src/app/components/shared/useDirectoryData.ts index 87e23b9..7d4a500 100644 --- a/frontend/src/app/components/shared/useDirectoryData.ts +++ b/frontend/src/app/components/shared/useDirectoryData.ts @@ -1,11 +1,7 @@ "use client"; import { useCallback, useEffect, useRef, useState } from "react"; -import { - getLibrary, - getProject, - listProjects, -} from "@/app/lib/mikeApi"; +import { getLibrary, listProjects } from "@/app/lib/mikeApi"; import type { Document, LibraryFolder, Project } from "./types"; export type DirectoryTab = "files" | "templates" | "projects"; @@ -45,17 +41,14 @@ async function loadTemplates() { } async function loadProjects() { - const projects = await listProjects(); - const fullProjects = await Promise.all( - projects.map((project) => getProject(project.id)), - ); - const projectCounts = new Map( - projects.map((project) => [project.id, project.document_count ?? 0]), - ); - return fullProjects.map((project) => ({ + // One batched request. Fanning out getProject(id) per project caused an + // N+1 burst on every directory-modal open that could overwhelm the + // Supabase gateway once an account had accumulated projects. + const projects = await listProjects({ includeDocuments: true }); + return projects.map((project) => ({ ...project, document_count: - project.documents?.length ?? projectCounts.get(project.id) ?? 0, + project.documents?.length ?? project.document_count ?? 0, })); } diff --git a/frontend/src/app/lib/mikeApi.ts b/frontend/src/app/lib/mikeApi.ts index ad3959c..6dbaa1e 100644 --- a/frontend/src/app/lib/mikeApi.ts +++ b/frontend/src/app/lib/mikeApi.ts @@ -163,8 +163,11 @@ async function toApiError(response: Response, path: string) { // Projects // --------------------------------------------------------------------------- -export async function listProjects(): Promise<Project[]> { - return apiRequest<Project[]>("/projects"); +export async function listProjects(options?: { + includeDocuments?: boolean; +}): Promise<Project[]> { + const query = options?.includeDocuments ? "?include=documents" : ""; + return apiRequest<Project[]>(`/projects${query}`); } export async function createProject( From 6aed350a3cadda5abb30345210fab19401b5a1d7 Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Wed, 22 Jul 2026 10:22:26 -0700 Subject: [PATCH 18/21] fix: repair JSON corrupted by the merge of main (package.json + lockfile) The "Merge branch 'main'" commit (71a7aba) auto-merged backend/package.json and backend/package-lock.json without raising a conflict, but git's line-level merge produced invalid JSON in both files: package.json lost the comma after the new "test:stack" script, and package-lock.json lost the two closing-brace lines of the supertest/cookie-signature entry. npm treats an unparseable lockfile as absent, which is why CI failed with the misleading "npm ci can only install with an existing package-lock.json". package.json: restore the comma. package-lock.json: rebuilt from main's known-good copy via `npm install --package-lock-only` against this branch's package.json. Verified locally: npm ci, npm test (259 passed), npm run build. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- backend/package-lock.json | 2 ++ backend/package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/backend/package-lock.json b/backend/package-lock.json index 11c4367..7bed718 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -6806,6 +6806,8 @@ "license": "MIT", "engines": { "node": ">=6.6.0" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/backend/package.json b/backend/package.json index e64e591..0223d9a 100644 --- a/backend/package.json +++ b/backend/package.json @@ -7,7 +7,7 @@ "build": "tsc", "start": "node dist/index.js", "test": "vitest run", - "test:stack": "bash scripts/test-stack.sh" + "test:stack": "bash scripts/test-stack.sh", "test:coverage": "vitest run --coverage" }, "dependencies": { From e25c2637ecec700a2da271b1735673dd50f573a7 Mon Sep 17 00:00:00 2001 From: QA Runner <qa@local> Date: Wed, 22 Jul 2026 10:23:15 -0700 Subject: [PATCH 19/21] ci: guard against silently merge-corrupted lockfiles PR #233's CI failed with "npm ci can only install with an existing package-lock.json" even though the file existed: a "Merge branch 'main'" commit had auto-merged backend/package.json and package-lock.json into invalid JSON with no conflict raised, and npm reports an unparseable lockfile as if it were missing. Two guards: .gitattributes marks package-lock.json/bun.lock merge=binary so concurrent lockfile changes surface as explicit conflicts (resolve by regenerating, never hand-merging), and CI parse-checks package.json and the lockfile before npm ci so any corruption that still lands fails with the real reason. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- .gitattributes | 8 ++++++++ .github/workflows/ci.yml | 12 ++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 .gitattributes diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..d2edaa9 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,8 @@ +# Lockfiles are generated files. Git's line-level text merge can combine +# both sides' insertions into syntactically invalid JSON *without raising a +# conflict* (this silently broke backend/package.json + package-lock.json in +# PR #233). Merge them as binary so any concurrent change surfaces as an +# explicit conflict; resolve by taking main's copy and regenerating: +# git checkout origin/main -- package-lock.json && npm install +package-lock.json merge=binary +bun.lock merge=binary diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b14ec8a..c41f910 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -32,6 +32,14 @@ jobs: cache: npm cache-dependency-path: backend/package-lock.json + # Git's line-level merge can splice both sides of package(-lock).json + # into invalid JSON without a conflict (bit PR #233). npm's own error + # for an unparseable lockfile is the misleading "npm ci can only + # install with an existing package-lock.json" — fail fast with the real + # reason instead. + - name: Validate package.json and lockfile parse + run: node -e "for (const f of ['package.json','package-lock.json']) JSON.parse(require('fs').readFileSync(f, 'utf8'))" + - run: npm ci # No-ops on a tree without a "test" script (e.g. before the vitest @@ -55,6 +63,10 @@ jobs: cache: npm cache-dependency-path: frontend/package-lock.json + # Same silent-merge-corruption guard as the backend job. + - name: Validate package.json and lockfile parse + run: node -e "for (const f of ['package.json','package-lock.json']) JSON.parse(require('fs').readFileSync(f, 'utf8'))" + - run: npm ci # No-ops on a tree without a "test" script (e.g. before the vitest From 9399fce86d9c2f6b6fc8c06899abbf6535762de3 Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Thu, 23 Jul 2026 19:08:08 +0800 Subject: [PATCH 20/21] fix stack test database initialization --- backend/schema.sql | 7 +++++ backend/scripts/test-stack.sh | 29 +++++++++++++++++-- .../integration/access.supabase.test.ts | 17 +++++++++-- 3 files changed, 49 insertions(+), 4 deletions(-) diff --git a/backend/schema.sql b/backend/schema.sql index e475b76..48957b8 100644 --- a/backend/schema.sql +++ b/backend/schema.sql @@ -885,3 +885,10 @@ revoke all on public.user_mcp_connector_tools from anon, authenticated; revoke all on public.user_mcp_tool_audit_logs from anon, authenticated; revoke all on public.courtlistener_citation_index from anon, authenticated; revoke all on public.courtlistener_opinion_cluster_index from anon, authenticated; + +-- Tables created by this file are owned by the database bootstrap role. The +-- backend connects as service_role, so grant it the privileges that the direct +-- browser roles above intentionally do not have. RLS is still enabled as +-- defense in depth; service_role bypasses it for the backend data path. +grant all privileges on all tables in schema public to service_role; +grant all privileges on all sequences in schema public to service_role; diff --git a/backend/scripts/test-stack.sh b/backend/scripts/test-stack.sh index 2f647a7..f75deae 100755 --- a/backend/scripts/test-stack.sh +++ b/backend/scripts/test-stack.sh @@ -9,6 +9,10 @@ # npm run test:stack (from backend/) set -euo pipefail +SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)" +BACKEND_DIR="$(cd -- "$SCRIPT_DIR/.." && pwd)" +SCHEMA_FILE="$BACKEND_DIR/schema.sql" + if ! command -v supabase >/dev/null 2>&1; then echo "supabase CLI not found. Install: brew install supabase/tap/supabase" >&2 exit 1 @@ -24,14 +28,35 @@ read_key() { node -e "let s='';process.stdin.on('data',d=>s+=d).on('end',()=>pro SUPABASE_TEST_URL="$(read_key API_URL)" SUPABASE_TEST_SERVICE_ROLE_KEY="$(read_key SERVICE_ROLE_KEY)" SUPABASE_TEST_ANON_KEY="$(read_key ANON_KEY)" +SUPABASE_TEST_DB_URL="$(read_key DB_URL)" -if [[ -z "$SUPABASE_TEST_URL" || -z "$SUPABASE_TEST_SERVICE_ROLE_KEY" || -z "$SUPABASE_TEST_ANON_KEY" ]]; then - echo "Could not read API_URL/SERVICE_ROLE_KEY/ANON_KEY from 'supabase status'." >&2 +if [[ -z "$SUPABASE_TEST_URL" || -z "$SUPABASE_TEST_SERVICE_ROLE_KEY" || -z "$SUPABASE_TEST_ANON_KEY" || -z "$SUPABASE_TEST_DB_URL" ]]; then + echo "Could not read API_URL/DB_URL/SERVICE_ROLE_KEY/ANON_KEY from 'supabase status'." >&2 exit 1 fi export SUPABASE_TEST_URL SUPABASE_TEST_SERVICE_ROLE_KEY SUPABASE_TEST_ANON_KEY +if ! command -v psql >/dev/null 2>&1; then + echo "psql not found. Install PostgreSQL's client tools before running stack tests." >&2 + exit 1 +fi + +# A newly started local stack contains Supabase's system schemas but none of +# Mike's application tables. Initialize only an empty stack: silently resetting +# or modifying an existing application database would be surprising. +PROJECTS_TABLE="$( + psql "$SUPABASE_TEST_DB_URL" -XAtq \ + -c "select to_regclass('public.projects');" +)" +if [[ "$PROJECTS_TABLE" != "projects" ]]; then + echo "Mike schema not found; loading $SCHEMA_FILE" + psql "$SUPABASE_TEST_DB_URL" -X \ + --set ON_ERROR_STOP=1 \ + --file "$SCHEMA_FILE" +fi + echo "Running stack integration tests against $SUPABASE_TEST_URL" +cd "$BACKEND_DIR" exec npx vitest run \ src/__tests__/integration/stack.supabase.test.ts \ src/__tests__/integration/access.supabase.test.ts \ diff --git a/backend/src/__tests__/integration/access.supabase.test.ts b/backend/src/__tests__/integration/access.supabase.test.ts index 65b9244..edfea6d 100644 --- a/backend/src/__tests__/integration/access.supabase.test.ts +++ b/backend/src/__tests__/integration/access.supabase.test.ts @@ -28,7 +28,7 @@ maybeDescribe("Supabase access integration", () => { const privateDocId = crypto.randomUUID(); try { - await admin.from("projects").insert([ + const projectsInsert = await admin.from("projects").insert([ { id: sharedProjectId, user_id: ownerId, @@ -42,9 +42,16 @@ maybeDescribe("Supabase access integration", () => { shared_with: [], }, ]); + if (projectsInsert.error) { + throw new Error( + `Could not seed projects: ${projectsInsert.error.message}`, + { cause: projectsInsert.error }, + ); + } + // filename/file_type live on document_versions in this schema — // the documents rows only need identity + ownership columns. - await admin.from("documents").insert([ + const documentsInsert = await admin.from("documents").insert([ { id: sharedDocId, user_id: ownerId, @@ -56,6 +63,12 @@ maybeDescribe("Supabase access integration", () => { project_id: privateProjectId, }, ]); + if (documentsInsert.error) { + throw new Error( + `Could not seed documents: ${documentsInsert.error.message}`, + { cause: documentsInsert.error }, + ); + } await expect( listAccessibleProjectIds( From b2dbb39c62f93c8a1afd3079be2179e3a81fab9a Mon Sep 17 00:00:00 2001 From: willchen96 <weiye.chen96@icloud.com> Date: Thu, 23 Jul 2026 21:37:11 +0800 Subject: [PATCH 21/21] narrow service role schema grants --- backend/schema.sql | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/backend/schema.sql b/backend/schema.sql index 48957b8..6819473 100644 --- a/backend/schema.sql +++ b/backend/schema.sql @@ -887,8 +887,12 @@ revoke all on public.courtlistener_citation_index from anon, authenticated; revoke all on public.courtlistener_opinion_cluster_index from anon, authenticated; -- Tables created by this file are owned by the database bootstrap role. The --- backend connects as service_role, so grant it the privileges that the direct --- browser roles above intentionally do not have. RLS is still enabled as --- defense in depth; service_role bypasses it for the backend data path. -grant all privileges on all tables in schema public to service_role; -grant all privileges on all sequences in schema public to service_role; +-- backend connects as service_role, so grant it only the data privileges that +-- the direct browser roles above intentionally do not have. RLS is still +-- enabled as defense in depth; service_role bypasses it for the backend path. +grant select, insert, update, delete + on all tables in schema public + to service_role; +grant usage, select + on all sequences in schema public + to service_role;