diff --git a/.gitignore b/.gitignore index 1f4382b..770ce62 100644 --- a/.gitignore +++ b/.gitignore @@ -48,3 +48,6 @@ appsettings.*.local.json # (siehe J:\Softwareprojekte\GITEA-EINWEISUNG.md) — dieser Eintrag ist die # Ruecksicherung, falls doch einmal eine Token-Datei im Repo landet. .gitea-token +# FTP-Zugangsdaten und Publish-Token fuer pack-and-deploy. Versioniert wird +# ausschliesslich packager.config.example.json ohne Werte. +deploy/packager.config.json diff --git a/ClawdDotNet.slnx b/ClawdDotNet.slnx index 24ceb0a..5c5c204 100644 --- a/ClawdDotNet.slnx +++ b/ClawdDotNet.slnx @@ -18,6 +18,7 @@ + diff --git a/Directory.Build.props b/Directory.Build.props index fbc3730..7c4f59e 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -18,7 +18,22 @@ ClawdDotNet.Core.BuildInfo bleibt daneben bestehen: das ist ein von Hand gefuehrter Zaehler mit Aenderungstext, keine Versionsangabe. --> - 0.1.0 + 0.1.2 + + + embedded diff --git a/Mockup/Avalonia UI Migration und Überarbeitung.zip b/Mockup/Avalonia UI Migration und Überarbeitung.zip new file mode 100644 index 0000000..1b204a2 Binary files /dev/null and b/Mockup/Avalonia UI Migration und Überarbeitung.zip differ diff --git a/Mockup/extracted/.thumbnail b/Mockup/extracted/.thumbnail new file mode 100644 index 0000000..36b0212 Binary files /dev/null and b/Mockup/extracted/.thumbnail differ diff --git a/Mockup/extracted/ClawdDotNet UI Redesign.dc.html b/Mockup/extracted/ClawdDotNet UI Redesign.dc.html new file mode 100644 index 0000000..80d5ca3 --- /dev/null +++ b/Mockup/extracted/ClawdDotNet UI Redesign.dc.html @@ -0,0 +1,1009 @@ + + + + + + + + + + + + + + + + +
+ +
+ Update: (1) Zielauflösung jetzt 1920×1080. (2) Sidebar per Pfeil zuklappbar (nur Icons). (3) Agenten-Seite folgt wieder der WinForms-Aufteilung: oben Agentenliste + Einstellungen, unten Werkzeugliste + Werkzeug-Konfiguration, in zwei horizontal geteilten Bereichen — aber mit klaren flachen Feldern statt PropertyGrid. (4) Werkzeugleisten bei Aufgaben (inkl. Job Aktivieren/Deaktivieren), Diensten und Logs ergänzt; Sicherung um Automatik und Zugangsdaten-Optionen erweitert. +
+ +
+ + +
+ +
+ + +
ClawdDotNet
+ + +
+ + + +
+ +
+ +
Arbeiten
+ + + + + + + +
+ +
+ +
Analyse
+ + + + + +
+ +
+ +
System
+ + + + + + + + + +
+
+ + +
+ ClawdDotNet 2.4 · Avalonia +
+ +
+ + +
+ + +
+
{{ pageTitle }}
+
+ {{ themeLabel }} + +
+
+ + + +
+ +
+ +
{{ note.instance }}: {{ note.text }}
+ +
+ +
+ + + +
+ + + +
+ + +
+ +
+
+ + +
+ +
+ + +
+ +
+
+ + + + + + + + + + + +
AnzeigenameModellKurzinfo
{{ agent.displayName }}{{ agent.model }}{{ agent.description }}
+
+
+ +
+ +
+
+
+
Allgemein & Modell
+

{{ selectedAgent.displayName }}

+
+
+
+
+
+
+
+
+
+
+
Grenzen
+

Schutzgrenzen (LoopGuard & Budget)

+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ + +
+ +
+
Zugelassene Werkzeuge für {{ selectedAgent.displayName }}
+
+ + + + + + + + + + + +
WerkzeugBeschreibung
{{ tool.name }}{{ tool.description }}
+
+
+ +
+ +
+
Werkzeug-Einstellungen
+

{{ selectedToolName }}

+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
Dieses Werkzeug benötigt keine weiteren Einstellungen.
+ +
+
+
+ + + + +
+
+ Agent: + +
+
+
+
Dev Assistant
+
Deploy-Pipeline für crypto-team ist grün. Soll ich die Release-Notes zusammenfassen?
+
+
+
Du
+
Ja, bitte kurz.
+
+
+
+ + +
+
+ + + + +
+
+ + + +
+ + +
+
+ + + + +
+ + +
+
+ + + + + + + +
TypAgentTool / NachrichtCronNächster LaufLetzter LaufStatus
{{ job.jobType }}{{ job.agentName }}{{ job.taskMessage }}{{ job.cronExpression }}{{ job.nextRun }}{{ job.lastRun }}{{ job.status }}
+
+
+ + + +
+
+ + +
+ + +
+ +
+
+ + + + + + + +
DienstnameTypPortStatusBeschreibung
{{ svc.name }}{{ svc.type }}{{ svc.port }}{{ svc.status }}{{ svc.description }}
+
+
+ + + +
+
+ +
+
+ + + + + + + +
ZeitpunktJobAgentBeschreibungStatusDetails
{{ h.time }}{{ h.jobName }}{{ h.agent }}{{ h.description }}{{ h.status }}{{ h.info }}
+
+
+ +
+ + + + +
+
+ +
+
Manuell
+

Sicherung erstellen

+
+
+
+ +
+
+ +
+ + +
+
+
+ +
+ + +
+
+ +
+
+ +
+ +
+
Automatik
+

Automatische Sicherung

+
+ +
+
+
+
+
Die Automatik sichert ohne Zugangsdaten — eine gespeicherte Passphrase wäre wirkungslos.
+
+
+ +
+ +
+
Bestand
+
+

Vorhandene Sicherungen

+
+ + + + +
+
+ + + + + + +
DateinameErstellt amInstanzGrößeZugangsdaten
backup_2026-08-16_0300.zip16.08.2026 03:00crypto-team214 MBausgeschlossen
backup_2026-08-15_0300.zip15.08.2026 03:00crypto-team211 MBausgeschlossen
+
+
+
+ + + + +
+
+ Modul: + + Stufe: + +
+ + + + +
+
+
09:12:03 INFO AgentEngine: Run gestartet (Dev Assistant)
+
09:12:05 INFO Tools.FileRW: Lesevorgang abgeschlossen
+
09:12:08 WARN BackupScheduler: Sicherung verzögert (Ziel belegt)
+
09:12:11 INFO Tools.Database: Query ausgeführt (42ms)
+
+
+ + + + +
+
+
Tokens (7 Tage)
{{ totalTokens7d }}
+
Kosten (7 Tage)
{{ totalCost7d }} €
+
Runs (7 Tage)
{{ totalRuns7d }}
+
+ +

Tokens pro Tag

+
+ +
+
{{ d.tokensLabel }}
+
+
{{ d.day }}
+
+ +
+ +

Aufschlüsselung nach Agent & Modell

+ + + + + + + +
AgentModellTokensKostenRuns
{{ row.agent }}{{ row.model }}{{ row.tokens }}{{ row.cost }} €{{ row.runs }}
+
+ + + + +
+
+ Agent A: + + Agent B: + +
+
+ +
+
+ {{ msg.senderName }} + {{ msg.time }} +
+
{{ msg.text }}
+
+ +
+
+ + + + +
+
+
+
Instanz
+
+
+
+
+
+
+
+
Allgemein
+
+
+
+
+
+
+
+ + + + +
+ +
ClawdDotNet
+
Version 2.4.1 · Avalonia UI · net10.0
+
+ + +
+ + +
+ Instanz: {{ currentInstance.name }} + · + API {{ apiStatusText }} + · + 1h: {{ tokensLastHour }} Tok · 24h: {{ tokensLast24h }} Tok (~{{ costLast24h }} €) + · + Credits: {{ creditsRemaining }} von {{ creditsTotal }} + {{ themeLabel }} +
+
+ + + +
+
+ +
+
Instanz wechseln
+ +
+
Jede Instanz läuft unabhängig mit eigenen Agenten und Daten. Wechseln startet die App mit der gewählten Instanz neu.
+
+ +
+
+ {{ inst.logoInitials }} + +
+
+
{{ inst.name }}
+
{{ inst.agentCount }} Agenten · API-Key {{ inst.apiKeyStatus }}
+
+ Aktiv + +
+ +
+
+
+ + +
+
+
+ + + + +
+
+ +
{{ fieldEditorTitle }}
+ +
+ + +
+
+
+ + +
+
+ + + + + diff --git a/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_adherence.oxlintrc.json b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_adherence.oxlintrc.json new file mode 100644 index 0000000..3b11af9 --- /dev/null +++ b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_adherence.oxlintrc.json @@ -0,0 +1,152 @@ +{ + "plugins": [ + "react", + "import" + ], + "rules": { + "react/forbid-elements": [ + "warn", + { + "forbid": [] + } + ], + "no-restricted-imports": [ + "warn", + { + "patterns": [] + } + ], + "no-restricted-syntax": [ + "warn", + { + "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]", + "message": "Raw hex color — use a design-system color token via var()." + }, + { + "selector": "Literal[value=/\\b\\d+px\\b/]", + "message": "Raw px value — use a design-system spacing token via var()." + }, + { + "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Barlow|Barlow Condensed))/i]", + "message": "Font not provided by the design system. Available: Barlow, Barlow Condensed." + } + ] + }, + "overrides": [ + { + "files": [ + "**/index.js" + ], + "rules": { + "no-restricted-imports": "off" + } + } + ], + "x-omelette": { + "components": {}, + "tokens": [ + "--color-accent", + "--color-accent-100", + "--color-accent-2", + "--color-accent-2-100", + "--color-accent-2-200", + "--color-accent-2-300", + "--color-accent-2-400", + "--color-accent-2-500", + "--color-accent-2-600", + "--color-accent-2-700", + "--color-accent-2-800", + "--color-accent-2-900", + "--color-accent-200", + "--color-accent-300", + "--color-accent-400", + "--color-accent-500", + "--color-accent-600", + "--color-accent-700", + "--color-accent-800", + "--color-accent-900", + "--color-bg", + "--color-divider", + "--color-neutral-100", + "--color-neutral-200", + "--color-neutral-300", + "--color-neutral-400", + "--color-neutral-500", + "--color-neutral-600", + "--color-neutral-700", + "--color-neutral-800", + "--color-neutral-900", + "--color-surface", + "--color-text", + "--font-body", + "--font-heading", + "--font-heading-weight", + "--radius-lg", + "--radius-md", + "--radius-sm", + "--shadow-lg", + "--shadow-md", + "--shadow-sm", + "--space-1", + "--space-2", + "--space-3", + "--space-4", + "--space-6", + "--space-8" + ], + "tokenKinds": { + "--color-bg": "color", + "--color-surface": "color", + "--color-text": "font", + "--color-accent": "color", + "--color-accent-2": "color", + "--color-divider": "color", + "--color-neutral-100": "color", + "--color-neutral-200": "color", + "--color-neutral-300": "color", + "--color-neutral-400": "color", + "--color-neutral-500": "color", + "--color-neutral-600": "color", + "--color-neutral-700": "color", + "--color-neutral-800": "color", + "--color-neutral-900": "color", + "--color-accent-100": "color", + "--color-accent-200": "color", + "--color-accent-300": "color", + "--color-accent-400": "color", + "--color-accent-500": "color", + "--color-accent-600": "color", + "--color-accent-700": "color", + "--color-accent-800": "color", + "--color-accent-900": "color", + "--color-accent-2-100": "color", + "--color-accent-2-200": "color", + "--color-accent-2-300": "color", + "--color-accent-2-400": "color", + "--color-accent-2-500": "color", + "--color-accent-2-600": "color", + "--color-accent-2-700": "color", + "--color-accent-2-800": "color", + "--color-accent-2-900": "color", + "--font-heading": "font", + "--font-heading-weight": "font", + "--font-body": "font", + "--space-1": "spacing", + "--space-2": "spacing", + "--space-3": "spacing", + "--space-4": "spacing", + "--space-6": "spacing", + "--space-8": "spacing", + "--radius-sm": "radius", + "--radius-md": "radius", + "--radius-lg": "radius", + "--shadow-sm": "shadow", + "--shadow-md": "shadow", + "--shadow-lg": "shadow" + }, + "fontFamilies": [ + "Barlow", + "Barlow Condensed" + ] + } +} \ No newline at end of file diff --git a/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_ds_bundle.js b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_ds_bundle.js new file mode 100644 index 0000000..af8ca74 --- /dev/null +++ b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_ds_bundle.js @@ -0,0 +1,11 @@ +/* @ds-bundle: {"format":4,"namespace":"Industry_indust","components":[],"sourceHashes":{},"inlinedExternals":[],"unexposedExports":[]} */ + +(() => { + +const __ds_ns = (window.Industry_indust = window.Industry_indust || {}); + +const __ds_scope = {}; + +(__ds_ns.__errors = __ds_ns.__errors || []); + +})(); diff --git a/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_ds_manifest.json b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_ds_manifest.json new file mode 100644 index 0000000..645b78a --- /dev/null +++ b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/_ds_manifest.json @@ -0,0 +1 @@ +{"namespace":"Industry_indust","components":[],"startingPoints":[],"cards":[{"path":"components/buttons.html","group":"Components","viewport":"640x460","subtitle":"Solid primary actions; tags tint from the ramps","name":"Buttons & tags"},{"path":"components/cards.html","group":"Components","viewport":"640x420","subtitle":"Transparent, corner-marked line drawings with a kicker, title, body and meta row","name":"Cards"},{"path":"components/dialog.html","group":"Components","viewport":"640x460","subtitle":"A modal surface at the top elevation, shown here inside a static frame","name":"Dialog"},{"path":"components/forms.html","group":"Components","viewport":"640x520","subtitle":"Text inputs, a segmented control and radios — native elements, themed states","name":"Forms"},{"path":"components/navigation.html","group":"Components","viewport":"640x420","subtitle":"A header bar over a grid page opening","name":"Navigation"},{"path":"components/table.html","group":"Components","viewport":"640x420","subtitle":"Rows separated by a whisper of the text color; status cells reuse the tags","name":"Table"},{"path":"foundations/color.html","group":"Foundations","viewport":"640x560","subtitle":"Role colors and the tonal ramps (mono scheme — one accent voice)","name":"Color"},{"path":"foundations/icons.html","group":"Foundations","viewport":"640x420","subtitle":"Lucide — inline SVG on currentColor","name":"Icons"},{"path":"foundations/image.html","group":"Foundations","viewport":"640x480","subtitle":"Duotone — photographs are washed in the accent, like a screen print.","name":"Imagery"},{"path":"foundations/layout.html","group":"Foundations","viewport":"640x560","subtitle":"A 0.85× spacing scale, 4px radius, and three shadow levels tuned to the light ground","name":"Spacing & elevation"},{"path":"foundations/type.html","group":"Foundations","viewport":"640x640","subtitle":"Barlow Condensed over Barlow — a fixed scale; density moves spacing, not sizes","name":"Typography"},{"path":"theme.html","group":"Theme","viewport":"640x520","subtitle":"The parameters this system was derived from","name":"Parameters"}],"templates":[{"name":"Deck","description":"A twenty-one-slide presentation starter: cover, contents, dividers, columns, quadrants, a data table, SVG charts and timeline, bleed imagery, a quote and a close, on the theme's tokens","folder":"templates/deck","entryPath":"templates/deck/Deck.dc.html"},{"name":"Landing","description":"A one-page product landing in the system's own voice — an invented product (Holdfast: a fastener catalog), a condensed hero, a numbered spec-sheet plate, wireframe cells and a duotone photograph","folder":"templates/landing","entryPath":"templates/landing/index.html"}],"hasThumbnailHtml":true,"globalCssPaths":["styles.css"],"tokens":[{"name":"--color-bg","value":"#f2f2f3","kind":"color","definedIn":"styles.css"},{"name":"--color-surface","value":"#e9e9ea","kind":"color","definedIn":"styles.css"},{"name":"--color-text","value":"#1d1f20","kind":"font","definedIn":"styles.css"},{"name":"--color-accent","value":"#5980a6","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2","value":"#728fab","kind":"color","definedIn":"styles.css"},{"name":"--color-divider","value":"color-mix(in srgb, #1d1f20 16%, transparent)","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-100","value":"#f5f5f8","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-200","value":"#e7e7ea","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-300","value":"#d4d4d7","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-400","value":"#b7b7ba","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-500","value":"#98989b","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-600","value":"#7a7a7d","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-700","value":"#5d5d60","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-800","value":"#424244","kind":"color","definedIn":"styles.css"},{"name":"--color-neutral-900","value":"#2b2b2d","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-100","value":"#eef6ff","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-200","value":"#d6ebff","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-300","value":"#b5d9fd","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-400","value":"#94bce3","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-500","value":"#749dc4","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-600","value":"#597ea3","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-700","value":"#416180","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-800","value":"#2c455d","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-900","value":"#1d2d3d","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-100","value":"#eef6ff","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-200","value":"#d6ebff","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-300","value":"#bdd8f2","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-400","value":"#9ebbd8","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-500","value":"#7e9cb8","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-600","value":"#627d98","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-700","value":"#486077","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-800","value":"#314457","kind":"color","definedIn":"styles.css"},{"name":"--color-accent-2-900","value":"#1f2d3a","kind":"color","definedIn":"styles.css"},{"name":"--font-heading","value":"\"Barlow Condensed\", system-ui, sans-serif","kind":"font","definedIn":"styles.css"},{"name":"--font-heading-weight","value":"600","kind":"font","definedIn":"styles.css"},{"name":"--font-body","value":"\"Barlow\", system-ui, sans-serif","kind":"font","definedIn":"styles.css"},{"name":"--space-1","value":"3.4px","kind":"spacing","definedIn":"styles.css"},{"name":"--space-2","value":"6.8px","kind":"spacing","definedIn":"styles.css"},{"name":"--space-3","value":"10.2px","kind":"spacing","definedIn":"styles.css"},{"name":"--space-4","value":"13.6px","kind":"spacing","definedIn":"styles.css"},{"name":"--space-6","value":"20.4px","kind":"spacing","definedIn":"styles.css"},{"name":"--space-8","value":"27.2px","kind":"spacing","definedIn":"styles.css"},{"name":"--radius-sm","value":"2px","kind":"radius","definedIn":"styles.css"},{"name":"--radius-md","value":"4px","kind":"radius","definedIn":"styles.css"},{"name":"--radius-lg","value":"7px","kind":"radius","definedIn":"styles.css"},{"name":"--shadow-sm","value":"0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent)","kind":"shadow","definedIn":"styles.css"},{"name":"--shadow-md","value":"0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent)","kind":"shadow","definedIn":"styles.css"},{"name":"--shadow-lg","value":"0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent)","kind":"shadow","definedIn":"styles.css"}],"themes":[],"fonts":[],"brandFonts":[{"family":"Barlow Condensed","status":"ok","tokens":["--font-heading"],"path":"styles.css"},{"family":"Barlow","status":"ok","tokens":["--font-body"],"path":"styles.css"}],"source":"spa"} \ No newline at end of file diff --git a/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/readme.md b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/readme.md new file mode 100644 index 0000000..7d8749e --- /dev/null +++ b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/readme.md @@ -0,0 +1,82 @@ +# Industry design system + +Industry is a wireframe: steel-blue on a light technical ground, Barlow Condensed headings over Barlow, a modular grid, and cards, figures and buttons framed as blueprint objects — square-cornered, hairline-bordered, with "+" registration marks at the corners. Cards and figures stay transparent line drawings; the primary button is the one solid object on the board, an accent fill that keeps the square corners and the marks. Photography is duotoned into the steel accent and icons are thin-stroke. + +## How to use this + +- Link the one stylesheet from every page — `` (adjust the relative path) — and take every color, font, spacing, radius and shadow from its variables (`var(--color-*)`, `var(--font-*)`, `var(--space-*)`, `var(--radius-*)`, `var(--shadow-*)`). Never hard-code a hex, a font name or a px value the tokens already carry. +- Build with the classes below rather than inventing parallel ones; the component pages are plain HTML, so view source and copy the markup. +- `templates/` holds starting points a consuming project can copy whole. +- The whole system was derived from `theme.json`. To change the look, edit the tokens at the top of `styles.css` — every page, the thumbnail and this guide read from them — and keep `theme.json` and the written guidance in step so they don't drift from what the CSS actually does. + +## Direction + +Modular grid layouts — content in equal-width cells, strong horizontal and vertical rhythm, visible structure. Cards, buttons and major sections are wireframe objects: square-cornered, thin-bordered, with `+` crosshair corner marks (the `.blueprint` class + four `` children) — never soft filled rounded blocks. Images and figures get the same treatment: square, hairline-framed and marked, never rounded or clipped. Wrap hero and inline images in the `.duotone` class — they are desaturated and washed in the accent, like a screen print that re-colors with the theme. + +## Color + +A light ground (`--color-bg` #f2f2f3) with `--color-text` #1d1f20 and a single accent #5980a6 (this is a mono scheme: no second accent was chosen — the `--color-accent-2-*` variables carry a machine-derived stand-in kept only so both sets resolve; treat them as one role). Each role carries a 100–900 tonal ramp (`--color-neutral-100` … `--color-accent-2-900`) generated in OKLCH on a shared perceptual lightness scale, so the same step of any ramp has the same visual weight. Use the light steps (100–300) for tinted fills, hovers and subtle borders, 500 as the role's base, and the dark steps (700–900) for text on tinted fills and for pressed states; prefer ramp steps over ad-hoc `color-mix()`. For elevation use `--shadow-sm/md/lg` (already tuned to the ground) rather than ad-hoc box-shadows. + +## Type + +Barlow Condensed for headings over Barlow for body text, loaded as `--font-heading` / `--font-body`. Density 0.85× and radius 4px are already baked into the `--space-*` / `--radius-*` scales — use the variables, not raw numbers. + +## Icons + +Use Lucide icons (https://lucide.dev), at stroke-width 1.5 for a lighter, more technical look throughout. + +## Interaction states + +Interactive states are themed, never browser defaults: give every interactive element a `:hover` tint and a pressed state from the accent ramp (one step past the base — `--color-accent-600` on a light ground, `--color-accent-400` on a dark one, or a `color-mix()` tint for outlined/ghost variants), and style keyboard focus with `:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }` — never leave the default blue focus ring. + +## Components + +| Class | What it is | Shown in | +| --- | --- | --- | +| `.btn` with `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-icon`, `.btn-block` | Actions — the primary is a solid accent fill | components/buttons.html | +| `.tag` with `.tag-accent`, `.tag-accent-2`, `.tag-neutral`, `.tag-outline` | Small labels tinted from the ramps (mono palette: accent-2 reads the same as accent) | components/buttons.html | +| `.field` + `label`, `.input`, `.radio` + `.dot`, `.seg` + `.seg-opt` | Form fields and choices on native elements — no script | components/forms.html | +| `.card` with `.card-kicker`, `.card-title`, `.card-body`, `.card-meta`; `.elev-sm/md/lg` | Transparent, hairline-bordered cards with corner registration marks | components/cards.html | +| `.nav` + `.nav-brand` | The header bar | components/navigation.html | +| `.table` | Data tables with themed header and row rules | components/table.html | +| `.dialog-backdrop` + `.dialog` (+ `.dialog-title/-body/-actions`) | A modal at the top elevation | components/dialog.html | +| `.hr` | A horizontal rule — present, but this system prefers whitespace; avoid it | — | +| `.blueprint` + four `` children | The wireframe frame every card, figure and primary button wears | components/cards.html | +| `.duotone` | The image wrapper — every content photograph goes through it | foundations/image.html | + +States are built in: hovers and pressed states come from the accent ramp, keyboard focus is the 2px accent `:focus-visible` ring, `::selection` is an accent tint, and disabled controls drop to 45% opacity. Don't restyle them per page. The accent-to-ground pair is tuned to at least 3:1 — enough for icons, large text and interface chrome, not for body copy — so for paragraph-size text in the accent use a deep ramp step (`--color-accent-700` on this ground) rather than the accent itself. + +## Do + +- Frame cards, figures and primary buttons as blueprint objects: the `.blueprint` class plus four `` marks. +- Keep the grid visible — equal cells, strong horizontal and vertical rhythm. +- Condense headings (Barlow Condensed) and keep body copy in Barlow. +- Duotone photographs with the `.duotone` wrapper so they take the accent. + +## Don't + +- Do not round cards, figures or buttons, and do not give cards or figures a surface fill — they are line drawings (the solid accent primary button is the one deliberate exception). +- Do not drop the registration marks from a framed element. +- Do not use thick icon strokes; the set is Lucide at 1.5. +- Do not add decorative color beyond the steel accent. The accent's own deep step (`--color-accent-900`) may carry a full field where the deck's section dividers use it — steel as ground, type reversed to paper. (The landing's numbers sit on a drawn spec-sheet plate on the paper ground instead — its own grammar, not a field.) + +## Files + +- `styles.css` — the only stylesheet: the token sheet (`:root` variables, ramps, base type) plus the component layer. Link it from every page. +- `readme.md` — this guide. +- `theme.json` — the parameters these files were derived from (a machine-readable record of the theme). +- `thumbnail.html` — the project cover (brand mark + swatches). +- `foundations/type.html` — the type scale and the heading/body pairing at real sizes. +- `foundations/color.html` — color roles and the 100-900 tonal ramps, with usage notes. +- `foundations/layout.html` — the spacing scale, the grid and how edges are drawn. +- `foundations/icons.html` — the icon set at interface sizes, inline and in buttons. +- `foundations/image.html` — how photographs and figures are treated. +- `components/buttons.html` — buttons, icon buttons and tags in every variant and state. +- `components/forms.html` — text fields, radios and the segmented control on native elements. +- `components/cards.html` — content cards and the elevation steps. +- `components/navigation.html` — the header bar pattern. +- `components/table.html` — a data table with the themed header and row rules. +- `components/dialog.html` — a modal over its backdrop at the top elevation. +- `theme.html` — the theme's parameters rendered as a reference sheet. +- `templates/landing/` — a starter page consuming the system the intended way (`index.html`, its `ds-base.js` loader, and the vendored `image-slot.js` its photograph mounts). +- `assets/photo.jpg` — the reference photograph the imagery page treats. diff --git a/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/styles.css b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/styles.css new file mode 100644 index 0000000..1864c0a --- /dev/null +++ b/Mockup/extracted/_ds/industry-a0ac2064-12b6-4f32-aeb8-51c9f8ab1636/styles.css @@ -0,0 +1,286 @@ +/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ +@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap'); + +:root { + --color-bg: #f2f2f3; + --color-surface: #e9e9ea; + --color-text: #1d1f20; + --color-accent: #5980a6; + --color-accent-2: #728fab; + --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); + + /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the + same step of any role matches the others in visual value. */ + --color-neutral-100: #f5f5f8; + --color-neutral-200: #e7e7ea; + --color-neutral-300: #d4d4d7; + --color-neutral-400: #b7b7ba; + --color-neutral-500: #98989b; + --color-neutral-600: #7a7a7d; + --color-neutral-700: #5d5d60; + --color-neutral-800: #424244; + --color-neutral-900: #2b2b2d; + + --color-accent-100: #eef6ff; + --color-accent-200: #d6ebff; + --color-accent-300: #b5d9fd; + --color-accent-400: #94bce3; + --color-accent-500: #749dc4; + --color-accent-600: #597ea3; + --color-accent-700: #416180; + --color-accent-800: #2c455d; + --color-accent-900: #1d2d3d; + + --color-accent-2-100: #eef6ff; + --color-accent-2-200: #d6ebff; + --color-accent-2-300: #bdd8f2; + --color-accent-2-400: #9ebbd8; + --color-accent-2-500: #7e9cb8; + --color-accent-2-600: #627d98; + --color-accent-2-700: #486077; + --color-accent-2-800: #314457; + --color-accent-2-900: #1f2d3a; + + --font-heading: "Barlow Condensed", system-ui, sans-serif; + --font-heading-weight: 600; + --font-body: "Barlow", system-ui, sans-serif; + + --space-1: 3.4px; + --space-2: 6.8px; + --space-3: 10.2px; + --space-4: 13.6px; + --space-6: 20.4px; + --space-8: 27.2px; + + --radius-sm: 2px; + --radius-md: 4px; + --radius-lg: 7px; + + /* Elevation — derived from the ground: soft ink-tinted shadows on a + light theme, a hairline edge + ambient darkness on a dark one. */ + --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); + --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); + --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); +} + +body { + background: var(--color-bg); + color: var(--color-text); + font-family: var(--font-body); +} +h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } + +.blueprint { + position: relative; + border: 1px solid var(--color-divider); + border-radius: 0; +} +/* The overlay image treatments (halftone, duotone) clip their overlay + (overflow:hidden); a blueprint wrapper draws its registration marks + outside the box, so when both classes share a wrapper the frame must + win. */ +.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; } +.blueprint > .corner { + position: absolute; width: 11px; height: 11px; + color: color-mix(in srgb, var(--color-text) 55%, transparent); +} +.blueprint > .corner::before, .blueprint > .corner::after { + content: ""; position: absolute; background: currentColor; +} +.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } +.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } +.blueprint > .corner.tl { top: -6px; left: -6px; } +.blueprint > .corner.tr { top: -6px; right: -6px; } +.blueprint > .corner.bl { bottom: -6px; left: -6px; } +.blueprint > .corner.br { bottom: -6px; right: -6px; } + +.duotone{position:relative;overflow:hidden} +.duotone::after{content:"";position:absolute;inset:0;pointer-events:none; + background:var(--color-accent);mix-blend-mode:color} + +/* ══════════════════════════════════════════════════════════════════════════ + Components — built with the tokens above. Plain CSS + on plain HTML: no JavaScript, no build step. Each class is documented in + readme.md and demonstrated in foundations/ and components/. + ══════════════════════════════════════════════════════════════════════ */ + +*, *::before, *::after { box-sizing: border-box; } +body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; } +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); +} +h1 { font-size: 42px; } +h2 { font-size: 32px; } +h3 { font-size: 25px; } +h4 { font-size: 20px; } +h5 { font-size: 16px; } +h6 { font-size: 13px; } +h6 { letter-spacing: 0.08em; text-transform: uppercase; } +p { margin: 0 0 var(--space-3); } +a { color: var(--color-accent); text-underline-offset: 3px; } +img { display: block; max-width: 100%; } +figure { margin: 0; } +figcaption { + font-size: 11px; margin-top: var(--space-1); + color: color-mix(in srgb, var(--color-text) 55%, transparent); +} +.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } +:focus { outline: none; } +:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } +::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } + +/* — rules — */ +.hr { + height: 1px; border: 0; margin: var(--space-4) 0; + background: var(--color-divider); +} + +/* — buttons — */ +.btn { + display: inline-flex; align-items: center; justify-content: center; gap: 6px; + cursor: pointer; text-decoration: none; + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — + the pair sits side by side in sign-up rows */ + background: transparent; border: 1px solid transparent; + padding: var(--space-2) calc(var(--space-3) * 1.2); + border-radius: var(--radius-md); +} +.btn svg { display: block; } +.btn:disabled { opacity: 0.45; cursor: not-allowed; } +.btn-primary { background: var(--color-accent); color: var(--color-bg); } +.btn-primary:hover { background: var(--color-accent-600); } +.btn-primary:active { background: var(--color-accent-700); } +.btn-secondary { border-color: var(--color-divider); } +.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } +.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } +.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } +.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } +.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } +.btn-icon { width: 36px; height: 36px; padding: 0; } +.btn-block { width: 100%; margin-top: var(--space-2); } + +/* — forms — */ +.field > label { + display: block; font-size: 12px; margin-bottom: 5px; + color: color-mix(in srgb, var(--color-text) 70%, transparent); +} +.input { + width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; + font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); + background: var(--color-surface); + border: 1px solid var(--color-divider); border-radius: var(--radius-md); +} +.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } +.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } +textarea.input { min-height: 90px; resize: vertical; } +.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } +.radio input, .seg-opt input { + position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; +} +.radio .dot { + width: 16px; height: 16px; flex: none; border-radius: 50%; + border: 1.5px solid var(--color-divider); +} +.radio:hover .dot { border-color: var(--color-accent); } +.radio input:checked + .dot { + border-color: var(--color-accent); background: var(--color-accent); + box-shadow: inset 0 0 0 4px var(--color-bg); +} +.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } +.seg { + display: inline-flex; overflow: hidden; + border: 1px solid var(--color-divider); border-radius: var(--radius-md); +} +.seg-opt { + display: inline-flex; align-items: center; gap: 6px; + padding: 7px 12px; font-size: 13px; cursor: pointer; +} +.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } +.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); } +.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } +.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } + +/* — cards — */ +.card { + display: flex; flex-direction: column; gap: var(--space-2); + padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); +} +.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } +.card-title { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 17px; line-height: 1.2; +} +.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } +.card-meta { + display: flex; align-items: center; gap: 6px; font-size: 11px; + color: color-mix(in srgb, var(--color-text) 50%, transparent); +} +.elev-sm { box-shadow: var(--shadow-sm); } +.elev-md { box-shadow: var(--shadow-md); } +.elev-lg { box-shadow: var(--shadow-lg); } + +/* — tags — */ +.tag { + display: inline-flex; align-items: center; font-size: 11px; + letter-spacing: 0.02em; padding: 3px 10px; + border-radius: calc(var(--radius-md) * 0.75); +} +.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } +.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } +.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } +.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } + +/* — navigation — */ +.nav { + display: flex; align-items: center; gap: var(--space-4); + padding: var(--space-3) var(--space-4); + border-bottom: none; +} +.nav-brand { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 18px; margin-right: auto; +} +.nav a { color: inherit; text-decoration: none; font-size: 14px; } +.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } + +/* — tables — */ +.table { width: 100%; border-collapse: collapse; font-size: 14px; } +.table th { + text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; + color: color-mix(in srgb, var(--color-text) 60%, transparent); + padding: var(--space-2); border-bottom: 1px solid var(--color-divider); +} +.table td { + padding: var(--space-2); + border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); +} +.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } + +/* — dialog — */ +.dialog-backdrop { + position: fixed; inset: 0; display: grid; place-items: center; + padding: var(--space-4); + background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); +} +.dialog { + width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); + padding: var(--space-4); border-radius: var(--radius-lg); + background: var(--color-surface); box-shadow: var(--shadow-lg); +} +.dialog-title { + font-family: var(--font-heading); font-weight: var(--font-heading-weight); + font-size: 20px; +} +.dialog-body { font-size: 14px; opacity: 0.85; } +.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } + +/* — blueprint frame: components are wireframe objects (see .blueprint + and .corner above) — square, transparent, hairline-bordered — */ +.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; } +.card, .dialog { background: transparent; border: 1px solid var(--color-divider); } +.btn { border: 1px solid var(--color-divider); } +.btn-primary { border-color: var(--color-accent); } +.btn-ghost { border-color: transparent; } + diff --git a/Mockup/extracted/mockup/ClawdDotNet-UI-Mockup.dc.html b/Mockup/extracted/mockup/ClawdDotNet-UI-Mockup.dc.html new file mode 100644 index 0000000..80d5ca3 --- /dev/null +++ b/Mockup/extracted/mockup/ClawdDotNet-UI-Mockup.dc.html @@ -0,0 +1,1009 @@ + + + + + + + + + + + + + + + + +
+ +
+ Update: (1) Zielauflösung jetzt 1920×1080. (2) Sidebar per Pfeil zuklappbar (nur Icons). (3) Agenten-Seite folgt wieder der WinForms-Aufteilung: oben Agentenliste + Einstellungen, unten Werkzeugliste + Werkzeug-Konfiguration, in zwei horizontal geteilten Bereichen — aber mit klaren flachen Feldern statt PropertyGrid. (4) Werkzeugleisten bei Aufgaben (inkl. Job Aktivieren/Deaktivieren), Diensten und Logs ergänzt; Sicherung um Automatik und Zugangsdaten-Optionen erweitert. +
+ +
+ + +
+ +
+ + +
ClawdDotNet
+ + +
+ + + +
+ +
+ +
Arbeiten
+ + + + + + + +
+ +
+ +
Analyse
+ + + + + +
+ +
+ +
System
+ + + + + + + + + +
+
+ + +
+ ClawdDotNet 2.4 · Avalonia +
+ +
+ + +
+ + +
+
{{ pageTitle }}
+
+ {{ themeLabel }} + +
+
+ + + +
+ +
+ +
{{ note.instance }}: {{ note.text }}
+ +
+ +
+ + + +
+ + + +
+ + +
+ +
+
+ + +
+ +
+ + +
+ +
+
+ + + + + + + + + + + +
AnzeigenameModellKurzinfo
{{ agent.displayName }}{{ agent.model }}{{ agent.description }}
+
+
+ +
+ +
+
+
+
Allgemein & Modell
+

{{ selectedAgent.displayName }}

+
+
+
+
+
+
+
+
+
+
+
Grenzen
+

Schutzgrenzen (LoopGuard & Budget)

+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+ + +
+ +
+
Zugelassene Werkzeuge für {{ selectedAgent.displayName }}
+
+ + + + + + + + + + + +
WerkzeugBeschreibung
{{ tool.name }}{{ tool.description }}
+
+
+ +
+ +
+
Werkzeug-Einstellungen
+

{{ selectedToolName }}

+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
Dieses Werkzeug benötigt keine weiteren Einstellungen.
+ +
+
+
+ + + + +
+
+ Agent: + +
+
+
+
Dev Assistant
+
Deploy-Pipeline für crypto-team ist grün. Soll ich die Release-Notes zusammenfassen?
+
+
+
Du
+
Ja, bitte kurz.
+
+
+
+ + +
+
+ + + + +
+
+ + + +
+ + +
+
+ + + + +
+ + +
+
+ + + + + + + +
TypAgentTool / NachrichtCronNächster LaufLetzter LaufStatus
{{ job.jobType }}{{ job.agentName }}{{ job.taskMessage }}{{ job.cronExpression }}{{ job.nextRun }}{{ job.lastRun }}{{ job.status }}
+
+
+ + + +
+
+ + +
+ + +
+ +
+
+ + + + + + + +
DienstnameTypPortStatusBeschreibung
{{ svc.name }}{{ svc.type }}{{ svc.port }}{{ svc.status }}{{ svc.description }}
+
+
+ + + +
+
+ +
+
+ + + + + + + +
ZeitpunktJobAgentBeschreibungStatusDetails
{{ h.time }}{{ h.jobName }}{{ h.agent }}{{ h.description }}{{ h.status }}{{ h.info }}
+
+
+ +
+ + + + +
+
+ +
+
Manuell
+

Sicherung erstellen

+
+
+
+ +
+
+ +
+ + +
+
+
+ +
+ + +
+
+ +
+
+ +
+ +
+
Automatik
+

Automatische Sicherung

+
+ +
+
+
+
+
Die Automatik sichert ohne Zugangsdaten — eine gespeicherte Passphrase wäre wirkungslos.
+
+
+ +
+ +
+
Bestand
+
+

Vorhandene Sicherungen

+
+ + + + +
+
+ + + + + + +
DateinameErstellt amInstanzGrößeZugangsdaten
backup_2026-08-16_0300.zip16.08.2026 03:00crypto-team214 MBausgeschlossen
backup_2026-08-15_0300.zip15.08.2026 03:00crypto-team211 MBausgeschlossen
+
+
+
+ + + + +
+
+ Modul: + + Stufe: + +
+ + + + +
+
+
09:12:03 INFO AgentEngine: Run gestartet (Dev Assistant)
+
09:12:05 INFO Tools.FileRW: Lesevorgang abgeschlossen
+
09:12:08 WARN BackupScheduler: Sicherung verzögert (Ziel belegt)
+
09:12:11 INFO Tools.Database: Query ausgeführt (42ms)
+
+
+ + + + +
+
+
Tokens (7 Tage)
{{ totalTokens7d }}
+
Kosten (7 Tage)
{{ totalCost7d }} €
+
Runs (7 Tage)
{{ totalRuns7d }}
+
+ +

Tokens pro Tag

+
+ +
+
{{ d.tokensLabel }}
+
+
{{ d.day }}
+
+ +
+ +

Aufschlüsselung nach Agent & Modell

+ + + + + + + +
AgentModellTokensKostenRuns
{{ row.agent }}{{ row.model }}{{ row.tokens }}{{ row.cost }} €{{ row.runs }}
+
+ + + + +
+
+ Agent A: + + Agent B: + +
+
+ +
+
+ {{ msg.senderName }} + {{ msg.time }} +
+
{{ msg.text }}
+
+ +
+
+ + + + +
+
+
+
Instanz
+
+
+
+
+
+
+
+
Allgemein
+
+
+
+
+
+
+
+ + + + +
+ +
ClawdDotNet
+
Version 2.4.1 · Avalonia UI · net10.0
+
+ + +
+ + +
+ Instanz: {{ currentInstance.name }} + · + API {{ apiStatusText }} + · + 1h: {{ tokensLastHour }} Tok · 24h: {{ tokensLast24h }} Tok (~{{ costLast24h }} €) + · + Credits: {{ creditsRemaining }} von {{ creditsTotal }} + {{ themeLabel }} +
+
+ + + +
+
+ +
+
Instanz wechseln
+ +
+
Jede Instanz läuft unabhängig mit eigenen Agenten und Daten. Wechseln startet die App mit der gewählten Instanz neu.
+
+ +
+
+ {{ inst.logoInitials }} + +
+
+
{{ inst.name }}
+
{{ inst.agentCount }} Agenten · API-Key {{ inst.apiKeyStatus }}
+
+ Aktiv + +
+ +
+
+
+ + +
+
+
+ + + + +
+
+ +
{{ fieldEditorTitle }}
+ +
+ + +
+
+
+ + +
+
+ + + + + diff --git a/Mockup/extracted/mockup/Implementierungsleitfaden.md b/Mockup/extracted/mockup/Implementierungsleitfaden.md new file mode 100644 index 0000000..a8d1f87 --- /dev/null +++ b/Mockup/extracted/mockup/Implementierungsleitfaden.md @@ -0,0 +1,96 @@ +# ClawdDotNet UI — Implementierungsleitfaden für Avalonia + +Dieses Verzeichnis enthält das HTML-Mockup (`ClawdDotNet-UI-Mockup.dc.html`, im Browser öffnen) +und diese Anleitung zur Übertragung nach Avalonia. Das Mockup ist eine Design-Referenz — keine +lauffähige App. Ziel-Codebasis: `src/ClawdDotNet.Desktop`. + +## 1. Was sich ändert + +- **Dunkelmodus** mit Schnellumschalter in der Kopfzeile. +- **Sidebar-Navigation** statt `TabControl` mit `TabStripPlacement="Left"` — zuklappbar auf Icon-Breite. +- **Instanzauswahl/-erstellung/-wechsel** als ein Dialog (ersetzt `InstancePickerWindow` in seiner + Doppelrolle als Start-Auswahl UND `OnOpenInstanceManager`-Reopen). Zeigt Status-Punkt + Logo-Monogramm. +- **Agenten-Seite**: wieder wie in WinForms in vier Quadranten (Liste/Einstellungen oben, + Werkzeuge/Werkzeug-Einstellungen unten), aber mit ziehbaren Splittern statt `PropertyGrid`, + und flachen Feldern statt verschachtelter Tabs. +- **Werkzeugleisten** ergänzt bei Jobs (inkl. Aktivieren/Deaktivieren), Diensten, Logs. +- **Statusleiste** erweitert um OpenRouter-API-Status und Token/Kosten-Kurzinfo (1h/24h, Credits). +- **Benachrichtigungsleiste** für instanzübergreifende Probleme (Exceptions, aufgebrauchte Limits). +- **Neue Menügruppe "Analyse"**: Tokennutzung (Charts + Tabelle), Agenten-Chats (Verlauf zwischen + zwei Agenten, siehe `docs/Agentenkommunikation-Konzept.md` für das Datenmodell `AgentMessages`). + +## 2. Design-Tokens + +Farben als `ResourceDictionary` mit `ThemeDictionaries` (Light/Dark), Zugriff per `DynamicResource` +— nie feste Farbwerte in AXAML (siehe Prüfliste in `Avalonia-Portierungsleitfaden.md`). + +``` +Light: Bg #f2f2f3 · Surface #e9e9ea · Text #1d1f20 · Accent #5980a6 · Divider #1d1f20 @16% +Dark: Bg #1a1c1e · Surface #232527 · Text #eef0f1 · Accent #7ea3c6 · Divider #eef0f1 @16% +``` + +Vollständige Ramp-Werte (Neutral/Accent 100–900, je Theme gespiegelt) stehen im `