improvements: ui/ux around mothership

Author: emir-karabeg

apps/sim/app/api/mothership/chats/read/route.ts

@@ -1,7 +1,7 @@
 import { db } from '@sim/db'
 import { copilotChats } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { and, eq } from 'drizzle-orm'
+import { and, eq, sql } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import {
@@ -29,7 +29,7 @@ export async function POST(request: NextRequest) {
 
     await db
       .update(copilotChats)
-      .set({ lastSeenAt: new Date() })
+      .set({ lastSeenAt: sql`GREATEST(${copilotChats.updatedAt}, NOW())` })
       .where(and(eq(copilotChats.id, chatId), eq(copilotChats.userId, userId)))
 
     return NextResponse.json({ success: true })

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx

@@ -3,17 +3,10 @@
 import { useEffect, useRef, useState } from 'react'
 import { ChevronDown } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
-import type { ToolCallStatus } from '../../../../types'
+import type { ToolCallData } from '../../../../types'
 import { getAgentIcon } from '../../utils'
 import { ToolCallItem } from './tool-call-item'
 
-interface ToolCallData {
-  id: string
-  toolName: string
-  displayTitle: string
-  status: ToolCallStatus
-}
-
 interface AgentGroupProps {
   agentName: string
   agentLabel: string

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx

@@ -55,22 +55,14 @@ export function ToolCallItem({ toolName, displayTitle, status }: ToolCallItemPro
         {status === 'executing' ? (
           <Loader className='h-[16px] w-[16px] text-[var(--text-icon)]' animate />
         ) : status === 'cancelled' ? (
-          <CircleStop className='h-[16px] w-[16px] text-[var(--text-secondary)]' />
+          <CircleStop className='h-[16px] w-[16px] text-[var(--text-icon)]' />
         ) : Icon ? (
           <Icon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
         ) : (
           <CircleCheck className='h-[16px] w-[16px] text-[var(--text-icon)]' />
         )}
       </div>
-      <span
-        className={
-          status === 'cancelled'
-            ? 'font-base text-[14px] text-[var(--text-secondary)]'
-            : 'font-base text-[14px] text-[var(--text-body)]'
-        }
-      >
-        {displayTitle}
-      </span>
+      <span className='font-base text-[14px] text-[var(--text-body)]'>{displayTitle}</span>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -67,7 +67,7 @@ type ThProps = ComponentPropsWithoutRef<'th'>
 const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['components'] = {
   table({ children }) {
     return (
-      <div className='not-prose my-4 w-full overflow-x-auto'>
+      <div className='not-prose my-4 w-full overflow-x-auto [&_strong]:font-[600]'>
         <table className='min-w-full border-collapse'>{children}</table>
       </div>
     )
@@ -131,7 +131,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
         )}
         <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[#1F1F1F]'>
           <pre
-            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
+            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px]'
             dangerouslySetInnerHTML={{ __html: html }}
           />
         </div>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ContentBlock, OptionItem, SubagentName, ToolCallStatus } from '../../types'
+import type { ContentBlock, OptionItem, SubagentName, ToolCallData } from '../../types'
 import { SUBAGENT_LABELS } from '../../types'
 import { AgentGroup, ChatContent, CircleStop, Options } from './components'
 
@@ -9,13 +9,6 @@ interface TextSegment {
   content: string
 }
 
-interface ToolCallData {
-  id: string
-  toolName: string
-  displayTitle: string
-  status: ToolCallStatus
-}
-
 interface AgentGroupSegment {
   type: 'agent_group'
   id: string
@@ -252,8 +245,8 @@ export function MessageContent({
           case 'stopped':
             return (
               <div key={`stopped-${i}`} className='flex items-center gap-[8px]'>
-                <CircleStop className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-secondary)]' />
-                <span className='font-base text-[14px] text-[var(--text-secondary)]'>
+                <CircleStop className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                <span className='font-base text-[14px] text-[var(--text-body)]'>
                   Stopped by user
                 </span>
               </div>