props.variant ?? "default"
-export function DiffChanges(props: { diff: FileDiff | FileDiff[] }) {
const additions = createMemo(() =>
Array.isArray(props.diff)
? props.diff.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
@@ -13,11 +15,107 @@ export function DiffChanges(props: { diff: FileDiff | FileDiff[] }) {
: props.diff.deletions,
)
const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
+
+ const countLines = (text: string) => {
+ if (!text) return 0
+ return text.split("\n").length
+ }
+
+ const totalBeforeLines = createMemo(() => {
+ if (!Array.isArray(props.diff)) return countLines(props.diff.before || "")
+ return props.diff.reduce((acc, diff) => acc + countLines(diff.before || ""), 0)
+ })
+
+ const blockCounts = createMemo(() => {
+ const TOTAL_BLOCKS = 5
+
+ const adds = additions() ?? 0
+ const dels = deletions() ?? 0
+
+ if (adds === 0 && dels === 0) {
+ return { added: 0, deleted: 0, neutral: TOTAL_BLOCKS }
+ }
+
+ const total = adds + dels
+
+ if (total < 5) {
+ const added = adds > 0 ? 1 : 0
+ const deleted = dels > 0 ? 1 : 0
+ const neutral = TOTAL_BLOCKS - added - deleted
+ return { added, deleted, neutral }
+ }
+
+ const ratio = adds > dels ? adds / dels : dels / adds
+ let BLOCKS_FOR_COLORS = TOTAL_BLOCKS
+
+ if (total < 20) {
+ BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
+ } else if (ratio < 4) {
+ BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
+ }
+
+ const percentAdded = adds / total
+ const percentDeleted = dels / total
+
+ const added_raw = percentAdded * BLOCKS_FOR_COLORS
+ const deleted_raw = percentDeleted * BLOCKS_FOR_COLORS
+
+ let added = adds > 0 ? Math.max(1, Math.round(added_raw)) : 0
+ let deleted = dels > 0 ? Math.max(1, Math.round(deleted_raw)) : 0
+
+ // Cap bars based on actual change magnitude
+ if (adds > 0 && adds <= 5) added = Math.min(added, 1)
+ if (adds > 5 && adds <= 10) added = Math.min(added, 2)
+ if (dels > 0 && dels <= 5) deleted = Math.min(deleted, 1)
+ if (dels > 5 && dels <= 10) deleted = Math.min(deleted, 2)
+
+ let total_allocated = added + deleted
+ if (total_allocated > BLOCKS_FOR_COLORS) {
+ if (added_raw > deleted_raw) {
+ added = BLOCKS_FOR_COLORS - deleted
+ } else {
+ deleted = BLOCKS_FOR_COLORS - added
+ }
+ total_allocated = added + deleted
+ }
+
+ const neutral = Math.max(0, TOTAL_BLOCKS - total_allocated)
+
+ return { added, deleted, neutral }
+ })
+
+ const ADD_COLOR = "var(--icon-diff-add-base)"
+ const DELETE_COLOR = "var(--icon-diff-delete-base)"
+ const NEUTRAL_COLOR = "var(--icon-weak-base)"
+
+ const visibleBlocks = createMemo(() => {
+ const counts = blockCounts()
+ const blocks = [
+ ...Array(counts.added).fill(ADD_COLOR),
+ ...Array(counts.deleted).fill(DELETE_COLOR),
+ ...Array(counts.neutral).fill(NEUTRAL_COLOR),
+ ]
+ return blocks.slice(0, 5)
+ })
+
return (
-
0}>
-
-
{`+${additions()}`}
-
{`-${deletions()}`}
+
0 : true}>
+
+
+
+
+
+
+ {(color, i) =>
+
+
+
+
+ {`+${additions()}`}
+ {`-${deletions()}`}
+
+
)
--
cgit v1.2.3
From dc6e54503cb400ea2533740c9a92d09c8a50d077 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 30 Oct 2025 13:49:29 -0500
Subject: wip: desktop work
---
bun.lock | 4 +
packages/desktop/src/components/code.tsx | 2 +-
packages/desktop/src/components/markdown.tsx | 23 --
packages/desktop/src/components/message.tsx | 304 --------------
packages/desktop/src/context/local.tsx | 2 -
packages/desktop/src/context/marked.tsx | 30 --
packages/desktop/src/context/shiki.tsx | 573 --------------------------
packages/desktop/src/index.tsx | 4 +-
packages/desktop/src/pages/index.tsx | 4 +-
packages/ui/package.json | 4 +
packages/ui/src/components/basic-tool.css | 76 ++++
packages/ui/src/components/basic-tool.tsx | 95 +++++
packages/ui/src/components/index.ts | 8 +-
packages/ui/src/components/markdown.css | 24 ++
packages/ui/src/components/markdown.tsx | 36 ++
packages/ui/src/components/message-part.css | 107 +++++
packages/ui/src/components/message-part.tsx | 365 ++++++++++++++++-
packages/ui/src/components/tool-display.css | 76 ----
packages/ui/src/components/tool-display.tsx | 95 -----
packages/ui/src/components/tool-registry.tsx | 33 --
packages/ui/src/context/helper.tsx | 25 ++
packages/ui/src/context/marked.tsx | 30 ++
packages/ui/src/context/shiki.tsx | 577 +++++++++++++++++++++++++++
packages/ui/src/styles/index.css | 3 +-
24 files changed, 1354 insertions(+), 1146 deletions(-)
delete mode 100644 packages/desktop/src/components/markdown.tsx
delete mode 100644 packages/desktop/src/components/message.tsx
delete mode 100644 packages/desktop/src/context/marked.tsx
delete mode 100644 packages/desktop/src/context/shiki.tsx
create mode 100644 packages/ui/src/components/basic-tool.css
create mode 100644 packages/ui/src/components/basic-tool.tsx
create mode 100644 packages/ui/src/components/markdown.css
create mode 100644 packages/ui/src/components/markdown.tsx
delete mode 100644 packages/ui/src/components/tool-display.css
delete mode 100644 packages/ui/src/components/tool-display.tsx
delete mode 100644 packages/ui/src/components/tool-registry.tsx
create mode 100644 packages/ui/src/context/helper.tsx
create mode 100644 packages/ui/src/context/marked.tsx
create mode 100644 packages/ui/src/context/shiki.tsx
(limited to 'packages/ui/src')
diff --git a/bun.lock b/bun.lock
index 3dbe4eac2..977ce9de7 100644
--- a/bun.lock
+++ b/bun.lock
@@ -281,10 +281,14 @@
"@kobalte/core": "catalog:",
"@opencode-ai/sdk": "workspace:*",
"@pierre/precision-diffs": "catalog:",
+ "@shikijs/transformers": "3.9.2",
"@solidjs/meta": "catalog:",
"fuzzysort": "catalog:",
"luxon": "catalog:",
+ "marked": "16.2.0",
+ "marked-shiki": "1.2.1",
"remeda": "catalog:",
+ "shiki": "3.9.2",
"solid-js": "catalog:",
"solid-list": "catalog:",
"virtua": "catalog:",
diff --git a/packages/desktop/src/components/code.tsx b/packages/desktop/src/components/code.tsx
index 11518e73a..c214fd5e6 100644
--- a/packages/desktop/src/components/code.tsx
+++ b/packages/desktop/src/components/code.tsx
@@ -2,7 +2,7 @@ import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "s
import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js"
import { useLocal, type TextSelection } from "@/context/local"
import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils"
-import { useShiki } from "@/context/shiki"
+import { useShiki } from "@opencode-ai/ui"
type DefinedSelection = Exclude
diff --git a/packages/desktop/src/components/markdown.tsx b/packages/desktop/src/components/markdown.tsx
deleted file mode 100644
index e0f185f5f..000000000
--- a/packages/desktop/src/components/markdown.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useMarked } from "@/context/marked"
-import { createResource } from "solid-js"
-
-function strip(text: string): string {
- const wrappedRe = /^\s*<([A-Za-z]\w*)>\s*([\s\S]*?)\s*<\/\1>\s*$/
- const match = text.match(wrappedRe)
- return match ? match[2] : text
-}
-export function Markdown(props: { text: string; class?: string }) {
- const marked = useMarked()
- const [html] = createResource(
- () => strip(props.text),
- async (markdown) => {
- return marked.parse(markdown)
- },
- )
- return (
-
- )
-}
diff --git a/packages/desktop/src/components/message.tsx b/packages/desktop/src/components/message.tsx
deleted file mode 100644
index 70d03591a..000000000
--- a/packages/desktop/src/components/message.tsx
+++ /dev/null
@@ -1,304 +0,0 @@
-import type { Part, TextPart, ToolPart, Message } from "@opencode-ai/sdk"
-import { createMemo, For, Match, Show, Switch } from "solid-js"
-import { Dynamic } from "solid-js/web"
-import { Markdown } from "./markdown"
-import { Card, Checkbox, Diff, Icon } from "@opencode-ai/ui"
-import { Message as MessageDisplay, registerPartComponent } from "@opencode-ai/ui"
-import { BasicTool, GenericTool, ToolRegistry, DiffChanges } from "@opencode-ai/ui"
-import { getDirectory, getFilename } from "@/utils"
-
-export function Message(props: { message: Message; parts: Part[] }) {
- return
-
- )
-})
-
-registerPartComponent("reasoning", function ReasoningPartDisplay(props) {
- const part = props.part as any
- return (
-
-
- )
-})
-
-registerPartComponent("tool", function ToolPartDisplay(props) {
- const part = props.part as ToolPart
- const component = createMemo(() => {
- const render = ToolRegistry.render(part.tool) ?? GenericTool
- const metadata = part.state.status === "pending" ? {} : (part.state.metadata ?? {})
- const input = part.state.status === "completed" ? part.state.input : {}
-
- return (
-
-
- {(error) => {
- const cleaned = error().replace("Error: ", "")
- const [title, ...rest] = cleaned.split(": ")
- return (
-
-
-
-
-
-
-
{title}
-
{rest.join(": ")}
-
- {cleaned}
-
-
- )
- }}
-
-
-
-
- )
- })
-
- return {component()}
-})
-
-ToolRegistry.register({
- name: "read",
- render(props) {
- return (
-
-
- {props.output}
-
-
- )
- },
-})
-
-ToolRegistry.register({
- name: "glob",
- render(props) {
- return (
- {props.output}
-
- )
- },
-})
-
-ToolRegistry.register({
- name: "grep",
- render(props) {
- const args = []
- if (props.input.pattern) args.push("pattern=" + props.input.pattern)
- if (props.input.include) args.push("include=" + props.input.include)
- return (
-
-
- {props.output}
-
-
- )
- },
-})
-
-ToolRegistry.register({
- name: "webfetch",
- render(props) {
- return (
-
-