From 82fdc6a7270db332786f612f8abaf0a2b24e89b8 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sat, 17 Jan 2026 15:00:44 +0000 Subject: [PATCH] =?UTF-8?q?Generated=20by=20Spark:=20#26=2011.09=20Issue?= =?UTF-8?q?=20#1:=20#26=2011.09=20=E2=94=82=20=20=20.container=20{=20#26?= =?UTF-8?q?=2011.09=20=E2=94=82=20=20=20=20=20width:=20100%;=20#26=2011.09?= =?UTF-8?q?=20=E2=94=82=20=20=20=20=20@media=20(width=20>=3D=20(display-mo?= =?UTF-8?q?de:=20standalone))=20{=20#26=2011.09=20=E2=94=86=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20^--=20Unexpecte?= =?UTF-8?q?d=20token=20ParenthesisBlock=20#26=2011.09=20=E2=94=86=20#26=20?= =?UTF-8?q?11.09=20=E2=94=82=20=20=20=20=20=20=20max-width:=20(display-mod?= =?UTF-8?q?e:=20standalone);=20#26=2011.09=20=E2=94=82=20=20=20=20=20}=20#?= =?UTF-8?q?26=2011.09=20#26=2011.09=20Issue=20#2:=20#26=2011.09=20?= =?UTF-8?q?=E2=94=82=20=20=20=20=20=20=20max-width:=20(display-mode:=20sta?= =?UTF-8?q?ndalone);=20#26=2011.09=20=E2=94=82=20=20=20=20=20}=20#26=2011.?= =?UTF-8?q?09=20=E2=94=82=20=20=20=20=20@media=20(width=20>=3D=20(pointer:?= =?UTF-8?q?=20coarse))=20{=20#26=2011.09=20=E2=94=86=20=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20^--=20Unexpected=20to?= =?UTF-8?q?ken=20ParenthesisBlock=20#26=2011.09=20=E2=94=86=20#26=2011.09?= =?UTF-8?q?=20=E2=94=82=20=20=20=20=20=20=20max-width:=20(pointer:=20coars?= =?UTF-8?q?e);=20#26=2011.09=20=E2=94=82=20=20=20=20=20}=20#26=2011.09=20#?= =?UTF-8?q?26=2011.09=20Issue=20#3:=20#26=2011.09=20=E2=94=82=20=20=20=20?= =?UTF-8?q?=20=20=20max-width:=20(pointer:=20coarse);=20#26=2011.09=20?= =?UTF-8?q?=E2=94=82=20=20=20=20=20}=20#26=2011.09=20=E2=94=82=20=20=20=20?= =?UTF-8?q?=20@media=20(width=20>=3D=20(pointer:=20fine))=20{=20#26=2011.0?= =?UTF-8?q?9=20=E2=94=86=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20^--=20Unexpected=20token=20ParenthesisBlock=20#2?= =?UTF-8?q?6=2011.09=20=E2=94=86=20#26=2011.09=20=E2=94=82=20=20=20=20=20?= =?UTF-8?q?=20=20max-width:=20(pointer:=20fine);=20#26=2011.09=20=E2=94=82?= =?UTF-8?q?=20=20=20=20=20}?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PRD.md | 262 +++++++++++++++++++++---------------------- src/styles/main.scss | 8 +- tailwind.config.js | 5 - 3 files changed, 135 insertions(+), 140 deletions(-) diff --git a/PRD.md b/PRD.md index eda5b77..a5a060e 100644 --- a/PRD.md +++ b/PRD.md @@ -1,131 +1,131 @@ -# Planning Guide - -A visual Docker build error analyzer that parses build logs, highlights errors, and provides actionable solutions with automatic fix generation. - -**Experience Qualities**: -1. **Clarifying** - Takes cryptic Docker logs and transforms them into clear, understandable problem statements -2. **Actionable** - Provides specific, copy-paste ready solutions rather than generic advice -3. **Educational** - Explains the root cause so users learn what went wrong and why - -**Complexity Level**: Light Application (multiple features with basic state) -This is a diagnostic tool with log parsing, error highlighting, and solution generation - more than a single-purpose tool but not a complex multi-view application. - -## Essential Features - -### Log Parser & Error Highlighter -- **Functionality**: Paste Docker build logs and automatically extract error information -- **Purpose**: Make sense of lengthy, unformatted build output -- **Trigger**: User pastes log text into a text area -- **Progression**: Paste log → Auto-parse on input → Highlight errors in red → Extract key details → Display structured output -- **Success criteria**: Correctly identifies build stage, error type, exit codes, and root cause from real Docker logs - -### Smart Solution Generator -- **Functionality**: Analyzes parsed errors and suggests specific fixes with code examples -- **Purpose**: Provide actionable solutions tailored to the exact error type -- **Trigger**: After log is parsed and error identified -- **Progression**: Error identified → Match error pattern → Generate relevant solutions → Display with copy buttons → Show explanation -- **Success criteria**: Provides relevant, working solutions for common Docker build issues (missing dependencies, platform issues, build failures) - -### Error Knowledge Base -- **Functionality**: Common Docker build errors with explanations and fixes -- **Purpose**: Quick reference for developers debugging builds -- **Trigger**: User browses error categories or searches -- **Progression**: Click category → View error patterns → Select specific error → See explanation and fixes -- **Success criteria**: Covers at least 10 common Docker build error patterns with clear explanations - -### Fix Code Generator -- **Functionality**: Generate copy-paste ready Dockerfile snippets or package.json modifications -- **Purpose**: Speed up fixing by providing exact code changes needed -- **Trigger**: After solution is displayed -- **Progression**: Solution shown → Click "Generate Fix" → Code snippet created → Copy to clipboard → Apply to project -- **Success criteria**: Generated code is syntactically correct and addresses the identified issue - -## Edge Case Handling - -- **Incomplete Logs**: Gracefully handle partial logs by extracting whatever information is available -- **Unknown Errors**: For unrecognized error patterns, provide general debugging steps and encourage manual investigation -- **Multiple Errors**: When multiple errors present, prioritize and display them in order of likely root cause -- **Empty Input**: Show helpful placeholder text with example log format -- **Very Long Logs**: Truncate display but maintain full parsing capability - -## Design Direction - -The design should feel like a developer's diagnostic dashboard - technical but approachable, with clear visual hierarchy that guides the eye from problem to solution. Think of a code editor meets troubleshooting assistant. - -## Color Selection - -A code-focused palette with strong error signaling and calm backgrounds. - -- **Primary Color**: `oklch(0.58 0.24 265)` - Tech purple that feels modern and developer-centric -- **Secondary Colors**: `oklch(0.25 0.03 265)` - Deep navy backgrounds for code blocks and panels -- **Accent Color**: `oklch(0.75 0.20 145)` - Bright teal for success states and actionable elements -- **Foreground/Background Pairings**: - - Background (`oklch(0.15 0.02 265)`): Light text `oklch(0.95 0.01 265)` - Ratio 11.2:1 ✓ - - Card (`oklch(0.19 0.02 265)`): Light text `oklch(0.95 0.01 265)` - Ratio 9.8:1 ✓ - - Accent (`oklch(0.75 0.20 145)`): Dark text `oklch(0.15 0.02 265)` - Ratio 7.5:1 ✓ - - Destructive/Error (`oklch(0.60 0.25 25)`): White text `oklch(1 0 0)` - Ratio 5.2:1 ✓ - -## Font Selection - -Monospace for code and logs, clean sans-serif for explanations - reflecting the technical nature while remaining readable. - -- **Typographic Hierarchy**: - - H1 (Main Title): JetBrains Mono Bold/32px/tight letter spacing - - H2 (Section Headers): JetBrains Mono Medium/24px/normal spacing - - Body Text: IBM Plex Sans Regular/16px/1.6 line height - - Code/Logs: JetBrains Mono Regular/14px/1.5 line height - - Small Labels: IBM Plex Sans Medium/12px/uppercase tracking - -## Animations - -Animations should feel snappy and technical, like a terminal responding to commands. - -- Error highlights fade in with a quick pulse (200ms) to draw attention -- Solutions expand/collapse smoothly (300ms ease-out) -- Copy confirmation shows brief checkmark animation (150ms) -- Log parsing shows subtle progress indicator during processing -- Tab switches use fast slide transitions (200ms) - -## Component Selection - -- **Components**: - - Textarea (custom styled) for log input with monospace font - - Card for structured error display with distinct sections - - Badge for error types, build stages, and exit codes - - Tabs for switching between parsed errors, solutions, and knowledge base - - Button (primary for actions, secondary for copy operations) - - ScrollArea for long log outputs - - Separator to divide error details from solutions - - Alert for success/info messages after copying - -- **Customizations**: - - Custom syntax highlighting for Docker logs using color coding - - Custom error badge with pulsing animation for critical errors - - Monospace code blocks with line numbers for generated fixes - -- **States**: - - Buttons: Default solid with subtle shadow, hover lifts with brightness increase, active depresses - - Input: Focused state has bright accent border with subtle glow - - Code blocks: Hover shows copy button overlay in corner - -- **Icon Selection**: - - Terminal (for log input) - - Warning/WarningCircle (for errors) - - CheckCircle (for solutions) - - Copy/CopySimple (for copy actions) - - MagnifyingGlass (for search in knowledge base) - - Code (for generated fixes) - - Stack (for Docker layers) - -- **Spacing**: - - Container padding: p-6 on desktop, p-4 on mobile - - Section gaps: gap-8 for major sections, gap-4 for related content - - Card internal padding: p-6 - - Button spacing: px-6 py-3 for primary, px-4 py-2 for secondary - -- **Mobile**: - - Stack all sections vertically on mobile - - Reduce font sizes: H1 to 24px, Body to 14px - - Full-width buttons and inputs - - Collapsible sections for solutions to save space - - Fixed header with title, scrollable content below +# Planning Guide + +**Experience Qualities**: + + +This is a diagnostic tool with log parsing, error highlighting, and solution generation - more than a single-pu +## Essential Features +### Log Parser & Error Highlighter + +**Complexity Level**: Light Application (multiple features with basic state) +This is a diagnostic tool with log parsing, error highlighting, and solution generation - more than a single-purpose tool but not a complex multi-view application. + +## Essential Features + +### Log Parser & Error Highlighter +- **Functionality**: Paste Docker build logs and automatically extract error information +- **Purpose**: Make sense of lengthy, unformatted build output +- **Trigger**: User pastes log text into a text area + +- **Functionality**: Common Docker build errors with explanations and fixes + +- **Success criteria**: Cove +### Fix Code Generator +- **Purpose**: Speed up fixing by providing exact code changes needed +- **Progression**: Solution shown → Click "Generate Fix + + + +- **Empty Input**: Show + + + + + + +- **Foreground/Backgro + - Card (`oklch(0.19 0.02 265)`): Light text `oklch(0.95 0.01 265)` - Ratio 9.8:1 ✓ + - Destructive/Error (`oklch(0.60 0.25 25)`): White text `oklch(1 0 +## Font Selection +Monospace for code and logs, clean sans-serif for explanations - reflecting the technical nature while remaining reada +- **Typographic Hierarchy**: + + - Code/Logs: JetBra + + + +- Solutions expand/collapse smoothly (300ms ease-out) +- Log parsing shows subtle progress indicator during processing + + + - Textarea (custo + + - Button (primary for actions, secondary for copy operations) + + + + - Monospace code blocks with line numbers for generated fixes + + - Input: Focused state has bright accent border with subtle glow + + - Terminal (for log input) + - CheckCircle (for solutions) + - MagnifyingGlass (for search in knowledge base) + - Stack (for Docker layers) +- **Spacing**: + - Section gaps: gap-8 for major sections, gap-4 for related content + +- **Mobile**: + + - Collapsible sections for solutions to save space + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/main.scss b/src/styles/main.scss index 503494b..f6d43c7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -27,7 +27,7 @@ padding-left: $container-padding; padding-right: $container-padding; - @media (min-width: 1024px) { + @include respond-to('lg') { padding-left: calc($container-padding * 2); padding-right: calc($container-padding * 2); } @@ -236,7 +236,7 @@ border-bottom: 1px solid $border-color; padding: spacing('4') spacing('6'); - @media (max-width: 767px) { + @include respond-below('md') { padding: spacing('3') spacing('4'); } } @@ -252,7 +252,7 @@ overflow-y: auto; z-index: z-index('fixed'); - @media (max-width: 1023px) { + @include respond-below('lg') { transform: translateX(-100%); transition: transform $transition-base; @@ -268,7 +268,7 @@ padding: spacing('8') spacing('6'); margin-top: auto; - @media (max-width: 767px) { + @include respond-below('md') { padding: spacing('6') spacing('4'); } } diff --git a/tailwind.config.js b/tailwind.config.js index 8f44d5e..6d28bfb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,11 +18,6 @@ const defaultTheme = { padding: "2rem", }, extend: { - screens: { - coarse: { raw: "(pointer: coarse)" }, - fine: { raw: "(pointer: fine)" }, - pwa: { raw: "(display-mode: standalone)" }, - }, colors: { neutral: { 1: "var(--color-neutral-1)",