{(['simple', 'worktree'] as const).map((type) => (
@@ -35,7 +38,7 @@ export function SessionTypeSelector(props: {
props.onWorktreeNameChange(e.target.value)}
disabled={props.isDisabled}
@@ -47,10 +50,10 @@ export function SessionTypeSelector(props: {
htmlFor="session-type-worktree"
className="text-sm capitalize cursor-pointer"
>
- Worktree
+ {t('newSession.type.worktree')}
- Create a new git worktree next to the repo
+ {t('newSession.type.worktree.desc')}
)}
@@ -69,9 +72,9 @@ export function SessionTypeSelector(props: {
disabled={props.isDisabled}
className="accent-[var(--app-link)]"
/>
-
Simple
+
{t('newSession.type.simple')}
- Use the selected directory as-is
+ {t('newSession.type.simple.desc')}
)}
diff --git a/web/src/components/NewSession/YoloToggle.tsx b/web/src/components/NewSession/YoloToggle.tsx
index cdbaac3f..f0d0d25f 100644
--- a/web/src/components/NewSession/YoloToggle.tsx
+++ b/web/src/components/NewSession/YoloToggle.tsx
@@ -1,20 +1,24 @@
+import { useTranslation } from '@/lib/use-translation'
+
export function YoloToggle(props: {
yoloMode: boolean
isDisabled: boolean
onToggle: (value: boolean) => void
}) {
+ const { t } = useTranslation()
+
return (
- Bypass approvals and sandbox
+ {t('newSession.yolo.title')}
- Uses dangerous agent flags when spawning.
+ {t('newSession.yolo.desc')}
diff --git a/web/src/components/SessionActionMenu.tsx b/web/src/components/SessionActionMenu.tsx
index 9c4c2d4e..5d225602 100644
--- a/web/src/components/SessionActionMenu.tsx
+++ b/web/src/components/SessionActionMenu.tsx
@@ -8,6 +8,7 @@ import {
type CSSProperties,
type RefObject
} from 'react'
+import { useTranslation } from '@/lib/use-translation'
type SessionActionMenuProps = {
isOpen: boolean
@@ -92,6 +93,7 @@ type MenuPosition = {
}
export function SessionActionMenu(props: SessionActionMenuProps) {
+ const { t } = useTranslation()
const {
isOpen,
onClose,
@@ -236,7 +238,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
id={headingId}
className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--app-hint)]"
>
- Session actions
+ {t('session.more')}
diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index e81a1078..b5d58e9e 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -6,6 +6,7 @@ import { useSessionActions } from '@/hooks/mutations/useSessionActions'
import { SessionActionMenu } from '@/components/SessionActionMenu'
import { RenameSessionDialog } from '@/components/RenameSessionDialog'
import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import { useTranslation } from '@/lib/use-translation'
function getSessionTitle(session: Session): string {
if (session.metadata?.name) {
@@ -65,6 +66,7 @@ export function SessionHeader(props: {
api: ApiClient | null
onSessionDeleted?: () => void
}) {
+ const { t } = useTranslation()
const { session, api, onSessionDeleted } = props
const title = useMemo(() => getSessionTitle(session), [session])
const worktreeBranch = session.metadata?.worktree?.branch
@@ -122,9 +124,17 @@ export function SessionHeader(props: {
{title}
-
- {session.metadata?.path ?? session.id}
- {worktreeBranch ? ` • worktree: ${worktreeBranch}` : ''}
+
+
+ ❖
+ {session.metadata?.flavor?.trim() || 'unknown'}
+
+
+ {t('session.item.modelMode')}: {session.modelMode || 'default'}
+
+ {worktreeBranch ? (
+ {t('session.item.worktree')}: {worktreeBranch}
+ ) : null}
@@ -133,7 +143,7 @@ export function SessionHeader(props: {
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)]"
- title="Files"
+ title={t('session.title')}
>
@@ -147,7 +157,7 @@ export function SessionHeader(props: {
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)]"
- title="More actions"
+ title={t('session.more')}
>
@@ -177,10 +187,10 @@ export function SessionHeader(props: {
setArchiveOpen(false)}
- title="Archive Session"
- description={`Are you sure you want to archive "${title}"? This will disconnect the active session.`}
- confirmLabel="Archive"
- confirmingLabel="Archiving..."
+ title={t('dialog.archive.title')}
+ description={t('dialog.archive.description', { name: title })}
+ confirmLabel={t('dialog.archive.confirm')}
+ confirmingLabel={t('dialog.archive.confirming')}
onConfirm={archiveSession}
isPending={isPending}
destructive
@@ -189,10 +199,10 @@ export function SessionHeader(props: {
setDeleteOpen(false)}
- title="Delete Session"
- description={`Are you sure you want to delete "${title}"? This action cannot be undone.`}
- confirmLabel="Delete"
- confirmingLabel="Deleting..."
+ title={t('dialog.delete.title')}
+ description={t('dialog.delete.description', { name: title })}
+ confirmLabel={t('dialog.delete.confirm')}
+ confirmingLabel={t('dialog.delete.confirming')}
onConfirm={handleDelete}
isPending={isPending}
destructive
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 57ee840a..9e3c7d90 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -7,6 +7,7 @@ import { useSessionActions } from '@/hooks/mutations/useSessionActions'
import { SessionActionMenu } from '@/components/SessionActionMenu'
import { RenameSessionDialog } from '@/components/RenameSessionDialog'
import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import { useTranslation } from '@/lib/use-translation'
type SessionGroup = {
directory: string
@@ -146,21 +147,17 @@ function getAgentLabel(session: SessionSummary): string {
return 'unknown'
}
-function getModelLabel(session: SessionSummary): string {
- return session.modelMode ?? 'default'
-}
-
-function formatRelativeTime(value: number): string | null {
+function formatRelativeTime(value: number, t: (key: string, params?: Record) => string): string | null {
const ms = value < 1_000_000_000_000 ? value * 1000 : value
if (!Number.isFinite(ms)) return null
const delta = Date.now() - ms
- if (delta < 60_000) return 'just now'
+ if (delta < 60_000) return t('session.time.justNow')
const minutes = Math.floor(delta / 60_000)
- if (minutes < 60) return `${minutes}m ago`
+ if (minutes < 60) return t('session.time.minutesAgo', { n: minutes })
const hours = Math.floor(minutes / 60)
- if (hours < 24) return `${hours}h ago`
+ if (hours < 24) return t('session.time.hoursAgo', { n: hours })
const days = Math.floor(hours / 24)
- if (days < 7) return `${days}d ago`
+ if (days < 7) return t('session.time.daysAgo', { n: days })
return new Date(ms).toLocaleDateString()
}
@@ -170,6 +167,7 @@ function SessionItem(props: {
showPath?: boolean
api: ApiClient | null
}) {
+ const { t } = useTranslation()
const { session: s, onSelect, showPath = true, api } = props
const { haptic } = usePlatform()
const [menuOpen, setMenuOpen] = useState(false)
@@ -222,6 +220,11 @@ function SessionItem(props: {