feat: add error report message on invalid schema message

src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx

@@ -1,8 +1,16 @@
 "use client";
 
-import type { FC } from "react";
+import { AlertTriangle, ChevronDown, ExternalLink } from "lucide-react";
+import { type FC, useMemo } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import type { Conversation } from "@/lib/conversation-schema";
 import type { ToolResultContent } from "@/lib/conversation-schema/content/ToolResultContentSchema";
+import type { ErrorJsonl } from "../../../../../../../server/service/types";
 import { useSidechain } from "../../hooks/useSidechain";
 import { ConversationItem } from "./ConversationItem";
 
@@ -26,8 +34,66 @@ const getConversationKey = (conversation: Conversation) => {
   throw new Error(`Unknown conversation type: ${conversation}`);
 };
 
+const SchemaErrorDisplay: FC<{ errorLine: string }> = ({ errorLine }) => {
+  return (
+    <li className="w-full flex justify-start">
+      <div className="w-full max-w-4xl sm:w-[90%] md:w-[85%] px-2">
+        <Collapsible>
+          <CollapsibleTrigger asChild>
+            <div className="flex items-center justify-between cursor-pointer hover:bg-muted/50 rounded p-2 -mx-2 border-l-2 border-red-400">
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="h-3 w-3 text-red-500" />
+                <span className="text-xs font-medium text-red-600">
+                  Schema Error
+                </span>
+              </div>
+              <ChevronDown className="h-3 w-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="bg-background rounded border border-red-200 p-3 mt-2">
+              <div className="space-y-3">
+                <Alert
+                  variant="destructive"
+                  className="border-red-200 bg-red-50"
+                >
+                  <AlertTriangle className="h-4 w-4" />
+                  <AlertTitle className="text-red-800">
+                    Schema Validation Error
+                  </AlertTitle>
+                  <AlertDescription className="text-red-700">
+                    This conversation entry failed to parse correctly. This
+                    might indicate a format change or parsing issue.{" "}
+                    <a
+                      href="https://github.com/d-kimuson/claude-code-viewer/issues"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-red-600 hover:text-red-800 underline underline-offset-4"
+                    >
+                      Report this issue
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  </AlertDescription>
+                </Alert>
+                <div className="bg-gray-50 border rounded px-3 py-2">
+                  <h5 className="text-xs font-medium text-gray-700 mb-2">
+                    Raw Content:
+                  </h5>
+                  <pre className="text-xs overflow-x-auto whitespace-pre-wrap break-all font-mono text-gray-800">
+                    {errorLine}
+                  </pre>
+                </div>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </li>
+  );
+};
+
 type ConversationListProps = {
-  conversations: Conversation[];
+  conversations: (Conversation | ErrorJsonl)[];
   getToolResult: (toolUseId: string) => ToolResultContent | undefined;
 };
 
@@ -35,12 +101,26 @@ export const ConversationList: FC<ConversationListProps> = ({
   conversations,
   getToolResult,
 }) => {
+  const validConversations = useMemo(
+    () =>
+      conversations.filter((conversation) => conversation.type !== "x-error"),
+    [conversations],
+  );
   const { isRootSidechain, getSidechainConversations } =
-    useSidechain(conversations);
+    useSidechain(validConversations);
 
   return (
     <ul>
       {conversations.flatMap((conversation) => {
+        if (conversation.type === "x-error") {
+          return (
+            <SchemaErrorDisplay
+              key={`error_${conversation.line}`}
+              errorLine={conversation.line}
+            />
+          );
+        }
+
         const elm = (
           <ConversationItem
             key={getConversationKey(conversation)}

src/server/hono/route.ts

@@ -119,7 +119,9 @@ export const routes = (app: HonoAppType) => {
               filteredSessions = Array.from(sessionMap.values());
             }
 
-            return { sessions: filteredSessions };
+            return {
+              sessions: filteredSessions,
+            };
           }),
         ] as const);
 

src/server/service/parseJsonl.ts

@@ -1,4 +1,5 @@
 import { ConversationSchema } from "../../lib/conversation-schema";
+import type { ErrorJsonl } from "./types";
 
 export const parseJsonl = (content: string) => {
   const lines = content
@@ -6,11 +7,15 @@ export const parseJsonl = (content: string) => {
     .split("\n")
     .filter((line) => line.trim() !== "");
 
-  return lines.flatMap((line) => {
+  return lines.map((line) => {
     const parsed = ConversationSchema.safeParse(JSON.parse(line));
     if (!parsed.success) {
       console.warn("Failed to parse jsonl, skipping", parsed.error);
-      return [];
+      const errorData: ErrorJsonl = {
+        type: "x-error",
+        line,
+      };
+      return errorData;
     }
 
     return parsed.data;

src/server/service/project/getProjectMeta.ts

@@ -21,7 +21,11 @@ const extractProjectPathFromJsonl = async (filePath: string) => {
   for (const line of lines) {
     const conversation = parseJsonl(line).at(0);
 
-    if (conversation === undefined || conversation.type === "summary") {
+    if (
+      conversation === undefined ||
+      conversation.type === "summary" ||
+      conversation.type === "x-error"
+    ) {
       continue;
     }
 

src/server/service/types.ts

@@ -26,6 +26,11 @@ export type SessionMeta = {
   lastModifiedAt: string | null;
 };
 
-export type SessionDetail = Session & {
-  conversations: Conversation[];
+export type ErrorJsonl = {
+  type: "x-error";
+  line: string;
+};
+
+export type SessionDetail = Session & {
+  conversations: (Conversation | ErrorJsonl)[];
 };