# appRobotFileservice — Web-UI (Datei-Browser)

> Stand: 2026-06-15  
> Beschreibt den implementierten Ist-Zustand der Browser-Oberfläche auf Port 2100.

---

## Implementierter Funktionsumfang

**Dateien:** `public/index.html`, `public/index.css`

### Programm-Liste (linke Spalte)

| Feature | Status | Endpunkt |
|---|---|---|
| Programme auflisten | ✅ | `GET /api/programs?dir=` |
| Unterordner auflisten | ✅ | `GET /api/folders?dir=` |
| Breadcrumb-Navigation | ✅ | — |
| In Unterordner navigieren (Klick) | ✅ | — |
| Programm laden (Einzelklick) | ✅ | `PUT /api/active` |
| Neue Datei anlegen (📄+) | ✅ | `POST /api/programs` |
| Neuen Ordner anlegen (📁+) | ✅ | `POST /api/folders` |
| Auswahl löschen (🗑) — Datei oder Ordner | ✅ | `DELETE /api/programs/:id` / `DELETE /api/folders/:name` |
| Ordner-Löschen rekursiv | ✅ | `DELETE /api/folders/:name?dir=` |
| Auto-Refresh (5 s Polling) | ✅ | — |

### Aktives Programm (rechte Spalte)

| Feature | Status | Endpunkt |
|---|---|---|
| Aktives Programm anzeigen (Zeilenliste in Grad) | ✅ | `GET /api/active` |
| Cursor in Tabelle hervorheben + auto-scrollen | ✅ | — |
| Stepping: First / Prev / Next / Last | ✅ | `POST /api/active/first|prev|next|last` |
| Programm leeren (FClear) | ✅ | `POST /api/active/clear` |
| Download `.gcode` | ✅ | `GET /api/programs/:id/download` |
| Zeilen löschen (🗑 pro Zeile, pending-State) | ✅ | `DELETE /api/active/lines/:index` |
| Abbrechen / Speichern Edit-Bar | ✅ | — |

### Navigieren / Senden Toggle (rechts in Controls-Zeile)

| Feature | Status | Details |
|---|---|---|
| Modus-Schalter `↕ Navigieren` / `▶ Senden` | ✅ | Drei-Gruppen-Layout |
| Navigieren-Modus: nur Cursor bewegen | ✅ | `POST /api/active/next` |
| Senden-Modus: G-Code-Zeile an Driver senden | ✅ | `POST /api/active/next?execute=true` |
| Pfeil-Buttons während Fahrt gesperrt | ✅ | Bis HTTP-Antwort kommt |
| Driver-Fehlermeldung im UI anzeigen | ✅ | HTTP 502 → Statuszeile |
| Senden-Button deaktiviert wenn kein Driver | ✅ | `GET /api/config` beim Start |

---

## Architektur

```
Browser (index.html)
  │
  ├──[Navigieren]─► POST /api/active/next         (Fileservice)
  │                 Cursor +1, ;! in .gcode gespeichert
  │
  └──[Senden]──────► POST /api/active/next?execute=true  (Fileservice)
                      Fileservice: Cursor +1, sendet G-Code-Zeile
                      │  server-seitig (lokales Netz)
                      └──► appRobotDriver WS
                            Inverse Kinematik → GRBL → Roboter
                            M114-Broadcast / Fehler zurück an Fileservice
                      Fileservice → HTTP 200 (OK) oder 502 (Driver-Fehler)
```

Der Browser verbindet sich **niemals direkt** mit dem Driver — der Fileservice
ist die einzige Aussenschnittstelle.

---

## Cursor-Persistenz

Der Cursor wird als `;!`-Marker direkt **in der `.gcode`-Datei** gespeichert
(primäre Quelle, sichtbar in jedem Texteditor). Das `.json`-Sidecar enthält `cursor`
nur noch als Fallback für Altdateien ohne Marker.

```
G90 G1 x0 y300 z0 a90.00 b-90.00 c0.00 e0.00 f1000 ;1
G90 G1 x10 y300 z0 a0.00 b-90.00 c0.00 e0.00 f1000 ;2!   ← Cursor-Zeile
```

`store.read()` liefert immer saubere Zeilen (kein `!`) und `cursor` als Index.

---

## Verzeichnis-Navigation

- Echte Unterverzeichnisse in `GCodeFiles/` (max. 5 Ebenen tief)
- Segmente validiert mit `/^[a-z0-9_-]+$/`
- `dir`-Parameter in allen relevanten Endpoints (`?dir=training/run1`)
- Breadcrumb: klickbare Segmente, Root = `GCodeFiles`

---

## Noch nicht implementiert / offene Punkte

| Feature | Priorität | Hinweis |
|---|---|---|
| Upload `.gcode` vom Desktop | P2 | `POST /api/programs/upload` (multipart) |
| Programm umbenennen | P2 | `PUT /api/programs/:id` (Backend vorhanden, UI fehlt) |
| Zeile inline bearbeiten | P3 | `PUT /api/active/lines/:index` (Backend vorhanden) |
| Zeile einfügen | P3 | `POST /api/active/lines { atIndex }` (Backend vorhanden) |
| Live-Updates via SSE | P4 | statt 5s-Polling; `GET /api/events` |
| `FPlay` / `FStop` im Browser | P4 | Playback-Modus |

---

## Datei-Übersicht

```
public/
  index.html     HTML + JavaScript (inline)
  index.css      Design-System (dark, CSS-Variablen)
src/
  server.js      GET /api/config → driverConfigured
  driverClient.js  WS-Client zum Driver (für Senden-Modus)
  routes/
    programs.js  /api/programs* inkl. /download
    active.js    /api/active* mit ?execute=true für Step-Routes
    folders.js   /api/folders*
doc/
  fileBrowser.md            diese Datei (Ist-Zustand)
  commandsFromGCodeFile.md  Senden-Modus Konzept + Implementierungsplan
```