open-swe/ui
Caroline di Vittorio 5515fff44c
fix: distinguish agent code/shell blocks from user message bubbles (#1497)
* fix: distinguish agent code/shell blocks from user message bubbles

Code blocks and shell command output shared the same accent bubble
background as user message bubbles, making them hard to tell apart at
full width. Give them a distinct neutral gray background plus a subtle
border.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>

* fix: apply neutral code bubble to all agent output cards + add second accent

Extend the neutral code-bubble background to the remaining agent output
cards (files-changed card, reply preview, edited-file diff, todo list,
streaming-turn cards) so none of them share the user message bubble
background. Introduce a violet --ui-accent-2 used on code/shell header
labels so the blocks pop.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>

---------

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
2026-06-11 09:44:10 -07:00
..
assets feat: restructure Open SWE Review tab + wire create_prs (#1319) 2026-05-21 09:17:07 -07:00
public fix: tidy agents home + mobile logo + PWA dev/icon issues (#1419) 2026-06-04 16:47:35 -07:00
src fix: distinguish agent code/shell blocks from user message bubbles (#1497) 2026-06-11 09:44:10 -07:00
.cta.json feat: open-swe dashboard for per-user profile config (#1302) 2026-05-15 11:23:53 -07:00
.gitignore feat: add right-click open trace context menu for threads (#1490) 2026-06-10 15:40:43 -07:00
.prettierignore feat: open-swe dashboard for per-user profile config (#1302) 2026-05-15 11:23:53 -07:00
.prettierrc feat: open-swe dashboard for per-user profile config (#1302) 2026-05-15 11:23:53 -07:00
bun.lock feat: add pierre file tree to full-screen git panel (#1487) 2026-06-10 15:13:12 -07:00
components.json feat: open-swe dashboard for per-user profile config (#1302) 2026-05-15 11:23:53 -07:00
eslint.config.js feat: open-swe dashboard for per-user profile config (#1302) 2026-05-15 11:23:53 -07:00
package.json feat: add pierre file tree to full-screen git panel (#1487) 2026-06-10 15:13:12 -07:00
README.md feat: open-swe dashboard for per-user profile config (#1302) 2026-05-15 11:23:53 -07:00
tsconfig.json feat: make UI installable as a PWA (#1417) 2026-06-04 15:52:06 -07:00
vercel.json chore(ui): deploy dashboard as a static SPA instead of SSR (#1395) 2026-06-03 19:56:46 +00:00
vite.config.ts fix: tidy agents home + mobile logo + PWA dev/icon issues (#1419) 2026-06-04 16:47:35 -07:00
yarn.lock feat: add pierre file tree to full-screen git panel (#1487) 2026-06-10 15:13:12 -07:00

TanStack Start + shadcn/ui

This is a template for a new TanStack Start project with React, TypeScript, and shadcn/ui.

Adding components

To add components to your app, run the following command:

npx shadcn@latest add button

This will place the ui components in the components directory.

Using components

To use the components in your app, import them as follows:

import { Button } from "@/components/ui/button";