-
Add a server
+ {language.t("dialog.server.add.title")}
@@ -197,10 +199,8 @@ export function DialogSelectServer() {
-
Default server
-
- Connect to this server on app launch instead of starting a local server. Requires restart.
-
+
{language.t("dialog.server.default.title")}
+
{language.t("dialog.server.default.description")}
No server selected}
+ fallback={
+ {language.t("dialog.server.default.none")}
+ }
>
- Set current server as default
+ {language.t("dialog.server.default.set")}
}
@@ -234,7 +236,7 @@ export function DialogSelectServer() {
defaultUrlActions.refetch()
}}
>
- Clear
+ {language.t("dialog.server.default.clear")}
diff --git a/packages/app/src/components/dialog-settings.tsx b/packages/app/src/components/dialog-settings.tsx
index 5ef89b8bfc7..1e9575cb23e 100644
--- a/packages/app/src/components/dialog-settings.tsx
+++ b/packages/app/src/components/dialog-settings.tsx
@@ -2,6 +2,7 @@ import { Component } from "solid-js"
import { Dialog } from "@opencode-ai/ui/dialog"
import { Tabs } from "@opencode-ai/ui/tabs"
import { Icon } from "@opencode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
import { SettingsGeneral } from "./settings-general"
import { SettingsKeybinds } from "./settings-keybinds"
import { SettingsPermissions } from "./settings-permissions"
@@ -12,6 +13,8 @@ import { SettingsCommands } from "./settings-commands"
import { SettingsMcp } from "./settings-mcp"
export const DialogSettings: Component = () => {
+ const language = useLanguage()
+
return (
@@ -26,15 +29,15 @@ export const DialogSettings: Component = () => {
"padding-bottom": "12px",
}}
>
- Desktop
+ {language.t("settings.section.desktop")}
diff --git a/packages/app/src/components/font-picker.tsx b/packages/app/src/components/font-picker.tsx
deleted file mode 100644
index 213ce097fe8..00000000000
--- a/packages/app/src/components/font-picker.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { createMemo, createSignal, onMount, Show } from "solid-js"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { List } from "@opencode-ai/ui/list"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { FONTS, getFontById, type FontDefinition } from "@/fonts/font-definitions"
-import { useLayout } from "@/context/layout"
-import { applyFontWithLoad, ensureFontLoaded, applyFont } from "@/fonts/apply-font"
-
-function DialogSelectFont(props: { originalFont: string }) {
- const layout = useLayout()
- const dialog = useDialog()
- const [previewFont, setPreviewFont] = createSignal(props.originalFont)
- const currentFont = createMemo(() => getFontById(previewFont()) ?? FONTS[0])
-
- async function handleSelect(font: FontDefinition | undefined) {
- if (!font) return
-
- const loaded = await ensureFontLoaded(font)
- if (!loaded) return
-
- layout.font.set(font.id)
- applyFont(font.id)
- dialog.close()
- }
-
- async function handleActiveChange(font: FontDefinition | undefined) {
- if (!font) return
-
- const loaded = await ensureFontLoaded(font)
- if (!loaded) return
-
- setPreviewFont(font.id)
- applyFont(font.id)
- }
-
- return (
-
- f.id}
- items={() => [...FONTS]}
- current={currentFont()}
- filterKeys={["name", "family"]}
- onSelect={handleSelect}
- onMove={handleActiveChange}
- >
- {(font: FontDefinition) => (
-
- {font.name}
-
- )}
-
-
- )
-}
-
-export function FontPicker(props: { class?: string; mobile?: boolean }) {
- const layout = useLayout()
- const dialog = useDialog()
- const currentFont = createMemo(() => getFontById(layout.font.current()) ?? FONTS[0])
-
- onMount(() => applyFontWithLoad(currentFont()))
-
- function openDialog() {
- const originalFont = currentFont().id
- dialog.show(
- () =>
-
-
-
- }
- >
-
- Font
-
-
- )
-}
diff --git a/packages/app/src/components/header.tsx b/packages/app/src/components/header.tsx
index 55fd5ff5ca3..9e85ec01a40 100644
--- a/packages/app/src/components/header.tsx
+++ b/packages/app/src/components/header.tsx
@@ -16,8 +16,6 @@ import { A, useParams } from "@solidjs/router"
import { createMemo, createResource, Show } from "solid-js"
import { IconButton } from "@opencode-ai/ui/icon-button"
import { iife } from "@opencode-ai/util/iife"
-import { ThemePicker } from "@/components/theme-picker"
-import { FontPicker } from "@/components/font-picker"
export function Header(props: {
navigateToProject: (directory: string) => void
@@ -57,12 +55,7 @@ export function Header(props: {
0 && params.dir}
- fallback={
-
-
- }
+ fallback={
}
>
{(directory) => {
const currentDirectory = createMemo(() => base64Decode(directory()))
@@ -121,11 +114,6 @@ export function Header(props: {
- {/* Theme and Font first - desktop only */}
-
-
{/* Review toggle - requires session */}
+
+type ModelInfo = {
+ id: string
+ name: string
+ provider: {
+ name: string
+ }
+ capabilities?: {
+ reasoning: boolean
+ input: InputMap
+ }
+ modalities?: {
+ input: Array
+ }
+ reasoning?: boolean
+ limit: {
+ context: number
+ }
+}
+
+export const ModelTooltip: Component<{ model: ModelInfo; latest?: boolean; free?: boolean }> = (props) => {
+ const language = useLanguage()
+ const sourceName = (model: ModelInfo) => {
+ const value = `${model.id} ${model.name}`.toLowerCase()
+
+ if (/claude|anthropic/.test(value)) return language.t("model.provider.anthropic")
+ if (/gpt|o[1-4]|codex|openai/.test(value)) return language.t("model.provider.openai")
+ if (/gemini|palm|bard|google/.test(value)) return language.t("model.provider.google")
+ if (/grok|xai/.test(value)) return language.t("model.provider.xai")
+ if (/llama|meta/.test(value)) return language.t("model.provider.meta")
+
+ return model.provider.name
+ }
+ const inputLabel = (value: string) => {
+ if (value === "text") return language.t("model.input.text")
+ if (value === "image") return language.t("model.input.image")
+ if (value === "audio") return language.t("model.input.audio")
+ if (value === "video") return language.t("model.input.video")
+ if (value === "pdf") return language.t("model.input.pdf")
+ return value
+ }
+ const title = () => {
+ const tags: Array = []
+ if (props.latest) tags.push(language.t("model.tag.latest"))
+ if (props.free) tags.push(language.t("model.tag.free"))
+ const suffix = tags.length ? ` (${tags.join(", ")})` : ""
+ return `${sourceName(props.model)} ${props.model.name}${suffix}`
+ }
+ const inputs = () => {
+ if (props.model.capabilities) {
+ const input = props.model.capabilities.input
+ const order: Array = ["text", "image", "audio", "video", "pdf"]
+ const entries = order.filter((key) => input[key]).map((key) => inputLabel(key))
+ return entries.length ? entries.join(", ") : undefined
+ }
+ const raw = props.model.modalities?.input
+ if (!raw) return
+ const entries = raw.map((value) => inputLabel(value))
+ return entries.length ? entries.join(", ") : undefined
+ }
+ const reasoning = () => {
+ if (props.model.capabilities)
+ return props.model.capabilities.reasoning
+ ? language.t("model.tooltip.reasoning.allowed")
+ : language.t("model.tooltip.reasoning.none")
+ return props.model.reasoning
+ ? language.t("model.tooltip.reasoning.allowed")
+ : language.t("model.tooltip.reasoning.none")
+ }
+ const context = () => language.t("model.tooltip.context", { limit: props.model.limit.context.toLocaleString() })
+
+ return (
+
+
{title()}
+
+ {(value) => (
+
+ {language.t("model.tooltip.allows", { inputs: value() })}
+
+ )}
+
+
{reasoning()}
+
{context()}
+
= (props) => {
const providers = useProviders()
const command = useCommand()
const permission = usePermission()
+ const language = useLanguage()
let editorRef!: HTMLDivElement
let fileInputRef!: HTMLInputElement
let scrollRef!: HTMLDivElement
@@ -184,7 +186,7 @@ export const PromptInput: Component = (props) => {
popover: null,
historyIndex: -1,
savedPrompt: null,
- placeholder: Math.floor(Math.random() * PLACEHOLDERS.length),
+ placeholder: Math.floor(Math.random() * EXAMPLES.length),
dragging: false,
mode: "normal",
applyingHistory: false,
@@ -257,7 +259,7 @@ export const PromptInput: Component = (props) => {
params.id
if (params.id) return
const interval = setInterval(() => {
- setStore("placeholder", (prev) => (prev + 1) % PLACEHOLDERS.length)
+ setStore("placeholder", (prev) => (prev + 1) % EXAMPLES.length)
}, 6500)
onCleanup(() => clearInterval(interval))
})
@@ -312,8 +314,8 @@ export const PromptInput: Component = (props) => {
if (fileItems.length > 0) {
showToast({
- title: "Unsupported paste",
- description: "Only images or PDFs can be pasted here.",
+ title: language.t("prompt.toast.pasteUnsupported.title"),
+ description: language.t("prompt.toast.pasteUnsupported.description"),
})
return
}
@@ -559,6 +561,25 @@ export const PromptInput: Component = (props) => {
})
})
+ const selectPopoverActive = () => {
+ if (store.popover === "at") {
+ const items = atFlat()
+ if (items.length === 0) return
+ const active = atActive()
+ const item = items.find((entry) => atKey(entry) === active) ?? items[0]
+ handleAtSelect(item)
+ return
+ }
+
+ if (store.popover === "slash") {
+ const items = slashFlat()
+ if (items.length === 0) return
+ const active = slashActive()
+ const item = items.find((entry) => entry.id === active) ?? items[0]
+ handleSlashSelect(item)
+ }
+ }
+
createEffect(
on(
() => prompt.current(),
@@ -919,14 +940,24 @@ export const PromptInput: Component = (props) => {
return
}
- if (store.popover && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
- if (store.popover === "at") {
- atOnKeyDown(event)
- } else {
- slashOnKeyDown(event)
+ if (store.popover) {
+ if (event.key === "Tab") {
+ selectPopoverActive()
+ event.preventDefault()
+ return
+ }
+ if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter") {
+ if (store.popover === "at") {
+ atOnKeyDown(event)
+ event.preventDefault()
+ return
+ }
+ if (store.popover === "slash") {
+ slashOnKeyDown(event)
+ }
+ event.preventDefault()
+ return
}
- event.preventDefault()
- return
}
const ctrl = event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey
@@ -1008,8 +1039,8 @@ export const PromptInput: Component = (props) => {
const currentAgent = local.agent.current()
if (!currentModel || !currentAgent) {
showToast({
- title: "Select an agent and model",
- description: "Choose an agent and model before sending a prompt.",
+ title: language.t("prompt.toast.modelAgentRequired.title"),
+ description: language.t("prompt.toast.modelAgentRequired.description"),
})
return
}
@@ -1020,7 +1051,7 @@ export const PromptInput: Component = (props) => {
if (data?.message) return data.message
}
if (err instanceof Error) return err.message
- return "Request failed"
+ return language.t("common.requestFailed")
}
addToHistory(currentPrompt, mode)
@@ -1041,7 +1072,7 @@ export const PromptInput: Component = (props) => {
.then((x) => x.data)
.catch((err) => {
showToast({
- title: "Failed to create worktree",
+ title: language.t("prompt.toast.worktreeCreateFailed.title"),
description: errorMessage(err),
})
return undefined
@@ -1049,8 +1080,8 @@ export const PromptInput: Component = (props) => {
if (!createdWorktree?.directory) {
showToast({
- title: "Failed to create worktree",
- description: "Request failed",
+ title: language.t("prompt.toast.worktreeCreateFailed.title"),
+ description: language.t("common.requestFailed"),
})
return
}
@@ -1081,7 +1112,7 @@ export const PromptInput: Component = (props) => {
.then((x) => x.data ?? undefined)
.catch((err) => {
showToast({
- title: "Failed to create session",
+ title: language.t("prompt.toast.sessionCreateFailed.title"),
description: errorMessage(err),
})
return undefined
@@ -1125,7 +1156,7 @@ export const PromptInput: Component = (props) => {
})
.catch((err) => {
showToast({
- title: "Failed to send shell command",
+ title: language.t("prompt.toast.shellSendFailed.title"),
description: errorMessage(err),
})
restoreInput()
@@ -1157,7 +1188,7 @@ export const PromptInput: Component = (props) => {
})
.catch((err) => {
showToast({
- title: "Failed to send command",
+ title: language.t("prompt.toast.commandSendFailed.title"),
description: errorMessage(err),
})
restoreInput()
@@ -1328,7 +1359,7 @@ export const PromptInput: Component = (props) => {
})
.catch((err) => {
showToast({
- title: "Failed to send prompt",
+ title: language.t("prompt.toast.promptSendFailed.title"),
description: errorMessage(err),
})
removeOptimisticMessage()
@@ -1352,7 +1383,7 @@ export const PromptInput: Component = (props) => {
0}
- fallback={No matching results
}
+ fallback={{language.t("prompt.popover.emptyResults")}
}
>
{(item) => (
@@ -1398,7 +1429,7 @@ export const PromptInput: Component = (props) => {
0}
- fallback={No matching commands
}
+ fallback={{language.t("prompt.popover.emptyCommands")}
}
>
{(cmd) => (
@@ -1420,7 +1451,7 @@ export const PromptInput: Component = (props) => {
- custom
+ {language.t("prompt.slash.badge.custom")}
@@ -1449,7 +1480,7 @@ export const PromptInput: Component = (props) => {
Drop images or PDFs here
+ {language.t("prompt.dropzone.label")}
@@ -1462,7 +1493,7 @@ export const PromptInput: Component
= (props) => {
{getDirectory(path())}
{getFilename(path())}
- active
+ {language.t("prompt.context.active")}
= (props) => {
onClick={() => prompt.context.addActive()}
>
Include active file
+ {language.t("prompt.context.includeActiveFile")}
@@ -1574,8 +1605,8 @@ export const PromptInput: Component = (props) => {
{store.mode === "shell"
- ? "Enter shell command..."
- : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
+ ? language.t("prompt.placeholder.shell")
+ : language.t("prompt.placeholder.normal", { example: language.t(EXAMPLES[store.placeholder]) })}
@@ -1585,12 +1616,16 @@ export const PromptInput: Component = (props) => {
Shell
- esc to exit
+ {language.t("prompt.mode.shell")}
+ {language.t("prompt.mode.shell.exit")}
-
+
agent.name)}
current={local.agent.current()?.name ?? ""}
@@ -1602,24 +1637,32 @@ export const PromptInput: Component = (props) => {
0}
fallback={
-
+
dialog.show(() =>
- {local.model.current()?.name ?? "Select model"}
+ {local.model.current()?.name ?? language.t("dialog.model.select.title")}
}
>
-
+
- {local.model.current()?.name ?? "Select model"}
+ {local.model.current()?.name ?? language.t("dialog.model.select.title")}
@@ -1628,7 +1671,7 @@ export const PromptInput: Component = (props) => {
0}>
= (props) => {
class="text-text-base _hidden group-hover/prompt-input:inline-block capitalize text-12-regular"
onClick={() => local.model.variant.cycle()}
>
- {local.model.variant.current() ?? "Default"}
+ {local.model.variant.current() ?? language.t("common.default")}
= (props) => {
-
+
fileInputRef.click()}>
@@ -1695,13 +1738,13 @@ export const PromptInput: Component = (props) => {
- Stop
- ESC
+ {language.t("prompt.action.stop")}
+ {language.t("common.key.esc")}
- Send
+ {language.t("prompt.action.send")}
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
index 680f327130e..53148d41693 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/components/session-context-usage.tsx
@@ -7,6 +7,7 @@ import { AssistantMessage } from "@opencode-ai/sdk/v2/client"
import { useLayout } from "@/context/layout"
import { useSync } from "@/context/sync"
+import { useLanguage } from "@/context/language"
interface SessionContextUsageProps {
variant?: "button" | "indicator"
@@ -16,6 +17,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
const sync = useSync()
const params = useParams()
const layout = useLayout()
+ const language = useLanguage()
const variant = createMemo(() => props.variant ?? "button")
const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
@@ -24,14 +26,16 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
const cost = createMemo(() => {
+ const locale = language.locale()
const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
- return new Intl.NumberFormat("en-US", {
+ return new Intl.NumberFormat(locale, {
style: "currency",
currency: "USD",
}).format(total)
})
const context = createMemo(() => {
+ const locale = language.locale()
const last = messages().findLast((x) => {
if (x.role !== "assistant") return false
const total = x.tokens.input + x.tokens.output + x.tokens.reasoning + x.tokens.cache.read + x.tokens.cache.write
@@ -42,7 +46,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
const model = sync.data.provider.all.find((x) => x.id === last.providerID)?.models[last.modelID]
return {
- tokens: total.toLocaleString(),
+ tokens: total.toLocaleString(locale),
percentage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
}
})
@@ -67,21 +71,21 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
<>
{ctx().tokens}
- Tokens
+ {language.t("context.usage.tokens")}
{ctx().percentage ?? 0}%
- Usage
+ {language.t("context.usage.usage")}
)}
{cost()}
- Cost
+ {language.t("context.usage.cost")}
- Click to view context
+ {language.t("context.usage.clickToView")}
)
diff --git a/packages/app/src/components/session-lsp-indicator.tsx b/packages/app/src/components/session-lsp-indicator.tsx
index ac3a3999798..dab92920ec4 100644
--- a/packages/app/src/components/session-lsp-indicator.tsx
+++ b/packages/app/src/components/session-lsp-indicator.tsx
@@ -1,9 +1,11 @@
import { createMemo, Show } from "solid-js"
import { useSync } from "@/context/sync"
+import { useLanguage } from "@/context/language"
import { Tooltip } from "@opencode-ai/ui/tooltip"
export function SessionLspIndicator() {
const sync = useSync()
+ const language = useLanguage()
const lspStats = createMemo(() => {
const lsp = sync.data.lsp ?? []
@@ -15,7 +17,7 @@ export function SessionLspIndicator() {
const tooltipContent = createMemo(() => {
const lsp = sync.data.lsp ?? []
- if (lsp.length === 0) return "No LSP servers"
+ if (lsp.length === 0) return language.t("lsp.tooltip.none")
return lsp.map((s) => s.name).join(", ")
})
@@ -30,7 +32,9 @@ export function SessionLspIndicator() {
"bg-icon-success-base": !lspStats().hasError && lspStats().connected > 0,
}}
/>
- {lspStats().connected} LSP
+
+ {language.t("lsp.label.connected", { count: lspStats().connected })}
+
diff --git a/packages/app/src/components/session/session-context-tab.tsx b/packages/app/src/components/session/session-context-tab.tsx
index a975f9fa56f..b415789107d 100644
--- a/packages/app/src/components/session/session-context-tab.tsx
+++ b/packages/app/src/components/session/session-context-tab.tsx
@@ -11,6 +11,7 @@ import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
import { Code } from "@opencode-ai/ui/code"
import { Markdown } from "@opencode-ai/ui/markdown"
import type { AssistantMessage, Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
+import { useLanguage } from "@/context/language"
interface SessionContextTabProps {
messages: () => Message[]
@@ -22,6 +23,7 @@ interface SessionContextTabProps {
export function SessionContextTab(props: SessionContextTabProps) {
const params = useParams()
const sync = useSync()
+ const language = useLanguage()
const ctx = createMemo(() => {
const last = props.messages().findLast((x) => {
@@ -59,8 +61,9 @@ export function SessionContextTab(props: SessionContextTabProps) {
})
const cost = createMemo(() => {
+ const locale = language.locale()
const total = props.messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
- return new Intl.NumberFormat("en-US", {
+ return new Intl.NumberFormat(locale, {
style: "currency",
currency: "USD",
}).format(total)
@@ -89,18 +92,18 @@ export function SessionContextTab(props: SessionContextTabProps) {
const number = (value: number | null | undefined) => {
if (value === undefined) return "—"
if (value === null) return "—"
- return value.toLocaleString()
+ return value.toLocaleString(language.locale())
}
const percent = (value: number | null | undefined) => {
if (value === undefined) return "—"
if (value === null) return "—"
- return value.toString() + "%"
+ return value.toLocaleString(language.locale()) + "%"
}
const time = (value: number | undefined) => {
if (!value) return "—"
- return DateTime.fromMillis(value).toLocaleString(DateTime.DATETIME_MED)
+ return DateTime.fromMillis(value).setLocale(language.locale()).toLocaleString(DateTime.DATETIME_MED)
}
const providerLabel = createMemo(() => {
@@ -172,7 +175,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
return [
{
key: "system",
- label: "System",
+ label: language.t("context.breakdown.system"),
tokens: tokens.system,
width: pct(tokens.system),
percent: pctLabel(tokens.system),
@@ -180,7 +183,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
},
{
key: "user",
- label: "User",
+ label: language.t("context.breakdown.user"),
tokens: tokens.user,
width: pct(tokens.user),
percent: pctLabel(tokens.user),
@@ -188,7 +191,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
},
{
key: "assistant",
- label: "Assistant",
+ label: language.t("context.breakdown.assistant"),
tokens: tokens.assistant,
width: pct(tokens.assistant),
percent: pctLabel(tokens.assistant),
@@ -196,7 +199,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
},
{
key: "tool",
- label: "Tool Calls",
+ label: language.t("context.breakdown.tool"),
tokens: tokens.tool,
width: pct(tokens.tool),
percent: pctLabel(tokens.tool),
@@ -204,7 +207,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
},
{
key: "other",
- label: "Other",
+ label: language.t("context.breakdown.other"),
tokens: tokens.other,
width: pct(tokens.other),
percent: pctLabel(tokens.other),
@@ -243,22 +246,28 @@ export function SessionContextTab(props: SessionContextTabProps) {
const c = ctx()
const count = counts()
return [
- { label: "Session", value: props.info()?.title ?? params.id ?? "—" },
- { label: "Messages", value: count.all.toLocaleString() },
- { label: "Provider", value: providerLabel() },
- { label: "Model", value: modelLabel() },
- { label: "Context Limit", value: number(c?.limit) },
- { label: "Total Tokens", value: number(c?.total) },
- { label: "Usage", value: percent(c?.usage) },
- { label: "Input Tokens", value: number(c?.input) },
- { label: "Output Tokens", value: number(c?.output) },
- { label: "Reasoning Tokens", value: number(c?.reasoning) },
- { label: "Cache Tokens (read/write)", value: `${number(c?.cacheRead)} / ${number(c?.cacheWrite)}` },
- { label: "User Messages", value: count.user.toLocaleString() },
- { label: "Assistant Messages", value: count.assistant.toLocaleString() },
- { label: "Total Cost", value: cost() },
- { label: "Session Created", value: time(props.info()?.time.created) },
- { label: "Last Activity", value: time(c?.message.time.created) },
+ { label: language.t("context.stats.session"), value: props.info()?.title ?? params.id ?? "—" },
+ { label: language.t("context.stats.messages"), value: count.all.toLocaleString(language.locale()) },
+ { label: language.t("context.stats.provider"), value: providerLabel() },
+ { label: language.t("context.stats.model"), value: modelLabel() },
+ { label: language.t("context.stats.limit"), value: number(c?.limit) },
+ { label: language.t("context.stats.totalTokens"), value: number(c?.total) },
+ { label: language.t("context.stats.usage"), value: percent(c?.usage) },
+ { label: language.t("context.stats.inputTokens"), value: number(c?.input) },
+ { label: language.t("context.stats.outputTokens"), value: number(c?.output) },
+ { label: language.t("context.stats.reasoningTokens"), value: number(c?.reasoning) },
+ {
+ label: language.t("context.stats.cacheTokens"),
+ value: `${number(c?.cacheRead)} / ${number(c?.cacheWrite)}`,
+ },
+ { label: language.t("context.stats.userMessages"), value: count.user.toLocaleString(language.locale()) },
+ {
+ label: language.t("context.stats.assistantMessages"),
+ value: count.assistant.toLocaleString(language.locale()),
+ },
+ { label: language.t("context.stats.totalCost"), value: cost() },
+ { label: language.t("context.stats.sessionCreated"), value: time(props.info()?.time.created) },
+ { label: language.t("context.stats.lastActivity"), value: time(c?.message.time.created) },
] satisfies { label: string; value: JSX.Element }[]
})
@@ -371,7 +380,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
0}>
-
Context Breakdown
+
{language.t("context.breakdown.title")}
{(segment) => (
@@ -396,16 +405,14 @@ export function SessionContextTab(props: SessionContextTabProps) {
)}
-
- Approximate breakdown of input tokens. "Other" includes tool definitions and overhead.
-
+
{language.t("context.breakdown.note")}
{(prompt) => (
-
System Prompt
+
{language.t("context.systemPrompt.title")}
@@ -414,7 +421,7 @@ export function SessionContextTab(props: SessionContextTabProps) {
-
Raw messages
+
{language.t("context.rawMessages.title")}
{(message) =>
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 8f3bc1f4114..0fc8828fd2f 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -4,6 +4,7 @@ import { Portal } from "solid-js/web"
import { useParams } from "@solidjs/router"
import { useLayout } from "@/context/layout"
import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
// import { useServer } from "@/context/server"
// import { useDialog } from "@opencode-ai/ui/context/dialog"
import { usePlatform } from "@/context/platform"
@@ -29,6 +30,7 @@ export function SessionHeader() {
// const dialog = useDialog()
const sync = useSync()
const platform = usePlatform()
+ const language = useLanguage()
const projectDirectory = createMemo(() => base64Decode(params.dir ?? ""))
const project = createMemo(() => {
@@ -138,7 +140,7 @@ export function SessionHeader() {
- Search {name()}
+ {language.t("session.header.search.placeholder", { project: name() })}
@@ -181,7 +183,10 @@ export function SessionHeader() {
}}
aria-hidden={!showReview()}
>
-
+
@@ -209,12 +214,12 @@ export function SessionHeader() {
view().terminal.toggle()}
>
@@ -245,20 +250,20 @@ export function SessionHeader() {
aria-hidden={!showShare()}
>
+
- Share
+ {language.t("session.share.action.share")}
}
@@ -275,7 +280,9 @@ export function SessionHeader() {
onClick={shareSession}
disabled={state.share}
>
- {state.share ? "Publishing..." : "Publish"}
+ {state.share
+ ? language.t("session.share.action.publishing")
+ : language.t("session.share.action.publish")}
- View
+ {language.t("session.share.action.view")}
@@ -307,7 +316,13 @@ export function SessionHeader() {