aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-24 11:14:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

big format

Browse Source
This commit is contained in:
Dax Raad
2025-11-06 13:03:02 -05:00
parent 8729edc5e0
commit 1ea3a8eb9b
183 changed files with 2629 additions and 2497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/config.mjs
View File

@@ -2,7 +2,8 @@ const stage = process.env.SST_STAGE || "dev"
export default {
url: stage === "production" ? "https://opencode.ai" : `https://${stage}.opencode.ai`,
console: stage === "production" ? "https://opencode.ai/auth" : `https://${stage}.opencode.ai/auth`,
console:
stage === "production" ? "https://opencode.ai/auth" : `https://${stage}.opencode.ai/auth`,
email: "contact@anoma.ly",
socialCard: "https://social-cards.sst.dev",
github: "https://github.com/sst/opencode",

46
packages/web/src/components/Share.tsx
View File

@@ -1,4 +1,14 @@
import { For, Show, onMount, Suspense, onCleanup, createMemo, createSignal, SuspenseList, createEffect } from "solid-js"
import {
For,
Show,
onMount,
Suspense,
onCleanup,
createMemo,
createSignal,
SuspenseList,
createEffect,
} from "solid-js"
import { DateTime } from "luxon"
import { createStore, reconcile, unwrap } from "solid-js/store"
import { IconArrowDown } from "./icons"
@@ -66,8 +76,13 @@ export default function Share(props: { id: string; api: string; info: Session.In
},
messages: {},
})
const messages = createMemo(() => Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)))
const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>(["disconnected", "Disconnected"])
const messages = createMemo(() =>
Object.values(store.messages).toSorted((a, b) => a.id?.localeCompare(b.id)),
)
const [connectionStatus, setConnectionStatus] = createSignal<[Status, string?]>([
"disconnected",
"Disconnected",
])
createEffect(() => {
console.log(unwrap(store))
})
@@ -330,7 +345,9 @@ export default function Share(props: { id: string; api: string; info: Session.In
</ul>
<div
data-component="header-time"
title={DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
title={DateTime.fromMillis(data().created || 0).toLocaleString(
DateTime.DATETIME_FULL_WITH_SECONDS,
)}
>
{DateTime.fromMillis(data().created || 0).toLocaleString(DateTime.DATETIME_MED)}
</div>
@@ -352,7 +369,10 @@ export default function Share(props: { id: string; api: string; info: Session.In
if (x.type === "text" && x.synthetic === true) return false
if (x.type === "tool" && x.tool === "todoread") return false
if (x.type === "text" && !x.text) return false
if (x.type === "tool" && (x.state.status === "pending" || x.state.status === "running"))
if (
x.type === "tool" &&
(x.state.status === "pending" || x.state.status === "running")
)
return false
return true
}),
@@ -364,7 +384,8 @@ export default function Share(props: { id: string; api: string; info: Session.In
{(part, partIndex) => {
const last = createMemo(
() =>
data().messages.length === msgIndex() + 1 && filteredParts().length === partIndex() + 1,
data().messages.length === msgIndex() + 1 &&
filteredParts().length === partIndex() + 1,
)
onMount(() => {
@@ -381,7 +402,9 @@ export default function Share(props: { id: string; api: string; info: Session.In
}
})
return <Part last={last()} part={part} index={partIndex()} message={msg} />
return (
<Part last={last()} part={part} index={partIndex()} message={msg} />
)
}}
</For>
</Suspense>
@@ -406,7 +429,11 @@ export default function Share(props: { id: string; api: string; info: Session.In
</li>
<li>
<span data-element-label>Input Tokens</span>
{data().tokens.input ? <span>{data().tokens.input}</span> : <span data-placeholder>&mdash;</span>}
{data().tokens.input ? (
<span>{data().tokens.input}</span>
) : (
<span data-placeholder>&mdash;</span>
)}
</li>
<li>
<span data-element-label>Output Tokens</span>
@@ -560,7 +587,8 @@ export function fromV1(v1: Message.Info): MessageWithParts {
}
}
const { title, time, ...metadata } = v1.metadata.tool[part.toolInvocation.toolCallId]
const { title, time, ...metadata } =
v1.metadata.tool[part.toolInvocation.toolCallId]
if (part.toolInvocation.state === "call") {
return {
status: "running",

9
packages/web/src/components/icons/index.tsx
View File

@@ -4418,7 +4418,14 @@ export function IconMultiSelect(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
}
export function IconSettings(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
<svg {...props} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1256_16163)">
<path
fill-rule="evenodd"

7
packages/web/src/components/share/common.tsx
View File

@@ -10,7 +10,12 @@ export function AnchorIcon(props: AnchorProps) {
const [copied, setCopied] = createSignal(false)
return (
<div {...rest} data-element-anchor title="Link to this message" data-status={copied() ? "copied" : ""}>
<div
{...rest}
data-element-anchor
title="Link to this message"
data-status={copied() ? "copied" : ""}
>
<a
href={`#${local.id}`}
onClick={(e) => {

6
packages/web/src/components/share/content-code.tsx
View File

@@ -26,7 +26,11 @@ export function ContentCode(props: Props) {
)
return (
<Suspense>
<div innerHTML={html()} class={style.root} data-flush={props.flush === true ? true : undefined} />
<div
innerHTML={html()}
class={style.root}
data-flush={props.flush === true ? true : undefined}
/>
</Suspense>
)
}

20
packages/web/src/components/share/content-diff.tsx
View File

@@ -124,7 +124,9 @@ export function ContentDiff(props: Props) {
// Collect consecutive modified/removed/added rows
while (
i < currentRows.length &&
(currentRows[i].type === "modified" || currentRows[i].type === "removed" || currentRows[i].type === "added")
(currentRows[i].type === "modified" ||
currentRows[i].type === "removed" ||
currentRows[i].type === "added")
) {
const row = currentRows[i]
if (row.left && (row.type === "removed" || row.type === "modified")) {
@@ -162,10 +164,16 @@ export function ContentDiff(props: Props) {
<div data-component="desktop">
{rows().map((r) => (
<div data-component="diff-row" data-type={r.type}>
<div data-slot="before" data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}>
<div
data-slot="before"
data-diff-type={r.type === "removed" || r.type === "modified" ? "removed" : ""}
>
<ContentCode code={r.left} flush lang={props.lang} />
</div>
<div data-slot="after" data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}>
<div
data-slot="after"
data-diff-type={r.type === "added" || r.type === "modified" ? "added" : ""}
>
<ContentCode code={r.right} lang={props.lang} flush />
</div>
</div>
@@ -176,7 +184,11 @@ export function ContentDiff(props: Props) {
{mobileRows().map((block) => (
<div data-component="diff-block" data-type={block.type}>
{block.lines.map((line) => (
<div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
<div
data-diff-type={
block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""
}
>
<ContentCode code={line} lang={props.lang} flush />
</div>
))}

6
packages/web/src/components/share/copy-button.tsx
View File

@@ -21,7 +21,11 @@ export function CopyButton(props: CopyButtonProps) {
return (
<div data-component="copy-button" class={styles.root}>
<button type="button" onClick={handleCopyClick} data-copied={copied() ? true : undefined}>
{copied() ? <IconCheckCircle width={16} height={16} /> : <IconClipboard width={16} height={16} />}
{copied() ? (
<IconCheckCircle width={16} height={16} />
) : (
<IconClipboard width={16} height={16} />
)}
</button>
</div>
)

115
packages/web/src/components/share/part.tsx
View File

@@ -1,6 +1,15 @@
import map from "lang-map"
import { DateTime } from "luxon"
import { For, Show, Match, Switch, type JSX, createMemo, createSignal, type ParentProps } from "solid-js"
import {
For,
Show,
Match,
Switch,
type JSX,
createMemo,
createSignal,
type ParentProps,
} from "solid-js"
import {
IconHashtag,
IconSparkles,
@@ -19,7 +28,14 @@ import {
IconMagnifyingGlass,
IconDocumentMagnifyingGlass,
} from "../icons"
import { IconMeta, IconRobot, IconOpenAI, IconGemini, IconAnthropic, IconBrain } from "../icons/custom"
import {
IconMeta,
IconRobot,
IconOpenAI,
IconGemini,
IconAnthropic,
IconBrain,
} from "../icons/custom"
import { ContentCode } from "./content-code"
import { ContentDiff } from "./content-diff"
import { ContentText } from "./content-text"
@@ -79,7 +95,11 @@ export function Part(props: PartProps) {
<IconPaperClip width={18} height={18} />
</Match>
<Match
when={props.part.type === "step-start" && props.message.role === "assistant" && props.message.modelID}
when={
props.part.type === "step-start" &&
props.message.role === "assistant" &&
props.message.modelID
}
>
{(model) => <ProviderIcon model={model()} size={18} />}
</Match>
@@ -147,7 +167,9 @@ export function Part(props: PartProps) {
DateTime.DATETIME_FULL_WITH_SECONDS,
)}
>
{DateTime.fromMillis(props.message.time.completed).toLocaleString(DateTime.DATETIME_MED)}
{DateTime.fromMillis(props.message.time.completed).toLocaleString(
DateTime.DATETIME_MED,
)}
</Footer>
)}
</div>
@@ -343,7 +365,10 @@ function getShikiLang(filename: string) {
return type ? (overrides[type] ?? type) : "plaintext"
}
function getDiagnostics(diagnosticsByFile: Record<string, Diagnostic[]>, currentFile: string): JSX.Element[] {
function getDiagnostics(
diagnosticsByFile: Record<string, Diagnostic[]>,
currentFile: string,
): JSX.Element[] {
const result: JSX.Element[] = []
if (diagnosticsByFile === undefined || diagnosticsByFile[currentFile] === undefined) return result
@@ -397,7 +422,9 @@ export function TodoWriteTool(props: ToolProps) {
completed: 2,
}
const todos = createMemo(() =>
((props.state.input?.todos ?? []) as Todo[]).slice().sort((a, b) => priority[a.status] - priority[b.status]),
((props.state.input?.todos ?? []) as Todo[])
.slice()
.sort((a, b) => priority[a.status] - priority[b.status]),
)
const starting = () => todos().every((t: Todo) => t.status === "pending")
const finished = () => todos().every((t: Todo) => t.status === "completed")
@@ -439,13 +466,23 @@ export function GrepTool(props: ToolProps) {
<Switch>
<Match when={props.state.metadata?.matches && props.state.metadata?.matches > 0}>
<ResultsButton
showCopy={props.state.metadata?.matches === 1 ? "1 match" : `${props.state.metadata?.matches} matches`}
showCopy={
props.state.metadata?.matches === 1
? "1 match"
: `${props.state.metadata?.matches} matches`
}
>
<ContentText expand compact text={props.state.output} />
</ResultsButton>
</Match>
<Match when={props.state.output}>
<ContentText expand compact text={props.state.output} data-size="sm" data-color="dimmed" />
<ContentText
expand
compact
text={props.state.output}
data-size="sm"
data-color="dimmed"
/>
</Match>
</Switch>
</div>
@@ -505,7 +542,9 @@ export function WebFetchTool(props: ToolProps) {
}
export function ReadTool(props: ToolProps) {
const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd))
const filePath = createMemo(() =>
stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd),
)
return (
<>
@@ -522,7 +561,10 @@ export function ReadTool(props: ToolProps) {
</Match>
<Match when={typeof props.state.metadata?.preview === "string"}>
<ResultsButton showCopy="Show preview" hideCopy="Hide preview">
<ContentCode lang={getShikiLang(filePath() || "")} code={props.state.metadata?.preview} />
<ContentCode
lang={getShikiLang(filePath() || "")}
code={props.state.metadata?.preview}
/>
</ResultsButton>
</Match>
<Match when={typeof props.state.metadata?.preview !== "string" && props.state.output}>
@@ -537,8 +579,12 @@ export function ReadTool(props: ToolProps) {
}
export function WriteTool(props: ToolProps) {
const filePath = createMemo(() => stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd))
const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath))
const filePath = createMemo(() =>
stripWorkingDirectory(props.state.input?.filePath, props.message.path.cwd),
)
const diagnostics = createMemo(() =>
getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath),
)
return (
<>
@@ -558,7 +604,10 @@ export function WriteTool(props: ToolProps) {
</Match>
<Match when={props.state.input?.content}>
<ResultsButton showCopy="Show contents" hideCopy="Hide contents">
<ContentCode lang={getShikiLang(filePath() || "")} code={props.state.input?.content} />
<ContentCode
lang={getShikiLang(filePath() || "")}
code={props.state.input?.content}
/>
</ResultsButton>
</Match>
</Switch>
@@ -568,8 +617,12 @@ export function WriteTool(props: ToolProps) {
}
export function EditTool(props: ToolProps) {
const filePath = createMemo(() => stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd))
const diagnostics = createMemo(() => getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath))
const filePath = createMemo(() =>
stripWorkingDirectory(props.state.input.filePath, props.message.path.cwd),
)
const diagnostics = createMemo(() =>
getDiagnostics(props.state.metadata?.diagnostics, props.state.input.filePath),
)
return (
<>
@@ -586,7 +639,10 @@ export function EditTool(props: ToolProps) {
</Match>
<Match when={props.state.metadata?.diff}>
<div data-component="diff">
<ContentDiff diff={props.state.metadata?.diff} lang={getShikiLang(filePath() || "")} />
<ContentDiff
diff={props.state.metadata?.diff}
lang={getShikiLang(filePath() || "")}
/>
</div>
</Match>
</Switch>
@@ -619,7 +675,11 @@ export function GlobTool(props: ToolProps) {
<Match when={props.state.metadata?.count && props.state.metadata?.count > 0}>
<div data-component="tool-result">
<ResultsButton
showCopy={props.state.metadata?.count === 1 ? "1 result" : `${props.state.metadata?.count} results`}
showCopy={
props.state.metadata?.count === 1
? "1 result"
: `${props.state.metadata?.count} results`
}
>
<ContentText expand compact text={props.state.output} />
</ResultsButton>
@@ -642,7 +702,12 @@ function ResultsButton(props: ResultsButtonProps) {
return (
<>
<button type="button" data-component="button-text" data-more onClick={() => setShow((e) => !e)}>
<button
type="button"
data-component="button-text"
data-more
onClick={() => setShow((e) => !e)}
>
<span>{show() ? props.hideCopy || "Hide results" : props.showCopy || "Show results"}</span>
<span data-slot="icon">
<Show when={show()} fallback={<IconChevronRight width={11} height={11} />}>
@@ -668,7 +733,11 @@ function Footer(props: ParentProps<{ title: string }>) {
}
function ToolFooter(props: { time: number }) {
return props.time > MIN_DURATION && <Footer title={`${props.time}ms`}>{formatDuration(props.time)}</Footer>
return (
props.time > MIN_DURATION && (
<Footer title={`${props.time}ms`}>{formatDuration(props.time)}</Footer>
)
)
}
function TaskTool(props: ToolProps) {
@@ -709,7 +778,13 @@ export function FallbackTool(props: ToolProps) {
<Match when={props.state.output}>
<div data-component="tool-result">
<ResultsButton>
<ContentText expand compact text={props.state.output} data-size="sm" data-color="dimmed" />
<ContentText
expand
compact
text={props.state.output}
data-size="sm"
data-color="dimmed"
/>
</ResultsButton>
</div>
</Match>

3
packages/web/src/content/docs/1-0.mdx
View File

@@ -16,13 +16,14 @@ The new TUI works like the old one since it connects to the same opencode server
You should not be autoupgraded to 1.0 if you are currently using a previous
version. However some older versions of OpenCode always grab latest.
To upgrade manually, run
```bash
$ opencode upgrade 1.0.0
```
To downgrade back to 0.x, run
```bash
$ opencode upgrade 0.15.31
```

24
packages/web/src/content/docs/index.mdx
View File

@@ -42,26 +42,10 @@ You can also install it with the following commands:
- **Using Node.js**
<Tabs>
<TabItem label="npm">
```bash
npm install -g opencode-ai
```
</TabItem>
<TabItem label="Bun">
```bash
bun install -g opencode-ai
```
</TabItem>
<TabItem label="pnpm">
```bash
pnpm install -g opencode-ai
```
</TabItem>
<TabItem label="Yarn">
```bash
yarn global add opencode-ai
```
</TabItem>
<TabItem label="npm">```bash npm install -g opencode-ai ```</TabItem>
<TabItem label="Bun">```bash bun install -g opencode-ai ```</TabItem>
<TabItem label="pnpm">```bash pnpm install -g opencode-ai ```</TabItem>
<TabItem label="Yarn">```bash yarn global add opencode-ai ```</TabItem>
</Tabs>
- **Using Homebrew on macOS and Linux**

1
packages/web/src/content/docs/permissions.mdx
View File

@@ -187,4 +187,3 @@ permission:
Only analyze code and suggest changes.
```

6
packages/web/src/content/docs/rules.mdx
View File

@@ -107,7 +107,11 @@ The recommended approach is to use the `instructions` field in `opencode.json`:
```json title="opencode.json"
{
"$schema": "https://opencode.ai/config.json",
"instructions": ["docs/development-standards.md", "test/testing-guidelines.md", "packages/*/AGENTS.md"]
"instructions": [
"docs/development-standards.md",
"test/testing-guidelines.md",
"packages/*/AGENTS.md"
]
}
```

2
packages/web/src/content/docs/troubleshooting.mdx
View File

@@ -90,8 +90,8 @@ If you encounter `ProviderModelNotFoundError` you are most likely incorrectly
referencing a model somewhere.
Models should be referenced like so: `<providerId>/<modelId>`
Examples:
- `openai/gpt-4.1`
- `openrouter/google/gemini-2.5-flash`
- `opencode/kimi-k2`

29
packages/web/src/styles/custom.css
View File

@@ -30,8 +30,6 @@
--sl-color-divider: var(--sl-color-gray-5);
}
body {
color: var(--color-text) !important;
font-size: 14px !important;
@@ -60,7 +58,6 @@ body {
--color-border-weak: hsl(0, 4%, 23%);
--color-icon: hsl(10, 3%, 43%);
}
}
@@ -145,7 +142,7 @@ a[aria-current="page"] {
font-weight: 600 !important;
}
ul.top-level a[aria-current="page"] > span {
ul.top-level a[aria-current="page"] > span {
color: var(--color-text-strong) !important;
}
@@ -163,7 +160,6 @@ ul.top-level a[aria-current="page"] > span {
font-weight: 600 !important;
}
.top-level li a {
border-radius: 0;
width: 100%;
@@ -221,13 +217,16 @@ site-search > button span {
}
}
site-search > button > kbd {
font-size: 14px !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: var(--color-text-strong) !important;
}
@@ -263,7 +262,8 @@ strong {
font-weight: 500 !important;
}
ul, ol {
ul,
ol {
list-style: none !important;
padding: 0 !important;
}
@@ -280,7 +280,8 @@ ul, ol {
color: var(--color-text-strong) !important;
}
body > .page > header, :root[data-has-sidebar] body > .page > header {
body > .page > header,
:root[data-has-sidebar] body > .page > header {
background: var(--color-background) !important;
padding: 24px !important;
}
@@ -303,7 +304,6 @@ body > .page > header, :root[data-has-sidebar] body > .page > header {
max-width: 100% !important;
}
nav.sidebar .sl-container ul li a,
div.right-sidebar .sl-container ul li a {
padding: 4px 24px !important;
@@ -317,7 +317,7 @@ div.right-sidebar .sl-container ul li a:hover {
background: var(--color-background-weak);
@media (prefers-color-scheme: dark) {
background: var(--color-background-weak)
background: var(--color-background-weak);
}
}
@@ -326,14 +326,12 @@ div.right-sidebar .sl-container ul li ul li {
padding: 4px 12px 0 12px !important;
}
nav.sidebar .sl-container ul li a[aria-current="true"],
div.right-sidebar .sl-container ul li a[aria-current="true"] {
color: var(--color-text-strong) !important;
opacity: 100%;
}
h2#starlight__on-this-page {
font-size: 14px !important;
color: var(--color-text-strong) !important;
@@ -375,7 +373,6 @@ nav.sidebar ul.top-level > li > details > summary .group-label > span {
.expressive-code {
margin: 0.75rem 0 3rem 0 !important;
border-radius: 6px;
}
.expressive-code figure {
@@ -386,8 +383,6 @@ nav.sidebar ul.top-level > li > details > summary .group-label > span {
box-shadow: none;
}
@media (prefers-color-scheme: dark) {
.shiki,
.shiki span {

2
packages/web/sst-env.d.ts vendored
View File

@@ -6,4 +6,4 @@
/// <reference path="../../sst-env.d.ts" />
import "sst"
export {}
export {}