Skip to content

Reskin frontend with polished visual design #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DorianZheng merged 1 commit into from
Mar 22, 2026
Merged

Reskin frontend with polished visual design #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 26 additions & 27 deletions packages/frontend/src/app-shell.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,9 @@ export const appShellStyles = css`
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 14px;
border-bottom: 1px solid var(--toolbar-border);
padding: 0 16px;
border-bottom: none;
box-shadow: 0 1px 0 var(--border-color);
background: var(--toolbar-bg);
position: relative;
}
Expand Down Expand Up @@ -149,31 +150,30 @@ export const appShellStyles = css`
}

.pane-toolbar-leading-btn {
width: 26px;
min-width: 26px;
height: 26px;
border: 1px solid var(--control-border);
border-radius: 9px;
background: var(--control-bg);
color: var(--text-secondary);
width: var(--control-height);
min-width: var(--control-height);
height: var(--control-height);
border: none;
border-radius: 8px;
background: transparent;
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
transition: background var(--transition-fast), color var(--transition-fast);
}

.pane-toolbar-leading-btn:hover {
background: var(--control-bg-hover);
border-color: var(--border-primary);
background: var(--bg-hover);
color: var(--text-primary);
}

.pane-toolbar-leading-btn svg {
width: 13px;
height: 13px;
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 1.9;
stroke-width: 1.6;
fill: none;
flex-shrink: 0;
}
Expand All @@ -199,11 +199,11 @@ export const appShellStyles = css`

.pane-toolbar-title {
margin: 0;
font-size: 13.5px;
font-size: 14px;
line-height: 1.2;
font-weight: 650;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand Down Expand Up @@ -244,25 +244,24 @@ export const appShellStyles = css`
}

.window-control-btn {
border: 1px solid var(--control-border);
border-radius: 999px;
border: 1px solid var(--border-color);
border-radius: 8px;
min-height: var(--control-height);
padding: 0 12px;
background: var(--control-bg);
color: var(--text-primary);
background: transparent;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
transition: background var(--transition-fast), color var(--transition-fast);
white-space: nowrap;
}

.window-control-btn:hover {
background: var(--control-bg-hover);
border-color: var(--border-primary);
background: var(--bg-hover);
color: var(--text-primary);
}

Expand Down Expand Up @@ -304,7 +303,7 @@ export const appShellStyles = css`
width: var(--control-height);
min-width: var(--control-height);
padding: 0;
border-radius: 9px;
border-radius: 8px;
}

.stage-shell {
Expand All @@ -327,7 +326,7 @@ export const appShellStyles = css`
border-top: 1px solid var(--footer-border);
background: var(--footer-bg);
color: var(--text-secondary);
font-size: 11.5px;
font-size: 12px;
line-height: 1;
}

Expand Down
19 changes: 5 additions & 14 deletions packages/frontend/src/app-shell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import * as api from './services/rpc.js'
import { WsClient } from './services/rpc.js'
import { initWorkspaceSync } from './services/workspace-sync.js'
import { appShellStyles } from './app-shell.css.js'
import { iconMinus, iconSquare, iconX, iconPanelLeft } from './utils/icons.js'
import type { ClaudeSettings, HostOperatorRequest, SelectedModelProvider } from '@dune/shared'
import type { CreateAgentDialog } from './components/agents/create-dialog.js'
import type { CreateChannelDialog } from './components/channels/create-dialog.js'
Expand Down Expand Up @@ -939,9 +940,7 @@ export class AppShell extends LitElement {
aria-label="Minimize window"
@click=${() => this.handleWindowControl('minimize')}
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 12h14" stroke-linecap="round"></path>
</svg>
${iconMinus()}
</button>
<button
class="window-control-btn"
Expand All @@ -950,9 +949,7 @@ export class AppShell extends LitElement {
aria-label="Maximize window"
@click=${() => this.handleWindowControl('maximize')}
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 5h14v14H5z" stroke-linejoin="round"></path>
</svg>
${iconSquare()}
</button>
<button
class="window-control-btn"
Expand All @@ -961,20 +958,14 @@ export class AppShell extends LitElement {
aria-label="Close window"
@click=${() => this.handleWindowControl('close')}
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m6 6 12 12M18 6 6 18" stroke-linecap="round"></path>
</svg>
${iconX()}
</button>
</div>
`
}

private renderSidebarToggleIcon() {
return html`
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 5h16v14H4zM9 5v14" stroke-linejoin="round"></path>
</svg>
`
return iconPanelLeft()
}

private renderToolbarLeadingCluster() {
Expand Down
20 changes: 10 additions & 10 deletions packages/frontend/src/components/agents/chat-view.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const chatViewStyles = css`
.header {
display: flex;
align-items: center;
padding: 10px 16px 8px;
padding: 12px 18px 10px;
background: transparent;
min-height: 54px;
gap: 14px;
Expand All @@ -30,9 +30,9 @@ export const chatViewStyles = css`
flex: 1;
}
.header-avatar {
width: 32px;
height: 32px;
border-radius: 10px;
width: 36px;
height: 36px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -104,7 +104,7 @@ export const chatViewStyles = css`
.conversation {
flex: 1;
overflow-y: auto;
padding: 4px 18px 6px;
padding: 6px 20px 8px;
min-height: 0;
}
.conversation-lane {
Expand All @@ -125,7 +125,7 @@ export const chatViewStyles = css`
.empty-avatar {
width: 44px;
height: 44px;
border-radius: 12px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -169,7 +169,7 @@ export const chatViewStyles = css`
.entry-thinking {
display: flex;
gap: 12px;
padding: 7px 12px;
padding: 8px 14px;
max-width: 820px;
}
.thinking-dots {
Expand All @@ -196,13 +196,13 @@ export const chatViewStyles = css`
.entry-text {
display: flex;
gap: 12px;
padding: 7px 12px;
padding: 8px 14px;
max-width: 820px;
}
.entry-avatar {
width: 28px;
height: 28px;
border-radius: 6px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -435,7 +435,7 @@ export const chatViewStyles = css`
.entry-user {
display: flex;
gap: 12px;
padding: 7px 12px;
padding: 8px 14px;
max-width: 820px;
}
.user-avatar {
Expand Down
24 changes: 4 additions & 20 deletions packages/frontend/src/components/agents/chat-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import './memory-editor.js'
import './host-settings.js'
import './stash-strip.js'
import { chatViewStyles } from './chat-view.css.js'
import { iconWrench, iconXCircle, iconFileText, iconAlertTriangle } from '../../utils/icons.js'
import type { AgentMemoryEditor, MemoryEditorSnapshot } from './memory-editor.js'
import type { StashItem } from './stash-strip.js'

Expand Down Expand Up @@ -554,10 +555,7 @@ export class AgentChatView extends LitElement {
<div class="tool-card tool-use">
<div class="tool-header" @click=${() => this.toggleExpand(entry.id)}>
<span class="tool-chevron ${isOpen ? 'open' : ''}">▶</span>
<svg class="tool-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 6.5a4.3 4.3 0 1 0 3 3l-3.3 3.3a1 1 0 0 1-1.4 0l-1.4-1.4a1 1 0 0 1 0-1.4l3.3-3.3a4.3 4.3 0 0 0-.2-.2Z" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5 19l4-4" stroke-linecap="round"></path>
</svg>
${iconWrench()}
<span class="tool-label">${d.toolName || 'unknown'}</span>
<span class="tool-label-type" style="background: var(--warning)">Tool Call</span>
</div>
Expand All @@ -574,19 +572,7 @@ export class AgentChatView extends LitElement {
<div class="tool-card ${d.isError ? 'tool-error' : 'tool-result'}">
<div class="tool-header" @click=${() => this.toggleExpand(entry.id)}>
<span class="tool-chevron ${isOpen ? 'open' : ''}">▶</span>
${d.isError
? html`
<svg class="tool-icon" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="8"></circle>
<path d="M9.5 9.5l5 5m0-5-5 5" stroke-linecap="round"></path>
</svg>
`
: html`
<svg class="tool-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 4h6l4 4v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" stroke-linejoin="round"></path>
<path d="M14 4v4h4" stroke-linejoin="round"></path>
</svg>
`}
${d.isError ? iconXCircle() : iconFileText()}
<span class="tool-label">${d.isError ? 'Error Result' : 'Result'}</span>
<span class="tool-label-type" style="background: ${d.isError ? 'var(--error)' : 'var(--accent)'}">${d.isError ? 'Error' : 'Output'}</span>
</div>
Expand Down Expand Up @@ -689,9 +675,7 @@ export class AgentChatView extends LitElement {
return html`
<div class="entry-error">
<div class="error-pill">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 8v5m0 3h.01M10.3 4.9 3.7 16.4a2 2 0 0 0 1.7 3h13.2a2 2 0 0 0 1.7-3L13.7 4.9a2 2 0 0 0-3.4 0Z" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
${iconAlertTriangle()}
<span>${d.message || 'Unknown error'}</span>
</div>
</div>
Expand Down
18 changes: 5 additions & 13 deletions packages/frontend/src/components/agents/computer-tab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { LitElement, html, css } from 'lit'
import { customElement, property, state as litState } from 'lit/decorators.js'
import * as api from '../../services/rpc.js'
import { iconPlus, iconMenu, iconPlay, iconCamera } from '../../utils/icons.js'

@customElement('agent-computer-tab')
export class AgentComputerTab extends LitElement {
Expand Down Expand Up @@ -204,9 +205,7 @@ export class AgentComputerTab extends LitElement {
<div class="container">
<div class="toolbar">
<span class="toolbar-badge">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M2 12h20M12 2v20" stroke-linecap="round"></path>
</svg>
${iconPlus()}
<span>Desktop</span>
</span>
<span class="spacer"></span>
Expand All @@ -223,23 +222,16 @@ export class AgentComputerTab extends LitElement {
<div class="container">
<div class="toolbar">
<span class="toolbar-badge">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 7h16M4 12h16M4 17h16" stroke-linecap="round"></path>
</svg>
${iconMenu()}
<span>Screenshot Mode</span>
</span>
<span class="spacer"></span>
<button class="control-btn" type="button" @click=${() => this.startPolling()}>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 6v12l10-6-10-6Z" stroke-linejoin="round"></path>
</svg>
${iconPlay()}
<span>${this.polling ? 'Live' : 'Start Live'}</span>
</button>
<button class="control-btn" type="button" @click=${() => this.takeScreenshot()}>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 9h2l1-2h4l1 2h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z" stroke-linejoin="round"></path>
<circle cx="12" cy="14" r="3"></circle>
</svg>
${iconCamera()}
<span>Capture</span>
</button>
</div>
Expand Down
5 changes: 2 additions & 3 deletions packages/frontend/src/components/agents/memory-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { customElement, property, state as litState } from 'lit/decorators.js'
import type { Agent, MemoryFile } from '@dune/shared'
import * as api from '../../services/rpc.js'
import { uiPreferences } from '../../state/ui-preferences.js'
import { iconX } from '../../utils/icons.js'

type MemorySort = 'name' | 'updated' | 'size'
type MemoryPane = 'files' | 'editor'
Expand Down Expand Up @@ -1101,9 +1102,7 @@ export class AgentMemoryEditor extends LitElement {
title=${`Delete ${this.getMemoryFileName(f.path)}`}
@click=${(e: Event) => { e.stopPropagation(); this.memoryDeleteConfirm = f.path }}
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" stroke-linecap="round"></path>
</svg>
${iconX()}
</button>
</div>
${this.memoryDeleteConfirm === f.path ? html`
Expand Down
Loading
Loading