Files
NomadArch/tasks/done/047-tabs-tailwind-refactor.md
Gemini AI 157449a9ad restore: recover deleted documentation, CI/CD, and infrastructure files
Restored from origin/main (b4663fb):
- .github/ workflows and issue templates
- .gitignore (proper exclusions)
- .opencode/agent/web_developer.md
- AGENTS.md, BUILD.md, PROGRESS.md
- dev-docs/ (9 architecture/implementation docs)
- docs/screenshots/ (4 UI screenshots)
- images/ (CodeNomad icons)
- package-lock.json (dependency lockfile)
- tasks/ (25+ project task files)

Also restored original source files that were modified:
- packages/ui/src/App.tsx
- packages/ui/src/lib/logger.ts
- packages/ui/src/stores/instances.ts
- packages/server/src/server/routes/workspaces.ts
- packages/server/src/workspaces/manager.ts
- packages/server/src/workspaces/runtime.ts
- packages/server/package.json

Kept new additions:
- Install-*.bat/.sh (enhanced installers)
- Launch-*.bat/.sh (new launchers)
- README.md (SEO optimized with GLM 4.7)
2025-12-23 13:03:48 +04:00

1.8 KiB

Task 047 - Tabs Tailwind Refactor

Goal

Refactor instance and session tab components to rely on Tailwind utilities and shared tokens, aligning with the design spec for spacing, typography, and state indicators.

Prerequisites

  • Task 046 complete (prompt input refactor) to keep merges manageable.

Acceptance Criteria

  • src/components/instance-tabs.tsx and src/components/session-tabs.tsx no longer reference legacy .instance-tabs, .session-tabs, .session-tab classes from src/index.css.
  • Global CSS for tab bars (.connection-status, .status-indicator, .status-dot, .session-view) is replaced or minimized in favor of Tailwind utilities and token variables.
  • Active, hover, and error states match the UI spec in both themes, including badges/icons.
  • Tab bar layout remains responsive with overflow scrolling where applicable.

Steps

  1. Catalogue existing tab-related classes used in both components and in src/index.css.
  2. Convert markup to Tailwind class lists, leveraging tokens for colors/borders (e.g., bg-[var(--surface-secondary)]).
  3. Add any reusable tab utilities to src/styles/components.css if needed.
  4. Remove obsolete CSS blocks from src/index.css once coverage is confirmed.
  5. Smoke-test tab interactions: switching, closing (where allowed), error state display, and overflow behavior.

Testing Checklist

  • Run npm run build.
  • In dev mode, load multiple instances/sessions to verify active styling and horizontal scrolling.

Dependencies

  • Depends on Task 046 completion.
  • Blocks subsequent polish tasks for tab-level layout.

Estimated Time

1.0 hour

Notes

  • Branch suggestion: feature/task-047-tabs-tailwind-refactor.
  • Provide before/after screenshots (light/dark) of both tab bars in the PR for clarity.