feat(ui): add saved session browser

UI needs to reopen prior conversations and inspect stored\nmessages. Expose a session list endpoint and accept\nnon-UUID ids in browser client.

Author: outlndrr

src/lummy_agent/transport/api_json.gleam

@@ -492,6 +492,12 @@ pub fn snapshot_json(snapshot: session_actor.Snapshot) -> json.Json {
   ])
 }
 
+pub fn sessions_json(sessions: List(domain_session.Session)) -> json.Json {
+  json.object([
+    #("sessions", json.array(from: sessions, of: session_json)),
+  ])
+}
+
 pub fn session_json(session: domain_session.Session) -> json.Json {
   json.object([
     #("session_id", json.string(domain_id.session_id_value(session.session_id))),
@@ -505,6 +511,10 @@ pub fn session_json(session: domain_session.Session) -> json.Json {
     #("updated_at", json.string(session.updated_at)),
     #("status", json.string(domain_session.status_name(session.status))),
     #("config_snapshot", json.string(session.config_snapshot)),
+    #("active_run_id", case session.active_run_id {
+      Some(run_id) -> json.string(domain_id.run_id_value(run_id))
+      None -> json.null()
+    }),
   ])
 }
 

src/lummy_agent/transport/http_server.gleam

@@ -225,6 +225,9 @@ pub fn handle(
     http.Post, ["api", "v1", "providers", "openai-compatible", "verify"] ->
       handle_verify_openai_compatible(config, request)
 
+    http.Get, ["api", "v1", "sessions"] ->
+      handle_list_sessions(dependencies.repositories)
+
     http.Post, ["api", "v1", "sessions"] ->
       handle_create_session(request, manager)
 
@@ -313,6 +316,13 @@ pub fn handle(
   }
 }
 
+fn handle_list_sessions(repositories: repository.Repositories) -> wisp.Response {
+  case repository.list_sessions(repositories.sessions) {
+    Ok(sessions) -> json_response(api_json.sessions_json(sessions), 200)
+    Error(error) -> error_response(error)
+  }
+}
+
 fn handle_create_session(
   request: wisp.Request,
   manager: session_manager.Handle,
@@ -1222,7 +1232,7 @@ fn ui_index_html() -> String {
     "      * { box-sizing: border-box; }",
     "      body { margin: 0; background: #0b1020; color: #e5e7eb; }",
     "      .page { min-height: 100vh; padding: 24px; }",
-    "      .panel { max-width: 1400px; margin: 0 auto; background: #11172a; border: 1px solid #24304b; border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }",
+    "      .panel { max-width: 1600px; margin: 0 auto; background: #11172a; border: 1px solid #24304b; border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }",
     "      .hero { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }",
     "      .hero h1 { margin: 0 0 8px 0; font-size: 28px; }",
     "      .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }",
@@ -1236,8 +1246,20 @@ fn ui_index_html() -> String {
     "      .textarea { resize: vertical; min-height: 140px; }",
     "      .button { border: 0; border-radius: 12px; background: #2563eb; color: white; padding: 10px 16px; font: inherit; cursor: pointer; }",
     "      .button:disabled { opacity: 0.45; cursor: not-allowed; }",
-    "      .split-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 16px; align-items: start; }",
-    "      .chat-pane, .debug-pane { min-width: 0; }",
+    "      .workspace { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1.6fr) minmax(320px, 1fr); gap: 16px; align-items: start; }",
+    "      .sessions-pane, .chat-pane, .debug-pane { min-width: 0; }",
+    "      .sessions-panel, .debug-panel { background: #0f172a; border: 1px solid #24304b; border-radius: 12px; padding: 14px; }",
+    "      .sessions-panel h2, .debug-panel h2 { margin: 0 0 8px 0; }",
+    "      .session-list { display: grid; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }",
+    "      .session-item { width: 100%; text-align: left; border: 1px solid #24304b; border-radius: 12px; background: #111827; color: inherit; padding: 12px; display: grid; gap: 10px; cursor: pointer; }",
+    "      .session-item.current { border-color: #3b82f6; background: #172554; }",
+    "      .session-item:disabled { opacity: 0.7; cursor: not-allowed; }",
+    "      .session-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }",
+    "      .session-id { display: block; white-space: pre-wrap; word-break: break-word; color: #dbeafe; }",
+    "      .session-item-meta { display: flex; flex-direction: column; gap: 4px; }",
+    "      .session-item-tags { display: flex; gap: 8px; flex-wrap: wrap; }",
+    "      .badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #334155; padding: 2px 8px; font-size: 12px; color: #cbd5e1; }",
+    "      .badge.accent { border-color: #3b82f6; color: #bfdbfe; }",
     "      .messages { display: grid; gap: 12px; margin-bottom: 16px; min-height: 240px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }",
     "      .message { border-radius: 14px; border: 1px solid #24304b; padding: 12px 14px; }",
     "      .message.user { background: #172554; }",
@@ -1249,13 +1271,12 @@ fn ui_index_html() -> String {
     "      .composer { display: grid; gap: 12px; }",
     "      .composer-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }",
     "      .hint { color: #94a3b8; font-size: 13px; }",
-    "      .debug-panel { background: #0f172a; border: 1px solid #24304b; border-radius: 12px; padding: 14px; }",
-    "      .debug-panel h2 { margin: 0 0 8px 0; }",
     "      .debug-log { display: grid; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }",
     "      .debug-entry { border: 1px solid #24304b; border-radius: 10px; padding: 10px; background: #111827; }",
     "      .debug-message { margin: 6px 0 0 0; white-space: pre-wrap; word-break: break-word; font-size: 13px; }",
     "      .empty { border: 1px dashed #334155; border-radius: 12px; padding: 18px; color: #94a3b8; text-align: center; }",
-    "      @media (max-width: 980px) { .split-layout { grid-template-columns: 1fr; } }",
+    "      @media (max-width: 1280px) { .workspace { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } .debug-pane { grid-column: 1 / -1; } }",
+    "      @media (max-width: 980px) { .workspace { grid-template-columns: 1fr; } }",
     "      @media (max-width: 720px) { .page { padding: 12px; } .panel { padding: 16px; } .hero { flex-direction: column; } }",
     "    </style>",
     "  </head>",

test/lummy_agent_http_api_test.gleam

@@ -70,6 +70,33 @@ pub fn create_session_route_generates_uuid_session_id_test() {
   assert session.channel_identity == "local-user"
 }
 
+pub fn list_sessions_route_test() {
+  let runtime = runtime("http-list-sessions")
+
+  let _ =
+    simulate.request(http.Post, "/api/v1/sessions")
+    |> simulate.json_body(create_session_body())
+    |> http_server.handle(runtime.config, runtime.dependencies, _)
+
+  let _ =
+    simulate.request(http.Post, "/api/v1/sessions")
+    |> simulate.json_body(create_session_body_for(
+      session_id: "session-http-2",
+      user_id: "user-http-2",
+      channel_identity: "browser-user",
+      created_at: "2026-04-16T00:00:10Z",
+    ))
+    |> http_server.handle(runtime.config, runtime.dependencies, _)
+
+  let response =
+    simulate.request(http.Get, "/api/v1/sessions")
+    |> http_server.handle(runtime.config, runtime.dependencies, _)
+
+  assert response.status == 200
+  assert decode_session_count(response) == 2
+  assert decode_session_ids(response) == ["session-http-1", "session-http-2"]
+}
+
 pub fn openrouter_verify_route_without_key_test() {
   let runtime = runtime("http-openrouter-verify")
 
@@ -801,12 +828,26 @@ fn reset_db(name: String) -> String {
 }
 
 fn create_session_body() -> json.Json {
+  create_session_body_for(
+    session_id: "session-http-1",
+    user_id: "user-http-1",
+    channel_identity: "local-user",
+    created_at: "2026-04-16T00:00:00Z",
+  )
+}
+
+fn create_session_body_for(
+  session_id session_id: String,
+  user_id user_id: String,
+  channel_identity channel_identity: String,
+  created_at created_at: String,
+) -> json.Json {
   json.object([
-    #("session_id", json.string("session-http-1")),
-    #("user_id", json.string("user-http-1")),
+    #("session_id", json.string(session_id)),
+    #("user_id", json.string(user_id)),
     #("channel_type", json.string("api")),
-    #("channel_identity", json.string("local-user")),
-    #("created_at", json.string("2026-04-16T00:00:00Z")),
+    #("channel_identity", json.string(channel_identity)),
+    #("created_at", json.string(created_at)),
     #("config_snapshot", json.string("{}")),
   ])
 }
@@ -966,6 +1007,31 @@ fn decode_int_field(response, field: String) -> Int {
   value
 }
 
+fn decode_session_count(response) -> Int {
+  let decoder = {
+    use sessions <- decode.field("sessions", decode.list(of: decode.dynamic))
+    decode.success(list.length(sessions))
+  }
+
+  let assert Ok(value) =
+    json.parse(from: simulate.read_body(response), using: decoder)
+  value
+}
+
+fn decode_session_ids(response) -> List(String) {
+  let decoder = {
+    use sessions <- decode.field(
+      "sessions",
+      decode.list(of: session_id_field_decoder()),
+    )
+    decode.success(sessions)
+  }
+
+  let assert Ok(value) =
+    json.parse(from: simulate.read_body(response), using: decoder)
+  value
+}
+
 fn decode_message_count(response) -> Int {
   let decoder = {
     use messages <- decode.field("messages", decode.list(of: decode.dynamic))
@@ -1143,6 +1209,13 @@ fn decode_active_run_id(response) -> String {
   value
 }
 
+fn session_id_field_decoder() {
+  {
+    use session_id <- decode.field("session_id", decode.string)
+    decode.success(session_id)
+  }
+}
+
 fn message_role_decoder() {
   {
     use role <- decode.field("role", decode.string)

ui/README.md

@@ -28,7 +28,9 @@ http://localhost:4000/ui
 ## Current scope
 
 - provider fixed to `openrouter`
-- creates fresh API session in browser
+- loads saved sessions from backend and selects latest by default
+- can create fresh API session in browser
+- shows session list sidebar for reopening prior conversations
 - appends user message
 - starts `/api/v1/sessions/:id/agent-runs`
 - opens live session SSE stream from `/api/v1/sessions/:id/events`
@@ -37,4 +39,4 @@ http://localhost:4000/ui
 
 Not yet:
 - auth
-- reconnect to prior browser session
+- session search/filter