@marimo-team/islands 0.19.8-dev19 → 0.19.8-dev23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.8-dev19",
+  "version": "0.19.8-dev23",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -609,9 +609,13 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
   const isDuplicate =
     KNOWN_PROVIDERS.includes(normalizedName as KnownProviderId) ||
     (customProviders && Object.keys(customProviders).includes(normalizedName));
+  const hasInvalidChars = normalizedName.includes(".");
 
   const hasValidValues =
-    normalizedName.trim() && newProviderBaseUrl.trim() && !isDuplicate;
+    normalizedName.trim() &&
+    newProviderBaseUrl.trim() &&
+    !isDuplicate &&
+    !hasInvalidChars;
 
   const resetForm = () => {
     setNewProviderName("");
@@ -669,7 +673,12 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
                   A provider with this name already exists.
                 </p>
               )}
-              {newProviderName && (
+              {hasInvalidChars && (
+                <p className="text-xs text-destructive">
+                  Provider names cannot contain '.' characters.
+                </p>
+              )}
+              {newProviderName && !hasInvalidChars && (
                 <p className="text-xs text-muted-secondary">
                   Use models with prefix:{" "}
                   <Kbd className="inline text-xs">{normalizedName}/</Kbd>

package/src/components/pages/gallery-page.tsx

@@ -33,6 +33,15 @@ const tabTarget = (path: string): string => {
   return `${getSessionId()}-${encodeURIComponent(path)}`;
 };
 
+const isHttpsUrl = (value: string): boolean => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+
 const SEARCH_THRESHOLD = 10;
 
 const GalleryPage: React.FC = () => {
@@ -43,10 +52,10 @@ const GalleryPage: React.FC = () => {
     [],
   );
   const workspace = response.data;
-  const files = workspace?.files ?? [];
-  const root = workspace?.root ?? "";
 
   const formattedFiles = useMemo(() => {
+    const files = workspace?.files ?? [];
+    const root = workspace?.root ?? "";
     return files
       .filter((file) => !file.isDirectory)
       .map((file) => {
@@ -54,17 +63,28 @@ const GalleryPage: React.FC = () => {
           root && Paths.isAbsolute(file.path) && file.path.startsWith(root)
             ? Paths.rest(file.path, root)
             : file.path;
-        const title = titleCase(Paths.basename(relativePath));
+        const title =
+          file.opengraph?.title ?? titleCase(Paths.basename(relativePath));
         const subtitle = titleCase(Paths.dirname(relativePath));
+        const description = file.opengraph?.description ?? "";
+        const opengraphImage = file.opengraph?.image;
+        const thumbnailUrl =
+          opengraphImage && isHttpsUrl(opengraphImage)
+            ? opengraphImage
+            : asURL(
+                `/og/thumbnail?file=${encodeURIComponent(relativePath)}`,
+              ).toString();
         return {
           ...file,
           relativePath,
           title,
           subtitle,
+          description,
+          thumbnailUrl,
         };
       })
       .sort((a, b) => a.relativePath.localeCompare(b.relativePath));
-  }, [files, root]);
+  }, [workspace?.files, workspace?.root]);
 
   const filteredFiles = useMemo(() => {
     if (!searchQuery) {
@@ -130,8 +150,14 @@ const GalleryPage: React.FC = () => {
                     target={tabTarget(file.path)}
                     className="no-underline"
                   >
-                    <Card className="h-full hover:bg-accent/20 transition-colors">
-                      <CardContent className="p-6">
+                    <Card className="h-full overflow-hidden hover:bg-accent/20 transition-colors">
+                      <img
+                        src={file.thumbnailUrl}
+                        alt={file.title}
+                        loading="lazy"
+                        className="w-full aspect-1200/630 object-cover border-b border-border/60"
+                      />
+                      <CardContent className="p-6 pt-4">
                         <div className="flex flex-col gap-1">
                           {file.subtitle && (
                             <div className="text-sm font-semibold text-muted-foreground">
@@ -141,6 +167,11 @@ const GalleryPage: React.FC = () => {
                           <div className="text-lg font-medium">
                             {file.title}
                           </div>
+                          {file.description && (
+                            <div className="text-sm text-muted-foreground line-clamp-3 mt-1">
+                              {file.description}
+                            </div>
+                          )}
                         </div>
                       </CardContent>
                     </Card>

package/src/utils/__tests__/url-parser.test.ts

@@ -76,4 +76,26 @@ describe("parseContent", () => {
       url: "https://avatars.githubusercontent.com/u/123",
     });
   });
+
+  it("preserves newlines between URLs", () => {
+    const parts = parseContent("https://marimo.io\nhttps://github.com\n");
+    expect(parts).toEqual([
+      { type: "url", url: "https://marimo.io" },
+      { type: "text", value: "\n" },
+      { type: "url", url: "https://github.com" },
+      { type: "text", value: "\n" },
+    ]);
+  });
+
+  it("preserves whitespace in mixed content", () => {
+    const parts = parseContent(
+      "Line 1: https://marimo.io\nLine 2: https://github.com",
+    );
+    expect(parts).toEqual([
+      { type: "text", value: "Line 1: " },
+      { type: "url", url: "https://marimo.io" },
+      { type: "text", value: "\nLine 2: " },
+      { type: "url", url: "https://github.com" },
+    ]);
+  });
 });

package/src/utils/url-parser.ts

@@ -19,7 +19,7 @@ export function parseContent(text: string): ContentPart[] {
     return [{ type: "image", url: text }];
   }
 
-  const parts = text.split(urlRegex).filter((part) => part.trim() !== "");
+  const parts = text.split(urlRegex).filter((part) => part !== "");
   return parts.map((part) => {
     const isUrl = urlRegex.test(part);
     if (isUrl) {