Skip to content

Latest commit

 

History

History
61 lines (40 loc) · 2.96 KB

File metadata and controls

61 lines (40 loc) · 2.96 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What is FridOS

FridOS is a kid-friendly terminal interface built with Nuxt 4 / Vue 3 and xterm.js. Kids learn typing, letters, numbers, and basic math by interacting with a real-feeling terminal. Pure client-side — no backend.

Commands

pnpm dev          # Start dev server at localhost:3000
pnpm build        # Build for production
pnpm preview      # Preview production build

Architecture

The entire UI is a single xterm.js terminal. User input flows through:

Terminal.client.vue (keyboard capture) → command-handler.js (auto-discovery + routing) → commands/*.js (execution) → writes back to terminal and/or mutates global state

Key Files

  • app.config.ts — Parent-facing configuration (kid's name, prompt, theme, emojis)
  • app/components/AppTerminal.client.vue — xterm.js wrapper; handles input, renders overlays
  • app/components/AnalogClock.vue — SVG analog clock overlay with animated hands and lighting effects
  • app/utils/command-handler.js — Auto-discovers commands via import.meta.glob. Special routing: single letters → alphabet, numbers → number, math expressions → math
  • app/utils/commands/ — One file per command, auto-discovered. No registration needed.
  • app/utils/terminal-config.jscreateTerminalConfig(theme) builds xterm config from app config
  • app/composables/states.js — Global reactive state via useState (image viewer, audio, clicker, clock)
  • app/composables/assets.js — Dynamic asset loading via import.meta.glob
  • shared/utils/constants.jsTEXT_STYLES (ANSI escape codes)

Adding a New Command

  1. Create app/utils/commands/<name>.js
  2. Export a named function matching the filename: export const name = (terminal, ...args) => {}
  3. Export helpSummary string for the help listing
  4. Optionally export hidden = true to hide from help

No registration step — auto-discovered by import.meta.glob.

Configuration

Personalizable values (name, prompt symbol, prompt color, welcome message, emojis) live in runtimeConfig.public in nuxt.config.ts and can be overridden via NUXT_PUBLIC_* environment variables (see .env.example). The terminal theme lives in app.config.ts (Nuxt's defineAppConfig), accessed via useAppConfig().fridos. Version is read from package.json at build time via runtimeConfig.public.version.

State Management

No Pinia/Vuex — uses Nuxt useState composables in app/composables/states.js.

Assets

  • Alphabet images: app/assets/img/alphabet/ — filename first letter = mapped letter
  • Gallery images: app/assets/img/<command>/ (e.g., mom/, dad/)
  • Audio: app/assets/audio/
  • Font: Monaspace Argon (SIL Open Font License)

Important Values

This project prioritizes inclusivity. Family-related features (gallery commands) should never assume a traditional family structure. All families are welcome.