Terminal Interface
Relevant source files
The following files were used as context for generating this wiki page:
The Terminal Interface is a core component of the pcstyledev portfolio, providing a simulated command-line environment that allows users to interact with a virtual file system (VFS), view project metadata, and fetch live coding statistics. It is designed with a cyberpunk aesthetic, featuring CRT overlays, sound effects, and a permission-based access model including a root user mode.
Sources: pages/Terminal.tsx:135-144, App.tsx:32-40
Architecture and Components
The interface is built as a React functional component that manages local state for command history, current directory path, and user privileges. It utilizes a useOutletContext hook to access global system utilities such as the audio synthesizer and notification system.
Virtual File System (VFS)
The terminal operates on a predefined FILE_SYSTEM object. Nodes in this system are categorized by types: dir (directory), file (plain text), and exec (executable).
The VFS structure includes a home directory (~) containing project READMEs, journals, tools, and a hidden .secrets directory, as well as a root structure (/) containing standard Unix-like directories such as bin, etc, and var.
Sources: pages/Terminal.tsx:18-79
Command Processing Logic
The processCommand function acts as the central engine for the terminal. It parses input strings into commands and arguments, executing logic based on the current context (path and user role).
Command Reference
The terminal supports a variety of commands that mimic standard ZSH/Bash behavior alongside project-specific integrations.
| Command | Description | Arguments | Required Role |
|---|---|---|---|
ls | List directory contents | -a (all), -l (long) | Guest |
cd | Change directory | [path] | Guest |
cat | Concatenate and print file content | [file] | Guest (Root for protected) |
sudo | Execute command with root privileges | [command] | Guest (Requires password) |
wakatime | Fetch live coding stats from /api/wakatime/summary | None | Guest |
projects | List available project artifacts from projects.json | None | Guest |
id_card | Displays the interactive Student ID Card component | None | Guest |
reboot | Restarts the application by reloading the window | None | Root |
Sources: pages/Terminal.tsx:178-316, api/index.ts:133-140
Security and Authentication
The terminal implements a simple privilege escalation system. Certain files, such as /etc/shadow, are marked as protected. Accessing these or executing restricted commands like reboot requires switching to the root user.
Root Access Flow
- User enters
sudo [command]. - Terminal enters
passwordMode. - System prompts for password (stored as
pcz_ai_2025in the VFS.secrets). - Upon successful validation, the
isRootstate is set totrue, and the pending command is executed.
Data Integration
The terminal integrates with the project's backend API and static data files to provide real-time information.
WakaTime Integration
The wakatime command triggers a fetch to the Hono-based API. The API aggregates data from the WakaTime service, calculating total seconds, daily averages, and language distribution for the last 7 days.
- Endpoint:
/api/wakatime/summary - Data Structure:
WakaTimeSummaryinterface.
Sources: api/index.ts:141-197, hooks/useWakaTime.ts:25-35, lib/types.ts:40-50
Project Metadata
The projects command parses the projects.json file. It maps the Project type objects to a simplified string output showing project names and their current status (e.g., active, experimental).
Sources: data/projects/projects.json:2-10, pages/Terminal.tsx:254-257
Summary
The Terminal Interface serves as a functional and aesthetic bridge between the user and the system's underlying data. By simulating a Unix-like environment, it encapsulates the project's technical themes while providing legitimate utility through file exploration and API-driven status reporting. Its implementation relies on a robust React state management system for handling I/O, VFS navigation, and security protocols.
Sources: pages/Terminal.tsx:361-424, App.tsx:115-120