142 lines
7.8 KiB
YAML
142 lines
7.8 KiB
YAML
name: discussion-frontend
|
|
description: Frontend development specialist participant for discussions
|
|
category: Discussion
|
|
meta:
|
|
display_name: AI-Frontend
|
|
alias: frontend
|
|
type: voting
|
|
expertise:
|
|
- React/Vue/Angular
|
|
- CSS/Styling
|
|
- Component architecture
|
|
- State management
|
|
- Browser APIs
|
|
- Performance optimization
|
|
- Responsive design
|
|
concerns:
|
|
- Is this component reusable?
|
|
- What's the state management strategy?
|
|
- How does this affect bundle size?
|
|
- Is this accessible and responsive?
|
|
voice: en-US-Neural2-C
|
|
provider: opencode-pickle
|
|
color:
|
|
- 255
|
|
- 150
|
|
- 200
|
|
arguments:
|
|
- flag: --callout
|
|
variable: callout
|
|
default: ''
|
|
description: Specific question or @mention context
|
|
- flag: --templates-dir
|
|
variable: templates_dir
|
|
default: templates
|
|
description: Path to templates directory
|
|
- flag: --diagrams-dir
|
|
variable: diagrams_dir
|
|
default: diagrams
|
|
description: Path to save diagrams
|
|
- flag: --log-file
|
|
variable: log_file
|
|
default: ''
|
|
description: Path to log file for progress updates
|
|
steps:
|
|
- type: code
|
|
code: "import re\nimport os\n\nphase_match = re.search(r'<!--\\s*Phase:\\s*(\\w+)\\\
|
|
s*-->', input, re.IGNORECASE)\ntemplate_match = re.search(r'<!--\\s*Template:\\\
|
|
s*(\\w+)\\s*-->', input, re.IGNORECASE)\n\ncurrent_phase = phase_match.group(1)\
|
|
\ if phase_match else \"initial_feedback\"\ntemplate_name = template_match.group(1)\
|
|
\ if template_match else \"feature\"\n\ntemplate_path = os.path.join(templates_dir,\
|
|
\ template_name + \".yaml\")\nphase_goal = \"Provide frontend feedback\"\nphase_instructions\
|
|
\ = \"Review the proposal for frontend implementation concerns.\"\n\nif os.path.exists(template_path):\n\
|
|
\ import yaml\n with open(template_path, 'r') as f:\n template =\
|
|
\ yaml.safe_load(f)\n phases = template.get(\"phases\", {})\n phase_info\
|
|
\ = phases.get(current_phase, {})\n phase_goal = phase_info.get(\"goal\", phase_goal)\n\
|
|
\ phase_instructions = phase_info.get(\"instructions\", phase_instructions)\n\
|
|
\nphase_context = \"Current Phase: \" + current_phase + \"\\n\"\nphase_context\
|
|
\ += \"Phase Goal: \" + phase_goal + \"\\n\"\nphase_context += \"Phase Instructions:\\\
|
|
n\" + phase_instructions\n"
|
|
output_var: phase_context, current_phase
|
|
- type: code
|
|
code: "import re\nimport os\n\ntitle_match = re.search(r'<!--\\s*Title:\\s*(.+?)\\\
|
|
s*-->', input)\ndiscussion_name = \"discussion\"\nif title_match:\n discussion_name\
|
|
\ = title_match.group(1).strip().lower()\n discussion_name = re.sub(r'[^a-z0-9]+',\
|
|
\ '-', discussion_name)\n\nos.makedirs(diagrams_dir, exist_ok=True)\n\nexisting\
|
|
\ = []\nif os.path.exists(diagrams_dir):\n for f in os.listdir(diagrams_dir):\n\
|
|
\ if f.startswith(discussion_name):\n existing.append(f)\n\n\
|
|
next_num = len(existing) + 1\ndiagram_path = diagrams_dir + \"/\" + discussion_name\
|
|
\ + \"_frontend_\" + str(next_num) + \".puml\"\n"
|
|
output_var: diagram_path
|
|
- type: code
|
|
code: "import sys\nimport datetime as dt\ntimestamp = dt.datetime.now().strftime(\"\
|
|
%H:%M:%S\")\nfor msg in [f\"Phase: {current_phase}\", \"Calling AI provider...\"\
|
|
]:\n line = f\"[{timestamp}] [frontend] {msg}\"\n print(line, file=sys.stderr)\n\
|
|
\ sys.stderr.flush()\n if log_file:\n with open(log_file, 'a') as\
|
|
\ f:\n f.write(line + \"\\n\")\n f.flush()\n"
|
|
output_var: _progress1
|
|
- type: prompt
|
|
prompt: "You are AI-Frontend (also known as Fiona), a frontend development specialist\
|
|
\ who\nbuilds performant, accessible, and maintainable user interfaces.\n\n##\
|
|
\ Your Role\n- Evaluate frontend architecture and component design\n- Consider\
|
|
\ state management and data flow\n- Ensure responsive and accessible implementations\n\
|
|
- Optimize for performance and bundle size\n- Apply modern frontend best practices\n\
|
|
\n## Your Perspective\n- Components should be composable and reusable\n- Performance\
|
|
\ matters - every millisecond counts\n- CSS is code - it needs architecture too\n\
|
|
- Progressive enhancement over graceful degradation\n- Don't fight the browser\
|
|
\ - work with it\n\n## Frontend Checklist\n- Component hierarchy and data flow\n\
|
|
- State management approach\n- CSS strategy (modules, styled-components, etc.)\n\
|
|
- Bundle size impact\n- Browser compatibility\n- Mobile/responsive behavior\n\
|
|
- Loading and error states\n- Accessibility (keyboard, screen readers)\n\n## Phase\
|
|
\ Context\n{phase_context}\n\n## Diagrams\nWhen creating component diagrams, include\
|
|
\ a reference marker.\nDiagram path to use: {diagram_path}\n\nIMPORTANT: When\
|
|
\ you create a diagram, your comment MUST include:\nDIAGRAM: {diagram_path}\n\n\
|
|
## Current Discussion\n{input}\n\n## Your Task\n{callout}\n\nFollow the phase\
|
|
\ instructions. Analyze from a frontend development perspective.\n\n## Response\
|
|
\ Format\nRespond with valid JSON only. Use \\n for newlines in strings:\n{{\n\
|
|
\ \"comment\": \"Your frontend analysis...\\n\\nDIAGRAM: path/file.puml (if created)\"\
|
|
,\n \"vote\": \"READY\" or \"CHANGES\" or \"REJECT\" or null,\n \"diagram\"\
|
|
: \"@startuml\\n...\\n@enduml\"\n}}\n\nVote meanings:\n- READY: Frontend implementation\
|
|
\ is solid\n- CHANGES: Frontend improvements needed\n- REJECT: Significant frontend\
|
|
\ issues\n- null: Comment only, no vote change\n\nIf you have nothing meaningful\
|
|
\ to add, respond: {{\"sentinel\": \"NO_RESPONSE\"}}\n"
|
|
provider: opencode-pickle
|
|
output_var: response
|
|
- type: code
|
|
code: "import sys\nimport datetime as dt\ntimestamp = dt.datetime.now().strftime(\"\
|
|
%H:%M:%S\")\nline = f\"[{timestamp}] [frontend] AI response received\"\nprint(line,\
|
|
\ file=sys.stderr)\nsys.stderr.flush()\nif log_file:\n with open(log_file,\
|
|
\ 'a') as f:\n f.write(line + \"\\n\")\n f.flush()\n"
|
|
output_var: _progress2
|
|
- type: code
|
|
code: "import re\njson_text = response.strip()\nif json_text.startswith('```'):\n\
|
|
\ code_block = re.search(r'```(?:json)?\\s*(\\{.*\\})\\s*```', json_text, re.DOTALL)\n\
|
|
\ if code_block:\n json_text = code_block.group(1).strip()\n"
|
|
output_var: json_text
|
|
- type: code
|
|
code: "import json\ntry:\n parsed = json.loads(json_text)\nexcept json.JSONDecodeError\
|
|
\ as e:\n fixed = json_text.replace('\\n', '\\\\n')\n try:\n parsed\
|
|
\ = json.loads(fixed)\n except json.JSONDecodeError:\n import re\n \
|
|
\ comment_match = re.search(r'\"comment\"\\s*:\\s*\"(.*?)\"(?=\\s*[,}])',\
|
|
\ json_text, re.DOTALL)\n vote_match = re.search(r'\"vote\"\\s*:\\s*(\"\
|
|
?\\w+\"?|null)', json_text)\n diagram_match = re.search(r'\"diagram\"\\\
|
|
s*:\\s*\"(.*?)\"(?=\\s*[,}])', json_text, re.DOTALL)\n parsed = {\n \
|
|
\ \"comment\": comment_match.group(1).replace('\\n', ' ') if comment_match\
|
|
\ else \"Parse error\",\n \"vote\": vote_match.group(1).strip('\"')\
|
|
\ if vote_match else None,\n \"diagram\": diagram_match.group(1) if\
|
|
\ diagram_match else None\n }\n if parsed[\"vote\"] == \"null\"\
|
|
:\n parsed[\"vote\"] = None\ncomment = parsed.get(\"comment\", \"\"\
|
|
)\nvote = parsed.get(\"vote\")\ndiagram_content = parsed.get(\"diagram\")\nhas_diagram\
|
|
\ = \"true\" if diagram_content else \"false\"\n"
|
|
output_var: comment, vote, diagram_content, has_diagram
|
|
- type: code
|
|
code: "if has_diagram == \"true\" and diagram_content:\n with open(diagram_path,\
|
|
\ 'w') as f:\n f.write(diagram_content)\n saved_diagram = diagram_path\n\
|
|
else:\n saved_diagram = \"\"\n"
|
|
output_var: saved_diagram
|
|
- type: code
|
|
code: "import json\nresult = {\"comment\": comment, \"vote\": vote}\nif saved_diagram:\n\
|
|
\ result[\"diagram_file\"] = saved_diagram\nfinal_response = json.dumps(result)\n"
|
|
output_var: final_response
|
|
output: '{final_response}'
|