Mirror_Repos/anomalyco_opencode
2
0
Fork 0
Code Issues Pull Requests Actions 79 Packages Projects Releases Wiki Activity

feat(desktop): apply left border rail styling to all tool disclosures (#44052)

Browse Source
This commit is contained in:
Luke Parker
2026-08-22 14:23:18 +10:00
committed by GitHub
parent a1d0f43531
commit 87d2488c78
5 changed files with 92 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/session-ui/src/components/basic-tool.css
+18
View File
@@ -256,6 +256,24 @@
}
}
[data-component="collapsible"].tool-collapsible {
> [data-slot="collapsible-content"] {
position: relative;
margin-inline-start: 12px;
padding-inline-start: 16px;
&::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 12px;
width: 0.5px;
background-color: var(--v2-border-border-muted, rgba(0, 0, 0, 0.08));
}
}
}
:root body {
[data-component="task-tool-card"] {
gap: 8px;
packages/session-ui/src/components/basic-tool.stories.tsx
+50 -3
View File
@@ -147,9 +147,6 @@ export const WebSearch = {
}}
>
<div data-component="exa-tool-output">
<div data-slot="exa-tool-rail">
<div data-slot="exa-tool-rail-line" />
</div>
<div data-slot="exa-tool-links">
<For each={visibleLinks()}>
{(url, index) => (
@@ -180,3 +177,53 @@ export const WebSearch = {
)
},
}
export const GatheredContext = {
render: () => (
<BasicTool
icon="bullet-list"
defaultOpen
trigger={{ title: "Used", subtitle: "Shell, Explore, Patch", args: ["4"] }}
>
<div class="flex flex-col gap-1 text-13-regular text-text-base">
<div class="flex items-center gap-2">
<span class="font-medium text-text-base">Shell</span>
<span class="text-text-muted">opencode2 api get /openapi.json</span>
</div>
<div class="flex items-center gap-2">
<span class="font-medium text-text-base">Explore</span>
<span class="text-text-muted">inspect active v2 beta service</span>
</div>
<div class="flex items-center gap-2">
<span class="font-medium text-text-base">Patch</span>
<span class="text-text-muted">packages/session-ui/src/tools</span>
</div>
</div>
</BasicTool>
),
}
export const PatchFileList = {
render: () => (
<BasicTool icon="code-lines" defaultOpen trigger={{ title: "Patch", subtitle: "4 files" }}>
<div class="flex flex-col gap-1.5 text-13-regular text-text-base">
<div class="flex items-center gap-2">
<Icon name="file-tree" size="small" />
<span class="text-text-base">packages/app/src/composer/composer.tsx</span>
</div>
<div class="flex items-center gap-2">
<Icon name="file-tree" size="small" />
<span class="text-text-base">packages/session-ui/src/tools/tool-renderer.tsx</span>
</div>
<div class="flex items-center gap-2">
<Icon name="file-tree" size="small" />
<span class="text-text-base">packages/session-ui/src/components/basic-tool.css</span>
</div>
<div class="flex items-center gap-2">
<Icon name="file-tree" size="small" />
<span class="text-text-base">packages/ui/src/icons/icon/icon.tsx</span>
</div>
</div>
</BasicTool>
),
}
packages/session-ui/src/components/message-part.css
+13 -23
View File
@@ -326,7 +326,7 @@
[data-component="tool-output"] {
white-space: pre;
padding: 0;
margin-bottom: 24px;
margin-bottom: 0px;
height: fit-content;
display: flex;
flex-direction: column;
@@ -570,30 +570,15 @@
[data-component="exa-tool-output"] {
display: flex;
align-items: flex-start;
flex-direction: column;
min-width: 0;
width: 100%;
font-family: var(--font-family-sans);
font-size: 13px;
line-height: 16px;
color: var(--v2-text-text-muted);
}
[data-slot="exa-tool-rail"] {
display: flex;
align-items: center;
align-self: stretch;
flex-shrink: 0;
padding-bottom: 12px;
padding-inline-start: 12px;
padding-inline-end: 16px;
}
[data-slot="exa-tool-rail-line"] {
width: 0.5px;
height: 100%;
background-color: var(--v2-border-border-muted, rgba(0, 0, 0, 0.08));
}
[data-slot="basic-tool-tool-subtitle"].exa-tool-query {
display: block;
max-width: 100%;
@@ -624,7 +609,7 @@
font-family: var(--font-family-sans);
font-size: 13px;
font-weight: var(--font-weight-regular, 440);
line-height: 16px;
line-height: 13px;
letter-spacing: -0.04px;
color: var(--v2-text-text-faint, #808080);
user-select: none;
@@ -683,10 +668,7 @@
}
[data-component="context-tool-group-list"] {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 12px;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
@@ -1244,7 +1226,15 @@
> [data-component="collapsible"] > [data-slot="collapsible-content"] {
border: none;
border-inline-start: none;
margin-inline-start: 0;
padding-inline-start: 0;
padding-bottom: 0;
background: transparent;
&::before {
display: none;
}
}
> [data-component="collapsible"] > [data-slot="collapsible-trigger"][aria-expanded="true"] {
packages/session-ui/src/components/tool-error-card.css
+11
View File
@@ -17,6 +17,17 @@
> [data-component="collapsible"].tool-collapsible {
gap: 0px;
> [data-slot="collapsible-content"] {
border-inline-start: none;
margin-inline-start: 0;
padding-inline-start: 0;
padding-bottom: 0;
&::before {
display: none;
}
}
}
> [data-component="collapsible"].tool-collapsible[data-open="true"] {
packages/session-ui/src/tools/tool-renderer.tsx
-3
View File
@@ -434,9 +434,6 @@ function ExaOutput(props: { output?: string }) {
return (
<Show when={links().length > 0}>
<div data-component="exa-tool-output">
<div data-slot="exa-tool-rail">
<div data-slot="exa-tool-rail-line" />
</div>
<div data-slot="exa-tool-links">
<For each={visibleLinks()}>
{(url, index) => (