refactor: simplify session component headers and add Telegram Web App support

- Unify session title logic across components to check metadata.name first
- Add Telegram Web App detection with re-check after mount
- Hide header and buttons when running in Telegram environment
- Replace host display with path information in session details
- Remove unused Badge components for session status
- Simplify SessionList and SessionHeader layouts

web/src/components/SessionDetail.tsx

@@ -1,13 +1,16 @@
 import { useMemo } from 'react'
 import type { ApiClient } from '@/api/client'
+import { getTelegramWebApp } from '@/hooks/useTelegram'
 import type { DecryptedMessage, Session } from '@/types/api'
 import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { MessageBubble } from '@/components/MessageBubble'
 import { PermissionPanel } from '@/components/PermissionPanel'
 
 function getSessionTitle(session: Session): string {
+    if (session.metadata?.name) {
+        return session.metadata.name
+    }
     if (session.metadata?.summary?.text) {
         return session.metadata.summary.text
     }
@@ -37,39 +40,31 @@ export function SessionDetail(props: {
         return Object.entries(rec).map(([requestId, request]) => ({ requestId, request }))
     }, [props.session])
 
+    const isTelegram = getTelegramWebApp() !== null
+
     return (
         <div className="flex flex-col gap-3">
-            <div className="flex items-center justify-between gap-2">
-                <Button variant="secondary" size="sm" onClick={props.onBack}>
-                    Back
-                </Button>
-                <Button variant="secondary" size="sm" onClick={props.onRefreshAll} disabled={props.isLoadingMessages}>
-                    Refresh
-                </Button>
-            </div>
-
-            <Card>
-                <CardHeader className="pb-2">
+            {!isTelegram && (
+                <>
                     <div className="flex items-center justify-between gap-2">
-                        <CardTitle className="truncate">{getSessionTitle(props.session)}</CardTitle>
-                        {requests.length > 0 ? (
-                            <Badge variant="warning">{requests.length} pending</Badge>
-                        ) : props.session.active ? (
-                            <Badge variant="success">active</Badge>
-                        ) : (
-                            <Badge>inactive</Badge>
-                        )}
+                        <Button variant="secondary" size="sm" onClick={props.onBack}>
+                            Back
+                        </Button>
+                        <Button variant="secondary" size="sm" onClick={props.onRefreshAll} disabled={props.isLoadingMessages}>
+                            Refresh
+                        </Button>
                     </div>
-                    <CardDescription className="truncate">
-                        {props.session.metadata?.host ? `Host: ${props.session.metadata.host}` : 'Host: (unknown)'}
-                    </CardDescription>
-                </CardHeader>
-                <CardContent className="pt-0">
-                    <div className="text-xs text-[var(--app-hint)]">
-                        {props.session.metadata?.path ?? props.session.id}
-                    </div>
-                </CardContent>
-            </Card>
+
+                    <Card>
+                        <CardHeader className="pb-2">
+                            <CardTitle className="truncate">{getSessionTitle(props.session)}</CardTitle>
+                            <CardDescription className="truncate">
+                                {props.session.metadata?.path ?? props.session.id}
+                            </CardDescription>
+                        </CardHeader>
+                    </Card>
+                </>
+            )}
 
             <Card>
                 <CardHeader className="pb-2">

web/src/components/SessionHeader.tsx

@@ -1,10 +1,14 @@
 import { useMemo } from 'react'
 import type { Session } from '@/types/api'
+import { getTelegramWebApp } from '@/hooks/useTelegram'
 
 function getSessionTitle(session: Session): string {
     if (session.metadata?.name) {
         return session.metadata.name
     }
+    if (session.metadata?.summary?.text) {
+        return session.metadata.summary.text
+    }
     if (session.metadata?.path) {
         const parts = session.metadata.path.split('/').filter(Boolean)
         return parts.length > 0 ? parts[parts.length - 1] : session.id.slice(0, 8)
@@ -16,8 +20,14 @@ export function SessionHeader(props: {
     session: Session
     onBack: () => void
 }) {
+    const isTelegram = getTelegramWebApp() !== null
     const title = useMemo(() => getSessionTitle(props.session), [props.session])
 
+    // In Telegram, don't render header (Telegram provides its own)
+    if (isTelegram) {
+        return null
+    }
+
     return (
         <div className="flex items-center gap-2 bg-[var(--app-bg)] p-3">
             {/* Back button */}
@@ -41,15 +51,13 @@ export function SessionHeader(props: {
                 </svg>
             </button>
 
-            {/* Session info */}
+            {/* Session info - two lines: title and path */}
             <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-2 min-w-0">
-                    <div className="truncate font-semibold">
-                        {title}
-                    </div>
+                <div className="truncate font-semibold">
+                    {title}
                 </div>
                 <div className="text-xs text-[var(--app-hint)] truncate">
-                    {props.session.metadata?.host ? `Host: ${props.session.metadata.host}` : props.session.id}
+                    {props.session.metadata?.path ?? props.session.id}
                 </div>
             </div>
         </div>

web/src/components/SessionList.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@/components/ui/badge'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import type { SessionSummary } from '@/types/api'
 
 function PlusIcon(props: { className?: string }) {
@@ -44,6 +44,9 @@ function BulbIcon(props: { className?: string }) {
 }
 
 function getSessionTitle(session: SessionSummary): string {
+    if (session.metadata?.name) {
+        return session.metadata.name
+    }
     if (session.metadata?.summary?.text) {
         return session.metadata.summary.text
     }
@@ -114,14 +117,9 @@ export function SessionList(props: {
                                 </div>
                             </div>
                             <CardDescription className="truncate">
-                                {s.metadata?.host ? `Host: ${s.metadata.host}` : 'Host: (unknown)'}
+                                {s.metadata?.path ?? s.id}
                             </CardDescription>
                         </CardHeader>
-                        <CardContent className="pt-0">
-                            <div className="text-xs text-[var(--app-hint)] truncate">
-                                {s.metadata?.path ?? s.id}
-                            </div>
-                        </CardContent>
                     </Card>
                 ))}
             </div>