monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(app): add provider descriptions to settings

Browse Source
This commit is contained in:
David Hill
2026-01-26 17:29:15 +00:00
parent c551f7e47b
commit 0f4a10f4a3
2 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/app/src/components/settings-providers.tsx
View File

@@ -84,10 +84,10 @@ export const SettingsProviders: Component = () => {
> >
<For each={connected()}> <For each={connected()}>
{(item) => ( {(item) => (
<div class="group flex items-center justify-between gap-4 h-14 border-b border-border-weak-base last:border-none"> <div class="group flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none">
<div class="flex items-center gap-3 min-w-0"> <div class="flex items-center gap-3 min-w-0">
<ProviderIcon id={item.id as IconName} class="size-5 shrink-0 icon-strong-base" /> <ProviderIcon id={item.id as IconName} class="size-5 shrink-0 icon-strong-base" />
<span class="text-14-regular text-text-strong truncate">{item.name}</span> <span class="text-14-medium text-text-strong truncate">{item.name}</span>
<Tag>{type(item)}</Tag> <Tag>{type(item)}</Tag>
</div> </div>
<Show <Show
@@ -114,21 +114,44 @@ export const SettingsProviders: Component = () => {
<div class="bg-surface-raised-base px-4 rounded-lg"> <div class="bg-surface-raised-base px-4 rounded-lg">
<For each={popular()}> <For each={popular()}>
{(item) => ( {(item) => (
<div class="flex items-center justify-between gap-4 h-14 border-b border-border-weak-base last:border-none"> <div class="flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none">
<div class="flex items-center gap-x-3 min-w-0"> <div class="flex flex-col min-w-0">
<ProviderIcon id={item.id as IconName} class="size-5 shrink-0 icon-strong-base" /> <div class="flex items-center gap-x-3">
<span class="text-14-regular text-text-strong">{item.name}</span> <ProviderIcon id={item.id as IconName} class="size-5 shrink-0 icon-strong-base" />
<span class="text-14-medium text-text-strong">{item.name}</span>
<Show when={item.id === "opencode"}>
<Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
</Show>
</div>
<Show when={item.id === "opencode"}> <Show when={item.id === "opencode"}>
<Tag>{language.t("dialog.provider.tag.recommended")}</Tag> <span class="text-12-regular text-text-weak pl-8">
{language.t("dialog.provider.opencode.note")}
</span>
</Show> </Show>
<Show when={item.id === "anthropic"}> <Show when={item.id === "anthropic"}>
<div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div> <span class="text-12-regular text-text-weak pl-8">
</Show> {language.t("dialog.provider.anthropic.note")}
<Show when={item.id === "openai"}> </span>
<div class="text-14-regular text-text-weak">{language.t("dialog.provider.openai.note")}</div>
</Show> </Show>
<Show when={item.id.startsWith("github-copilot")}> <Show when={item.id.startsWith("github-copilot")}>
<div class="text-14-regular text-text-weak">{language.t("dialog.provider.copilot.note")}</div> <span class="text-12-regular text-text-weak pl-8">
{language.t("dialog.provider.copilot.note")}
</span>
</Show>
<Show when={item.id === "openai"}>
<span class="text-12-regular text-text-weak pl-8">
{language.t("dialog.provider.openai.note")}
</span>
</Show>
<Show when={item.id === "google"}>
<span class="text-12-regular text-text-weak pl-8">
{language.t("dialog.provider.google.note")}
</span>
</Show>
<Show when={item.id === "openrouter"}>
<span class="text-12-regular text-text-weak pl-8">
{language.t("dialog.provider.openrouter.note")}
</span>
</Show> </Show>
</div> </div>
<Button <Button

9
packages/app/src/i18n/en.ts
View File

@@ -91,9 +91,12 @@ export const dict = {
"dialog.provider.group.popular": "Popular", "dialog.provider.group.popular": "Popular",
"dialog.provider.group.other": "Other", "dialog.provider.group.other": "Other",
"dialog.provider.tag.recommended": "Recommended", "dialog.provider.tag.recommended": "Recommended",
"dialog.provider.anthropic.note": "Connect with Claude Pro/Max or API key", "dialog.provider.opencode.note": "Curated models including Claude, GPT, Gemini and more",
"dialog.provider.openai.note": "Connect with ChatGPT Pro/Plus or API key", "dialog.provider.anthropic.note": "Direct access to Claude models, including Pro and Max",
"dialog.provider.copilot.note": "Connect with Copilot or API key", "dialog.provider.copilot.note": "Claude models for coding assistance",
"dialog.provider.openai.note": "GPT models for fast, capable general AI tasks",
"dialog.provider.google.note": "Gemini models for fast, structured responses",
"dialog.provider.openrouter.note": "Access all supported models from one provider",
"dialog.model.select.title": "Select model", "dialog.model.select.title": "Select model",
"dialog.model.search.placeholder": "Search models", "dialog.model.search.placeholder": "Search models",