Merge pull request #148 from willchen96/document-ui-tabular-updates

Update document UI, tabular reviews, and storage caching

Author: willchen96

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:

backend/schema.sql

@@ -283,6 +283,7 @@ create table if not exists public.tabular_reviews (
   user_id text not null,
   title text,
   columns_config jsonb,
+  document_ids jsonb,
   workflow_id uuid references public.workflows(id) on delete set null,
   practice text,
   shared_with jsonb not null default '[]'::jsonb,

backend/src/lib/convert.ts

@@ -1,4 +1,3 @@
-import { promisify } from "util";
 import JSZip from "jszip";
 
 let _convert:
@@ -8,7 +7,26 @@ let _convert:
 async function getConvert() {
   if (!_convert) {
     const libre = await import("libreoffice-convert");
-    _convert = promisify(libre.default.convert.bind(libre.default));
+    const convert = libre.default.convert.bind(libre.default) as (
+      buf: Buffer,
+      ext: string,
+      filter: undefined,
+      callback?: (err: Error | null, result: Buffer) => void,
+    ) => Promise<Buffer> | void;
+    _convert = (buf, ext, filter) =>
+      new Promise<Buffer>((resolve, reject) => {
+        try {
+          const maybePromise = convert(buf, ext, filter, (err, result) => {
+            if (err) reject(err);
+            else resolve(result);
+          });
+          if (maybePromise && typeof maybePromise.then === "function") {
+            maybePromise.then(resolve, reject);
+          }
+        } catch (err) {
+          reject(err);
+        }
+      });
   }
   return _convert;
 }

backend/src/lib/storage.ts

@@ -17,16 +17,21 @@ import {
 } from "@aws-sdk/client-s3";
 import { getSignedUrl as awsGetSignedUrl } from "@aws-sdk/s3-request-presigner";
 
+let cachedClient: S3Client | undefined;
+
 function getClient(): S3Client {
-  return new S3Client({
-    region: "auto",
-    endpoint: process.env.R2_ENDPOINT_URL!,
-    forcePathStyle: true,
-    credentials: {
-      accessKeyId: process.env.R2_ACCESS_KEY_ID!,
-      secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
-    },
-  });
+  if (!cachedClient) {
+    cachedClient = new S3Client({
+      region: "auto",
+      endpoint: process.env.R2_ENDPOINT_URL!,
+      forcePathStyle: true,
+      credentials: {
+        accessKeyId: process.env.R2_ACCESS_KEY_ID!,
+        secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
+      },
+    });
+  }
+  return cachedClient;
 }
 
 const BUCKET = process.env.R2_BUCKET_NAME ?? "mike";
@@ -37,6 +42,14 @@ export const storageEnabled = Boolean(
   process.env.R2_SECRET_ACCESS_KEY,
 );
 
+function requireStorageConfig(): void {
+  if (!storageEnabled) {
+    throw new Error(
+      "R2_ENDPOINT_URL, R2_ACCESS_KEY_ID, and R2_SECRET_ACCESS_KEY must be set",
+    );
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Upload
 // ---------------------------------------------------------------------------
@@ -46,6 +59,7 @@ export async function uploadFile(
   content: ArrayBuffer,
   contentType: string,
 ): Promise<void> {
+  requireStorageConfig();
   const client = getClient();
   await client.send(
     new PutObjectCommand({

backend/src/routes/chat.ts

@@ -141,6 +141,10 @@ async function getAccessibleChat(
 chatRouter.get("/", requireAuth, async (req, res) => {
     const userId = res.locals.userId as string;
     const db = createServerSupabase();
+    const requestedLimit = Number.parseInt(String(req.query.limit ?? ""), 10);
+    const limit = Number.isFinite(requestedLimit)
+        ? Math.min(Math.max(requestedLimit, 1), 100)
+        : null;
 
     const { data: ownProjects, error: projErr } = await db
         .from("projects")
@@ -156,11 +160,15 @@ chatRouter.get("/", requireAuth, async (req, res) => {
             ? `user_id.eq.${userId},project_id.in.(${ownProjectIds.join(",")})`
             : `user_id.eq.${userId}`;
 
-    const { data, error } = await db
+    let query = db
         .from("chats")
         .select("*")
         .or(filter)
         .order("created_at", { ascending: false });
+
+    if (limit) query = query.limit(limit);
+
+    const { data, error } = await query;
     if (error) return void res.status(500).json({ detail: error.message });
     res.json(data ?? []);
 });

backend/src/routes/tabular.ts

@@ -165,6 +165,15 @@ tabularRouter.get("/", requireAuth, async (req, res) => {
     // Fetch distinct document counts per review
     const reviewIds = reviews.map((r) => (r as { id: string }).id);
     let docCounts: Record<string, number> = {};
+    const reviewsWithExplicitDocs = new Set<string>();
+    for (const review of reviews) {
+        const id = (review as { id: string }).id;
+        if (Array.isArray(review.document_ids)) {
+            const explicitDocIds = review.document_ids;
+            reviewsWithExplicitDocs.add(id);
+            docCounts[id] = new Set(explicitDocIds).size;
+        }
+    }
     if (reviewIds.length > 0) {
         const { data: cells } = await db
             .from("tabular_cells")
@@ -176,8 +185,10 @@ tabularRouter.get("/", requireAuth, async (req, res) => {
                 const key = `${cell.review_id}:${cell.document_id}`;
                 if (!seen.has(key)) {
                     seen.add(key);
-                    docCounts[cell.review_id] =
-                        (docCounts[cell.review_id] ?? 0) + 1;
+                    if (!reviewsWithExplicitDocs.has(cell.review_id)) {
+                        docCounts[cell.review_id] =
+                            (docCounts[cell.review_id] ?? 0) + 1;
+                    }
                 }
             }
         }
@@ -229,6 +240,7 @@ tabularRouter.post("/", requireAuth, async (req, res) => {
             user_id: userId,
             title: title ?? null,
             columns_config,
+            document_ids: allowedDocumentIds,
             project_id: project_id ?? null,
             workflow_id: workflow_id ?? null,
         })
@@ -345,17 +357,19 @@ tabularRouter.get("/:reviewId", requireAuth, async (req, res) => {
         .from("tabular_cells")
         .select("*")
         .eq("review_id", reviewId);
-    const docIds = [...new Set((cells ?? []).map((c) => c.document_id))];
+    const cellDocIds = [...new Set((cells ?? []).map((c) => c.document_id))];
+    const hasExplicitDocIds = Array.isArray(review.document_ids);
+    const explicitDocIds = hasExplicitDocIds
+        ? (review.document_ids as string[])
+        : [];
+    const docIds =
+        hasExplicitDocIds
+            ? explicitDocIds
+            : cellDocIds;
     const docsResult =
         docIds.length > 0
             ? await db.from("documents").select("*").in("id", docIds)
-            : review.project_id
-              ? await db
-                    .from("documents")
-                    .select("*")
-                    .eq("project_id", review.project_id)
-                    .order("created_at", { ascending: true })
-              : { data: [] as Record<string, unknown>[] };
+            : { data: [] as Record<string, unknown>[] };
 
     res.json({
         review: { ...review, is_owner: access.isOwner },
@@ -517,6 +531,7 @@ tabularRouter.patch("/:reviewId", requireAuth, async (req, res) => {
             detail: updateError?.message ?? "Failed to update review",
         });
 
+    let persistedDocumentIds: string[] | undefined;
     if (
         Array.isArray(req.body.columns_config) ||
         Array.isArray(req.body.document_ids)
@@ -577,13 +592,21 @@ tabularRouter.patch("/:reviewId", requireAuth, async (req, res) => {
                     (existingCells ?? []).map((cell) => cell.document_id),
                 ),
             ];
-            if (documentIds.length === 0 && existingReview.project_id) {
-                const { data: projectDocs } = await db
-                    .from("documents")
-                    .select("id")
-                    .eq("project_id", existingReview.project_id);
-                documentIds = (projectDocs ?? []).map((doc) => doc.id);
-            }
+        }
+
+        if (Array.isArray(req.body.document_ids)) {
+            persistedDocumentIds = documentIds;
+            const { error: documentIdsError } = await db
+                .from("tabular_reviews")
+                .update({
+                    document_ids: documentIds,
+                    updated_at: new Date().toISOString(),
+                })
+                .eq("id", reviewId);
+            if (documentIdsError)
+                return void res.status(500).json({
+                    detail: documentIdsError.message,
+                });
         }
 
         const activeColumns = Array.isArray(req.body.columns_config)
@@ -614,7 +637,10 @@ tabularRouter.patch("/:reviewId", requireAuth, async (req, res) => {
         }
     }
 
-    res.json(updatedReview);
+    res.json({
+        ...updatedReview,
+        ...(persistedDocumentIds ? { document_ids: persistedDocumentIds } : {}),
+    });
 });
 
 // DELETE /tabular-review/:reviewId

frontend/src/app/(pages)/layout.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { Menu } from "lucide-react";
+import { PanelLeft } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { ChatHistoryProvider } from "@/app/contexts/ChatHistoryContext";
 import { SidebarContext } from "@/app/contexts/SidebarContext";
@@ -77,7 +77,12 @@ export default function MikeLayout({
     return (
         <ChatHistoryProvider>
             <SidebarContext.Provider
-                value={{ setSidebarOpen: (open) => { setIsSidebarOpen(open); setIsSidebarOpenDesktop(open); } }}
+                value={{
+                    setSidebarOpen: (open) => {
+                        setIsSidebarOpen(open);
+                        setIsSidebarOpenDesktop(open);
+                    },
+                }}
             >
                 <div className="h-dvh bg-white flex flex-col">
                     <div className="flex-1 flex overflow-hidden">
@@ -87,12 +92,14 @@ export default function MikeLayout({
                         />
                         <div className="flex-1 flex flex-col h-dvh md:overflow-hidden relative w-full">
                             {/* Mobile header */}
-                            <div className="flex md:hidden items-center gap-3 px-4 py-3 border-b border-gray-100 shrink-0">
+                            <div className="flex md:hidden items-center gap-3 px-4 pt-3 pb-1 shrink-0">
                                 <button
                                     onClick={handleSidebarToggle}
-                                    className="flex items-center justify-center w-8 h-8 rounded hover:bg-gray-100 text-gray-500 transition-colors"
+                                    className="flex h-8 w-8 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"
+                                    title="Open sidebar"
+                                    aria-label="Open sidebar"
                                 >
-                                    <Menu className="h-5 w-5" />
+                                    <PanelLeft className="h-4 w-4" />
                                 </button>
                             </div>
                             <main className="flex-1 overflow-y-auto md:overflow-hidden w-full h-full">

frontend/src/app/(pages)/projects/[id]/assistant/chat/[chatId]/page.tsx

@@ -84,25 +84,26 @@ function isDocxTab(filename: string) {
     return ext === "docx" || ext === "doc";
 }
 
-const ICON_SIZE = 30;
+const ICON_SIZE = 28;
 const GAP = 14;
 const EXPLORER_MIN = 160;
 const EXPLORER_DEFAULT = 280;
 const CHAT_MIN = 320;
 const CHAT_DEFAULT = 420;
 
 function AssistantGreeting({ username }: { username: string }) {
+    const { profile } = useUserProfile();
     const [loaded, setLoaded] = useState(false);
     const [iconOffset, setIconOffset] = useState(0);
     const [textOffset, setTextOffset] = useState(0);
     const textRef = useRef<HTMLHeadingElement>(null);
 
     useLayoutEffect(() => {
-        if (!textRef.current) return;
+        if (!profile || !textRef.current) return;
         const h1Width = textRef.current.offsetWidth;
         setIconOffset((h1Width + GAP) / 2);
         setTextOffset((ICON_SIZE + GAP) / 2);
-    }, [username]);
+    }, [profile]);
 
     useEffect(() => {
         if (!iconOffset) return;
@@ -112,7 +113,7 @@ function AssistantGreeting({ username }: { username: string }) {
 
     return (
         <div className="flex-1 flex items-center justify-center">
-            <div className="relative flex items-center justify-center h-[30px]">
+            <div className="relative flex items-center justify-center h-[28px]">
                 <div
                     className="absolute h-[30px]"
                     style={{
@@ -128,7 +129,7 @@ function AssistantGreeting({ username }: { username: string }) {
                 </div>
                 <h1
                     ref={textRef}
-                    className="absolute text-2xl font-serif font-light text-gray-900 whitespace-nowrap"
+                    className="absolute text-3xl font-serif font-light text-gray-900 whitespace-nowrap"
                     style={{
                         left: "50%",
                         transform: loaded
@@ -309,9 +310,9 @@ export default function ProjectAssistantChatPage({ params }: Props) {
             `created=${created.sort().join(",")}`,
             `replicated=${replicated.sort().join(",")}`,
             `edited=${Object.entries(editedPerDoc)
-            .map(([k, v]) => `${k}=${v}`)
-            .sort()
-            .join(",")}`,
+                .map(([k, v]) => `${k}=${v}`)
+                .sort()
+                .join(",")}`,
         ].join("|");
     }, [messages]);
 
@@ -1007,8 +1008,9 @@ export default function ProjectAssistantChatPage({ params }: Props) {
                                     <div
                                         key={tab.documentId}
                                         ref={(el) => {
-                                            tabItemRefs.current[tab.documentId] =
-                                                el;
+                                            tabItemRefs.current[
+                                                tab.documentId
+                                            ] = el;
                                         }}
                                         onClick={() =>
                                             switchTab(tab.documentId)