Show the mode used (#60)

Author: mrubens

src/actions/analytics/events.ts

@@ -258,7 +258,8 @@ export const getTasks = async ({
       WITH first_messages AS (
         SELECT
           taskId,
-          argMin(text, ts) as title
+          argMin(text, ts) as title,
+          argMin(mode, ts) as mode
         FROM messages
         WHERE orgId = {orgId: String}
         GROUP BY taskId
@@ -268,6 +269,7 @@ export const getTasks = async ({
         e.userId,
         e.apiProvider AS provider,
         e.modelId as model,
+        any(fm.mode) AS mode,
         MAX(CASE WHEN e.type = 'Task Completed' THEN 1 ELSE 0 END) AS completed,
         SUM(CASE WHEN e.type = 'LLM Completion' THEN COALESCE(e.inputTokens, 0) + COALESCE(e.outputTokens, 0) ELSE 0 END) AS tokens,
         SUM(CASE WHEN e.type = 'LLM Completion' THEN COALESCE(e.cost, 0) ELSE 0 END) AS cost,

src/app/(authenticated)/usage/Messages.tsx

@@ -28,10 +28,17 @@ export const Messages = ({ messages }: MessagesProps) => {
             message.role === 'user' ? 'bg-primary/10' : 'bg-secondary/10',
           )}
         >
-          <div className="flex flex-row items-center gap-1 text-xs font-medium text-muted-foreground">
-            <div>{message.name}</div>
-            <div>&middot;</div>
-            <div>{message.timestamp}</div>
+          <div className="flex flex-row items-center justify-between gap-1 text-xs font-medium text-muted-foreground">
+            <div className="flex items-center gap-1">
+              <div>{message.name}</div>
+              <div>&middot;</div>
+              <div>{message.timestamp}</div>
+            </div>
+            {message.mode && (
+              <div className="px-2 py-1 bg-muted rounded text-xs font-medium">
+                {message.mode}
+              </div>
+            )}
           </div>
           <div className="text-sm markdown-prose">
             <ReactMarkdown>{message.text}</ReactMarkdown>

src/app/(authenticated)/usage/TaskDrawer.tsx

@@ -56,6 +56,12 @@ export const TaskDrawer = ({ task, onClose }: TaskDrawerProps) => {
               <span className="text-muted-foreground">Model</span>
               <span className="max-w-64 truncate font-mono">{task.model}</span>
             </div>
+            {task.mode && (
+              <div className="flex justify-between items-center">
+                <span className="text-muted-foreground">Mode</span>
+                <span className="max-w-64 truncate">{task.mode}</span>
+              </div>
+            )}
             <div className="flex justify-between items-center">
               <span className="text-muted-foreground">Tokens</span>
               <span className="max-w-64 truncate font-mono">

src/components/usage/TaskCard.tsx

@@ -51,6 +51,11 @@ export const TaskCard = ({ task, onFilter, onTaskSelected }: TaskCardProps) => {
               >
                 {task.user.name}
               </Button>
+              {task.mode && (
+                <span className="px-2 py-1 bg-muted rounded text-xs font-medium">
+                  {task.mode}
+                </span>
+              )}
               <Button
                 variant="link"
                 size="sm"

src/types/analytics/message.ts

@@ -5,6 +5,7 @@ export const messageSchema = z.object({
   orgId: z.string(),
   userId: z.string(),
   taskId: z.string(),
+  mode: z.string().nullable(),
   ts: z.number(),
   type: z.enum(['ask', 'say']),
   ask: z.string().nullable(),

src/types/analytics/task.ts

@@ -5,6 +5,7 @@ export const taskSchema = z.object({
   userId: z.string(),
   provider: z.string(),
   model: z.string(),
+  mode: z.string().nullable(),
   completed: z.coerce.boolean(),
   tokens: z.coerce.number(),
   cost: z.coerce.number(),