@consilioweb/payload-support 0.9.10 → 0.9.12

package/dist/views/TicketDetailView/client.js

@@ -134,7 +134,9 @@ const TicketDetailClient = () => {
   const [sendAsClient, setSendAsClient] = useState(false);
   const [editingMsgId, setEditingMsgId] = useState(null);
   const [editingBody, setEditingBody] = useState("");
+  const [editingHtml, setEditingHtml] = useState("");
   const [editSaving, setEditSaving] = useState(false);
+  const editEditorRef = useRef(null);
   const [sending, setSending] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [clientTyping, setClientTyping] = useState(false);
@@ -476,10 +478,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
   const startEditMessage = (msg) => {
     setEditingMsgId(msg.id);
     setEditingBody(msg.body || "");
+    setEditingHtml(msg.bodyHtml || (msg.body || "").replace(/\n/g, "<br/>"));
   };
   const cancelEditMessage = () => {
     setEditingMsgId(null);
     setEditingBody("");
+    setEditingHtml("");
   };
   const saveEditMessage = async () => {
     if (editingMsgId === null) return;
@@ -489,11 +493,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true })
+        body: JSON.stringify({ body: editingBody, bodyHtml: editingHtml || null, skipNotification: true })
       });
       if (res.ok) {
         setEditingMsgId(null);
         setEditingBody("");
+        setEditingHtml("");
         fetchAll();
       }
     } catch {
@@ -712,12 +717,29 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   ] }),
                   editingMsgId === msg.id ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
                     /* @__PURE__ */ jsx(
-                      "textarea",
+                      RichTextEditor,
                       {
-                        value: editingBody,
-                        onChange: (e) => setEditingBody(e.target.value),
-                        style: { width: "100%", minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: "inherit", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-                        autoFocus: true
+                        ref: editEditorRef,
+                        initialValue: editingHtml,
+                        onChange: (html, text) => {
+                          setEditingHtml(html);
+                          setEditingBody(text);
+                        },
+                        placeholder: "\xC9diter le message...",
+                        minHeight: 120,
+                        onFileUpload: async (file) => {
+                          try {
+                            const formData = new FormData();
+                            formData.append("file", file);
+                            formData.append("_payload", JSON.stringify({ alt: file.name }));
+                            const ur = await fetch("/api/media", { method: "POST", credentials: "include", body: formData });
+                            if (!ur.ok) return null;
+                            const ud = await ur.json();
+                            return ud.doc?.url || null;
+                          } catch {
+                            return null;
+                          }
+                        }
                       }
                     ),
                     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, justifyContent: "flex-end" }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.9.10",
+  "version": "0.9.12",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/collections/Tickets.ts

@@ -13,6 +13,7 @@ import { dispatchWebhook } from '../utils/webhookDispatcher'
 import { readSupportSettings } from '../utils/readSettings'
 import { createTicketStatusEmail } from '../hooks/ticketStatusEmail'
 import { createAssignSlaDeadlines, createCheckSlaOnResolve } from '../hooks/checkSLA'
+import { generateTicketSynthesis } from '../utils/generateTicketSynthesis'
 
 // ─── Hooks ───────────────────────────────────────────────
 
@@ -154,6 +155,40 @@ function createTrackSLA(slugs: CollectionSlugs): CollectionAfterChangeHook {
   }
 }
 
+function createTrackAiSummaryOnResolve(slugs: CollectionSlugs): CollectionAfterChangeHook {
+  return async ({ doc, previousDoc, operation, req }) => {
+    if (operation !== 'update' || !previousDoc) return doc
+    const wasResolved = previousDoc.status === 'resolved'
+    const isResolved = doc.status === 'resolved'
+
+    // Reopening: clear the cached summary so the next resolve regenerates it
+    if (wasResolved && !isResolved && doc.aiSummary) {
+      try {
+        await req.payload.update({
+          collection: slugs.tickets,
+          id: doc.id,
+          data: { aiSummary: null, aiSummaryGeneratedAt: null, aiSummaryStatus: null },
+          overrideAccess: true,
+        })
+      } catch (err) {
+        console.error('[support] Failed to clear ai summary on reopen:', err)
+      }
+      return doc
+    }
+
+    // Just resolved: trigger generation if not already cached.
+    // Fire-and-forget so the admin UI doesn't block on the LLM call.
+    if (!wasResolved && isResolved && !doc.aiSummary) {
+      // setImmediate keeps the response snappy; failures are logged inside the util.
+      setImmediate(() => {
+        generateTicketSynthesis({ payload: req.payload, slugs, ticketId: doc.id })
+          .catch((err) => console.error('[support] Background ai synthesis failed:', err))
+      })
+    }
+    return doc
+  }
+}
+
 function createLogTicketActivity(slugs: CollectionSlugs): CollectionAfterChangeHook {
   return async ({ doc, previousDoc, operation, req }) => {
     if (operation !== 'update' || !previousDoc) return doc
@@ -596,6 +631,48 @@ export function createTicketsCollection(slugs: CollectionSlugs, options?: {
         admin: { initCollapsed: true },
         fields: billingFields,
       },
+      // AI Synthesis collapsible — auto-filled when ticket is resolved
+      {
+        type: 'collapsible', label: 'Synthese IA',
+        admin: {
+          initCollapsed: true,
+          description: 'Recap factuel genere automatiquement au passage en resolu. Sert au copier-coller dans devis/factures.',
+        },
+        fields: [
+          {
+            name: 'aiSummary',
+            type: 'textarea',
+            label: 'Synthese',
+            admin: {
+              readOnly: true,
+              rows: 8,
+              description: 'Vide tant que le ticket n\'est pas resolu. Effacee si le ticket est reouvert.',
+            },
+          },
+          {
+            type: 'row',
+            fields: [
+              {
+                name: 'aiSummaryGeneratedAt',
+                type: 'date',
+                label: 'Genere le',
+                admin: { readOnly: true, width: '50%', date: { displayFormat: 'dd/MM/yyyy HH:mm' } },
+              },
+              {
+                name: 'aiSummaryStatus',
+                type: 'select',
+                label: 'Statut',
+                options: [
+                  { label: 'En cours', value: 'pending' },
+                  { label: 'Genere', value: 'done' },
+                  { label: 'Erreur', value: 'error' },
+                ],
+                admin: { readOnly: true, width: '50%' },
+              },
+            ],
+          },
+        ],
+      },
       // SLA & Delais
       {
         type: 'collapsible', label: 'SLA & Delais',
@@ -710,6 +787,7 @@ export function createTicketsCollection(slugs: CollectionSlugs, options?: {
       ],
       afterChange: [
         createTrackSLA(slugs),
+        createTrackAiSummaryOnResolve(slugs),
         createAutoCalculateSLA(slugs),
         createAssignSlaDeadlines(slugs, notificationSlug),
         createCheckSlaOnResolve(slugs, notificationSlug),

package/src/components/TicketConversation/hooks/useAI.ts

@@ -89,22 +89,46 @@ export function useAI(
 
   const handleAiRewrite = async (style: string = 'auto') => {
     if (!replyBody.trim()) return
+    // Detect selection inside the editor — if present, rewrite only the selected text
+    const sel = typeof window !== 'undefined' ? window.getSelection() : null
+    const selectedText = sel?.toString().trim() || ''
+    const hasSelection = selectedText.length > 3
+    const textToRewrite = hasSelection ? selectedText : replyBody
+
     setAiRewriting(true)
     try {
       const res = await fetch('/api/support/ai', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ action: 'rewrite', text: replyBody, style }),
+        body: JSON.stringify({ action: 'rewrite', text: textToRewrite, style }),
       })
       if (res.ok) {
         const data = await res.json()
         const rewritten = data.rewritten || ''
         if (rewritten) {
-          setReplyBody(rewritten)
-          setReplyHtml(rewritten.replace(/\n/g, '<br/>'))
-          if (replyEditorRef.current?.setContent) {
-            replyEditorRef.current.setContent(rewritten.replace(/\n/g, '<br/>'))
+          if (hasSelection && sel && sel.rangeCount > 0) {
+            // Replace only the selected text in the contentEditable
+            const range = sel.getRangeAt(0)
+            range.deleteContents()
+            range.insertNode(document.createTextNode(rewritten))
+            // Trigger input event so parent state updates via onInput
+            const editorEl = replyEditorRef.current as unknown as { focus?: () => void } | null
+            editorEl?.focus?.()
+            // Sync state from DOM
+            const rootEl = (range.commonAncestorContainer as HTMLElement).closest?.('[contenteditable]') as HTMLElement | null
+            if (rootEl) {
+              const newHtml = rootEl.innerHTML
+              const newText = rootEl.innerText?.trim() || ''
+              setReplyBody(newText)
+              setReplyHtml(newHtml)
+            }
+          } else {
+            setReplyBody(rewritten)
+            setReplyHtml(rewritten.replace(/\n/g, '<br/>'))
+            if (replyEditorRef.current?.setContent) {
+              replyEditorRef.current.setContent(rewritten.replace(/\n/g, '<br/>'))
+            }
           }
         }
       }

package/src/endpoints/ai.ts

@@ -172,17 +172,22 @@ Rédige une réponse appropriée au dernier message du client. Sois concis (3-5
           const { text, style } = body as { text: string; style?: string }
           if (!text?.trim()) return Response.json({ error: 'text required' }, { status: 400 })
 
-          const styleInstructions: Record<string, string> = {
-            auto: 'Garde le même ton (tutoiement/vouvoiement).',
-            tutoyer: 'Utilise le tutoiement. Si le texte vouvoie, convertis en tutoiement.',
-            vouvoyer: 'Utilise le vouvoiement. Si le texte tutoie, convertis en vouvoiement.',
-            formel: 'Adopte un ton formel et professionnel avec vouvoiement.',
-            court: 'Raccourcis le texte au maximum tout en gardant le sens. Sois concis et direct.',
-            amical: 'Adopte un ton chaleureux et amical avec tutoiement.',
+          const styleInstructions: Record<string, { tone: string; person: string }> = {
+            auto: { tone: 'Garde le ton actuel (neutre professionnel).', person: 'IMPORTANT: Préserve EXACTEMENT le tutoiement ou vouvoiement du texte original.' },
+            tutoyer: { tone: 'Ton décontracté et direct, mais correct.', person: 'CRITIQUE: Utilise IMPÉRATIVEMENT le tutoiement partout (tu, ton, te, toi). Si le texte vouvoie, convertis TOUT en tutoiement. Exemple: "vous pouvez" → "tu peux", "votre" → "ton".' },
+            vouvoyer: { tone: 'Ton neutre et poli.', person: 'CRITIQUE: Utilise IMPÉRATIVEMENT le vouvoiement partout (vous, votre, etc). Si le texte tutoie, convertis TOUT en vouvoiement.' },
+            formel: { tone: 'Ton formel et institutionnel.', person: 'Utilise le vouvoiement partout.' },
+            court: { tone: 'Style concis et direct, phrases courtes, aller à l\'essentiel.', person: 'Préserve le tutoiement/vouvoiement du texte original.' },
+            amical: { tone: 'Ton chaleureux, amical, sympathique, avec un peu de cordialité.', person: 'CRITIQUE: Utilise IMPÉRATIVEMENT le tutoiement partout. Convertis le vouvoiement en tutoiement.' },
           }
           const styleGuide = styleInstructions[style || 'auto'] || styleInstructions.auto
 
-          const prompt = `Tu es un agent de support technique professionnel. Reformule le texte ci-dessous de manière plus professionnelle et corrige les fautes d'orthographe/grammaire. ${styleGuide} Ne change pas le fond du message, améliore uniquement la forme. Réponds UNIQUEMENT avec le texte reformulé, sans commentaire ni explication.
+          const prompt = `Reformule le texte ci-dessous en corrigeant les fautes d'orthographe/grammaire. Ne change pas le fond du message, améliore uniquement la forme.
+
+TON REQUIS: ${styleGuide.tone}
+FORME REQUISE: ${styleGuide.person}
+
+Réponds UNIQUEMENT avec le texte reformulé, sans commentaire ni explication.
 
 Texte original :
 ${text}`

package/src/endpoints/billing.ts

@@ -8,6 +8,10 @@ const MAX_PAGES = 50
 /**
  * GET /api/support/billing?from=...&to=...&projectId=...
  * Admin-only endpoint returning billing data.
+ *
+ * Includes ALL billable tickets active during the period (i.e. updated/created/resolved
+ * between from and to) — even those without any time entries, so the admin can spot
+ * tickets where time was forgotten.
  */
 export function createBillingEndpoint(slugs: CollectionSlugs): Endpoint {
   return {
@@ -29,12 +33,43 @@ export function createBillingEndpoint(slugs: CollectionSlugs): Endpoint {
 
         const projectId = url.searchParams.get('projectId')
 
+        // Build an exclusive upper-bound for ISO datetime fields:
+        // when filtering on updatedAt / resolvedAt with `to=2026-04-30`, we want to include
+        // events that happened on April 30 after 00:00.
+        const toExclusive = new Date(to)
+        toExclusive.setDate(toExclusive.getDate() + 1)
+        const toExclusiveIso = toExclusive.toISOString()
+
         const ticketWhere: Where = {
-          billable: { equals: true },
-          ...(projectId ? { project: { equals: Number(projectId) } } : {}),
+          and: [
+            { billable: { equals: true } },
+            ...(projectId ? [{ project: { equals: Number(projectId) } } as Where] : []),
+            {
+              or: [
+                {
+                  and: [
+                    { updatedAt: { greater_than_equal: from } },
+                    { updatedAt: { less_than: toExclusiveIso } },
+                  ],
+                },
+                {
+                  and: [
+                    { createdAt: { greater_than_equal: from } },
+                    { createdAt: { less_than: toExclusiveIso } },
+                  ],
+                },
+                {
+                  and: [
+                    { resolvedAt: { greater_than_equal: from } },
+                    { resolvedAt: { less_than: toExclusiveIso } },
+                  ],
+                },
+              ],
+            },
+          ],
         }
 
-        // Paginate tickets instead of limit:0
+        // Paginate tickets
         const allTickets: Array<Record<string, unknown>> = []
         let ticketPage = 1
         let ticketHasMore = true
@@ -53,7 +88,7 @@ export function createBillingEndpoint(slugs: CollectionSlugs): Endpoint {
           ticketPage++
         }
 
-        // Paginate time entries instead of limit:0
+        // Paginate time entries within the period
         const allEntries: Array<Record<string, unknown>> = []
         let entryPage = 1
         let entryHasMore = true
@@ -94,15 +129,27 @@ export function createBillingEndpoint(slugs: CollectionSlugs): Endpoint {
         const projectGroups = new Map<string, {
           project: { id: number; name: string } | null
           client: { company: string } | null
-          tickets: Array<{ id: number; ticketNumber: string; subject: string; entries: any[]; totalMinutes: number; billedAmount: number | null }>
+          tickets: Array<{
+            id: number
+            ticketNumber: string
+            subject: string
+            status: string
+            entries: Array<{ duration: number; description: string; date: string }>
+            totalMinutes: number
+            billedAmount: number | null
+            hasNoTimeEntries: boolean
+            aiSummary: string | null
+            aiSummaryGeneratedAt: string | null
+            aiSummaryStatus: string | null
+          }>
           totalMinutes: number
           totalBilledAmount: number
         }>()
 
         for (const ticket of allTickets) {
           const t = ticket as any
-          const ticketEntries = entriesByTicket.get(t.id)
-          if (!ticketEntries || ticketEntries.length === 0) continue
+          const ticketEntries = entriesByTicket.get(t.id) || []
+          const hasNoTimeEntries = ticketEntries.length === 0
 
           const project = typeof t.project === 'object' && t.project
             ? { id: t.project.id, name: t.project.name || 'Sans nom' }
@@ -138,9 +185,14 @@ export function createBillingEndpoint(slugs: CollectionSlugs): Endpoint {
             id: t.id,
             ticketNumber: t.ticketNumber || '',
             subject: t.subject || '',
+            status: t.status || '',
             entries: ticketEntries,
             totalMinutes: ticketTotalMinutes,
             billedAmount,
+            hasNoTimeEntries,
+            aiSummary: t.aiSummary || null,
+            aiSummaryGeneratedAt: t.aiSummaryGeneratedAt || null,
+            aiSummaryStatus: t.aiSummaryStatus || null,
           })
           projectGroups.get(projectKey)!.totalMinutes += ticketTotalMinutes
           if (billedAmount) projectGroups.get(projectKey)!.totalBilledAmount += billedAmount
@@ -149,8 +201,17 @@ export function createBillingEndpoint(slugs: CollectionSlugs): Endpoint {
         const groups = Array.from(projectGroups.values())
         const grandTotalMinutes = groups.reduce((sum, g) => sum + g.totalMinutes, 0)
         const grandTotalBilledAmount = groups.reduce((sum, g) => sum + g.totalBilledAmount, 0)
-
-        return new Response(JSON.stringify({ groups, grandTotalMinutes, grandTotalBilledAmount }), {
+        const ticketsWithoutTime = groups.reduce(
+          (sum, g) => sum + g.tickets.filter((t) => t.hasNoTimeEntries).length,
+          0,
+        )
+
+        return new Response(JSON.stringify({
+          groups,
+          grandTotalMinutes,
+          grandTotalBilledAmount,
+          ticketsWithoutTime,
+        }), {
           headers: {
             'Content-Type': 'application/json',
             'Cache-Control': 'private, max-age=300, stale-while-revalidate=600',

package/src/endpoints/index.ts

@@ -25,6 +25,7 @@ import { createAdminChatGetEndpoint, createAdminChatPostEndpoint } from './admin
 import { createAdminChatStreamEndpoint } from './admin-chat-stream'
 import { createAdminStatsEndpoint } from './admin-stats'
 import { createBillingEndpoint } from './billing'
+import { createTicketSynthesisEndpoint } from './ticket-synthesis'
 import { createEmailStatsEndpoint } from './email-stats'
 import { createSatisfactionEndpoint } from './satisfaction'
 import { createTrackOpenEndpoint } from './track-open'
@@ -65,6 +66,7 @@ export { createAdminChatGetEndpoint, createAdminChatPostEndpoint } from './admin
 export { createAdminChatStreamEndpoint } from './admin-chat-stream'
 export { createAdminStatsEndpoint } from './admin-stats'
 export { createBillingEndpoint } from './billing'
+export { createTicketSynthesisEndpoint } from './ticket-synthesis'
 export { createEmailStatsEndpoint } from './email-stats'
 export { createSatisfactionEndpoint } from './satisfaction'
 export { createTrackOpenEndpoint } from './track-open'
@@ -121,6 +123,7 @@ export function createSupportEndpoints(slugs: CollectionSlugs, options?: Support
   if (!f || f.ai !== false) {
     endpoints.push(createAiEndpoint(slugs))
     endpoints.push(...createClientIntelligenceEndpoint(slugs))
+    endpoints.push(createTicketSynthesisEndpoint(slugs))
   }
   if (!f || f.bulkActions !== false) endpoints.push(createBulkActionEndpoint(slugs))
   if (!f || f.merge !== false) endpoints.push(createMergeTicketsEndpoint(slugs))

package/src/endpoints/ticket-synthesis.ts

@@ -0,0 +1,67 @@
+import type { Endpoint } from 'payload'
+import type { CollectionSlugs } from '../utils/slugs'
+import { requireAdmin, handleAuthError } from '../utils/auth'
+import { generateTicketSynthesis } from '../utils/generateTicketSynthesis'
+
+/**
+ * POST /api/support/ticket-synthesis?ticketId=X[&force=true]
+ *
+ * Admin-only. Generates (or returns the cached) AI bullet-point synthesis for a single ticket.
+ * The synthesis is persisted on the ticket itself (aiSummary, aiSummaryGeneratedAt, aiSummaryStatus).
+ *
+ * Cache behaviour:
+ * - If aiSummary already exists and force is not set, returns the cached value (status: cached).
+ * - If force=true, regenerates regardless of existing summary.
+ * - The hook on Tickets clears aiSummary when a ticket is reopened, so the next pass through
+ *   "resolved" status will trigger a regeneration automatically.
+ */
+export function createTicketSynthesisEndpoint(slugs: CollectionSlugs): Endpoint {
+  return {
+    path: '/support/ticket-synthesis',
+    method: 'post',
+    handler: async (req) => {
+      try {
+        requireAdmin(req, slugs)
+        const payload = req.payload
+
+        const url = new URL(req.url || '', 'http://localhost')
+        const ticketIdRaw = url.searchParams.get('ticketId')
+        const force = url.searchParams.get('force') === 'true'
+
+        if (!ticketIdRaw) {
+          return Response.json({ error: 'ticketId required' }, { status: 400 })
+        }
+
+        const ticketId = Number(ticketIdRaw)
+        if (Number.isNaN(ticketId)) {
+          return Response.json({ error: 'ticketId must be a number' }, { status: 400 })
+        }
+
+        if (!force) {
+          const existing = await payload.findByID({
+            collection: slugs.tickets as any,
+            id: ticketId,
+            depth: 0,
+            overrideAccess: true,
+          }) as { aiSummary?: string; aiSummaryGeneratedAt?: string; aiSummaryStatus?: string } | null
+
+          if (existing?.aiSummary && existing.aiSummaryStatus === 'done') {
+            return Response.json({
+              summary: existing.aiSummary,
+              generatedAt: existing.aiSummaryGeneratedAt,
+              status: 'cached',
+            })
+          }
+        }
+
+        const result = await generateTicketSynthesis({ payload, slugs, ticketId })
+        return Response.json(result)
+      } catch (err) {
+        const authResponse = handleAuthError(err)
+        if (authResponse) return authResponse
+        console.error('[support/ticket-synthesis] Error:', err)
+        return Response.json({ error: 'Internal server error' }, { status: 500 })
+      }
+    },
+  }
+}

package/src/styles/BillingView.module.scss

@@ -276,6 +276,138 @@
   color: #16a34a;
 }
 
+// Warning banner — tickets without time
+.warningBanner {
+  padding: 10px 16px;
+  border: 1px solid #f59e0b;
+  border-radius: 8px;
+  background: rgba(245, 158, 11, 0.08);
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--theme-text);
+}
+
+.toggleLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  user-select: none;
+}
+
+.noTimeBadge {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(245, 158, 11, 0.15);
+  color: #b45309;
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.tableRowNoTime {
+  border-bottom: 1px solid var(--theme-elevation-200);
+  background: rgba(245, 158, 11, 0.04);
+}
+
+// AI summary toggle button
+.summaryBtn {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--theme-elevation-300);
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-500);
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  vertical-align: middle;
+  transition: background-color 100ms, color 100ms;
+
+  &:hover {
+    background: #2563eb;
+    color: #fff;
+    border-color: #2563eb;
+  }
+}
+
+// AI summary expanded row
+.summaryRow {
+  background: var(--theme-elevation-50);
+  border-bottom: 1px solid var(--theme-elevation-300);
+}
+
+.summaryCell {
+  padding: 12px 16px 16px;
+}
+
+.summaryHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.summaryActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.summaryMeta {
+  font-size: 11px;
+  color: var(--theme-elevation-500);
+}
+
+.summaryAction {
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--theme-elevation-300);
+  background: var(--theme-elevation-100);
+  color: var(--theme-text);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 100ms;
+
+  &:hover { background: var(--theme-elevation-200); }
+  &:disabled { cursor: not-allowed; opacity: 0.5; }
+}
+
+.summaryText {
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--theme-elevation-100);
+  border: 1px solid var(--theme-elevation-300);
+  border-radius: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
+  font-size: 13px;
+  color: var(--theme-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.summaryEmpty {
+  padding: 10px 12px;
+  background: var(--theme-elevation-100);
+  border: 1px dashed var(--theme-elevation-300);
+  border-radius: 6px;
+  color: var(--theme-elevation-500);
+  font-size: 12px;
+  font-style: italic;
+}
+
 // Grand total
 .grandTotal {
   padding: 16px;