@marimo-team/frontend 0.16.4 → 0.16.5

package/src/__tests__/chat-history.test.ts

@@ -0,0 +1,123 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { groupChatsByDate } from "../components/chat/chat-history-utils";
+import type { Chat } from "../core/ai/state";
+
+// Mock current time for consistent testing
+const mockNow = new Date("2024-01-15T12:00:00Z").getTime();
+
+// Mock Date.now to return our fixed time
+const originalDateNow = Date.now;
+beforeAll(() => {
+  Date.now = () => mockNow;
+});
+
+afterAll(() => {
+  Date.now = originalDateNow;
+});
+
+describe("groupChatsByDate", () => {
+  const createMockChat = (daysAgo: number, title: string): Chat => ({
+    id: `chat-${daysAgo}` as Chat["id"],
+    title,
+    messages: [],
+    createdAt: mockNow - daysAgo * 24 * 60 * 60 * 1000,
+    updatedAt: mockNow - daysAgo * 24 * 60 * 60 * 1000,
+  });
+
+  it("should group chats correctly by date periods", () => {
+    const chats: Chat[] = [
+      createMockChat(0, "Today chat"),
+      createMockChat(1, "Yesterday chat"),
+      createMockChat(2, "2 days ago chat"),
+      createMockChat(3, "3 days ago chat"),
+      createMockChat(5, "5 days ago chat"), // Should go to "This week"
+      createMockChat(10, "10 days ago chat"), // Should go to "This month"
+      createMockChat(40, "40 days ago chat"), // Should go to "Older"
+    ];
+
+    const result = groupChatsByDate(chats);
+
+    // Should have 7 groups
+    expect(result).toHaveLength(chats.length);
+
+    // Check Today group
+    const todayGroup = result.find((g) => g.label === "Today");
+    expect(todayGroup?.chats).toHaveLength(1);
+    expect(todayGroup?.chats[0].title).toBe("Today chat");
+
+    // Check Yesterday group
+    const yesterdayGroup = result.find((g) => g.label === "Yesterday");
+    expect(yesterdayGroup?.chats).toHaveLength(1);
+    expect(yesterdayGroup?.chats[0].title).toBe("Yesterday chat");
+
+    // Check 2d ago group
+    const twoDaysGroup = result.find((g) => g.label === "2d ago");
+    expect(twoDaysGroup?.chats).toHaveLength(1);
+    expect(twoDaysGroup?.chats[0].title).toBe("2 days ago chat");
+
+    // Check 3d ago group
+    const threeDaysGroup = result.find((g) => g.label === "3d ago");
+    expect(threeDaysGroup?.chats).toHaveLength(1);
+    expect(threeDaysGroup?.chats[0].title).toBe("3 days ago chat");
+
+    // Check This week group (should include 5)
+    const thisWeekGroup = result.find((g) => g.label === "This week");
+    expect(thisWeekGroup?.chats).toHaveLength(1);
+    expect(thisWeekGroup?.chats.map((c) => c.title)).toContain(
+      "5 days ago chat",
+    );
+
+    // Check This month group (should include 40 days ago)
+    const thisMonthGroup = result.find((g) => g.label === "This month");
+    expect(thisMonthGroup?.chats).toHaveLength(1);
+    expect(thisMonthGroup?.chats[0].title).toBe("10 days ago chat");
+
+    // Check Older group (should include 40 days ago)
+    const olderGroup = result.find((g) => g.label === "Older");
+    expect(olderGroup?.chats).toHaveLength(1);
+    expect(olderGroup?.chats[0].title).toBe("40 days ago chat");
+  });
+
+  it("should include all chats in some group", () => {
+    const chats: Chat[] = [
+      createMockChat(0, "Today"),
+      createMockChat(1, "Yesterday"),
+      createMockChat(2, "2 days ago"),
+      createMockChat(3, "3 days ago"),
+      createMockChat(5, "5 days ago"),
+      createMockChat(10, "10 days ago"),
+      createMockChat(20, "20 days ago"),
+      createMockChat(40, "40 days ago"),
+      createMockChat(100, "100 days ago"),
+    ];
+
+    const result = groupChatsByDate(chats);
+
+    // Count total chats across all groups
+    const totalChatsInGroups = result.reduce(
+      (sum, group) => sum + group.chats.length,
+      0,
+    );
+    expect(totalChatsInGroups).toBe(chats.length);
+  });
+
+  it("should handle empty chat list", () => {
+    const result = groupChatsByDate([]);
+    expect(result).toHaveLength(0);
+  });
+
+  it("should filter out empty groups", () => {
+    const chats: Chat[] = [
+      createMockChat(0, "Today chat"),
+      createMockChat(40, "Old chat"),
+    ];
+
+    const result = groupChatsByDate(chats);
+
+    // Should only have Today and Older groups, not the empty ones in between
+    expect(result).toHaveLength(2);
+    expect(result.map((g) => g.label)).toEqual(["Today", "Older"]);
+  });
+});

package/src/components/app-config/ai-config.tsx

@@ -930,6 +930,29 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
   return (
     <SettingGroup>
       <SettingSubtitle>AI Assistant</SettingSubtitle>
+
+      <FormField
+        control={form.control}
+        name="ai.inline_tooltip"
+        render={({ field }) => (
+          <div className="flex flex-col gap-y-1">
+            <FormItem className={formItemClasses}>
+              <FormLabel className="font-normal">AI Edit Tooltip</FormLabel>
+              <FormControl>
+                <Checkbox
+                  data-testid="inline-ai-checkbox"
+                  checked={field.value === true}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+            <FormDescription>
+              Enable "Edit with AI" tooltip when selecting code.
+            </FormDescription>
+          </div>
+        )}
+      />
+
       <FormErrorsBanner />
       <ModelSelector
         label="Chat Model"

package/src/components/app-config/mcp-config.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { CheckSquareIcon } from "lucide-react";
+import { CheckSquareIcon, Loader2, RefreshCwIcon } from "lucide-react";
 import React from "react";
 import type { UseFormReturn } from "react-hook-form";
 import {
@@ -12,6 +12,8 @@ import {
 } from "@/components/ui/card";
 import { FormField, FormItem } from "@/components/ui/form";
 import type { UserConfig } from "@/core/config/config-schema";
+import { useMCPRefresh, useMCPStatus } from "../mcp/hooks";
+import { McpStatusText } from "../mcp/mcp-status-indicator";
 import { Button } from "../ui/button";
 import { Kbd } from "../ui/kbd";
 import { SettingSubtitle } from "./common";
@@ -45,10 +47,48 @@ const PRESET_CONFIGS: PresetConfig[] = [
 
 export const MCPConfig: React.FC<MCPConfigProps> = ({ form, onSubmit }) => {
   const { handleClick } = useOpenSettingsToTab();
+  const { data: status, refetch, isFetching } = useMCPStatus();
+  const { refresh, isRefreshing } = useMCPRefresh();
+
+  const handleRefresh = async () => {
+    await refresh();
+    refetch();
+  };
 
   return (
     <div className="flex flex-col gap-4">
-      <SettingSubtitle>MCP Servers</SettingSubtitle>
+      <div className="flex items-center justify-between">
+        <SettingSubtitle>MCP Servers</SettingSubtitle>
+        <div className="flex items-center gap-2">
+          {status && <McpStatusText status={status.status} />}
+          <Button
+            variant="outline"
+            size="xs"
+            onClick={handleRefresh}
+            disabled={isRefreshing || isFetching}
+          >
+            {isRefreshing || isFetching ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              <RefreshCwIcon className="h-3 w-3" />
+            )}
+          </Button>
+        </div>
+      </div>
+      {status?.error && (
+        <div className="text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/20 p-2 rounded">
+          {status.error}
+        </div>
+      )}
+      {status?.servers && (
+        <div className="text-xs text-muted-foreground">
+          {Object.entries(status.servers).map(([server, status]) => (
+            <div key={server}>
+              {server}: <McpStatusText status={status} />
+            </div>
+          ))}
+        </div>
+      )}
       <p className="text-sm text-muted-foreground">
         Enable Model Context Protocol (MCP) servers to provide additional
         capabilities and data sources for AI features.

package/src/components/app-config/user-config-form.tsx

@@ -1228,30 +1228,6 @@ export const UserConfigForm: React.FC = () => {
               notebook to take effect.
             </p>
 
-            <FormField
-              control={form.control}
-              name="experimental.inline_ai_tooltip"
-              render={({ field }) => (
-                <div className="flex flex-col gap-y-1">
-                  <FormItem className={formItemClasses}>
-                    <FormLabel className="font-normal">
-                      AI Edit Tooltip
-                    </FormLabel>
-                    <FormControl>
-                      <Checkbox
-                        data-testid="inline-ai-checkbox"
-                        checked={field.value === true}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                  <FormDescription>
-                    Enable experimental "Edit with AI" tooltip when selecting
-                    code.
-                  </FormDescription>
-                </div>
-              )}
-            />
             <FormField
               control={form.control}
               name="experimental.rtc_v2"

package/src/components/chat/acp/__tests__/context-utils.test.ts

@@ -133,7 +133,7 @@ describe("parseContextFromPrompt", () => {
       type: "resource",
       resource: {
         uri: "context.md",
-        mimeType: "text/markdown",
+        mimeType: "text/plain",
         text: "formatted context",
       },
     });

package/src/components/chat/acp/agent-panel.tsx

@@ -867,7 +867,7 @@ const AgentPanel: React.FC = () => {
             type: "resource",
             resource: {
               uri: "marimo_rules.md",
-              mimeType: "text/markdown",
+              mimeType: "text/plain",
               text: getAgentPrompt(filename),
             },
           },

package/src/components/chat/acp/blocks.tsx

@@ -30,7 +30,6 @@ import {
 } from "@/components/ui/popover";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
-import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
 import { Strings } from "@/utils/strings";
 import { MarkdownRenderer } from "../markdown-renderer";
 import { SimpleAccordion } from "./common";
@@ -289,7 +288,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
 
 export const UserMessagesBlock = (props: { data: UserNotificationEvent[] }) => {
   return (
-    <div className="flex flex-col gap-2 text-muted-foreground border p-2 bg-background rounded break-words">
+    <div className="flex flex-col gap-2 text-muted-foreground border p-2 bg-background rounded break-words overflow-x-hidden">
       <ContentBlocks data={props.data.map((item) => item.content)} />
     </div>
   );
@@ -364,58 +363,28 @@ export const ResourceBlock = (props: { data: ContentBlockOf<"resource"> }) => {
     return (
       <Popover>
         <PopoverTrigger>
-          <span className="flex items-center gap-1">
+          <span className="flex items-center gap-1 hover:bg-muted rounded-md px-1">
             {props.data.resource.mimeType && (
               <MimeIcon mimeType={props.data.resource.mimeType} />
             )}
             {props.data.resource.uri}
           </span>
         </PopoverTrigger>
-        <PopoverContent className="max-h-96 overflow-y-auto scrollbar-thin">
-          <MarkdownRenderer content={props.data.resource.text} />
+        <PopoverContent className="max-h-96 overflow-y-auto scrollbar-thin whitespace-pre-wrap w-full max-w-[500px]">
+          <span className="text-muted-foreground text-xs mb-1 italic">
+            Formatted for agents, not humans.
+          </span>
+          {props.data.resource.mimeType === "text/plain" ? (
+            <pre className="text-xs whitespace-pre-wrap p-2 bg-muted rounded-md break-words">
+              {props.data.resource.text}
+            </pre>
+          ) : (
+            <MarkdownRenderer content={props.data.resource.text} />
+          )}
         </PopoverContent>
       </Popover>
     );
   }
-
-  if ("blob" in props.data.resource) {
-    if (props.data.resource.mimeType?.startsWith("image/")) {
-      return (
-        <ImageBlock
-          data={{
-            type: "image",
-            mimeType: props.data.resource.mimeType,
-            data: props.data.resource.blob,
-          }}
-        />
-      );
-    }
-    if (props.data.resource.mimeType?.startsWith("audio/")) {
-      return (
-        <AudioBlock
-          data={{
-            type: "audio",
-            mimeType: props.data.resource.mimeType,
-            data: props.data.resource.blob,
-          }}
-        />
-      );
-    }
-    const dataURL = base64ToDataURL(
-      props.data.resource.blob as Base64String,
-      props.data.resource.mimeType ?? "",
-    );
-    return (
-      <a href={dataURL} className="flex items-center gap-1" download={true}>
-        {props.data.resource.mimeType && (
-          <MimeIcon mimeType={props.data.resource.mimeType} />
-        )}
-        {props.data.resource.uri}
-      </a>
-    );
-  }
-  logNever(props.data.resource);
-  return null;
 };
 
 export const ResourceLinkBlock = (props: {
@@ -427,15 +396,38 @@ export const ResourceLinkBlock = (props: {
         href={props.data.uri}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-link hover:underline"
+        className="text-link hover:underline px-1"
       >
         {props.data.name}
       </a>
     );
   }
 
+  // Show image in popover for image mime types
+  if (props.data.mimeType?.startsWith("image/")) {
+    return (
+      <div>
+        <Popover>
+          <PopoverTrigger>
+            <span className="flex items-center gap-1 hover:bg-muted rounded-md px-1 cursor-pointer">
+              <MimeIcon mimeType={props.data.mimeType} />
+              {props.data.name || props.data.title || props.data.uri}
+            </span>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto max-w-[500px] p-2">
+            <img
+              src={props.data.uri}
+              alt={props.data.name || props.data.title || "Image"}
+              className="max-w-full max-h-96 object-contain"
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  }
+
   return (
-    <span className="flex items-center gap-1">
+    <span className="flex items-center gap-1 px-1">
       {props.data.mimeType && <MimeIcon mimeType={props.data.mimeType} />}
       {props.data.name || props.data.title || props.data.uri}
     </span>
@@ -443,22 +435,23 @@ export const ResourceLinkBlock = (props: {
 };
 
 export const MimeIcon = (props: { mimeType: string }) => {
+  const classNames = "h-2 w-2 flex-shrink-0";
   if (props.mimeType.startsWith("image/")) {
-    return <FileImageIcon className="h-2 w-2" />;
+    return <FileImageIcon className={classNames} />;
   }
   if (props.mimeType.startsWith("audio/")) {
-    return <FileAudio2Icon className="h-2 w-2" />;
+    return <FileAudio2Icon className={classNames} />;
   }
   if (props.mimeType.startsWith("video/")) {
-    return <FileVideoCameraIcon className="h-2 w-2" />;
+    return <FileVideoCameraIcon className={classNames} />;
   }
   if (props.mimeType.startsWith("text/")) {
-    return <FileTextIcon className="h-2 w-2" />;
+    return <FileTextIcon className={classNames} />;
   }
   if (props.mimeType.startsWith("application/")) {
-    return <FileJsonIcon className="h-2 w-2" />;
+    return <FileJsonIcon className={classNames} />;
   }
-  return <FileIcon className="h-2 w-2" />;
+  return <FileIcon className={classNames} />;
 };
 
 export const SessionNotificationsBlock = <
@@ -533,7 +526,7 @@ export const ToolNotificationsBlock = (props: {
   const toolCalls = mergeToolCalls(props.data);
 
   return (
-    <div className="flex flex-col text-muted-foreground">
+    <div className="flex flex-col text-muted-foreground overflow-x-hidden">
       {toolCalls.map((item) => (
         <SimpleAccordion
           key={item.toolCallId}

package/src/components/chat/acp/common.tsx

@@ -68,7 +68,7 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
         >
           <span className="flex items-center gap-1">
             {getStatusIcon()}
-            <code className="font-mono text-xs">{title}</code>
+            <code className="font-mono text-xs truncate">{title}</code>
           </span>
         </AccordionTrigger>
         <AccordionContent className="p-2">

package/src/components/chat/acp/context-utils.ts

@@ -93,7 +93,7 @@ export async function parseContextFromPrompt(
         type: "resource",
         resource: {
           uri: "context.md",
-          mimeType: "text/markdown",
+          mimeType: "text/plain",
           text: contextString,
         },
       });

package/src/components/chat/acp/session-tabs.tsx

@@ -30,7 +30,7 @@ const SessionTab: React.FC<SessionTabProps> = memo(
       <div
         className={cn(
           "flex items-center gap-1 px-2 py-1 text-xs border-r border-border bg-muted/30 hover:bg-muted/50 cursor-pointer min-w-0",
-          isActive && "bg-background border-b-0 relative z-10",
+          isActive && "bg-background border-b-0 relative z-1",
         )}
         onClick={() => onSelect(session.tabId)}
       >

package/src/components/chat/chat-history-popover.tsx

@@ -0,0 +1,125 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { BotMessageSquareIcon, ClockIcon, SearchIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useLocale } from "react-aria";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip } from "@/components/ui/tooltip";
+import { type ChatId, chatStateAtom } from "@/core/ai/state";
+import { cn } from "@/utils/cn";
+import { timeAgo } from "@/utils/dates";
+import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
+import { groupChatsByDate } from "./chat-history-utils";
+
+interface ChatHistoryPopoverProps {
+  activeChatId: ChatId | undefined;
+  setActiveChat: (id: ChatId | null) => void;
+}
+
+export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
+  activeChatId,
+  setActiveChat,
+}) => {
+  const chatState = useAtomValue(chatStateAtom);
+  const { locale } = useLocale();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const chats = useMemo(() => {
+    return [...chatState.chats.values()].sort(
+      (a, b) => b.updatedAt - a.updatedAt,
+    );
+  }, [chatState.chats]);
+
+  const filteredChats = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return chats;
+    }
+    return chats.filter((chat) =>
+      chat.title.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  }, [chats, searchQuery]);
+
+  const groupedChats = useMemo(() => {
+    return groupChatsByDate(filteredChats);
+  }, [filteredChats]);
+
+  return (
+    <Popover>
+      <Tooltip content="Previous chats">
+        <PopoverTrigger asChild={true}>
+          <Button variant="text" size="icon">
+            <ClockIcon className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+      </Tooltip>
+      <PopoverContent className="w-[480px] p-0" align="start" side="right">
+        <div className="pt-3 px-3 w-full">
+          <Input
+            placeholder="Search chat history..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="text-xs"
+          />
+        </div>
+        <ScrollArea className="h-[450px] p-2">
+          <div className="space-y-3">
+            {chats.length === 0 && (
+              <PanelEmptyState
+                title="No chats yet"
+                description="Start a new chat to get started"
+                icon={<BotMessageSquareIcon />}
+              />
+            )}
+            {filteredChats.length === 0 && searchQuery && chats.length > 0 && (
+              <PanelEmptyState
+                title="No chats found"
+                description={`No chats match "${searchQuery}"`}
+                icon={<SearchIcon />}
+              />
+            )}
+            {groupedChats.map((group, idx) => (
+              <div key={group.label} className="space-y-2">
+                <div className="text-xs px-1 text-muted-foreground/60">
+                  {group.label}
+                </div>
+                <div>
+                  {group.chats.map((chat) => (
+                    <button
+                      key={chat.id}
+                      className={cn(
+                        "w-full p-1 rounded-md cursor-pointer text-left flex items-center justify-between",
+                        chat.id === activeChatId && "bg-accent",
+                        chat.id !== activeChatId && "hover:bg-muted/20",
+                      )}
+                      onClick={() => {
+                        setActiveChat(chat.id);
+                      }}
+                      type="button"
+                    >
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm truncate">{chat.title}</div>
+                      </div>
+                      <div className="text-xs text-muted-foreground/60 ml-2 flex-shrink-0">
+                        {timeAgo(chat.updatedAt, locale)}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+                {/* If last group, don't show a divider */}
+                {idx !== groupedChats.length - 1 && <hr />}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/chat/chat-history-utils.ts

@@ -0,0 +1,69 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { Chat } from "@/core/ai/state";
+
+const DATE_GROUP_CONFIG = [
+  { label: "Today", days: 0 },
+  { label: "Yesterday", days: 1 },
+  { label: "2d ago", days: 2 },
+  { label: "3d ago", days: 3 },
+  { label: "This week", days: 7 },
+  { label: "This month", days: 30 },
+] as const;
+
+interface DateGroup {
+  label: string;
+  days: number;
+  chats: Chat[];
+}
+
+// Utility function to group chats by date periods
+export const groupChatsByDate = (chats: Chat[]): DateGroup[] => {
+  const now = Date.now();
+  const oneDayMs = 24 * 60 * 60 * 1000;
+
+  // Initialize groups with empty chat arrays
+  const groups: DateGroup[] = DATE_GROUP_CONFIG.map((config) => ({
+    ...config,
+    chats: [],
+  }));
+
+  const olderGroup: DateGroup = {
+    label: "Older",
+    days: Infinity,
+    chats: [],
+  };
+
+  // Helper function to determine which group a chat belongs to
+  const getGroupForChat = (daysDiff: number): DateGroup => {
+    // Use switch for exact day matches, then handle ranges
+    switch (daysDiff) {
+      case 0:
+        return groups[0]; // Today
+      case 1:
+        return groups[1]; // Yesterday
+      case 2:
+        return groups[2]; // 2d ago
+      case 3:
+        return groups[3]; // 3d ago
+      default:
+        // Handle range-based grouping for older chats
+        if (daysDiff >= 4 && daysDiff <= 7) {
+          return groups[4]; // This week
+        } else if (daysDiff >= 8 && daysDiff <= 30) {
+          return groups[5]; // This month
+        }
+        // Everything else goes to Older
+        return olderGroup;
+    }
+  };
+
+  for (const chat of chats) {
+    const daysDiff = Math.floor((now - chat.updatedAt) / oneDayMs);
+    const targetGroup = getGroupForChat(daysDiff);
+    targetGroup.chats.push(chat);
+  }
+
+  // Return only non-empty groups
+  return [...groups, olderGroup].filter((group) => group.chats.length > 0);
+};