budget consuming should not be clickable #77

New issue

Closed

opened 2026-06-02 11:10:19 +00:00 by salmaelsoly · 4 comments

salmaelsoly commented 2026-06-02 11:10:19 +00:00

Member

Copy link

budget consuming should appear as info not an button that opens the settings
also the dir of workspace should appear as clickable button not just a clickable text

 budget consuming should appear as info not an button that opens the settings also the dir of workspace should appear as clickable button not just a clickable text

image.png

32 KiB

salmaelsoly self-assigned this 2026-06-02 13:42:18 +00:00

salmaelsoly commented 2026-06-02 13:51:32 +00:00

Author

Member

Copy link

Implementation Spec for Issue #77

Objective

Change the top status bar so the budget/cost indicator is non-clickable informational text (not a button that opens Settings), and convert the workspace/target directory indicator from a plain bare-text control into a proper styled button matching the other nav buttons (jobs, crew, library, dashboard, copy, settings).

Requirements

• The budget/cost indicator (the "$0.379 / 4%" element, red when over cap) must render as informational display only — no onClick, no button semantics, no "click to edit budget" affordance.
• The workspace directory / target indicator must render as a clickable button styled consistently with the sibling nav buttons, i.e. using the existing .pill class (same class used by jobs, crew, library, dashboard, copy).
• Both controls must keep their current live data (cost/cap/percent for the budget; workspace/context/sandbox label + sub-label for the target) and their hover tooltips.

Files to Modify/Create

• crates/hero_shrimp_web/ui/src/components/CostBadge.tsx - convert the cost/budget <button> into a non-interactive element (<div>/<span>); drop the settings click handler and the unused setSettingsOpen import; update the tooltip text.
• crates/hero_shrimp_web/ui/src/components/TopBar.tsx - restyle the workspace/target <button> to use the .pill class so it visually reads as a button like the other nav buttons; it already has the correct onClick (setWorkspacePickerOpen(true)), so only styling/placement changes.

This is the SolidJS web UI (TypeScript/TSX, Tailwind/Vite). The top bar lives entirely in TopBar.tsx; the budget pill is the child component CostBadge.tsx.

Implementation Plan

Step 1: Make the budget/cost indicator non-clickable info

Files: crates/hero_shrimp_web/ui/src/components/CostBadge.tsx

• Replace the root <button …> with a non-interactive element. Change the opening tag from <button to <div, and the matching closing </button> to </div>.
• Remove the onClick={() => setSettingsOpen(true)} line.
• Drop the interactive pill look. Change the class from pill ${tone()} flex-col !items-stretch !gap-0.5 !py-1 to a plain info container, e.g. flex flex-col items-stretch gap-0.5 text-[11px] ${tone()}. Rationale: .pill carries the border + hover background that makes it look like a button; the issue wants plain info.
• Update the title tooltip: remove the trailing · click to edit budget text since the element is no longer clickable. Keep the cost/cap/calls portion.
• Remove the now-unused setSettingsOpen from the import (import { rpc, setSettingsOpen } from "../store"; → import { rpc } from "../store";) to avoid an unused-import warning.
• Update the file's header comment which currently says "Clicking opens the settings modal so the operator can adjust the cap." to reflect that it is now read-only info.
• The inner content (the icon, fmtUsd cost, / {pct}%, and the fuel-tank bar) stays unchanged.
  Dependencies: none

Step 2: Render the workspace/target directory indicator as a styled button

Files: crates/hero_shrimp_web/ui/src/components/TopBar.tsx

• The target control is the <button> with onClick={() => setWorkspacePickerOpen(true)}. It currently uses class="flex items-center gap-1 hover:text-text" — bare text with no button chrome. Change its class to the shared button style class="pill" (the same class used by the jobs/crew/library/dashboard/copy buttons in this file). This makes it a visually distinct clickable button per the issue.
• Keep the existing onClick, title, the folder <svg> icon, the {targetLabel().text} span, and the <Show> sub-label — only the wrapper class changes. The colored folder icon can remain.
• Since .pill already includes inline-flex items-center gap-1.5, drop the redundant flex items-center gap-1 from the old class.
• Recommended: relocate the target button out of the muted read-only status <div class="... text-muted"> group so it groups with the other nav pills (alongside jobs/crew), keeping a leading divider so the layout reads cleanly. At minimum ensure the inherited text-[11px] text-muted does not override the pill's button appearance.
  Dependencies: none (independent of Step 1)

Step 3: Verify the build

Files: (none — verification only)

• From crates/hero_shrimp_web/ui, run the UI build/typecheck (npm run build / vite build) to confirm no unused-import or JSX errors.
  Dependencies: Step 1, Step 2

Acceptance Criteria

• The budget/cost indicator in the top bar is no longer a <button> and has no click handler; clicking it does nothing (does not open Settings).
• The budget/cost indicator no longer shows hover/border button styling and its tooltip no longer says "click to edit budget".
• The budget/cost indicator still displays today's spend, cap percentage, and the fuel-tank bar with the correct over-cap (red) coloring.
• The workspace/target directory indicator renders as a button visually consistent with the jobs/crew/library/dashboard/copy buttons (uses the .pill style).
• Clicking the workspace/target button still opens the workspace picker (setWorkspacePickerOpen(true)), and the label/sub-label/icon still reflect the active context, dir, or sandbox.
• setSettingsOpen is removed from CostBadge.tsx imports and the UI builds/typechecks with no unused-import warnings.

Notes

• The Settings gear button in TopBar.tsx remains the way to edit the budget cap; removing the cost badge's click-to-settings does not orphan that functionality.
• .pill is defined in crates/hero_shrimp_web/ui/src/index.css; .btn-ghost is an alternative borderless look, but .pill is the closest match to the requested "styled like the other buttons".
• The active-agent @agent element in TopBar.tsx is intentionally a button (deep-links to the crew page) and is out of scope.
• No backend/RPC changes are required; this is purely a frontend presentation change.

## Implementation Spec for Issue #77 ### Objective Change the top status bar so the budget/cost indicator is non-clickable informational text (not a button that opens Settings), and convert the workspace/target directory indicator from a plain bare-text control into a proper styled button matching the other nav buttons (`jobs`, `crew`, `library`, `dashboard`, `copy`, settings). ### Requirements - The budget/cost indicator (the "$0.379 / 4%" element, red when over cap) must render as informational display only — no `onClick`, no button semantics, no "click to edit budget" affordance. - The workspace directory / target indicator must render as a clickable button styled consistently with the sibling nav buttons, i.e. using the existing `.pill` class (same class used by `jobs`, `crew`, `library`, `dashboard`, `copy`). - Both controls must keep their current live data (cost/cap/percent for the budget; workspace/context/sandbox label + sub-label for the target) and their hover tooltips. ### Files to Modify/Create - `crates/hero_shrimp_web/ui/src/components/CostBadge.tsx` - convert the cost/budget `<button>` into a non-interactive element (`<div>`/`<span>`); drop the settings click handler and the unused `setSettingsOpen` import; update the tooltip text. - `crates/hero_shrimp_web/ui/src/components/TopBar.tsx` - restyle the workspace/target `<button>` to use the `.pill` class so it visually reads as a button like the other nav buttons; it already has the correct `onClick` (`setWorkspacePickerOpen(true)`), so only styling/placement changes. This is the SolidJS web UI (TypeScript/TSX, Tailwind/Vite). The top bar lives entirely in `TopBar.tsx`; the budget pill is the child component `CostBadge.tsx`. ### Implementation Plan #### Step 1: Make the budget/cost indicator non-clickable info Files: `crates/hero_shrimp_web/ui/src/components/CostBadge.tsx` - Replace the root `<button …>` with a non-interactive element. Change the opening tag from `<button` to `<div`, and the matching closing `</button>` to `</div>`. - Remove the `onClick={() => setSettingsOpen(true)}` line. - Drop the interactive `pill` look. Change the class from `pill ${tone()} flex-col !items-stretch !gap-0.5 !py-1` to a plain info container, e.g. `flex flex-col items-stretch gap-0.5 text-[11px] ${tone()}`. Rationale: `.pill` carries the border + hover background that makes it look like a button; the issue wants plain info. - Update the `title` tooltip: remove the trailing `· click to edit budget` text since the element is no longer clickable. Keep the cost/cap/calls portion. - Remove the now-unused `setSettingsOpen` from the import (`import { rpc, setSettingsOpen } from "../store";` → `import { rpc } from "../store";`) to avoid an unused-import warning. - Update the file's header comment which currently says "Clicking opens the settings modal so the operator can adjust the cap." to reflect that it is now read-only info. - The inner content (the icon, `fmtUsd` cost, `/ {pct}%`, and the fuel-tank bar) stays unchanged. Dependencies: none #### Step 2: Render the workspace/target directory indicator as a styled button Files: `crates/hero_shrimp_web/ui/src/components/TopBar.tsx` - The target control is the `<button>` with `onClick={() => setWorkspacePickerOpen(true)}`. It currently uses `class="flex items-center gap-1 hover:text-text"` — bare text with no button chrome. Change its class to the shared button style `class="pill"` (the same class used by the `jobs`/`crew`/`library`/`dashboard`/`copy` buttons in this file). This makes it a visually distinct clickable button per the issue. - Keep the existing `onClick`, `title`, the folder `<svg>` icon, the `{targetLabel().text}` span, and the `<Show>` sub-label — only the wrapper `class` changes. The colored folder icon can remain. - Since `.pill` already includes `inline-flex items-center gap-1.5`, drop the redundant `flex items-center gap-1` from the old class. - Recommended: relocate the target button out of the muted read-only status `<div class="... text-muted">` group so it groups with the other nav pills (alongside `jobs`/`crew`), keeping a leading divider so the layout reads cleanly. At minimum ensure the inherited `text-[11px] text-muted` does not override the pill's button appearance. Dependencies: none (independent of Step 1) #### Step 3: Verify the build Files: (none — verification only) - From `crates/hero_shrimp_web/ui`, run the UI build/typecheck (`npm run build` / `vite build`) to confirm no unused-import or JSX errors. Dependencies: Step 1, Step 2 ### Acceptance Criteria - [ ] The budget/cost indicator in the top bar is no longer a `<button>` and has no click handler; clicking it does nothing (does not open Settings). - [ ] The budget/cost indicator no longer shows hover/border button styling and its tooltip no longer says "click to edit budget". - [ ] The budget/cost indicator still displays today's spend, cap percentage, and the fuel-tank bar with the correct over-cap (red) coloring. - [ ] The workspace/target directory indicator renders as a button visually consistent with the `jobs`/`crew`/`library`/`dashboard`/`copy` buttons (uses the `.pill` style). - [ ] Clicking the workspace/target button still opens the workspace picker (`setWorkspacePickerOpen(true)`), and the label/sub-label/icon still reflect the active context, dir, or sandbox. - [ ] `setSettingsOpen` is removed from `CostBadge.tsx` imports and the UI builds/typechecks with no unused-import warnings. ### Notes - The Settings gear button in `TopBar.tsx` remains the way to edit the budget cap; removing the cost badge's click-to-settings does not orphan that functionality. - `.pill` is defined in `crates/hero_shrimp_web/ui/src/index.css`; `.btn-ghost` is an alternative borderless look, but `.pill` is the closest match to the requested "styled like the other buttons". - The active-agent `@agent` element in `TopBar.tsx` is intentionally a button (deep-links to the crew page) and is out of scope. - No backend/RPC changes are required; this is purely a frontend presentation change.

salmaelsoly commented 2026-06-02 14:05:26 +00:00

Author

Member

Copy link

Build / Typecheck Results

• Command: npm run build (runs npm run clean && vite build)
• Status: PASS
• Vite production build completed with no errors; the recent edit removing the unused setSettingsOpen import from CostBadge.tsx is clean, and TopBar.tsx still imports and uses setSettingsOpen correctly. No JSX errors in CostBadge.tsx or TopBar.tsx.

Build output:

> hero_shrimp_web_ui@0.0.0 build
> npm run clean && vite build

vite v5.4.21 building for production...
transforming...
✓ 99 modules transformed.
rendering chunks...
computing gzip size...
../static/index.html                   0.81 kB │ gzip:   0.44 kB
../static/assets/index.CPaT8hMx.css   41.48 kB │ gzip:   7.98 kB
../static/assets/app.CiOhaQKt.js     418.32 kB │ gzip: 128.85 kB
✓ built in 1.80s

Note: The project build script does not invoke tsc (only vite build). Running a standalone tsc --noEmit surfaces pre-existing strict type errors elsewhere in the codebase (e.g. ChatActivity.tsx, HeroWelcome.tsx, DiffViewer.tsx, store.ts, and strict-null TS2531 checks in CostBadge.tsx lines 96/101/106). These are not related to the unused-import removal and do not affect the production build. The specific concern (removed setSettingsOpen import in CostBadge.tsx) produces no error.

## Build / Typecheck Results - Command: `npm run build` (runs `npm run clean && vite build`) - Status: PASS - Vite production build completed with no errors; the recent edit removing the unused `setSettingsOpen` import from CostBadge.tsx is clean, and TopBar.tsx still imports and uses `setSettingsOpen` correctly. No JSX errors in CostBadge.tsx or TopBar.tsx. Build output: ``` > hero_shrimp_web_ui@0.0.0 build > npm run clean && vite build vite v5.4.21 building for production... transforming... ✓ 99 modules transformed. rendering chunks... computing gzip size... ../static/index.html 0.81 kB │ gzip: 0.44 kB ../static/assets/index.CPaT8hMx.css 41.48 kB │ gzip: 7.98 kB ../static/assets/app.CiOhaQKt.js 418.32 kB │ gzip: 128.85 kB ✓ built in 1.80s ``` Note: The project `build` script does not invoke `tsc` (only `vite build`). Running a standalone `tsc --noEmit` surfaces pre-existing strict type errors elsewhere in the codebase (e.g. ChatActivity.tsx, HeroWelcome.tsx, DiffViewer.tsx, store.ts, and strict-null `TS2531` checks in CostBadge.tsx lines 96/101/106). These are not related to the unused-import removal and do not affect the production build. The specific concern (removed `setSettingsOpen` import in CostBadge.tsx) produces no error.

salmaelsoly commented 2026-06-02 14:06:44 +00:00

Author

Member

Copy link

Implementation Summary

Both requested top-bar changes are implemented in the SolidJS web UI.

Changes Made

1. Budget indicator is now read-only info (not a button)
File: crates/hero_shrimp_web/ui/src/components/CostBadge.tsx

• Converted the root <button> into a non-interactive <div>.
• Removed the onClick that opened the Settings modal and removed the now-unused setSettingsOpen import.
• Dropped the .pill button styling in favour of a plain info container (flex flex-col items-stretch gap-0.5 text-[11px]), preserving the tone color.
• Trimmed "· click to edit budget" from the tooltip.
• Updated the file header comment to state the badge is read-only.
• The spend amount, cap percentage, and fuel-tank bar (with over-cap red coloring) are unchanged.

2. Workspace/target directory is now a styled button
File: crates/hero_shrimp_web/ui/src/components/TopBar.tsx

• Restyled the target control from bare clickable text (flex items-center gap-1 hover:text-text) to the shared .pill button style used by the jobs/crew/library/dashboard/copy nav buttons.
• Relocated it out of the muted read-only status group and placed it alongside the primary nav pills so it visually reads as a button.
• Kept the setWorkspacePickerOpen(true) click handler, the folder icon, the label, and the sub-label intact.

Build / Typecheck Results

• Command: npm run build (vite build)
• Status: PASS — production build completed with no errors (99 modules, exit 0).
• setSettingsOpen removal in CostBadge.tsx introduces no unused-import error; TopBar.tsx still uses setSettingsOpen for the Settings gear.

Notes

• The Settings gear button remains the way to edit the budget cap, so no functionality is orphaned.
• No backend/RPC changes — purely a frontend presentation change.

## Implementation Summary Both requested top-bar changes are implemented in the SolidJS web UI. ### Changes Made **1. Budget indicator is now read-only info (not a button)** File: `crates/hero_shrimp_web/ui/src/components/CostBadge.tsx` - Converted the root `<button>` into a non-interactive `<div>`. - Removed the `onClick` that opened the Settings modal and removed the now-unused `setSettingsOpen` import. - Dropped the `.pill` button styling in favour of a plain info container (`flex flex-col items-stretch gap-0.5 text-[11px]`), preserving the tone color. - Trimmed "· click to edit budget" from the tooltip. - Updated the file header comment to state the badge is read-only. - The spend amount, cap percentage, and fuel-tank bar (with over-cap red coloring) are unchanged. **2. Workspace/target directory is now a styled button** File: `crates/hero_shrimp_web/ui/src/components/TopBar.tsx` - Restyled the target control from bare clickable text (`flex items-center gap-1 hover:text-text`) to the shared `.pill` button style used by the `jobs`/`crew`/`library`/`dashboard`/`copy` nav buttons. - Relocated it out of the muted read-only status group and placed it alongside the primary nav pills so it visually reads as a button. - Kept the `setWorkspacePickerOpen(true)` click handler, the folder icon, the label, and the sub-label intact. ### Build / Typecheck Results - Command: `npm run build` (`vite build`) - Status: PASS — production build completed with no errors (99 modules, exit 0). - `setSettingsOpen` removal in `CostBadge.tsx` introduces no unused-import error; `TopBar.tsx` still uses `setSettingsOpen` for the Settings gear. ### Notes - The Settings gear button remains the way to edit the budget cap, so no functionality is orphaned. - No backend/RPC changes — purely a frontend presentation change.

salmaelsoly referenced this issue from a commit 2026-06-02 14:07:59 +00:00

fix(web): make budget indicator non-clickable info and style workspace dir as button

salmaelsoly referenced this issue 2026-06-02 14:08:32 +00:00

fix(web): make budget indicator non-clickable info and style workspace dir as button #79

salmaelsoly commented 2026-06-02 14:08:40 +00:00

Author

Member

Copy link

Pull request opened: #79

This PR implements the changes discussed in this issue.

Pull request opened: https://forge.ourworld.tf/lhumina_code/hero_shrimp/pulls/79 This PR implements the changes discussed in this issue.

salmaelsoly referenced this issue from a commit 2026-06-03 08:45:21 +00:00

fix(web): align budget badge inline with the context gauge

salmaelsoly referenced this issue from a commit 2026-06-03 09:05:14 +00:00

fix(web): fill the budget fuel bar from the right to mirror the context gauge

salmaelsoly referenced this issue from a commit 2026-06-03 09:26:45 +00:00

fix(web): place budget fuel bar before the value to match the context gauge

salmaelsoly referenced this issue from a commit 2026-06-03 09:34:49 +00:00

fix(web): make budget indicator non-clickable info and style workspace dir as button

salmaelsoly referenced this issue from a commit 2026-06-03 11:17:15 +00:00

fix(web): make budget indicator non-clickable info and style workspace dir as button

salmaelsoly closed this issue 2026-06-03 11:18:53 +00:00

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

integration

int_fix_veridict

development_structured_incomplete_field

development

development_freeze

port-from-xmoncode-shrimp

main

development_kristof

development_comply

latest

v2.0.0

v1.0.0

v1.0.0-rc2

Labels

Clear labels   

prio_critical

  

prio_low

  

type_bug

  

type_contact

  

type_issue

  

type_lead

  

type_question

  

type_story

  

type_task

No labels

prio_critical

prio_low

type_bug

type_contact

type_issue

type_lead

type_question

type_story

type_task

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

salmaelsoly

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

lhumina_code/hero_shrimp#77

No description provided.