diff --git a/.changeset/lean-workspace-context.md b/.changeset/lean-workspace-context.md index 4542b43..43e4a76 100644 --- a/.changeset/lean-workspace-context.md +++ b/.changeset/lean-workspace-context.md @@ -2,4 +2,4 @@ "@jmfederico/pi-web": patch --- -Reduce repeated workspace details in the chat status bar and workspace tool header so workspace context stays in the workspace chip. +Reduce repeated machine and workspace details in the chat status bar and workspace tool header so context stays in the location chips. diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index d8c0efc..99d22ee 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -1382,7 +1382,7 @@ export class PiWebApp extends LitElement { ${state.selectedSession ? html` 0} .loadingMore=${state.isLoadingEarlierMessages} .isReceivingPartialStream=${state.isReceivingPartialStream} .isCompacting=${state.status?.isCompacting === true} .pendingMessageCount=${state.status?.pendingMessageCount ?? 0} .status=${state.status} .activity=${state.activity} .onLoadMore=${() => this.withChatPrependTransition(() => this.sessions.loadEarlierMessages())}> 0} .status=${state.status} .onSend=${(text: string, streamingBehavior?: "steer" | "followUp") => { this.sendPrompt(text, streamingBehavior); }} .onStop=${() => this.sessions.stopActiveWork()} .onSelectModel=${() => { void this.openModelDialog(); }} .onSelectThinking=${() => { void this.openThinkingDialog(); }}> - + ${state.commandDialog !== undefined ? html` this.sessions.respondToCommand(state.commandDialog?.requestId ?? "", value)} .onCancel=${() => { this.sessions.cancelCommand(); }}>` : null} ${state.modelDialog !== undefined ? html` { void this.pickModel(value); }} .onCancel=${() => { this.setState({ modelDialog: undefined }); }}>` : null} ${state.thinkingDialog !== undefined ? html` { void this.pickThinking(value); }} .onCancel=${() => { this.setState({ thinkingDialog: undefined }); }}>` : null} diff --git a/src/client/src/components/StatusBar.ts b/src/client/src/components/StatusBar.ts index 3fa605b..2fc2afb 100644 --- a/src/client/src/components/StatusBar.ts +++ b/src/client/src/components/StatusBar.ts @@ -1,13 +1,12 @@ import { LitElement, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import type { Machine, SessionStatus } from "../api"; +import type { SessionStatus } from "../api"; import { formatCost, formatTokenCount } from "../utils/format"; import { statusBarStyles } from "./shared"; @customElement("status-bar") export class StatusBar extends LitElement { @property({ attribute: false }) status?: SessionStatus; - @property({ attribute: false }) machine?: Machine; override render() { const status = this.status; @@ -21,10 +20,9 @@ export class StatusBar extends LitElement { const tokens = status.tokens; return html`
- ${this.machine?.name ?? "Local"} ↑${formatTokenCount(tokens.input)} ↓${formatTokenCount(tokens.output)} - ${contextText} + ${contextText} ${formatCost(status.cost)} ${status.pendingMessageCount > 0 ? html`${String(status.pendingMessageCount)} queued` : null}
diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index 8aeca75..1202696 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -391,8 +391,8 @@ export const formattedTextStyles = css` export const statusBarStyles = css` :host { display: block; color: var(--pi-muted); font: 12px system-ui, sans-serif; } .bar { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 7px 12px; border-top: 1px solid var(--pi-border); background: var(--pi-bg); white-space: nowrap; overflow: hidden; } - span { overflow: hidden; text-overflow: ellipsis; } - .bar > span:first-child { flex: 1 1 auto; min-width: 80px; } + span { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; } + .context { flex: 1 1 auto; min-width: 0; } .activity { display: inline-flex; align-items: center; gap: 6px; color: var(--pi-muted); } .activity.active { color: var(--pi-success); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; }