diff --git a/bun.lock b/bun.lock
index caa5d8187..bc1f24036 100644
--- a/bun.lock
+++ b/bun.lock
@@ -883,7 +883,9 @@
 
     "@twsxtd/hapi-linux-arm64": ["@twsxtd/hapi-linux-arm64@0.16.5", "", { "os": "linux", "cpu": "arm64", "bin": { "hapi": "bin/hapi" } }, "sha512-UlYpOd89C3ePAiy/6Zcz9NziN2vFIEMipBeS0mb6s4U7qP3Um6E4BwoKIUhIlriy8RxyZxRvXq1EtMxECh6M+g=="],
 
-    "@twsxtd/hapi-win32-x64": ["@twsxtd/hapi-win32-x64@0.15.2", "", { "os": "win32", "cpu": "x64", "bin": { "hapi": "bin/hapi.exe" } }, "sha512-vuQH9INKvqwVZ9JphUmEyzKz6zWxHy3GE4j0mDqTulO234nGEhljkN3Qod0d7bLVncmO53zSMcm+ahwZ3qL4OA=="],
+    "@twsxtd/hapi-linux-x64": ["@twsxtd/hapi-linux-x64@0.16.5", "", { "os": "linux", "cpu": "x64", "bin": { "hapi": "bin/hapi" } }, "sha512-Cdo2B/BCnDJRkkGHxMo8UVVcKXJyuS7bnr+JtJL4f6kp7o8T2T9o/85S05Z/TF8k5dAxz2Np8rpJgmhBd/1boA=="],
+
+    "@twsxtd/hapi-win32-x64": ["@twsxtd/hapi-win32-x64@0.16.5", "", { "os": "win32", "cpu": "x64", "bin": { "hapi": "bin/hapi.exe" } }, "sha512-jnl5zxT2AIslIy2X9jYklTUIob/Om8RlPIx2QbobkYP5+mMpPWUpJsBFx1NdN8FDMApcVQ/tqh6v2d72m16rDA=="],
 
     "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
 
diff --git a/hub/README.md b/hub/README.md
index faed72973..8bef705f9 100644
--- a/hub/README.md
+++ b/hub/README.md
@@ -151,7 +151,7 @@ Namespace: `/cli`
 - `message` - Send message to session.
 - `update-metadata` - Update session metadata.
 - `update-state` - Update agent state.
-- `session-alive` - Keep session active.
+- `session-alive` - Keep session active. Payloads are validated against the shared protocol schemas; unknown `permissionMode`, `modelMode`, or `collaborationMode` values and out-of-range `sid`/`time` values cause the heartbeat to be dropped. Forked or older CLIs emitting non-standard values must upgrade.
 - `session-end` - Mark session ended.
 - `machine-alive` - Keep machine online.
 - `rpc-register` - Register RPC handler.
diff --git a/hub/src/socket/handlers/cli/sessionHandlers.ts b/hub/src/socket/handlers/cli/sessionHandlers.ts
index 67ec014b7..845ef7a6c 100644
--- a/hub/src/socket/handlers/cli/sessionHandlers.ts
+++ b/hub/src/socket/handlers/cli/sessionHandlers.ts
@@ -1,7 +1,8 @@
 import type { ClientToServerEvents } from '@hapi/protocol'
+import { CodexCollaborationModeSchema, ModelModeSchema, PermissionModeSchema } from '@hapi/protocol/schemas'
 import { z } from 'zod'
 import { randomUUID } from 'node:crypto'
-import type { CodexCollaborationMode, PermissionMode } from '@hapi/protocol/types'
+import type { CodexCollaborationMode, ModelMode, PermissionMode } from '@hapi/protocol/types'
 import type { Store, StoredSession } from '../../../store'
 import type { SyncEvent } from '../../../sync/syncEngine'
 import { extractTodoWriteTodosFromMessageContent } from '../../../sync/todos'
@@ -18,6 +19,7 @@ type SessionAlivePayload = {
     model?: string | null
     effort?: string | null
     collaborationMode?: CodexCollaborationMode
+    modelMode?: ModelMode
 }
 
 type SessionEndPayload = {
@@ -50,6 +52,18 @@ const updateStateSchema = z.object({
     agentState: z.unknown().nullable()
 })
 
+const sessionAliveSchema = z.object({
+    sid: z.string().min(1).max(128),
+    time: z.number().finite().nonnegative(),
+    thinking: z.boolean().optional(),
+    mode: z.enum(['local', 'remote']).optional(),
+    permissionMode: PermissionModeSchema.optional(),
+    model: z.string().max(256).nullable().optional(),
+    effort: z.string().max(64).nullable().optional(),
+    collaborationMode: CodexCollaborationModeSchema.optional(),
+    modelMode: ModelModeSchema.optional()
+})
+
 export type SessionHandlersDeps = {
     store: Store
     resolveSessionAccess: ResolveSessionAccess
@@ -235,15 +249,17 @@ export function registerSessionHandlers(socket: CliSocketWithData, deps: Session
     socket.on('update-state', handleUpdateState)
 
     socket.on('session-alive', (data: SessionAlivePayload) => {
-        if (!data || typeof data.sid !== 'string' || typeof data.time !== 'number') {
+        const parsed = sessionAliveSchema.safeParse(data)
+        if (!parsed.success) {
             return
         }
-        const sessionAccess = resolveSessionAccess(data.sid)
+        const payload = parsed.data
+        const sessionAccess = resolveSessionAccess(payload.sid)
         if (!sessionAccess.ok) {
-            emitAccessError('session', data.sid, sessionAccess.reason)
+            emitAccessError('session', payload.sid, sessionAccess.reason)
             return
         }
-        onSessionAlive?.(data)
+        onSessionAlive?.(payload)
     })
 
     socket.on('session-end', (data: SessionEndPayload) => {
diff --git a/package.json b/package.json
index 6d3f7b88d..8c0b05347 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
         "test:hub": "cd hub && bun run test",
         "test:web": "cd web && bun run test",
         "test:e2e:web": "cd web && bun run test:e2e",
-        "test:e2e:web:session-sort": "cd web && bun run test:e2e:session-sort",
         "clean-session": "bun run hub/scripts/cleanup-sessions.ts",
         "release-all": "cd cli && bun run release-all"
     },
diff --git a/web/README.md b/web/README.md
index efca3a36a..037dcf3c9 100644
--- a/web/README.md
+++ b/web/README.md
@@ -142,9 +142,12 @@ The built assets land in `web/dist` and are served by hapi-hub. The single execu
 
 ## E2E (Playwright)
 
-Session-sort backend persistence has Playwright coverage in:
+Playwright covers:
 
-- `web/e2e/session-sort.backend.e2e.spec.ts`
+- `web/e2e/session-sort.backend.e2e.spec.ts` — session-sort backend persistence.
+- `web/e2e/session-metadata.ui.e2e.spec.ts` — session list and header metadata chip rendering.
+
+Shared env knobs: `HAPI_E2E_BASE_URL` (default `http://127.0.0.1:3906`), `HAPI_E2E_CLI_TOKEN` (default `pw-test-token`), and `HAPI_E2E_RUN_ID` (defaults to a random suffix) namespace test sessions across runs.
 
 Install browser once:
 
diff --git a/web/e2e/session-metadata.ui.e2e.spec.ts b/web/e2e/session-metadata.ui.e2e.spec.ts
new file mode 100644
index 000000000..9df48c4f5
--- /dev/null
+++ b/web/e2e/session-metadata.ui.e2e.spec.ts
@@ -0,0 +1,83 @@
+import { expect, test, type Page } from '@playwright/test'
+
+const BASE_URL = process.env.HAPI_E2E_BASE_URL ?? 'http://127.0.0.1:3906'
+const BASE_TOKEN = process.env.HAPI_E2E_CLI_TOKEN ?? 'pw-test-token'
+const RUN_ID = process.env.HAPI_E2E_RUN_ID ?? `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+
+function token(namespaceSuffix: string): string {
+    return `${BASE_TOKEN}:session-metadata-${RUN_ID}-${namespaceSuffix}`
+}
+
+async function login(page: Page, accessToken: string): Promise<void> {
+    await page.goto(BASE_URL, { waitUntil: 'networkidle' })
+    await page.getByPlaceholder('Access token').fill(accessToken)
+    await page.getByRole('button', { name: 'Sign In' }).click()
+    await expect(page.getByPlaceholder('Access token')).toHaveCount(0, { timeout: 15_000 })
+    await expect(page.locator('.session-list-item').first()).toBeVisible({ timeout: 15_000 })
+}
+
+async function createCliSession(
+    accessToken: string,
+    tag: string,
+    name: string,
+    path: string,
+    machineId: string
+): Promise<string> {
+    const response = await fetch(`${BASE_URL}/cli/sessions`, {
+        method: 'POST',
+        headers: {
+            authorization: `Bearer ${accessToken}`,
+            'content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            tag,
+            metadata: {
+                name,
+                path,
+                host: 'pw-host',
+                machineId,
+                flavor: 'codex',
+                worktree: {
+                    basePath: '/work/repo',
+                    branch: 'feature/chips',
+                    name: 'feature-chips'
+                }
+            },
+            agentState: null,
+            model: 'gpt-5.4',
+            effort: 'very-high'
+        })
+    })
+    expect(response.status).toBe(200)
+    const json = await response.json() as { session: { id: string } }
+    return json.session.id
+}
+
+test('session metadata chips render in list and header', async ({ page }) => {
+    const accessToken = token('chips')
+
+    const activeSessionId = await createCliSession(accessToken, 's-active', 'Active Session', '/work/repo/project-a', 'm1')
+    await createCliSession(accessToken, 's-inactive', 'Inactive Session', '/work/repo/project-a', 'm1')
+
+    await login(page, accessToken)
+
+    await page.getByRole('button', {
+        name: /work\/repo/i
+    }).first().click()
+
+    const activeRow = page.locator('.session-list-item', { hasText: 'Active Session' }).first()
+    await expect(activeRow).toContainText('codex')
+    await expect(activeRow).toContainText('gpt-5.4')
+    await expect(activeRow).toContainText('feature/chips')
+
+    await page.goto(`${BASE_URL}/sessions/${activeSessionId}`, { waitUntil: 'domcontentloaded' })
+
+    const headerTitle = page.locator('div.truncate.font-semibold').first()
+    await expect(headerTitle).toHaveText('Active Session')
+
+    const headerMeta = headerTitle.locator('xpath=following-sibling::div[1]')
+    await expect(headerMeta).toContainText('codex')
+    await expect(headerMeta).toContainText('gpt-5.4')
+    await expect(headerMeta).toContainText('Very High')
+    await expect(headerMeta).toContainText('feature/chips')
+})
diff --git a/web/package.json b/web/package.json
index 9f82a8754..e719e5eb4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,7 +11,6 @@
         "preview": "vite preview",
         "test": "vitest run",
         "test:e2e": "BUN_BIN=${BUN_BIN:-$(command -v bun || echo $HOME/.bun/bin/bun)} playwright test --config=playwright.config.ts",
-        "test:e2e:session-sort": "BUN_BIN=${BUN_BIN:-$(command -v bun || echo $HOME/.bun/bin/bun)} playwright test --config=playwright.config.ts --grep \"session sort\"",
         "test:e2e:install": "playwright install chromium"
     },
     "dependencies": {
diff --git a/web/playwright.config.ts b/web/playwright.config.ts
index 178ec7108..b19469a85 100644
--- a/web/playwright.config.ts
+++ b/web/playwright.config.ts
@@ -2,10 +2,27 @@ import { defineConfig, devices } from '@playwright/test'
 
 const port = Number(process.env.HAPI_E2E_PORT ?? '3906')
 const baseUrl = process.env.HAPI_E2E_BASE_URL ?? `http://127.0.0.1:${port}`
-const hapiHome = process.env.HAPI_E2E_HAPI_HOME ?? `/tmp/hapi-playwright-session-sort-${port}`
+const hapiHome = process.env.HAPI_E2E_HAPI_HOME ?? `/tmp/hapi-playwright-${port}`
 const cliApiToken = process.env.HAPI_E2E_CLI_TOKEN ?? 'pw-test-token'
 const bunBin = process.env.BUN_BIN ?? 'bun'
 
+function shellQuote(value: string): string {
+    return `'${value.replace(/'/g, `'\"'\"'`)}'`
+}
+
+const buildCommand = [
+    `${shellQuote(bunBin)} run build`,
+    `rm -rf ${shellQuote(hapiHome)}`,
+    `mkdir -p ${shellQuote(hapiHome)}`,
+    [
+        `CLI_API_TOKEN=${shellQuote(cliApiToken)}`,
+        `HAPI_HOME=${shellQuote(hapiHome)}`,
+        'HAPI_LISTEN_HOST=127.0.0.1',
+        `HAPI_LISTEN_PORT=${port}`,
+        `${shellQuote(bunBin)} run --cwd ../hub src/index.ts`
+    ].join(' ')
+].join(' && ')
+
 export default defineConfig({
     testDir: './e2e',
     timeout: 180_000,
@@ -29,7 +46,7 @@ export default defineConfig({
         }
     ],
     webServer: {
-        command: `${bunBin} run build && rm -rf "${hapiHome}" && mkdir -p "${hapiHome}" && CLI_API_TOKEN=${cliApiToken} HAPI_HOME="${hapiHome}" HAPI_LISTEN_HOST=127.0.0.1 HAPI_LISTEN_PORT=${port} ${bunBin} run --cwd ../hub src/index.ts`,
+        command: buildCommand,
         url: `${baseUrl}/health`,
         timeout: 120_000,
         reuseExistingServer: false
diff --git a/web/src/components/NewSession/ActionButtons.tsx b/web/src/components/NewSession/ActionButtons.tsx
index 00b6b9f81..72292b247 100644
--- a/web/src/components/NewSession/ActionButtons.tsx
+++ b/web/src/components/NewSession/ActionButtons.tsx
@@ -13,7 +13,7 @@ export function ActionButtons(props: {
     const { t } = useTranslation()
 
     return (
-        <div className="flex gap-2 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
+        <div className="sticky bottom-0 z-10 flex gap-2 border-t border-[var(--app-divider)] bg-[var(--app-bg)] px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)] shadow-[0_-8px_24px_rgba(0,0,0,0.06)]">
             <Button
                 variant="secondary"
                 onClick={props.onCancel}
diff --git a/web/src/components/SessionHeader.test.tsx b/web/src/components/SessionHeader.test.tsx
new file mode 100644
index 000000000..9cab6f28d
--- /dev/null
+++ b/web/src/components/SessionHeader.test.tsx
@@ -0,0 +1,147 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { I18nProvider } from '@/lib/i18n-context'
+import { SessionHeader } from './SessionHeader'
+
+vi.mock('@/hooks/useTelegram', () => ({
+    isTelegramApp: vi.fn(() => false)
+}))
+
+vi.mock('@/hooks/mutations/useSessionActions', () => ({
+    useSessionActions: () => ({
+        archiveSession: vi.fn(),
+        renameSession: vi.fn(),
+        deleteSession: vi.fn(),
+        isPending: false
+    })
+}))
+
+vi.mock('@/components/SessionActionMenu', () => ({
+    SessionActionMenu: () => null
+}))
+
+vi.mock('@/components/RenameSessionDialog', () => ({
+    RenameSessionDialog: () => null
+}))
+
+vi.mock('@/components/ui/ConfirmDialog', () => ({
+    ConfirmDialog: () => null
+}))
+
+function renderHeader(sessionOverrides: Record<string, unknown> = {}) {
+    const session = {
+        id: '1234567890abcdef',
+        active: true,
+        createdAt: 0,
+        updatedAt: 0,
+        activeAt: 0,
+        seq: 0,
+        namespace: 'default',
+        metadataVersion: 0,
+        agentStateVersion: 0,
+        thinking: false,
+        thinkingAt: 0,
+        metadata: {
+            name: 'Named Session',
+            path: '/workspace/project-name',
+            flavor: 'codex',
+            worktree: { branch: 'feature/chips', basePath: '/workspace/project-name' }
+        },
+        model: 'gpt-5.4',
+        effort: 'very-high',
+        permissionMode: 'yolo',
+        collaborationMode: 'default',
+        agentState: null,
+        ...sessionOverrides
+    }
+
+    return renderToStaticMarkup(
+        <I18nProvider>
+            <SessionHeader
+                session={session as never}
+                onBack={vi.fn()}
+                onViewFiles={vi.fn()}
+                api={null}
+            />
+        </I18nProvider>
+    )
+}
+
+describe('SessionHeader', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        const localStorageMock = {
+            getItem: vi.fn(() => 'en'),
+            setItem: vi.fn(),
+            removeItem: vi.fn()
+        }
+        Object.defineProperty(window, 'localStorage', { value: localStorageMock, configurable: true })
+    })
+
+    it('renders full metadata chips', () => {
+        const markup = renderHeader()
+        expect(markup).toContain('Named Session')
+        expect(markup).toContain('codex')
+        expect(markup).toContain('gpt-5.4')
+        expect(markup).toContain('Very High')
+        expect(markup).toContain('Yolo')
+        expect(markup).toContain('feature/chips')
+        expect(markup).toContain('text-[var(--app-flavor-codex-text)] font-medium')
+        expect(markup).toContain('text-[var(--app-hint)] opacity-40')
+    })
+
+    it('hides effort when absent', () => {
+        const markup = renderHeader({ effort: null })
+        expect(markup).not.toContain('Very High')
+        expect(markup).toContain('Named Session')
+        expect(markup).toContain('gpt-5.4')
+    })
+
+    it('hides permission mode when default', () => {
+        const markup = renderHeader({ permissionMode: 'default' })
+        expect(markup).not.toContain('Yolo')
+        expect(markup).toContain('Named Session')
+        expect(markup).toContain('codex')
+    })
+
+    it('hides worktree when absent', () => {
+        const markup = renderHeader({
+            metadata: {
+                name: 'Named Session',
+                path: '/workspace/project-name',
+                flavor: 'codex'
+            }
+        })
+        expect(markup).not.toContain('feature/chips')
+    })
+
+    it('falls back to the path basename for the title', () => {
+        const markup = renderHeader({
+            metadata: {
+                path: '/workspace/path-title',
+                flavor: 'codex'
+            }
+        })
+        expect(markup).toContain('path-title')
+    })
+
+    it('falls back to the short id when no path or summary exists', () => {
+        const markup = renderHeader({
+            id: 'abcdef1234567890',
+            metadata: null
+        })
+        expect(markup).toContain('abcdef12')
+    })
+
+    it('uses hint styling for unknown flavors', () => {
+        const markup = renderHeader({
+            metadata: {
+                name: 'Mystery Session',
+                path: '/workspace/mystery',
+                flavor: 'mystery'
+            }
+        })
+        expect(markup).toContain('mystery')
+        expect(markup).toContain('text-[var(--app-hint)] font-medium')
+    })
+})
diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index 21b8f23a4..416f5a9ff 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -1,14 +1,15 @@
-import { useId, useMemo, useRef, useState } from 'react'
+import { Fragment, type ReactNode, useId, useMemo, useRef, useState } from 'react'
+import { getPermissionModeLabel, isPermissionModeAllowedForFlavor } from '@hapi/protocol'
 import type { Session } from '@/types/api'
 import type { ApiClient } from '@/api/client'
-import { getPermissionModeLabel, getPermissionModeTone, isPermissionModeAllowedForFlavor } from '@hapi/protocol'
 import { isTelegramApp } from '@/hooks/useTelegram'
 import { useSessionActions } from '@/hooks/mutations/useSessionActions'
 import { SessionActionMenu } from '@/components/SessionActionMenu'
 import { RenameSessionDialog } from '@/components/RenameSessionDialog'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import { formatEffortLabel, getFlavorTextClass, META_DOT_SEPARATOR_CLASS } from '@/lib/agentFlavorUtils'
+import { getSessionModelLabel } from '@/lib/sessionModelLabel'
 import { useTranslation } from '@/lib/use-translation'
-import { getFlavorBadgeClass, PERMISSION_TONE_BADGE } from '@/lib/agentFlavorUtils'
 
 function getSessionTitle(session: Session): string {
     if (session.metadata?.name) {
@@ -71,20 +72,25 @@ export function SessionHeader(props: {
     const { t } = useTranslation()
     const { session, api, onSessionDeleted } = props
     const title = useMemo(() => getSessionTitle(session), [session])
-    const worktreeBranch = session.metadata?.worktree?.branch
     const flavor = session.metadata?.flavor?.trim() ?? null
-    const flavorLabel = flavor || 'unknown'
-    const flavorBadgeClass = getFlavorBadgeClass(flavor)
-    const permMode = session.permissionMode
+    const worktreeBranch = session.metadata?.worktree?.branch
+    const modelLabel = getSessionModelLabel(session)
+    const flavorLabel = flavor?.toLowerCase() || 'unknown'
+    const effortLabel = formatEffortLabel(session.effort)
+    const permissionMode = session.permissionMode
         && session.permissionMode !== 'default'
         && isPermissionModeAllowedForFlavor(session.permissionMode, flavor)
-        ? session.permissionMode
-        : null
-    const permissionLabel = permMode ? getPermissionModeLabel(permMode).toLowerCase() : null
-    const permissionBadgeClass = permMode
-        ? PERMISSION_TONE_BADGE[getPermissionModeTone(permMode)]
+        ? getPermissionModeLabel(session.permissionMode)
         : null
-    const showModelModeBadge = !flavor || flavor === 'claude'
+    const metadataItems = [
+        <span key="flavor" className={getFlavorTextClass(flavor)}>
+            {flavorLabel}
+        </span>,
+        modelLabel ? <span key="model">{modelLabel.value}</span> : null,
+        effortLabel ? <span key="effort">{effortLabel}</span> : null,
+        permissionMode ? <span key="permission">{permissionMode}</span> : null,
+        worktreeBranch ? <span key="worktree">{worktreeBranch}</span> : null
+    ].filter(Boolean) as ReactNode[]
 
     const [menuOpen, setMenuOpen] = useState(false)
     const [menuAnchorPoint, setMenuAnchorPoint] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
@@ -113,7 +119,6 @@ export function SessionHeader(props: {
         setMenuOpen((open) => !open)
     }
 
-    // In Telegram, don't render header (Telegram provides its own)
     if (isTelegramApp()) {
         return null
     }
@@ -121,12 +126,11 @@ export function SessionHeader(props: {
     return (
         <>
             <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
-                <div className="mx-auto w-full max-w-content flex items-center gap-2 p-3">
-                    {/* Back button */}
+                <div className="mx-auto flex w-full max-w-content items-start gap-2 p-3">
                     <button
                         type="button"
                         onClick={props.onBack}
-                        className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
+                        className="flex h-8 w-8 self-start items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
                     >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -143,30 +147,19 @@ export function SessionHeader(props: {
                         </svg>
                     </button>
 
-                    {/* Session info - two lines: title and badges */}
                     <div className="min-w-0 flex-1">
                         <div className="truncate font-semibold">
                             {title}
                         </div>
-                        <div className="flex flex-wrap items-center gap-1.5 pt-1 text-xs">
-                            <span className={`inline-flex items-center rounded-full border px-2 py-0.5 font-medium ${flavorBadgeClass}`}>
-                                {flavorLabel}
-                            </span>
-                            {permissionLabel && permissionBadgeClass ? (
-                                <span className={`inline-flex items-center rounded-full border px-2 py-0.5 font-medium ${permissionBadgeClass}`}>
-                                    {permissionLabel}
-                                </span>
-                            ) : null}
-                            {showModelModeBadge ? (
-                                <span className="inline-flex items-center rounded-full border border-[var(--app-border)] bg-[var(--app-subtle-bg)] px-2 py-0.5 font-medium text-[var(--app-fg)]">
-                                    {session.modelMode || 'default'}
-                                </span>
-                            ) : null}
-                            {worktreeBranch ? (
-                                <span className="inline-flex items-center rounded-full border border-[var(--app-border)] bg-[var(--app-subtle-bg)] px-2 py-0.5 text-[var(--app-hint)]">
-                                    {worktreeBranch}
-                                </span>
-                            ) : null}
+                        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-[var(--app-hint)]">
+                            {metadataItems.map((item, index) => (
+                                <Fragment key={index}>
+                                    {index > 0 ? (
+                                        <span aria-hidden="true" className={META_DOT_SEPARATOR_CLASS}>·</span>
+                                    ) : null}
+                                    {item}
+                                </Fragment>
+                            ))}
                         </div>
                     </div>
 
@@ -174,7 +167,7 @@ export function SessionHeader(props: {
                         <button
                             type="button"
                             onClick={props.onViewFiles}
-                            className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
+                            className="flex h-8 w-8 self-start items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
                             title={t('session.title')}
                         >
                             <FilesIcon />
@@ -189,7 +182,7 @@ export function SessionHeader(props: {
                         aria-haspopup="menu"
                         aria-expanded={menuOpen}
                         aria-controls={menuOpen ? menuId : undefined}
-                        className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
+                        className="flex h-8 w-8 self-start items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
                         title={t('session.more')}
                     >
                         <MoreVerticalIcon />
diff --git a/web/src/components/SessionList.test.tsx b/web/src/components/SessionList.test.tsx
index 59c89007c..0e64fcf70 100644
--- a/web/src/components/SessionList.test.tsx
+++ b/web/src/components/SessionList.test.tsx
@@ -1,206 +1,136 @@
-import { describe, expect, it, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
 import type { SessionSummary } from '@/types/api'
-import { I18nProvider } from '@/lib/i18n-context'
-import { SessionList } from './SessionList'
-import { useSessionSortPreference } from '@/hooks/queries/useSessionSortPreference'
-import { useSessionSortPreferenceMutation } from '@/hooks/mutations/useSessionSortPreference'
+import { UNKNOWN_MACHINE_ID, groupSessionsByDirectory } from './SessionList'
 
-vi.mock('@/hooks/useLongPress', () => ({
-    useLongPress: ({ onClick }: { onClick: () => void }) => ({ onClick })
-}))
-
-vi.mock('@/hooks/usePlatform', () => ({
-    usePlatform: () => ({ haptic: { impact: vi.fn() } })
-}))
-
-vi.mock('@/hooks/mutations/useSessionActions', () => ({
-    useSessionActions: () => ({
-        archiveSession: vi.fn(),
-        renameSession: vi.fn(),
-        deleteSession: vi.fn(),
-        isPending: false
-    })
-}))
-
-vi.mock('@/hooks/queries/useSessionSortPreference', () => ({
-    useSessionSortPreference: vi.fn(() => ({
-        preference: {
-            sortMode: 'auto',
-            manualOrder: {
-                groupOrder: [],
-                sessionOrder: {}
-            },
-            version: 1,
-            updatedAt: 0
-        }
-    }))
-}))
-
-vi.mock('@/hooks/mutations/useSessionSortPreference', () => ({
-    useSessionSortPreferenceMutation: vi.fn(() => ({
-        setSessionSortPreference: vi.fn(),
-        isPending: false
-    }))
-}))
-
-vi.mock('@/components/SessionActionMenu', () => ({
-    SessionActionMenu: () => null
-}))
-
-vi.mock('@/components/RenameSessionDialog', () => ({
-    RenameSessionDialog: () => null
-}))
-
-vi.mock('@/components/ui/ConfirmDialog', () => ({
-    ConfirmDialog: () => null
-}))
-
-function makeSession(overrides: Partial<SessionSummary>): SessionSummary {
-    const id = overrides.id ?? 'session-1'
+function makeSession(overrides: Partial<SessionSummary> = {}): SessionSummary {
     return {
-        id,
-        active: overrides.active ?? true,
-        thinking: overrides.thinking ?? false,
-        activeAt: overrides.activeAt ?? 1,
-        updatedAt: overrides.updatedAt ?? 1,
-        metadata: overrides.metadata ?? {
-            name: id,
-            path: '/repo/app',
-            machineId: 'machine-1',
-            flavor: 'claude',
-            summary: { text: id }
+        id: 'session-1',
+        active: false,
+        thinking: false,
+        activeAt: 0,
+        updatedAt: 0,
+        metadata: {
+            path: '/workspace/project',
+            machineId: 'machine-a'
         },
-        todoProgress: overrides.todoProgress ?? null,
-        pendingRequestsCount: overrides.pendingRequestsCount ?? 0,
-        model: overrides.model ?? null,
-        effort: overrides.effort ?? null,
-        permissionMode: overrides.permissionMode,
-        modelMode: overrides.modelMode
+        todoProgress: null,
+        pendingRequestsCount: 0,
+        model: null,
+        effort: null,
+        ...overrides
     }
 }
 
-function renderList(
-    sessions: SessionSummary[],
-    machineLabelsById?: Record<string, string>,
-    options?: { renderHeader?: boolean }
-) {
-    return render(
-        <I18nProvider>
-            <SessionList
-                sessions={sessions}
-                onSelect={vi.fn()}
-                onNewSession={vi.fn()}
-                onRefresh={vi.fn()}
-                isLoading={false}
-                renderHeader={options?.renderHeader ?? false}
-                api={null}
-                machineLabelsById={machineLabelsById}
-            />
-        </I18nProvider>
-    )
-}
+describe('groupSessionsByDirectory', () => {
+    it('groups by machine and directory', () => {
+        const groups = groupSessionsByDirectory([
+            makeSession({ id: 'session-a', metadata: { path: '/workspace/project', machineId: 'machine-a' } }),
+            makeSession({ id: 'session-b', metadata: { path: '/workspace/project', machineId: 'machine-b' } })
+        ])
+
+        expect(groups).toHaveLength(2)
+        expect(groups.map(group => group.key)).toEqual([
+            'machine-a::/workspace/project',
+            'machine-b::/workspace/project'
+        ])
+    })
+
+    it('sorts active sessions before inactive sessions within a group', () => {
+        const [group] = groupSessionsByDirectory([
+            makeSession({ id: 'inactive', active: false, updatedAt: 20 }),
+            makeSession({ id: 'active', active: true, updatedAt: 10 })
+        ])
+
+        expect(group.sessions.map(session => session.id)).toEqual(['active', 'inactive'])
+    })
 
-describe('SessionList', () => {
-    it('shows sort toggle title in header', () => {
-        renderList([], {}, { renderHeader: true })
+    it('ranks active sessions with pending requests ahead of other active sessions', () => {
+        const [group] = groupSessionsByDirectory([
+            makeSession({ id: 'active-no-pending', active: true, updatedAt: 30, pendingRequestsCount: 0 }),
+            makeSession({ id: 'active-pending', active: true, updatedAt: 10, pendingRequestsCount: 2 })
+        ])
 
-        expect(screen.getByTitle('Sort: automatic')).toBeInTheDocument()
+        expect(group.sessions.map(session => session.id)).toEqual(['active-pending', 'active-no-pending'])
     })
 
-    it('groups sessions by machine and directory', () => {
-        const sessions = [
+    it('sorts groups with active sessions ahead of inactive groups', () => {
+        const groups = groupSessionsByDirectory([
             makeSession({
-                id: 's1',
-                metadata: { path: '/repo/app', machineId: 'm1', flavor: 'claude' },
-                updatedAt: 100
+                id: 'inactive-group',
+                updatedAt: 100,
+                metadata: { path: '/workspace/inactive', machineId: 'machine-a' }
             }),
             makeSession({
-                id: 's2',
-                metadata: { path: '/repo/app', machineId: 'm2', flavor: 'claude' },
-                updatedAt: 90
+                id: 'active-group',
+                active: true,
+                updatedAt: 10,
+                metadata: { path: '/workspace/active', machineId: 'machine-a' }
             })
-        ]
+        ])
 
-        renderList(sessions, { m1: 'Laptop', m2: 'Server' })
-
-        expect(screen.getByText('Laptop')).toBeInTheDocument()
-        expect(screen.getByText('Server')).toBeInTheDocument()
+        expect(groups.map(group => group.directory)).toEqual([
+            '/workspace/active',
+            '/workspace/inactive'
+        ])
     })
 
-    it('shows permission badge only when mode allowed for flavor', () => {
-        const sessions = [
+    it('groups worktree sessions by basePath', () => {
+        const [group] = groupSessionsByDirectory([
             makeSession({
-                id: 'claude-plan',
-                metadata: { path: '/repo/claude', machineId: 'm1', flavor: 'claude' },
-                permissionMode: 'plan'
+                id: 'worktree-a',
+                metadata: {
+                    path: '/workspace/project-worktrees/feature-a',
+                    machineId: 'machine-a',
+                    worktree: {
+                        branch: 'feature-a',
+                        basePath: '/workspace/project',
+                        name: 'feature-a'
+                    }
+                }
             }),
             makeSession({
-                id: 'codex-plan',
-                metadata: { path: '/repo/codex', machineId: 'm1', flavor: 'codex' },
-                permissionMode: 'plan'
+                id: 'worktree-b',
+                metadata: {
+                    path: '/workspace/project-worktrees/feature-b',
+                    machineId: 'machine-a',
+                    worktree: {
+                        branch: 'feature-b',
+                        basePath: '/workspace/project',
+                        name: 'feature-b'
+                    }
+                }
             })
-        ]
-
-        renderList(sessions, { m1: 'Laptop' })
+        ])
 
-        expect(screen.getByText('plan mode')).toBeInTheDocument()
-        const codexRow = screen.getAllByText('codex')[0]?.closest('button')
-        expect(codexRow).toBeTruthy()
-        expect(codexRow?.textContent?.toLowerCase()).not.toContain('plan mode')
+        expect(group.directory).toBe('/workspace/project')
+        expect(group.key).toBe('machine-a::/workspace/project')
+        expect(group.sessions).toHaveLength(2)
     })
 
-    it('renders sessions using backend manual order', () => {
-        vi.mocked(useSessionSortPreference).mockReturnValue({
-            preference: {
-                sortMode: 'manual',
-                manualOrder: {
-                    groupOrder: ['m1::/repo/app'],
-                    sessionOrder: {
-                        'm1::/repo/app': ['s2', 's1']
-                    }
-                },
-                version: 3,
-                updatedAt: 100
-            },
-            isLoading: false,
-            error: null,
-            refetch: vi.fn()
-        })
-        vi.mocked(useSessionSortPreferenceMutation).mockReturnValue({
-            setSessionSortPreference: vi.fn(),
-            isPending: false
-        })
-
-        const sessions = [
+    it('uses the Other fallback when path metadata is missing', () => {
+        const [group] = groupSessionsByDirectory([
             makeSession({
-                id: 's1',
+                id: 'no-path',
                 metadata: {
-                    path: '/repo/app',
-                    machineId: 'm1',
-                    flavor: 'claude',
-                    name: 'Alpha',
-                    summary: { text: 'Alpha summary' }
-                },
-                updatedAt: 200
-            }),
+                    machineId: undefined
+                } as SessionSummary['metadata']
+            })
+        ])
+
+        expect(group.directory).toBe('Other')
+        expect(group.key).toBe(`${UNKNOWN_MACHINE_ID}::Other`)
+    })
+
+    it('derives compact display names from the directory path', () => {
+        const [group] = groupSessionsByDirectory([
             makeSession({
-                id: 's2',
                 metadata: {
-                    path: '/repo/app',
-                    machineId: 'm1',
-                    flavor: 'claude',
-                    name: 'Beta',
-                    summary: { text: 'Beta summary' }
-                },
-                updatedAt: 100
+                    path: '/Users/dev/projects/hapi',
+                    machineId: 'machine-a'
+                }
             })
-        ]
-
-        const { container } = renderList(sessions, { m1: 'Laptop' })
+        ])
 
-        const items = Array.from(container.querySelectorAll<HTMLButtonElement>('.session-list-item'))
-        expect(items[0]?.textContent).toContain('Beta')
-        expect(items[1]?.textContent).toContain('Alpha')
+        expect(group.displayName).toBe('projects/hapi')
     })
 })
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index f0d731551..794a2a456 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -1,18 +1,20 @@
-import { useEffect, useMemo, useState } from 'react'
+import { Fragment, type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import type { SessionSummary } from '@/types/api'
 import type { ApiClient } from '@/api/client'
-import { getPermissionModeLabel, getPermissionModeTone, isPermissionModeAllowedForFlavor } from '@hapi/protocol'
 import { useLongPress } from '@/hooks/useLongPress'
 import { usePlatform } from '@/hooks/usePlatform'
 import { useSessionActions } from '@/hooks/mutations/useSessionActions'
-import { useSortToggle } from '@/hooks/useSortToggle'
-import { SortIcon, PinIcon } from '@/components/icons/SortIcons'
 import { SessionActionMenu } from '@/components/SessionActionMenu'
-import { GroupActionMenu } from '@/components/GroupActionMenu'
 import { RenameSessionDialog } from '@/components/RenameSessionDialog'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import {
+    getFlavorTextClass,
+    META_DOT_SEPARATOR_CLASS,
+    SESSION_ACTIVITY_BADGE,
+    SESSION_PENDING_BADGE
+} from '@/lib/agentFlavorUtils'
+import { getSessionModelLabel } from '@/lib/sessionModelLabel'
 import { useTranslation } from '@/lib/use-translation'
-import { getFlavorTextClass, PERMISSION_TONE_TEXT } from '@/lib/agentFlavorUtils'
 
 type SessionGroup = {
     key: string
@@ -32,13 +34,15 @@ function getGroupDisplayName(directory: string): string {
     return `${parts[parts.length - 2]}/${parts[parts.length - 1]}`
 }
 
+export const UNKNOWN_MACHINE_ID = '__unknown__'
+
 export function groupSessionsByDirectory(sessions: SessionSummary[]): SessionGroup[] {
     const groups = new Map<string, { directory: string; machineId: string | null; sessions: SessionSummary[] }>()
 
     sessions.forEach(session => {
         const path = session.metadata?.worktree?.basePath ?? session.metadata?.path ?? 'Other'
         const machineId = session.metadata?.machineId ?? null
-        const key = `${machineId ?? '__unknown__'}::${path}`
+        const key = `${machineId ?? UNKNOWN_MACHINE_ID}::${path}`
         if (!groups.has(key)) {
             groups.set(key, {
                 directory: path,
@@ -102,42 +106,42 @@ function PlusIcon(props: { className?: string }) {
     )
 }
 
-function BulbIcon(props: { className?: string }) {
+function ChevronIcon(props: { className?: string; collapsed?: boolean }) {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
+            width="16"
+            height="16"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className={props.className}
+            className={`${props.className ?? ''} transition-transform duration-200 ${props.collapsed ? '' : 'rotate-90'}`}
         >
-            <path d="M9 18h6" />
-            <path d="M10 22h4" />
-            <path d="M12 2a7 7 0 0 0-4 12c.6.6 1 1.2 1 2h6c0-.8.4-1.4 1-2a7 7 0 0 0-4-12Z" />
+            <polyline points="9 18 15 12 9 6" />
         </svg>
     )
 }
 
-function ChevronIcon(props: { className?: string; collapsed?: boolean }) {
+function MachineIcon(props: { className?: string }) {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
+            width="14"
+            height="14"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className={`${props.className ?? ''} transition-transform duration-200 ${props.collapsed ? '' : 'rotate-90'}`}
+            className={props.className}
         >
-            <polyline points="9 18 15 12 9 6" />
+            <rect x="2" y="3" width="20" height="14" rx="2" />
+            <line x1="8" y1="21" x2="16" y2="21" />
+            <line x1="12" y1="17" x2="12" y2="21" />
         </svg>
     )
 }
@@ -164,31 +168,10 @@ function getTodoProgress(session: SessionSummary): { completed: number; total: n
 
 function getAgentLabel(session: SessionSummary): string {
     const flavor = session.metadata?.flavor?.trim()
-    if (flavor) return flavor
+    if (flavor) return flavor.toLowerCase()
     return 'unknown'
 }
 
-function MachineIcon(props: { className?: string }) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className={props.className}
-        >
-            <rect x="2" y="3" width="20" height="14" rx="2" />
-            <line x1="8" y1="21" x2="16" y2="21" />
-            <line x1="12" y1="17" x2="12" y2="21" />
-        </svg>
-    )
-}
-
 function formatRelativeTime(value: number, t: (key: string, params?: Record<string, string | number>) => string): string | null {
     const ms = value < 1_000_000_000_000 ? value * 1000 : value
     if (!Number.isFinite(ms)) return null
@@ -206,27 +189,17 @@ function formatRelativeTime(value: number, t: (key: string, params?: Record<stri
 function SessionItem(props: {
     session: SessionSummary
     onSelect: (sessionId: string) => void
-    showPath?: boolean
     api: ApiClient | null
     selected?: boolean
-    manualMode?: boolean
-    onMoveUp?: () => void
-    onMoveDown?: () => void
-    canMoveUp?: boolean
-    canMoveDown?: boolean
+    animateEnter?: boolean
 }) {
     const { t } = useTranslation()
     const {
         session: s,
         onSelect,
-        showPath = true,
         api,
         selected = false,
-        manualMode = false,
-        onMoveUp,
-        onMoveDown,
-        canMoveUp = false,
-        canMoveDown = false
+        animateEnter = false
     } = props
     const { haptic } = usePlatform()
     const [menuOpen, setMenuOpen] = useState(false)
@@ -256,108 +229,76 @@ function SessionItem(props: {
     })
 
     const sessionName = getSessionTitle(s)
+    const modelLabel = getSessionModelLabel(s)
+    const agentLabel = getAgentLabel(s)
     const statusDotClass = s.active
-        ? (s.thinking ? 'bg-[#007AFF]' : 'bg-[var(--app-badge-success-text)]')
+        ? (s.thinking ? 'bg-[var(--app-badge-info-text)]' : 'bg-[var(--app-badge-success-text)]')
         : 'bg-[var(--app-hint)]'
-
-    const flavor = s.metadata?.flavor?.trim() ?? null
-    const flavorTextClass = getFlavorTextClass(flavor)
-
-    const permMode = s.permissionMode
-        && s.permissionMode !== 'default'
-        && isPermissionModeAllowedForFlavor(s.permissionMode, flavor)
-        ? s.permissionMode
-        : null
-    const permLabel = permMode ? getPermissionModeLabel(permMode).toLowerCase() : null
-    const permTone = permMode ? getPermissionModeTone(permMode) : null
-    const permTextClass = permTone ? PERMISSION_TONE_TEXT[permTone] : ''
     const todoProgress = getTodoProgress(s)
+    const inactiveClass = s.active ? '' : 'opacity-[0.55]'
+    const metadataItems = [
+        <span key="flavor" className={getFlavorTextClass(s.metadata?.flavor)}>
+            {agentLabel}
+        </span>,
+        modelLabel ? <span key="model">{modelLabel.value}</span> : null,
+        s.metadata?.worktree?.branch ? <span key="worktree">{s.metadata.worktree.branch}</span> : null,
+        todoProgress ? <span key="todo">{todoProgress.completed}/{todoProgress.total}</span> : null
+    ].filter(Boolean) as ReactNode[]
 
     return (
         <>
             <button
                 type="button"
                 {...longPressHandlers}
-                className={`session-list-item flex w-full flex-col gap-1.5 pl-5 pr-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--app-link)] select-none ${selected ? 'bg-[var(--app-selected-bg)]' : ''}`}
+                className={`session-list-item flex w-full flex-col gap-2 px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--app-link)] select-none ${selected ? 'bg-[var(--app-secondary-bg)]' : ''} ${animateEnter ? 'animate-session-enter' : ''}`}
                 style={{ WebkitTouchCallout: 'none' }}
                 aria-current={selected ? 'page' : undefined}
             >
-                <div className="flex items-center justify-between gap-3">
-                    <div className="flex items-center gap-2 min-w-0">
-                        <span className="flex h-4 w-4 items-center justify-center shrink-0" aria-hidden="true">
-                            <span
-                                className={`h-2 w-2 rounded-full ${statusDotClass} ${s.thinking ? 'animate-pulse' : ''}`}
-                            />
+                <div className="flex items-start justify-between gap-3">
+                    <div className="flex min-w-0 items-start gap-2">
+                        <span className="flex h-4 w-4 items-center justify-center" aria-hidden="true">
+                            <span className={`h-2 w-2 rounded-full ${statusDotClass}`} />
                         </span>
-                        <div className="truncate text-base font-medium">
-                            {sessionName}
+                        <div className={`min-w-0 ${inactiveClass}`}>
+                            <div className="truncate text-base font-medium">
+                                {sessionName}
+                            </div>
                         </div>
                     </div>
-                    <div className="flex items-center gap-2 shrink-0 text-xs">
+                    <div className="shrink-0 pt-0.5 text-xs text-[var(--app-hint)]">
+                        {formatRelativeTime(s.updatedAt, t)}
+                    </div>
+                </div>
+                {(metadataItems.length > 0 || s.thinking || s.pendingRequestsCount > 0) ? (
+                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1 pl-6 text-xs text-[var(--app-hint)]">
+                        <div className={`inline-flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 ${inactiveClass}`}>
+                            {metadataItems.map((item, index) => (
+                                <Fragment key={index}>
+                                    {index > 0 ? (
+                                        <span aria-hidden="true" className={META_DOT_SEPARATOR_CLASS}>·</span>
+                                    ) : null}
+                                    {item}
+                                </Fragment>
+                            ))}
+                        </div>
                         {s.thinking ? (
-                            <span className="inline-flex items-center rounded-full bg-[rgba(0,122,255,0.12)] px-2 py-0.5 text-[#007AFF] animate-pulse font-medium">
+                            <span className={SESSION_ACTIVITY_BADGE}>
                                 {t('session.item.thinking')}
                             </span>
                         ) : null}
-                        {todoProgress ? (
-                            <span className="flex items-center gap-1 text-[var(--app-hint)]">
-                                <BulbIcon className="h-3 w-3" />
-                                {todoProgress.completed}/{todoProgress.total}
-                            </span>
-                        ) : null}
                         {s.pendingRequestsCount > 0 ? (
-                            <span className="inline-flex items-center rounded-full border border-[var(--app-badge-warning-border)] bg-[var(--app-badge-warning-bg)] px-2 py-0.5 font-medium text-[var(--app-badge-warning-text)]">
+                            <span className={SESSION_PENDING_BADGE}>
                                 {t('session.item.pending')} {s.pendingRequestsCount}
                             </span>
                         ) : null}
-                        <span className="text-[var(--app-hint)]">
-                            {formatRelativeTime(s.updatedAt, t)}
-                        </span>
-                    </div>
-                </div>
-                {showPath ? (
-                    <div className="truncate text-xs text-[var(--app-hint)]">
-                        {s.metadata?.path ?? s.id}
                     </div>
                 ) : null}
-                <div className="flex flex-wrap items-center gap-1 text-xs">
-                    <span className={`font-medium ${flavorTextClass}`}>
-                        {getAgentLabel(s)}
-                    </span>
-                    {permMode && permLabel ? (
-                        <>
-                            <span className="text-[var(--app-hint)]">&middot;</span>
-                            <span className={`font-medium ${permTextClass}`}>{permLabel}</span>
-                        </>
-                    ) : null}
-                    {flavor === 'claude' || !flavor ? (
-                        <>
-                            <span className="text-[var(--app-hint)]">&middot;</span>
-                            <span className="text-[var(--app-hint)]">
-                                {s.modelMode || 'default'}
-                            </span>
-                        </>
-                    ) : null}
-                    {s.metadata?.worktree?.branch ? (
-                        <>
-                            <span className="text-[var(--app-hint)]">&middot;</span>
-                            <span className="text-[var(--app-hint)]">
-                                {s.metadata.worktree.branch}
-                            </span>
-                        </>
-                    ) : null}
-                </div>
             </button>
 
             <SessionActionMenu
                 isOpen={menuOpen}
                 onClose={() => setMenuOpen(false)}
                 sessionActive={s.active}
-                manualMode={manualMode}
-                onMoveUp={onMoveUp}
-                onMoveDown={onMoveDown}
-                canMoveUp={canMoveUp}
-                canMoveDown={canMoveDown}
                 onRename={() => setRenameOpen(true)}
                 onArchive={() => setArchiveOpen(true)}
                 onDelete={() => setDeleteOpen(true)}
@@ -403,18 +344,12 @@ function GroupHeader(props: {
     group: SessionGroup
     isCollapsed: boolean
     machineLabel: string
-    manualMode: boolean
     onToggle: () => void
-    onLongPressMenu: (groupKey: string, point: { x: number; y: number }) => void
 }) {
     const { haptic } = usePlatform()
     const longPressHandlers = useLongPress({
-        onLongPress: (point) => {
-            if (!props.manualMode) {
-                return
-            }
+        onLongPress: () => {
             haptic.impact('medium')
-            props.onLongPressMenu(props.group.key, point)
         },
         onClick: props.onToggle,
         threshold: 500
@@ -424,27 +359,28 @@ function GroupHeader(props: {
         <button
             type="button"
             {...longPressHandlers}
-            className="sticky top-0 z-10 flex w-full flex-col gap-1 px-3 py-2.5 text-left bg-[var(--app-secondary-bg)] border-b border-[var(--app-border)] border-l-[3px] border-l-[var(--app-hint)] transition-colors hover:bg-[var(--app-subtle-bg)]"
+            aria-expanded={!props.isCollapsed}
+            className="sticky top-0 z-10 flex w-full flex-col gap-1 border-b border-[var(--app-divider)] bg-[var(--app-bg)] px-3 py-2.5 text-left transition-colors hover:bg-[var(--app-subtle-bg)]"
             style={{ WebkitTouchCallout: 'none' }}
         >
-            <div className="flex items-center gap-2 min-w-0 w-full">
+            <div className="flex min-w-0 w-full items-center gap-2">
                 <ChevronIcon
-                    className="h-4 w-4 text-[var(--app-hint)] shrink-0"
+                    className="h-4 w-4 shrink-0 text-[var(--app-hint)]"
                     collapsed={props.isCollapsed}
                 />
-                <span className="font-semibold text-sm break-words min-w-0" title={props.group.directory}>
+                <span className="min-w-0 break-words text-sm font-semibold" title={props.group.directory}>
                     {props.group.displayName}
                 </span>
-                <span className="shrink-0 rounded-full bg-[var(--app-subtle-bg)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--app-hint)]">
-                    {props.group.sessions.length}
+                <span className="shrink-0 text-xs text-[var(--app-hint)]">
+                    ({props.group.sessions.length})
                 </span>
             </div>
             <div className="flex min-w-0 w-full flex-wrap items-center gap-2 pl-6 text-xs text-[var(--app-hint)]">
-                <span className="inline-flex items-center gap-1 rounded border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-0.5">
+                <span className="inline-flex items-center gap-1 rounded-full border border-[var(--app-divider)] bg-[var(--app-bg)] px-2 py-0.5">
                     <MachineIcon className="h-3 w-3 shrink-0" />
                     {props.machineLabel}
                 </span>
-                <span className="truncate" title={props.group.directory}>
+                <span className="min-w-0 flex-1 truncate" title={props.group.directory}>
                     {props.group.directory}
                 </span>
             </div>
@@ -464,39 +400,50 @@ export function SessionList(props: {
     selectedSessionId?: string | null
 }) {
     const { t } = useTranslation()
-    const { renderHeader = true, api, selectedSessionId, machineLabelsById = {} } = props
+    const {
+        renderHeader = true,
+        api,
+        selectedSessionId,
+        machineLabelsById = {}
+    } = props
     const groups = useMemo(
         () => groupSessionsByDirectory(props.sessions),
         [props.sessions]
     )
-    const {
-        sortMode,
-        orderedGroups,
-        isSortPreferencePending,
-        toggleSortMode,
-        moveGroupInPreference,
-        moveSessionInPreference
-    } = useSortToggle(api, groups)
+    const displayGroups = groups
+    const knownSessionIdsRef = useRef<Set<string>>(new Set(props.sessions.map(session => session.id)))
     const [collapseOverrides, setCollapseOverrides] = useState<Map<string, boolean>>(
         () => new Map()
     )
-    const [groupMenuOpen, setGroupMenuOpen] = useState(false)
-    const [groupMenuAnchor, setGroupMenuAnchor] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
-    const [groupMenuKey, setGroupMenuKey] = useState<string | null>(null)
-
-    const openGroupActionMenu = (groupKey: string, point: { x: number; y: number }) => {
-        setGroupMenuKey(groupKey)
-        setGroupMenuAnchor(point)
-        setGroupMenuOpen(true)
-    }
+    const enteringSessionIds = useMemo(() => {
+        const entering = new Set<string>()
+        const nextKnownSessionIds = new Set(knownSessionIdsRef.current)
+        props.sessions.forEach(session => {
+            if (!nextKnownSessionIds.has(session.id)) {
+                entering.add(session.id)
+            }
+            nextKnownSessionIds.add(session.id)
+        })
+        knownSessionIdsRef.current = nextKnownSessionIds
+        return entering
+    }, [props.sessions])
 
-    const closeGroupActionMenu = () => {
-        setGroupMenuOpen(false)
+    const isGroupCollapsed = (group: SessionGroup): boolean => {
+        const override = collapseOverrides.get(group.key)
+        if (override !== undefined) return override
+        const hasSelectedSession = selectedSessionId
+            ? group.sessions.some(session => session.id === selectedSessionId)
+            : false
+        return !group.hasActiveSession && !hasSelectedSession
     }
 
-    const groupMenuIndex = groupMenuKey ? orderedGroups.findIndex((group) => group.key === groupMenuKey) : -1
-    const canMoveGroupUp = groupMenuIndex > 0
-    const canMoveGroupDown = groupMenuIndex >= 0 && groupMenuIndex < orderedGroups.length - 1
+    const toggleGroup = (groupKey: string, isCollapsed: boolean) => {
+        setCollapseOverrides(prev => {
+            const next = new Map(prev)
+            next.set(groupKey, !isCollapsed)
+            return next
+        })
+    }
 
     const resolveMachineLabel = (machineId: string | null): string => {
         if (machineId && machineLabelsById[machineId]) {
@@ -507,25 +454,25 @@ export function SessionList(props: {
         }
         return t('machine.unknown')
     }
-    const isGroupCollapsed = (group: SessionGroup): boolean => {
-        const override = collapseOverrides.get(group.key)
-        if (override !== undefined) return override
-        return !group.hasActiveSession
-    }
 
-    const toggleGroup = (groupKey: string, isCollapsed: boolean) => {
+    useEffect(() => {
+        if (!selectedSessionId) return
         setCollapseOverrides(prev => {
+            const group = displayGroups.find(g =>
+                g.sessions.some(s => s.id === selectedSessionId)
+            )
+            if (!group || !prev.has(group.key) || !prev.get(group.key)) return prev
             const next = new Map(prev)
-            next.set(groupKey, !isCollapsed)
+            next.delete(group.key)
             return next
         })
-    }
+    }, [selectedSessionId, displayGroups])
 
     useEffect(() => {
         setCollapseOverrides(prev => {
             if (prev.size === 0) return prev
             const next = new Map(prev)
-            const knownGroups = new Set(orderedGroups.map(group => group.key))
+            const knownGroups = new Set(displayGroups.map(group => group.key))
             let changed = false
             for (const groupKey of next.keys()) {
                 if (!knownGroups.has(groupKey)) {
@@ -535,80 +482,48 @@ export function SessionList(props: {
             }
             return changed ? next : prev
         })
-    }, [orderedGroups])
-
-    useEffect(() => {
-        if (!groupMenuKey) {
-            return
-        }
-
-        if (!orderedGroups.some((group) => group.key === groupMenuKey)) {
-            setGroupMenuOpen(false)
-            setGroupMenuKey(null)
-        }
-    }, [groupMenuKey, orderedGroups])
+    }, [displayGroups])
 
     return (
         <div className="mx-auto w-full max-w-content flex flex-col">
             {renderHeader ? (
                 <div className="flex items-center justify-between px-3 py-1">
                     <div className="text-xs text-[var(--app-hint)]">
-                        {t('sessions.count', { n: props.sessions.length, m: orderedGroups.length })}
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <button
-                            type="button"
-                            onClick={toggleSortMode}
-                            className="p-1.5 rounded-full text-[var(--app-hint)] hover:text-[var(--app-link)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                            title={t(sortMode === 'auto' ? 'sessions.sort.auto' : 'sessions.sort.manual')}
-                            aria-pressed={sortMode === 'manual'}
-                            disabled={isSortPreferencePending}
-                        >
-                            {sortMode === 'auto'
-                                ? <SortIcon className="h-4 w-4" />
-                                : <PinIcon className="h-4 w-4" />}
-                        </button>
-                        <button
-                            type="button"
-                            onClick={props.onNewSession}
-                            className="session-list-new-button p-1.5 rounded-full text-[var(--app-link)] transition-colors"
-                            title={t('sessions.new')}
-                        >
-                            <PlusIcon className="h-5 w-5" />
-                        </button>
+                        {t('sessions.count', { n: props.sessions.length, m: displayGroups.length })}
                     </div>
+                    <button
+                        type="button"
+                        onClick={props.onNewSession}
+                        className="session-list-new-button rounded-full p-1.5 text-[var(--app-link)] transition-colors"
+                        title={t('sessions.new')}
+                    >
+                        <PlusIcon className="h-5 w-5" />
+                    </button>
                 </div>
             ) : null}
 
             <div className="flex flex-col">
-                {orderedGroups.map((group) => {
+                {displayGroups.map((group) => {
                     const isCollapsed = isGroupCollapsed(group)
-                    const groupMachineLabel = resolveMachineLabel(group.machineId)
+                    const machineLabel = resolveMachineLabel(group.machineId)
                     return (
                         <div key={group.key} className="mt-2 first:mt-0">
                             <GroupHeader
                                 group={group}
                                 isCollapsed={isCollapsed}
-                                machineLabel={groupMachineLabel}
-                                manualMode={sortMode === 'manual'}
+                                machineLabel={machineLabel}
                                 onToggle={() => toggleGroup(group.key, isCollapsed)}
-                                onLongPressMenu={openGroupActionMenu}
                             />
                             {!isCollapsed ? (
                                 <div className="flex flex-col divide-y divide-[var(--app-divider)] border-b border-[var(--app-divider)] border-l border-l-[var(--app-divider)]">
-                                    {group.sessions.map((s, index) => (
+                                    {group.sessions.map((s) => (
                                         <SessionItem
                                             key={s.id}
                                             session={s}
                                             onSelect={props.onSelect}
-                                            showPath={false}
                                             api={api}
                                             selected={s.id === selectedSessionId}
-                                            manualMode={sortMode === 'manual'}
-                                            onMoveUp={() => moveSessionInPreference(group.key, s.id, 'up')}
-                                            onMoveDown={() => moveSessionInPreference(group.key, s.id, 'down')}
-                                            canMoveUp={index > 0}
-                                            canMoveDown={index < group.sessions.length - 1}
+                                            animateEnter={enteringSessionIds.has(s.id)}
                                         />
                                     ))}
                                 </div>
@@ -618,25 +533,6 @@ export function SessionList(props: {
                 })}
             </div>
 
-            <GroupActionMenu
-                isOpen={groupMenuOpen && Boolean(groupMenuKey) && sortMode === 'manual'}
-                onClose={closeGroupActionMenu}
-                onMoveUp={() => {
-                    if (!groupMenuKey) {
-                        return
-                    }
-                    moveGroupInPreference(groupMenuKey, 'up')
-                }}
-                onMoveDown={() => {
-                    if (!groupMenuKey) {
-                        return
-                    }
-                    moveGroupInPreference(groupMenuKey, 'down')
-                }}
-                canMoveUp={canMoveGroupUp}
-                canMoveDown={canMoveGroupDown}
-                anchorPoint={groupMenuAnchor}
-            />
         </div>
     )
 }
diff --git a/web/src/hooks/useLongPress.test.ts b/web/src/hooks/useLongPress.test.ts
new file mode 100644
index 000000000..1c0a3146f
--- /dev/null
+++ b/web/src/hooks/useLongPress.test.ts
@@ -0,0 +1,204 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import type React from 'react'
+import { useLongPress } from './useLongPress'
+
+function pointerEvent(init: Partial<{
+    isPrimary: boolean
+    pointerType: 'mouse' | 'touch' | 'pen'
+    button: number
+    clientX: number
+    clientY: number
+}> = {}): React.PointerEvent {
+    return {
+        isPrimary: init.isPrimary ?? true,
+        pointerType: init.pointerType ?? 'touch',
+        button: init.button ?? 0,
+        clientX: init.clientX ?? 0,
+        clientY: init.clientY ?? 0
+    } as unknown as React.PointerEvent
+}
+
+describe('useLongPress', () => {
+    beforeEach(() => {
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    it('fires onLongPress after the threshold elapses', () => {
+        const onLongPress = vi.fn()
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, onClick, threshold: 500 })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent({ clientX: 10, clientY: 20 }))
+        })
+        act(() => {
+            vi.advanceTimersByTime(500)
+        })
+
+        expect(onLongPress).toHaveBeenCalledWith({ x: 10, y: 20 })
+        expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('fires onClick on pointer up before the threshold', () => {
+        const onLongPress = vi.fn()
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, onClick, threshold: 500 })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent())
+            result.current.onPointerUp(pointerEvent())
+        })
+
+        expect(onClick).toHaveBeenCalledTimes(1)
+        expect(onLongPress).not.toHaveBeenCalled()
+    })
+
+    it('cancels the timer and suppresses click when movement exceeds the threshold', () => {
+        const onLongPress = vi.fn()
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, onClick, threshold: 500 })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent({ clientX: 0, clientY: 0 }))
+            result.current.onPointerMove(pointerEvent({ clientX: 20, clientY: 0 }))
+        })
+        act(() => {
+            vi.advanceTimersByTime(500)
+        })
+        act(() => {
+            result.current.onPointerUp(pointerEvent({ clientX: 20, clientY: 0 }))
+        })
+
+        expect(onLongPress).not.toHaveBeenCalled()
+        expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('ignores sub-threshold movement', () => {
+        const onLongPress = vi.fn()
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, onClick, threshold: 500 })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent({ clientX: 0, clientY: 0 }))
+            result.current.onPointerMove(pointerEvent({ clientX: 3, clientY: 2 }))
+        })
+        act(() => {
+            vi.advanceTimersByTime(500)
+        })
+
+        expect(onLongPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('ignores non-primary pointers and non-left mouse buttons', () => {
+        const onLongPress = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, threshold: 500 })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent({ isPrimary: false }))
+            result.current.onPointerDown(pointerEvent({ pointerType: 'mouse', button: 2 }))
+        })
+        act(() => {
+            vi.advanceTimersByTime(500)
+        })
+
+        expect(onLongPress).not.toHaveBeenCalled()
+    })
+
+    it('does not start the long-press timer when disabled', () => {
+        const onLongPress = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, threshold: 500, disabled: true })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent())
+        })
+        act(() => {
+            vi.advanceTimersByTime(1_000)
+        })
+
+        expect(onLongPress).not.toHaveBeenCalled()
+    })
+
+    it('ignores keyboard activation when disabled', () => {
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress: vi.fn(), onClick, disabled: true })
+        )
+
+        const preventDefault = vi.fn()
+        const enter = { key: 'Enter', preventDefault } as unknown as React.KeyboardEvent
+
+        act(() => {
+            result.current.onKeyDown(enter)
+        })
+
+        expect(onClick).not.toHaveBeenCalled()
+        expect(preventDefault).not.toHaveBeenCalled()
+    })
+
+    it('cancels on pointer cancel and pointer leave', () => {
+        const onLongPress = vi.fn()
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, onClick, threshold: 500 })
+        )
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent())
+            result.current.onPointerCancel(pointerEvent())
+        })
+        act(() => {
+            vi.advanceTimersByTime(500)
+        })
+
+        expect(onLongPress).not.toHaveBeenCalled()
+        expect(onClick).not.toHaveBeenCalled()
+
+        act(() => {
+            result.current.onPointerDown(pointerEvent())
+            result.current.onPointerLeave(pointerEvent())
+        })
+        act(() => {
+            vi.advanceTimersByTime(500)
+        })
+
+        expect(onLongPress).not.toHaveBeenCalled()
+        expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('triggers onClick on Enter and Space keys', () => {
+        const onLongPress = vi.fn()
+        const onClick = vi.fn()
+        const { result } = renderHook(() =>
+            useLongPress({ onLongPress, onClick })
+        )
+
+        const preventDefault = vi.fn()
+        const enter = { key: 'Enter', preventDefault } as unknown as React.KeyboardEvent
+        const space = { key: ' ', preventDefault } as unknown as React.KeyboardEvent
+
+        act(() => {
+            result.current.onKeyDown(enter)
+            result.current.onKeyDown(space)
+        })
+
+        expect(onClick).toHaveBeenCalledTimes(2)
+        expect(preventDefault).toHaveBeenCalledTimes(2)
+    })
+})
diff --git a/web/src/hooks/useLongPress.ts b/web/src/hooks/useLongPress.ts
index 5673b2d7d..ec65f7882 100644
--- a/web/src/hooks/useLongPress.ts
+++ b/web/src/hooks/useLongPress.ts
@@ -9,12 +9,11 @@ type UseLongPressOptions = {
 }
 
 type UseLongPressHandlers = {
-    onMouseDown: React.MouseEventHandler
-    onMouseUp: React.MouseEventHandler
-    onMouseLeave: React.MouseEventHandler
-    onTouchStart: React.TouchEventHandler
-    onTouchEnd: React.TouchEventHandler
-    onTouchMove: React.TouchEventHandler
+    onPointerDown: React.PointerEventHandler
+    onPointerMove: React.PointerEventHandler
+    onPointerUp: React.PointerEventHandler
+    onPointerLeave: React.PointerEventHandler
+    onPointerCancel: React.PointerEventHandler
     onContextMenu: React.MouseEventHandler
     onKeyDown: React.KeyboardEventHandler
 }
@@ -24,8 +23,9 @@ export function useLongPress(options: UseLongPressOptions): UseLongPressHandlers
 
     const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
     const isLongPressRef = useRef(false)
-    const touchMoved = useRef(false)
     const pressPointRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+    const movedBeyondThresholdRef = useRef(false)
+    const moveThresholdPx = 8
 
     const clearTimer = useCallback(() => {
         if (timerRef.current) {
@@ -39,7 +39,7 @@ export function useLongPress(options: UseLongPressOptions): UseLongPressHandlers
 
         clearTimer()
         isLongPressRef.current = false
-        touchMoved.current = false
+        movedBeyondThresholdRef.current = false
         pressPointRef.current = { x: clientX, y: clientY }
 
         timerRef.current = setTimeout(() => {
@@ -51,44 +51,48 @@ export function useLongPress(options: UseLongPressOptions): UseLongPressHandlers
     const handleEnd = useCallback((shouldTriggerClick: boolean) => {
         clearTimer()
 
-        if (shouldTriggerClick && !isLongPressRef.current && !touchMoved.current && onClick) {
+        if (shouldTriggerClick && !isLongPressRef.current && onClick) {
             onClick()
         }
 
         isLongPressRef.current = false
-        touchMoved.current = false
+        movedBeyondThresholdRef.current = false
     }, [clearTimer, onClick])
 
-    const onMouseDown = useCallback<React.MouseEventHandler>((e) => {
-        if (e.button !== 0) return
+    const onPointerDown = useCallback<React.PointerEventHandler>((e) => {
+        if (!e.isPrimary) return
+        if (e.pointerType === 'mouse' && e.button !== 0) return
         startTimer(e.clientX, e.clientY)
     }, [startTimer])
 
-    const onMouseUp = useCallback<React.MouseEventHandler>(() => {
-        handleEnd(!isLongPressRef.current)
+    const onPointerMove = useCallback<React.PointerEventHandler>((e) => {
+        if (!e.isPrimary || movedBeyondThresholdRef.current) return
+
+        const dx = e.clientX - pressPointRef.current.x
+        const dy = e.clientY - pressPointRef.current.y
+        if (Math.hypot(dx, dy) < moveThresholdPx) {
+            return
+        }
+
+        movedBeyondThresholdRef.current = true
+        clearTimer()
+    }, [clearTimer])
+
+    const onPointerUp = useCallback<React.PointerEventHandler>((e) => {
+        if (!e.isPrimary) return
+        handleEnd(!isLongPressRef.current && !movedBeyondThresholdRef.current)
     }, [handleEnd])
 
-    const onMouseLeave = useCallback<React.MouseEventHandler>(() => {
+    const onPointerLeave = useCallback<React.PointerEventHandler>((e) => {
+        if (!e.isPrimary) return
         handleEnd(false)
     }, [handleEnd])
 
-    const onTouchStart = useCallback<React.TouchEventHandler>((e) => {
-        const touch = e.touches[0]
-        startTimer(touch.clientX, touch.clientY)
-    }, [startTimer])
-
-    const onTouchEnd = useCallback<React.TouchEventHandler>((e) => {
-        if (isLongPressRef.current) {
-            e.preventDefault()
-        }
-        handleEnd(!isLongPressRef.current)
+    const onPointerCancel = useCallback<React.PointerEventHandler>((e) => {
+        if (!e.isPrimary) return
+        handleEnd(false)
     }, [handleEnd])
 
-    const onTouchMove = useCallback<React.TouchEventHandler>(() => {
-        touchMoved.current = true
-        clearTimer()
-    }, [clearTimer])
-
     const onContextMenu = useCallback<React.MouseEventHandler>((e) => {
         if (!disabled) {
             e.preventDefault()
@@ -107,12 +111,11 @@ export function useLongPress(options: UseLongPressOptions): UseLongPressHandlers
     }, [disabled, onClick])
 
     return {
-        onMouseDown,
-        onMouseUp,
-        onMouseLeave,
-        onTouchStart,
-        onTouchEnd,
-        onTouchMove,
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerLeave,
+        onPointerCancel,
         onContextMenu,
         onKeyDown
     }
diff --git a/web/src/index.css b/web/src/index.css
index e3b9b4276..5bcc9bd2f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -11,7 +11,6 @@
     --app-banner-bg: var(--tg-theme-button-color, #111827);
     --app-banner-text: var(--tg-theme-button-text-color, #ffffff);
     --app-secondary-bg: var(--tg-theme-secondary-bg-color, #f3f4f6);
-    --app-selected-bg: rgba(59, 130, 246, 0.08);
 
     /* Theme-aware colors (light mode defaults) */
     --app-border: rgba(0, 0, 0, 0.1);
@@ -34,9 +33,9 @@
     --app-git-untracked-color: #8E8E93;
 
     /* Badge colors (light) */
-    --app-badge-info-bg: rgba(59, 130, 246, 0.15);
+    --app-badge-info-bg: rgba(59, 130, 246, 0.12);
     --app-badge-info-text: #1d4ed8;
-    --app-badge-info-border: rgba(59, 130, 246, 0.25);
+    --app-badge-info-border: rgba(59, 130, 246, 0.22);
     --app-badge-warning-bg: rgba(245, 158, 11, 0.2);
     --app-badge-warning-text: #b45309;
     --app-badge-warning-border: rgba(245, 158, 11, 0.3);
@@ -47,21 +46,25 @@
     --app-badge-error-text: #b91c1c;
     --app-badge-error-border: rgba(239, 68, 68, 0.3);
 
-    --app-perm-warning: #c2410c;
-
-    /* Agent flavor colors (light) */
-    --app-flavor-claude: #92400e;
+    --app-flavor-claude: #b45309;
     --app-flavor-claude-bg: rgba(245, 158, 11, 0.12);
-    --app-flavor-claude-border: rgba(245, 158, 11, 0.25);
-    --app-flavor-codex: #065f46;
-    --app-flavor-codex-bg: rgba(16, 185, 129, 0.12);
-    --app-flavor-codex-border: rgba(16, 185, 129, 0.25);
-    --app-flavor-gemini: #1e40af;
-    --app-flavor-gemini-bg: rgba(59, 130, 246, 0.12);
-    --app-flavor-gemini-border: rgba(59, 130, 246, 0.25);
-    --app-flavor-opencode: #5b21b6;
-    --app-flavor-opencode-bg: rgba(139, 92, 246, 0.12);
-    --app-flavor-opencode-border: rgba(139, 92, 246, 0.25);
+    --app-flavor-claude-text: #b45309;
+    --app-flavor-claude-border: rgba(245, 158, 11, 0.24);
+    --app-flavor-codex: #1d4ed8;
+    --app-flavor-codex-bg: rgba(59, 130, 246, 0.12);
+    --app-flavor-codex-text: #1d4ed8;
+    --app-flavor-codex-border: rgba(59, 130, 246, 0.24);
+    --app-flavor-gemini: #6d28d9;
+    --app-flavor-gemini-bg: rgba(139, 92, 246, 0.12);
+    --app-flavor-gemini-text: #6d28d9;
+    --app-flavor-gemini-border: rgba(139, 92, 246, 0.24);
+    --app-flavor-opencode: #047857;
+    --app-flavor-opencode-bg: rgba(16, 185, 129, 0.12);
+    --app-flavor-opencode-text: #047857;
+    --app-flavor-opencode-border: rgba(16, 185, 129, 0.24);
+    --app-flavor-cursor-bg: rgba(100, 116, 139, 0.12);
+    --app-flavor-cursor-text: #475569;
+    --app-flavor-cursor-border: rgba(100, 116, 139, 0.24);
 
     --app-font-scale: 1;
 }
@@ -77,7 +80,6 @@
     --app-banner-bg: var(--tg-theme-button-color, #3A3A3C);
     --app-banner-text: var(--tg-theme-button-text-color, #ffffff);
     --app-secondary-bg: var(--tg-theme-secondary-bg-color, #2C2C2E);
-    --app-selected-bg: rgba(59, 130, 246, 0.08);
 
     --app-border: rgba(255, 255, 255, 0.1);
     --app-divider: rgba(255, 255, 255, 0.08);
@@ -99,9 +101,9 @@
     --app-git-untracked-color: #9ca3af;
 
     /* Badge colors (dark) */
-    --app-badge-info-bg: rgba(96, 165, 250, 0.2);
-    --app-badge-info-text: #60a5fa;
-    --app-badge-info-border: rgba(96, 165, 250, 0.3);
+    --app-badge-info-bg: rgba(96, 165, 250, 0.18);
+    --app-badge-info-text: #93c5fd;
+    --app-badge-info-border: rgba(96, 165, 250, 0.28);
     --app-badge-warning-bg: rgba(251, 191, 36, 0.2);
     --app-badge-warning-text: #fbbf24;
     --app-badge-warning-border: rgba(251, 191, 36, 0.3);
@@ -112,212 +114,25 @@
     --app-badge-error-text: #fca5a5;
     --app-badge-error-border: rgba(248, 113, 113, 0.35);
 
-    --app-perm-warning: #fb923c;
-
-    /* Agent flavor colors (dark) */
-    --app-flavor-claude: #fbbf24;
-    --app-flavor-claude-bg: rgba(245, 158, 11, 0.12);
-    --app-flavor-claude-border: rgba(245, 158, 11, 0.25);
-    --app-flavor-codex: #34d399;
-    --app-flavor-codex-bg: rgba(16, 185, 129, 0.12);
-    --app-flavor-codex-border: rgba(16, 185, 129, 0.25);
-    --app-flavor-gemini: #60a5fa;
-    --app-flavor-gemini-bg: rgba(59, 130, 246, 0.12);
-    --app-flavor-gemini-border: rgba(59, 130, 246, 0.25);
-    --app-flavor-opencode: #a78bfa;
-    --app-flavor-opencode-bg: rgba(139, 92, 246, 0.12);
-    --app-flavor-opencode-border: rgba(139, 92, 246, 0.25);
-}
-
-[data-theme="catpuccin"] {
-    /* Primary colors — Catpuccin Mocha */
-    --app-bg: #1e1e2e;
-    --app-fg: #cdd6f4;
-    --app-hint: #6c7086;
-    --app-link: #cdd6f4;
-    --app-button: #cdd6f4;
-    --app-button-text: #1e1e2e;
-    --app-banner-bg: #313244;
-    --app-banner-text: #cdd6f4;
-    --app-secondary-bg: #313244;
-    --app-selected-bg: rgba(137, 180, 250, 0.06);
-
-    --app-border: rgba(255, 255, 255, 0.1);
-    --app-divider: rgba(255, 255, 255, 0.08);
-    --app-subtle-bg: rgba(255, 255, 255, 0.05);
-    --app-code-bg: #282c34;
-    --app-inline-code-bg: rgba(255, 255, 255, 0.1);
-
-    /* Diff colors (dark) */
-    --app-diff-added-bg: #0d2e1f;
-    --app-diff-added-text: #c9d1d9;
-    --app-diff-removed-bg: #3f1b23;
-    --app-diff-removed-text: #c9d1d9;
-
-    /* Git status colors */
-    --app-git-staged-color: #a6e3a1;
-    --app-git-unstaged-color: #fab387;
-    --app-git-deleted-color: #f38ba8;
-    --app-git-renamed-color: #89b4fa;
-    --app-git-untracked-color: #6c7086;
-
-    /* Badge colors — Catpuccin Mocha */
-    --app-badge-info-bg: rgba(137, 180, 250, 0.12);
-    --app-badge-info-text: #89b4fa;
-    --app-badge-info-border: rgba(137, 180, 250, 0.22);
-    --app-badge-warning-bg: rgba(250, 179, 135, 0.15);
-    --app-badge-warning-text: #fab387;
-    --app-badge-warning-border: rgba(250, 179, 135, 0.25);
-    --app-badge-success-bg: rgba(166, 227, 161, 0.15);
-    --app-badge-success-text: #a6e3a1;
-    --app-badge-success-border: rgba(166, 227, 161, 0.25);
-    --app-badge-error-bg: rgba(243, 139, 168, 0.15);
-    --app-badge-error-text: #f38ba8;
-    --app-badge-error-border: rgba(243, 139, 168, 0.25);
-
-    --app-perm-warning: #fab387;
-
-    /* Agent flavor colors — Catpuccin Mocha */
-    --app-flavor-claude: #fab387;
-    --app-flavor-claude-bg: rgba(250, 179, 135, 0.10);
-    --app-flavor-claude-border: rgba(250, 179, 135, 0.20);
-    --app-flavor-codex: #a6e3a1;
-    --app-flavor-codex-bg: rgba(166, 227, 161, 0.10);
-    --app-flavor-codex-border: rgba(166, 227, 161, 0.20);
-    --app-flavor-gemini: #74c7ec;
-    --app-flavor-gemini-bg: rgba(116, 199, 236, 0.10);
-    --app-flavor-gemini-border: rgba(116, 199, 236, 0.20);
-    --app-flavor-opencode: #cba6f7;
-    --app-flavor-opencode-bg: rgba(203, 166, 247, 0.10);
-    --app-flavor-opencode-border: rgba(203, 166, 247, 0.20);
-}
-
-[data-theme="gaius-light"] {
-    /* Primary — warm pearl base */
-    --app-bg: #f8f5f2;
-    --app-fg: #2a2832;
-    --app-hint: #85808a;
-    --app-link: #b04440;
-    --app-button: #2a2832;
-    --app-button-text: #f8f5f2;
-    --app-banner-bg: #eceae6;
-    --app-banner-text: #2a2832;
-    --app-secondary-bg: #f0ede9;
-    --app-selected-bg: rgba(176, 68, 64, 0.06);
-
-    /* Overlays */
-    --app-border: rgba(42, 40, 50, 0.10);
-    --app-divider: rgba(42, 40, 50, 0.07);
-    --app-subtle-bg: rgba(42, 40, 50, 0.03);
-    --app-code-bg: #f0ede8;
-    --app-inline-code-bg: rgba(42, 40, 50, 0.05);
-
-    /* Diffs — verdigris added, cinnabar removed */
-    --app-diff-added-bg: #e4edd8;
-    --app-diff-added-text: #2a2832;
-    --app-diff-removed-bg: #f2dcd8;
-    --app-diff-removed-text: #2a2832;
-
-    /* Git status */
-    --app-git-staged-color: #3a7868;
-    --app-git-unstaged-color: #b07830;
-    --app-git-deleted-color: #b84440;
-    --app-git-renamed-color: #4068a0;
-    --app-git-untracked-color: #85808a;
-
-    /* Badges — lapis, gold, verdigris, cinnabar */
-    --app-badge-info-bg: rgba(64, 104, 160, 0.10);
-    --app-badge-info-text: #3a5888;
-    --app-badge-info-border: rgba(64, 104, 160, 0.20);
-    --app-badge-warning-bg: rgba(176, 120, 48, 0.12);
-    --app-badge-warning-text: #8a5820;
-    --app-badge-warning-border: rgba(176, 120, 48, 0.22);
-    --app-badge-success-bg: rgba(58, 120, 104, 0.10);
-    --app-badge-success-text: #2a6858;
-    --app-badge-success-border: rgba(58, 120, 104, 0.20);
-    --app-badge-error-bg: rgba(184, 68, 64, 0.10);
-    --app-badge-error-text: #983838;
-    --app-badge-error-border: rgba(184, 68, 64, 0.20);
-
-    --app-perm-warning: #b84430;
-
-    /* Agent flavors — cinnabar, verdigris, lapis, violet */
-    --app-flavor-claude: #a04038;
-    --app-flavor-claude-bg: rgba(160, 64, 56, 0.08);
-    --app-flavor-claude-border: rgba(160, 64, 56, 0.18);
-    --app-flavor-codex: #2a6858;
-    --app-flavor-codex-bg: rgba(42, 104, 88, 0.08);
-    --app-flavor-codex-border: rgba(42, 104, 88, 0.18);
-    --app-flavor-gemini: #3a5888;
-    --app-flavor-gemini-bg: rgba(58, 88, 136, 0.08);
-    --app-flavor-gemini-border: rgba(58, 88, 136, 0.18);
-    --app-flavor-opencode: #6a5090;
-    --app-flavor-opencode-bg: rgba(106, 80, 144, 0.08);
-    --app-flavor-opencode-border: rgba(106, 80, 144, 0.18);
-}
-
-[data-theme="gaius-dark"] {
-    /* Primary — deep slate base */
-    --app-bg: #1e1d22;
-    --app-fg: #e6e3de;
-    --app-hint: #88848e;
-    --app-link: #d06058;
-    --app-button: #e6e3de;
-    --app-button-text: #1e1d22;
-    --app-banner-bg: #2a2930;
-    --app-banner-text: #e6e3de;
-    --app-secondary-bg: #252428;
-    --app-selected-bg: rgba(208, 96, 88, 0.06);
-
-    /* Overlays */
-    --app-border: rgba(230, 227, 222, 0.08);
-    --app-divider: rgba(230, 227, 222, 0.06);
-    --app-subtle-bg: rgba(230, 227, 222, 0.04);
-    --app-code-bg: #252430;
-    --app-inline-code-bg: rgba(230, 227, 222, 0.07);
-
-    /* Diffs */
-    --app-diff-added-bg: rgba(80, 150, 130, 0.12);
-    --app-diff-added-text: #d8d5d0;
-    --app-diff-removed-bg: rgba(200, 80, 70, 0.12);
-    --app-diff-removed-text: #d8d5d0;
-
-    /* Git status */
-    --app-git-staged-color: #68b8a0;
-    --app-git-unstaged-color: #d0a060;
-    --app-git-deleted-color: #d87068;
-    --app-git-renamed-color: #6890c8;
-    --app-git-untracked-color: #88848e;
-
-    /* Badges */
-    --app-badge-info-bg: rgba(104, 144, 200, 0.12);
-    --app-badge-info-text: #6890c8;
-    --app-badge-info-border: rgba(104, 144, 200, 0.20);
-    --app-badge-warning-bg: rgba(208, 160, 96, 0.15);
-    --app-badge-warning-text: #d0a060;
-    --app-badge-warning-border: rgba(208, 160, 96, 0.25);
-    --app-badge-success-bg: rgba(104, 184, 160, 0.10);
-    --app-badge-success-text: #68b8a0;
-    --app-badge-success-border: rgba(104, 184, 160, 0.20);
-    --app-badge-error-bg: rgba(216, 112, 104, 0.12);
-    --app-badge-error-text: #d87068;
-    --app-badge-error-border: rgba(216, 112, 104, 0.22);
-
-    --app-perm-warning: #d08050;
-
-    /* Agent flavors */
-    --app-flavor-claude: #d08858;
-    --app-flavor-claude-bg: rgba(208, 136, 88, 0.10);
-    --app-flavor-claude-border: rgba(208, 136, 88, 0.20);
-    --app-flavor-codex: #68b8a0;
-    --app-flavor-codex-bg: rgba(104, 184, 160, 0.10);
-    --app-flavor-codex-border: rgba(104, 184, 160, 0.20);
-    --app-flavor-gemini: #6890c8;
-    --app-flavor-gemini-bg: rgba(104, 144, 200, 0.10);
-    --app-flavor-gemini-border: rgba(104, 144, 200, 0.20);
-    --app-flavor-opencode: #a088c0;
-    --app-flavor-opencode-bg: rgba(160, 136, 192, 0.10);
-    --app-flavor-opencode-border: rgba(160, 136, 192, 0.20);
+    --app-flavor-claude: #fcd34d;
+    --app-flavor-claude-bg: rgba(251, 191, 36, 0.16);
+    --app-flavor-claude-text: #fcd34d;
+    --app-flavor-claude-border: rgba(251, 191, 36, 0.28);
+    --app-flavor-codex: #93c5fd;
+    --app-flavor-codex-bg: rgba(96, 165, 250, 0.16);
+    --app-flavor-codex-text: #93c5fd;
+    --app-flavor-codex-border: rgba(96, 165, 250, 0.28);
+    --app-flavor-gemini: #c4b5fd;
+    --app-flavor-gemini-bg: rgba(167, 139, 250, 0.16);
+    --app-flavor-gemini-text: #c4b5fd;
+    --app-flavor-gemini-border: rgba(167, 139, 250, 0.28);
+    --app-flavor-opencode: #6ee7b7;
+    --app-flavor-opencode-bg: rgba(52, 211, 153, 0.16);
+    --app-flavor-opencode-text: #6ee7b7;
+    --app-flavor-opencode-border: rgba(52, 211, 153, 0.28);
+    --app-flavor-cursor-bg: rgba(148, 163, 184, 0.16);
+    --app-flavor-cursor-text: #cbd5e1;
+    --app-flavor-cursor-border: rgba(148, 163, 184, 0.28);
 }
 
 html {
@@ -329,22 +144,12 @@ body {
     height: 100vh;
     height: 100dvh;
     height: var(--tg-viewport-stable-height, 100dvh);
+    overflow: hidden;
     touch-action: pan-x pan-y;
     overscroll-behavior: none;
     -webkit-text-size-adjust: 100%;
 }
 
-html[data-telegram-app="true"],
-html[data-telegram-app="true"] body {
-    overflow: hidden;
-}
-
-html:not([data-telegram-app="true"]),
-html:not([data-telegram-app="true"]) body {
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
 body {
     font-size: 1rem;
     background: var(--app-bg);
@@ -425,11 +230,7 @@ body {
 }
 
 html[data-theme="dark"] .shiki,
-html[data-theme="dark"] .shiki span,
-html[data-theme="catpuccin"] .shiki,
-html[data-theme="catpuccin"] .shiki span,
-html[data-theme="gaius-dark"] .shiki,
-html[data-theme="gaius-dark"] .shiki span {
+html[data-theme="dark"] .shiki span {
     color: var(--shiki-dark) !important;
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
@@ -527,6 +328,30 @@ html[data-theme="gaius-dark"] .shiki span {
   animation: bounce-in 0.3s ease-out;
 }
 
+/* Session list item enter animation */
+@keyframes session-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-session-enter {
+  animation: session-enter 0.2s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-session-enter {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ReactQueryDevtools button - move to middle-right to avoid blocking UI */
 .tsqd-open-btn-container {
   bottom: 50% !important;
diff --git a/web/src/lib/agentFlavorUtils.test.ts b/web/src/lib/agentFlavorUtils.test.ts
new file mode 100644
index 000000000..cdc6cbbc9
--- /dev/null
+++ b/web/src/lib/agentFlavorUtils.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from 'vitest'
+import {
+    formatEffortLabel,
+    getFlavorTextClass,
+    META_DOT_SEPARATOR_CLASS,
+    supportsModelChange
+} from './agentFlavorUtils'
+
+describe('getFlavorTextClass', () => {
+    it.each([
+        ['claude', 'text-[var(--app-flavor-claude-text)] font-medium'],
+        ['codex', 'text-[var(--app-flavor-codex-text)] font-medium'],
+        ['gemini', 'text-[var(--app-flavor-gemini-text)] font-medium'],
+        ['opencode', 'text-[var(--app-flavor-opencode-text)] font-medium'],
+        ['cursor', 'text-[var(--app-flavor-cursor-text)] font-medium']
+    ])('returns flavor class for %s', (flavor, expected) => {
+        expect(getFlavorTextClass(flavor)).toBe(expected)
+    })
+
+    it('falls back for unknown flavors', () => {
+        expect(getFlavorTextClass('mystery')).toBe('text-[var(--app-hint)] font-medium')
+    })
+
+    it('falls back for nullish values', () => {
+        expect(getFlavorTextClass(null)).toBe('text-[var(--app-hint)] font-medium')
+        expect(getFlavorTextClass(undefined)).toBe('text-[var(--app-hint)] font-medium')
+    })
+
+    it('normalizes whitespace and casing', () => {
+        expect(getFlavorTextClass('  CoDeX  ')).toBe('text-[var(--app-flavor-codex-text)] font-medium')
+    })
+})
+
+describe('formatEffortLabel', () => {
+    it('returns null for nullish and blank values', () => {
+        expect(formatEffortLabel(null)).toBeNull()
+        expect(formatEffortLabel('')).toBeNull()
+        expect(formatEffortLabel('   ')).toBeNull()
+    })
+
+    it('title-cases segmented effort labels', () => {
+        expect(formatEffortLabel('very-high')).toBe('Very High')
+        expect(formatEffortLabel('max_reasoning effort')).toBe('Max Reasoning Effort')
+    })
+})
+
+describe('META_DOT_SEPARATOR_CLASS', () => {
+    it('exports the expected separator class', () => {
+        expect(META_DOT_SEPARATOR_CLASS).toBe('text-[var(--app-hint)] opacity-40')
+    })
+})
+
+describe('supportsModelChange', () => {
+    it.each(['claude', 'gemini'])('returns true for %s', (flavor) => {
+        expect(supportsModelChange(flavor)).toBe(true)
+    })
+
+    it.each(['codex', 'cursor', 'opencode', 'mystery'])('returns false for %s', (flavor) => {
+        expect(supportsModelChange(flavor)).toBe(false)
+    })
+
+    it('returns false for nullish values', () => {
+        expect(supportsModelChange(null)).toBe(false)
+        expect(supportsModelChange(undefined)).toBe(false)
+        expect(supportsModelChange('')).toBe(false)
+    })
+
+    it('normalizes whitespace and casing', () => {
+        expect(supportsModelChange('  Claude  ')).toBe(true)
+        expect(supportsModelChange('GEMINI')).toBe(true)
+    })
+})
diff --git a/web/src/lib/agentFlavorUtils.ts b/web/src/lib/agentFlavorUtils.ts
index 228658b93..52cfa640c 100644
--- a/web/src/lib/agentFlavorUtils.ts
+++ b/web/src/lib/agentFlavorUtils.ts
@@ -1,97 +1,57 @@
-import type { PermissionModeTone } from '@hapi/protocol'
-
-export const PERMISSION_TONE_BADGE: Record<PermissionModeTone, string> = {
-    neutral: 'text-[var(--app-fg)] bg-[var(--app-subtle-bg)] border-[var(--app-border)]',
-    info: 'text-[var(--app-badge-info-text)] bg-[var(--app-badge-info-bg)] border-[var(--app-badge-info-border)]',
-    warning: 'text-[var(--app-perm-warning)] bg-[var(--app-badge-warning-bg)] border-[var(--app-badge-warning-border)]',
-    danger: 'text-[var(--app-badge-error-text)] bg-[var(--app-badge-error-bg)] border-[var(--app-badge-error-border)]'
+function normalizeFlavor(flavor?: string | null): string | null {
+    const normalized = flavor?.trim().toLowerCase()
+    return normalized || null
 }
 
-export const PERMISSION_TONE_TEXT: Record<PermissionModeTone, string> = {
-    neutral: 'text-[var(--app-fg)]',
-    info: 'text-[var(--app-badge-info-text)]',
-    warning: 'text-[var(--app-perm-warning)]',
-    danger: 'text-[var(--app-badge-error-text)]'
-}
+const SESSION_META_BADGE_BASE = 'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-medium leading-none'
+
+export const SESSION_ACTIVITY_BADGE = `${SESSION_META_BADGE_BASE} border-[var(--app-badge-info-border)] bg-[var(--app-badge-info-bg)] text-[var(--app-badge-info-text)]`
+export const SESSION_PENDING_BADGE = `${SESSION_META_BADGE_BASE} border-[var(--app-badge-warning-border)] bg-[var(--app-badge-warning-bg)] text-[var(--app-badge-warning-text)]`
 
 export function isCodexFamilyFlavor(flavor?: string | null): boolean {
-    return flavor === 'codex' || flavor === 'gemini' || flavor === 'opencode'
+    const normalized = normalizeFlavor(flavor)
+    return normalized === 'codex' || normalized === 'gemini' || normalized === 'opencode'
 }
 
 export function isClaudeFlavor(flavor?: string | null): boolean {
-    return flavor === 'claude'
+    return normalizeFlavor(flavor) === 'claude'
 }
 
 export function isCursorFlavor(flavor?: string | null): boolean {
-    return flavor === 'cursor'
+    return normalizeFlavor(flavor) === 'cursor'
 }
 
 export function isKnownFlavor(flavor?: string | null): boolean {
     return isClaudeFlavor(flavor) || isCodexFamilyFlavor(flavor) || isCursorFlavor(flavor)
 }
 
-type FlavorColors = {
-    text: string
-    bg: string
-    border: string
+const FLAVOR_TEXT_CLASSES: Record<string, string> = {
+    claude: 'text-[var(--app-flavor-claude-text)] font-medium',
+    codex: 'text-[var(--app-flavor-codex-text)] font-medium',
+    gemini: 'text-[var(--app-flavor-gemini-text)] font-medium',
+    opencode: 'text-[var(--app-flavor-opencode-text)] font-medium',
+    cursor: 'text-[var(--app-flavor-cursor-text)] font-medium'
 }
 
-const FLAVOR_COLORS: Record<string, FlavorColors> = {
-    claude: {
-        text: 'text-[var(--app-flavor-claude)]',
-        bg: 'bg-[var(--app-flavor-claude-bg)]',
-        border: 'border-[var(--app-flavor-claude-border)]'
-    },
-    codex: {
-        text: 'text-[var(--app-flavor-codex)]',
-        bg: 'bg-[var(--app-flavor-codex-bg)]',
-        border: 'border-[var(--app-flavor-codex-border)]'
-    },
-    gemini: {
-        text: 'text-[var(--app-flavor-gemini)]',
-        bg: 'bg-[var(--app-flavor-gemini-bg)]',
-        border: 'border-[var(--app-flavor-gemini-border)]'
-    },
-    opencode: {
-        text: 'text-[var(--app-flavor-opencode)]',
-        bg: 'bg-[var(--app-flavor-opencode-bg)]',
-        border: 'border-[var(--app-flavor-opencode-border)]'
-    }
-}
-
-const DEFAULT_FLAVOR_COLORS: FlavorColors = {
-    text: 'text-[var(--app-hint)]',
-    bg: 'bg-[var(--app-subtle-bg)]',
-    border: 'border-[var(--app-border)]'
-}
-
-export function getFlavorColors(flavor?: string | null): FlavorColors {
-    const key = flavor?.trim()
-    if (key && FLAVOR_COLORS[key]) return FLAVOR_COLORS[key]
-    return DEFAULT_FLAVOR_COLORS
+export function getFlavorTextClass(flavor?: string | null): string {
+    const normalized = normalizeFlavor(flavor)
+    return normalized ? (FLAVOR_TEXT_CLASSES[normalized] ?? 'text-[var(--app-hint)] font-medium') : 'text-[var(--app-hint)] font-medium'
 }
 
-export function getFlavorBadgeClass(flavor?: string | null): string {
-    const colors = getFlavorColors(flavor)
-    return `${colors.text} ${colors.bg} ${colors.border}`
-}
+export const META_DOT_SEPARATOR_CLASS = 'text-[var(--app-hint)] opacity-40'
 
-export function getFlavorTextClass(flavor?: string | null): string {
-    const colors = getFlavorColors(flavor)
-    return colors.text
-}
+export function formatEffortLabel(effort?: string | null): string | null {
+    const normalized = effort?.trim()
+    if (!normalized) return null
 
-export function getFlavorDotClass(flavor?: string | null): string {
-    const key = flavor?.trim()
-    switch (key) {
-        case 'claude': return 'bg-[var(--app-flavor-claude)]'
-        case 'codex': return 'bg-[var(--app-flavor-codex)]'
-        case 'gemini': return 'bg-[var(--app-flavor-gemini)]'
-        case 'opencode': return 'bg-[var(--app-flavor-opencode)]'
-        default: return 'bg-[var(--app-hint)]'
-    }
+    return normalized
+        .split(/[-_\s]+/)
+        .filter(Boolean)
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ')
 }
 
 export function supportsModelChange(flavor?: string | null): boolean {
-    return flavor === 'claude' || flavor === 'gemini'
+    const normalized = normalizeFlavor(flavor)
+    return normalized === 'claude' || normalized === 'gemini'
 }
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 9a91bb9a3..b78f50ef9 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -12,9 +12,8 @@ import {
     useParams,
 } from '@tanstack/react-router'
 import { App } from '@/App'
-import { SortIcon, PinIcon } from '@/components/icons/SortIcons'
 import { SessionChat } from '@/components/SessionChat'
-import { SessionList, groupSessionsByDirectory } from '@/components/SessionList'
+import { SessionList } from '@/components/SessionList'
 import { NewSession } from '@/components/NewSession'
 import { LoadingState } from '@/components/LoadingState'
 import { useAppContext } from '@/lib/app-context'
@@ -27,7 +26,6 @@ import { useSessions } from '@/hooks/queries/useSessions'
 import { useSlashCommands } from '@/hooks/queries/useSlashCommands'
 import { useSkills } from '@/hooks/queries/useSkills'
 import { useSendMessage } from '@/hooks/mutations/useSendMessage'
-import { useSortToggle } from '@/hooks/useSortToggle'
 import { queryKeys } from '@/lib/query-keys'
 import { useToast } from '@/lib/toast-context'
 import { useTranslation } from '@/lib/use-translation'
@@ -116,13 +114,11 @@ function SessionsPage() {
         void refetch()
     }, [refetch])
 
-    const projectCount = new Set(sessions.map(s => {
+    const projectCount = useMemo(() => new Set(sessions.map(s => {
         const path = s.metadata?.worktree?.basePath ?? s.metadata?.path ?? 'Other'
         const machineId = s.metadata?.machineId ?? '__unknown__'
         return `${machineId}::${path}`
-    })).size
-    const groups = useMemo(() => groupSessionsByDirectory(sessions), [sessions])
-    const { sortMode, isSortPreferencePending, toggleSortMode } = useSortToggle(api, groups)
+    })).size, [sessions])
     const machineLabelsById = useMemo(() => {
         const labels: Record<string, string> = {}
         for (const machine of machines) {
@@ -153,18 +149,6 @@ function SessionsPage() {
                             >
                                 <SettingsIcon className="h-5 w-5" />
                             </button>
-                            <button
-                                type="button"
-                                onClick={toggleSortMode}
-                                className="p-1.5 rounded-full text-[var(--app-hint)] hover:text-[var(--app-link)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                                title={t(sortMode === 'auto' ? 'sessions.sort.auto' : 'sessions.sort.manual')}
-                                aria-pressed={sortMode === 'manual'}
-                                disabled={isSortPreferencePending}
-                            >
-                                {sortMode === 'auto'
-                                    ? <SortIcon className="h-4 w-4" />
-                                    : <PinIcon className="h-4 w-4" />}
-                            </button>
                             <button
                                 type="button"
                                 onClick={() => navigate({ to: '/sessions/new' })}
@@ -388,7 +372,7 @@ function NewSessionPage() {
     }, [navigate, queryClient])
 
     return (
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex h-full min-h-0 flex-col">
             <div className="flex items-center gap-2 border-b border-[var(--app-border)] bg-[var(--app-bg)] p-3 pt-[calc(0.75rem+env(safe-area-inset-top))]">
                 {!isTelegramApp() && (
                     <button
@@ -402,19 +386,21 @@ function NewSessionPage() {
                 <div className="flex-1 font-semibold">{t('newSession.title')}</div>
             </div>
 
-            {machinesError ? (
-                <div className="p-3 text-sm text-red-600">
-                    {machinesError}
-                </div>
-            ) : null}
-
-            <NewSession
-                api={api}
-                machines={machines}
-                isLoading={machinesLoading}
-                onCancel={handleCancel}
-                onSuccess={handleSuccess}
-            />
+            <div className="app-scroll-y flex-1 min-h-0">
+                {machinesError ? (
+                    <div className="p-3 text-sm text-red-600">
+                        {machinesError}
+                    </div>
+                ) : null}
+
+                <NewSession
+                    api={api}
+                    machines={machines}
+                    isLoading={machinesLoading}
+                    onCancel={handleCancel}
+                    onSuccess={handleSuccess}
+                />
+            </div>
         </div>
     )
 }