diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index ad68b3e124..9968fa3b59 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -251,7 +251,7 @@ export const SettingsGeneral: Component = () => {
})
const InterfaceSection = () => (
-
+
{
+
+
+
+
+
+
+
+
)
diff --git a/packages/app/src/components/settings-v2/general.tsx b/packages/app/src/components/settings-v2/general.tsx
index 4e210c4edb..120eed726d 100644
--- a/packages/app/src/components/settings-v2/general.tsx
+++ b/packages/app/src/components/settings-v2/general.tsx
@@ -230,34 +230,53 @@ export const SettingsGeneralV2: Component<{
const InterfaceSection = () => (
-
-
- {language.t("settings.general.row.newInterface.title")}
- {language.t("settings.general.row.newInterface.badge")}
-
- }
- description={language.t("settings.general.row.newInterface.description", {
- date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
- oldInterfaceSunset,
- ),
- })}
- >
-
- {
- settings.general.setNewLayoutDesigns(checked)
- if (checked) return
- void import("@/components/dialog-settings").then((module) => {
- void dialog.show(() => )
- })
- }}
- />
-
-
-
+
+
+
+ {language.t("settings.general.row.newInterface.title")}
+ {language.t("settings.general.row.newInterface.badge")}
+
+ }
+ description={language.t("settings.general.row.newInterface.description", {
+ date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
+ oldInterfaceSunset,
+ ),
+ })}
+ >
+
+ {
+ settings.general.setNewLayoutDesigns(checked)
+ if (checked) return
+ void import("@/components/dialog-settings").then((module) => {
+ void dialog.show(() => )
+ })
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ {language.t("settings.general.row.newInterfaceNotice.dismiss")}
+
+
+
+
)
diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css
index c36de6be9a..2b4b65e286 100644
--- a/packages/app/src/components/settings-v2/settings-v2.css
+++ b/packages/app/src/components/settings-v2/settings-v2.css
@@ -90,6 +90,11 @@
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
}
+.settings-v2-interface-feature [data-component="settings-v2-list"] {
+ background-color: var(--v2-background-bg-base);
+ box-shadow: var(--v2-elevation-raised);
+}
+
[data-component="settings-v2-row"] {
display: flex;
flex-wrap: wrap;
@@ -128,7 +133,7 @@
}
[data-slot="settings-v2-row-description"] {
- font-size: 11px;
+ font-size: 13px;
font-weight: 440;
line-height: 1;
color: var(--v2-text-text-muted);
diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx
index da655f53a9..68c9e840e2 100644
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -34,6 +34,7 @@ export interface Settings {
showCustomAgents: boolean
mobileTitlebarPosition: "top" | "bottom"
newLayoutDesigns?: boolean
+ newInterfaceNoticeDismissed?: boolean
}
appearance: {
fontSize: number
@@ -254,6 +255,13 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
setNewLayoutDesigns(value: boolean) {
setStore("general", "newLayoutDesigns", value)
},
+ newInterfaceNoticeDismissed: withFallback(
+ () => store.general?.newInterfaceNoticeDismissed,
+ false,
+ ),
+ dismissNewInterfaceNotice() {
+ setStore("general", "newInterfaceNoticeDismissed", true)
+ },
},
visibility: {
fileTree: visible(showFileTree),
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index 54df4d232c..808025cb14 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -855,9 +855,8 @@ export const dict = {
"settings.general.row.language.title": "Language",
"settings.general.row.language.description": "Change the display language for OpenCode",
- "settings.general.row.shell.title": "Terminal Shell",
- "settings.general.row.shell.description":
- "Choose the shell used for your terminal. Compatible shells are also used for agent tool calls.",
+ "settings.general.row.shell.title": "Terminal shell",
+ "settings.general.row.shell.description": "Shell used by the terminal and agent tools",
"settings.general.row.shell.autoDefault": "Auto (Default)",
"settings.general.row.shell.terminalOnly": "terminal only",
"settings.general.row.appearance.title": "Appearance",
@@ -889,8 +888,9 @@ export const dict = {
"settings.general.row.mobileTitlebarBottom.title": "Bottom navigation",
"settings.general.row.mobileTitlebarBottom.description":
"Place the title bar and session tabs at the bottom of the screen on mobile",
- "settings.general.row.showCustomAgents.title": "Custom agents",
- "settings.general.row.showCustomAgents.description": "Show the agent picker in the composer",
+ "settings.general.row.showCustomAgents.title": "Show agent",
+ "settings.general.row.showCustomAgents.description":
+ "Switch between agents in the composer. When hidden, defaults to Build agent.",
"settings.general.row.reasoningSummaries.title": "Show reasoning summaries",
"settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline",
"settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts",
@@ -902,7 +902,10 @@ export const dict = {
"settings.general.row.newInterface.title": "Use the new interface",
"settings.general.row.newInterface.badge": "New",
"settings.general.row.newInterface.description":
- "A redesigned layout, tabs, composer and new home. Old interface goes away on {{date}}.",
+ "New layout, tabs, composer and home. Switch back until {{date}}.",
+ "settings.general.row.newInterfaceNotice.title": "You're now using the new interface",
+ "settings.general.row.newInterfaceNotice.description": "The old interface was phased out on {{date}}.",
+ "settings.general.row.newInterfaceNotice.dismiss": "Dismiss",
"settings.general.row.pinchZoom.title": "Pinch to zoom",
"settings.general.row.pinchZoom.description": "Allow trackpad pinch and Ctrl-scroll gestures to zoom",
diff --git a/packages/ui/src/v2/components/badge-v2.css b/packages/ui/src/v2/components/badge-v2.css
index 44dfc7489d..5c7a59e0aa 100644
--- a/packages/ui/src/v2/components/badge-v2.css
+++ b/packages/ui/src/v2/components/badge-v2.css
@@ -29,5 +29,5 @@
[data-component="tag"][data-variant="accent"] {
border: 0;
background: var(--v2-background-bg-accent);
- color: var(--v2-text-text-inverse);
+ color: var(--v2-text-text-contrast);
}