Session List and Title Management

.prettierignore

@@ -1,3 +1,4 @@
 package-lock.json
 pnpm-lock.yaml
-yarn.lock
+yarn.lock
+service.template.yaml

adk/cofacts_ai/agent.py

@@ -8,14 +8,17 @@
 - AI Proof-readers: Role-play different political perspectives to test reply effectiveness
 """
 
+import os
 from typing import Dict, Optional
 import re
 import json
 
 from dotenv import load_dotenv
+from google.adk.apps import App
 from google.adk.agents import LlmAgent
 from google.adk.agents.callback_context import CallbackContext
 from google.adk.models.llm_response import LlmResponse
+from google.adk.sessions import DatabaseSessionService
 from google.adk.tools import url_context, google_search
 from google.adk.tools.agent_tool import AgentTool
 from datetime import datetime
@@ -26,7 +29,6 @@
     submit_cofacts_reply,
     resolve_vertex_redirect
 )
-from google.adk.apps.app import App
 from .instrumentation import setup_instrumentation, LangfuseTracingPlugin
 
 load_dotenv()
@@ -546,9 +548,21 @@ async def append_grounding_sources(
     ],
 )
 
+# Initialize Session Service
+db_url = os.getenv("DATABASE_URL")
+if not db_url:
+    # Local/CI: Initialize with SQLite at adk/.adk/sessions.db
+    db_path = os.path.abspath("adk/.adk/sessions.db")
+    os.makedirs(os.path.dirname(db_path), exist_ok=True)
+    db_url = f"sqlite+aiosqlite:///{db_path}"
+
+session_service = DatabaseSessionService(db_url=db_url)
+
 app = App(
-    name="cofacts_ai",
+    name="cofacts-ai",
     root_agent=ai_writer,
+    session_service=session_service,
     plugins=[LangfuseTracingPlugin()],
 )
 
+root_agent = ai_writer

adk/pyproject.toml

@@ -12,4 +12,8 @@ dependencies = [
     "langfuse",
     "opentelemetry-sdk",
     "openinference-instrumentation-google-adk",
+    "aiosqlite>=0.22.1",
+    "sqlalchemy>=2.0.48",
+    "asyncpg>=0.31.0",
+    "aiomysql>=0.3.2",
 ]

eslint.config.js

@@ -2,4 +2,9 @@
 
 import { tanstackConfig } from '@tanstack/eslint-config'
 
-export default [...tanstackConfig]
+export default [
+  ...tanstackConfig,
+  {
+    ignores: ['adk/.venv/**', 'adk/.adk/**'],
+  },
+]

package.json

@@ -63,4 +63,4 @@
     "vitest": "^3.0.5",
     "web-vitals": "^5.1.0"
   }
-}
+}

service.template.yaml

@@ -14,6 +14,7 @@ spec:
         run.googleapis.com/container-dependencies: '{"ingress":["backend"]}'
         autoscaling.knative.dev/minScale: "0"
         autoscaling.knative.dev/maxScale: "3"
+        run.googleapis.com/cloudsql-instances: industrious-eye-145611:asia-east1:cofacts
     spec:
       containers:
       - name: ingress
@@ -45,6 +46,8 @@ spec:
           value: "${LANGFUSE_SECRET_KEY}"
         - name: LANGFUSE_BASE_URL
           value: "https://langfuse.cofacts.tw"
+        - name: DATABASE_URL
+          value: "${DATABASE_URL}"
         startupProbe:
           tcpSocket:
             port: 8000

src/components/Sidebar.tsx

@@ -1,5 +1,12 @@
 import { Link, useParams } from '@tanstack/react-router'
+import { useCallback, useEffect, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import { getSessionTitle, useSessions } from '@/hooks/useSessions'
+import {
+  SESSION_TITLE_KEY,
+  listSessions,
+  updateSession,
+} from '@/lib/sessions.functions'
 
 interface SidebarProps {
   isOpen: boolean
@@ -12,6 +19,50 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
     .sessionId
 
   const { data: sessions, isLoading } = useSessions()
+  const queryClient = useQueryClient()
+
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
+  const [editTitle, setEditTitle] = useState('')
+
+  const handleStartEdit = useCallback(
+    (e: React.MouseEvent, sessionId: string, currentTitle: string) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setEditingSessionId(sessionId)
+      setEditTitle(currentTitle)
+    },
+    [],
+  )
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingSessionId(null)
+    setEditTitle('')
+  }, [])
+
+  const handleSaveEdit = useCallback(
+    async (sessionId: string) => {
+      if (!editTitle.trim()) {
+        handleCancelEdit()
+        return
+      }
+
+      try {
+        await updateSession({
+          data: {
+            sessionId,
+            stateDelta: { [SESSION_TITLE_KEY]: editTitle.trim() },
+          },
+        })
+        // Invalidate sessions query to refresh the list
+        await queryClient.invalidateQueries({ queryKey: ['sessions'] })
+      } catch (err) {
+        console.error('Failed to update session title:', err)
+      } finally {
+        handleCancelEdit()
+      }
+    },
+    [editTitle, handleCancelEdit, queryClient],
+  )
 
   return (
     <>
@@ -70,28 +121,60 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
           {sessions?.map((session) => {
             const isActive = currentSessionId === session.id
             const title = getSessionTitle(session)
+            const isEditing = editingSessionId === session.id
+
             return (
-              <Link
-                key={session.id}
-                to="/session/$sessionId"
-                params={{ sessionId: session.id }}
-                onClick={onClose}
-                className={`
-                  flex flex-col p-3 rounded-lg group transition-colors
-                  ${isActive ? 'bg-primary/10 text-text-main' : 'hover:bg-gray-50 text-text-muted'}
-                `}
-              >
-                <div className="flex-1 min-w-0">
-                  <div
-                    className={`text-sm font-medium truncate text-left ${!isActive ? 'group-hover:text-text-main' : ''}`}
-                  >
-                    {title}
+              <div key={session.id} className="relative group">
+                <Link
+                  to="/session/$sessionId"
+                  params={{ sessionId: session.id }}
+                  onClick={onClose}
+                  className={`
+                    flex flex-col p-3 rounded-lg transition-colors w-full
+                    ${isActive ? 'bg-primary/10 text-text-main' : 'hover:bg-gray-50 text-text-muted'}
+                  `}
+                >
+                  <div className="flex-1 min-w-0 pr-6">
+                    {isEditing ? (
+                      <input
+                        autoFocus
+                        value={editTitle}
+                        onChange={(e) => setEditTitle(e.target.value)}
+                        onBlur={() => handleSaveEdit(session.id)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') handleSaveEdit(session.id)
+                          if (e.key === 'Escape') handleCancelEdit()
+                        }}
+                        className="w-full text-sm font-medium bg-white border border-primary rounded px-1 outline-none"
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                        }}
+                      />
+                    ) : (
+                      <div
+                        className={`text-sm font-medium truncate text-left ${!isActive ? 'group-hover:text-text-main' : ''}`}
+                      >
+                        {title}
+                      </div>
+                    )}
+                    <div className="text-xs text-text-muted truncate mt-0.5 text-left font-mono">
+                      {session.id.slice(0, 8)}…
+                    </div>
                   </div>
-                  <div className="text-xs text-text-muted truncate mt-0.5 text-left font-mono">
-                    {session.id.slice(0, 8)}…
-                  </div>
-                </div>
-              </Link>
+                </Link>
+
+                {!isEditing && (
+                  <button
+                    onClick={(e) => handleStartEdit(e, session.id, title)}
+                    className="absolute right-2 top-3 p-1 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-primary transition-opacity"
+                  >
+                    <span className="material-symbols-outlined text-sm">
+                      edit
+                    </span>
+                  </button>
+                )}
+              </div>
             )
           })}
         </div>

src/components/ui/field.tsx

@@ -195,7 +195,7 @@ function FieldError({
       ...new Map(errors.map((error) => [error?.message, error])).values(),
     ]
 
-    if (uniqueErrors?.length == 1) {
+    if (uniqueErrors.length === 1) {
       return uniqueErrors[0]?.message
     }
 

src/hooks/useSessions.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import type { AdkSession } from '@/lib/adk'
-import { listSessions } from '@/lib/sessions.functions'
+import { SESSION_TITLE_KEY, listSessions } from '@/lib/sessions.functions'
 
 export function useSessions() {
   return useQuery<Array<AdkSession>>({
@@ -11,8 +11,15 @@ export function useSessions() {
   })
 }
 
-/** Derives a human-readable title from the first user message in a session's events */
+/** Derives a human-readable title from the session state or first user message */
 export function getSessionTitle(session: AdkSession): string {
+  // 1. Prefer explicit title from session state
+  const stateTitle = session.state?.[SESSION_TITLE_KEY]
+  if (typeof stateTitle === 'string' && stateTitle) {
+    return stateTitle
+  }
+
+  // 2. Fallback to deriving from first user message
   const firstUserEvent = session.events?.find(
     (e) => e.content?.role === 'user' && e.content.parts?.[0]?.text,
   )

src/lib/sessions.functions.ts

@@ -1,12 +1,14 @@
 import { createServerFn } from '@tanstack/react-start'
 import { getRequest } from '@tanstack/react-start/server'
 import { ADK_APP_NAME, ADK_USER_ID, adkClient } from './adkClient'
-import { handleAdkError, handleAdkResponseError } from './adk.server'
+import { handleAdkError, handleAdkResponseError } from './adk-errors'
 import type { AdkEvent } from './adk'
 import type { components } from './adk-types'
 
 type RunRequest = components['schemas']['RunAgentRequest']
 
+export const SESSION_TITLE_KEY = 'title'
+
 export const listSessions = createServerFn({ method: 'GET' }).handler(
   async () => {
     const { data, error } = await adkClient.GET(
@@ -41,9 +43,14 @@ export const getSession = createServerFn({ method: 'GET' })
     return data
   })
 
+interface CreateSessionInput {
+  sessionId: string
+  initialState?: Record<string, any>
+}
+
 export const createSession = createServerFn({ method: 'POST' })
-  .inputValidator((sessionId: string) => sessionId)
-  .handler(async ({ data: sessionId }) => {
+  .inputValidator((input: CreateSessionInput) => input)
+  .handler(async ({ data: { sessionId, initialState } }) => {
     const { response } = await adkClient.POST(
       '/apps/{app_name}/users/{user_id}/sessions/{session_id}',
       {
@@ -54,8 +61,9 @@ export const createSession = createServerFn({ method: 'POST' })
             session_id: sessionId,
           },
         },
-        // OpenAPI spec expects body for this POST request
-        body: {},
+        // In the updated ADK schema, the body for /sessions/{session_id} POST
+        // is expected to be the initial state (Record<string, any>).
+        body: initialState ?? {},
       },
     )
 
@@ -67,6 +75,33 @@ export const createSession = createServerFn({ method: 'POST' })
     return { ok: true }
   })
 
+interface UpdateSessionInput {
+  sessionId: string
+  stateDelta: Record<string, any>
+}
+
+export const updateSession = createServerFn({ method: 'PATCH' })
+  .inputValidator((input: UpdateSessionInput) => input)
+  .handler(async ({ data: { sessionId, stateDelta } }) => {
+    const { data, error } = await adkClient.PATCH(
+      '/apps/{app_name}/users/{user_id}/sessions/{session_id}',
+      {
+        params: {
+          path: {
+            app_name: ADK_APP_NAME,
+            user_id: ADK_USER_ID,
+            session_id: sessionId,
+          },
+        },
+        body: {
+          stateDelta,
+        },
+      },
+    )
+    if (error) handleAdkError(error)
+    return data
+  })
+
 export type ChatInput = Omit<RunRequest, 'appName' | 'userId' | 'streaming'>
 
 export const runChat = createServerFn({ method: 'POST' })