feat: init

openspec/changes/create-gitignore-file/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-27

openspec/changes/create-gitignore-file/design.md

@@ -0,0 +1,35 @@
+## Context
+
+The project currently lacks a `.gitignore` file, which results in various development-related files, build artifacts, and dependency directories being untracked or potentially committed to version control. This leads to a cluttered repository and can cause issues with consistency across different development environments.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Create a comprehensive `.gitignore` file at the project root.
+- Ensure that common development artifacts, temporary files, dependency directories, and OS/IDE-specific files are ignored by Git.
+- Maintain a clean and focused Git repository.
+
+**Non-Goals:**
+- This design does not aim to modify existing Git history or remove already committed files.
+- It does not cover advanced Git configurations beyond the `.gitignore` file itself.
+- It will not address ignoring files that are intentionally part of the repository (e.g., configuration files that need to be tracked).
+
+## Decisions
+
+1.  **Location**: The `.gitignore` file will be placed in the root directory of the project (`/home/filip/docker-backend-display/.gitignore`).
+2.  **Content - General**: It will include standard ignore patterns for:
+    -   Node.js specific files and directories (`node_modules`, `npm-debug.log`, `build`, `dist`, etc.).
+    -   Operating System specific files (`.DS_Store`, `Thumbs.db`).
+    -   Common IDE/Editor specific files (`.vscode/`, `.idea/`, `*.swp`).
+3.  **Content - Project Specific**: It will include patterns for:
+    -   Backend build artifacts (if any are generated outside `node_modules`).
+    -   Frontend build artifacts (`frontend/build`).
+    -   Log files (`*.log`).
+    -   Environment variables (`.env`).
+
+## Risks / Trade-offs
+
+- **[Risk]** Over-ignoring essential files: There is a risk that some files necessary for the project's build or execution might be inadvertently ignored.
+  - **Mitigation**: The `.gitignore` file will be carefully reviewed after creation, and tested by checking `git status` to ensure only intended files are ignored.
+- **[Risk]** Under-ignoring sensitive or large files: Some sensitive information or large binary files might be missed, leading to them being committed.
+  - **Mitigation**: The `.gitignore` will be based on widely accepted templates for Node.js/React projects, and specific project directories will be explicitly added.

openspec/changes/create-gitignore-file/proposal.md

@@ -0,0 +1,21 @@
+## Why
+
+To prevent unnecessary files (such as build artifacts, dependency directories, and temporary files) from being committed to version control. This keeps the repository clean, reduces repository size, and ensures that only relevant source code is tracked.
+
+## What Changes
+
+- A new `.gitignore` file will be created in the project root. This file will contain patterns for files and directories that should be ignored by Git.
+
+## Capabilities
+
+### New Capabilities
+- `git-ignore-management`: Manages the set of files and directories that Git should ignore across the project.
+
+### Modified Capabilities
+- None
+
+## Impact
+
+- The project's Git repository will be cleaner and more focused on source code.
+- Development workflow will be improved by preventing accidental commits of irrelevant files.
+- Reduced repository size and faster cloning/fetching operations.

openspec/changes/create-gitignore-file/specs/git-ignore-management/spec.md

@@ -0,0 +1,39 @@
+## ADDED Requirements
+
+### Requirement: Project Root .gitignore File
+The project SHALL include a `.gitignore` file at its root directory.
+
+#### Scenario: .gitignore file existence
+- **WHEN** the project repository is initialized or cloned
+- **THEN** a `.gitignore` file SHALL be present in the root directory.
+
+### Requirement: Ignore Node.js Dependencies
+The `.gitignore` file SHALL include patterns to ignore Node.js dependency directories and related build artifacts.
+
+#### Scenario: Node.js project files
+- **WHEN** a Node.js project is being developed
+- **THEN** `node_modules/` SHALL be ignored.
+- **AND** `npm-debug.log` SHALL be ignored.
+- **AND** `build/` directories within Node.js projects SHALL be ignored.
+- **AND** `dist/` directories within Node.js projects SHALL be ignored.
+
+### Requirement: Ignore OS and IDE Specific Files
+The `.gitignore` file SHALL include patterns to ignore operating system and integrated development environment (IDE) specific files.
+
+#### Scenario: OS and IDE generated files
+- **WHEN** development is performed on various operating systems or IDEs
+- **THEN** `.DS_Store` SHALL be ignored.
+- **AND** `Thumbs.db` SHALL be ignored.
+- **AND** `.vscode/` directory SHALL be ignored.
+- **AND** `.idea/` directory SHALL be ignored.
+- **AND** `*.swp` files SHALL be ignored.
+
+### Requirement: Ignore Project-Specific Build Artifacts and Logs
+The `.gitignore` file SHALL include patterns to ignore project-specific build output directories and log files.
+
+#### Scenario: Project build and log files
+- **WHEN** the frontend or backend services are built
+- **THEN** `frontend/build/` SHALL be ignored.
+- **AND** `backend/build/` SHALL be ignored.
+- **AND** `*.log` files SHALL be ignored.
+- **AND** `.env` files SHALL be ignored.

openspec/changes/create-gitignore-file/tasks.md

@@ -0,0 +1,19 @@
+## 1. Create .gitignore File
+
+- [x] 1.1 Create a `.gitignore` file in the project root (`/home/filip/docker-backend-display/.gitignore`).
+- [x] 1.2 Add patterns to ignore Node.js dependency directories and related build artifacts:
+    - `node_modules/`
+    - `npm-debug.log`
+    - `build/`
+    - `dist/`
+- [x] 1.3 Add patterns to ignore OS and IDE specific files:
+    - `.DS_Store`
+    - `Thumbs.db`
+    - `.vscode/`
+    - `.idea/`
+    - `*.swp`
+- [x] 1.4 Add patterns to ignore project-specific build artifacts and logs:
+    - `frontend/build/`
+    - `backend/build/`
+    - `*.log`
+    - `.env`

openspec/changes/docker-service-display/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-27

openspec/changes/docker-service-display/design.md

@@ -0,0 +1,30 @@
+## Context
+
+The goal is to create a web-based tool that provides a real-time overview of services running in a local Docker environment. This is for developers who run multiple services and need a quick way to see what's running and how to access it. The tool will read from the Docker socket to get this information.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Provide a unified dashboard of all running Docker services that expose ports.
+- Prioritize services managed by Traefik, displaying the user-friendly URL.
+- The application should be a single, self-contained service.
+- The UI should be clean, simple, and update in near real-time.
+
+**Non-Goals:**
+- This tool will not manage Docker services (start, stop, restart). It is read-only.
+- It will not provide detailed service metrics (CPU, memory).
+- It will not have an authentication mechanism, as it is intended for local use.
+
+## Decisions
+
+- **Backend:** A Node.js server using the Express framework. It will use the `dockerode` library to interact with the Docker socket. This provides a good balance of performance and ease of development.
+- **Frontend:** A single-page application built with React. This will allow for a dynamic and responsive user interface.
+- **Communication:** The frontend will communicate with the backend via a REST API. The backend will expose an endpoint that returns a list of services.
+- **Deployment:** The application will be packaged as a single Docker container for easy deployment.
+
+## Risks / Trade-offs
+
+- **Security Risk:** Access to the Docker socket is equivalent to root access on the host machine. The application must be run in a trusted environment.
+  - **Mitigation:** The documentation will clearly state the security implications. The application will be bound to `localhost` by default to minimize exposure.
+- **Performance:** Polling the Docker socket for changes can be inefficient.
+  - **Mitigation:** The backend will use Docker events to listen for changes in real-time, avoiding constant polling.

openspec/changes/docker-service-display/proposal.md

@@ -0,0 +1,25 @@
+## Why
+
+This change introduces a web interface to display information about running Docker services that have exposed ports, making it easier to get an overview of the services running on a host.
+
+## What Changes
+
+- A new backend service that connects to the Docker socket (`docker.sock`).
+- A new frontend application that displays the service information.
+- The service will list all Docker services with exposed ports.
+- Services exposed via Traefik will be prioritized and displayed prominently.
+- The web interface will use a card-based layout to show each service.
+
+## Capabilities
+
+### New Capabilities
+- `docker-service-discovery`: Discovers running Docker services and their exposed ports.
+- `service-display-frontend`: A web interface to display the discovered services.
+
+### Modified Capabilities
+- None
+
+## Impact
+
+- This change will introduce a new web service to the host.
+- It will require access to the Docker socket, which has security implications that need to be considered.

openspec/changes/docker-service-display/specs/docker-service-discovery/spec.md

@@ -0,0 +1,26 @@
+## ADDED Requirements
+
+### Requirement: Discover running Docker containers
+The system SHALL discover all running Docker containers on the host.
+
+#### Scenario: Containers are running
+- **WHEN** the service starts
+- **THEN** the system has a list of all running containers.
+
+### Requirement: Identify services with exposed ports
+The system SHALL identify which of the running containers have exposed ports.
+
+#### Scenario: Container with exposed ports
+- **WHEN** a container is running with a port mapping
+- **THEN** the system identifies the container and its exposed port.
+
+#### Scenario: Container without exposed ports
+- **WHEN** a container is running without any port mappings
+- **THEN** the system ignores this container.
+
+### Requirement: Prioritize Traefik services
+The system SHALL identify services that are managed by Traefik and extract the public-facing URL.
+
+#### Scenario: Traefik service
+- **WHEN** a container has Traefik labels (e.g., `traefik.http.routers.my-service.rule`)
+- **THEN** the system SHALL extract the router rule and present it as the primary URL for the service.

openspec/changes/docker-service-display/specs/service-display-frontend/spec.md

@@ -0,0 +1,26 @@
+## ADDED Requirements
+
+### Requirement: Display services in a card layout
+The frontend SHALL display each discovered service as a card.
+
+#### Scenario: Services are discovered
+- **WHEN** the frontend receives a list of services from the backend
+- **THEN** it SHALL render a card for each service.
+
+### Requirement: Show service details on each card
+Each service card SHALL display the service name, the exposed port, and the URL to access it.
+
+#### Scenario: Displaying a service
+- **WHEN** a service is displayed
+- **THEN** the card SHALL show the service name, port, and URL.
+
+### Requirement: Real-time updates
+The frontend SHALL update in near real-time when services are started or stopped.
+
+#### Scenario: A new service is started
+- **WHEN** a new service is started on the host
+- **THEN** a new card for that service SHALL appear in the frontend without requiring a page refresh.
+
+#### Scenario: A service is stopped
+- **WHEN** a service is stopped on the host
+- **THEN** the corresponding card SHALL be removed from the frontend without requiring a page refresh.

openspec/changes/docker-service-display/tasks.md

@@ -0,0 +1,34 @@
+## 1. Backend Setup
+
+- [x] 1.1 Initialize a new Node.js project for the backend.
+- [x] 1.2 Add dependencies: `express`, `dockerode`, and `cors`.
+- [x] 1.3 Create a basic Express server.
+- [x] 1.4 Configure the server to listen on a specific port.
+
+## 2. Docker Service Discovery
+
+- [x] 2.1 Implement a function to connect to the Docker socket using `dockerode`.
+- [x] 2.2 Create a function to list all running containers.
+- [x] 2.3 Filter the list of containers to include only those with exposed ports.
+- [x] 2.4 Implement logic to identify Traefik services and extract their URLs from container labels.
+- [x] 2.5 Create a REST API endpoint (`/api/services`) that returns the list of discovered services.
+- [x] 2.6 Implement real-time updates using Docker events to watch for container start and stop events.
+
+## 3. Frontend Setup
+
+- [x] 3.1 Initialize a new React project for the frontend.
+- [x] 3.2 Add dependencies: `axios` for making API requests.
+- [x] 3.3 Create a basic layout for the application.
+
+## 4. Frontend Implementation
+
+- [x] 4.1 Create a function to fetch the list of services from the backend API.
+- [x] 4.2 Create a `ServiceCard` component to display the information for a single service.
+- [x] 4.3 Implement the main view to display a grid of `ServiceCard` components.
+- [x] 4.4 Implement real-time updates on the frontend, either through polling or a WebSocket connection.
+
+## 5. Dockerization
+
+- [x] 5.1 Create a `Dockerfile` for the backend service.
+- [x] 5.2 Create a `Dockerfile` for the frontend service.
+- [x] 5.3 Create a `docker-compose.yml` file to run both services together.

openspec/changes/modernize-frontend-ui/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-27

openspec/changes/modernize-frontend-ui/design.md

@@ -0,0 +1,48 @@
+## Context
+
+The current frontend suffers from an outdated design, inconsistent clickable elements, and a lack of direct access for services not exposed through Traefik. This design document outlines the technical approach to modernize the UI, ensure comprehensive service accessibility, and achieve a professional aesthetic, thereby significantly enhancing the developer experience in local Docker environments.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Modernize the user interface with a professional and polished look and feel.
+- Ensure all relevant links are clickable and provide clear visual feedback.
+- Implement a "frosted glass" effect for service cards to improve visual appeal and hierarchy.
+- Provide direct, clickable access to services not exposed via Traefik, prioritizing local network accessibility.
+- Improve overall frontend professionalism through refined typography, spacing, and responsive design.
+
+**Non-Goals:**
+- The core business logic or functionality of the backend services will not be altered, only their discovery and presentation.
+- This tool will not manage Docker services (start, stop, restart). It remains read-only.
+
+## Decisions
+
+1.  **Clickable Service Cards**:
+    - If a service has a `traefikUrl`, the entire service card will be a clickable link that opens the URL in a new tab.
+    - If a service does not have a `traefikUrl` but has a `preferredLocalUrl` (an IP accessible from the client's subnet), the entire card will be a clickable link to this URL, opening in a new tab.
+    - If neither a `traefikUrl` nor a `preferredLocalUrl` is available, the card will display all `accessibleUrls` (container IPs and ports) as a list of clickable links.
+
+2.  **Frosted Glass Effect**:
+    - The frosted glass effect will be achieved using CSS `backdrop-filter: blur()`.
+    - A semi-transparent background color will be used to enhance the effect.
+
+3.  **Frontend Styling**:
+    - A modern, clean font will be used.
+    - The layout will be updated to be more spacious and visually balanced.
+    - Implement a responsive design to ensure optimal viewing across various screen sizes.
+    - Refine the color palette and spacing to contribute to a professional and polished appearance.
+
+4.  **Backend IP Discovery**:
+    - The backend will use `os.networkInterfaces()` to identify its own local IP addresses and associated subnets.
+    - For each container, the backend will iterate through its network settings to find all assigned IP addresses.
+    - Logic will be implemented to compare container IPs against the backend's local subnets to determine a `preferredLocalUrl`.
+    - The `listContainers` function will be modified to return `traefikUrl`, `preferredLocalUrl`, and a comprehensive list of `accessibleUrls` for each service.
+
+## Risks / Trade-offs
+
+- **[Risk]** Browser compatibility for `backdrop-filter`.
+  - **Mitigation**: A solid background color will be used as a fallback for browsers that do not support `backdrop-filter`.
+- **[Risk]** Complexity of IP/subnet matching, especially across diverse Docker network configurations and host environments.
+  - **Mitigation**: The initial implementation will focus on common local development setups (e.g., Docker bridge networks, host network mode). Further refinement may be needed for more complex scenarios.
+- **[Risk]** Accurately determining the "client's subnet" if the client is not on the same host as the backend.
+  - **Mitigation**: For the initial scope, the assumption is that the client is on the same local network as the backend. Future enhancements could involve client-side IP detection or configurable subnet ranges.

openspec/changes/modernize-frontend-ui/proposal.md

@@ -0,0 +1,27 @@
+## Why
+
+The current frontend is not user-friendly. Links are not clickable, the design is outdated, and there's no direct way to access services not exposed via Traefik. This change will significantly improve the user experience by making the interface more modern, interactive, and functional, especially for local development environments.
+
+## What Changes
+
+- Make all links in the frontend clickable.
+- Update the UI to a modern style.
+- Use a frosted glass effect for cards to improve the visual hierarchy.
+- For services without Traefik URLs, identify and display accessible local IP addresses, prioritizing those within the client's subnet, and make them clickable.
+- Enhance overall frontend professionalism through improved typography, spacing, and responsive design, while retaining the frosted card aesthetic.
+
+## Capabilities
+
+### New Capabilities
+- None
+
+### Modified Capabilities
+- `service-display-frontend`: The UI will be updated to be more modern and interactive, including new logic for displaying and linking to local IPs.
+- `docker-service-discovery`: The backend logic will be extended to identify and prioritize local IP addresses for services not exposed via Traefik.
+
+## Impact
+
+- The frontend UI will be significantly updated, offering a more polished and professional look and feel.
+- User experience will be greatly improved, providing direct access to all services, regardless of Traefik exposure.
+- Changes will affect both frontend (UI/UX, display logic) and backend (service discovery logic).
+- No breaking changes are expected.

openspec/changes/modernize-frontend-ui/specs/docker-service-discovery/spec.md

@@ -0,0 +1,26 @@
+## ADDED Requirements
+
+### Requirement: Identify Backend Local IP Addresses
+The system SHALL identify all local IP addresses and their corresponding subnets on the host where the backend service is running.
+
+#### Scenario: Backend on a host with local network interfaces
+- **WHEN** the backend service starts
+- **THEN** the system identifies all active local IP addresses and their subnets.
+
+### Requirement: Determine Preferred Local IP for Services
+The system SHALL, for each service not exposed via Traefik, determine a "preferred local IP" if any of the service's exposed IPs are within the backend's identified local subnets.
+
+#### Scenario: Service IP matches a local subnet
+- **WHEN** a service has an exposed IP address that falls within one of the backend's local subnets
+- **THEN** that service IP is identified as the "preferred local IP".
+
+#### Scenario: Service IP does not match any local subnet
+- **WHEN** a service has exposed IP addresses but none fall within the backend's local subnets
+- **THEN** no "preferred local IP" is determined for that service.
+
+### Requirement: Provide All Accessible Service IPs
+The system SHALL, for each service, provide a comprehensive list of all accessible IP addresses and ports.
+
+#### Scenario: Service with exposed ports
+- **WHEN** a service has exposed ports
+- **THEN** the system provides a list of all IP addresses and ports through which the service can be accessed.

openspec/changes/modernize-frontend-ui/specs/service-display-frontend/spec.md

@@ -0,0 +1,29 @@
+## MODIFIED Requirements
+
+### Requirement: Clickable Service Cards
+The system SHALL make the entire service card a clickable link based on the following priority:
+1. If a Traefik URL is present, use that.
+2. Else if a preferred local IP is present, use that.
+3. Else, display all accessible IPs/ports as individual clickable links.
+
+#### Scenario: Service with Traefik URL
+- **WHEN** a service card is displayed with a Traefik URL
+- **THEN** the entire card is a clickable link that opens the Traefik URL in a new tab.
+
+#### Scenario: Service with Preferred Local IP (no Traefik URL)
+- **WHEN** a service card is displayed with a preferred local IP but no Traefik URL
+- **THEN** the entire card is a clickable link that opens the preferred local IP in a new tab.
+
+#### Scenario: Service with Multiple Accessible IPs/Ports (no Traefik or Preferred Local IP)
+- **WHEN** a service card is displayed with multiple accessible IPs/ports but no Traefik URL or preferred local IP
+- **THEN** the card is not clickable as a whole.
+- **AND** each accessible IP/port is displayed as an individual clickable link that opens in a new tab.
+
+### Requirement: Professional and Modern UI with Frosted Cards
+The system SHALL have a professional and modern user interface with a "frosted glass" effect for service cards, improved typography, spacing, and responsive design.
+
+#### Scenario: Displaying Service Cards
+- **WHEN** service cards are displayed
+- **THEN** the cards have a "frosted glass" effect with a blurred backdrop, semi-transparent background, rounded corners, and a subtle box shadow.
+- **AND** the overall layout utilizes improved typography and spacing for a professional appearance.
+- **AND** the interface is responsive, adapting to various screen sizes.

openspec/changes/modernize-frontend-ui/tasks.md

@@ -0,0 +1,19 @@
+## 1. Backend Logic (IP Discovery)
+
+- [x] 1.1 Implement a function in `backend/docker.js` to get the host's local IP addresses and subnets.
+- [x] 1.2 Modify `listContainers` in `backend/docker.js` to:
+    - Get all container IP addresses.
+    - Determine `preferredLocalUrl` by matching container IPs with host subnets.
+    - Compile a list of `accessibleUrls` for each service.
+    - Return `traefikUrl`, `preferredLocalUrl`, and `accessibleUrls` in the service object.
+
+## 2. Frontend Styling
+
+- [x] 2.1 Refine `ServiceCard.css` for improved typography and spacing.
+- [x] 2.2 Update `App.css` for a more professional color palette and responsive design.
+
+## 3. Frontend Logic (Service Card Display)
+
+- [x] 3.1 Modify `ServiceCard.js` to prioritize `traefikUrl`, then `preferredLocalUrl` for the main clickable card.
+- [x] 3.2 If neither `traefikUrl` nor `preferredLocalUrl` is present, display `accessibleUrls` as a list of individual clickable links within the card.
+- [x] 3.3 Ensure all new links open in a new tab.