diff --git a/packages/opencode/.opencode/package-lock.json b/packages/opencode/.opencode/package-lock.json new file mode 100644 index 0000000000..cd3c011efc --- /dev/null +++ b/packages/opencode/.opencode/package-lock.json @@ -0,0 +1,31 @@ +{ + "name": ".opencode", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "@opencode-ai/plugin": "*" + } + }, + "node_modules/@opencode-ai/plugin": { + "version": "1.2.6", + "license": "MIT", + "dependencies": { + "@opencode-ai/sdk": "1.2.6", + "zod": "4.1.8" + } + }, + "node_modules/@opencode-ai/sdk": { + "version": "1.2.6", + "license": "MIT" + }, + "node_modules/zod": { + "version": "4.1.8", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + } + } +} diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css index 608ca6e0eb..82c133f738 100644 --- a/packages/ui/src/components/collapsible.css +++ b/packages/ui/src/components/collapsible.css @@ -9,7 +9,7 @@ overflow: visible; &.tool-collapsible { - --tool-content-gap: 8px; + --tool-content-gap: 4px; gap: var(--tool-content-gap); } diff --git a/packages/ui/src/components/markdown.css b/packages/ui/src/components/markdown.css index f82723807d..26c9efd475 100644 --- a/packages/ui/src/components/markdown.css +++ b/packages/ui/src/components/markdown.css @@ -6,7 +6,7 @@ color: var(--text-strong); font-family: var(--font-family-sans); font-size: var(--font-size-base); /* 14px */ - line-height: var(--line-height-x-large); + line-height: 160%; /* Spacing for flow */ > *:first-child { @@ -23,11 +23,11 @@ h4, h5, h6 { - font-size: var(--font-size-base); + font-size: 14px; color: var(--text-strong); font-weight: var(--font-weight-medium); - margin-top: 2rem; - margin-bottom: 0.75rem; + margin-top: 0px; + margin-bottom: 24px; line-height: var(--line-height-large); } @@ -40,7 +40,7 @@ /* Paragraphs */ p { - margin-bottom: 1rem; + margin-bottom: 12px; } /* Links */ @@ -58,10 +58,10 @@ /* Lists */ ul, ol { - margin-top: 0.5rem; - margin-bottom: 1rem; + margin-top: 8px; + margin-bottom: 12px; margin-left: 0; - padding-left: 1.5rem; + padding-left: 32px; list-style-position: outside; } @@ -75,7 +75,7 @@ } li { - margin-bottom: 0.5rem; + margin-bottom: 8px; } li > p:first-child { @@ -117,12 +117,12 @@ hr { border: none; height: 0; - margin: 2.5rem 0; + margin: 40px 0; } .shiki { font-size: 13px; - padding: 8px 12px; + padding: 12px; border-radius: 6px; border: 0.5px solid var(--border-weak-base); } @@ -201,8 +201,8 @@ } pre { - margin-top: 2rem; - margin-bottom: 2rem; + margin-top: 12px; + margin-bottom: 32px; overflow: auto; scrollbar-width: none; @@ -229,7 +229,7 @@ table { width: 100%; border-collapse: collapse; - margin: 1.5rem 0; + margin: 24px 0; font-size: var(--font-size-base); display: block; overflow-x: auto; @@ -239,7 +239,7 @@ td { /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */ border-bottom: 1px solid var(--border-weaker-base); - padding: 0.75rem 0.5rem; + padding: 12px; text-align: left; vertical-align: top; } diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index d9893503fb..c84a368922 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -283,9 +283,9 @@ line-height: var(--line-height-normal); [data-component="markdown"] { - margin-top: 24px; + margin-top: 16px; font-style: normal; - font-size: var(--font-size-base); + font-size: 13px; color: var(--text-weak); strong, @@ -556,9 +556,12 @@ [data-component="exa-tool-output"] { width: 100%; - padding-top: 8px; display: flex; flex-direction: column; + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + line-height: var(--line-height-large); + color: var(--text-base); } [data-slot="basic-tool-tool-subtitle"].exa-tool-query { @@ -578,6 +581,8 @@ [data-slot="exa-tool-link"] { display: block; max-width: 100%; + font: inherit; + line-height: inherit; color: var(--text-interactive-base); text-decoration: underline; text-underline-offset: 2px; @@ -636,13 +641,13 @@ } [data-component="context-tool-group-list"] { - padding-top: 6px; + padding-top: 0; padding-right: 0; - padding-bottom: 4px; - padding-left: 13px; + padding-bottom: 0; + padding-left: 12px; display: flex; flex-direction: column; - gap: 8px; + gap: 4px; [data-slot="context-tool-group-item"] { min-width: 0; diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index b01343a01d..54076f3f89 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -26,7 +26,7 @@ align-items: flex-start; align-self: stretch; min-width: 0; - gap: 18px; + gap: 0px; overflow-anchor: none; } @@ -47,6 +47,7 @@ display: flex; align-items: center; gap: 8px; + margin-top: 12px; width: 100%; min-width: 0; color: var(--text-weak); @@ -226,5 +227,5 @@ } [data-slot="session-turn-list"] { - gap: 48px; + gap: 24px; } diff --git a/packages/ui/src/components/timeline-playground.stories.tsx b/packages/ui/src/components/timeline-playground.stories.tsx index e79e97a3ab..98cdf85001 100644 --- a/packages/ui/src/components/timeline-playground.stories.tsx +++ b/packages/ui/src/components/timeline-playground.stories.tsx @@ -568,6 +568,7 @@ const MD = "markdown.css" const MP = "message-part.css" const ST = "session-turn.css" const CL = "collapsible.css" +const BT = "basic-tool.css" /** * Source mapping for a CSS control. @@ -607,10 +608,10 @@ const CSS_CONTROLS: CSSControl[] = [ // --- Timeline spacing --- { key: "turn-gap", - label: "Turn gap", + label: "Above user messages", group: "Timeline Spacing", type: "range", - initial: "48", + initial: "32", selector: '[data-slot="session-turn-list"]', property: "gap", min: "0", @@ -621,10 +622,10 @@ const CSS_CONTROLS: CSSControl[] = [ }, { key: "container-gap", - label: "Container gap", + label: "Below user messages", group: "Timeline Spacing", type: "range", - initial: "18", + initial: "0", selector: '[data-slot="session-turn-message-container"]', property: "gap", min: "0", @@ -1040,12 +1041,40 @@ const CSS_CONTROLS: CSSControl[] = [ }, // --- Tool parts --- + { + key: "tool-subtitle-font-size", + label: "Subtitle font size", + group: "Tool Parts", + type: "range", + initial: "14", + selector: '[data-slot="basic-tool-tool-subtitle"]', + property: "font-size", + min: "10", + max: "22", + step: "1", + unit: "px", + source: { file: BT, anchor: '[data-slot="basic-tool-tool-subtitle"]', prop: "font-size", format: px }, + }, + { + key: "exa-output-font-size", + label: "Search output font size", + group: "Tool Parts", + type: "range", + initial: "14", + selector: '[data-component="exa-tool-output"]', + property: "font-size", + min: "10", + max: "22", + step: "1", + unit: "px", + source: { file: MP, anchor: '[data-component="exa-tool-output"]', prop: "font-size", format: px }, + }, { key: "tool-content-gap", label: "Trigger/content gap", group: "Tool Parts", type: "range", - initial: "8", + initial: "4", selector: '[data-component="collapsible"].tool-collapsible', property: "--tool-content-gap", min: "0", @@ -1059,7 +1088,7 @@ const CSS_CONTROLS: CSSControl[] = [ label: "Explored tool gap", group: "Explored Group", type: "range", - initial: "14", + initial: "4", selector: '[data-component="context-tool-group-list"]', property: "gap", min: "0", diff --git a/session.json b/session.json new file mode 100644 index 0000000000..e69de29bb2