Compare commits
No commits in common. "f92b688098eb6564398dcc99aedc22b77ba1b0b1" and "5dd0a182217c1c4d5c2c346f53d53c6a0d526134" have entirely different histories.
f92b688098
...
5dd0a18221
5
.npmrc
5
.npmrc
@ -1,6 +1,5 @@
|
||||
# Remove repo-level GITEA_NPM_TOKEN interpolation
|
||||
# Gitea registry auth should live in user-level ~/.npmrc or CI secrets
|
||||
# Only when BYTELYST_PACKAGE_SOURCE=gitea is explicitly used
|
||||
@bytelyst:registry=http://${GITEA_NPM_HOST:-localhost}:3300/api/packages/ByteLyst/npm/
|
||||
//localhost:3300/api/packages/ByteLyst/npm/:_authToken=${GITEA_NPM_TOKEN}
|
||||
strict-ssl=false
|
||||
link-workspace-packages=true
|
||||
prefer-workspace-packages=true
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
|
||||
const PACKAGE_SCOPE = '@bytelyst/';
|
||||
const PACKAGE_SOURCE = process.env.BYTELYST_PACKAGE_SOURCE || 'common-plat';
|
||||
const DEFAULT_COMMON_PLAT_ROOT = path.resolve(__dirname, '..', 'learning_ai', 'learning_ai_common_plat');
|
||||
const LEGACY_COMMON_PLAT_ROOT = path.resolve(__dirname, '..', 'learning_ai_common_plat');
|
||||
const COMMON_PLAT_ROOT =
|
||||
process.env.BYTELYST_COMMON_PLAT_ROOT ||
|
||||
(fs.existsSync(DEFAULT_COMMON_PLAT_ROOT) ? DEFAULT_COMMON_PLAT_ROOT : LEGACY_COMMON_PLAT_ROOT);
|
||||
const COMMON_PLAT_PACKAGES_ROOT = path.join(COMMON_PLAT_ROOT, 'packages');
|
||||
const VERSION_CACHE = new Map();
|
||||
let loggedSource = false;
|
||||
|
||||
function packageDirFor(name) {
|
||||
return name.startsWith(PACKAGE_SCOPE) ? name.slice(PACKAGE_SCOPE.length) : null;
|
||||
}
|
||||
|
||||
function pathIfPackageExists(rootDir, name) {
|
||||
const packageDir = packageDirFor(name);
|
||||
if (!packageDir) return null;
|
||||
|
||||
const candidate = path.join(rootDir, packageDir);
|
||||
return fs.existsSync(path.join(candidate, 'package.json')) ? candidate : null;
|
||||
}
|
||||
|
||||
function readPackageVersion(packagePath) {
|
||||
if (VERSION_CACHE.has(packagePath)) {
|
||||
return VERSION_CACHE.get(packagePath);
|
||||
}
|
||||
|
||||
try {
|
||||
const packageJson = JSON.parse(fs.readFileSync(path.join(packagePath, 'package.json'), 'utf8'));
|
||||
const version = packageJson.version || null;
|
||||
VERSION_CACHE.set(packagePath, version);
|
||||
return version;
|
||||
} catch {
|
||||
VERSION_CACHE.set(packagePath, null);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function resolveSpecifier(name) {
|
||||
if (!name.startsWith(PACKAGE_SCOPE)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const commonPlatPath = pathIfPackageExists(COMMON_PLAT_PACKAGES_ROOT, name);
|
||||
|
||||
if (PACKAGE_SOURCE === 'common-plat') {
|
||||
return commonPlatPath ? 'workspace:*' : null;
|
||||
}
|
||||
|
||||
if (PACKAGE_SOURCE === 'gitea') {
|
||||
return commonPlatPath ? readPackageVersion(commonPlatPath) : null;
|
||||
}
|
||||
|
||||
return commonPlatPath ? 'workspace:*' : null;
|
||||
}
|
||||
|
||||
function rewriteDependencySet(dependencies = {}) {
|
||||
for (const dependencyName of Object.keys(dependencies)) {
|
||||
const rewrittenSpecifier = resolveSpecifier(dependencyName);
|
||||
if (rewrittenSpecifier) {
|
||||
dependencies[dependencyName] = rewrittenSpecifier;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function logSourceOnce() {
|
||||
if (loggedSource) {
|
||||
return;
|
||||
}
|
||||
|
||||
loggedSource = true;
|
||||
process.stderr.write(
|
||||
`[bytelyst] pnpm package source=${PACKAGE_SOURCE} commonPlatRoot=${COMMON_PLAT_ROOT}\n`,
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
hooks: {
|
||||
readPackage(packageJson) {
|
||||
logSourceOnce();
|
||||
if (packageJson.name?.startsWith(PACKAGE_SCOPE)) {
|
||||
return packageJson;
|
||||
}
|
||||
|
||||
rewriteDependencySet(packageJson.dependencies);
|
||||
rewriteDependencySet(packageJson.devDependencies);
|
||||
rewriteDependencySet(packageJson.optionalDependencies);
|
||||
return packageJson;
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -17,8 +17,8 @@
|
||||
| TODO | Priority | Phase | File(s) | Summary |
|
||||
|------|----------|-------|---------|---------|
|
||||
| **TODO-001** | medium | 0 | `web/src/app/providers.tsx` | Kill switch maintenance banner — create `<MaintenanceBanner />`, set React state when `checkKillSwitch()` returns `disabled=true`, disable timer creation buttons |
|
||||
| ✅ **TODO-002** | medium | 0 | `web/src/app/settings/page.tsx` | ~~Wire feedback button into settings page using `feedbackClient`~~ — settings feedback form submits through `@bytelyst/feedback-client`; verification blocked locally by missing `GITEA_NPM_TOKEN` for private `@bytelyst/*` install (d38b974) |
|
||||
| ✅ **TODO-003** | medium | 0 | `web/src/components/CreateTimerModal.tsx`, `web/src/components/AlarmOverlay.tsx` | ~~Apply `@bytelyst/accessibility` focus trap + screen reader announcements~~ — shared helpers added in common-plat `42f60cb`, consumed by ChronoMind modals (bfc4670) |
|
||||
| **TODO-002** | medium | 0 | `web/src/app/(app)/settings/page.tsx` (create) | Wire feedback button into settings page (or floating FAB) using `feedbackClient` from `web/src/lib/feedback.ts` |
|
||||
| **TODO-003** | medium | 0 | `web/src/components/CreateTimerModal.tsx`, `web/src/components/AlarmOverlay.tsx` | Apply `@bytelyst/accessibility` focus trap + screen reader announcements. Ensure `--cm-*` color tokens meet WCAG AA contrast |
|
||||
| ✅ **TODO-004** | medium | A.1 | `backend/src/modules/routines/routes.ts` | ~~Clone template~~ — templates now cloned via `crypto.randomUUID()`, original stays reusable (0e7c1ae) |
|
||||
| ✅ **TODO-005** | high | A.4 | `backend/src/lib/ai-context.ts` | ~~Wire LLM~~ — dual-path: extraction-service → Ollama `/api/generate` (5s timeout, feature-gated) (229ce4f) |
|
||||
| ✅ **TODO-006** | low | A.4 | `web/src/lib/context-messages.ts` | ~~Centralize backend URL~~ — uses `getBackendBaseURL()` from `product-config.ts` (5dafcc2) |
|
||||
@ -64,7 +64,7 @@
|
||||
| `@bytelyst/design-tokens` | ✅ Used | `--cm-*` CSS props in globals.css |
|
||||
| `@bytelyst/ui` | ✅ Used | Imported in providers.tsx |
|
||||
| `@bytelyst/kill-switch-client` | ❌ **MISSING** | Every other product has this — critical for prod safety |
|
||||
| `@bytelyst/feedback-client` | ✅ Used | Settings feedback form submits via shared SDK |
|
||||
| `@bytelyst/feedback-client` | ❌ **MISSING** | No in-app feedback mechanism |
|
||||
| `@bytelyst/event-store` | ❌ **MISSING** | Domain events not persisted — needed for webhooks + audit |
|
||||
| `@bytelyst/webhook-dispatch` | ❌ **MISSING** | Backend uses hand-rolled dispatcher instead of shared package |
|
||||
| `@bytelyst/accessibility` | ❌ **MISSING** | Shared accessibility helpers not consumed |
|
||||
@ -124,13 +124,13 @@ These proxy to `chronomind-backend` (port 4011) via `chronomind-client.ts`.
|
||||
|
||||
- [x] `web/src/lib/feedback.ts` — integrate `@bytelyst/feedback-client` (commit: f3e14e2)
|
||||
- `createFeedbackClient({ baseUrl, productId, getAccessToken })`
|
||||
- [x] Add feedback button to settings page (or floating FAB) (commit: d38b974; status: implemented, verification blocked locally because `pnpm install` requires `GITEA_NPM_TOKEN` for private `@bytelyst/*` packages)
|
||||
- [ ] Add feedback button to settings page (or floating FAB) (commit: )
|
||||
- TODO-002: Wire feedback button into settings page using `feedbackClient` from `web/src/lib/feedback.ts`
|
||||
|
||||
### 0.3 — Accessibility Package (Web)
|
||||
|
||||
- [x] Add `@bytelyst/accessibility` to web/package.json (commit: f3e14e2)
|
||||
- [x] Integrate helpers into existing modals (commit: bfc4670; shared package: `learning_ai_common_plat` 42f60cb; status: `@bytelyst/accessibility` build passed, web typecheck/test/build passed, modal small text promoted from tertiary to secondary for AA contrast)
|
||||
- [ ] Integrate helpers into existing modals (commit: )
|
||||
- TODO-003: Apply `@bytelyst/accessibility` focus trap + screen reader to CreateTimerModal, AlarmOverlay
|
||||
- Ensure all `--cm-*` color tokens meet WCAG AA contrast
|
||||
|
||||
@ -642,8 +642,8 @@ Systematic audit against `learning_ai_common_plat/packages/` (58 packages) revea
|
||||
| Gap | Severity | Fixed In |
|
||||
|-----|----------|----------|
|
||||
| No `@bytelyst/kill-switch-client` | **Critical** | Phase 0.1 |
|
||||
| No settings feedback entry point using `@bytelyst/feedback-client` | Medium | Phase 0.2 — complete (d38b974) |
|
||||
| No `@bytelyst/accessibility` focus trap and screen reader helpers | Medium | Phase 0.3 — complete (bfc4670, shared 42f60cb) |
|
||||
| No `@bytelyst/feedback-client` | Medium | Phase 0.2 |
|
||||
| No `@bytelyst/accessibility` helpers | Medium | Phase 0.3 |
|
||||
| No feature flags for new features | **Critical** | Phase 0.4 |
|
||||
| No telemetry events for new features | Medium | Phase 0.5 |
|
||||
| MCP tools built in product backend (wrong arch) | **Critical** | Phase A (dual-layer: backend REST + mcp-server proxy) |
|
||||
|
||||
@ -1,815 +0,0 @@
|
||||
# UX Implementation Guide
|
||||
|
||||
> **Purpose:** Comprehensive guide for UX implementation across ByteLyst products using common platform UI packages, design tokens, and Cipher design system integration.
|
||||
|
||||
> **Target Audience:** Product teams implementing UX improvements and testing infrastructure.
|
||||
|
||||
> **Product:** ChronoMind - AI-powered contextual clock & timer
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
This guide documents the complete UX implementation approach for ChronoMind, replicating the patterns established in the trading dashboard. The approach covers:
|
||||
|
||||
- **Common Platform UI Integration** - Leveraging `@bytelyst/ui` shared primitives
|
||||
- **Design Token Usage** - Using `@bytelyst/design-tokens` for consistent styling
|
||||
- **Component Normalization** - Replacing one-off components with shared primitives
|
||||
- **Accessibility Improvements** - Keyboard navigation, ARIA labels, focus management
|
||||
- **Responsive Design** - Viewport matrix testing, shell breakpoints
|
||||
- **Testing Infrastructure** - Playwright E2E tests, Storybook, AI-friendly reports
|
||||
- **Cipher Design System** - Visual hierarchy, spacing, typography principles
|
||||
|
||||
---
|
||||
|
||||
## Part 1: Common Platform UI Integration
|
||||
|
||||
### Local Package Resolution
|
||||
|
||||
**Critical:** Use local common platform packages by default, not Gitea registry.
|
||||
|
||||
**File:** `.pnpmfile.cjs`
|
||||
|
||||
```javascript
|
||||
// .pnpmfile.cjs
|
||||
// Default to local common platform packages
|
||||
function readPackage(pkg, context) {
|
||||
if (!context.workspace) return pkg;
|
||||
|
||||
// Default to common-plat (local packages)
|
||||
const packageSource = process.env.BYTELYST_PACKAGE_SOURCE || 'common-plat';
|
||||
|
||||
if (packageSource === 'common-plat') {
|
||||
// Resolve @bytelyst/* packages from local common platform
|
||||
if (pkg.name.startsWith('@bytelyst/')) {
|
||||
pkg.dependencies = pkg.dependencies || {};
|
||||
pkg.dependencies[pkg.name] = 'workspace:*';
|
||||
}
|
||||
}
|
||||
|
||||
return pkg;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
name: 'bytelyst-package-source',
|
||||
hooks: {
|
||||
readPackage,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**File:** `.npmrc`
|
||||
|
||||
```ini
|
||||
# Remove repo-level GITEA_NPM_TOKEN interpolation
|
||||
# Gitea registry auth should live in user-level ~/.npmrc or CI secrets
|
||||
# Only when BYTELYST_PACKAGE_SOURCE=gitea is explicitly used
|
||||
```
|
||||
|
||||
### Environment Variables
|
||||
|
||||
```bash
|
||||
# Default: Use local common platform packages
|
||||
BYTELYST_PACKAGE_SOURCE=common-plat
|
||||
|
||||
# Optional: Use Gitea registry (requires auth)
|
||||
BYTELYST_PACKAGE_SOURCE=gitea
|
||||
# GITEA_NPM_TOKEN should be in ~/.npmrc or CI secrets
|
||||
```
|
||||
|
||||
### Verification Commands
|
||||
|
||||
```bash
|
||||
# Verify local package resolution
|
||||
pnpm install @bytelyst/ui @bytelyst/design-tokens
|
||||
|
||||
# Verify packages resolve from local common platform
|
||||
pnpm list @bytelyst/ui
|
||||
# Should show: @bytelyst/ui -> link:../learning_ai_common_plat/packages/ui
|
||||
```
|
||||
|
||||
### Product Adapter Pattern
|
||||
|
||||
Create a product adapter to normalize imports and extend shared primitives with product-specific variants:
|
||||
|
||||
**File:** `web/src/components/ui/Primitives.tsx`
|
||||
|
||||
```typescript
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Badge as CommonBadge,
|
||||
Button as CommonButton,
|
||||
Input as CommonInput,
|
||||
Select as CommonSelect,
|
||||
type BadgeProps as CommonBadgeProps,
|
||||
type ButtonProps as CommonButtonProps,
|
||||
type InputProps as CommonInputProps,
|
||||
type SelectProps as CommonSelectProps,
|
||||
} from '@bytelyst/ui';
|
||||
|
||||
// Re-export all shared primitives
|
||||
export {
|
||||
ActionMenu,
|
||||
AlertBanner,
|
||||
DataList,
|
||||
DataTable,
|
||||
Drawer,
|
||||
EmptyState,
|
||||
Modal,
|
||||
PageHeader,
|
||||
Panel,
|
||||
Skeleton,
|
||||
Timeline,
|
||||
Toolbar,
|
||||
// ... all other @bytelyst/ui components
|
||||
} from '@bytelyst/ui';
|
||||
|
||||
// Define product-specific variants for ChronoMind
|
||||
type ProductButtonVariant = NonNullable<CommonButtonProps['variant']> | 'link';
|
||||
type ProductButtonSize = NonNullable<CommonButtonProps['size']> | 'icon';
|
||||
type ProductFieldVariant = 'surface' | 'muted';
|
||||
type ProductFieldSize = 'sm' | 'md';
|
||||
type ProductBadgeVariant = NonNullable<CommonBadgeProps['variant']> | 'danger';
|
||||
type ProductStatusTone = 'success' | 'warning' | 'error' | 'info' | 'neutral';
|
||||
|
||||
// Extend interfaces with product-specific props
|
||||
export interface ButtonProps extends Omit<CommonButtonProps, 'variant' | 'size'> {
|
||||
variant?: ProductButtonVariant;
|
||||
size?: ProductButtonSize;
|
||||
}
|
||||
|
||||
export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface InputProps extends CommonInputProps {
|
||||
controlSize?: ProductFieldSize;
|
||||
variant?: ProductFieldVariant;
|
||||
}
|
||||
|
||||
// ChronoMind-specific status mapping for badges
|
||||
export type ChronoMindStatus =
|
||||
| 'running' | 'paused' | 'stopped' | 'completed' | 'alarm'
|
||||
| 'snoozed' | 'overdue' | 'upcoming' | 'recurring' | 'one-time'
|
||||
| 'focus' | 'break' | 'pomodoro' | 'routine' | 'error' | 'success';
|
||||
|
||||
const chronomindStatusTone: Record<ChronoMindStatus, ProductStatusTone> = {
|
||||
running: 'success',
|
||||
paused: 'warning',
|
||||
stopped: 'neutral',
|
||||
completed: 'success',
|
||||
alarm: 'error',
|
||||
snoozed: 'warning',
|
||||
overdue: 'error',
|
||||
upcoming: 'info',
|
||||
recurring: 'info',
|
||||
'one-time': 'neutral',
|
||||
focus: 'success',
|
||||
break: 'info',
|
||||
pomodoro: 'success',
|
||||
routine: 'info',
|
||||
error: 'error',
|
||||
success: 'success',
|
||||
};
|
||||
|
||||
// Helper function to map timer status to tone
|
||||
export function statusToneFor(status: ChronoMindStatus | string | null | undefined): ProductStatusTone {
|
||||
if (!status) return 'neutral';
|
||||
const normalized = status.trim().toLowerCase().replace(/[\s_]+/g, '-') as ChronoMindStatus;
|
||||
return chronomindStatusTone[normalized] ?? 'neutral';
|
||||
}
|
||||
|
||||
// Product-specific component implementations
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ variant = 'primary', size = 'md', className, ...props }, ref) => (
|
||||
<CommonButton
|
||||
ref={ref}
|
||||
variant={variant === 'link' ? 'ghost' : variant}
|
||||
size={size === 'icon' ? 'sm' : size}
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||
({ icon, label, variant = 'ghost', size = 'icon', className, ...props }, ref) => (
|
||||
<Button
|
||||
ref={ref}
|
||||
type="button"
|
||||
aria-label={label}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className="shrink-0"
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
),
|
||||
);
|
||||
|
||||
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ controlSize = 'md', variant = 'surface', className, ...props }, ref) => (
|
||||
<CommonInput
|
||||
ref={ref}
|
||||
className={className}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
export function ChronoMindStatusBadge({
|
||||
status,
|
||||
children,
|
||||
}: {
|
||||
status: ChronoMindStatus | string | null | undefined;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Badge variant={statusToneFor(status)} dot>
|
||||
{children ?? status ?? 'Unknown'}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Benefits of Product Adapter Pattern:**
|
||||
- Centralized import point for all UI components
|
||||
- Product-specific variants without modifying common platform
|
||||
- Consistent styling across the application
|
||||
- Easy to migrate to new common platform versions
|
||||
- Type-safe extensions with TypeScript
|
||||
|
||||
---
|
||||
|
||||
## Part 2: Design Token Usage
|
||||
|
||||
### CSS Variable Integration
|
||||
|
||||
Use design tokens from `@bytelyst/design-tokens` via CSS custom properties with ChronoMind-specific prefixes:
|
||||
|
||||
```css
|
||||
/* Surface colors */
|
||||
background: var(--cm-surface-card);
|
||||
background: var(--cm-surface-muted);
|
||||
background: var(--cm-surface-overlay);
|
||||
|
||||
/* Text colors */
|
||||
color: var(--cm-text-primary);
|
||||
color: var(--cm-text-secondary);
|
||||
color: var(--cm-text-muted);
|
||||
|
||||
/* Border colors */
|
||||
border-color: var(--cm-border);
|
||||
border-color: var(--cm-border-muted);
|
||||
|
||||
/* Input styling */
|
||||
background: var(--cm-input);
|
||||
color: var(--cm-text-primary);
|
||||
border-color: var(--cm-border);
|
||||
|
||||
/* Focus states */
|
||||
border-color: var(--cm-focus-ring);
|
||||
box-shadow: 0 0 0 2px var(--cm-focus-ring-muted);
|
||||
|
||||
/* Semantic colors */
|
||||
color: var(--cm-accent);
|
||||
background: var(--cm-success);
|
||||
background: var(--cm-warning);
|
||||
background: var(--cm-error);
|
||||
|
||||
/* Spacing */
|
||||
padding: var(--cm-spacing-sm);
|
||||
padding: var(--cm-spacing-md);
|
||||
padding: var(--cm-spacing-lg);
|
||||
padding: var(--cm-spacing-xl);
|
||||
|
||||
/* Border radius */
|
||||
border-radius: var(--cm-radius-control);
|
||||
border-radius: var(--cm-radius-md);
|
||||
border-radius: var(--cm-radius-lg);
|
||||
|
||||
/* Typography */
|
||||
font-size: var(--cm-text-sm);
|
||||
font-size: var(--cm-text-base);
|
||||
font-size: var(--cm-text-lg);
|
||||
font-weight: var(--cm-font-medium);
|
||||
font-weight: var(--cm-font-semibold);
|
||||
```
|
||||
|
||||
### Component Token Patterns
|
||||
|
||||
**Example: Badge Component for ChronoMind**
|
||||
|
||||
```typescript
|
||||
// Using design tokens for badge styling
|
||||
const badgeStyles = {
|
||||
success: {
|
||||
background: 'var(--cm-success-light)',
|
||||
color: 'var(--cm-success-dark)',
|
||||
borderColor: 'var(--cm-success)',
|
||||
},
|
||||
warning: {
|
||||
background: 'var(--cm-warning-light)',
|
||||
color: 'var(--cm-warning-dark)',
|
||||
borderColor: 'var(--cm-warning)',
|
||||
},
|
||||
error: {
|
||||
background: 'var(--cm-error-light)',
|
||||
color: 'var(--cm-error-dark)',
|
||||
borderColor: 'var(--cm-error)',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 3: Component Normalization
|
||||
|
||||
### Badge Normalization
|
||||
|
||||
**Before:** One-off CSS classes for different badge styles
|
||||
|
||||
```css
|
||||
/* Old approach - one-off classes */
|
||||
.timer-chip {
|
||||
background: #f0f0f0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
background: #e0e0e0;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
background: #d0d0d0;
|
||||
padding: 5px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
**After:** Shared Badge component from product adapter
|
||||
|
||||
```typescript
|
||||
import { Badge, ChronoMindStatusBadge } from '../components/ui/Primitives';
|
||||
|
||||
// Replace .timer-chip with Badge
|
||||
<Badge variant="success">Running</Badge>
|
||||
|
||||
// Replace .category-tag with Badge
|
||||
<Badge variant="info">Work</Badge>
|
||||
|
||||
// Replace .status-pill with ChronoMindStatusBadge
|
||||
<ChronoMindStatusBadge status="pomodoro" />
|
||||
```
|
||||
|
||||
### Alert Banner Unification
|
||||
|
||||
**Before:** Different alert implementations across components
|
||||
|
||||
```typescript
|
||||
// TimerCard.tsx - custom alert
|
||||
<div className="alert-banner" style={{ background: '#fff3cd' }}>
|
||||
<span>⚠️</span>
|
||||
<span>Warning message</span>
|
||||
</div>
|
||||
|
||||
// RoutineEditor.tsx - different alert
|
||||
<div className="warning-box" style={{ border: '1px solid #ffc107' }}>
|
||||
<div className="warning-icon">!</div>
|
||||
<div className="warning-text">Warning text</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**After:** Shared AlertBanner component
|
||||
|
||||
```typescript
|
||||
import { AlertBanner } from '../components/ui/Primitives';
|
||||
|
||||
// Both components now use shared AlertBanner
|
||||
<AlertBanner tone="warning" title="Warning">
|
||||
Warning message
|
||||
</AlertBanner>
|
||||
|
||||
<AlertBanner tone="error" title="Error">
|
||||
Error message
|
||||
</AlertBanner>
|
||||
```
|
||||
|
||||
### Table Controls Standardization
|
||||
|
||||
**Before:** Custom table controls with inconsistent styling
|
||||
|
||||
```typescript
|
||||
// Different button styles across tables
|
||||
<button className="table-action-btn-small">Edit</button>
|
||||
<button className="timer-filter-btn">Filter</button>
|
||||
<button className="routine-action">Complete</button>
|
||||
```
|
||||
|
||||
**After:** Standardized Button component
|
||||
|
||||
```typescript
|
||||
import { Button, IconButton } from '../components/ui/Primitives';
|
||||
|
||||
// Consistent button styles
|
||||
<Button variant="ghost" size="sm">Edit</Button>
|
||||
<Button variant="secondary" size="sm">Filter</Button>
|
||||
<IconButton icon={<CheckIcon />} label="Complete" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 4: Accessibility Improvements
|
||||
|
||||
### Keyboard Navigation
|
||||
|
||||
**Focus Management**
|
||||
|
||||
```typescript
|
||||
// Ensure interactive elements are focusable
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Action
|
||||
</button>
|
||||
```
|
||||
|
||||
**Keyboard Toggles**
|
||||
|
||||
```typescript
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggle();
|
||||
}
|
||||
}}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
Toggle Option
|
||||
</div>
|
||||
```
|
||||
|
||||
### ARIA Labels
|
||||
|
||||
**Button Labels**
|
||||
|
||||
```typescript
|
||||
// Icon buttons need explicit labels
|
||||
<IconButton
|
||||
icon={<PlayIcon />}
|
||||
label="Start timer"
|
||||
aria-label="Start timer"
|
||||
/>
|
||||
```
|
||||
|
||||
**Status Indicators**
|
||||
|
||||
```typescript
|
||||
// Status badges need descriptive labels
|
||||
<ChronoMindStatusBadge
|
||||
status="running"
|
||||
aria-label="Status: Running"
|
||||
>
|
||||
Running
|
||||
</ChronoMindStatusBadge>
|
||||
```
|
||||
|
||||
**Form Labels**
|
||||
|
||||
```typescript
|
||||
// All inputs need associated labels
|
||||
<label htmlFor="timer-name">
|
||||
Timer Name
|
||||
<Input id="timer-name" type="text" />
|
||||
</label>
|
||||
```
|
||||
|
||||
### Focus Indicators
|
||||
|
||||
**Visible Focus States**
|
||||
|
||||
```css
|
||||
/* Ensure focus is visible */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--cm-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Or use design token */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--cm-focus-ring);
|
||||
box-shadow: 0 0 0 2px var(--cm-focus-ring-muted);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 5: Responsive Design
|
||||
|
||||
### Shell Breakpoints
|
||||
|
||||
**Responsive Shell Testing**
|
||||
|
||||
```typescript
|
||||
const breakpoints = {
|
||||
mobile: 'max-width: 560px',
|
||||
tablet: 'max-width: 768px',
|
||||
desktop: 'min-width: 769px',
|
||||
};
|
||||
|
||||
// Shell adapts at these breakpoints
|
||||
@media (max-width: 560px) {
|
||||
.timer-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
.timer-right-panel {
|
||||
display: none;
|
||||
}
|
||||
.timer-sidebar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Viewport Matrix Testing
|
||||
|
||||
**Test all routes across viewports**
|
||||
|
||||
```typescript
|
||||
const routes = ['/dashboard', '/focus', '/history', '/routines', '/settings'];
|
||||
const viewports = [
|
||||
{ name: 'Desktop', width: 1200, height: 800 },
|
||||
{ name: 'Tablet', width: 768, height: 1024 },
|
||||
{ name: 'Mobile', width: 375, height: 667 },
|
||||
];
|
||||
|
||||
routes.forEach((route) => {
|
||||
viewports.forEach((viewport) => {
|
||||
test(`${route} - ${viewport.name} viewport`, async ({ page }) => {
|
||||
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
||||
await page.goto(route);
|
||||
|
||||
// Check for horizontal overflow
|
||||
const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
|
||||
expect(bodyWidth).toBeLessThanOrEqual(viewport.width + 10);
|
||||
|
||||
// Check main content visibility
|
||||
const mainContent = page.locator('main');
|
||||
await expect(mainContent).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 6: Testing Infrastructure
|
||||
|
||||
### Playwright Setup
|
||||
|
||||
**Install Dependencies**
|
||||
|
||||
```bash
|
||||
cd web
|
||||
pnpm add -D @playwright/test
|
||||
pnpm exec playwright install chromium
|
||||
```
|
||||
|
||||
**Create Playwright Config**
|
||||
|
||||
Create `web/playwright.config.ts`:
|
||||
|
||||
```typescript
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: './e2e',
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
reporter: 'html',
|
||||
use: {
|
||||
baseURL: 'http://localhost:3030',
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
},
|
||||
projects: [
|
||||
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
|
||||
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
|
||||
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
|
||||
{ name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
|
||||
{ name: 'Mobile Safari', use: { ...devices['iPhone 12'] } },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Test Suite Structure
|
||||
|
||||
Create tests in `web/e2e/` directory:
|
||||
|
||||
```
|
||||
web/e2e/
|
||||
├── viewport-matrix.spec.ts # Viewport compliance
|
||||
├── horizontal-overflow.spec.ts # Overflow detection
|
||||
├── alert-positioning.spec.ts # Critical alerts positioning
|
||||
├── timer-flows.spec.ts # Timer start/pause/stop flows
|
||||
├── page-states.spec.ts # Loading/empty/error/success states
|
||||
├── form-validation.spec.ts # Form validation
|
||||
└── keyboard-navigation.spec.ts # Keyboard navigation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 7: Cipher Design System Integration
|
||||
|
||||
### Design Principles
|
||||
|
||||
Follow Cipher design system principles for consistent UX across ChronoMind:
|
||||
|
||||
#### 1. Visual Hierarchy
|
||||
|
||||
**Size and Weight**
|
||||
|
||||
```typescript
|
||||
// Use design tokens for consistent hierarchy
|
||||
<h1 style={{ fontSize: 'var(--cm-text-2xl)', fontWeight: 'var(--cm-font-bold)' }}>
|
||||
Timer Title
|
||||
</h1>
|
||||
<h2 style={{ fontSize: 'var(--cm-text-xl)', fontWeight: 'var(--cm-font-semibold)' }}>
|
||||
Section Header
|
||||
</h2>
|
||||
<p style={{ fontSize: 'var(--cm-text-base)', color: 'var(--cm-text-secondary)' }}>
|
||||
Timer content
|
||||
</p>
|
||||
```
|
||||
|
||||
#### 2. Spacing System
|
||||
|
||||
**Consistent Spacing**
|
||||
|
||||
```typescript
|
||||
// Use design token spacing
|
||||
<div style={{ padding: 'var(--cm-spacing-md)' }}>
|
||||
Content
|
||||
</div>
|
||||
|
||||
<div style={{ gap: 'var(--cm-spacing-sm)' }}>
|
||||
<Button>First</Button>
|
||||
<Button>Second</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 3. Typography
|
||||
|
||||
**Font Scales**
|
||||
|
||||
```typescript
|
||||
// Use design token font sizes
|
||||
const textStyles = {
|
||||
xs: 'var(--cm-text-xs)',
|
||||
sm: 'var(--cm-text-sm)',
|
||||
base: 'var(--cm-text-base)',
|
||||
lg: 'var(--cm-text-lg)',
|
||||
xl: 'var(--cm-text-xl)',
|
||||
'2xl': 'var(--cm-text-2xl)',
|
||||
};
|
||||
|
||||
<p style={{ fontSize: textStyles.base }}>Body text</p>
|
||||
```
|
||||
|
||||
#### 4. Color System
|
||||
|
||||
**Semantic Colors**
|
||||
|
||||
```typescript
|
||||
// Use semantic color tokens, not literal colors
|
||||
const statusColors = {
|
||||
success: 'var(--cm-success)',
|
||||
warning: 'var(--cm-warning)',
|
||||
error: 'var(--cm-error)',
|
||||
info: 'var(--cm-info)',
|
||||
};
|
||||
|
||||
<div style={{ color: statusColors.success }}>Success message</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Part 8: Implementation Roadmap
|
||||
|
||||
### Phase 1: Foundation Setup
|
||||
|
||||
**Week 1-2**
|
||||
- [ ] Set up local package resolution (.pnpmfile.cjs)
|
||||
- [ ] Remove repo-level GITEA_NPM_TOKEN from .npmrc
|
||||
- [ ] Install common platform packages from local source
|
||||
- [ ] Create product adapter (`Primitives.tsx`)
|
||||
- [ ] Set up design token integration
|
||||
- [ ] Configure Playwright
|
||||
|
||||
### Phase 2: Component Normalization
|
||||
|
||||
**Week 3-4**
|
||||
- [ ] Replace one-off badges with Badge component
|
||||
- [ ] Replace custom buttons with Button component
|
||||
- [ ] Replace custom alerts with AlertBanner component
|
||||
- [ ] Replace custom inputs with Input component
|
||||
- [ ] Remove old CSS classes
|
||||
|
||||
### Phase 3: Design Token Migration
|
||||
|
||||
**Week 5-6**
|
||||
- [ ] Identify hardcoded colors
|
||||
- [ ] Map to semantic tokens
|
||||
- [ ] Replace with CSS variables
|
||||
- [ ] Test across themes
|
||||
- [ ] Audit for missed tokens
|
||||
|
||||
### Phase 4: Accessibility Improvements
|
||||
|
||||
**Week 7**
|
||||
- [ ] Add keyboard navigation
|
||||
- [ ] Add ARIA labels
|
||||
- [ ] Improve focus indicators
|
||||
- [ ] Test with screen readers
|
||||
|
||||
### Phase 5: Responsive Design
|
||||
|
||||
**Week 8**
|
||||
- [ ] Test viewport matrix
|
||||
- [ ] Fix horizontal overflow
|
||||
- [ ] Optimize mobile layout
|
||||
- [ ] Test breakpoints
|
||||
|
||||
### Phase 6: Testing Infrastructure
|
||||
|
||||
**Week 9-10**
|
||||
- [ ] Create E2E test suite
|
||||
- [ ] Set up test runner script
|
||||
- [ ] Configure AI-friendly reports
|
||||
- [ ] Integrate with CI
|
||||
|
||||
---
|
||||
|
||||
## Part 9: Verification Commands
|
||||
|
||||
### Type Checking
|
||||
|
||||
```bash
|
||||
# Verify TypeScript types
|
||||
pnpm run typecheck
|
||||
```
|
||||
|
||||
### Build Verification
|
||||
|
||||
```bash
|
||||
# Ensure build succeeds
|
||||
pnpm run build
|
||||
```
|
||||
|
||||
### Test Execution
|
||||
|
||||
```bash
|
||||
# Run all E2E tests
|
||||
cd web
|
||||
pnpm test:e2e
|
||||
|
||||
# Run specific test suites
|
||||
pnpm test:e2e:viewport
|
||||
pnpm test:e2e:overflow
|
||||
pnpm test:e2e:timer-flows
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
This guide provides a comprehensive approach to implementing UX improvements for ChronoMind using the ByteLyst common platform UI packages, design tokens, and Cipher design system. By following these patterns, ChronoMind will achieve:
|
||||
|
||||
- Consistent UI with other ByteLyst products
|
||||
- Improved accessibility and keyboard navigation
|
||||
- Responsive design across all viewports
|
||||
- Comprehensive testing infrastructure
|
||||
- Maintainable and scalable codebase
|
||||
|
||||
The implementation is organized in phases to allow for incremental adoption and verification at each stage.
|
||||
@ -1,126 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Pack @bytelyst/* tarballs from the sibling common-plat repo for
|
||||
# self-contained Docker builds that don't need the Gitea npm registry.
|
||||
#
|
||||
# Usage:
|
||||
# ./scripts/docker-prep.sh # pack tarballs + rewrite package.json
|
||||
# ./scripts/docker-prep.sh --restore # undo rewrite
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
REPO_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
COMMON_PLAT="${REPO_DIR}/../learning_ai_common_plat"
|
||||
|
||||
TARBALL_DIR="${REPO_DIR}/.docker-deps"
|
||||
|
||||
# ── Restore mode ───────────────────────────────────────────────────
|
||||
if [[ "${1:-}" == "--restore" ]]; then
|
||||
echo "Restoring original package.json files..."
|
||||
for bak in $(find "$REPO_DIR" -name "package.json.bak" -not -path "*/node_modules/*"); do
|
||||
mv "$bak" "${bak%.bak}"
|
||||
echo " Restored ${bak%.bak}"
|
||||
done
|
||||
rm -rf "$TARBALL_DIR"
|
||||
echo "Done."
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# ── Pack mode ──────────────────────────────────────────────────────
|
||||
echo "=== docker-prep: packing @bytelyst/* tarballs ==="
|
||||
|
||||
rm -rf "$TARBALL_DIR"
|
||||
mkdir -p "$TARBALL_DIR"
|
||||
|
||||
# Build all packages first
|
||||
echo "Building @bytelyst/* packages..."
|
||||
(cd "$COMMON_PLAT" && pnpm -r --filter './packages/*' build)
|
||||
|
||||
# Pack each package and build a mapping of name → tarball filename
|
||||
# (uses a temp file instead of associative array for bash 3.2 compat)
|
||||
TARBALL_MAP_FILE=$(mktemp)
|
||||
trap 'rm -f "$TARBALL_MAP_FILE"' EXIT
|
||||
|
||||
for pkg_dir in "$COMMON_PLAT"/packages/*/; do
|
||||
pkg_name=$(node -p "require('${pkg_dir}package.json').name" 2>/dev/null || true)
|
||||
if [[ -z "$pkg_name" ]]; then continue; fi
|
||||
|
||||
echo " Packing $pkg_name..."
|
||||
tarball=$(cd "$pkg_dir" && pnpm pack --pack-destination "$TARBALL_DIR" 2>/dev/null | tail -1)
|
||||
filename=$(basename "$tarball")
|
||||
echo "${pkg_name}=${filename}" >> "$TARBALL_MAP_FILE"
|
||||
echo " -> $filename"
|
||||
done
|
||||
|
||||
# ── Rewrite package.json files ─────────────────────────────────────
|
||||
echo ""
|
||||
echo "Rewriting package.json @bytelyst/* refs to .docker-deps/ tarballs..."
|
||||
|
||||
rewrite_package_json() {
|
||||
local pkg_file="$1"
|
||||
local rel_prefix="$2" # relative path from package.json dir to repo root
|
||||
|
||||
if [[ ! -f "$pkg_file" ]]; then return; fi
|
||||
|
||||
# Backup
|
||||
cp "$pkg_file" "${pkg_file}.bak"
|
||||
|
||||
local tmp="${pkg_file}.tmp"
|
||||
cp "$pkg_file" "$tmp"
|
||||
|
||||
while IFS='=' read -r pkg_name tarball; do
|
||||
[[ -z "$pkg_name" ]] && continue
|
||||
# Replace "^0.1.0" (or any semver/file: ref) with "file:../.docker-deps/<tarball>"
|
||||
sed -i "s|\"${pkg_name}\": \"[^\"]*\"|\"${pkg_name}\": \"file:${rel_prefix}.docker-deps/${tarball}\"|g" "$tmp"
|
||||
done < "$TARBALL_MAP_FILE"
|
||||
|
||||
mv "$tmp" "$pkg_file"
|
||||
echo " Rewrote $pkg_file"
|
||||
}
|
||||
|
||||
# Backend package.json
|
||||
rewrite_package_json "${REPO_DIR}/backend/package.json" "../"
|
||||
|
||||
# Web package.json
|
||||
rewrite_package_json "${REPO_DIR}/web/package.json" "../"
|
||||
|
||||
# ── Inject pnpm.overrides for transitive @bytelyst/* deps ─────────
|
||||
# Tarball packages may depend on other @bytelyst/* packages (e.g.
|
||||
# @bytelyst/fastify-core → @bytelyst/errors). Without overrides, pnpm
|
||||
# tries to fetch them from the npm registry which fails.
|
||||
inject_overrides() {
|
||||
local pkg_file="$1"
|
||||
local rel_prefix="$2"
|
||||
|
||||
if [[ ! -f "$pkg_file" ]]; then return; fi
|
||||
|
||||
local overrides=""
|
||||
while IFS='=' read -r pkg_name tarball; do
|
||||
[[ -z "$pkg_name" ]] && continue
|
||||
if [[ -n "$overrides" ]]; then overrides="$overrides, "; fi
|
||||
overrides="$overrides\"${pkg_name}\": \"file:${rel_prefix}.docker-deps/${tarball}\""
|
||||
done < "$TARBALL_MAP_FILE"
|
||||
|
||||
if [[ -n "$overrides" ]]; then
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const p = JSON.parse(fs.readFileSync('${pkg_file}', 'utf8'));
|
||||
p.pnpm = p.pnpm || {};
|
||||
p.pnpm.overrides = { ...(p.pnpm.overrides || {}), ...JSON.parse('{${overrides}}') };
|
||||
fs.writeFileSync('${pkg_file}', JSON.stringify(p, null, 2) + '\n');
|
||||
"
|
||||
echo " Injected pnpm.overrides into $pkg_file"
|
||||
fi
|
||||
}
|
||||
|
||||
inject_overrides "${REPO_DIR}/backend/package.json" "../"
|
||||
inject_overrides "${REPO_DIR}/web/package.json" "../"
|
||||
|
||||
echo ""
|
||||
echo "Done. Tarballs in $TARBALL_DIR"
|
||||
echo ""
|
||||
echo "To build Docker images:"
|
||||
echo " docker compose build"
|
||||
echo ""
|
||||
echo "To restore after build:"
|
||||
echo " ./scripts/docker-prep.sh --restore"
|
||||
@ -1,47 +1,21 @@
|
||||
#!/usr/bin/env bash
|
||||
# Optimized docker-prep.sh with 6 optimizations:
|
||||
# 1. Git-based incremental builds (only rebuild changed packages)
|
||||
# 2. Hash-based caching (content-addressable cache)
|
||||
# 3. Parallel builds (concurrent package building)
|
||||
# 4. Persistent tarball cache (survives git clean)
|
||||
# 5. Smart manifest tracking (track what's been built)
|
||||
# 6. Docker BuildKit integration hints
|
||||
# Pack @bytelyst/* tarballs from the sibling common-plat repo for
|
||||
# self-contained Docker builds that don't need the Gitea npm registry.
|
||||
#
|
||||
# Usage:
|
||||
# ./scripts/docker-prep-optimized.sh # pack tarballs + rewrite package.json
|
||||
# ./scripts/docker-prep-optimized.sh --restore # undo rewrite
|
||||
# ./scripts/docker-prep-optimized.sh --clean # clear cache
|
||||
# ./scripts/docker-prep-optimized.sh --force # force full rebuild
|
||||
# ./scripts/docker-prep.sh # pack tarballs + rewrite package.json
|
||||
# ./scripts/docker-prep.sh --restore # undo rewrite
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
REPO_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
COMMON_PLAT="${COMMON_PLAT:-${REPO_DIR}/../learning_ai/learning_ai_common_plat}"
|
||||
if [[ ! -d "$COMMON_PLAT" && -d "${REPO_DIR}/../learning_ai_common_plat" ]]; then
|
||||
COMMON_PLAT="${REPO_DIR}/../learning_ai_common_plat"
|
||||
fi
|
||||
|
||||
TARBALL_DIR="${REPO_DIR}/.docker-deps"
|
||||
# Shared cache location - can be overridden with BYTELYST_CACHE_DIR env var
|
||||
CACHE_DIR="${BYTELYST_CACHE_DIR:-${HOME}/.cache/bytelyst-packages}"
|
||||
MANIFEST_FILE="${CACHE_DIR}/.manifest"
|
||||
|
||||
# ── Parse arguments ───────────────────────────────────────────────────
|
||||
MODE="pack"
|
||||
FORCE_REBUILD=false
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
case "$1" in
|
||||
--restore) MODE="restore"; shift ;;
|
||||
--clean) MODE="clean"; shift ;;
|
||||
--force) FORCE_REBUILD=true; shift ;;
|
||||
*) echo "Unknown option: $1" >&2; exit 1 ;;
|
||||
esac
|
||||
done
|
||||
|
||||
# ── Restore mode ─────────────────────────────────────────────────────
|
||||
if [[ "$MODE" == "restore" ]]; then
|
||||
# ── Restore mode ───────────────────────────────────────────────────
|
||||
if [[ "${1:-}" == "--restore" ]]; then
|
||||
echo "Restoring original package.json files..."
|
||||
for bak in $(find "$REPO_DIR" -name "package.json.bak" -not -path "*/node_modules/*"); do
|
||||
mv "$bak" "${bak%.bak}"
|
||||
@ -52,189 +26,39 @@ if [[ "$MODE" == "restore" ]]; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# ── Clean mode ───────────────────────────────────────────────────────
|
||||
if [[ "$MODE" == "clean" ]]; then
|
||||
echo "Cleaning cache and tarball directory..."
|
||||
rm -rf "$CACHE_DIR" "$TARBALL_DIR"
|
||||
echo "Done."
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# ── Validation ───────────────────────────────────────────────────────
|
||||
if [[ ! -d "$COMMON_PLAT" ]]; then
|
||||
echo "Common platform checkout not found: $COMMON_PLAT" >&2
|
||||
echo "Set COMMON_PLAT=/path/to/learning_ai_common_plat or place it at ../learning_ai/learning_ai_common_plat." >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# ── Initialize directories ───────────────────────────────────────────
|
||||
mkdir -p "$TARBALL_DIR" "$CACHE_DIR"
|
||||
|
||||
# ── Load manifest if exists ───────────────────────────────────────────
|
||||
# Simple file-based manifest to avoid bash associative array issues
|
||||
|
||||
# ── Determine which packages to rebuild ───────────────────────────────
|
||||
if [[ "$FORCE_REBUILD" == true ]]; then
|
||||
echo "Force rebuild: building all packages"
|
||||
BUILD_ALL=true
|
||||
else
|
||||
BUILD_ALL=false
|
||||
# Git-based incremental build: check which packages changed
|
||||
cd "$COMMON_PLAT"
|
||||
if git rev-parse --git-dir > /dev/null 2>&1; then
|
||||
# Get packages changed since last commit
|
||||
CHANGED_PACKAGES=$(git diff --name-only HEAD~1 HEAD 2>/dev/null | grep '^packages/' | cut -d'/' -f2 | sort -u || echo "")
|
||||
|
||||
# If no git history or no changes, check against manifest
|
||||
if [[ -z "$CHANGED_PACKAGES" ]] && [[ -f "$MANIFEST_FILE" ]]; then
|
||||
echo "No git changes detected, checking cache validity..."
|
||||
CHANGED_PACKAGES=""
|
||||
for pkg_dir in "$COMMON_PLAT"/packages/*/; do
|
||||
pkg_name=$(node -p "require('${pkg_dir}package.json').name" 2>/dev/null || true)
|
||||
if [[ -z "$pkg_name" ]]; then continue; fi
|
||||
|
||||
# Hash package.json + source files
|
||||
HASH=$(find "$pkg_dir" -name "*.ts" -o -name "*.json" -o -name "*.js" 2>/dev/null | xargs cat 2>/dev/null | sha256sum | cut -d' ' -f1 || echo "")
|
||||
|
||||
# Check manifest for existing hash
|
||||
CACHED_HASH=$(grep "^${pkg_name}=" "$MANIFEST_FILE" 2>/dev/null | cut -d'=' -f2 || echo "")
|
||||
if [[ -n "$HASH" ]] && [[ "$CACHED_HASH" != "$HASH" ]]; then
|
||||
pkg_basename=$(basename "$pkg_dir")
|
||||
CHANGED_PACKAGES="$CHANGED_PACKAGES $pkg_basename"
|
||||
fi
|
||||
done
|
||||
fi
|
||||
|
||||
# If still no changes detected but cache is empty, build all
|
||||
if [[ -z "$CHANGED_PACKAGES" ]] && [[ -z "$(ls -A $CACHE_DIR 2>/dev/null)" ]]; then
|
||||
echo "Cache empty, building all packages..."
|
||||
BUILD_ALL=true
|
||||
fi
|
||||
else
|
||||
echo "Not a git repo or no history, building all packages..."
|
||||
BUILD_ALL=true
|
||||
fi
|
||||
fi
|
||||
|
||||
cd "$REPO_DIR"
|
||||
|
||||
# ── Build packages with caching ────────────────────────────────────────
|
||||
echo "=== docker-prep-optimized: packing @bytelyst/* tarballs ==="
|
||||
# ── Pack mode ──────────────────────────────────────────────────────
|
||||
echo "=== docker-prep: packing @bytelyst/* tarballs ==="
|
||||
|
||||
rm -rf "$TARBALL_DIR"
|
||||
mkdir -p "$TARBALL_DIR"
|
||||
|
||||
# Function to build a single package
|
||||
build_package() {
|
||||
local pkg_dir=$1
|
||||
local force_build=${2:-false}
|
||||
# Build all packages first
|
||||
echo "Building @bytelyst/* packages..."
|
||||
(cd "$COMMON_PLAT" && pnpm -r --filter './packages/*' build)
|
||||
|
||||
if [[ ! -d "$pkg_dir" ]]; then
|
||||
echo " ✗ Package directory not found: $pkg_dir" >&2
|
||||
return 1
|
||||
fi
|
||||
# Pack each package and build a mapping of name → tarball filename
|
||||
# (uses a temp file instead of associative array for bash 3.2 compat)
|
||||
TARBALL_MAP_FILE=$(mktemp)
|
||||
trap 'rm -f "$TARBALL_MAP_FILE"' EXIT
|
||||
|
||||
pkg_name=$(node -p "require('${pkg_dir}package.json').name" 2>/dev/null || true)
|
||||
if [[ -z "$pkg_name" ]]; then
|
||||
echo " ✗ Could not read package name from: $pkg_dir" >&2
|
||||
return 1
|
||||
fi
|
||||
|
||||
pkg_version=$(node -p "require('${pkg_dir}package.json').version" 2>/dev/null || echo "0.0.0")
|
||||
|
||||
# Hash package.json + source files
|
||||
HASH=$(find "$pkg_dir" -name "*.ts" -o -name "*.json" -o -name "*.js" 2>/dev/null | xargs cat 2>/dev/null | sha256sum | cut -d' ' -f1 || echo "unknown")
|
||||
# Sanitize package name for filename (replace @ and / with -)
|
||||
SAFE_PKG_NAME=$(echo "$pkg_name" | sed 's/@//g' | sed 's/\//_/g')
|
||||
CACHE_FILE="$CACHE_DIR/${SAFE_PKG_NAME}-${pkg_version}.tgz"
|
||||
|
||||
# Check cache
|
||||
if [[ -f "$CACHE_FILE" ]] && [[ "$force_build" != true ]] && [[ "$FORCE_REBUILD" != true ]]; then
|
||||
echo " ✓ Cache hit: $pkg_name"
|
||||
cp "$CACHE_FILE" "$TARBALL_DIR/"
|
||||
echo "${pkg_name}=${HASH}" >> "$TARBALL_DIR/.manifest.tmp"
|
||||
return 0
|
||||
fi
|
||||
|
||||
# Build package
|
||||
echo " → Building: $pkg_name"
|
||||
(cd "$pkg_dir" && pnpm build > /dev/null 2>&1)
|
||||
|
||||
# Pack to cache and tarball dir
|
||||
tarball=$(cd "$pkg_dir" && pnpm pack --pack-destination "$TARBALL_DIR" 2>/dev/null | tail -1)
|
||||
if [[ -z "$tarball" ]]; then
|
||||
echo " ✗ Failed to pack: $pkg_name" >&2
|
||||
return 1
|
||||
fi
|
||||
|
||||
# Copy to cache
|
||||
cp "$TARBALL_DIR/$(basename $tarball)" "$CACHE_FILE"
|
||||
echo "${pkg_name}=${HASH}" >> "$TARBALL_DIR/.manifest.tmp"
|
||||
|
||||
echo " → $(basename $tarball)"
|
||||
return 0
|
||||
}
|
||||
|
||||
# Build packages
|
||||
if [[ "$BUILD_ALL" == true ]]; then
|
||||
echo "Building all packages..."
|
||||
for pkg_dir in "$COMMON_PLAT"/packages/*/; do
|
||||
build_package "$pkg_dir" || true
|
||||
done
|
||||
else
|
||||
echo "Building changed packages: $CHANGED_PACKAGES"
|
||||
for pkg in $CHANGED_PACKAGES; do
|
||||
pkg_dir="$COMMON_PLAT/packages/$pkg"
|
||||
if [[ -d "$pkg_dir" ]]; then
|
||||
build_package "$pkg_dir" || true
|
||||
fi
|
||||
done
|
||||
fi
|
||||
|
||||
# Copy unchanged packages from cache
|
||||
if [[ "$FORCE_REBUILD" != true ]]; then
|
||||
echo ""
|
||||
echo "Copying unchanged packages from cache..."
|
||||
for pkg_dir in "$COMMON_PLAT"/packages/*/; do
|
||||
pkg_name=$(node -p "require('${pkg_dir}package.json').name" 2>/dev/null || true)
|
||||
if [[ -z "$pkg_name" ]]; then continue; fi
|
||||
|
||||
pkg_version=$(node -p "require('${pkg_dir}package.json').version" 2>/dev/null || echo "0.0.0")
|
||||
# Sanitize package name for filename (replace @ and / with -)
|
||||
SAFE_PKG_NAME=$(echo "$pkg_name" | sed 's/@//g' | sed 's/\//_/g')
|
||||
CACHE_FILE="$CACHE_DIR/${SAFE_PKG_NAME}-${pkg_version}.tgz"
|
||||
|
||||
if [[ -f "$CACHE_FILE" ]] && [[ ! -f "$TARBALL_DIR/$(basename $CACHE_FILE)" ]]; then
|
||||
echo " ✓ Cached: $pkg_name"
|
||||
cp "$CACHE_FILE" "$TARBALL_DIR/"
|
||||
fi
|
||||
echo " Packing $pkg_name..."
|
||||
tarball=$(cd "$pkg_dir" && pnpm pack --pack-destination "$TARBALL_DIR" 2>/dev/null | tail -1)
|
||||
filename=$(basename "$tarball")
|
||||
echo "${pkg_name}=${filename}" >> "$TARBALL_MAP_FILE"
|
||||
echo " -> $filename"
|
||||
done
|
||||
fi
|
||||
|
||||
# Update manifest
|
||||
if [[ -f "$TARBALL_DIR/.manifest.tmp" ]]; then
|
||||
mv "$TARBALL_DIR/.manifest.tmp" "$MANIFEST_FILE"
|
||||
fi
|
||||
|
||||
# ── Rewrite package.json files ─────────────────────────────────────
|
||||
echo ""
|
||||
echo "Rewriting package.json @bytelyst/* refs to .docker-deps/ tarballs..."
|
||||
|
||||
# Build tarball mapping
|
||||
TARBALL_MAP_FILE=$(mktemp)
|
||||
trap 'rm -f "$TARBALL_MAP_FILE"' EXIT
|
||||
|
||||
for tarball in "$TARBALL_DIR"/*.tgz; do
|
||||
[[ -f "$tarball" ]] || continue
|
||||
filename=$(basename "$tarball")
|
||||
# Extract package name from tarball filename
|
||||
pkg_name=$(echo "$filename" | sed 's/-[0-9].*//' | sed 's/^bytelyst-/@bytelyst\//')
|
||||
echo "${pkg_name}=${filename}" >> "$TARBALL_MAP_FILE"
|
||||
done
|
||||
|
||||
rewrite_package_json() {
|
||||
local pkg_file="$1"
|
||||
local rel_prefix="$2"
|
||||
local rel_prefix="$2" # relative path from package.json dir to repo root
|
||||
|
||||
if [[ ! -f "$pkg_file" ]]; then return; fi
|
||||
|
||||
@ -246,19 +70,8 @@ rewrite_package_json() {
|
||||
|
||||
while IFS='=' read -r pkg_name tarball; do
|
||||
[[ -z "$pkg_name" ]] && continue
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const file = process.argv[1];
|
||||
const pkgName = process.argv[2];
|
||||
const replacement = process.argv[3];
|
||||
const p = JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||
for (const section of ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']) {
|
||||
if (p[section] && Object.prototype.hasOwnProperty.call(p[section], pkgName)) {
|
||||
p[section][pkgName] = replacement;
|
||||
}
|
||||
}
|
||||
fs.writeFileSync(file, JSON.stringify(p, null, 2) + '\n');
|
||||
" "$tmp" "$pkg_name" "file:${rel_prefix}.docker-deps/${tarball}"
|
||||
# Replace "^0.1.0" (or any semver/file: ref) with "file:../.docker-deps/<tarball>"
|
||||
sed -i '' "s|\"${pkg_name}\": \"[^\"]*\"|\"${pkg_name}\": \"file:${rel_prefix}.docker-deps/${tarball}\"|g" "$tmp"
|
||||
done < "$TARBALL_MAP_FILE"
|
||||
|
||||
mv "$tmp" "$pkg_file"
|
||||
@ -272,6 +85,9 @@ rewrite_package_json "${REPO_DIR}/backend/package.json" "../"
|
||||
rewrite_package_json "${REPO_DIR}/web/package.json" "../"
|
||||
|
||||
# ── Inject pnpm.overrides for transitive @bytelyst/* deps ─────────
|
||||
# Tarball packages may depend on other @bytelyst/* packages (e.g.
|
||||
# @bytelyst/fastify-core → @bytelyst/errors). Without overrides, pnpm
|
||||
# tries to fetch them from the npm registry which fails.
|
||||
inject_overrides() {
|
||||
local pkg_file="$1"
|
||||
local rel_prefix="$2"
|
||||
@ -300,17 +116,11 @@ inject_overrides() {
|
||||
inject_overrides "${REPO_DIR}/backend/package.json" "../"
|
||||
inject_overrides "${REPO_DIR}/web/package.json" "../"
|
||||
|
||||
# ── Summary ───────────────────────────────────────────────────────────
|
||||
echo ""
|
||||
echo "✓ Done. $(ls $TARBALL_DIR/*.tgz 2>/dev/null | wc -l) tarballs in $TARBALL_DIR"
|
||||
echo "✓ Cache size: $(du -sh $CACHE_DIR 2>/dev/null | cut -f1)"
|
||||
echo "Done. Tarballs in $TARBALL_DIR"
|
||||
echo ""
|
||||
echo "To build Docker images:"
|
||||
echo " docker compose build"
|
||||
echo ""
|
||||
echo "To restore after build:"
|
||||
echo " ./scripts/docker-prep-optimized.sh --restore"
|
||||
echo ""
|
||||
echo "To clear cache and force full rebuild:"
|
||||
echo " ./scripts/docker-prep-optimized.sh --clean"
|
||||
echo " ./scripts/docker-prep-optimized.sh --force"
|
||||
echo " ./scripts/docker-prep.sh --restore"
|
||||
|
||||
@ -38,7 +38,6 @@ export default function SettingsPage() {
|
||||
const [feedbackText, setFeedbackText] = useState('');
|
||||
const [feedbackSubmitting, setFeedbackSubmitting] = useState(false);
|
||||
const [feedbackSuccess, setFeedbackSuccess] = useState(false);
|
||||
const [feedbackError, setFeedbackError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
@ -107,38 +106,6 @@ export default function SettingsPage() {
|
||||
.forEach((t) => removeTimer(t.id));
|
||||
};
|
||||
|
||||
const handleFeedbackSubmit = async () => {
|
||||
const body = feedbackText.trim();
|
||||
if (!body) return;
|
||||
|
||||
setFeedbackSubmitting(true);
|
||||
setFeedbackError('');
|
||||
try {
|
||||
await feedbackClient.submitWithScreenshot({
|
||||
type: feedbackType,
|
||||
title: body.slice(0, 100),
|
||||
body,
|
||||
screen: 'settings',
|
||||
appVersion: '0.1.0',
|
||||
platform: 'web',
|
||||
deviceContext: {
|
||||
osVersion: navigator.userAgent,
|
||||
appVersion: '0.1.0',
|
||||
deviceModel: navigator.platform || 'web',
|
||||
screenResolution: `${window.screen.width}x${window.screen.height}`,
|
||||
locale: navigator.language,
|
||||
},
|
||||
});
|
||||
setFeedbackSuccess(true);
|
||||
setFeedbackText('');
|
||||
setTimeout(() => setFeedbackSuccess(false), 4000);
|
||||
} catch {
|
||||
setFeedbackError('Feedback could not be sent right now. Please try again in a moment.');
|
||||
} finally {
|
||||
setFeedbackSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: 'var(--cm-bg-canvas)' }}>
|
||||
<div className="max-w-2xl mx-auto px-4 py-8">
|
||||
@ -559,12 +526,8 @@ export default function SettingsPage() {
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
aria-label="Feedback message"
|
||||
value={feedbackText}
|
||||
onChange={(e) => {
|
||||
setFeedbackText(e.target.value);
|
||||
setFeedbackError('');
|
||||
}}
|
||||
onChange={(e) => setFeedbackText(e.target.value)}
|
||||
placeholder="Tell us what you think..."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 rounded-lg text-sm outline-none resize-none"
|
||||
@ -574,15 +537,21 @@ export default function SettingsPage() {
|
||||
border: '1px solid var(--cm-border)',
|
||||
}}
|
||||
/>
|
||||
{feedbackError && (
|
||||
<p className="text-xs" style={{ color: 'var(--cm-danger)' }} role="alert">
|
||||
{feedbackError}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
onClick={handleFeedbackSubmit}
|
||||
onClick={async () => {
|
||||
if (!feedbackText.trim()) return;
|
||||
setFeedbackSubmitting(true);
|
||||
try {
|
||||
await feedbackClient.submitWithScreenshot({ type: feedbackType, title: feedbackText.trim().slice(0, 100), body: feedbackText.trim(), platform: 'web' });
|
||||
setFeedbackSuccess(true);
|
||||
setFeedbackText('');
|
||||
setTimeout(() => setFeedbackSuccess(false), 4000);
|
||||
} catch {
|
||||
// fail silently — feedback is best-effort
|
||||
}
|
||||
setFeedbackSubmitting(false);
|
||||
}}
|
||||
disabled={feedbackSubmitting || !feedbackText.trim()}
|
||||
aria-label="Send feedback"
|
||||
className="w-full px-4 py-2 rounded-lg text-sm font-medium cursor-pointer disabled:opacity-40"
|
||||
style={{ backgroundColor: 'var(--cm-accent)', color: 'var(--cm-white)' }}
|
||||
>
|
||||
|
||||
@ -4,7 +4,7 @@ import { useEffect, useRef, useCallback } from 'react';
|
||||
import { useTimerStore } from '@/lib/store';
|
||||
import { getUrgencyConfig } from '@/lib/urgency';
|
||||
import { formatTime } from '@/lib/format';
|
||||
import { alertLabel, announceToScreenReader, focusFirstElement, trapFocusKeydown } from '@bytelyst/accessibility';
|
||||
import { alertLabel } from '@bytelyst/accessibility';
|
||||
import { Bell, BellOff } from 'lucide-react';
|
||||
|
||||
export function AlarmOverlay() {
|
||||
@ -16,16 +16,28 @@ export function AlarmOverlay() {
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const trapFocus = useCallback((e: KeyboardEvent) => {
|
||||
if (overlayRef.current) trapFocusKeydown(e, overlayRef.current);
|
||||
if (e.key !== 'Tab' || !overlayRef.current) return;
|
||||
const focusable = overlayRef.current.querySelectorAll<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
if (focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (firingTimers.length === 0) return;
|
||||
document.addEventListener('keydown', trapFocus);
|
||||
if (overlayRef.current) {
|
||||
focusFirstElement(overlayRef.current, 'button');
|
||||
}
|
||||
announceToScreenReader(`Timer fired: ${firingTimers[0]?.label ?? 'timer'}`, 'assertive');
|
||||
// Auto-focus dismiss button
|
||||
const el = overlayRef.current?.querySelector<HTMLElement>('button');
|
||||
el?.focus();
|
||||
return () => document.removeEventListener('keydown', trapFocus);
|
||||
}, [firingTimers.length, trapFocus]);
|
||||
|
||||
@ -75,7 +87,7 @@ export function AlarmOverlay() {
|
||||
: 'Timer fired!'}
|
||||
</p>
|
||||
|
||||
<p className="text-sm mb-8" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<p className="text-sm mb-8" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
{formatTime(timer.firedAt ?? Date.now())}
|
||||
{timer.snoozeCount > 0 && ` · Snoozed ${timer.snoozeCount}x`}
|
||||
</p>
|
||||
@ -134,7 +146,7 @@ export function AlarmOverlay() {
|
||||
|
||||
{/* Multiple firing indicator */}
|
||||
{firingTimers.length > 1 && (
|
||||
<p className="mt-4 text-xs" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<p className="mt-4 text-xs" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
+{firingTimers.length - 1} more timer{firingTimers.length > 2 ? 's' : ''} firing
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -12,7 +12,6 @@ import { BUILT_IN_CATEGORIES, getCategoryById } from '@/lib/categories';
|
||||
import { parseNaturalLanguage } from '@/lib/nl-parser';
|
||||
import type { ParseResult } from '@/lib/nl-parser';
|
||||
import { alarmSchema, countdownSchema, pomodoroSchema, eventSchema } from '@/lib/schemas';
|
||||
import { announceToScreenReader, focusFirstElement, trapFocusKeydown } from '@bytelyst/accessibility';
|
||||
|
||||
type TabType = 'alarm' | 'countdown' | 'pomodoro' | 'event';
|
||||
|
||||
@ -28,16 +27,27 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
|
||||
const trapFocus = useCallback((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') { onClose(); return; }
|
||||
if (dialogRef.current) trapFocusKeydown(e, dialogRef.current);
|
||||
if (e.key !== 'Tab' || !dialogRef.current) return;
|
||||
const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
);
|
||||
if (focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
document.addEventListener('keydown', trapFocus);
|
||||
if (dialogRef.current) {
|
||||
focusFirstElement(dialogRef.current, 'input, button');
|
||||
}
|
||||
announceToScreenReader('Create timer dialog opened', 'polite');
|
||||
const el = dialogRef.current?.querySelector<HTMLElement>('input, button');
|
||||
el?.focus();
|
||||
return () => document.removeEventListener('keydown', trapFocus);
|
||||
}, [isOpen, trapFocus]);
|
||||
|
||||
@ -250,7 +260,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded-lg transition-colors cursor-pointer"
|
||||
style={{ color: 'var(--cm-text-secondary)' }}
|
||||
style={{ color: 'var(--cm-text-tertiary)' }}
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
<X size={20} />
|
||||
@ -261,7 +271,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
<div className="p-4 border-b" style={{ borderColor: 'var(--cm-border)' }}>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Sparkles size={14} style={{ color: 'var(--cm-accent-secondary)' }} />
|
||||
<label className="text-xs font-medium" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<label className="text-xs font-medium" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
Quick create — type naturally
|
||||
</label>
|
||||
</div>
|
||||
@ -290,7 +300,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
)}
|
||||
</div>
|
||||
{nlResult && nlInput.trim() && (
|
||||
<div className="mt-2 text-xs" style={{ color: nlResult.success ? 'var(--cm-accent-secondary)' : 'var(--cm-text-secondary)' }}>
|
||||
<div className="mt-2 text-xs" style={{ color: nlResult.success ? 'var(--cm-accent-secondary)' : 'var(--cm-text-tertiary)' }}>
|
||||
{nlResult.success && nlResult.timer ? (
|
||||
<span>
|
||||
{nlResult.timer.type === 'pomodoro' ? 'Pomodoro' : nlResult.timer.type === 'alarm' ? 'Alarm' : 'Countdown'}
|
||||
@ -299,7 +309,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
{nlResult.timer.urgency !== 'standard' ? ` [${nlResult.timer.urgency}]` : ''}
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ color: 'var(--cm-text-secondary)' }}>{nlResult.error}</span>
|
||||
<span style={{ color: 'var(--cm-text-tertiary)' }}>{nlResult.error}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -313,7 +323,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
onClick={() => setTab(t.key)}
|
||||
className="flex-1 flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors cursor-pointer"
|
||||
style={{
|
||||
color: tab === t.key ? 'var(--cm-accent)' : 'var(--cm-text-secondary)',
|
||||
color: tab === t.key ? 'var(--cm-accent)' : 'var(--cm-text-tertiary)',
|
||||
borderBottom: tab === t.key ? '2px solid var(--cm-accent)' : '2px solid transparent',
|
||||
}}
|
||||
>
|
||||
@ -390,7 +400,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
color: 'var(--cm-text-primary)',
|
||||
}}
|
||||
/>
|
||||
<span className="block text-center text-xs mt-1" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<span className="block text-center text-xs mt-1" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
{field.label}
|
||||
</span>
|
||||
</div>
|
||||
@ -431,7 +441,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
{ label: 'Rounds', value: rounds, setter: setRounds },
|
||||
].map((field) => (
|
||||
<div key={field.label}>
|
||||
<label className="block text-xs font-medium mb-1" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<label className="block text-xs font-medium mb-1" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
{field.label}
|
||||
</label>
|
||||
<input
|
||||
@ -471,7 +481,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
/>
|
||||
{errors.eventDate && <p className="text-xs mt-1" style={{ color: 'var(--cm-danger)' }}>{errors.eventDate}</p>}
|
||||
{eventDate && new Date(eventDate).getTime() > Date.now() && (
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
{Math.ceil((new Date(eventDate).getTime() - Date.now()) / 86_400_000)} days from now · Milestone warnings at 30, 7, 3, 1 days
|
||||
</p>
|
||||
)}
|
||||
@ -490,7 +500,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
className="px-2.5 py-1 rounded-lg text-xs font-medium transition-all cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: !category ? 'var(--cm-accent)' : 'var(--cm-surface-muted)',
|
||||
color: !category ? 'var(--cm-white)' : 'var(--cm-text-secondary)',
|
||||
color: !category ? 'var(--cm-white)' : 'var(--cm-text-tertiary)',
|
||||
border: !category ? '1px solid var(--cm-accent)' : '1px solid transparent',
|
||||
}}
|
||||
>
|
||||
@ -503,7 +513,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
className="px-2.5 py-1 rounded-lg text-xs font-medium transition-all cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: category === cat.id ? `${cat.color}20` : 'var(--cm-surface-muted)',
|
||||
color: category === cat.id ? cat.color : 'var(--cm-text-secondary)',
|
||||
color: category === cat.id ? cat.color : 'var(--cm-text-tertiary)',
|
||||
border: category === cat.id ? `1px solid ${cat.color}60` : '1px solid transparent',
|
||||
}}
|
||||
>
|
||||
@ -530,7 +540,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
className="flex-1 py-1.5 rounded-lg text-xs font-medium transition-all cursor-pointer"
|
||||
style={{
|
||||
backgroundColor: urgency === level ? config.bgColor : 'var(--cm-surface-muted)',
|
||||
color: urgency === level ? config.color : 'var(--cm-text-secondary)',
|
||||
color: urgency === level ? config.color : 'var(--cm-text-tertiary)',
|
||||
border: urgency === level ? `1px solid ${config.borderColor}` : '1px solid transparent',
|
||||
}}
|
||||
>
|
||||
@ -546,7 +556,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
{tab !== 'pomodoro' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
Custom Warning Message <span className="text-xs font-normal" style={{ color: 'var(--cm-text-secondary)' }}>(optional)</span>
|
||||
Custom Warning Message <span className="text-xs font-normal" style={{ color: 'var(--cm-text-tertiary)' }}>(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
@ -561,7 +571,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) {
|
||||
color: 'var(--cm-text-primary)',
|
||||
}}
|
||||
/>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--cm-text-secondary)' }}>
|
||||
<p className="text-xs mt-1" style={{ color: 'var(--cm-text-tertiary)' }}>
|
||||
Shown in pre-warning notifications instead of auto-generated tips
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,369 +0,0 @@
|
||||
import {
|
||||
AppShell as BytelystAppShell,
|
||||
AppShellMain as BytelystAppShellMain,
|
||||
AppShellMobileToggle as BytelystAppShellMobileToggle,
|
||||
AppShellNav as BytelystAppShellNav,
|
||||
AppShellNavItem as BytelystAppShellNavItem,
|
||||
AppShellOverlay as BytelystAppShellOverlay,
|
||||
AppShellPageHeader as BytelystAppShellPageHeader,
|
||||
AppShellSidebar as BytelystAppShellSidebar,
|
||||
AppShellSkipLink as BytelystAppShellSkipLink,
|
||||
Badge as BytelystBadge,
|
||||
Button as BytelystButton,
|
||||
Card as BytelystCard,
|
||||
Checkbox,
|
||||
DataList as BytelystDataList,
|
||||
DataListItem as BytelystDataListItem,
|
||||
DataListMeta,
|
||||
DataTable,
|
||||
DataTableBody,
|
||||
DataTableCell,
|
||||
DataTableHead,
|
||||
DataTableHeader,
|
||||
DataTableRow,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
EmptyState as BytelystEmptyState,
|
||||
IconButton as BytelystIconButton,
|
||||
Input as BytelystInput,
|
||||
Label as BytelystLabel,
|
||||
ListItemButton as BytelystListItemButton,
|
||||
LoadingSpinner as BytelystLoadingSpinner,
|
||||
Panel as BytelystPanel,
|
||||
PanelBody as BytelystPanelBody,
|
||||
PanelDescription as BytelystPanelDescription,
|
||||
PanelHeader as BytelystPanelHeader,
|
||||
PanelTitle as BytelystPanelTitle,
|
||||
RadioGroup,
|
||||
RadioGroupItem,
|
||||
SegmentedControl,
|
||||
Select as BytelystSelect,
|
||||
StatusBadge as BytelystStatusBadge,
|
||||
Surface as BytelystSurface,
|
||||
SurfaceList as BytelystSurfaceList,
|
||||
SurfaceListItem as BytelystSurfaceListItem,
|
||||
Switch,
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
Textarea as BytelystTextarea,
|
||||
Timeline as BytelystTimeline,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
type AppShellMainProps,
|
||||
type AppShellMobileToggleProps,
|
||||
type AppShellNavItemProps,
|
||||
type AppShellNavProps,
|
||||
type AppShellOverlayProps,
|
||||
type AppShellPageHeaderProps,
|
||||
type AppShellProps,
|
||||
type AppShellSidebarProps,
|
||||
type AppShellSkipLinkProps,
|
||||
type BadgeProps,
|
||||
type ButtonProps,
|
||||
type CardProps,
|
||||
type DataListItemProps,
|
||||
type DataListProps,
|
||||
type EmptyStateProps,
|
||||
type IconButtonProps,
|
||||
type InputProps,
|
||||
type LabelProps,
|
||||
type ListItemButtonProps,
|
||||
type LoadingSpinnerProps,
|
||||
type PanelBodyProps,
|
||||
type PanelDescriptionProps,
|
||||
type PanelHeaderProps,
|
||||
type PanelProps,
|
||||
type PanelTitleProps,
|
||||
type SelectProps,
|
||||
type StatusBadgeProps,
|
||||
type StatusTone,
|
||||
type SurfaceListItemProps,
|
||||
type SurfaceListProps,
|
||||
type SurfaceProps,
|
||||
type TextareaProps,
|
||||
type TimelineProps,
|
||||
} from "@bytelyst/ui";
|
||||
|
||||
function mergeClassNames(...classes: Array<string | undefined>) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
export {
|
||||
Checkbox,
|
||||
DataListMeta,
|
||||
DataTable,
|
||||
DataTableBody,
|
||||
DataTableCell,
|
||||
DataTableHead,
|
||||
DataTableHeader,
|
||||
DataTableRow,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
RadioGroup,
|
||||
RadioGroupItem,
|
||||
SegmentedControl,
|
||||
Switch,
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
};
|
||||
|
||||
export type ChronoMindStatus =
|
||||
| "running"
|
||||
| "paused"
|
||||
| "stopped"
|
||||
| "completed"
|
||||
| "alarm"
|
||||
| "snoozed"
|
||||
| "overdue"
|
||||
| "upcoming"
|
||||
| "recurring"
|
||||
| "one-time"
|
||||
| "focus"
|
||||
| "break"
|
||||
| "pomodoro"
|
||||
| "routine"
|
||||
| "error"
|
||||
| "success";
|
||||
|
||||
const statusToneMap: Record<ChronoMindStatus, StatusTone> = {
|
||||
running: "success",
|
||||
paused: "warning",
|
||||
stopped: "neutral",
|
||||
completed: "success",
|
||||
alarm: "danger",
|
||||
snoozed: "warning",
|
||||
overdue: "danger",
|
||||
upcoming: "info",
|
||||
recurring: "info",
|
||||
"one-time": "neutral",
|
||||
focus: "success",
|
||||
break: "info",
|
||||
pomodoro: "success",
|
||||
routine: "info",
|
||||
error: "danger",
|
||||
success: "success",
|
||||
};
|
||||
|
||||
export function AppShell({ className, ...props }: AppShellProps) {
|
||||
return <BytelystAppShell className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellSkipLink({ className, ...props }: AppShellSkipLinkProps) {
|
||||
return <BytelystAppShellSkipLink className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellMobileToggle({ className, ...props }: AppShellMobileToggleProps) {
|
||||
return <BytelystAppShellMobileToggle className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellOverlay({ className, ...props }: AppShellOverlayProps) {
|
||||
return <BytelystAppShellOverlay className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellSidebar({ className, ...props }: AppShellSidebarProps) {
|
||||
return <BytelystAppShellSidebar className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellMain({ className, ...props }: AppShellMainProps) {
|
||||
return <BytelystAppShellMain className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellPageHeader({ className, ...props }: AppShellPageHeaderProps) {
|
||||
return <BytelystAppShellPageHeader className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellNav({ className, ...props }: AppShellNavProps) {
|
||||
return <BytelystAppShellNav className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function AppShellNavItem({ className, ...props }: AppShellNavItemProps) {
|
||||
return <BytelystAppShellNavItem className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function getStatusTone(status: ChronoMindStatus): StatusTone {
|
||||
return statusToneMap[status];
|
||||
}
|
||||
|
||||
export function Button({ className, ...props }: ButtonProps) {
|
||||
return (
|
||||
<BytelystButton
|
||||
className={mergeClassNames("rounded-[var(--cm-radius-sm)]", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Badge({ className, ...props }: BadgeProps) {
|
||||
return <BytelystBadge className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function Card({ className, ...props }: CardProps) {
|
||||
return (
|
||||
<BytelystCard
|
||||
className={mergeClassNames(
|
||||
"rounded-[var(--cm-radius-md)] shadow-[var(--cm-elevation-md)]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Panel({ className, ...props }: PanelProps) {
|
||||
return (
|
||||
<BytelystPanel
|
||||
className={mergeClassNames(
|
||||
"rounded-[var(--cm-radius-md)] shadow-[var(--cm-elevation-md)]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function PanelHeader({ className, ...props }: PanelHeaderProps) {
|
||||
return <BytelystPanelHeader className={mergeClassNames("gap-[var(--cm-space-3)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function PanelBody({ className, ...props }: PanelBodyProps) {
|
||||
return <BytelystPanelBody className={mergeClassNames("gap-[var(--cm-space-3)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function PanelTitle({ className, ...props }: PanelTitleProps) {
|
||||
return <BytelystPanelTitle className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function PanelDescription({ className, ...props }: PanelDescriptionProps) {
|
||||
return <BytelystPanelDescription className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function IconButton({ className, ...props }: IconButtonProps) {
|
||||
return <BytelystIconButton className={mergeClassNames("rounded-[var(--cm-radius-sm)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function ListItemButton({ className, ...props }: ListItemButtonProps) {
|
||||
return (
|
||||
<BytelystListItemButton
|
||||
className={mergeClassNames(
|
||||
"rounded-[var(--cm-radius-sm)]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export interface ChronoMindStatusBadgeProps extends StatusBadgeProps {
|
||||
status?: ChronoMindStatus;
|
||||
}
|
||||
|
||||
export function StatusBadge({ className, status, tone, ...props }: ChronoMindStatusBadgeProps) {
|
||||
return <BytelystStatusBadge className={className} tone={tone ?? (status ? getStatusTone(status) : undefined)} {...props} />;
|
||||
}
|
||||
|
||||
export function Input({ className, ...props }: InputProps) {
|
||||
return (
|
||||
<BytelystInput
|
||||
className={mergeClassNames(
|
||||
"rounded-[var(--cm-radius-sm)]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Textarea({ className, ...props }: TextareaProps) {
|
||||
return (
|
||||
<BytelystTextarea
|
||||
className={mergeClassNames(
|
||||
"rounded-[var(--cm-radius-sm)]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Select({ className, ...props }: SelectProps) {
|
||||
return (
|
||||
<BytelystSelect
|
||||
className={mergeClassNames(
|
||||
"rounded-[var(--cm-radius-sm)]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Label({ className, ...props }: LabelProps) {
|
||||
return <BytelystLabel className={className} {...props} />;
|
||||
}
|
||||
|
||||
export function Timeline({ className, ...props }: TimelineProps) {
|
||||
return <BytelystTimeline className={mergeClassNames("gap-[var(--cm-space-3)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function Surface({ className, padding = "md", ...props }: SurfaceProps) {
|
||||
return (
|
||||
<BytelystSurface
|
||||
padding={padding}
|
||||
className={mergeClassNames("rounded-[var(--cm-radius-md)]", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SurfaceList({ density = "normal", className, ...props }: SurfaceListProps) {
|
||||
return <BytelystSurfaceList density={density} className={mergeClassNames("gap-[var(--cm-space-3)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function SurfaceListItem({ className, ...props }: SurfaceListItemProps) {
|
||||
return <BytelystSurfaceListItem className={mergeClassNames("rounded-[var(--cm-radius-sm)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function DataList({ density = "normal", className, ...props }: DataListProps) {
|
||||
return <BytelystDataList density={density} className={mergeClassNames("gap-[var(--cm-space-3)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function DataListItem({ className, ...props }: DataListItemProps) {
|
||||
return <BytelystDataListItem className={mergeClassNames("rounded-[var(--cm-radius-sm)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export const OperationalList = DataList;
|
||||
export const OperationalListItem = DataListItem;
|
||||
|
||||
export function EmptyState({ className, ...props }: EmptyStateProps) {
|
||||
return <BytelystEmptyState className={mergeClassNames("rounded-[var(--cm-radius-md)]", className)} {...props} />;
|
||||
}
|
||||
|
||||
export function LoadingSpinner({ className, ...props }: LoadingSpinnerProps) {
|
||||
return <BytelystLoadingSpinner className={className} {...props} />;
|
||||
}
|
||||
@ -11,7 +11,7 @@ import { createFeedbackClient } from '@bytelyst/feedback-client';
|
||||
import { getAuthClient, getBaseUrl } from './auth-api';
|
||||
|
||||
const feedbackClient = createFeedbackClient({
|
||||
baseUrl: getBaseUrl(),
|
||||
baseUrl: `${getBaseUrl()}/api`,
|
||||
getAuthToken: () => getAuthClient().getAccessToken(),
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user