claude-session-viewer 0.1.0 → 0.1.2

package/src/components/ProjectGroup.tsx

@@ -1,132 +0,0 @@
-import { useState } from 'react'
-import { format } from 'date-fns'
-
-interface Session {
-  id: string
-  project: string
-  timestamp: string
-  messages: any[]
-  messageCount: number
-  title?: string
-  isAgent?: boolean
-  agentSessions?: Session[]
-}
-
-interface ProjectGroupProps {
-  name: string
-  displayName: string
-  sessionCount: number
-  lastActivity: string
-  sessions: Session[]
-  selectedId: string | null
-  onSelectSession: (id: string) => void
-}
-
-export default function ProjectGroup({
-  displayName,
-  sessionCount,
-  lastActivity,
-  sessions,
-  selectedId,
-  onSelectSession,
-}: ProjectGroupProps) {
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  return (
-    <div className="border-b border-gray-700">
-      {/* Project Header */}
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="sticky top-0 z-10 w-full text-left p-4 bg-gray-900 hover:bg-gray-800 transition-colors flex items-center justify-between"
-      >
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <svg
-              className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-            <span className="font-semibold text-sm truncate">{displayName}</span>
-          </div>
-          <div className="text-xs text-gray-400 mt-1 ml-6">
-            {sessionCount} session{sessionCount !== 1 ? 's' : ''} · Last activity{' '}
-            {format(new Date(lastActivity), 'PPp')}
-          </div>
-        </div>
-      </button>
-
-      {/* Sessions List */}
-      {isExpanded && (
-        <div className="bg-gray-900/50">
-          {sessions.map((session) => (
-            <div key={session.id}>
-              {/* Main Session */}
-              <button
-                onClick={() => onSelectSession(session.id)}
-                className={`w-full text-left px-4 py-3 pl-8 hover:bg-gray-700/50 transition-colors border-l-2 ${
-                  selectedId === session.id
-                    ? 'bg-gray-700 border-blue-500'
-                    : 'border-transparent'
-                }`}
-              >
-                {session.title && (
-                  <div className="text-sm font-medium text-gray-200 mb-1 truncate">
-                    {session.title}
-                  </div>
-                )}
-                <div className="text-xs text-gray-400">
-                  {format(new Date(session.timestamp), 'PPpp')}
-                </div>
-                <div className="text-xs text-gray-500 mt-1">
-                  {session.messageCount} message{session.messageCount !== 1 ? 's' : ''}
-                  {session.agentSessions && session.agentSessions.length > 0 && (
-                    <span className="ml-2">
-                      · {session.agentSessions.length} task{session.agentSessions.length !== 1 ? 's' : ''}
-                    </span>
-                  )}
-                </div>
-              </button>
-
-              {/* Agent Sessions */}
-              {session.agentSessions && session.agentSessions.length > 0 && (
-                <div className="bg-gray-900/70">
-                  {session.agentSessions.map((agentSession) => (
-                    <button
-                      key={agentSession.id}
-                      onClick={() => onSelectSession(agentSession.id)}
-                      className={`w-full text-left px-4 py-2 pl-14 hover:bg-gray-700/50 transition-colors border-l-2 ${
-                        selectedId === agentSession.id
-                          ? 'bg-gray-700 border-blue-500'
-                          : 'border-transparent'
-                      }`}
-                    >
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="px-1.5 py-0.5 text-xs bg-purple-900/50 text-purple-300 rounded">
-                          TASK
-                        </span>
-                        {agentSession.title && (
-                          <span className="text-sm font-medium text-gray-300 truncate">
-                            {agentSession.title}
-                          </span>
-                        )}
-                      </div>
-                      <div className="text-xs text-gray-400">
-                        {format(new Date(agentSession.timestamp), 'PPpp')}
-                      </div>
-                      <div className="text-xs text-gray-500 mt-1">
-                        {agentSession.messageCount} message{agentSession.messageCount !== 1 ? 's' : ''}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/SessionDetail.tsx

@@ -1,140 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { format } from 'date-fns'
-
-interface SessionDetailProps {
-  sessionId: string
-}
-
-export default function SessionDetail({ sessionId }: SessionDetailProps) {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['session', sessionId],
-    queryFn: async () => {
-      const response = await fetch(`/api/sessions/${sessionId}`)
-      if (!response.ok) throw new Error('Failed to fetch session')
-      return response.json()
-    },
-  })
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-gray-400">Loading session...</div>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-red-400">Error: {error.message}</div>
-      </div>
-    )
-  }
-
-  const session = data?.session
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Header */}
-      <div className="border-b border-gray-700 p-6 bg-gray-800">
-        <div className="flex items-center gap-2">
-          {session?.isAgent && (
-            <span className="px-2 py-1 text-xs bg-purple-900/50 text-purple-300 rounded font-semibold">
-              TASK
-            </span>
-          )}
-          <h2 className="text-2xl font-bold truncate flex-1">{session?.title || 'Untitled Session'}</h2>
-        </div>
-        <div className="text-xl text-gray-300">{session?.project}</div>
-        <div className="flex items-center gap-3 mt-4 text-sm text-gray-400">
-          <span>
-            {session?.timestamp && format(new Date(session.timestamp), 'PPpp')}
-          </span>
-          <span>•</span>
-          <span>
-            {session?.messageCount || 0} message{session?.messageCount !== 1 ? 's' : ''}
-          </span>
-          {session?.agentSessions && session.agentSessions.length > 0 && (
-            <>
-              <span>•</span>
-              <span>
-                {session.agentSessions.length} task{session.agentSessions.length !== 1 ? 's' : ''}
-              </span>
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Messages Timeline */}
-      <div className="flex-1 overflow-y-auto p-6">
-        <div className="max-w-4xl mx-auto space-y-6">
-          {session?.messages.map((message: any, index: number) => (
-            <div key={index} className="border-l-2 border-gray-700 pl-4">
-              <div className="flex items-start justify-between mb-2">
-                <div className="flex items-center gap-2">
-                  <span
-                    className={`px-2 py-1 text-xs rounded ${
-                      message.type === 'user'
-                        ? 'bg-blue-900 text-blue-200'
-                        : message.type === 'assistant'
-                        ? 'bg-green-900 text-green-200'
-                        : 'bg-gray-700 text-gray-300'
-                    }`}
-                  >
-                    {message.type || 'system'}
-                  </span>
-                  {message.timestamp && (
-                    <span className="text-xs text-gray-500">
-                      {format(new Date(message.timestamp), 'HH:mm:ss')}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              {/* Message Content */}
-              <div className="bg-gray-800 rounded-lg p-4 text-sm">
-                {message.message?.content && Array.isArray(message.message.content) ? (
-                  <div className="space-y-2">
-                    {message.message.content.map((content: any, idx: number) => (
-                      <div key={idx}>
-                        {content.type === 'text' && (
-                          <p className="whitespace-pre-wrap">{content.text}</p>
-                        )}
-                        {content.type === 'tool_use' && (
-                          <div className="bg-gray-900 p-3 rounded border border-gray-700">
-                            <div className="text-yellow-400 font-mono text-xs mb-2">
-                              🔧 {content.name}
-                            </div>
-                            <pre className="text-xs overflow-x-auto text-gray-400">
-                              {JSON.stringify(content.input, null, 2)}
-                            </pre>
-                          </div>
-                        )}
-                        {content.type === 'tool_result' && (
-                          <div className="bg-gray-900 p-3 rounded border border-gray-700">
-                            <div className="text-green-400 font-mono text-xs mb-2">
-                              ✓ Tool Result
-                            </div>
-                            <pre className="text-xs overflow-x-auto text-gray-400">
-                              {typeof content.content === 'string'
-                                ? content.content
-                                : JSON.stringify(content.content, null, 2)}
-                            </pre>
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <pre className="text-xs overflow-x-auto text-gray-400">
-                    {JSON.stringify(message, null, 2)}
-                  </pre>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/SessionList.tsx

@@ -1,45 +0,0 @@
-import ProjectGroup from './ProjectGroup'
-
-interface Session {
-  id: string
-  project: string
-  timestamp: string
-  messages: any[]
-  messageCount: number
-  title?: string
-  isAgent?: boolean
-  agentSessions?: Session[]
-}
-
-interface ProjectGroup {
-  name: string
-  displayName: string
-  sessionCount: number
-  lastActivity: string
-  sessions: Session[]
-}
-
-interface SessionListProps {
-  projects: ProjectGroup[]
-  selectedId: string | null
-  onSelect: (id: string) => void
-}
-
-export default function SessionList({ projects, selectedId, onSelect }: SessionListProps) {
-  return (
-    <div>
-      {projects.map((project) => (
-        <ProjectGroup
-          key={project.name}
-          name={project.name}
-          displayName={project.displayName}
-          sessionCount={project.sessionCount}
-          lastActivity={project.lastActivity}
-          sessions={project.sessions}
-          selectedId={selectedId}
-          onSelectSession={onSelect}
-        />
-      ))}
-    </div>
-  )
-}

package/src/index.css

@@ -1,55 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  width: 100%;
-  min-height: 100vh;
-}
-
-/* Custom scrollbar styles */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: #4B5563 #1F2937;
-}
-
-*::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-*::-webkit-scrollbar-track {
-  background: #1F2937;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: #4B5563;
-  border-radius: 4px;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: #6B7280;
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)