diff --git a/.agents/skills/react-testing/SKILL.md b/.agents/skills/react-testing/SKILL.md index ba37d64b..72508e90 100644 --- a/.agents/skills/react-testing/SKILL.md +++ b/.agents/skills/react-testing/SKILL.md @@ -39,6 +39,9 @@ Validate new behavior without overengineering; run the smallest test set that pr - Assert on user-visible output and accessible roles/labels. - Prefer `getByRole`/`getByText`; use `*AllBy*` only when multiples are expected. - Avoid snapshots and brittle DOM structure checks. +- Avoid exact-copy assertions for non-contract UI text. Copy changes frequently and should not break tests. +- Prefer behavior/structure assertions (actions available, state transitions, section visibility, URL state). +- Allow exact-copy assertions only for contractual strings (legal/compliance copy, API/error contracts, critical security warnings). - For expected error-path tests, spy on `console.error` and assert calls to keep test output clean while preserving coverage. ## URL state coverage gate diff --git a/.agents/skills/skill-creator/LICENSE.txt b/.agents/skills/skill-creator/LICENSE.txt new file mode 100644 index 00000000..7a4a3ea2 --- /dev/null +++ b/.agents/skills/skill-creator/LICENSE.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/.agents/skills/skill-creator/SKILL.md b/.agents/skills/skill-creator/SKILL.md new file mode 100644 index 00000000..942bfe89 --- /dev/null +++ b/.agents/skills/skill-creator/SKILL.md @@ -0,0 +1,479 @@ +--- +name: skill-creator +description: Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy. +--- + +# Skill Creator + +A skill for creating new skills and iteratively improving them. + +At a high level, the process of creating a skill goes like this: + +- Decide what you want the skill to do and roughly how it should do it +- Write a draft of the skill +- Create a few test prompts and run claude-with-access-to-the-skill on them +- Help the user evaluate the results both qualitatively and quantitatively + - While the runs happen in the background, draft some quantitative evals if there aren't any (if there are some, you can either use as is or modify if you feel something needs to change about them). Then explain them to the user (or if they already existed, explain the ones that already exist) + - Use the `eval-viewer/generate_review.py` script to show the user the results for them to look at, and also let them look at the quantitative metrics +- Rewrite the skill based on feedback from the user's evaluation of the results (and also if there are any glaring flaws that become apparent from the quantitative benchmarks) +- Repeat until you're satisfied +- Expand the test set and try again at larger scale + +Your job when using this skill is to figure out where the user is in this process and then jump in and help them progress through these stages. So for instance, maybe they're like "I want to make a skill for X". You can help narrow down what they mean, write a draft, write the test cases, figure out how they want to evaluate, run all the prompts, and repeat. + +On the other hand, maybe they already have a draft of the skill. In this case you can go straight to the eval/iterate part of the loop. + +Of course, you should always be flexible and if the user is like "I don't need to run a bunch of evaluations, just vibe with me", you can do that instead. + +Then after the skill is done (but again, the order is flexible), you can also run the skill description improver, which we have a whole separate script for, to optimize the triggering of the skill. + +Cool? Cool. + +## Communicating with the user + +The skill creator is liable to be used by people across a wide range of familiarity with coding jargon. If you haven't heard (and how could you, it's only very recently that it started), there's a trend now where the power of Claude is inspiring plumbers to open up their terminals, parents and grandparents to google "how to install npm". On the other hand, the bulk of users are probably fairly computer-literate. + +So please pay attention to context cues to understand how to phrase your communication! In the default case, just to give you some idea: + +- "evaluation" and "benchmark" are borderline, but OK +- for "JSON" and "assertion" you want to see serious cues from the user that they know what those things are before using them without explaining them + +It's OK to briefly explain terms if you're in doubt, and feel free to clarify terms with a short definition if you're unsure if the user will get it. + +--- + +## Creating a skill + +### Capture Intent + +Start by understanding the user's intent. The current conversation might already contain a workflow the user wants to capture (e.g., they say "turn this into a skill"). If so, extract answers from the conversation history first — the tools used, the sequence of steps, corrections the user made, input/output formats observed. The user may need to fill the gaps, and should confirm before proceeding to the next step. + +1. What should this skill enable Claude to do? +2. When should this skill trigger? (what user phrases/contexts) +3. What's the expected output format? +4. Should we set up test cases to verify the skill works? Skills with objectively verifiable outputs (file transforms, data extraction, code generation, fixed workflow steps) benefit from test cases. Skills with subjective outputs (writing style, art) often don't need them. Suggest the appropriate default based on the skill type, but let the user decide. + +### Interview and Research + +Proactively ask questions about edge cases, input/output formats, example files, success criteria, and dependencies. Wait to write test prompts until you've got this part ironed out. + +Check available MCPs - if useful for research (searching docs, finding similar skills, looking up best practices), research in parallel via subagents if available, otherwise inline. Come prepared with context to reduce burden on the user. + +### Write the SKILL.md + +Based on the user interview, fill in these components: + +- **name**: Skill identifier +- **description**: When to trigger, what it does. This is the primary triggering mechanism - include both what the skill does AND specific contexts for when to use it. All "when to use" info goes here, not in the body. Note: currently Claude has a tendency to "undertrigger" skills -- to not use them when they'd be useful. To combat this, please make the skill descriptions a little bit "pushy". So for instance, instead of "How to build a simple fast dashboard to display internal Anthropic data.", you might write "How to build a simple fast dashboard to display internal Anthropic data. Make sure to use this skill whenever the user mentions dashboards, data visualization, internal metrics, or wants to display any kind of company data, even if they don't explicitly ask for a 'dashboard.'" +- **compatibility**: Required tools, dependencies (optional, rarely needed) +- **the rest of the skill :)** + +### Skill Writing Guide + +#### Anatomy of a Skill + +``` +skill-name/ +├── SKILL.md (required) +│ ├── YAML frontmatter (name, description required) +│ └── Markdown instructions +└── Bundled Resources (optional) + ├── scripts/ - Executable code for deterministic/repetitive tasks + ├── references/ - Docs loaded into context as needed + └── assets/ - Files used in output (templates, icons, fonts) +``` + +#### Progressive Disclosure + +Skills use a three-level loading system: +1. **Metadata** (name + description) - Always in context (~100 words) +2. **SKILL.md body** - In context whenever skill triggers (<500 lines ideal) +3. **Bundled resources** - As needed (unlimited, scripts can execute without loading) + +These word counts are approximate and you can feel free to go longer if needed. + +**Key patterns:** +- Keep SKILL.md under 500 lines; if you're approaching this limit, add an additional layer of hierarchy along with clear pointers about where the model using the skill should go next to follow up. +- Reference files clearly from SKILL.md with guidance on when to read them +- For large reference files (>300 lines), include a table of contents + +**Domain organization**: When a skill supports multiple domains/frameworks, organize by variant: +``` +cloud-deploy/ +├── SKILL.md (workflow + selection) +└── references/ + ├── aws.md + ├── gcp.md + └── azure.md +``` +Claude reads only the relevant reference file. + +#### Principle of Lack of Surprise + +This goes without saying, but skills must not contain malware, exploit code, or any content that could compromise system security. A skill's contents should not surprise the user in their intent if described. Don't go along with requests to create misleading skills or skills designed to facilitate unauthorized access, data exfiltration, or other malicious activities. Things like a "roleplay as an XYZ" are OK though. + +#### Writing Patterns + +Prefer using the imperative form in instructions. + +**Defining output formats** - You can do it like this: +```markdown +## Report structure +ALWAYS use this exact template: +# [Title] +## Executive summary +## Key findings +## Recommendations +``` + +**Examples pattern** - It's useful to include examples. You can format them like this (but if "Input" and "Output" are in the examples you might want to deviate a little): +```markdown +## Commit message format +**Example 1:** +Input: Added user authentication with JWT tokens +Output: feat(auth): implement JWT-based authentication +``` + +### Writing Style + +Try to explain to the model why things are important in lieu of heavy-handed musty MUSTs. Use theory of mind and try to make the skill general and not super-narrow to specific examples. Start by writing a draft and then look at it with fresh eyes and improve it. + +### Test Cases + +After writing the skill draft, come up with 2-3 realistic test prompts — the kind of thing a real user would actually say. Share them with the user: [you don't have to use this exact language] "Here are a few test cases I'd like to try. Do these look right, or do you want to add more?" Then run them. + +Save test cases to `evals/evals.json`. Don't write assertions yet — just the prompts. You'll draft assertions in the next step while the runs are in progress. + +```json +{ + "skill_name": "example-skill", + "evals": [ + { + "id": 1, + "prompt": "User's task prompt", + "expected_output": "Description of expected result", + "files": [] + } + ] +} +``` + +See `references/schemas.md` for the full schema (including the `assertions` field, which you'll add later). + +## Running and evaluating test cases + +This section is one continuous sequence — don't stop partway through. Do NOT use `/skill-test` or any other testing skill. + +Put results in `-workspace/` as a sibling to the skill directory. Within the workspace, organize results by iteration (`iteration-1/`, `iteration-2/`, etc.) and within that, each test case gets a directory (`eval-0/`, `eval-1/`, etc.). Don't create all of this upfront — just create directories as you go. + +### Step 1: Spawn all runs (with-skill AND baseline) in the same turn + +For each test case, spawn two subagents in the same turn — one with the skill, one without. This is important: don't spawn the with-skill runs first and then come back for baselines later. Launch everything at once so it all finishes around the same time. + +**With-skill run:** + +``` +Execute this task: +- Skill path: +- Task: +- Input files: +- Save outputs to: /iteration-/eval-/with_skill/outputs/ +- Outputs to save: +``` + +**Baseline run** (same prompt, but the baseline depends on context): +- **Creating a new skill**: no skill at all. Same prompt, no skill path, save to `without_skill/outputs/`. +- **Improving an existing skill**: the old version. Before editing, snapshot the skill (`cp -r /skill-snapshot/`), then point the baseline subagent at the snapshot. Save to `old_skill/outputs/`. + +Write an `eval_metadata.json` for each test case (assertions can be empty for now). Give each eval a descriptive name based on what it's testing — not just "eval-0". Use this name for the directory too. If this iteration uses new or modified eval prompts, create these files for each new eval directory — don't assume they carry over from previous iterations. + +```json +{ + "eval_id": 0, + "eval_name": "descriptive-name-here", + "prompt": "The user's task prompt", + "assertions": [] +} +``` + +### Step 2: While runs are in progress, draft assertions + +Don't just wait for the runs to finish — you can use this time productively. Draft quantitative assertions for each test case and explain them to the user. If assertions already exist in `evals/evals.json`, review them and explain what they check. + +Good assertions are objectively verifiable and have descriptive names — they should read clearly in the benchmark viewer so someone glancing at the results immediately understands what each one checks. Subjective skills (writing style, design quality) are better evaluated qualitatively — don't force assertions onto things that need human judgment. + +Update the `eval_metadata.json` files and `evals/evals.json` with the assertions once drafted. Also explain to the user what they'll see in the viewer — both the qualitative outputs and the quantitative benchmark. + +### Step 3: As runs complete, capture timing data + +When each subagent task completes, you receive a notification containing `total_tokens` and `duration_ms`. Save this data immediately to `timing.json` in the run directory: + +```json +{ + "total_tokens": 84852, + "duration_ms": 23332, + "total_duration_seconds": 23.3 +} +``` + +This is the only opportunity to capture this data — it comes through the task notification and isn't persisted elsewhere. Process each notification as it arrives rather than trying to batch them. + +### Step 4: Grade, aggregate, and launch the viewer + +Once all runs are done: + +1. **Grade each run** — spawn a grader subagent (or grade inline) that reads `agents/grader.md` and evaluates each assertion against the outputs. Save results to `grading.json` in each run directory. The grading.json expectations array must use the fields `text`, `passed`, and `evidence` (not `name`/`met`/`details` or other variants) — the viewer depends on these exact field names. For assertions that can be checked programmatically, write and run a script rather than eyeballing it — scripts are faster, more reliable, and can be reused across iterations. + +2. **Aggregate into benchmark** — run the aggregation script from the skill-creator directory: + ```bash + python -m scripts.aggregate_benchmark /iteration-N --skill-name + ``` + This produces `benchmark.json` and `benchmark.md` with pass_rate, time, and tokens for each configuration, with mean ± stddev and the delta. If generating benchmark.json manually, see `references/schemas.md` for the exact schema the viewer expects. +Put each with_skill version before its baseline counterpart. + +3. **Do an analyst pass** — read the benchmark data and surface patterns the aggregate stats might hide. See `agents/analyzer.md` (the "Analyzing Benchmark Results" section) for what to look for — things like assertions that always pass regardless of skill (non-discriminating), high-variance evals (possibly flaky), and time/token tradeoffs. + +4. **Launch the viewer** with both qualitative outputs and quantitative data: + ```bash + nohup python /eval-viewer/generate_review.py \ + /iteration-N \ + --skill-name "my-skill" \ + --benchmark /iteration-N/benchmark.json \ + > /dev/null 2>&1 & + VIEWER_PID=$! + ``` + For iteration 2+, also pass `--previous-workspace /iteration-`. + + **Cowork / headless environments:** If `webbrowser.open()` is not available or the environment has no display, use `--static ` to write a standalone HTML file instead of starting a server. Feedback will be downloaded as a `feedback.json` file when the user clicks "Submit All Reviews". After download, copy `feedback.json` into the workspace directory for the next iteration to pick up. + +Note: please use generate_review.py to create the viewer; there's no need to write custom HTML. + +5. **Tell the user** something like: "I've opened the results in your browser. There are two tabs — 'Outputs' lets you click through each test case and leave feedback, 'Benchmark' shows the quantitative comparison. When you're done, come back here and let me know." + +### What the user sees in the viewer + +The "Outputs" tab shows one test case at a time: +- **Prompt**: the task that was given +- **Output**: the files the skill produced, rendered inline where possible +- **Previous Output** (iteration 2+): collapsed section showing last iteration's output +- **Formal Grades** (if grading was run): collapsed section showing assertion pass/fail +- **Feedback**: a textbox that auto-saves as they type +- **Previous Feedback** (iteration 2+): their comments from last time, shown below the textbox + +The "Benchmark" tab shows the stats summary: pass rates, timing, and token usage for each configuration, with per-eval breakdowns and analyst observations. + +Navigation is via prev/next buttons or arrow keys. When done, they click "Submit All Reviews" which saves all feedback to `feedback.json`. + +### Step 5: Read the feedback + +When the user tells you they're done, read `feedback.json`: + +```json +{ + "reviews": [ + {"run_id": "eval-0-with_skill", "feedback": "the chart is missing axis labels", "timestamp": "..."}, + {"run_id": "eval-1-with_skill", "feedback": "", "timestamp": "..."}, + {"run_id": "eval-2-with_skill", "feedback": "perfect, love this", "timestamp": "..."} + ], + "status": "complete" +} +``` + +Empty feedback means the user thought it was fine. Focus your improvements on the test cases where the user had specific complaints. + +Kill the viewer server when you're done with it: + +```bash +kill $VIEWER_PID 2>/dev/null +``` + +--- + +## Improving the skill + +This is the heart of the loop. You've run the test cases, the user has reviewed the results, and now you need to make the skill better based on their feedback. + +### How to think about improvements + +1. **Generalize from the feedback.** The big picture thing that's happening here is that we're trying to create skills that can be used a million times (maybe literally, maybe even more who knows) across many different prompts. Here you and the user are iterating on only a few examples over and over again because it helps move faster. The user knows these examples in and out and it's quick for them to assess new outputs. But if the skill you and the user are codeveloping works only for those examples, it's useless. Rather than put in fiddly overfitty changes, or oppressively constrictive MUSTs, if there's some stubborn issue, you might try branching out and using different metaphors, or recommending different patterns of working. It's relatively cheap to try and maybe you'll land on something great. + +2. **Keep the prompt lean.** Remove things that aren't pulling their weight. Make sure to read the transcripts, not just the final outputs — if it looks like the skill is making the model waste a bunch of time doing things that are unproductive, you can try getting rid of the parts of the skill that are making it do that and seeing what happens. + +3. **Explain the why.** Try hard to explain the **why** behind everything you're asking the model to do. Today's LLMs are *smart*. They have good theory of mind and when given a good harness can go beyond rote instructions and really make things happen. Even if the feedback from the user is terse or frustrated, try to actually understand the task and why the user is writing what they wrote, and what they actually wrote, and then transmit this understanding into the instructions. If you find yourself writing ALWAYS or NEVER in all caps, or using super rigid structures, that's a yellow flag — if possible, reframe and explain the reasoning so that the model understands why the thing you're asking for is important. That's a more humane, powerful, and effective approach. + +4. **Look for repeated work across test cases.** Read the transcripts from the test runs and notice if the subagents all independently wrote similar helper scripts or took the same multi-step approach to something. If all 3 test cases resulted in the subagent writing a `create_docx.py` or a `build_chart.py`, that's a strong signal the skill should bundle that script. Write it once, put it in `scripts/`, and tell the skill to use it. This saves every future invocation from reinventing the wheel. + +This task is pretty important (we are trying to create billions a year in economic value here!) and your thinking time is not the blocker; take your time and really mull things over. I'd suggest writing a draft revision and then looking at it anew and making improvements. Really do your best to get into the head of the user and understand what they want and need. + +### The iteration loop + +After improving the skill: + +1. Apply your improvements to the skill +2. Rerun all test cases into a new `iteration-/` directory, including baseline runs. If you're creating a new skill, the baseline is always `without_skill` (no skill) — that stays the same across iterations. If you're improving an existing skill, use your judgment on what makes sense as the baseline: the original version the user came in with, or the previous iteration. +3. Launch the reviewer with `--previous-workspace` pointing at the previous iteration +4. Wait for the user to review and tell you they're done +5. Read the new feedback, improve again, repeat + +Keep going until: +- The user says they're happy +- The feedback is all empty (everything looks good) +- You're not making meaningful progress + +--- + +## Advanced: Blind comparison + +For situations where you want a more rigorous comparison between two versions of a skill (e.g., the user asks "is the new version actually better?"), there's a blind comparison system. Read `agents/comparator.md` and `agents/analyzer.md` for the details. The basic idea is: give two outputs to an independent agent without telling it which is which, and let it judge quality. Then analyze why the winner won. + +This is optional, requires subagents, and most users won't need it. The human review loop is usually sufficient. + +--- + +## Description Optimization + +The description field in SKILL.md frontmatter is the primary mechanism that determines whether Claude invokes a skill. After creating or improving a skill, offer to optimize the description for better triggering accuracy. + +### Step 1: Generate trigger eval queries + +Create 20 eval queries — a mix of should-trigger and should-not-trigger. Save as JSON: + +```json +[ + {"query": "the user prompt", "should_trigger": true}, + {"query": "another prompt", "should_trigger": false} +] +``` + +The queries must be realistic and something a Claude Code or Claude.ai user would actually type. Not abstract requests, but requests that are concrete and specific and have a good amount of detail. For instance, file paths, personal context about the user's job or situation, column names and values, company names, URLs. A little bit of backstory. Some might be in lowercase or contain abbreviations or typos or casual speech. Use a mix of different lengths, and focus on edge cases rather than making them clear-cut (the user will get a chance to sign off on them). + +Bad: `"Format this data"`, `"Extract text from PDF"`, `"Create a chart"` + +Good: `"ok so my boss just sent me this xlsx file (its in my downloads, called something like 'Q4 sales final FINAL v2.xlsx') and she wants me to add a column that shows the profit margin as a percentage. The revenue is in column C and costs are in column D i think"` + +For the **should-trigger** queries (8-10), think about coverage. You want different phrasings of the same intent — some formal, some casual. Include cases where the user doesn't explicitly name the skill or file type but clearly needs it. Throw in some uncommon use cases and cases where this skill competes with another but should win. + +For the **should-not-trigger** queries (8-10), the most valuable ones are the near-misses — queries that share keywords or concepts with the skill but actually need something different. Think adjacent domains, ambiguous phrasing where a naive keyword match would trigger but shouldn't, and cases where the query touches on something the skill does but in a context where another tool is more appropriate. + +The key thing to avoid: don't make should-not-trigger queries obviously irrelevant. "Write a fibonacci function" as a negative test for a PDF skill is too easy — it doesn't test anything. The negative cases should be genuinely tricky. + +### Step 2: Review with user + +Present the eval set to the user for review using the HTML template: + +1. Read the template from `assets/eval_review.html` +2. Replace the placeholders: + - `__EVAL_DATA_PLACEHOLDER__` → the JSON array of eval items (no quotes around it — it's a JS variable assignment) + - `__SKILL_NAME_PLACEHOLDER__` → the skill's name + - `__SKILL_DESCRIPTION_PLACEHOLDER__` → the skill's current description +3. Write to a temp file (e.g., `/tmp/eval_review_.html`) and open it: `open /tmp/eval_review_.html` +4. The user can edit queries, toggle should-trigger, add/remove entries, then click "Export Eval Set" +5. The file downloads to `~/Downloads/eval_set.json` — check the Downloads folder for the most recent version in case there are multiple (e.g., `eval_set (1).json`) + +This step matters — bad eval queries lead to bad descriptions. + +### Step 3: Run the optimization loop + +Tell the user: "This will take some time — I'll run the optimization loop in the background and check on it periodically." + +Save the eval set to the workspace, then run in the background: + +```bash +python -m scripts.run_loop \ + --eval-set \ + --skill-path \ + --model \ + --max-iterations 5 \ + --verbose +``` + +Use the model ID from your system prompt (the one powering the current session) so the triggering test matches what the user actually experiences. + +While it runs, periodically tail the output to give the user updates on which iteration it's on and what the scores look like. + +This handles the full optimization loop automatically. It splits the eval set into 60% train and 40% held-out test, evaluates the current description (running each query 3 times to get a reliable trigger rate), then calls Claude with extended thinking to propose improvements based on what failed. It re-evaluates each new description on both train and test, iterating up to 5 times. When it's done, it opens an HTML report in the browser showing the results per iteration and returns JSON with `best_description` — selected by test score rather than train score to avoid overfitting. + +### How skill triggering works + +Understanding the triggering mechanism helps design better eval queries. Skills appear in Claude's `available_skills` list with their name + description, and Claude decides whether to consult a skill based on that description. The important thing to know is that Claude only consults skills for tasks it can't easily handle on its own — simple, one-step queries like "read this PDF" may not trigger a skill even if the description matches perfectly, because Claude can handle them directly with basic tools. Complex, multi-step, or specialized queries reliably trigger skills when the description matches. + +This means your eval queries should be substantive enough that Claude would actually benefit from consulting a skill. Simple queries like "read file X" are poor test cases — they won't trigger skills regardless of description quality. + +### Step 4: Apply the result + +Take `best_description` from the JSON output and update the skill's SKILL.md frontmatter. Show the user before/after and report the scores. + +--- + +### Package and Present (only if `present_files` tool is available) + +Check whether you have access to the `present_files` tool. If you don't, skip this step. If you do, package the skill and present the .skill file to the user: + +```bash +python -m scripts.package_skill +``` + +After packaging, direct the user to the resulting `.skill` file path so they can install it. + +--- + +## Claude.ai-specific instructions + +In Claude.ai, the core workflow is the same (draft → test → review → improve → repeat), but because Claude.ai doesn't have subagents, some mechanics change. Here's what to adapt: + +**Running test cases**: No subagents means no parallel execution. For each test case, read the skill's SKILL.md, then follow its instructions to accomplish the test prompt yourself. Do them one at a time. This is less rigorous than independent subagents (you wrote the skill and you're also running it, so you have full context), but it's a useful sanity check — and the human review step compensates. Skip the baseline runs — just use the skill to complete the task as requested. + +**Reviewing results**: If you can't open a browser (e.g., Claude.ai's VM has no display, or you're on a remote server), skip the browser reviewer entirely. Instead, present results directly in the conversation. For each test case, show the prompt and the output. If the output is a file the user needs to see (like a .docx or .xlsx), save it to the filesystem and tell them where it is so they can download and inspect it. Ask for feedback inline: "How does this look? Anything you'd change?" + +**Benchmarking**: Skip the quantitative benchmarking — it relies on baseline comparisons which aren't meaningful without subagents. Focus on qualitative feedback from the user. + +**The iteration loop**: Same as before — improve the skill, rerun the test cases, ask for feedback — just without the browser reviewer in the middle. You can still organize results into iteration directories on the filesystem if you have one. + +**Description optimization**: This section requires the `claude` CLI tool (specifically `claude -p`) which is only available in Claude Code. Skip it if you're on Claude.ai. + +**Blind comparison**: Requires subagents. Skip it. + +**Packaging**: The `package_skill.py` script works anywhere with Python and a filesystem. On Claude.ai, you can run it and the user can download the resulting `.skill` file. + +--- + +## Cowork-Specific Instructions + +If you're in Cowork, the main things to know are: + +- You have subagents, so the main workflow (spawn test cases in parallel, run baselines, grade, etc.) all works. (However, if you run into severe problems with timeouts, it's OK to run the test prompts in series rather than parallel.) +- You don't have a browser or display, so when generating the eval viewer, use `--static ` to write a standalone HTML file instead of starting a server. Then proffer a link that the user can click to open the HTML in their browser. +- For whatever reason, the Cowork setup seems to disincline Claude from generating the eval viewer after running the tests, so just to reiterate: whether you're in Cowork or in Claude Code, after running tests, you should always generate the eval viewer for the human to look at examples before revising the skill yourself and trying to make corrections, using `generate_review.py` (not writing your own boutique html code). Sorry in advance but I'm gonna go all caps here: GENERATE THE EVAL VIEWER *BEFORE* evaluating inputs yourself. You want to get them in front of the human ASAP! +- Feedback works differently: since there's no running server, the viewer's "Submit All Reviews" button will download `feedback.json` as a file. You can then read it from there (you may have to request access first). +- Packaging works — `package_skill.py` just needs Python and a filesystem. +- Description optimization (`run_loop.py` / `run_eval.py`) should work in Cowork just fine since it uses `claude -p` via subprocess, not a browser, but please save it until you've fully finished making the skill and the user agrees it's in good shape. + +--- + +## Reference files + +The agents/ directory contains instructions for specialized subagents. Read them when you need to spawn the relevant subagent. + +- `agents/grader.md` — How to evaluate assertions against outputs +- `agents/comparator.md` — How to do blind A/B comparison between two outputs +- `agents/analyzer.md` — How to analyze why one version beat another + +The references/ directory has additional documentation: +- `references/schemas.md` — JSON structures for evals.json, grading.json, etc. + +--- + +Repeating one more time the core loop here for emphasis: + +- Figure out what the skill is about +- Draft or edit the skill +- Run claude-with-access-to-the-skill on test prompts +- With the user, evaluate the outputs: + - Create benchmark.json and run `eval-viewer/generate_review.py` to help the user review them + - Run quantitative evals +- Repeat until you and the user are satisfied +- Package the final skill and return it to the user. + +Please add steps to your TodoList, if you have such a thing, to make sure you don't forget. If you're in Cowork, please specifically put "Create evals JSON and run `eval-viewer/generate_review.py` so human can review test cases" in your TodoList to make sure it happens. + +Good luck! diff --git a/.agents/skills/skill-creator/agents/analyzer.md b/.agents/skills/skill-creator/agents/analyzer.md new file mode 100644 index 00000000..14e41d60 --- /dev/null +++ b/.agents/skills/skill-creator/agents/analyzer.md @@ -0,0 +1,274 @@ +# Post-hoc Analyzer Agent + +Analyze blind comparison results to understand WHY the winner won and generate improvement suggestions. + +## Role + +After the blind comparator determines a winner, the Post-hoc Analyzer "unblids" the results by examining the skills and transcripts. The goal is to extract actionable insights: what made the winner better, and how can the loser be improved? + +## Inputs + +You receive these parameters in your prompt: + +- **winner**: "A" or "B" (from blind comparison) +- **winner_skill_path**: Path to the skill that produced the winning output +- **winner_transcript_path**: Path to the execution transcript for the winner +- **loser_skill_path**: Path to the skill that produced the losing output +- **loser_transcript_path**: Path to the execution transcript for the loser +- **comparison_result_path**: Path to the blind comparator's output JSON +- **output_path**: Where to save the analysis results + +## Process + +### Step 1: Read Comparison Result + +1. Read the blind comparator's output at comparison_result_path +2. Note the winning side (A or B), the reasoning, and any scores +3. Understand what the comparator valued in the winning output + +### Step 2: Read Both Skills + +1. Read the winner skill's SKILL.md and key referenced files +2. Read the loser skill's SKILL.md and key referenced files +3. Identify structural differences: + - Instructions clarity and specificity + - Script/tool usage patterns + - Example coverage + - Edge case handling + +### Step 3: Read Both Transcripts + +1. Read the winner's transcript +2. Read the loser's transcript +3. Compare execution patterns: + - How closely did each follow their skill's instructions? + - What tools were used differently? + - Where did the loser diverge from optimal behavior? + - Did either encounter errors or make recovery attempts? + +### Step 4: Analyze Instruction Following + +For each transcript, evaluate: +- Did the agent follow the skill's explicit instructions? +- Did the agent use the skill's provided tools/scripts? +- Were there missed opportunities to leverage skill content? +- Did the agent add unnecessary steps not in the skill? + +Score instruction following 1-10 and note specific issues. + +### Step 5: Identify Winner Strengths + +Determine what made the winner better: +- Clearer instructions that led to better behavior? +- Better scripts/tools that produced better output? +- More comprehensive examples that guided edge cases? +- Better error handling guidance? + +Be specific. Quote from skills/transcripts where relevant. + +### Step 6: Identify Loser Weaknesses + +Determine what held the loser back: +- Ambiguous instructions that led to suboptimal choices? +- Missing tools/scripts that forced workarounds? +- Gaps in edge case coverage? +- Poor error handling that caused failures? + +### Step 7: Generate Improvement Suggestions + +Based on the analysis, produce actionable suggestions for improving the loser skill: +- Specific instruction changes to make +- Tools/scripts to add or modify +- Examples to include +- Edge cases to address + +Prioritize by impact. Focus on changes that would have changed the outcome. + +### Step 8: Write Analysis Results + +Save structured analysis to `{output_path}`. + +## Output Format + +Write a JSON file with this structure: + +```json +{ + "comparison_summary": { + "winner": "A", + "winner_skill": "path/to/winner/skill", + "loser_skill": "path/to/loser/skill", + "comparator_reasoning": "Brief summary of why comparator chose winner" + }, + "winner_strengths": [ + "Clear step-by-step instructions for handling multi-page documents", + "Included validation script that caught formatting errors", + "Explicit guidance on fallback behavior when OCR fails" + ], + "loser_weaknesses": [ + "Vague instruction 'process the document appropriately' led to inconsistent behavior", + "No script for validation, agent had to improvise and made errors", + "No guidance on OCR failure, agent gave up instead of trying alternatives" + ], + "instruction_following": { + "winner": { + "score": 9, + "issues": [ + "Minor: skipped optional logging step" + ] + }, + "loser": { + "score": 6, + "issues": [ + "Did not use the skill's formatting template", + "Invented own approach instead of following step 3", + "Missed the 'always validate output' instruction" + ] + } + }, + "improvement_suggestions": [ + { + "priority": "high", + "category": "instructions", + "suggestion": "Replace 'process the document appropriately' with explicit steps: 1) Extract text, 2) Identify sections, 3) Format per template", + "expected_impact": "Would eliminate ambiguity that caused inconsistent behavior" + }, + { + "priority": "high", + "category": "tools", + "suggestion": "Add validate_output.py script similar to winner skill's validation approach", + "expected_impact": "Would catch formatting errors before final output" + }, + { + "priority": "medium", + "category": "error_handling", + "suggestion": "Add fallback instructions: 'If OCR fails, try: 1) different resolution, 2) image preprocessing, 3) manual extraction'", + "expected_impact": "Would prevent early failure on difficult documents" + } + ], + "transcript_insights": { + "winner_execution_pattern": "Read skill -> Followed 5-step process -> Used validation script -> Fixed 2 issues -> Produced output", + "loser_execution_pattern": "Read skill -> Unclear on approach -> Tried 3 different methods -> No validation -> Output had errors" + } +} +``` + +## Guidelines + +- **Be specific**: Quote from skills and transcripts, don't just say "instructions were unclear" +- **Be actionable**: Suggestions should be concrete changes, not vague advice +- **Focus on skill improvements**: The goal is to improve the losing skill, not critique the agent +- **Prioritize by impact**: Which changes would most likely have changed the outcome? +- **Consider causation**: Did the skill weakness actually cause the worse output, or is it incidental? +- **Stay objective**: Analyze what happened, don't editorialize +- **Think about generalization**: Would this improvement help on other evals too? + +## Categories for Suggestions + +Use these categories to organize improvement suggestions: + +| Category | Description | +|----------|-------------| +| `instructions` | Changes to the skill's prose instructions | +| `tools` | Scripts, templates, or utilities to add/modify | +| `examples` | Example inputs/outputs to include | +| `error_handling` | Guidance for handling failures | +| `structure` | Reorganization of skill content | +| `references` | External docs or resources to add | + +## Priority Levels + +- **high**: Would likely change the outcome of this comparison +- **medium**: Would improve quality but may not change win/loss +- **low**: Nice to have, marginal improvement + +--- + +# Analyzing Benchmark Results + +When analyzing benchmark results, the analyzer's purpose is to **surface patterns and anomalies** across multiple runs, not suggest skill improvements. + +## Role + +Review all benchmark run results and generate freeform notes that help the user understand skill performance. Focus on patterns that wouldn't be visible from aggregate metrics alone. + +## Inputs + +You receive these parameters in your prompt: + +- **benchmark_data_path**: Path to the in-progress benchmark.json with all run results +- **skill_path**: Path to the skill being benchmarked +- **output_path**: Where to save the notes (as JSON array of strings) + +## Process + +### Step 1: Read Benchmark Data + +1. Read the benchmark.json containing all run results +2. Note the configurations tested (with_skill, without_skill) +3. Understand the run_summary aggregates already calculated + +### Step 2: Analyze Per-Assertion Patterns + +For each expectation across all runs: +- Does it **always pass** in both configurations? (may not differentiate skill value) +- Does it **always fail** in both configurations? (may be broken or beyond capability) +- Does it **always pass with skill but fail without**? (skill clearly adds value here) +- Does it **always fail with skill but pass without**? (skill may be hurting) +- Is it **highly variable**? (flaky expectation or non-deterministic behavior) + +### Step 3: Analyze Cross-Eval Patterns + +Look for patterns across evals: +- Are certain eval types consistently harder/easier? +- Do some evals show high variance while others are stable? +- Are there surprising results that contradict expectations? + +### Step 4: Analyze Metrics Patterns + +Look at time_seconds, tokens, tool_calls: +- Does the skill significantly increase execution time? +- Is there high variance in resource usage? +- Are there outlier runs that skew the aggregates? + +### Step 5: Generate Notes + +Write freeform observations as a list of strings. Each note should: +- State a specific observation +- Be grounded in the data (not speculation) +- Help the user understand something the aggregate metrics don't show + +Examples: +- "Assertion 'Output is a PDF file' passes 100% in both configurations - may not differentiate skill value" +- "Eval 3 shows high variance (50% ± 40%) - run 2 had an unusual failure that may be flaky" +- "Without-skill runs consistently fail on table extraction expectations (0% pass rate)" +- "Skill adds 13s average execution time but improves pass rate by 50%" +- "Token usage is 80% higher with skill, primarily due to script output parsing" +- "All 3 without-skill runs for eval 1 produced empty output" + +### Step 6: Write Notes + +Save notes to `{output_path}` as a JSON array of strings: + +```json +[ + "Assertion 'Output is a PDF file' passes 100% in both configurations - may not differentiate skill value", + "Eval 3 shows high variance (50% ± 40%) - run 2 had an unusual failure", + "Without-skill runs consistently fail on table extraction expectations", + "Skill adds 13s average execution time but improves pass rate by 50%" +] +``` + +## Guidelines + +**DO:** +- Report what you observe in the data +- Be specific about which evals, expectations, or runs you're referring to +- Note patterns that aggregate metrics would hide +- Provide context that helps interpret the numbers + +**DO NOT:** +- Suggest improvements to the skill (that's for the improvement step, not benchmarking) +- Make subjective quality judgments ("the output was good/bad") +- Speculate about causes without evidence +- Repeat information already in the run_summary aggregates diff --git a/.agents/skills/skill-creator/agents/comparator.md b/.agents/skills/skill-creator/agents/comparator.md new file mode 100644 index 00000000..80e00eb4 --- /dev/null +++ b/.agents/skills/skill-creator/agents/comparator.md @@ -0,0 +1,202 @@ +# Blind Comparator Agent + +Compare two outputs WITHOUT knowing which skill produced them. + +## Role + +The Blind Comparator judges which output better accomplishes the eval task. You receive two outputs labeled A and B, but you do NOT know which skill produced which. This prevents bias toward a particular skill or approach. + +Your judgment is based purely on output quality and task completion. + +## Inputs + +You receive these parameters in your prompt: + +- **output_a_path**: Path to the first output file or directory +- **output_b_path**: Path to the second output file or directory +- **eval_prompt**: The original task/prompt that was executed +- **expectations**: List of expectations to check (optional - may be empty) + +## Process + +### Step 1: Read Both Outputs + +1. Examine output A (file or directory) +2. Examine output B (file or directory) +3. Note the type, structure, and content of each +4. If outputs are directories, examine all relevant files inside + +### Step 2: Understand the Task + +1. Read the eval_prompt carefully +2. Identify what the task requires: + - What should be produced? + - What qualities matter (accuracy, completeness, format)? + - What would distinguish a good output from a poor one? + +### Step 3: Generate Evaluation Rubric + +Based on the task, generate a rubric with two dimensions: + +**Content Rubric** (what the output contains): +| Criterion | 1 (Poor) | 3 (Acceptable) | 5 (Excellent) | +|-----------|----------|----------------|---------------| +| Correctness | Major errors | Minor errors | Fully correct | +| Completeness | Missing key elements | Mostly complete | All elements present | +| Accuracy | Significant inaccuracies | Minor inaccuracies | Accurate throughout | + +**Structure Rubric** (how the output is organized): +| Criterion | 1 (Poor) | 3 (Acceptable) | 5 (Excellent) | +|-----------|----------|----------------|---------------| +| Organization | Disorganized | Reasonably organized | Clear, logical structure | +| Formatting | Inconsistent/broken | Mostly consistent | Professional, polished | +| Usability | Difficult to use | Usable with effort | Easy to use | + +Adapt criteria to the specific task. For example: +- PDF form → "Field alignment", "Text readability", "Data placement" +- Document → "Section structure", "Heading hierarchy", "Paragraph flow" +- Data output → "Schema correctness", "Data types", "Completeness" + +### Step 4: Evaluate Each Output Against the Rubric + +For each output (A and B): + +1. **Score each criterion** on the rubric (1-5 scale) +2. **Calculate dimension totals**: Content score, Structure score +3. **Calculate overall score**: Average of dimension scores, scaled to 1-10 + +### Step 5: Check Assertions (if provided) + +If expectations are provided: + +1. Check each expectation against output A +2. Check each expectation against output B +3. Count pass rates for each output +4. Use expectation scores as secondary evidence (not the primary decision factor) + +### Step 6: Determine the Winner + +Compare A and B based on (in priority order): + +1. **Primary**: Overall rubric score (content + structure) +2. **Secondary**: Assertion pass rates (if applicable) +3. **Tiebreaker**: If truly equal, declare a TIE + +Be decisive - ties should be rare. One output is usually better, even if marginally. + +### Step 7: Write Comparison Results + +Save results to a JSON file at the path specified (or `comparison.json` if not specified). + +## Output Format + +Write a JSON file with this structure: + +```json +{ + "winner": "A", + "reasoning": "Output A provides a complete solution with proper formatting and all required fields. Output B is missing the date field and has formatting inconsistencies.", + "rubric": { + "A": { + "content": { + "correctness": 5, + "completeness": 5, + "accuracy": 4 + }, + "structure": { + "organization": 4, + "formatting": 5, + "usability": 4 + }, + "content_score": 4.7, + "structure_score": 4.3, + "overall_score": 9.0 + }, + "B": { + "content": { + "correctness": 3, + "completeness": 2, + "accuracy": 3 + }, + "structure": { + "organization": 3, + "formatting": 2, + "usability": 3 + }, + "content_score": 2.7, + "structure_score": 2.7, + "overall_score": 5.4 + } + }, + "output_quality": { + "A": { + "score": 9, + "strengths": ["Complete solution", "Well-formatted", "All fields present"], + "weaknesses": ["Minor style inconsistency in header"] + }, + "B": { + "score": 5, + "strengths": ["Readable output", "Correct basic structure"], + "weaknesses": ["Missing date field", "Formatting inconsistencies", "Partial data extraction"] + } + }, + "expectation_results": { + "A": { + "passed": 4, + "total": 5, + "pass_rate": 0.80, + "details": [ + {"text": "Output includes name", "passed": true}, + {"text": "Output includes date", "passed": true}, + {"text": "Format is PDF", "passed": true}, + {"text": "Contains signature", "passed": false}, + {"text": "Readable text", "passed": true} + ] + }, + "B": { + "passed": 3, + "total": 5, + "pass_rate": 0.60, + "details": [ + {"text": "Output includes name", "passed": true}, + {"text": "Output includes date", "passed": false}, + {"text": "Format is PDF", "passed": true}, + {"text": "Contains signature", "passed": false}, + {"text": "Readable text", "passed": true} + ] + } + } +} +``` + +If no expectations were provided, omit the `expectation_results` field entirely. + +## Field Descriptions + +- **winner**: "A", "B", or "TIE" +- **reasoning**: Clear explanation of why the winner was chosen (or why it's a tie) +- **rubric**: Structured rubric evaluation for each output + - **content**: Scores for content criteria (correctness, completeness, accuracy) + - **structure**: Scores for structure criteria (organization, formatting, usability) + - **content_score**: Average of content criteria (1-5) + - **structure_score**: Average of structure criteria (1-5) + - **overall_score**: Combined score scaled to 1-10 +- **output_quality**: Summary quality assessment + - **score**: 1-10 rating (should match rubric overall_score) + - **strengths**: List of positive aspects + - **weaknesses**: List of issues or shortcomings +- **expectation_results**: (Only if expectations provided) + - **passed**: Number of expectations that passed + - **total**: Total number of expectations + - **pass_rate**: Fraction passed (0.0 to 1.0) + - **details**: Individual expectation results + +## Guidelines + +- **Stay blind**: DO NOT try to infer which skill produced which output. Judge purely on output quality. +- **Be specific**: Cite specific examples when explaining strengths and weaknesses. +- **Be decisive**: Choose a winner unless outputs are genuinely equivalent. +- **Output quality first**: Assertion scores are secondary to overall task completion. +- **Be objective**: Don't favor outputs based on style preferences; focus on correctness and completeness. +- **Explain your reasoning**: The reasoning field should make it clear why you chose the winner. +- **Handle edge cases**: If both outputs fail, pick the one that fails less badly. If both are excellent, pick the one that's marginally better. diff --git a/.agents/skills/skill-creator/agents/grader.md b/.agents/skills/skill-creator/agents/grader.md new file mode 100644 index 00000000..558ab05c --- /dev/null +++ b/.agents/skills/skill-creator/agents/grader.md @@ -0,0 +1,223 @@ +# Grader Agent + +Evaluate expectations against an execution transcript and outputs. + +## Role + +The Grader reviews a transcript and output files, then determines whether each expectation passes or fails. Provide clear evidence for each judgment. + +You have two jobs: grade the outputs, and critique the evals themselves. A passing grade on a weak assertion is worse than useless — it creates false confidence. When you notice an assertion that's trivially satisfied, or an important outcome that no assertion checks, say so. + +## Inputs + +You receive these parameters in your prompt: + +- **expectations**: List of expectations to evaluate (strings) +- **transcript_path**: Path to the execution transcript (markdown file) +- **outputs_dir**: Directory containing output files from execution + +## Process + +### Step 1: Read the Transcript + +1. Read the transcript file completely +2. Note the eval prompt, execution steps, and final result +3. Identify any issues or errors documented + +### Step 2: Examine Output Files + +1. List files in outputs_dir +2. Read/examine each file relevant to the expectations. If outputs aren't plain text, use the inspection tools provided in your prompt — don't rely solely on what the transcript says the executor produced. +3. Note contents, structure, and quality + +### Step 3: Evaluate Each Assertion + +For each expectation: + +1. **Search for evidence** in the transcript and outputs +2. **Determine verdict**: + - **PASS**: Clear evidence the expectation is true AND the evidence reflects genuine task completion, not just surface-level compliance + - **FAIL**: No evidence, or evidence contradicts the expectation, or the evidence is superficial (e.g., correct filename but empty/wrong content) +3. **Cite the evidence**: Quote the specific text or describe what you found + +### Step 4: Extract and Verify Claims + +Beyond the predefined expectations, extract implicit claims from the outputs and verify them: + +1. **Extract claims** from the transcript and outputs: + - Factual statements ("The form has 12 fields") + - Process claims ("Used pypdf to fill the form") + - Quality claims ("All fields were filled correctly") + +2. **Verify each claim**: + - **Factual claims**: Can be checked against the outputs or external sources + - **Process claims**: Can be verified from the transcript + - **Quality claims**: Evaluate whether the claim is justified + +3. **Flag unverifiable claims**: Note claims that cannot be verified with available information + +This catches issues that predefined expectations might miss. + +### Step 5: Read User Notes + +If `{outputs_dir}/user_notes.md` exists: +1. Read it and note any uncertainties or issues flagged by the executor +2. Include relevant concerns in the grading output +3. These may reveal problems even when expectations pass + +### Step 6: Critique the Evals + +After grading, consider whether the evals themselves could be improved. Only surface suggestions when there's a clear gap. + +Good suggestions test meaningful outcomes — assertions that are hard to satisfy without actually doing the work correctly. Think about what makes an assertion *discriminating*: it passes when the skill genuinely succeeds and fails when it doesn't. + +Suggestions worth raising: +- An assertion that passed but would also pass for a clearly wrong output (e.g., checking filename existence but not file content) +- An important outcome you observed — good or bad — that no assertion covers at all +- An assertion that can't actually be verified from the available outputs + +Keep the bar high. The goal is to flag things the eval author would say "good catch" about, not to nitpick every assertion. + +### Step 7: Write Grading Results + +Save results to `{outputs_dir}/../grading.json` (sibling to outputs_dir). + +## Grading Criteria + +**PASS when**: +- The transcript or outputs clearly demonstrate the expectation is true +- Specific evidence can be cited +- The evidence reflects genuine substance, not just surface compliance (e.g., a file exists AND contains correct content, not just the right filename) + +**FAIL when**: +- No evidence found for the expectation +- Evidence contradicts the expectation +- The expectation cannot be verified from available information +- The evidence is superficial — the assertion is technically satisfied but the underlying task outcome is wrong or incomplete +- The output appears to meet the assertion by coincidence rather than by actually doing the work + +**When uncertain**: The burden of proof to pass is on the expectation. + +### Step 8: Read Executor Metrics and Timing + +1. If `{outputs_dir}/metrics.json` exists, read it and include in grading output +2. If `{outputs_dir}/../timing.json` exists, read it and include timing data + +## Output Format + +Write a JSON file with this structure: + +```json +{ + "expectations": [ + { + "text": "The output includes the name 'John Smith'", + "passed": true, + "evidence": "Found in transcript Step 3: 'Extracted names: John Smith, Sarah Johnson'" + }, + { + "text": "The spreadsheet has a SUM formula in cell B10", + "passed": false, + "evidence": "No spreadsheet was created. The output was a text file." + }, + { + "text": "The assistant used the skill's OCR script", + "passed": true, + "evidence": "Transcript Step 2 shows: 'Tool: Bash - python ocr_script.py image.png'" + } + ], + "summary": { + "passed": 2, + "failed": 1, + "total": 3, + "pass_rate": 0.67 + }, + "execution_metrics": { + "tool_calls": { + "Read": 5, + "Write": 2, + "Bash": 8 + }, + "total_tool_calls": 15, + "total_steps": 6, + "errors_encountered": 0, + "output_chars": 12450, + "transcript_chars": 3200 + }, + "timing": { + "executor_duration_seconds": 165.0, + "grader_duration_seconds": 26.0, + "total_duration_seconds": 191.0 + }, + "claims": [ + { + "claim": "The form has 12 fillable fields", + "type": "factual", + "verified": true, + "evidence": "Counted 12 fields in field_info.json" + }, + { + "claim": "All required fields were populated", + "type": "quality", + "verified": false, + "evidence": "Reference section was left blank despite data being available" + } + ], + "user_notes_summary": { + "uncertainties": ["Used 2023 data, may be stale"], + "needs_review": [], + "workarounds": ["Fell back to text overlay for non-fillable fields"] + }, + "eval_feedback": { + "suggestions": [ + { + "assertion": "The output includes the name 'John Smith'", + "reason": "A hallucinated document that mentions the name would also pass — consider checking it appears as the primary contact with matching phone and email from the input" + }, + { + "reason": "No assertion checks whether the extracted phone numbers match the input — I observed incorrect numbers in the output that went uncaught" + } + ], + "overall": "Assertions check presence but not correctness. Consider adding content verification." + } +} +``` + +## Field Descriptions + +- **expectations**: Array of graded expectations + - **text**: The original expectation text + - **passed**: Boolean - true if expectation passes + - **evidence**: Specific quote or description supporting the verdict +- **summary**: Aggregate statistics + - **passed**: Count of passed expectations + - **failed**: Count of failed expectations + - **total**: Total expectations evaluated + - **pass_rate**: Fraction passed (0.0 to 1.0) +- **execution_metrics**: Copied from executor's metrics.json (if available) + - **output_chars**: Total character count of output files (proxy for tokens) + - **transcript_chars**: Character count of transcript +- **timing**: Wall clock timing from timing.json (if available) + - **executor_duration_seconds**: Time spent in executor subagent + - **total_duration_seconds**: Total elapsed time for the run +- **claims**: Extracted and verified claims from the output + - **claim**: The statement being verified + - **type**: "factual", "process", or "quality" + - **verified**: Boolean - whether the claim holds + - **evidence**: Supporting or contradicting evidence +- **user_notes_summary**: Issues flagged by the executor + - **uncertainties**: Things the executor wasn't sure about + - **needs_review**: Items requiring human attention + - **workarounds**: Places where the skill didn't work as expected +- **eval_feedback**: Improvement suggestions for the evals (only when warranted) + - **suggestions**: List of concrete suggestions, each with a `reason` and optionally an `assertion` it relates to + - **overall**: Brief assessment — can be "No suggestions, evals look solid" if nothing to flag + +## Guidelines + +- **Be objective**: Base verdicts on evidence, not assumptions +- **Be specific**: Quote the exact text that supports your verdict +- **Be thorough**: Check both transcript and output files +- **Be consistent**: Apply the same standard to each expectation +- **Explain failures**: Make it clear why evidence was insufficient +- **No partial credit**: Each expectation is pass or fail, not partial diff --git a/.agents/skills/skill-creator/assets/eval_review.html b/.agents/skills/skill-creator/assets/eval_review.html new file mode 100644 index 00000000..938ff32a --- /dev/null +++ b/.agents/skills/skill-creator/assets/eval_review.html @@ -0,0 +1,146 @@ + + + + + + Eval Set Review - __SKILL_NAME_PLACEHOLDER__ + + + + + + +

Eval Set Review: __SKILL_NAME_PLACEHOLDER__

+

Current description: __SKILL_DESCRIPTION_PLACEHOLDER__

+ +
+ + +
+ + + + + + + + + + +
QueryShould TriggerActions
+ +

+ + + + diff --git a/.agents/skills/skill-creator/eval-viewer/generate_review.py b/.agents/skills/skill-creator/eval-viewer/generate_review.py new file mode 100644 index 00000000..7fa59786 --- /dev/null +++ b/.agents/skills/skill-creator/eval-viewer/generate_review.py @@ -0,0 +1,471 @@ +#!/usr/bin/env python3 +"""Generate and serve a review page for eval results. + +Reads the workspace directory, discovers runs (directories with outputs/), +embeds all output data into a self-contained HTML page, and serves it via +a tiny HTTP server. Feedback auto-saves to feedback.json in the workspace. + +Usage: + python generate_review.py [--port PORT] [--skill-name NAME] + python generate_review.py --previous-feedback /path/to/old/feedback.json + +No dependencies beyond the Python stdlib are required. +""" + +import argparse +import base64 +import json +import mimetypes +import os +import re +import signal +import subprocess +import sys +import time +import webbrowser +from functools import partial +from http.server import HTTPServer, BaseHTTPRequestHandler +from pathlib import Path + +# Files to exclude from output listings +METADATA_FILES = {"transcript.md", "user_notes.md", "metrics.json"} + +# Extensions we render as inline text +TEXT_EXTENSIONS = { + ".txt", ".md", ".json", ".csv", ".py", ".js", ".ts", ".tsx", ".jsx", + ".yaml", ".yml", ".xml", ".html", ".css", ".sh", ".rb", ".go", ".rs", + ".java", ".c", ".cpp", ".h", ".hpp", ".sql", ".r", ".toml", +} + +# Extensions we render as inline images +IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp"} + +# MIME type overrides for common types +MIME_OVERRIDES = { + ".svg": "image/svg+xml", + ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation", +} + + +def get_mime_type(path: Path) -> str: + ext = path.suffix.lower() + if ext in MIME_OVERRIDES: + return MIME_OVERRIDES[ext] + mime, _ = mimetypes.guess_type(str(path)) + return mime or "application/octet-stream" + + +def find_runs(workspace: Path) -> list[dict]: + """Recursively find directories that contain an outputs/ subdirectory.""" + runs: list[dict] = [] + _find_runs_recursive(workspace, workspace, runs) + runs.sort(key=lambda r: (r.get("eval_id", float("inf")), r["id"])) + return runs + + +def _find_runs_recursive(root: Path, current: Path, runs: list[dict]) -> None: + if not current.is_dir(): + return + + outputs_dir = current / "outputs" + if outputs_dir.is_dir(): + run = build_run(root, current) + if run: + runs.append(run) + return + + skip = {"node_modules", ".git", "__pycache__", "skill", "inputs"} + for child in sorted(current.iterdir()): + if child.is_dir() and child.name not in skip: + _find_runs_recursive(root, child, runs) + + +def build_run(root: Path, run_dir: Path) -> dict | None: + """Build a run dict with prompt, outputs, and grading data.""" + prompt = "" + eval_id = None + + # Try eval_metadata.json + for candidate in [run_dir / "eval_metadata.json", run_dir.parent / "eval_metadata.json"]: + if candidate.exists(): + try: + metadata = json.loads(candidate.read_text()) + prompt = metadata.get("prompt", "") + eval_id = metadata.get("eval_id") + except (json.JSONDecodeError, OSError): + pass + if prompt: + break + + # Fall back to transcript.md + if not prompt: + for candidate in [run_dir / "transcript.md", run_dir / "outputs" / "transcript.md"]: + if candidate.exists(): + try: + text = candidate.read_text() + match = re.search(r"## Eval Prompt\n\n([\s\S]*?)(?=\n##|$)", text) + if match: + prompt = match.group(1).strip() + except OSError: + pass + if prompt: + break + + if not prompt: + prompt = "(No prompt found)" + + run_id = str(run_dir.relative_to(root)).replace("/", "-").replace("\\", "-") + + # Collect output files + outputs_dir = run_dir / "outputs" + output_files: list[dict] = [] + if outputs_dir.is_dir(): + for f in sorted(outputs_dir.iterdir()): + if f.is_file() and f.name not in METADATA_FILES: + output_files.append(embed_file(f)) + + # Load grading if present + grading = None + for candidate in [run_dir / "grading.json", run_dir.parent / "grading.json"]: + if candidate.exists(): + try: + grading = json.loads(candidate.read_text()) + except (json.JSONDecodeError, OSError): + pass + if grading: + break + + return { + "id": run_id, + "prompt": prompt, + "eval_id": eval_id, + "outputs": output_files, + "grading": grading, + } + + +def embed_file(path: Path) -> dict: + """Read a file and return an embedded representation.""" + ext = path.suffix.lower() + mime = get_mime_type(path) + + if ext in TEXT_EXTENSIONS: + try: + content = path.read_text(errors="replace") + except OSError: + content = "(Error reading file)" + return { + "name": path.name, + "type": "text", + "content": content, + } + elif ext in IMAGE_EXTENSIONS: + try: + raw = path.read_bytes() + b64 = base64.b64encode(raw).decode("ascii") + except OSError: + return {"name": path.name, "type": "error", "content": "(Error reading file)"} + return { + "name": path.name, + "type": "image", + "mime": mime, + "data_uri": f"data:{mime};base64,{b64}", + } + elif ext == ".pdf": + try: + raw = path.read_bytes() + b64 = base64.b64encode(raw).decode("ascii") + except OSError: + return {"name": path.name, "type": "error", "content": "(Error reading file)"} + return { + "name": path.name, + "type": "pdf", + "data_uri": f"data:{mime};base64,{b64}", + } + elif ext == ".xlsx": + try: + raw = path.read_bytes() + b64 = base64.b64encode(raw).decode("ascii") + except OSError: + return {"name": path.name, "type": "error", "content": "(Error reading file)"} + return { + "name": path.name, + "type": "xlsx", + "data_b64": b64, + } + else: + # Binary / unknown — base64 download link + try: + raw = path.read_bytes() + b64 = base64.b64encode(raw).decode("ascii") + except OSError: + return {"name": path.name, "type": "error", "content": "(Error reading file)"} + return { + "name": path.name, + "type": "binary", + "mime": mime, + "data_uri": f"data:{mime};base64,{b64}", + } + + +def load_previous_iteration(workspace: Path) -> dict[str, dict]: + """Load previous iteration's feedback and outputs. + + Returns a map of run_id -> {"feedback": str, "outputs": list[dict]}. + """ + result: dict[str, dict] = {} + + # Load feedback + feedback_map: dict[str, str] = {} + feedback_path = workspace / "feedback.json" + if feedback_path.exists(): + try: + data = json.loads(feedback_path.read_text()) + feedback_map = { + r["run_id"]: r["feedback"] + for r in data.get("reviews", []) + if r.get("feedback", "").strip() + } + except (json.JSONDecodeError, OSError, KeyError): + pass + + # Load runs (to get outputs) + prev_runs = find_runs(workspace) + for run in prev_runs: + result[run["id"]] = { + "feedback": feedback_map.get(run["id"], ""), + "outputs": run.get("outputs", []), + } + + # Also add feedback for run_ids that had feedback but no matching run + for run_id, fb in feedback_map.items(): + if run_id not in result: + result[run_id] = {"feedback": fb, "outputs": []} + + return result + + +def generate_html( + runs: list[dict], + skill_name: str, + previous: dict[str, dict] | None = None, + benchmark: dict | None = None, +) -> str: + """Generate the complete standalone HTML page with embedded data.""" + template_path = Path(__file__).parent / "viewer.html" + template = template_path.read_text() + + # Build previous_feedback and previous_outputs maps for the template + previous_feedback: dict[str, str] = {} + previous_outputs: dict[str, list[dict]] = {} + if previous: + for run_id, data in previous.items(): + if data.get("feedback"): + previous_feedback[run_id] = data["feedback"] + if data.get("outputs"): + previous_outputs[run_id] = data["outputs"] + + embedded = { + "skill_name": skill_name, + "runs": runs, + "previous_feedback": previous_feedback, + "previous_outputs": previous_outputs, + } + if benchmark: + embedded["benchmark"] = benchmark + + data_json = json.dumps(embedded) + + return template.replace("/*__EMBEDDED_DATA__*/", f"const EMBEDDED_DATA = {data_json};") + + +# --------------------------------------------------------------------------- +# HTTP server (stdlib only, zero dependencies) +# --------------------------------------------------------------------------- + +def _kill_port(port: int) -> None: + """Kill any process listening on the given port.""" + try: + result = subprocess.run( + ["lsof", "-ti", f":{port}"], + capture_output=True, text=True, timeout=5, + ) + for pid_str in result.stdout.strip().split("\n"): + if pid_str.strip(): + try: + os.kill(int(pid_str.strip()), signal.SIGTERM) + except (ProcessLookupError, ValueError): + pass + if result.stdout.strip(): + time.sleep(0.5) + except subprocess.TimeoutExpired: + pass + except FileNotFoundError: + print("Note: lsof not found, cannot check if port is in use", file=sys.stderr) + +class ReviewHandler(BaseHTTPRequestHandler): + """Serves the review HTML and handles feedback saves. + + Regenerates the HTML on each page load so that refreshing the browser + picks up new eval outputs without restarting the server. + """ + + def __init__( + self, + workspace: Path, + skill_name: str, + feedback_path: Path, + previous: dict[str, dict], + benchmark_path: Path | None, + *args, + **kwargs, + ): + self.workspace = workspace + self.skill_name = skill_name + self.feedback_path = feedback_path + self.previous = previous + self.benchmark_path = benchmark_path + super().__init__(*args, **kwargs) + + def do_GET(self) -> None: + if self.path == "/" or self.path == "/index.html": + # Regenerate HTML on each request (re-scans workspace for new outputs) + runs = find_runs(self.workspace) + benchmark = None + if self.benchmark_path and self.benchmark_path.exists(): + try: + benchmark = json.loads(self.benchmark_path.read_text()) + except (json.JSONDecodeError, OSError): + pass + html = generate_html(runs, self.skill_name, self.previous, benchmark) + content = html.encode("utf-8") + self.send_response(200) + self.send_header("Content-Type", "text/html; charset=utf-8") + self.send_header("Content-Length", str(len(content))) + self.end_headers() + self.wfile.write(content) + elif self.path == "/api/feedback": + data = b"{}" + if self.feedback_path.exists(): + data = self.feedback_path.read_bytes() + self.send_response(200) + self.send_header("Content-Type", "application/json") + self.send_header("Content-Length", str(len(data))) + self.end_headers() + self.wfile.write(data) + else: + self.send_error(404) + + def do_POST(self) -> None: + if self.path == "/api/feedback": + length = int(self.headers.get("Content-Length", 0)) + body = self.rfile.read(length) + try: + data = json.loads(body) + if not isinstance(data, dict) or "reviews" not in data: + raise ValueError("Expected JSON object with 'reviews' key") + self.feedback_path.write_text(json.dumps(data, indent=2) + "\n") + resp = b'{"ok":true}' + self.send_response(200) + except (json.JSONDecodeError, OSError, ValueError) as e: + resp = json.dumps({"error": str(e)}).encode() + self.send_response(500) + self.send_header("Content-Type", "application/json") + self.send_header("Content-Length", str(len(resp))) + self.end_headers() + self.wfile.write(resp) + else: + self.send_error(404) + + def log_message(self, format: str, *args: object) -> None: + # Suppress request logging to keep terminal clean + pass + + +def main() -> None: + parser = argparse.ArgumentParser(description="Generate and serve eval review") + parser.add_argument("workspace", type=Path, help="Path to workspace directory") + parser.add_argument("--port", "-p", type=int, default=3117, help="Server port (default: 3117)") + parser.add_argument("--skill-name", "-n", type=str, default=None, help="Skill name for header") + parser.add_argument( + "--previous-workspace", type=Path, default=None, + help="Path to previous iteration's workspace (shows old outputs and feedback as context)", + ) + parser.add_argument( + "--benchmark", type=Path, default=None, + help="Path to benchmark.json to show in the Benchmark tab", + ) + parser.add_argument( + "--static", "-s", type=Path, default=None, + help="Write standalone HTML to this path instead of starting a server", + ) + args = parser.parse_args() + + workspace = args.workspace.resolve() + if not workspace.is_dir(): + print(f"Error: {workspace} is not a directory", file=sys.stderr) + sys.exit(1) + + runs = find_runs(workspace) + if not runs: + print(f"No runs found in {workspace}", file=sys.stderr) + sys.exit(1) + + skill_name = args.skill_name or workspace.name.replace("-workspace", "") + feedback_path = workspace / "feedback.json" + + previous: dict[str, dict] = {} + if args.previous_workspace: + previous = load_previous_iteration(args.previous_workspace.resolve()) + + benchmark_path = args.benchmark.resolve() if args.benchmark else None + benchmark = None + if benchmark_path and benchmark_path.exists(): + try: + benchmark = json.loads(benchmark_path.read_text()) + except (json.JSONDecodeError, OSError): + pass + + if args.static: + html = generate_html(runs, skill_name, previous, benchmark) + args.static.parent.mkdir(parents=True, exist_ok=True) + args.static.write_text(html) + print(f"\n Static viewer written to: {args.static}\n") + sys.exit(0) + + # Kill any existing process on the target port + port = args.port + _kill_port(port) + handler = partial(ReviewHandler, workspace, skill_name, feedback_path, previous, benchmark_path) + try: + server = HTTPServer(("127.0.0.1", port), handler) + except OSError: + # Port still in use after kill attempt — find a free one + server = HTTPServer(("127.0.0.1", 0), handler) + port = server.server_address[1] + + url = f"http://localhost:{port}" + print(f"\n Eval Viewer") + print(f" ─────────────────────────────────") + print(f" URL: {url}") + print(f" Workspace: {workspace}") + print(f" Feedback: {feedback_path}") + if previous: + print(f" Previous: {args.previous_workspace} ({len(previous)} runs)") + if benchmark_path: + print(f" Benchmark: {benchmark_path}") + print(f"\n Press Ctrl+C to stop.\n") + + webbrowser.open(url) + + try: + server.serve_forever() + except KeyboardInterrupt: + print("\nStopped.") + server.server_close() + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/eval-viewer/viewer.html b/.agents/skills/skill-creator/eval-viewer/viewer.html new file mode 100644 index 00000000..6d8e9634 --- /dev/null +++ b/.agents/skills/skill-creator/eval-viewer/viewer.html @@ -0,0 +1,1325 @@ + + + + + + Eval Review + + + + + + + +
+
+
+

Eval Review:

+
Review each output and leave feedback below. Navigate with arrow keys or buttons. When done, copy feedback and paste into Claude Code.
+
+
+
+ + + + + +
+
+ +
+
Prompt
+
+
+
+
+ + +
+
Output
+
+
No output files found
+
+
+ + + + + + + + +
+
Your Feedback
+
+ + + +
+
+
+ + +
+ + +
+
+
No benchmark data available. Run a benchmark to see quantitative results here.
+
+
+
+ + +
+
+

Review Complete

+

Your feedback has been saved. Go back to your Claude Code session and tell Claude you're done reviewing.

+
+ +
+
+
+ + +
+ + + + diff --git a/.agents/skills/skill-creator/references/schemas.md b/.agents/skills/skill-creator/references/schemas.md new file mode 100644 index 00000000..b6eeaa2d --- /dev/null +++ b/.agents/skills/skill-creator/references/schemas.md @@ -0,0 +1,430 @@ +# JSON Schemas + +This document defines the JSON schemas used by skill-creator. + +--- + +## evals.json + +Defines the evals for a skill. Located at `evals/evals.json` within the skill directory. + +```json +{ + "skill_name": "example-skill", + "evals": [ + { + "id": 1, + "prompt": "User's example prompt", + "expected_output": "Description of expected result", + "files": ["evals/files/sample1.pdf"], + "expectations": [ + "The output includes X", + "The skill used script Y" + ] + } + ] +} +``` + +**Fields:** +- `skill_name`: Name matching the skill's frontmatter +- `evals[].id`: Unique integer identifier +- `evals[].prompt`: The task to execute +- `evals[].expected_output`: Human-readable description of success +- `evals[].files`: Optional list of input file paths (relative to skill root) +- `evals[].expectations`: List of verifiable statements + +--- + +## history.json + +Tracks version progression in Improve mode. Located at workspace root. + +```json +{ + "started_at": "2026-01-15T10:30:00Z", + "skill_name": "pdf", + "current_best": "v2", + "iterations": [ + { + "version": "v0", + "parent": null, + "expectation_pass_rate": 0.65, + "grading_result": "baseline", + "is_current_best": false + }, + { + "version": "v1", + "parent": "v0", + "expectation_pass_rate": 0.75, + "grading_result": "won", + "is_current_best": false + }, + { + "version": "v2", + "parent": "v1", + "expectation_pass_rate": 0.85, + "grading_result": "won", + "is_current_best": true + } + ] +} +``` + +**Fields:** +- `started_at`: ISO timestamp of when improvement started +- `skill_name`: Name of the skill being improved +- `current_best`: Version identifier of the best performer +- `iterations[].version`: Version identifier (v0, v1, ...) +- `iterations[].parent`: Parent version this was derived from +- `iterations[].expectation_pass_rate`: Pass rate from grading +- `iterations[].grading_result`: "baseline", "won", "lost", or "tie" +- `iterations[].is_current_best`: Whether this is the current best version + +--- + +## grading.json + +Output from the grader agent. Located at `/grading.json`. + +```json +{ + "expectations": [ + { + "text": "The output includes the name 'John Smith'", + "passed": true, + "evidence": "Found in transcript Step 3: 'Extracted names: John Smith, Sarah Johnson'" + }, + { + "text": "The spreadsheet has a SUM formula in cell B10", + "passed": false, + "evidence": "No spreadsheet was created. The output was a text file." + } + ], + "summary": { + "passed": 2, + "failed": 1, + "total": 3, + "pass_rate": 0.67 + }, + "execution_metrics": { + "tool_calls": { + "Read": 5, + "Write": 2, + "Bash": 8 + }, + "total_tool_calls": 15, + "total_steps": 6, + "errors_encountered": 0, + "output_chars": 12450, + "transcript_chars": 3200 + }, + "timing": { + "executor_duration_seconds": 165.0, + "grader_duration_seconds": 26.0, + "total_duration_seconds": 191.0 + }, + "claims": [ + { + "claim": "The form has 12 fillable fields", + "type": "factual", + "verified": true, + "evidence": "Counted 12 fields in field_info.json" + } + ], + "user_notes_summary": { + "uncertainties": ["Used 2023 data, may be stale"], + "needs_review": [], + "workarounds": ["Fell back to text overlay for non-fillable fields"] + }, + "eval_feedback": { + "suggestions": [ + { + "assertion": "The output includes the name 'John Smith'", + "reason": "A hallucinated document that mentions the name would also pass" + } + ], + "overall": "Assertions check presence but not correctness." + } +} +``` + +**Fields:** +- `expectations[]`: Graded expectations with evidence +- `summary`: Aggregate pass/fail counts +- `execution_metrics`: Tool usage and output size (from executor's metrics.json) +- `timing`: Wall clock timing (from timing.json) +- `claims`: Extracted and verified claims from the output +- `user_notes_summary`: Issues flagged by the executor +- `eval_feedback`: (optional) Improvement suggestions for the evals, only present when the grader identifies issues worth raising + +--- + +## metrics.json + +Output from the executor agent. Located at `/outputs/metrics.json`. + +```json +{ + "tool_calls": { + "Read": 5, + "Write": 2, + "Bash": 8, + "Edit": 1, + "Glob": 2, + "Grep": 0 + }, + "total_tool_calls": 18, + "total_steps": 6, + "files_created": ["filled_form.pdf", "field_values.json"], + "errors_encountered": 0, + "output_chars": 12450, + "transcript_chars": 3200 +} +``` + +**Fields:** +- `tool_calls`: Count per tool type +- `total_tool_calls`: Sum of all tool calls +- `total_steps`: Number of major execution steps +- `files_created`: List of output files created +- `errors_encountered`: Number of errors during execution +- `output_chars`: Total character count of output files +- `transcript_chars`: Character count of transcript + +--- + +## timing.json + +Wall clock timing for a run. Located at `/timing.json`. + +**How to capture:** When a subagent task completes, the task notification includes `total_tokens` and `duration_ms`. Save these immediately — they are not persisted anywhere else and cannot be recovered after the fact. + +```json +{ + "total_tokens": 84852, + "duration_ms": 23332, + "total_duration_seconds": 23.3, + "executor_start": "2026-01-15T10:30:00Z", + "executor_end": "2026-01-15T10:32:45Z", + "executor_duration_seconds": 165.0, + "grader_start": "2026-01-15T10:32:46Z", + "grader_end": "2026-01-15T10:33:12Z", + "grader_duration_seconds": 26.0 +} +``` + +--- + +## benchmark.json + +Output from Benchmark mode. Located at `benchmarks//benchmark.json`. + +```json +{ + "metadata": { + "skill_name": "pdf", + "skill_path": "/path/to/pdf", + "executor_model": "claude-sonnet-4-20250514", + "analyzer_model": "most-capable-model", + "timestamp": "2026-01-15T10:30:00Z", + "evals_run": [1, 2, 3], + "runs_per_configuration": 3 + }, + + "runs": [ + { + "eval_id": 1, + "eval_name": "Ocean", + "configuration": "with_skill", + "run_number": 1, + "result": { + "pass_rate": 0.85, + "passed": 6, + "failed": 1, + "total": 7, + "time_seconds": 42.5, + "tokens": 3800, + "tool_calls": 18, + "errors": 0 + }, + "expectations": [ + {"text": "...", "passed": true, "evidence": "..."} + ], + "notes": [ + "Used 2023 data, may be stale", + "Fell back to text overlay for non-fillable fields" + ] + } + ], + + "run_summary": { + "with_skill": { + "pass_rate": {"mean": 0.85, "stddev": 0.05, "min": 0.80, "max": 0.90}, + "time_seconds": {"mean": 45.0, "stddev": 12.0, "min": 32.0, "max": 58.0}, + "tokens": {"mean": 3800, "stddev": 400, "min": 3200, "max": 4100} + }, + "without_skill": { + "pass_rate": {"mean": 0.35, "stddev": 0.08, "min": 0.28, "max": 0.45}, + "time_seconds": {"mean": 32.0, "stddev": 8.0, "min": 24.0, "max": 42.0}, + "tokens": {"mean": 2100, "stddev": 300, "min": 1800, "max": 2500} + }, + "delta": { + "pass_rate": "+0.50", + "time_seconds": "+13.0", + "tokens": "+1700" + } + }, + + "notes": [ + "Assertion 'Output is a PDF file' passes 100% in both configurations - may not differentiate skill value", + "Eval 3 shows high variance (50% ± 40%) - may be flaky or model-dependent", + "Without-skill runs consistently fail on table extraction expectations", + "Skill adds 13s average execution time but improves pass rate by 50%" + ] +} +``` + +**Fields:** +- `metadata`: Information about the benchmark run + - `skill_name`: Name of the skill + - `timestamp`: When the benchmark was run + - `evals_run`: List of eval names or IDs + - `runs_per_configuration`: Number of runs per config (e.g. 3) +- `runs[]`: Individual run results + - `eval_id`: Numeric eval identifier + - `eval_name`: Human-readable eval name (used as section header in the viewer) + - `configuration`: Must be `"with_skill"` or `"without_skill"` (the viewer uses this exact string for grouping and color coding) + - `run_number`: Integer run number (1, 2, 3...) + - `result`: Nested object with `pass_rate`, `passed`, `total`, `time_seconds`, `tokens`, `errors` +- `run_summary`: Statistical aggregates per configuration + - `with_skill` / `without_skill`: Each contains `pass_rate`, `time_seconds`, `tokens` objects with `mean` and `stddev` fields + - `delta`: Difference strings like `"+0.50"`, `"+13.0"`, `"+1700"` +- `notes`: Freeform observations from the analyzer + +**Important:** The viewer reads these field names exactly. Using `config` instead of `configuration`, or putting `pass_rate` at the top level of a run instead of nested under `result`, will cause the viewer to show empty/zero values. Always reference this schema when generating benchmark.json manually. + +--- + +## comparison.json + +Output from blind comparator. Located at `/comparison-N.json`. + +```json +{ + "winner": "A", + "reasoning": "Output A provides a complete solution with proper formatting and all required fields. Output B is missing the date field and has formatting inconsistencies.", + "rubric": { + "A": { + "content": { + "correctness": 5, + "completeness": 5, + "accuracy": 4 + }, + "structure": { + "organization": 4, + "formatting": 5, + "usability": 4 + }, + "content_score": 4.7, + "structure_score": 4.3, + "overall_score": 9.0 + }, + "B": { + "content": { + "correctness": 3, + "completeness": 2, + "accuracy": 3 + }, + "structure": { + "organization": 3, + "formatting": 2, + "usability": 3 + }, + "content_score": 2.7, + "structure_score": 2.7, + "overall_score": 5.4 + } + }, + "output_quality": { + "A": { + "score": 9, + "strengths": ["Complete solution", "Well-formatted", "All fields present"], + "weaknesses": ["Minor style inconsistency in header"] + }, + "B": { + "score": 5, + "strengths": ["Readable output", "Correct basic structure"], + "weaknesses": ["Missing date field", "Formatting inconsistencies", "Partial data extraction"] + } + }, + "expectation_results": { + "A": { + "passed": 4, + "total": 5, + "pass_rate": 0.80, + "details": [ + {"text": "Output includes name", "passed": true} + ] + }, + "B": { + "passed": 3, + "total": 5, + "pass_rate": 0.60, + "details": [ + {"text": "Output includes name", "passed": true} + ] + } + } +} +``` + +--- + +## analysis.json + +Output from post-hoc analyzer. Located at `/analysis.json`. + +```json +{ + "comparison_summary": { + "winner": "A", + "winner_skill": "path/to/winner/skill", + "loser_skill": "path/to/loser/skill", + "comparator_reasoning": "Brief summary of why comparator chose winner" + }, + "winner_strengths": [ + "Clear step-by-step instructions for handling multi-page documents", + "Included validation script that caught formatting errors" + ], + "loser_weaknesses": [ + "Vague instruction 'process the document appropriately' led to inconsistent behavior", + "No script for validation, agent had to improvise" + ], + "instruction_following": { + "winner": { + "score": 9, + "issues": ["Minor: skipped optional logging step"] + }, + "loser": { + "score": 6, + "issues": [ + "Did not use the skill's formatting template", + "Invented own approach instead of following step 3" + ] + } + }, + "improvement_suggestions": [ + { + "priority": "high", + "category": "instructions", + "suggestion": "Replace 'process the document appropriately' with explicit steps", + "expected_impact": "Would eliminate ambiguity that caused inconsistent behavior" + } + ], + "transcript_insights": { + "winner_execution_pattern": "Read skill -> Followed 5-step process -> Used validation script", + "loser_execution_pattern": "Read skill -> Unclear on approach -> Tried 3 different methods" + } +} +``` diff --git a/.agents/skills/skill-creator/scripts/aggregate_benchmark.py b/.agents/skills/skill-creator/scripts/aggregate_benchmark.py new file mode 100755 index 00000000..3e66e8c1 --- /dev/null +++ b/.agents/skills/skill-creator/scripts/aggregate_benchmark.py @@ -0,0 +1,401 @@ +#!/usr/bin/env python3 +""" +Aggregate individual run results into benchmark summary statistics. + +Reads grading.json files from run directories and produces: +- run_summary with mean, stddev, min, max for each metric +- delta between with_skill and without_skill configurations + +Usage: + python aggregate_benchmark.py + +Example: + python aggregate_benchmark.py benchmarks/2026-01-15T10-30-00/ + +The script supports two directory layouts: + + Workspace layout (from skill-creator iterations): + / + └── eval-N/ + ├── with_skill/ + │ ├── run-1/grading.json + │ └── run-2/grading.json + └── without_skill/ + ├── run-1/grading.json + └── run-2/grading.json + + Legacy layout (with runs/ subdirectory): + / + └── runs/ + └── eval-N/ + ├── with_skill/ + │ └── run-1/grading.json + └── without_skill/ + └── run-1/grading.json +""" + +import argparse +import json +import math +import sys +from datetime import datetime, timezone +from pathlib import Path + + +def calculate_stats(values: list[float]) -> dict: + """Calculate mean, stddev, min, max for a list of values.""" + if not values: + return {"mean": 0.0, "stddev": 0.0, "min": 0.0, "max": 0.0} + + n = len(values) + mean = sum(values) / n + + if n > 1: + variance = sum((x - mean) ** 2 for x in values) / (n - 1) + stddev = math.sqrt(variance) + else: + stddev = 0.0 + + return { + "mean": round(mean, 4), + "stddev": round(stddev, 4), + "min": round(min(values), 4), + "max": round(max(values), 4) + } + + +def load_run_results(benchmark_dir: Path) -> dict: + """ + Load all run results from a benchmark directory. + + Returns dict keyed by config name (e.g. "with_skill"/"without_skill", + or "new_skill"/"old_skill"), each containing a list of run results. + """ + # Support both layouts: eval dirs directly under benchmark_dir, or under runs/ + runs_dir = benchmark_dir / "runs" + if runs_dir.exists(): + search_dir = runs_dir + elif list(benchmark_dir.glob("eval-*")): + search_dir = benchmark_dir + else: + print(f"No eval directories found in {benchmark_dir} or {benchmark_dir / 'runs'}") + return {} + + results: dict[str, list] = {} + + for eval_idx, eval_dir in enumerate(sorted(search_dir.glob("eval-*"))): + metadata_path = eval_dir / "eval_metadata.json" + if metadata_path.exists(): + try: + with open(metadata_path) as mf: + eval_id = json.load(mf).get("eval_id", eval_idx) + except (json.JSONDecodeError, OSError): + eval_id = eval_idx + else: + try: + eval_id = int(eval_dir.name.split("-")[1]) + except ValueError: + eval_id = eval_idx + + # Discover config directories dynamically rather than hardcoding names + for config_dir in sorted(eval_dir.iterdir()): + if not config_dir.is_dir(): + continue + # Skip non-config directories (inputs, outputs, etc.) + if not list(config_dir.glob("run-*")): + continue + config = config_dir.name + if config not in results: + results[config] = [] + + for run_dir in sorted(config_dir.glob("run-*")): + run_number = int(run_dir.name.split("-")[1]) + grading_file = run_dir / "grading.json" + + if not grading_file.exists(): + print(f"Warning: grading.json not found in {run_dir}") + continue + + try: + with open(grading_file) as f: + grading = json.load(f) + except json.JSONDecodeError as e: + print(f"Warning: Invalid JSON in {grading_file}: {e}") + continue + + # Extract metrics + result = { + "eval_id": eval_id, + "run_number": run_number, + "pass_rate": grading.get("summary", {}).get("pass_rate", 0.0), + "passed": grading.get("summary", {}).get("passed", 0), + "failed": grading.get("summary", {}).get("failed", 0), + "total": grading.get("summary", {}).get("total", 0), + } + + # Extract timing — check grading.json first, then sibling timing.json + timing = grading.get("timing", {}) + result["time_seconds"] = timing.get("total_duration_seconds", 0.0) + timing_file = run_dir / "timing.json" + if result["time_seconds"] == 0.0 and timing_file.exists(): + try: + with open(timing_file) as tf: + timing_data = json.load(tf) + result["time_seconds"] = timing_data.get("total_duration_seconds", 0.0) + result["tokens"] = timing_data.get("total_tokens", 0) + except json.JSONDecodeError: + pass + + # Extract metrics if available + metrics = grading.get("execution_metrics", {}) + result["tool_calls"] = metrics.get("total_tool_calls", 0) + if not result.get("tokens"): + result["tokens"] = metrics.get("output_chars", 0) + result["errors"] = metrics.get("errors_encountered", 0) + + # Extract expectations — viewer requires fields: text, passed, evidence + raw_expectations = grading.get("expectations", []) + for exp in raw_expectations: + if "text" not in exp or "passed" not in exp: + print(f"Warning: expectation in {grading_file} missing required fields (text, passed, evidence): {exp}") + result["expectations"] = raw_expectations + + # Extract notes from user_notes_summary + notes_summary = grading.get("user_notes_summary", {}) + notes = [] + notes.extend(notes_summary.get("uncertainties", [])) + notes.extend(notes_summary.get("needs_review", [])) + notes.extend(notes_summary.get("workarounds", [])) + result["notes"] = notes + + results[config].append(result) + + return results + + +def aggregate_results(results: dict) -> dict: + """ + Aggregate run results into summary statistics. + + Returns run_summary with stats for each configuration and delta. + """ + run_summary = {} + configs = list(results.keys()) + + for config in configs: + runs = results.get(config, []) + + if not runs: + run_summary[config] = { + "pass_rate": {"mean": 0.0, "stddev": 0.0, "min": 0.0, "max": 0.0}, + "time_seconds": {"mean": 0.0, "stddev": 0.0, "min": 0.0, "max": 0.0}, + "tokens": {"mean": 0, "stddev": 0, "min": 0, "max": 0} + } + continue + + pass_rates = [r["pass_rate"] for r in runs] + times = [r["time_seconds"] for r in runs] + tokens = [r.get("tokens", 0) for r in runs] + + run_summary[config] = { + "pass_rate": calculate_stats(pass_rates), + "time_seconds": calculate_stats(times), + "tokens": calculate_stats(tokens) + } + + # Calculate delta between the first two configs (if two exist) + if len(configs) >= 2: + primary = run_summary.get(configs[0], {}) + baseline = run_summary.get(configs[1], {}) + else: + primary = run_summary.get(configs[0], {}) if configs else {} + baseline = {} + + delta_pass_rate = primary.get("pass_rate", {}).get("mean", 0) - baseline.get("pass_rate", {}).get("mean", 0) + delta_time = primary.get("time_seconds", {}).get("mean", 0) - baseline.get("time_seconds", {}).get("mean", 0) + delta_tokens = primary.get("tokens", {}).get("mean", 0) - baseline.get("tokens", {}).get("mean", 0) + + run_summary["delta"] = { + "pass_rate": f"{delta_pass_rate:+.2f}", + "time_seconds": f"{delta_time:+.1f}", + "tokens": f"{delta_tokens:+.0f}" + } + + return run_summary + + +def generate_benchmark(benchmark_dir: Path, skill_name: str = "", skill_path: str = "") -> dict: + """ + Generate complete benchmark.json from run results. + """ + results = load_run_results(benchmark_dir) + run_summary = aggregate_results(results) + + # Build runs array for benchmark.json + runs = [] + for config in results: + for result in results[config]: + runs.append({ + "eval_id": result["eval_id"], + "configuration": config, + "run_number": result["run_number"], + "result": { + "pass_rate": result["pass_rate"], + "passed": result["passed"], + "failed": result["failed"], + "total": result["total"], + "time_seconds": result["time_seconds"], + "tokens": result.get("tokens", 0), + "tool_calls": result.get("tool_calls", 0), + "errors": result.get("errors", 0) + }, + "expectations": result["expectations"], + "notes": result["notes"] + }) + + # Determine eval IDs from results + eval_ids = sorted(set( + r["eval_id"] + for config in results.values() + for r in config + )) + + benchmark = { + "metadata": { + "skill_name": skill_name or "", + "skill_path": skill_path or "", + "executor_model": "", + "analyzer_model": "", + "timestamp": datetime.now(timezone.utc).strftime("%Y-%m-%dT%H:%M:%SZ"), + "evals_run": eval_ids, + "runs_per_configuration": 3 + }, + "runs": runs, + "run_summary": run_summary, + "notes": [] # To be filled by analyzer + } + + return benchmark + + +def generate_markdown(benchmark: dict) -> str: + """Generate human-readable benchmark.md from benchmark data.""" + metadata = benchmark["metadata"] + run_summary = benchmark["run_summary"] + + # Determine config names (excluding "delta") + configs = [k for k in run_summary if k != "delta"] + config_a = configs[0] if len(configs) >= 1 else "config_a" + config_b = configs[1] if len(configs) >= 2 else "config_b" + label_a = config_a.replace("_", " ").title() + label_b = config_b.replace("_", " ").title() + + lines = [ + f"# Skill Benchmark: {metadata['skill_name']}", + "", + f"**Model**: {metadata['executor_model']}", + f"**Date**: {metadata['timestamp']}", + f"**Evals**: {', '.join(map(str, metadata['evals_run']))} ({metadata['runs_per_configuration']} runs each per configuration)", + "", + "## Summary", + "", + f"| Metric | {label_a} | {label_b} | Delta |", + "|--------|------------|---------------|-------|", + ] + + a_summary = run_summary.get(config_a, {}) + b_summary = run_summary.get(config_b, {}) + delta = run_summary.get("delta", {}) + + # Format pass rate + a_pr = a_summary.get("pass_rate", {}) + b_pr = b_summary.get("pass_rate", {}) + lines.append(f"| Pass Rate | {a_pr.get('mean', 0)*100:.0f}% ± {a_pr.get('stddev', 0)*100:.0f}% | {b_pr.get('mean', 0)*100:.0f}% ± {b_pr.get('stddev', 0)*100:.0f}% | {delta.get('pass_rate', '—')} |") + + # Format time + a_time = a_summary.get("time_seconds", {}) + b_time = b_summary.get("time_seconds", {}) + lines.append(f"| Time | {a_time.get('mean', 0):.1f}s ± {a_time.get('stddev', 0):.1f}s | {b_time.get('mean', 0):.1f}s ± {b_time.get('stddev', 0):.1f}s | {delta.get('time_seconds', '—')}s |") + + # Format tokens + a_tokens = a_summary.get("tokens", {}) + b_tokens = b_summary.get("tokens", {}) + lines.append(f"| Tokens | {a_tokens.get('mean', 0):.0f} ± {a_tokens.get('stddev', 0):.0f} | {b_tokens.get('mean', 0):.0f} ± {b_tokens.get('stddev', 0):.0f} | {delta.get('tokens', '—')} |") + + # Notes section + if benchmark.get("notes"): + lines.extend([ + "", + "## Notes", + "" + ]) + for note in benchmark["notes"]: + lines.append(f"- {note}") + + return "\n".join(lines) + + +def main(): + parser = argparse.ArgumentParser( + description="Aggregate benchmark run results into summary statistics" + ) + parser.add_argument( + "benchmark_dir", + type=Path, + help="Path to the benchmark directory" + ) + parser.add_argument( + "--skill-name", + default="", + help="Name of the skill being benchmarked" + ) + parser.add_argument( + "--skill-path", + default="", + help="Path to the skill being benchmarked" + ) + parser.add_argument( + "--output", "-o", + type=Path, + help="Output path for benchmark.json (default: /benchmark.json)" + ) + + args = parser.parse_args() + + if not args.benchmark_dir.exists(): + print(f"Directory not found: {args.benchmark_dir}") + sys.exit(1) + + # Generate benchmark + benchmark = generate_benchmark(args.benchmark_dir, args.skill_name, args.skill_path) + + # Determine output paths + output_json = args.output or (args.benchmark_dir / "benchmark.json") + output_md = output_json.with_suffix(".md") + + # Write benchmark.json + with open(output_json, "w") as f: + json.dump(benchmark, f, indent=2) + print(f"Generated: {output_json}") + + # Write benchmark.md + markdown = generate_markdown(benchmark) + with open(output_md, "w") as f: + f.write(markdown) + print(f"Generated: {output_md}") + + # Print summary + run_summary = benchmark["run_summary"] + configs = [k for k in run_summary if k != "delta"] + delta = run_summary.get("delta", {}) + + print(f"\nSummary:") + for config in configs: + pr = run_summary[config]["pass_rate"]["mean"] + label = config.replace("_", " ").title() + print(f" {label}: {pr*100:.1f}% pass rate") + print(f" Delta: {delta.get('pass_rate', '—')}") + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/generate_report.py b/.agents/skills/skill-creator/scripts/generate_report.py new file mode 100755 index 00000000..959e30a0 --- /dev/null +++ b/.agents/skills/skill-creator/scripts/generate_report.py @@ -0,0 +1,326 @@ +#!/usr/bin/env python3 +"""Generate an HTML report from run_loop.py output. + +Takes the JSON output from run_loop.py and generates a visual HTML report +showing each description attempt with check/x for each test case. +Distinguishes between train and test queries. +""" + +import argparse +import html +import json +import sys +from pathlib import Path + + +def generate_html(data: dict, auto_refresh: bool = False, skill_name: str = "") -> str: + """Generate HTML report from loop output data. If auto_refresh is True, adds a meta refresh tag.""" + history = data.get("history", []) + holdout = data.get("holdout", 0) + title_prefix = html.escape(skill_name + " \u2014 ") if skill_name else "" + + # Get all unique queries from train and test sets, with should_trigger info + train_queries: list[dict] = [] + test_queries: list[dict] = [] + if history: + for r in history[0].get("train_results", history[0].get("results", [])): + train_queries.append({"query": r["query"], "should_trigger": r.get("should_trigger", True)}) + if history[0].get("test_results"): + for r in history[0].get("test_results", []): + test_queries.append({"query": r["query"], "should_trigger": r.get("should_trigger", True)}) + + refresh_tag = ' \n' if auto_refresh else "" + + html_parts = [""" + + + +""" + refresh_tag + """ """ + title_prefix + """Skill Description Optimization + + + + + + +

""" + title_prefix + """Skill Description Optimization

+
+ Optimizing your skill's description. This page updates automatically as Claude tests different versions of your skill's description. Each row is an iteration — a new description attempt. The columns show test queries: green checkmarks mean the skill triggered correctly (or correctly didn't trigger), red crosses mean it got it wrong. The "Train" score shows performance on queries used to improve the description; the "Test" score shows performance on held-out queries the optimizer hasn't seen. When it's done, Claude will apply the best-performing description to your skill. +
+"""] + + # Summary section + best_test_score = data.get('best_test_score') + best_train_score = data.get('best_train_score') + html_parts.append(f""" +
+

Original: {html.escape(data.get('original_description', 'N/A'))}

+

Best: {html.escape(data.get('best_description', 'N/A'))}

+

Best Score: {data.get('best_score', 'N/A')} {'(test)' if best_test_score else '(train)'}

+

Iterations: {data.get('iterations_run', 0)} | Train: {data.get('train_size', '?')} | Test: {data.get('test_size', '?')}

+
+""") + + # Legend + html_parts.append(""" +
+ Query columns: + Should trigger + Should NOT trigger + Train + Test +
+""") + + # Table header + html_parts.append(""" +
+ + + + + + + +""") + + # Add column headers for train queries + for qinfo in train_queries: + polarity = "positive-col" if qinfo["should_trigger"] else "negative-col" + html_parts.append(f' \n') + + # Add column headers for test queries (different color) + for qinfo in test_queries: + polarity = "positive-col" if qinfo["should_trigger"] else "negative-col" + html_parts.append(f' \n') + + html_parts.append(""" + + +""") + + # Find best iteration for highlighting + if test_queries: + best_iter = max(history, key=lambda h: h.get("test_passed") or 0).get("iteration") + else: + best_iter = max(history, key=lambda h: h.get("train_passed", h.get("passed", 0))).get("iteration") + + # Add rows for each iteration + for h in history: + iteration = h.get("iteration", "?") + train_passed = h.get("train_passed", h.get("passed", 0)) + train_total = h.get("train_total", h.get("total", 0)) + test_passed = h.get("test_passed") + test_total = h.get("test_total") + description = h.get("description", "") + train_results = h.get("train_results", h.get("results", [])) + test_results = h.get("test_results", []) + + # Create lookups for results by query + train_by_query = {r["query"]: r for r in train_results} + test_by_query = {r["query"]: r for r in test_results} if test_results else {} + + # Compute aggregate correct/total runs across all retries + def aggregate_runs(results: list[dict]) -> tuple[int, int]: + correct = 0 + total = 0 + for r in results: + runs = r.get("runs", 0) + triggers = r.get("triggers", 0) + total += runs + if r.get("should_trigger", True): + correct += triggers + else: + correct += runs - triggers + return correct, total + + train_correct, train_runs = aggregate_runs(train_results) + test_correct, test_runs = aggregate_runs(test_results) + + # Determine score classes + def score_class(correct: int, total: int) -> str: + if total > 0: + ratio = correct / total + if ratio >= 0.8: + return "score-good" + elif ratio >= 0.5: + return "score-ok" + return "score-bad" + + train_class = score_class(train_correct, train_runs) + test_class = score_class(test_correct, test_runs) + + row_class = "best-row" if iteration == best_iter else "" + + html_parts.append(f""" + + + + +""") + + # Add result for each train query + for qinfo in train_queries: + r = train_by_query.get(qinfo["query"], {}) + did_pass = r.get("pass", False) + triggers = r.get("triggers", 0) + runs = r.get("runs", 0) + + icon = "✓" if did_pass else "✗" + css_class = "pass" if did_pass else "fail" + + html_parts.append(f' \n') + + # Add result for each test query (with different background) + for qinfo in test_queries: + r = test_by_query.get(qinfo["query"], {}) + did_pass = r.get("pass", False) + triggers = r.get("triggers", 0) + runs = r.get("runs", 0) + + icon = "✓" if did_pass else "✗" + css_class = "pass" if did_pass else "fail" + + html_parts.append(f' \n') + + html_parts.append(" \n") + + html_parts.append(""" +
IterTrainTestDescription{html.escape(qinfo["query"])}{html.escape(qinfo["query"])}
{iteration}{train_correct}/{train_runs}{test_correct}/{test_runs}{html.escape(description)}{icon}{triggers}/{runs}{icon}{triggers}/{runs}
+
+""") + + html_parts.append(""" + + +""") + + return "".join(html_parts) + + +def main(): + parser = argparse.ArgumentParser(description="Generate HTML report from run_loop output") + parser.add_argument("input", help="Path to JSON output from run_loop.py (or - for stdin)") + parser.add_argument("-o", "--output", default=None, help="Output HTML file (default: stdout)") + parser.add_argument("--skill-name", default="", help="Skill name to include in the report title") + args = parser.parse_args() + + if args.input == "-": + data = json.load(sys.stdin) + else: + data = json.loads(Path(args.input).read_text()) + + html_output = generate_html(data, skill_name=args.skill_name) + + if args.output: + Path(args.output).write_text(html_output) + print(f"Report written to {args.output}", file=sys.stderr) + else: + print(html_output) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/improve_description.py b/.agents/skills/skill-creator/scripts/improve_description.py new file mode 100755 index 00000000..a270777b --- /dev/null +++ b/.agents/skills/skill-creator/scripts/improve_description.py @@ -0,0 +1,248 @@ +#!/usr/bin/env python3 +"""Improve a skill description based on eval results. + +Takes eval results (from run_eval.py) and generates an improved description +using Claude with extended thinking. +""" + +import argparse +import json +import re +import sys +from pathlib import Path + +import anthropic + +from scripts.utils import parse_skill_md + + +def improve_description( + client: anthropic.Anthropic, + skill_name: str, + skill_content: str, + current_description: str, + eval_results: dict, + history: list[dict], + model: str, + test_results: dict | None = None, + log_dir: Path | None = None, + iteration: int | None = None, +) -> str: + """Call Claude to improve the description based on eval results.""" + failed_triggers = [ + r for r in eval_results["results"] + if r["should_trigger"] and not r["pass"] + ] + false_triggers = [ + r for r in eval_results["results"] + if not r["should_trigger"] and not r["pass"] + ] + + # Build scores summary + train_score = f"{eval_results['summary']['passed']}/{eval_results['summary']['total']}" + if test_results: + test_score = f"{test_results['summary']['passed']}/{test_results['summary']['total']}" + scores_summary = f"Train: {train_score}, Test: {test_score}" + else: + scores_summary = f"Train: {train_score}" + + prompt = f"""You are optimizing a skill description for a Claude Code skill called "{skill_name}". A "skill" is sort of like a prompt, but with progressive disclosure -- there's a title and description that Claude sees when deciding whether to use the skill, and then if it does use the skill, it reads the .md file which has lots more details and potentially links to other resources in the skill folder like helper files and scripts and additional documentation or examples. + +The description appears in Claude's "available_skills" list. When a user sends a query, Claude decides whether to invoke the skill based solely on the title and on this description. Your goal is to write a description that triggers for relevant queries, and doesn't trigger for irrelevant ones. + +Here's the current description: + +"{current_description}" + + +Current scores ({scores_summary}): + +""" + if failed_triggers: + prompt += "FAILED TO TRIGGER (should have triggered but didn't):\n" + for r in failed_triggers: + prompt += f' - "{r["query"]}" (triggered {r["triggers"]}/{r["runs"]} times)\n' + prompt += "\n" + + if false_triggers: + prompt += "FALSE TRIGGERS (triggered but shouldn't have):\n" + for r in false_triggers: + prompt += f' - "{r["query"]}" (triggered {r["triggers"]}/{r["runs"]} times)\n' + prompt += "\n" + + if history: + prompt += "PREVIOUS ATTEMPTS (do NOT repeat these — try something structurally different):\n\n" + for h in history: + train_s = f"{h.get('train_passed', h.get('passed', 0))}/{h.get('train_total', h.get('total', 0))}" + test_s = f"{h.get('test_passed', '?')}/{h.get('test_total', '?')}" if h.get('test_passed') is not None else None + score_str = f"train={train_s}" + (f", test={test_s}" if test_s else "") + prompt += f'\n' + prompt += f'Description: "{h["description"]}"\n' + if "results" in h: + prompt += "Train results:\n" + for r in h["results"]: + status = "PASS" if r["pass"] else "FAIL" + prompt += f' [{status}] "{r["query"][:80]}" (triggered {r["triggers"]}/{r["runs"]})\n' + if h.get("note"): + prompt += f'Note: {h["note"]}\n' + prompt += "\n\n" + + prompt += f""" + +Skill content (for context on what the skill does): + +{skill_content} + + +Based on the failures, write a new and improved description that is more likely to trigger correctly. When I say "based on the failures", it's a bit of a tricky line to walk because we don't want to overfit to the specific cases you're seeing. So what I DON'T want you to do is produce an ever-expanding list of specific queries that this skill should or shouldn't trigger for. Instead, try to generalize from the failures to broader categories of user intent and situations where this skill would be useful or not useful. The reason for this is twofold: + +1. Avoid overfitting +2. The list might get loooong and it's injected into ALL queries and there might be a lot of skills, so we don't want to blow too much space on any given description. + +Concretely, your description should not be more than about 100-200 words, even if that comes at the cost of accuracy. + +Here are some tips that we've found to work well in writing these descriptions: +- The skill should be phrased in the imperative -- "Use this skill for" rather than "this skill does" +- The skill description should focus on the user's intent, what they are trying to achieve, vs. the implementation details of how the skill works. +- The description competes with other skills for Claude's attention — make it distinctive and immediately recognizable. +- If you're getting lots of failures after repeated attempts, change things up. Try different sentence structures or wordings. + +I'd encourage you to be creative and mix up the style in different iterations since you'll have multiple opportunities to try different approaches and we'll just grab the highest-scoring one at the end. + +Please respond with only the new description text in tags, nothing else.""" + + response = client.messages.create( + model=model, + max_tokens=16000, + thinking={ + "type": "enabled", + "budget_tokens": 10000, + }, + messages=[{"role": "user", "content": prompt}], + ) + + # Extract thinking and text from response + thinking_text = "" + text = "" + for block in response.content: + if block.type == "thinking": + thinking_text = block.thinking + elif block.type == "text": + text = block.text + + # Parse out the tags + match = re.search(r"(.*?)", text, re.DOTALL) + description = match.group(1).strip().strip('"') if match else text.strip().strip('"') + + # Log the transcript + transcript: dict = { + "iteration": iteration, + "prompt": prompt, + "thinking": thinking_text, + "response": text, + "parsed_description": description, + "char_count": len(description), + "over_limit": len(description) > 1024, + } + + # If over 1024 chars, ask the model to shorten it + if len(description) > 1024: + shorten_prompt = f"Your description is {len(description)} characters, which exceeds the hard 1024 character limit. Please rewrite it to be under 1024 characters while preserving the most important trigger words and intent coverage. Respond with only the new description in tags." + shorten_response = client.messages.create( + model=model, + max_tokens=16000, + thinking={ + "type": "enabled", + "budget_tokens": 10000, + }, + messages=[ + {"role": "user", "content": prompt}, + {"role": "assistant", "content": text}, + {"role": "user", "content": shorten_prompt}, + ], + ) + + shorten_thinking = "" + shorten_text = "" + for block in shorten_response.content: + if block.type == "thinking": + shorten_thinking = block.thinking + elif block.type == "text": + shorten_text = block.text + + match = re.search(r"(.*?)", shorten_text, re.DOTALL) + shortened = match.group(1).strip().strip('"') if match else shorten_text.strip().strip('"') + + transcript["rewrite_prompt"] = shorten_prompt + transcript["rewrite_thinking"] = shorten_thinking + transcript["rewrite_response"] = shorten_text + transcript["rewrite_description"] = shortened + transcript["rewrite_char_count"] = len(shortened) + description = shortened + + transcript["final_description"] = description + + if log_dir: + log_dir.mkdir(parents=True, exist_ok=True) + log_file = log_dir / f"improve_iter_{iteration or 'unknown'}.json" + log_file.write_text(json.dumps(transcript, indent=2)) + + return description + + +def main(): + parser = argparse.ArgumentParser(description="Improve a skill description based on eval results") + parser.add_argument("--eval-results", required=True, help="Path to eval results JSON (from run_eval.py)") + parser.add_argument("--skill-path", required=True, help="Path to skill directory") + parser.add_argument("--history", default=None, help="Path to history JSON (previous attempts)") + parser.add_argument("--model", required=True, help="Model for improvement") + parser.add_argument("--verbose", action="store_true", help="Print thinking to stderr") + args = parser.parse_args() + + skill_path = Path(args.skill_path) + if not (skill_path / "SKILL.md").exists(): + print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr) + sys.exit(1) + + eval_results = json.loads(Path(args.eval_results).read_text()) + history = [] + if args.history: + history = json.loads(Path(args.history).read_text()) + + name, _, content = parse_skill_md(skill_path) + current_description = eval_results["description"] + + if args.verbose: + print(f"Current: {current_description}", file=sys.stderr) + print(f"Score: {eval_results['summary']['passed']}/{eval_results['summary']['total']}", file=sys.stderr) + + client = anthropic.Anthropic() + new_description = improve_description( + client=client, + skill_name=name, + skill_content=content, + current_description=current_description, + eval_results=eval_results, + history=history, + model=args.model, + ) + + if args.verbose: + print(f"Improved: {new_description}", file=sys.stderr) + + # Output as JSON with both the new description and updated history + output = { + "description": new_description, + "history": history + [{ + "description": current_description, + "passed": eval_results["summary"]["passed"], + "failed": eval_results["summary"]["failed"], + "total": eval_results["summary"]["total"], + "results": eval_results["results"], + }], + } + print(json.dumps(output, indent=2)) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/package_skill.py b/.agents/skills/skill-creator/scripts/package_skill.py new file mode 100755 index 00000000..f48eac44 --- /dev/null +++ b/.agents/skills/skill-creator/scripts/package_skill.py @@ -0,0 +1,136 @@ +#!/usr/bin/env python3 +""" +Skill Packager - Creates a distributable .skill file of a skill folder + +Usage: + python utils/package_skill.py [output-directory] + +Example: + python utils/package_skill.py skills/public/my-skill + python utils/package_skill.py skills/public/my-skill ./dist +""" + +import fnmatch +import sys +import zipfile +from pathlib import Path +from scripts.quick_validate import validate_skill + +# Patterns to exclude when packaging skills. +EXCLUDE_DIRS = {"__pycache__", "node_modules"} +EXCLUDE_GLOBS = {"*.pyc"} +EXCLUDE_FILES = {".DS_Store"} +# Directories excluded only at the skill root (not when nested deeper). +ROOT_EXCLUDE_DIRS = {"evals"} + + +def should_exclude(rel_path: Path) -> bool: + """Check if a path should be excluded from packaging.""" + parts = rel_path.parts + if any(part in EXCLUDE_DIRS for part in parts): + return True + # rel_path is relative to skill_path.parent, so parts[0] is the skill + # folder name and parts[1] (if present) is the first subdir. + if len(parts) > 1 and parts[1] in ROOT_EXCLUDE_DIRS: + return True + name = rel_path.name + if name in EXCLUDE_FILES: + return True + return any(fnmatch.fnmatch(name, pat) for pat in EXCLUDE_GLOBS) + + +def package_skill(skill_path, output_dir=None): + """ + Package a skill folder into a .skill file. + + Args: + skill_path: Path to the skill folder + output_dir: Optional output directory for the .skill file (defaults to current directory) + + Returns: + Path to the created .skill file, or None if error + """ + skill_path = Path(skill_path).resolve() + + # Validate skill folder exists + if not skill_path.exists(): + print(f"❌ Error: Skill folder not found: {skill_path}") + return None + + if not skill_path.is_dir(): + print(f"❌ Error: Path is not a directory: {skill_path}") + return None + + # Validate SKILL.md exists + skill_md = skill_path / "SKILL.md" + if not skill_md.exists(): + print(f"❌ Error: SKILL.md not found in {skill_path}") + return None + + # Run validation before packaging + print("🔍 Validating skill...") + valid, message = validate_skill(skill_path) + if not valid: + print(f"❌ Validation failed: {message}") + print(" Please fix the validation errors before packaging.") + return None + print(f"✅ {message}\n") + + # Determine output location + skill_name = skill_path.name + if output_dir: + output_path = Path(output_dir).resolve() + output_path.mkdir(parents=True, exist_ok=True) + else: + output_path = Path.cwd() + + skill_filename = output_path / f"{skill_name}.skill" + + # Create the .skill file (zip format) + try: + with zipfile.ZipFile(skill_filename, 'w', zipfile.ZIP_DEFLATED) as zipf: + # Walk through the skill directory, excluding build artifacts + for file_path in skill_path.rglob('*'): + if not file_path.is_file(): + continue + arcname = file_path.relative_to(skill_path.parent) + if should_exclude(arcname): + print(f" Skipped: {arcname}") + continue + zipf.write(file_path, arcname) + print(f" Added: {arcname}") + + print(f"\n✅ Successfully packaged skill to: {skill_filename}") + return skill_filename + + except Exception as e: + print(f"❌ Error creating .skill file: {e}") + return None + + +def main(): + if len(sys.argv) < 2: + print("Usage: python utils/package_skill.py [output-directory]") + print("\nExample:") + print(" python utils/package_skill.py skills/public/my-skill") + print(" python utils/package_skill.py skills/public/my-skill ./dist") + sys.exit(1) + + skill_path = sys.argv[1] + output_dir = sys.argv[2] if len(sys.argv) > 2 else None + + print(f"📦 Packaging skill: {skill_path}") + if output_dir: + print(f" Output directory: {output_dir}") + print() + + result = package_skill(skill_path, output_dir) + + if result: + sys.exit(0) + else: + sys.exit(1) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/quick_validate.py b/.agents/skills/skill-creator/scripts/quick_validate.py new file mode 100755 index 00000000..ed8e1ddd --- /dev/null +++ b/.agents/skills/skill-creator/scripts/quick_validate.py @@ -0,0 +1,103 @@ +#!/usr/bin/env python3 +""" +Quick validation script for skills - minimal version +""" + +import sys +import os +import re +import yaml +from pathlib import Path + +def validate_skill(skill_path): + """Basic validation of a skill""" + skill_path = Path(skill_path) + + # Check SKILL.md exists + skill_md = skill_path / 'SKILL.md' + if not skill_md.exists(): + return False, "SKILL.md not found" + + # Read and validate frontmatter + content = skill_md.read_text() + if not content.startswith('---'): + return False, "No YAML frontmatter found" + + # Extract frontmatter + match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL) + if not match: + return False, "Invalid frontmatter format" + + frontmatter_text = match.group(1) + + # Parse YAML frontmatter + try: + frontmatter = yaml.safe_load(frontmatter_text) + if not isinstance(frontmatter, dict): + return False, "Frontmatter must be a YAML dictionary" + except yaml.YAMLError as e: + return False, f"Invalid YAML in frontmatter: {e}" + + # Define allowed properties + ALLOWED_PROPERTIES = {'name', 'description', 'license', 'allowed-tools', 'metadata', 'compatibility'} + + # Check for unexpected properties (excluding nested keys under metadata) + unexpected_keys = set(frontmatter.keys()) - ALLOWED_PROPERTIES + if unexpected_keys: + return False, ( + f"Unexpected key(s) in SKILL.md frontmatter: {', '.join(sorted(unexpected_keys))}. " + f"Allowed properties are: {', '.join(sorted(ALLOWED_PROPERTIES))}" + ) + + # Check required fields + if 'name' not in frontmatter: + return False, "Missing 'name' in frontmatter" + if 'description' not in frontmatter: + return False, "Missing 'description' in frontmatter" + + # Extract name for validation + name = frontmatter.get('name', '') + if not isinstance(name, str): + return False, f"Name must be a string, got {type(name).__name__}" + name = name.strip() + if name: + # Check naming convention (kebab-case: lowercase with hyphens) + if not re.match(r'^[a-z0-9-]+$', name): + return False, f"Name '{name}' should be kebab-case (lowercase letters, digits, and hyphens only)" + if name.startswith('-') or name.endswith('-') or '--' in name: + return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens" + # Check name length (max 64 characters per spec) + if len(name) > 64: + return False, f"Name is too long ({len(name)} characters). Maximum is 64 characters." + + # Extract and validate description + description = frontmatter.get('description', '') + if not isinstance(description, str): + return False, f"Description must be a string, got {type(description).__name__}" + description = description.strip() + if description: + # Check for angle brackets + if '<' in description or '>' in description: + return False, "Description cannot contain angle brackets (< or >)" + # Check description length (max 1024 characters per spec) + if len(description) > 1024: + return False, f"Description is too long ({len(description)} characters). Maximum is 1024 characters." + + # Validate compatibility field if present (optional) + compatibility = frontmatter.get('compatibility', '') + if compatibility: + if not isinstance(compatibility, str): + return False, f"Compatibility must be a string, got {type(compatibility).__name__}" + if len(compatibility) > 500: + return False, f"Compatibility is too long ({len(compatibility)} characters). Maximum is 500 characters." + + return True, "Skill is valid!" + +if __name__ == "__main__": + if len(sys.argv) != 2: + print("Usage: python quick_validate.py ") + sys.exit(1) + + valid, message = validate_skill(sys.argv[1]) + print(message) + sys.exit(0 if valid else 1) \ No newline at end of file diff --git a/.agents/skills/skill-creator/scripts/run_eval.py b/.agents/skills/skill-creator/scripts/run_eval.py new file mode 100755 index 00000000..e58c70be --- /dev/null +++ b/.agents/skills/skill-creator/scripts/run_eval.py @@ -0,0 +1,310 @@ +#!/usr/bin/env python3 +"""Run trigger evaluation for a skill description. + +Tests whether a skill's description causes Claude to trigger (read the skill) +for a set of queries. Outputs results as JSON. +""" + +import argparse +import json +import os +import select +import subprocess +import sys +import time +import uuid +from concurrent.futures import ProcessPoolExecutor, as_completed +from pathlib import Path + +from scripts.utils import parse_skill_md + + +def find_project_root() -> Path: + """Find the project root by walking up from cwd looking for .claude/. + + Mimics how Claude Code discovers its project root, so the command file + we create ends up where claude -p will look for it. + """ + current = Path.cwd() + for parent in [current, *current.parents]: + if (parent / ".claude").is_dir(): + return parent + return current + + +def run_single_query( + query: str, + skill_name: str, + skill_description: str, + timeout: int, + project_root: str, + model: str | None = None, +) -> bool: + """Run a single query and return whether the skill was triggered. + + Creates a command file in .claude/commands/ so it appears in Claude's + available_skills list, then runs `claude -p` with the raw query. + Uses --include-partial-messages to detect triggering early from + stream events (content_block_start) rather than waiting for the + full assistant message, which only arrives after tool execution. + """ + unique_id = uuid.uuid4().hex[:8] + clean_name = f"{skill_name}-skill-{unique_id}" + project_commands_dir = Path(project_root) / ".claude" / "commands" + command_file = project_commands_dir / f"{clean_name}.md" + + try: + project_commands_dir.mkdir(parents=True, exist_ok=True) + # Use YAML block scalar to avoid breaking on quotes in description + indented_desc = "\n ".join(skill_description.split("\n")) + command_content = ( + f"---\n" + f"description: |\n" + f" {indented_desc}\n" + f"---\n\n" + f"# {skill_name}\n\n" + f"This skill handles: {skill_description}\n" + ) + command_file.write_text(command_content) + + cmd = [ + "claude", + "-p", query, + "--output-format", "stream-json", + "--verbose", + "--include-partial-messages", + ] + if model: + cmd.extend(["--model", model]) + + # Remove CLAUDECODE env var to allow nesting claude -p inside a + # Claude Code session. The guard is for interactive terminal conflicts; + # programmatic subprocess usage is safe. + env = {k: v for k, v in os.environ.items() if k != "CLAUDECODE"} + + process = subprocess.Popen( + cmd, + stdout=subprocess.PIPE, + stderr=subprocess.DEVNULL, + cwd=project_root, + env=env, + ) + + triggered = False + start_time = time.time() + buffer = "" + # Track state for stream event detection + pending_tool_name = None + accumulated_json = "" + + try: + while time.time() - start_time < timeout: + if process.poll() is not None: + remaining = process.stdout.read() + if remaining: + buffer += remaining.decode("utf-8", errors="replace") + break + + ready, _, _ = select.select([process.stdout], [], [], 1.0) + if not ready: + continue + + chunk = os.read(process.stdout.fileno(), 8192) + if not chunk: + break + buffer += chunk.decode("utf-8", errors="replace") + + while "\n" in buffer: + line, buffer = buffer.split("\n", 1) + line = line.strip() + if not line: + continue + + try: + event = json.loads(line) + except json.JSONDecodeError: + continue + + # Early detection via stream events + if event.get("type") == "stream_event": + se = event.get("event", {}) + se_type = se.get("type", "") + + if se_type == "content_block_start": + cb = se.get("content_block", {}) + if cb.get("type") == "tool_use": + tool_name = cb.get("name", "") + if tool_name in ("Skill", "Read"): + pending_tool_name = tool_name + accumulated_json = "" + else: + return False + + elif se_type == "content_block_delta" and pending_tool_name: + delta = se.get("delta", {}) + if delta.get("type") == "input_json_delta": + accumulated_json += delta.get("partial_json", "") + if clean_name in accumulated_json: + return True + + elif se_type in ("content_block_stop", "message_stop"): + if pending_tool_name: + return clean_name in accumulated_json + if se_type == "message_stop": + return False + + # Fallback: full assistant message + elif event.get("type") == "assistant": + message = event.get("message", {}) + for content_item in message.get("content", []): + if content_item.get("type") != "tool_use": + continue + tool_name = content_item.get("name", "") + tool_input = content_item.get("input", {}) + if tool_name == "Skill" and clean_name in tool_input.get("skill", ""): + triggered = True + elif tool_name == "Read" and clean_name in tool_input.get("file_path", ""): + triggered = True + return triggered + + elif event.get("type") == "result": + return triggered + finally: + # Clean up process on any exit path (return, exception, timeout) + if process.poll() is None: + process.kill() + process.wait() + + return triggered + finally: + if command_file.exists(): + command_file.unlink() + + +def run_eval( + eval_set: list[dict], + skill_name: str, + description: str, + num_workers: int, + timeout: int, + project_root: Path, + runs_per_query: int = 1, + trigger_threshold: float = 0.5, + model: str | None = None, +) -> dict: + """Run the full eval set and return results.""" + results = [] + + with ProcessPoolExecutor(max_workers=num_workers) as executor: + future_to_info = {} + for item in eval_set: + for run_idx in range(runs_per_query): + future = executor.submit( + run_single_query, + item["query"], + skill_name, + description, + timeout, + str(project_root), + model, + ) + future_to_info[future] = (item, run_idx) + + query_triggers: dict[str, list[bool]] = {} + query_items: dict[str, dict] = {} + for future in as_completed(future_to_info): + item, _ = future_to_info[future] + query = item["query"] + query_items[query] = item + if query not in query_triggers: + query_triggers[query] = [] + try: + query_triggers[query].append(future.result()) + except Exception as e: + print(f"Warning: query failed: {e}", file=sys.stderr) + query_triggers[query].append(False) + + for query, triggers in query_triggers.items(): + item = query_items[query] + trigger_rate = sum(triggers) / len(triggers) + should_trigger = item["should_trigger"] + if should_trigger: + did_pass = trigger_rate >= trigger_threshold + else: + did_pass = trigger_rate < trigger_threshold + results.append({ + "query": query, + "should_trigger": should_trigger, + "trigger_rate": trigger_rate, + "triggers": sum(triggers), + "runs": len(triggers), + "pass": did_pass, + }) + + passed = sum(1 for r in results if r["pass"]) + total = len(results) + + return { + "skill_name": skill_name, + "description": description, + "results": results, + "summary": { + "total": total, + "passed": passed, + "failed": total - passed, + }, + } + + +def main(): + parser = argparse.ArgumentParser(description="Run trigger evaluation for a skill description") + parser.add_argument("--eval-set", required=True, help="Path to eval set JSON file") + parser.add_argument("--skill-path", required=True, help="Path to skill directory") + parser.add_argument("--description", default=None, help="Override description to test") + parser.add_argument("--num-workers", type=int, default=10, help="Number of parallel workers") + parser.add_argument("--timeout", type=int, default=30, help="Timeout per query in seconds") + parser.add_argument("--runs-per-query", type=int, default=3, help="Number of runs per query") + parser.add_argument("--trigger-threshold", type=float, default=0.5, help="Trigger rate threshold") + parser.add_argument("--model", default=None, help="Model to use for claude -p (default: user's configured model)") + parser.add_argument("--verbose", action="store_true", help="Print progress to stderr") + args = parser.parse_args() + + eval_set = json.loads(Path(args.eval_set).read_text()) + skill_path = Path(args.skill_path) + + if not (skill_path / "SKILL.md").exists(): + print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr) + sys.exit(1) + + name, original_description, content = parse_skill_md(skill_path) + description = args.description or original_description + project_root = find_project_root() + + if args.verbose: + print(f"Evaluating: {description}", file=sys.stderr) + + output = run_eval( + eval_set=eval_set, + skill_name=name, + description=description, + num_workers=args.num_workers, + timeout=args.timeout, + project_root=project_root, + runs_per_query=args.runs_per_query, + trigger_threshold=args.trigger_threshold, + model=args.model, + ) + + if args.verbose: + summary = output["summary"] + print(f"Results: {summary['passed']}/{summary['total']} passed", file=sys.stderr) + for r in output["results"]: + status = "PASS" if r["pass"] else "FAIL" + rate_str = f"{r['triggers']}/{r['runs']}" + print(f" [{status}] rate={rate_str} expected={r['should_trigger']}: {r['query'][:70]}", file=sys.stderr) + + print(json.dumps(output, indent=2)) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/run_loop.py b/.agents/skills/skill-creator/scripts/run_loop.py new file mode 100755 index 00000000..36f9b4e0 --- /dev/null +++ b/.agents/skills/skill-creator/scripts/run_loop.py @@ -0,0 +1,332 @@ +#!/usr/bin/env python3 +"""Run the eval + improve loop until all pass or max iterations reached. + +Combines run_eval.py and improve_description.py in a loop, tracking history +and returning the best description found. Supports train/test split to prevent +overfitting. +""" + +import argparse +import json +import random +import sys +import tempfile +import time +import webbrowser +from pathlib import Path + +import anthropic + +from scripts.generate_report import generate_html +from scripts.improve_description import improve_description +from scripts.run_eval import find_project_root, run_eval +from scripts.utils import parse_skill_md + + +def split_eval_set(eval_set: list[dict], holdout: float, seed: int = 42) -> tuple[list[dict], list[dict]]: + """Split eval set into train and test sets, stratified by should_trigger.""" + random.seed(seed) + + # Separate by should_trigger + trigger = [e for e in eval_set if e["should_trigger"]] + no_trigger = [e for e in eval_set if not e["should_trigger"]] + + # Shuffle each group + random.shuffle(trigger) + random.shuffle(no_trigger) + + # Calculate split points + n_trigger_test = max(1, int(len(trigger) * holdout)) + n_no_trigger_test = max(1, int(len(no_trigger) * holdout)) + + # Split + test_set = trigger[:n_trigger_test] + no_trigger[:n_no_trigger_test] + train_set = trigger[n_trigger_test:] + no_trigger[n_no_trigger_test:] + + return train_set, test_set + + +def run_loop( + eval_set: list[dict], + skill_path: Path, + description_override: str | None, + num_workers: int, + timeout: int, + max_iterations: int, + runs_per_query: int, + trigger_threshold: float, + holdout: float, + model: str, + verbose: bool, + live_report_path: Path | None = None, + log_dir: Path | None = None, +) -> dict: + """Run the eval + improvement loop.""" + project_root = find_project_root() + name, original_description, content = parse_skill_md(skill_path) + current_description = description_override or original_description + + # Split into train/test if holdout > 0 + if holdout > 0: + train_set, test_set = split_eval_set(eval_set, holdout) + if verbose: + print(f"Split: {len(train_set)} train, {len(test_set)} test (holdout={holdout})", file=sys.stderr) + else: + train_set = eval_set + test_set = [] + + client = anthropic.Anthropic() + history = [] + exit_reason = "unknown" + + for iteration in range(1, max_iterations + 1): + if verbose: + print(f"\n{'='*60}", file=sys.stderr) + print(f"Iteration {iteration}/{max_iterations}", file=sys.stderr) + print(f"Description: {current_description}", file=sys.stderr) + print(f"{'='*60}", file=sys.stderr) + + # Evaluate train + test together in one batch for parallelism + all_queries = train_set + test_set + t0 = time.time() + all_results = run_eval( + eval_set=all_queries, + skill_name=name, + description=current_description, + num_workers=num_workers, + timeout=timeout, + project_root=project_root, + runs_per_query=runs_per_query, + trigger_threshold=trigger_threshold, + model=model, + ) + eval_elapsed = time.time() - t0 + + # Split results back into train/test by matching queries + train_queries_set = {q["query"] for q in train_set} + train_result_list = [r for r in all_results["results"] if r["query"] in train_queries_set] + test_result_list = [r for r in all_results["results"] if r["query"] not in train_queries_set] + + train_passed = sum(1 for r in train_result_list if r["pass"]) + train_total = len(train_result_list) + train_summary = {"passed": train_passed, "failed": train_total - train_passed, "total": train_total} + train_results = {"results": train_result_list, "summary": train_summary} + + if test_set: + test_passed = sum(1 for r in test_result_list if r["pass"]) + test_total = len(test_result_list) + test_summary = {"passed": test_passed, "failed": test_total - test_passed, "total": test_total} + test_results = {"results": test_result_list, "summary": test_summary} + else: + test_results = None + test_summary = None + + history.append({ + "iteration": iteration, + "description": current_description, + "train_passed": train_summary["passed"], + "train_failed": train_summary["failed"], + "train_total": train_summary["total"], + "train_results": train_results["results"], + "test_passed": test_summary["passed"] if test_summary else None, + "test_failed": test_summary["failed"] if test_summary else None, + "test_total": test_summary["total"] if test_summary else None, + "test_results": test_results["results"] if test_results else None, + # For backward compat with report generator + "passed": train_summary["passed"], + "failed": train_summary["failed"], + "total": train_summary["total"], + "results": train_results["results"], + }) + + # Write live report if path provided + if live_report_path: + partial_output = { + "original_description": original_description, + "best_description": current_description, + "best_score": "in progress", + "iterations_run": len(history), + "holdout": holdout, + "train_size": len(train_set), + "test_size": len(test_set), + "history": history, + } + live_report_path.write_text(generate_html(partial_output, auto_refresh=True, skill_name=name)) + + if verbose: + def print_eval_stats(label, results, elapsed): + pos = [r for r in results if r["should_trigger"]] + neg = [r for r in results if not r["should_trigger"]] + tp = sum(r["triggers"] for r in pos) + pos_runs = sum(r["runs"] for r in pos) + fn = pos_runs - tp + fp = sum(r["triggers"] for r in neg) + neg_runs = sum(r["runs"] for r in neg) + tn = neg_runs - fp + total = tp + tn + fp + fn + precision = tp / (tp + fp) if (tp + fp) > 0 else 1.0 + recall = tp / (tp + fn) if (tp + fn) > 0 else 1.0 + accuracy = (tp + tn) / total if total > 0 else 0.0 + print(f"{label}: {tp+tn}/{total} correct, precision={precision:.0%} recall={recall:.0%} accuracy={accuracy:.0%} ({elapsed:.1f}s)", file=sys.stderr) + for r in results: + status = "PASS" if r["pass"] else "FAIL" + rate_str = f"{r['triggers']}/{r['runs']}" + print(f" [{status}] rate={rate_str} expected={r['should_trigger']}: {r['query'][:60]}", file=sys.stderr) + + print_eval_stats("Train", train_results["results"], eval_elapsed) + if test_summary: + print_eval_stats("Test ", test_results["results"], 0) + + if train_summary["failed"] == 0: + exit_reason = f"all_passed (iteration {iteration})" + if verbose: + print(f"\nAll train queries passed on iteration {iteration}!", file=sys.stderr) + break + + if iteration == max_iterations: + exit_reason = f"max_iterations ({max_iterations})" + if verbose: + print(f"\nMax iterations reached ({max_iterations}).", file=sys.stderr) + break + + # Improve the description based on train results + if verbose: + print(f"\nImproving description...", file=sys.stderr) + + t0 = time.time() + # Strip test scores from history so improvement model can't see them + blinded_history = [ + {k: v for k, v in h.items() if not k.startswith("test_")} + for h in history + ] + new_description = improve_description( + client=client, + skill_name=name, + skill_content=content, + current_description=current_description, + eval_results=train_results, + history=blinded_history, + model=model, + log_dir=log_dir, + iteration=iteration, + ) + improve_elapsed = time.time() - t0 + + if verbose: + print(f"Proposed ({improve_elapsed:.1f}s): {new_description}", file=sys.stderr) + + current_description = new_description + + # Find the best iteration by TEST score (or train if no test set) + if test_set: + best = max(history, key=lambda h: h["test_passed"] or 0) + best_score = f"{best['test_passed']}/{best['test_total']}" + else: + best = max(history, key=lambda h: h["train_passed"]) + best_score = f"{best['train_passed']}/{best['train_total']}" + + if verbose: + print(f"\nExit reason: {exit_reason}", file=sys.stderr) + print(f"Best score: {best_score} (iteration {best['iteration']})", file=sys.stderr) + + return { + "exit_reason": exit_reason, + "original_description": original_description, + "best_description": best["description"], + "best_score": best_score, + "best_train_score": f"{best['train_passed']}/{best['train_total']}", + "best_test_score": f"{best['test_passed']}/{best['test_total']}" if test_set else None, + "final_description": current_description, + "iterations_run": len(history), + "holdout": holdout, + "train_size": len(train_set), + "test_size": len(test_set), + "history": history, + } + + +def main(): + parser = argparse.ArgumentParser(description="Run eval + improve loop") + parser.add_argument("--eval-set", required=True, help="Path to eval set JSON file") + parser.add_argument("--skill-path", required=True, help="Path to skill directory") + parser.add_argument("--description", default=None, help="Override starting description") + parser.add_argument("--num-workers", type=int, default=10, help="Number of parallel workers") + parser.add_argument("--timeout", type=int, default=30, help="Timeout per query in seconds") + parser.add_argument("--max-iterations", type=int, default=5, help="Max improvement iterations") + parser.add_argument("--runs-per-query", type=int, default=3, help="Number of runs per query") + parser.add_argument("--trigger-threshold", type=float, default=0.5, help="Trigger rate threshold") + parser.add_argument("--holdout", type=float, default=0.4, help="Fraction of eval set to hold out for testing (0 to disable)") + parser.add_argument("--model", required=True, help="Model for improvement") + parser.add_argument("--verbose", action="store_true", help="Print progress to stderr") + parser.add_argument("--report", default="auto", help="Generate HTML report at this path (default: 'auto' for temp file, 'none' to disable)") + parser.add_argument("--results-dir", default=None, help="Save all outputs (results.json, report.html, log.txt) to a timestamped subdirectory here") + args = parser.parse_args() + + eval_set = json.loads(Path(args.eval_set).read_text()) + skill_path = Path(args.skill_path) + + if not (skill_path / "SKILL.md").exists(): + print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr) + sys.exit(1) + + name, _, _ = parse_skill_md(skill_path) + + # Set up live report path + if args.report != "none": + if args.report == "auto": + timestamp = time.strftime("%Y%m%d_%H%M%S") + live_report_path = Path(tempfile.gettempdir()) / f"skill_description_report_{skill_path.name}_{timestamp}.html" + else: + live_report_path = Path(args.report) + # Open the report immediately so the user can watch + live_report_path.write_text("

Starting optimization loop...

") + webbrowser.open(str(live_report_path)) + else: + live_report_path = None + + # Determine output directory (create before run_loop so logs can be written) + if args.results_dir: + timestamp = time.strftime("%Y-%m-%d_%H%M%S") + results_dir = Path(args.results_dir) / timestamp + results_dir.mkdir(parents=True, exist_ok=True) + else: + results_dir = None + + log_dir = results_dir / "logs" if results_dir else None + + output = run_loop( + eval_set=eval_set, + skill_path=skill_path, + description_override=args.description, + num_workers=args.num_workers, + timeout=args.timeout, + max_iterations=args.max_iterations, + runs_per_query=args.runs_per_query, + trigger_threshold=args.trigger_threshold, + holdout=args.holdout, + model=args.model, + verbose=args.verbose, + live_report_path=live_report_path, + log_dir=log_dir, + ) + + # Save JSON output + json_output = json.dumps(output, indent=2) + print(json_output) + if results_dir: + (results_dir / "results.json").write_text(json_output) + + # Write final HTML report (without auto-refresh) + if live_report_path: + live_report_path.write_text(generate_html(output, auto_refresh=False, skill_name=name)) + print(f"\nReport: {live_report_path}", file=sys.stderr) + + if results_dir and live_report_path: + (results_dir / "report.html").write_text(generate_html(output, auto_refresh=False, skill_name=name)) + + if results_dir: + print(f"Results saved to: {results_dir}", file=sys.stderr) + + +if __name__ == "__main__": + main() diff --git a/.agents/skills/skill-creator/scripts/utils.py b/.agents/skills/skill-creator/scripts/utils.py new file mode 100644 index 00000000..51b6a07d --- /dev/null +++ b/.agents/skills/skill-creator/scripts/utils.py @@ -0,0 +1,47 @@ +"""Shared utilities for skill-creator scripts.""" + +from pathlib import Path + + + +def parse_skill_md(skill_path: Path) -> tuple[str, str, str]: + """Parse a SKILL.md file, returning (name, description, full_content).""" + content = (skill_path / "SKILL.md").read_text() + lines = content.split("\n") + + if lines[0].strip() != "---": + raise ValueError("SKILL.md missing frontmatter (no opening ---)") + + end_idx = None + for i, line in enumerate(lines[1:], start=1): + if line.strip() == "---": + end_idx = i + break + + if end_idx is None: + raise ValueError("SKILL.md missing frontmatter (no closing ---)") + + name = "" + description = "" + frontmatter_lines = lines[1:end_idx] + i = 0 + while i < len(frontmatter_lines): + line = frontmatter_lines[i] + if line.startswith("name:"): + name = line[len("name:"):].strip().strip('"').strip("'") + elif line.startswith("description:"): + value = line[len("description:"):].strip() + # Handle YAML multiline indicators (>, |, >-, |-) + if value in (">", "|", ">-", "|-"): + continuation_lines: list[str] = [] + i += 1 + while i < len(frontmatter_lines) and (frontmatter_lines[i].startswith(" ") or frontmatter_lines[i].startswith("\t")): + continuation_lines.append(frontmatter_lines[i].strip()) + i += 1 + description = " ".join(continuation_lines) + continue + else: + description = value.strip('"').strip("'") + i += 1 + + return name, description, content diff --git a/.agents/skills/ui-component-contracts/SKILL.md b/.agents/skills/ui-component-contracts/SKILL.md new file mode 100644 index 00000000..48d736aa --- /dev/null +++ b/.agents/skills/ui-component-contracts/SKILL.md @@ -0,0 +1,86 @@ +--- +name: ui-component-contracts +description: Read and debug UI primitives before editing call sites. Use whenever a React/Tailwind/design-system component behaves unexpectedly, especially for icon or avatar lockups, variant confusion, wrapper misuse, padding/radius/background bugs, mismatched rendered footprints, or any case where inspecting the actual DOM is the fastest way to see which node owns the visual shell versus the inner content. +--- + +# UI Component Contracts + +Fix the primitive before patching the caller. + +## Run this workflow + +1. Read the primitive and any thin wrapper around it. +2. List the real ownership boundaries: + - shell/surface + - layout box + - padding + - clipping radius + - loading state surface + - typography + - overlap / spacing +3. Inspect rendered DOM when the bug is visual or the API is ambiguous. +4. Compare the actual rendered nodes on both sides of the broken UI. +5. Change the abstraction seam first. +6. Simplify the call site after the primitive is correct. + +## Check before changing anything + +- Which node actually draws the visible surface? +- Which props are already forwarded (`className`, `style`, `variant`, text props)? +- Does `size` mean root size or inner content size? +- Does a variant add wrappers, padding, or background? +- Is the content an image, SVG, text fallback, or custom fallback node? + +## DOM-first debugging + +When a UI still does not make sense, inspect the DOM and compare: + +- root classes +- explicit width and height +- margin / overlap styles +- z-index +- whether an inner wrapper appears only for some variants +- whether the content is an ``, SVG, or text node + +Drop any theory that the DOM disproves. + +## Do not do these + +- Do not invent wrapper divs until the primitive truly lacks the seam. +- Do not compensate for bad variant semantics with hacks like `padded` plus `p-0`. +- Do not assume equal prop values produce equal rendered footprints. +- Do not style a wrapper when the primitive root owns the shell. +- Do not mix different text primitives for the same fallback concept. +- Do not invent outer-size math until you have proved the primitive cannot own sizing. + +## Variant rules + +- Make variant names describe real surface modes. +- Add a new mode when the existing ones are semantically wrong. +- Comment any variant whose structure or sizing model is non-obvious. +- Prefer `plain` / `padded` / `filled` style semantics over vague names. + +## Comment only the weird parts + +Add one-sentence comments when a reader would otherwise backtrack, for example: + +- why a padded image needs an inner wrapper +- why root sizing differs between variants +- why overlap uses visible slice instead of arbitrary negative margin + +## Typical failure pattern + +1. Patch the caller. +2. Add wrappers. +3. Add compensation math. +4. Discover the primitive semantics were wrong all along. + +Avoid that loop. + +## Done means + +- both sides of a lockup have the same rendered outer footprint +- the intended node owns the shell styling +- variant semantics are internally consistent +- comments exist where the structure is surprising +- tests assert rendered behavior, not just prop values diff --git a/.env.dev.example b/.env.dev.example index d0519cdc..79faef93 100644 --- a/.env.dev.example +++ b/.env.dev.example @@ -12,11 +12,8 @@ VITE_GATEWAY_URL=https://dev.data-gateway.vana.org VITE_ACCOUNT_URL=https://account-dev.vana.org -# Dev mocking -## → DEV_FLAGS.useTestData -VITE_USE_TEST_DATA= -## → DEV_FLAGS.useRickrollMock -VITE_USE_RICKROLL_MOCK= +# Optional: connector logo provider ("logoDev" | "brandDev") +VITE_PLATFORM_LOGO_PROVIDER=brandDev VITE_CHAIN_ID=14800 diff --git a/.env.example b/.env.example index 7698c8ed..3998c17a 100644 --- a/.env.example +++ b/.env.example @@ -17,10 +17,5 @@ VITE_ACCOUNT_URL=https://account-dev.vana.org # VITE_TUNNEL_SERVER_ADDR=frpc.server.vana.org # VITE_TUNNEL_SERVER_PORT=7000 -# Dev mocking -## → DEV_FLAGS.useHomeTestFixtures -VITE_USE_HOME_TEST_FIXTURES=false -## → DEV_FLAGS.useSettingsUiMocks -VITE_USE_SETTINGS_UI_MOCKS=false -## → DEV_FLAGS.useHomeConnectingPreview (Home connector card state preview) -VITE_USE_HOME_CONNECTING_PREVIEW=false +# Optional: connector logo provider ("logoDev" | "brandDev") +VITE_PLATFORM_LOGO_PROVIDER=brandDev \ No newline at end of file diff --git a/.env.prod.example b/.env.prod.example index 7c135121..36ece056 100644 --- a/.env.prod.example +++ b/.env.prod.example @@ -13,11 +13,8 @@ VITE_GATEWAY_URL=https://data-gateway.vana.org # VITE_ACCOUNT_URL=https://account-dev.vana.org VITE_ACCOUNT_URL=https://account.vana.org -# Dev mocking -## → DEV_FLAGS.useTestData -VITE_USE_TEST_DATA= -## → DEV_FLAGS.useRickrollMock -VITE_USE_RICKROLL_MOCK= +# Optional: connector logo provider ("logoDev" | "brandDev") +VITE_PLATFORM_LOGO_PROVIDER=brandDev VITE_CHAIN_ID=1480 diff --git a/.github/PULL_REQUEST_TEMPLATE/data-app-submission.md b/.github/PULL_REQUEST_TEMPLATE/data-app-submission.md new file mode 100644 index 00000000..164894c5 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE/data-app-submission.md @@ -0,0 +1,32 @@ +## App submission + +- App name: +- App URL: +- Status: Live | Alpha | Waitlist +- Repo or verifiable builder profile: +- Builder/contact: + +## What it does + +- One-sentence user value: + +## Vana integration + +- Grant scopes: +- Personal server or protocol notes: + +## Demo + +- Demo URL: +- Screenshots: + +## Listing notes + +- Anything reviewers should know before listing it: + +## Submission checklist + +- [ ] I added or updated a file in `ecosystem/app-submissions/` +- [ ] I included a live URL or clearly described the current app status +- [ ] I included a repo or other verifiable builder profile +- [ ] I included demo material or screenshots diff --git a/docs/260305-personal-server-signin-regression-trace.md b/docs/260305-personal-server-signin-regression-trace.md new file mode 100644 index 00000000..3ba02bfe --- /dev/null +++ b/docs/260305-personal-server-signin-regression-trace.md @@ -0,0 +1,356 @@ +# 260305-personal-server-signin-regression-trace + +## Context + +Bug report: clicking `Sign in to start` on Personal Server opens account auth, deep link returns to app, but UI stays signed out. + +Focused UI branch: + +- `src/pages/settings/components/settings-personal-server.tsx` (`if (!isAuthenticated)` branch) + +This branch is display-only. The real failure is upstream auth hydration. + +## Canonical behavior (ship contract) + +This is the source-of-truth flow for Personal Server page sign-in: + +1. User clicks `Sign in to start` on Personal Server page. +2. `SettingsPersonalServer` calls `onSignInToStart` from `useSettingsPage`. +3. App opens: + - `https://account-dev.vana.org/connect?sessionId=local-server-auth&appName=DataConnect` +4. Account app returns via deep link: + - `vana://connect?sessionId=local-server-auth&masterKeySig=...` +5. `useDeepLink` parses params and dispatches `setAuthenticated(...)` after recovering wallet from `masterKeySig`. +6. `useAuth` resolves authenticated state from `walletAddress` + `masterKeySignature`. +7. For `sessionId=local-server-auth`, route target remains `ROUTES.settings` (current intended behavior). + +Implementation boundaries: + +- Personal Server page owns presentation/composition only. +- Auth/deep-link hydration remains centralized in `useDeepLink`. +- Sign-in launch remains in `useSettingsPage`. + +## Release decision + +- Confirmed by operator: flow works in installed production app `0.7.30`. +- Therefore this is not currently treated as a production auth-logic blocker. +- Personal Server page extraction can ship independently of dev deep-link handler instability. + +## Explicit non-goal for this PR + +- Solving dev LaunchServices/protocol handler instability is not required to ship Personal Server page extraction. +- Track dev-mode deep-link reliability as follow-up tooling/runtime work. + +## Files touched for this bugfix + +Code: + +- `src/pages/settings/use-settings-page.ts` +- `src/hooks/use-deep-link.ts` + +Tests: + +- `src/pages/personal-server/index.test.tsx` +- `src/hooks/use-deep-link.test.tsx` + +## Change log by hypothesis + +### 1) Hypothesis: sign-in click sometimes does not open auth URL + +File: + +- `src/pages/settings/use-settings-page.ts` + +Change: + +- `openExternalUrl(url)` now falls back to `window.open(url, "_blank", "noopener,noreferrer")` when: + - it returns `false`, or + - it throws + +First-order effect: + +- Sign-in button reliably opens auth page. + +Second-order effect: + +- Prevents silent no-op click path when shell/plugin open fails. + +Third-order risk: + +- Potential duplicate-open in edge timing; mitigated by existing in-flight sign-in guard in UI. + +--- + +### 2) Hypothesis: callback route mismatch after Personal Server extraction + +File: + +- `src/hooks/use-deep-link.ts` + +Change outcome: + +- `local-server-auth` callback target is currently `ROUTES.settings` (old behavior restored). + +First-order effect: + +- Callback route behavior matches previous settings-panel flow. + +Second-order effect: + +- Removes route-based uncertainty introduced during debugging. + +Third-order risk: + +- None beyond existing settings-page redirect behavior. + +--- + +### 3) Hypothesis: signature recovery path mismatch prevents auth hydration + +File: + +- `src/hooks/use-deep-link.ts` + +Change: + +- Added resilient recovery routine: + - try `recoverMessageAddress({ message, signature })` + - fallback `recoverAddress({ hash: hashMessage(message), signature })` + - tried messages: + - `vana-master-key-v1` + - `vana-master-key` + - `vana-master-key-v2` + +First-order effect: + +- More callback signatures can hydrate `walletAddress` + `masterKeySignature`. + +Second-order effect: + +- Reduces dependency on one exact signing format. + +Third-order risk: + +- Broader acceptance path can obscure protocol drift if upstream changes unexpectedly. + +--- + +### 4) Hypothesis: deep-link event payload shape mismatch drops callback URL + +File: + +- `src/hooks/use-deep-link.ts` + +Change: + +- `onOpenUrl` handler now accepts both payload shapes: + - `string[]` + - `{ urls: string[] }` + +First-order effect: + +- Prevents silent callback drops when plugin emits object-shaped payload. + +Second-order effect: + +- Directly addresses symptom: returns to app, remains signed out because URL was never parsed. + +Third-order risk: + +- Minimal; parser only accepts string URLs. + +## Test coverage added/updated + +- `src/pages/personal-server/index.test.tsx` + - fallback open path when external open returns `false` +- `src/hooks/use-deep-link.test.tsx` + - local-server-auth route behavior + - hash-recovery fallback when message-recovery fails + - object payload `{ urls: [...] }` for `onOpenUrl` + +Latest run during fix: + +- `npx vitest run src/hooks/use-deep-link.test.tsx src/pages/personal-server/index.test.tsx src/pages/settings/components/settings-personal-server.test.tsx` +- Result: passing + +## What to do now (operator runbook) + +1. Fully quit DataConnect (all processes), then relaunch. +2. Click `Sign in to start`. +3. Complete auth at account page (existing session is fine). +4. Trigger deep link back to app. +5. Verify Personal Server no longer renders signed-out branch. + +If still failing after cold restart: + +- add temporary debug logs in `use-deep-link.ts` for: + - raw `onOpenUrl` payload + - parsed params + - recovery path chosen/success + - `setAuthenticated` dispatch payload +- reproduce once +- patch exact failed hop only + +## Repro artifacts (persist these exact URLs) + +Use these exact URLs for future incident repro, so nobody has to retype them: + +- Outbound sign-in URL opened by `Sign in to start`: + - `https://account-dev.vana.org/connect?sessionId=local-server-auth&appName=DataConnect` +- Inbound deep-link URL clicked to return to DataConnect: + - `vana://connect?sessionId=local-server-auth&masterKeySig=0xa2ab6ef175269dfb1e761406d7b1605a91b2dca6a765f50f4c38094351cb01ad293a85f86fba2db29dba7d67bb7c4f0c91321db5d8ed973e37c8329318a4b9ca1c` + +## Postmortem addendum (why it "used to work") + +Observed failure mode after Personal Server extraction: + +- Runtime deep-link callback payload arrived as a single string URL. +- `use-deep-link.ts` only handled `string[]` and `{ urls: string[] }`, so the callback URL was dropped. +- Dropped callback means no `handleGrantParams`, no `setAuthenticated`, and UI remains signed out. + +What changed in fix: + +- Added payload normalization for: + - `string` + - `string[]` + - `{ url: string }` + - `{ urls: string[] }` + - nested `{ payload: ... }` +- Reused this normalizer for both: + - `onOpenUrl(...)` runtime deep links + - `getCurrent()` cold-start deep links + +Test that now guards this exact regression: + +- `src/hooks/use-deep-link.test.tsx` + - `handles onOpenUrl payload as a single URL string` + - This test failed before fix and passes after fix. + +## Ninth-attempt hardening (native forwarding) + +Observed in real runtime: + +- Browser returns via deep link, app focuses, but signed-out UI remains. +- This indicates deep link may not be reaching frontend listener reliably on + warm app instances (single-instance handoff path), even when callback URL is + valid. + +Hardening added: + +- `src-tauri/src/lib.rs` + - In `tauri_plugin_single_instance::init(...)`, explicitly parse intercepted + second-instance args for `vana://...` URLs and emit: + - `deep-link://new-url` with `Vec` payload. + - Existing window is still focused as before. +- Why: + - Removes dependence on implicit/automatic deep-link forwarding behavior. + - Forces a deterministic event into the exact frontend channel already used by + `@tauri-apps/plugin-deep-link` `onOpenUrl(...)`. + +Frontend observability added: + +- `src/hooks/use-deep-link.ts` now logs in `DEV`: + - `getCurrent` URLs + - raw `onOpenUrl` payload + - extracted URLs + - parsed grant params + - recovered wallet address from `masterKeySig` + +Verification note: + +- Rust change requires restarting Tauri app process (`tauri dev` restart or + rebuild/relaunch) to take effect. + +## Incident status (after nine attempts) + +### Current status + +- Not fully resolved in `tauri dev` runtime. +- Core user-visible symptom still occurs in dev: sign-in flow returns focus to + app but auth state remains signed out. +- This incident should be treated as **partially isolated**, not closed. + +### Primary conclusions (high confidence) + +1. **Auth hydration code path is not the first failing hop in failing repros.** + - In failing runs, frontend logs show no deep-link payload arrival: + - no `onOpenUrl payload` + - `getCurrent` and focus/visibility rechecks remain `[]` + - Therefore `setAuthenticated(...)` is never reached in those runs. + +2. **Deep-link URL is not reliably entering the dev process in failing runs.** + - Rust app log evidence (from `~/Library/Logs/dev.dataconnect/DataConnect.log`): + - `[DeepLink][single-instance] args=["/Applications/DataConnect.app/Contents/MacOS/dataconnect"]` + - expected `vana://...` URL is absent. + - This indicates single-instance handoff can occur without URL payload. + +3. **`main` branch comparison did not reveal a different deep-link architecture.** + - `origin/main` uses the same plugin-driven pattern (`getCurrent` + `onOpenUrl`) + and same local-server-auth routing intent. + - So this is not explained by a simple "settings tab vs standalone page" + frontend difference. + +4. **Environment/registration state is a likely contributing factor.** + - LaunchServices shows many `dev.dataconnect`/`vana` claims across historical + app locations. + - This can produce nondeterministic handler resolution during dev. + +### What was fixed during investigation (net positive) + +- Deep-link payload parsing is now resilient across multiple shapes. +- Additional deep-link instrumentation exists in both frontend and Rust. +- Repeated sign-in launches were guarded to prevent tab storms. + +### What remains unproven (must not be hand-waved) + +- Exact root cause of why URL payload is missing in some single-instance + handoffs (OS routing vs plugin behavior vs browser launch behavior). +- Whether installed app runtime behaves differently enough to avoid this issue. +- Why dev mode was previously reliable in this environment and is now not. + +### Working hypothesis for "used to work in dev" + +- Most likely: previously cleaner protocol-handler registration state (fewer + competing installs/claims), so deep links reached the active dev process more + consistently. +- This remains a hypothesis until validated with clean-room reproduction. + +### Immediate next step (operator) + +- Debug the exact flow in installed app runtime as planned. +- Capture the same evidence set: + - frontend deep-link logs + - `DataConnect.log` deep-link lines + - whether `vana://...` appears in startup/single-instance/run-event logs +- If installed app succeeds while dev fails, split dev/prod schemes/identifier + to eliminate handler collisions. + +## New decisive evidence (2026-03-05) + +- Verified by operator: flow works in installed production app `0.7.30`. +- Therefore: + - This is **not** a protocol/auth-logic blocker in shipped runtime. + - This is **dev-runtime deep-link delivery instability** (handler/routing + path) rather than core Personal Server sign-in logic. + +### Updated primary conclusion + +- The "signed out after return" failure observed during this investigation is + environment-specific to dev-mode callback delivery. +- Do not treat this as a release-blocking auth regression for `0.7.30` without + contrary production evidence. + +### Actionability after this evidence + +1. Keep production-path auth/deep-link logic stable. +2. Treat dev deep-link reliability as separate tooling/environment work. +3. If needed, implement explicit dev/prod protocol split to avoid LaunchServices + collisions (`vanadev://` for dev, `vana://` for release). + +## Scope guard + +To avoid destabilizing the PR: + +- Do not touch UI/layout/styles for this bug. +- Do not touch `usePersonalServer` runtime behavior for this bug. +- Constrain further changes to deep-link/auth hydration path unless evidence proves otherwise. diff --git a/docs/260306-personal-server-exit-state.md b/docs/260306-personal-server-exit-state.md new file mode 100644 index 00000000..618feaed --- /dev/null +++ b/docs/260306-personal-server-exit-state.md @@ -0,0 +1,31 @@ +## Personal Server exit state bug + +`usePersonalServer()` was leaving a stale shared port behind after the `personal-server-exited` event. + +### Symptom + +- Hook state could become `status: "stopped"` while `port` still held the last ready value, e.g. `8080`. +- The failing test that exposed it was `src/hooks/usePersonalServer.test.tsx`: + `sets status to stopped on graceful exit (not crash)`. + +### Root cause + +- The hook keeps both React state and module-level shared state. +- On `personal-server-ready`, both were updated with the active port. +- On `personal-server-exited`, React `port` was cleared, but `_sharedPort` was not. +- `_notifyAll()` then re-synced mounted hook instances from `_sharedPort`, restoring the stale port. + +### Why this matters + +- Consumers can treat `port` as a currently usable endpoint. +- A stopped server should not keep advertising a local port as active state. +- This creates internally inconsistent state: stopped process, non-null port. + +### Fix + +- Clear `_sharedPort` in the `personal-server-exited` handler before `_notifyAll()`. + +### Scope + +- This is a straightforward state-consistency bug fix, not a product-behavior change. +- The existing test contract was already describing the correct behavior. diff --git a/docs/260306-platform-logo-visual-continuity-notes.md b/docs/260306-platform-logo-visual-continuity-notes.md new file mode 100644 index 00000000..428337fe --- /dev/null +++ b/docs/260306-platform-logo-visual-continuity-notes.md @@ -0,0 +1,127 @@ +# Platform Logo Visual Continuity Notes + +## What the user actually cared about + +The problem was never "are we downloading the logo bytes again?" + +The problem was: + +- when the UI changes state or page +- the logo appears to blink or reload +- the visible experience looks bad + +That means the bar for success is visual continuity, not a technically correct story about HTTP caching. + +## What we learned + +- Browser/network cache and visual continuity are different problems. +- A cached image URL can still visibly blink when React mounts a fresh `` node. +- If the user still sees a transition artifact, then the problem is not solved. +- A placeholder tile is useful when the image paint is not seamless; it prevents empty whitespace. + +## Where the agent fucked up + +The agent treated a technical hypothesis as if it were the requirement: + +- "if the URL was already loaded once, later mounts should be seamless enough to hide the placeholder" + +That was an assumption, not a proven fact. + +The user had already agreed on the opposite policy: + +- keep the placeholder tile unless seamless visual continuity is actually achieved + +The agent then still implemented placeholder suppression based on loaded URL memory. Visually, that made things worse because the image was still repainting, so the user saw whitespace instead of a tile. + +That was a requirements failure: + +- the agent optimized for a technical model +- the user cared about the visible result +- the visible result regressed + +## Current state + +Current behavior is intentionally conservative: + +- image logos keep a muted placeholder tile +- SVG icons do not get an extra inner tile wrapper +- letter fallbacks keep their own foreground tile + +This does not solve visual continuity. It only avoids making the transition look worse. + +## Does hidden preloading in the layout solve it? + +Probably not by itself. + +Example idea: + +- mount a hidden block of common logos in the layout +- let them load once +- hope later visible logos appear instantly + +What this would help with: + +- warming bytes and maybe decode for predictable common logos +- making first visible use of a logo cheaper + +What it does not guarantee: + +- visual continuity across React remounts +- preserving the already-painted DOM/image node +- seamless swap during page/state transitions + +So this idea is not worthless, but it is not the core fix. It attacks fetch/decode readiness more than the visible remount problem. + +## Why the visible glitch still happens + +Even when the URL is cached: + +- React mounts a new `` +- the browser paints that new node +- the old painted node is gone +- the user can still see a blink or placeholder + +So the real enemy is not just fetch latency. It is losing the already-painted image during UI transitions. + +## Untested approach still worth trying + +If this is going to be solved visually, the most plausible route is: + +1. Keep showing the old painted logo. +2. Start loading the next logo off to the side. +3. Only swap the visible image once the next one has actually loaded. + +In practice that likely means a component that: + +- keeps `displayedSrc` separate from `requestedSrc` +- loads `requestedSrc` in a hidden/prepared `` or `Image()` object +- updates `displayedSrc` only after `onload` +- preserves the old visible image until the new one is ready + +This is a visual continuity strategy, not just a cache strategy. + +## Why this approach was not tried yet + +It is more invasive than changing placeholder classes or adding URL memory: + +- stateful image transition logic +- more moving parts inside `PlatformIcon` +- more opportunity for edge cases around errors and rapid prop changes + +But unlike the earlier attempts, it at least targets the actual requirement. + +## Practical rule going forward + +For remote logos: + +- do not claim success based on HTTP caching +- do not suppress placeholder UI based on assumptions +- only call it fixed if the transition is visually smoother in the browser + +## Decision note + +Until a real visual continuity solution is proven: + +- keep the placeholder tile +- avoid assumption-driven "smart" caching logic +- optimize for what the user can see, not what the network tab says diff --git a/docs/plans/260305-personal-server-standalone-page-decision.md b/docs/plans/260305-personal-server-standalone-page-decision.md new file mode 100644 index 00000000..8976268a --- /dev/null +++ b/docs/plans/260305-personal-server-standalone-page-decision.md @@ -0,0 +1,155 @@ +# 260305-personal-server-standalone-page-decision + +## Short version (read this first) + +### Decision + +Yes: extract Personal Server into its own route/page now. + +### Why (blunt) + +- Personal Server is core product surface (runtime + endpoint), not "preferences". +- Keeping it as a Settings tab hides a primary capability behind a secondary IA bucket. +- Current nav already treats Server as first-class, but route semantics still say "Settings"; that mismatch creates cognitive drag. +- This is a low-to-medium effort move with high clarity payoff. + +### What ships in v1 (minimal extraction) + +1. Add `ROUTES.personalServer = "/personal-server"`. +2. Add route/page that renders existing `SettingsPersonalServer` UI. +3. Remove Personal Server from Settings section nav and section switch. +4. Update links that point to `settings?section=personalServer` to `/personal-server`. +5. Add back-compat redirect: `/settings?section=personalServer` -> `/personal-server` (replace). +6. Fix tests that assume Personal Server is default Settings section. + +### What does NOT ship in v1 + +- No full Settings architecture rewrite. +- No renaming sweep of all shared components. +- No style/class redesign. + +### Risk + +- Small routing/test churn. +- Main regression risk is stale deep links; redirect removes that. + +### Bottom line + +Do the minimal extraction now. Cleanup can be phase 2. + +--- + +## Long version (full argument + execution contract) + +## Strategy Lock + +### Goal + +Make Personal Server a first-class route because it is a core runtime/data surface, while keeping implementation scope tight enough to ship quickly. + +### Scope + +- In scope: + - New standalone route/page for Personal Server. + - Remove Personal Server section from Settings page navigation/content switching. + - Update internal links and nav to new route. + - Preserve behavior and visuals of existing Personal Server UI. + - Add redirect for old settings query URL. + - Update route and settings tests. +- Out of scope: + - Rebuild Settings layout system. + - UI redesign. + - Broad component renames and code movement not required for extraction. + +### Invariants (must remain true) + +- Data invariants: + - Personal Server start/stop/sign-in flows behave exactly as before. + - Endpoint and data-location actions remain unchanged. +- State/lifecycle invariants: + - `usePersonalServer` remains the source of runtime state truth. + - No new runtime ownership introduced in the page component. +- Security/reliability invariants: + - No change to auth preconditions for start. + - Legacy deep links continue to function via redirect. + +### Approach + +- Chosen approach: + - Minimal extraction first (new route + wiring + redirect + tests). + - Defer cleanup to optional phase 2. +- Rejected alternatives: + - Keep everything in Settings because "single surface is simpler". + - Rejected because it is only codepath-simple, not product-model-simple. + - IA mismatch remains: top nav says "Server", URL says "Settings". + - Full refactor in one pass. + - Rejected because high churn for no immediate user value. + +### Replan triggers + +- Trigger 1: extraction breaks auth/runtime flow in manual or test verification. +- Trigger 2: additional route constraints discovered in desktop deep-link handling. + +## Technical pushback on "single Settings is simpler" + +### True part + +- One route can be simpler mechanically. + +### Missing part + +- IA and user intent are not simpler: + - "I want to check server health/start/endpoint" is operational intent. + - "I want to adjust preferences" is settings intent. + - Collapsing these can be simpler in code but noisier in user mental model. + +### Practical conclusion + +- For this product, Personal Server is not a niche preference panel. +- Treating it as first-class route is justified and aligned with how nav already positions it. + +## Execution Contract (minimal extraction) + +### Ordered implementation steps + +1. Add new route constant and route entry. +2. Create Personal Server page that reuses current Personal Server UI component. +3. Remove Settings section entry and content branch for Personal Server. +4. Update all known links from `buildSettingsUrl({ section: "personalServer" })` to `ROUTES.personalServer`. +5. Add redirect from `?section=personalServer` to new route. +6. Update tests for new default/behavior. + +### Mandatory file edit contract + +| File | Required change | Status | +| ---- | --------------- | ------ | +| `src/config/routes.ts` | add `personalServer` route | PENDING | +| `src/App.tsx` | register new route/page | PENDING | +| `src/pages/personal-server/index.tsx` | new page composition | PENDING | +| `src/pages/settings/index.tsx` | remove personal-server section branch | PENDING | +| `src/pages/settings/sections.ts` | remove personal-server meta/order | PENDING | +| `src/pages/settings/types.ts` | remove `personalServer` section union | PENDING | +| `src/pages/settings/url.ts` | new default section + optional compatibility handling | PENDING | +| `src/components/navigation/top-nav.tsx` | server nav link -> `ROUTES.personalServer` | PENDING | +| `src/pages/home/components/connected-sources-list.tsx` | onboarding link -> `ROUTES.personalServer` | PENDING | +| `src/pages/settings/index.test.tsx` | adjust default/fallback expectations | PENDING | +| `src/pages/personal-server/index.test.tsx` | add coverage for standalone route/page | PENDING | + +### Verification commands + +```bash +rg -n "section: \"personalServer\"|\\?section=personalServer|\"personalServer\"" src +pnpm test src/pages/settings/index.test.tsx src/pages/settings/components/settings-personal-server.test.tsx +pnpm test src/pages/personal-server/index.test.tsx +``` + +### Gates + +- [ ] Navigation routes to standalone page +- [ ] Legacy `settings?section=personalServer` lands on standalone page +- [ ] Personal Server actions behave unchanged +- [ ] Updated tests pass + +## Recommendation + +Approve and execute minimal extraction now, then decide if cleanup phase is worth it after merge. diff --git a/docs/plans/260306-apps-page-tabs-plan.md b/docs/plans/260306-apps-page-tabs-plan.md new file mode 100644 index 00000000..532d5b3a --- /dev/null +++ b/docs/plans/260306-apps-page-tabs-plan.md @@ -0,0 +1,87 @@ +# 260306-apps-page-tabs-plan + +## Strategy Lock + +### Goal + +Make `/apps` the canonical app hub by moving the current Home tab pattern onto the `Data Apps` page, with `Discover` as the default/first tab and `Connected` as the second tab. + +### Scope + +- In scope: + - Reuse the existing Home tab system/pattern on `src/pages/data-apps/index.tsx`. + - Show `Discover` first, `Connected` second. + - Move the connected-apps surface out of Home and into the `Apps` page. + - Keep `Discover` as the current registry-backed app catalog plus the "Add your app here" CTA. + - Keep `Connected` as the current list of apps the user has connected with. + - Add URL-backed tab state for `/apps`. + - Update focused tests and page docs. +- Out of scope: + - Redesigning the tab visual language. + - Reworking connected-app permissions/settings behavior. + - New filtering/sorting/search for apps. + - Adding a new Home preview unless the page feels obviously broken after removal. + +### Invariants + +- `Apps` nav remains the canonical place for app inventory. +- `Discover` remains the default first-view tab. +- `Connected` continues to open apps and link to app permission management exactly as it does now. +- Home should no longer be the primary place to find connected apps. +- Invalid or missing tab query params fall back to `discover`. + +### Approach + +- Reuse the current Home stack: + - `Tabs` + - `SlidingTabs` + - existing motion behavior +- Move the tab shell to `src/pages/data-apps/index.tsx`. +- Keep `ConnectedAppsList`, but stop treating it as a Home-owned concept: + - either move it into `src/pages/data-apps/components/` + - or wrap it in an apps-page-local panel component and rename later if needed +- Put tab state in the URL, e.g. `?tab=discover|connected`. +- Simplify Home by removing the current `Connected apps` tab/surface. + +### Ordered implementation steps + +1. Extract the Home tab pattern needed by `/apps`. +2. Add query-param-backed tab parsing/writing for `/apps`, defaulting to `discover`. +3. Convert `src/pages/data-apps/index.tsx` into a two-tab page shell. +4. Move the current catalog grid into the `Discover` tab. +5. Move the connected apps list into the `Connected` tab. +6. Remove the connected-apps tab from Home and keep Home focused on data/import surfaces. +7. Update tests for: + - default tab + - tab switching + - invalid tab fallback + - Home no longer owning the connected-apps tab +8. Update local page docs/README if needed. + +### Expected file touch set + +- `src/pages/data-apps/index.tsx` +- `src/pages/data-apps/index.test.tsx` +- `src/pages/data-apps/components/*` +- `src/pages/home/index.tsx` +- `src/pages/home/components/connected-apps-list.tsx` or moved equivalent +- `src/pages/data-apps/README.md` + +### Risks + +- Home and Apps can become semantically muddled if both keep full connected-app surfaces. +- Query-param tab state can get noisy if it collides with existing debug params. +- Moving the component without renaming may leave misleading Home-specific naming/comments behind. + +### Done criteria + +1. `/apps` opens on `Discover`. +2. `/apps?tab=connected` renders connected apps. +3. Invalid tab values fall back to `Discover`. +4. Home no longer contains the full connected-apps tab surface. +5. Existing open/manage-access behavior for connected apps is preserved. + +### Unresolved questions + +- Should Home keep a tiny apps preview/CTA after the move, or nothing app-related at all? +- Do we want to rename `ConnectedAppsList` in the same change, or only relocate it? diff --git a/docs/plans/260306-data-app-ecosystem-ingest-plan.md b/docs/plans/260306-data-app-ecosystem-ingest-plan.md new file mode 100644 index 00000000..726d3a3c --- /dev/null +++ b/docs/plans/260306-data-app-ecosystem-ingest-plan.md @@ -0,0 +1,135 @@ +# 260306-data-app-ecosystem-ingest-plan + +Use this template as a one doc in two modes: + +- Start with Strategy Lock only. +- Don't implement until lock is stable. +- Then continue in the same file into Execution Contract. +- If strategy changes later, update Strategy delta section (same file). + +## Strategy Lock (decide before implementation) + +### Goal + +Move app-submission content out of `docs/`, ingest same-repo markdown submissions into the app registry with `gray-matter`, and replace the placeholder card flow on `/apps` with a real card component driven by registry data. + +### Scope + +- In scope: + - Move the submission guide and template to an `ecosystem/` directory. + - Add markdown submission ingestion via `import.meta.glob()` + `gray-matter` + `zod`. + - Feed submission markdown into `src/apps/registry.ts`. + - Replace the current placeholder app-card path with a new `AppCard` based on the existing page JSX shell. + - Update focused tests and page docs. +- Out of scope: + - Separate catalog repo. + - Moderation workflows beyond merge == approval. + - GitHub Actions or deploy-preview automation. + +### Invariants (must remain true) + +- Data invariants: + - Merged markdown submissions are valid `AppRegistryEntry` values or fail fast. + - `_template.md` must never render as an app. +- State/lifecycle invariants: + - Local preview of an unmerged submission must work by adding/editing a local markdown file and running the app. + - The existing external app-open flow keeps using canonical grant params. +- Security/reliability invariants: + - Invalid merged submission metadata must fail loudly during app startup/build rather than silently rendering bad data. + - The GitHub submission flow remains repo-local and low-surface-area. + +### Dependencies + +List external dependencies and classify each: + +| Dependency | Status (`HARD BLOCKED`/`SOFT BLOCKED`/`UNBLOCKED`) | Owner | Target date | Notes | +| ---------- | -------------------------------------------------- | ----- | ----------- | ----- | +| `gray-matter` | `UNBLOCKED` | agent | 2026-03-06 | Needed for markdown frontmatter parsing. | +| Vite `import.meta.glob` raw imports | `UNBLOCKED` | repo | 2026-03-06 | Build-time ingestion path for local markdown files. | +| Existing `zod` dependency | `UNBLOCKED` | repo | 2026-03-06 | Validate frontmatter into registry shape. | + +### Approach + +- Chosen approach: + - Use `ecosystem/app-submissions/*.md` as the contributor-facing intake surface. + - Parse those markdown files at build time with `import.meta.glob(..., { eager: true, query: "?raw" })`. + - Validate frontmatter with `zod` and map it into `AppRegistryEntry`. + - Keep hardcoded curated entries for now and append markdown-driven entries. + - Move one real app (`rickroll`) into markdown so the ingest path is exercised end-to-end immediately. + - Replace the current app card component with a new card that reuses the existing `/apps` placeholder-card visual structure. +- Rejected alternatives (and why): + - Generate a registry file with a separate script: more moving parts than needed right now. + - Keep submission content in `docs/`: wrong audience boundary. + - Keep the existing `AppCard`: user explicitly rejected the current design direction. + +### Replan triggers + +- Trigger 1: Vite raw markdown ingestion proves unreliable in tests or production builds. +- Trigger 2: Submission metadata grows enough that markdown frontmatter becomes too awkward to maintain. + +## Execution Contract (mechanical handoff) + +### Ordered implementation steps + +1. Add the new docket and install `gray-matter`. +2. Move submission guide/template into `ecosystem/` and update links/PR template paths. +3. Add markdown-ingest registry code and a real sample submission file. +4. Replace the page placeholder app-card path with the new `AppCard`. +5. Update focused tests, run them, and record the results here. + +### Mandatory file edit contract + +| File | Required change | Status (`PASS`/`NO-OP`/`FAIL`) | Evidence | +| ---- | --------------- | ------------------------------ | -------- | +| `docs/plans/260306-data-app-ecosystem-ingest-plan.md` | Record strategy, execution steps, and verification evidence | `PASS` | This docket is the execution ledger. | +| `package.json` | Add `gray-matter` dependency | `PASS` | Installed `gray-matter` via `npm install gray-matter` and updated lockfile. | +| `src/config/links.ts` | Point submission guide link at `ecosystem/` path | `PASS` | `LINKS.appSubmissionGuide` now targets `ecosystem/submit-data-app.md` on GitHub. | +| `ecosystem/submit-data-app.md` | Add ecosystem submission guide with local preview instructions | `PASS` | Guide now explains local preview via `npm run dev` and the repo-local GitHub flow. | +| `ecosystem/app-submissions/_template.md` | Add frontmatter-based submission template | `PASS` | Added machine-readable frontmatter plus freeform markdown notes. | +| `ecosystem/app-submissions/rickroll.md` | Add one real markdown-driven submission entry | `PASS` | Added `rickroll.md` as the live reference submission for end-to-end ingest. | +| `.github/PULL_REQUEST_TEMPLATE/data-app-submission.md` | Update checklist/paths to `ecosystem/` | `PASS` | PR checklist now points contributors at `ecosystem/app-submissions/`. | +| `src/apps/registry.ts` | Merge curated entries with markdown-driven entries | `PASS` | Registry now combines curated entries with `getSubmittedAppRegistryEntries()` and rejects duplicate ids. | +| `src/apps/submission-registry.ts` | Parse and validate markdown submissions | `PASS` | Added `gray-matter` + `zod` parsing with `_template.md` exclusion. | +| `src/pages/data-apps/components/AppCard.tsx` | Replace card implementation with one based on current page JSX | `PASS` | Rebuilt `AppCard` using the placeholder-card shell and footer treatment from the page. | +| `src/pages/data-apps/index.tsx` | Render real app cards instead of placeholder filler cards | `PASS` | Page now renders the builder CTA plus registry-backed cards via `AppCard`. | +| `src/pages/data-apps/index.test.tsx` | Update page test coverage for real registry-backed cards | `PASS` | Added assertions for registry-backed cards and updated link assertions for the ecosystem guide. | +| `src/apps/submission-registry.test.ts` | Add focused parsing tests | `PASS` | Added tests for valid parsing, template exclusion, and live-app validation failure. | +| `src/pages/data-apps/README.md` | Update page docs for ecosystem submissions + registry ingest | `PASS` | README now documents the ingest path and local-preview behavior. | + +Rules: + +- `PASS`: required change implemented. +- `NO-OP`: verified no matching change needed at execution time. +- `FAIL`: required change missing/unclear. + +### Verification commands + +List exact commands (not paraphrases): + +```bash +npx vitest run src/apps/submission-registry.test.ts src/pages/data-apps/index.test.tsx +``` + +### Gate checklist (all required) + +- [x] Code-path gates passed +- [x] Behavior/runtime gates passed +- [x] Build/test/lint gates passed +- [x] CI/release gates passed (if applicable) +- [x] Fresh-clone gate passed (if applicable) + +### PR evidence table + +| Gate | Command/evidence | Expected | Actual summary | Status | +| ---- | ---------------- | -------- | -------------- | ------ | +| Focused ingest + page tests | `npx vitest run src/apps/submission-registry.test.ts src/pages/data-apps/index.test.tsx` | Passes with markdown ingestion and page rendering assertions | Passed: `9` tests green across ingest parsing and `/apps` page rendering | `PASS` | + +### Done criteria + +1. No `FAIL` rows in file contract or gate table. +2. All required gates are `PASS`. +3. Scope boundaries remained intact (or strategy delta recorded). + +### Strategy delta (only if needed) + +No strategy delta yet. diff --git a/docs/plans/260306-data-app-github-submission-flow-plan.md b/docs/plans/260306-data-app-github-submission-flow-plan.md new file mode 100644 index 00000000..e0bab06d --- /dev/null +++ b/docs/plans/260306-data-app-github-submission-flow-plan.md @@ -0,0 +1,127 @@ +# 260306-data-app-github-submission-flow-plan + +Use this template as a one doc in two modes: + +- Start with Strategy Lock only. +- Don't implement until lock is stable. +- Then continue in the same file into Execution Contract. +- If strategy changes later, update Strategy delta section (same file). + +## Strategy Lock (decide before implementation) + +### Goal + +Replace the `Data Apps` page email submission CTA with a GitHub-native submission flow that feels more OSS-native for technical builders while preserving a low-friction fallback path. + +### Scope + +- In scope: + - Replace the page CTA target and copy in `src/pages/data-apps/index.tsx`. + - Add a GitHub submission guide doc. + - Add a reusable markdown submission template for contributors. + - Add a dedicated PR template for app submissions. + - Update focused tests and local page docs. +- Out of scope: + - Rendering live app submissions from repository content. + - Any moderation/review automation. + - Any GitHub Actions or CI automation around submissions. + - Removing the email fallback entirely. + +### Invariants (must remain true) + +- Data invariants: + - No existing app listing data shape is changed. + - No new runtime data dependency is introduced for the page. +- State/lifecycle invariants: + - The page remains static and client-light. + - External navigation still uses the existing external-link pattern. +- Security/reliability invariants: + - The submission flow must work for users without repo write access by relying on standard fork + PR behavior. + - The flow must have a documented non-GitHub fallback. + +### Dependencies + +List external dependencies and classify each: + +| Dependency | Status (`HARD BLOCKED`/`SOFT BLOCKED`/`UNBLOCKED`) | Owner | Target date | Notes | +| ---------- | -------------------------------------------------- | ----- | ----------- | ----- | +| GitHub new-file URL flow | `UNBLOCKED` | agent | 2026-03-06 | Use documented `new/?filename=...&value=...` browser-editor pattern. | +| GitHub PR template support | `UNBLOCKED` | agent | 2026-03-06 | Use `.github/PULL_REQUEST_TEMPLATE/data-app-submission.md`. | +| Existing email fallback | `UNBLOCKED` | repo | 2026-03-06 | Keep as fallback in docs; do not remove current mailto config. | + +### Approach + +- Chosen approach: + - Point the page CTA at a repo-hosted submission guide on GitHub. + - The guide explains the fork/edit/PR flow and offers a one-click "create submission file" GitHub link. + - Store submission intake as markdown docs under `docs/app-submissions/` to keep contribution UX GitHub-friendly without pretending the app consumes those files yet. + - Add a dedicated PR template so submission PRs use a structured review surface. +- Rejected alternatives (and why): + - Direct page CTA to a raw PR URL: GitHub cannot create a usable PR until the contributor has a branch/fork with changes. + - Require editing runtime registry/app code directly: worse contributor UX and couples intake to product code too early. + - Replace everything with a GitHub issue form: less aligned with the requested OSS/PR-based workflow. + +### Replan triggers + +- Trigger 1: GitHub's new-file prefill flow proves unreliable enough to confuse contributors. +- Trigger 2: The team decides submissions should live in a separate catalog repo instead of this app repo. + +## Execution Contract (mechanical handoff) + +### Ordered implementation steps + +1. Add the docketed docs and templates for the GitHub submission flow. +2. Wire the `Data Apps` CTA to the GitHub submission guide. +3. Update focused tests and page-local docs. +4. Run the scoped page test and record results here. + +### Mandatory file edit contract + +| File | Required change | Status (`PASS`/`NO-OP`/`FAIL`) | Evidence | +| ---- | --------------- | ------------------------------ | -------- | +| `docs/plans/260306-data-app-github-submission-flow-plan.md` | Record strategy, execution steps, and verification evidence | `PASS` | This docket captures both plan and execution evidence. | +| `src/config/links.ts` | Add GitHub submission guide link while preserving email fallback link | `PASS` | Added `LINKS.appSubmissionGuide`; kept `LINKS.appSubmissionEmail` unchanged for fallback use. | +| `src/pages/data-apps/index.tsx` | Replace email CTA target/copy with GitHub submission CTA | `PASS` | Header CTA now points to `LINKS.appSubmissionGuide` with copy `Submit via GitHub`. | +| `src/pages/data-apps/index.test.tsx` | Add/update coverage for the new submission link contract | `PASS` | Added a focused assertion for the GitHub submission link and updated stale protocol-link assertions. | +| `src/pages/data-apps/README.md` | Update page docs to reflect GitHub submission flow | `PASS` | README now documents the GitHub submission flow and notes that submissions are not runtime-driven yet. | +| `docs/submit-data-app.md` | Add contributor-facing submission guide | `PASS` | Added a guide with one-click GitHub editor link, manual flow, review criteria, and email fallback. | +| `docs/app-submissions/_template.md` | Add reusable markdown submission template | `PASS` | Added the reusable submission intake template under `docs/app-submissions/`. | +| `.github/PULL_REQUEST_TEMPLATE/data-app-submission.md` | Add dedicated app-submission PR template | `PASS` | Added dedicated PR checklist and submission fields for app submissions. | + +Rules: + +- `PASS`: required change implemented. +- `NO-OP`: verified no matching change needed at execution time. +- `FAIL`: required change missing/unclear. + +### Verification commands + +List exact commands (not paraphrases): + +```bash +npx vitest run src/pages/data-apps/index.test.tsx +``` + +### Gate checklist (all required) + +- [x] Code-path gates passed +- [x] Behavior/runtime gates passed +- [x] Build/test/lint gates passed +- [x] CI/release gates passed (if applicable) +- [x] Fresh-clone gate passed (if applicable) + +### PR evidence table + +| Gate | Command/evidence | Expected | Actual summary | Status | +| ---- | ---------------- | -------- | -------------- | ------ | +| Data Apps scoped test | `npx vitest run src/pages/data-apps/index.test.tsx` | Passes with updated CTA assertions | Passed: `5` tests green in `src/pages/data-apps/index.test.tsx` | `PASS` | + +### Done criteria + +1. No `FAIL` rows in file contract or gate table. +2. All required gates are `PASS`. +3. Scope boundaries remained intact (or strategy delta recorded). + +### Strategy delta (only if needed) + +No strategy delta yet. diff --git a/ecosystem/app-submissions/_template.md b/ecosystem/app-submissions/_template.md new file mode 100644 index 00000000..0c65665e --- /dev/null +++ b/ecosystem/app-submissions/_template.md @@ -0,0 +1,26 @@ +--- +id: your-app-slug +name: Your App Name +status: live +externalUrl: https://example.com +icon: Y +iconUrl: https://example.com/icon.svg +description: One-line description for the app card. +category: Assistant +scopes: + - chatgpt.conversations +--- + +Optional reviewer notes below. Delete this section if you do not need it. + +- `icon` is the fallback letter tile. +- `iconUrl` is optional. If omitted, DataConnect tries `/icon.svg`, `/icon.png`, `/favicon.ico`, and `/apple-touch-icon.png` from `externalUrl`. +- `iconUrl` must use `https://` if you provide it. +- `externalUrl` must be a production `https://` URL. + +- Builder: +- Contact: +- Repo: +- Demo URL: +- Screenshots: +- Notes: diff --git a/ecosystem/app-submissions/linkedin-readcv.md b/ecosystem/app-submissions/linkedin-readcv.md new file mode 100644 index 00000000..df896735 --- /dev/null +++ b/ecosystem/app-submissions/linkedin-readcv.md @@ -0,0 +1,27 @@ +--- +id: linkedin-readcv +name: LinkedIn to ReadCV +status: live +externalUrl: https://linkedin-to-readcv.vercel.app/ +icon: L +iconUrl: https://linkedin-to-readcv.vercel.app/icon.svg?icon.57c7b5ca.svg +description: Format your LinkedIn into a ReadCV-style one-page site you own. +category: Resume +scopes: + - linkedin.profile +--- + +## Builder + +- Name: +- Contact: +- Repo: + +## Demo + +- Demo URL: https://www.loom.com/share/a0bc86de160943c8a343cdb5d23d16e3 +- Screenshots: + +## Notes + +- Quick app that formats LinkedIn into a ReadCV-style one-pager. diff --git a/ecosystem/app-submissions/peak-think.md b/ecosystem/app-submissions/peak-think.md new file mode 100644 index 00000000..822baed4 --- /dev/null +++ b/ecosystem/app-submissions/peak-think.md @@ -0,0 +1,27 @@ +--- +id: peak-think +name: Peak Think +status: live +externalUrl: https://peak-think.vercel.app/ +icon: P +description: Correlate Oura Ring sleep patterns with your ChatGPT conversations. +category: Health +scopes: + - oura.readiness + - chatgpt.conversations +--- + +## Builder + +- Name: +- Contact: +- Repo: + +## Demo + +- Demo URL: +- Screenshots: + +## Notes + +- Correlates Oura Ring sleep patterns with ChatGPT conversations. diff --git a/ecosystem/submit-data-app.md b/ecosystem/submit-data-app.md new file mode 100644 index 00000000..85c34136 --- /dev/null +++ b/ecosystem/submit-data-app.md @@ -0,0 +1,97 @@ +# Submit a Data App + +Use GitHub so the submission itself is reviewable, linkable, and easy to preview locally before merge. + +## What actually matters + +- Only the frontmatter is machine-read. +- Anything below the closing `---` is optional reviewer context. +- If you do not need extra context, you can submit frontmatter only. + +## How listing works + +- A merged markdown file in `ecosystem/app-submissions/` is treated as approved. +- The app registry ingests those markdown files directly at build time. +- That means a local, unmerged markdown file will also show up in local preview. +- Invalid submission frontmatter should fail local preview/build so problems are fixed before merge. + +## Preview before opening a PR + +1. Create or edit a file in `ecosystem/app-submissions/`. +2. Run `npm run dev`. +3. Open `/apps`. +4. Confirm your app card renders correctly before you push anything. + +This works pre-merge because Vite loads local submission markdown files directly from the repo. + +## Preferred GitHub flow + +1. Open the [one-click submission editor](https://github.com/vana-com/data-connect/new/main?filename=ecosystem%2Fapp-submissions%2Fyour-app-slug.md&value=---%0Aid%3A%20your-app-slug%0Aname%3A%20Your%20App%20Name%0Astatus%3A%20live%0AexternalUrl%3A%20https%3A%2F%2Fexample.com%0Aicon%3A%20Y%0Adescription%3A%20One-line%20description%20for%20the%20app%20card.%0Acategory%3A%20Assistant%0Ascopes%3A%0A%20%20-%20chatgpt.conversations%0A---%0A%0A##%20Builder%0A%0A-%20Name%3A%0A-%20Contact%3A%0A-%20Repo%3A%0A%0A##%20Demo%0A%0A-%20Demo%20URL%3A%0A-%20Screenshots%3A%0A%0A##%20Notes%0A%0A-%20Anything%20reviewers%20should%20know%3A%0A). +2. If GitHub asks you to fork the repo first, do that. +3. Fill out the frontmatter. +4. If you want, add optional reviewer notes below the closing `---`. +5. Commit the new file. +6. Open a pull request back to `vana-com/data-connect`. +7. Use the `data-app-submission.md` PR template if GitHub asks you to choose a template. + +## Manual flow + +1. Copy [`ecosystem/app-submissions/_template.md`](./app-submissions/_template.md). +2. Create `ecosystem/app-submissions/.md`. +3. Open a pull request with that file. + +## Required frontmatter + +For `live` apps: + +- `id` +- `name` +- `status: live` +- `icon` +- `iconUrl` (optional, `https://` only) +- `description` +- `category` +- `externalUrl` (`https://` only) +- `scopes` + +For `coming-soon` apps: + +- `id` +- `name` +- `status: coming-soon` +- `icon` +- `iconUrl` (optional, `https://` only) +- `description` +- `category` + +`icon` is the fallback letter tile. If you already know the exact website icon URL, include `iconUrl`. +If you omit it, DataConnect tries `/icon.svg`, `/icon.png`, `/favicon.ico`, and `/apple-touch-icon.png` from `externalUrl`. +`iconUrl` must also be `https://` if you provide it. +`externalUrl` must be a production `https://` URL. No `http://`, localhost, or custom URI schemes. + +## Where to get scopes + +You have probably already seen this while building the app, usually via the starter and connector metadata. This is just the refresh. + +- Registry: [vana-com/data-connectors `registry.json`](https://raw.githubusercontent.com/vana-com/data-connectors/main/registry.json) +- Repo: [vana-com/data-connectors](https://github.com/vana-com/data-connectors) + +Here's how to get the exact scopes you used in your app: + +1. Open `registry.json`. +2. Find the connector you use. +3. Copy its `files.metadata` path. +4. Open that JSON file in the connectors repo. +5. Copy the scope names from that connector metadata into your submission. + +Example: + +- `linkedin-playwright` -> `linkedin/linkedin-playwright.json` +- `chatgpt-playwright` -> `openai/chatgpt-playwright.json` +- `oura` connector metadata should make the exact Oura scope obvious the same way. + +Use the actual protocol-style scope strings from connector metadata, like `chatgpt.conversations` or `linkedin.profile`. + +## Fallback + +If GitHub is a blocker, email [callum+apps@opendatalabs.xyz](mailto:callum+apps@opendatalabs.xyz) with the same information. diff --git a/skills-lock.json b/skills-lock.json new file mode 100644 index 00000000..8f5f62ad --- /dev/null +++ b/skills-lock.json @@ -0,0 +1,10 @@ +{ + "version": 1, + "skills": { + "skill-creator": { + "source": "anthropics/skills", + "sourceType": "github", + "computedHash": "9b03bb78ec5c81c4e0546dbb78cfc970368c72dcae5482e8c59690175abbc8e7" + } + } +} diff --git a/src/App.tsx b/src/App.tsx index ab44cc2a..afa00b73 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,6 +22,9 @@ const Home = lazy(() => import("./pages/home").then(m => ({ default: m.Home }))) const DataApps = lazy(() => import("./pages/data-apps").then(m => ({ default: m.DataApps })) ) +const PersonalServer = lazy(() => + import("./pages/personal-server").then(m => ({ default: m.PersonalServer })) +) const Mcp = lazy(() => import("./pages/mcp").then(m => ({ default: m.Mcp }))) const Docs = lazy(() => import("./pages/docs").then(m => ({ default: m.Docs }))) const SourceOverview = lazy(() => @@ -57,6 +60,10 @@ function AppContent() { } /> } /> } /> + } + /> } /> } /> } /> diff --git a/src/apps/external-url.test.ts b/src/apps/external-url.test.ts new file mode 100644 index 00000000..a75c4f07 --- /dev/null +++ b/src/apps/external-url.test.ts @@ -0,0 +1,28 @@ +import { describe, expect, it } from "vitest" +import { + isAllowedSubmittedAppExternalUrl, + parseSubmittedAppExternalUrl, +} from "./external-url" + +describe("submitted app external urls", () => { + it("accepts https urls", () => { + expect(isAllowedSubmittedAppExternalUrl("https://example.com")).toBe(true) + }) + + it("rejects http urls", () => { + expect(isAllowedSubmittedAppExternalUrl("http://localhost:3000")).toBe(false) + expect(isAllowedSubmittedAppExternalUrl("http://example.com")).toBe(false) + }) + + it("rejects custom uri schemes", () => { + expect(isAllowedSubmittedAppExternalUrl("mailto:test@example.com")).toBe(false) + expect(isAllowedSubmittedAppExternalUrl("vscode://file/test")).toBe(false) + expect(isAllowedSubmittedAppExternalUrl("file:///tmp/test")).toBe(false) + }) + + it("throws when parsing a disallowed url", () => { + expect(() => parseSubmittedAppExternalUrl("http://example.com")).toThrow( + /https:\/\//i + ) + }) +}) diff --git a/src/apps/external-url.ts b/src/apps/external-url.ts new file mode 100644 index 00000000..c3d84da1 --- /dev/null +++ b/src/apps/external-url.ts @@ -0,0 +1,27 @@ +import { openExternalUrl } from "@/lib/open-resource" + +export function isAllowedSubmittedAppExternalUrl(value: string): boolean { + try { + return new URL(value).protocol === "https:" + } catch { + return false + } +} + +export function parseSubmittedAppExternalUrl(value: string): URL { + if (!isAllowedSubmittedAppExternalUrl(value)) { + throw new Error("App submission externalUrl must use https://.") + } + + return new URL(value) +} + +export async function openSubmittedAppExternalUrl(url: string | URL) { + // TODO: If callers start passing arbitrary URL objects here, re-validate the + // URL branch too so this helper remains a hard trust boundary instead of just + // a convenience wrapper around prior validation. + const parsedUrl = + typeof url === "string" ? parseSubmittedAppExternalUrl(url) : url + + return openExternalUrl(parsedUrl.toString()) +} diff --git a/src/apps/icon-url.test.ts b/src/apps/icon-url.test.ts new file mode 100644 index 00000000..8b58f087 --- /dev/null +++ b/src/apps/icon-url.test.ts @@ -0,0 +1,31 @@ +import { describe, expect, it } from "vitest" +import { deriveIconUrls } from "./icon-url" + +describe("deriveIconUrls", () => { + it("derives stable icon paths from the app url", () => { + expect(deriveIconUrls("https://example.com/app")).toEqual([ + "https://example.com/icon.svg", + "https://example.com/icon.png", + "https://example.com/favicon.ico", + "https://example.com/apple-touch-icon.png", + ]) + }) + + it("prepends an explicit iconUrl override", () => { + expect( + deriveIconUrls("https://example.com/app", "https://cdn.example.com/icon.png") + ).toEqual([ + "https://cdn.example.com/icon.png", + "https://example.com/icon.svg", + "https://example.com/icon.png", + "https://example.com/favicon.ico", + "https://example.com/apple-touch-icon.png", + ]) + }) + + it("returns only the explicit icon url when appUrl is invalid", () => { + expect(deriveIconUrls("not a url", "https://cdn.example.com/icon.png")).toEqual([ + "https://cdn.example.com/icon.png", + ]) + }) +}) diff --git a/src/apps/icon-url.ts b/src/apps/icon-url.ts new file mode 100644 index 00000000..a169765b --- /dev/null +++ b/src/apps/icon-url.ts @@ -0,0 +1,28 @@ +const DEFAULT_ICON_PATHS = [ + "/icon.svg", + "/icon.png", + "/favicon.ico", + "/apple-touch-icon.png", +] as const + +export function deriveIconUrls(appUrl: string | null, iconUrl?: string): string[] { + const candidates = new Set() + + if (iconUrl?.trim()) { + candidates.add(iconUrl.trim()) + } + + if (!appUrl) { + return Array.from(candidates) + } + + try { + for (const path of DEFAULT_ICON_PATHS) { + candidates.add(new URL(path, appUrl).toString()) + } + } catch { + return Array.from(candidates) + } + + return Array.from(candidates) +} diff --git a/src/apps/registry-types.ts b/src/apps/registry-types.ts new file mode 100644 index 00000000..ffd32f4e --- /dev/null +++ b/src/apps/registry-types.ts @@ -0,0 +1,23 @@ +export type BaseAppRegistryEntry = { + id: string + name: string + icon: string + iconUrl?: string + description: string + category: string + dataRequired: string[] + scopes?: string[] +} + +export type LiveAppRegistryEntry = BaseAppRegistryEntry & { + status: "live" + externalUrl: string + scopes: string[] +} + +export type ComingSoonAppRegistryEntry = BaseAppRegistryEntry & { + status: "coming-soon" + externalUrl?: never +} + +export type AppRegistryEntry = LiveAppRegistryEntry | ComingSoonAppRegistryEntry diff --git a/src/apps/registry.ts b/src/apps/registry.ts index 1de5e7e9..9b62ba3c 100644 --- a/src/apps/registry.ts +++ b/src/apps/registry.ts @@ -1,99 +1,26 @@ -type BaseAppRegistryEntry = { - id: string - name: string - icon: string - description: string - category: string - dataRequired: string[] - scopes?: string[] -} +import type { AppRegistryEntry } from "./registry-types" +import { getSubmittedAppRegistryEntries } from "./submission-registry" -type LiveAppRegistryEntry = BaseAppRegistryEntry & { - status: "live" - externalUrl: string - scopes: string[] -} +export type { AppRegistryEntry } from "./registry-types" -type ComingSoonAppRegistryEntry = BaseAppRegistryEntry & { - status: "coming-soon" - externalUrl?: never -} +const APP_REGISTRY_LIST: AppRegistryEntry[] = getSubmittedAppRegistryEntries() -export type AppRegistryEntry = LiveAppRegistryEntry | ComingSoonAppRegistryEntry +const APP_REGISTRY = createAppRegistry(APP_REGISTRY_LIST) -const APP_REGISTRY_LIST: AppRegistryEntry[] = [ - { - id: "rickroll", - name: "RickRoll", - description: "Discover fun facts from your ChatGPT conversations", - icon: "R", - category: "Demo", - status: "live", - externalUrl: "https://rickroll.vana.com", - dataRequired: ["ChatGPT"], - scopes: ["read:chatgpt-conversations"], - }, - { - id: "vana-trainer", - name: "Vana Trainer", - description: "Train AI models on your personal data", - icon: "🤖", - category: "AI Training", - status: "coming-soon", - dataRequired: ["ChatGPT", "Reddit", "Twitter"], - }, - { - id: "data-broker", - name: "Data Marketplace", - description: "Sell access to your data securely", - icon: "💎", - category: "Marketplace", - status: "coming-soon", - dataRequired: ["Any"], - }, - { - id: "personal-assistant", - name: "Personal AI Assistant", - description: "Get personalized insights from your data", - icon: "🧠", - category: "Productivity", - status: "coming-soon", - dataRequired: ["Gmail", "Calendar", "Notion"], - }, - { - id: "social-analyzer", - name: "Social Insights", - description: "Analyze your social media presence", - icon: "📊", - category: "Analytics", - status: "coming-soon", - dataRequired: ["Twitter", "LinkedIn", "Reddit"], - }, - { - id: "health-tracker", - name: "Health Data Sync", - description: "Aggregate and analyze health metrics", - icon: "❤️", - category: "Health", - status: "coming-soon", - dataRequired: ["Fitbit", "Apple Health"], - }, - { - id: "content-creator", - name: "Content Vault", - description: "Organize and monetize your content", - icon: "📁", - category: "Media", - status: "coming-soon", - dataRequired: ["YouTube", "Instagram", "TikTok"], - }, -] +function createAppRegistry( + entries: AppRegistryEntry[] +): Record { + const registryEntries = entries.map(entry => [entry.id, entry] as const) + const uniqueIds = new Set(registryEntries.map(([id]) => id)) -const APP_REGISTRY: Record = Object.fromEntries( - APP_REGISTRY_LIST.map(entry => [entry.id, entry]) -) + if (uniqueIds.size !== registryEntries.length) { + throw new Error( + "Duplicate app registry ids found while building the app registry." + ) + } -export const DEFAULT_APP_ID = "rickroll" + return Object.fromEntries(registryEntries) +} export function getAppRegistryEntry( appId?: string | null @@ -102,10 +29,6 @@ export function getAppRegistryEntry( return APP_REGISTRY[appId] ?? null } -export function getDefaultAppEntry(): AppRegistryEntry { - return APP_REGISTRY[DEFAULT_APP_ID] -} - export function getAppRegistryEntries(): AppRegistryEntry[] { return APP_REGISTRY_LIST } diff --git a/src/apps/submission-registry.test.ts b/src/apps/submission-registry.test.ts new file mode 100644 index 00000000..d0639722 --- /dev/null +++ b/src/apps/submission-registry.test.ts @@ -0,0 +1,191 @@ +import { afterEach, describe, expect, it } from "vitest" +import { parseAppSubmissionMarkdown } from "./submission-registry" + +const originalBuffer = globalThis.Buffer + +afterEach(() => { + globalThis.Buffer = originalBuffer +}) + +describe("parseAppSubmissionMarkdown", () => { + it("parses a live submission", () => { + const entry = parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/example.md", + `--- +id: example +name: Example App +status: live +externalUrl: https://example.com +icon: E +description: Example app description. +category: Assistant +scopes: + - chatgpt.conversations +--- + +## Notes + +- Example submission. +` + ) + + expect(entry).toEqual({ + id: "example", + name: "Example App", + status: "live", + externalUrl: "https://example.com", + icon: "E", + iconUrl: undefined, + description: "Example app description.", + category: "Assistant", + dataRequired: ["ChatGPT"], + scopes: ["chatgpt.conversations"], + }) + }) + + it("parses an optional iconUrl override", () => { + const entry = parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/example.md", + `--- +id: example +name: Example App +status: live +externalUrl: https://example.com +icon: E +iconUrl: https://cdn.example.com/icon.svg +description: Example app description. +category: Assistant +scopes: + - chatgpt.conversations +---` + ) + + expect(entry?.iconUrl).toBe("https://cdn.example.com/icon.svg") + }) + + it("rejects non-https icon urls", () => { + expect(() => + parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/invalid.md", + `--- +id: invalid +name: Invalid App +status: live +externalUrl: https://example.com +icon: I +iconUrl: http://cdn.example.com/icon.svg +description: Invalid icon URL. +category: Demo +scopes: + - chatgpt.conversations +---` + ) + ).toThrow(/iconUrl/i) + }) + + it("parses submission markdown when Buffer is unavailable", () => { + globalThis.Buffer = undefined as never + + const entry = parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/example.md", + `--- +id: example +name: Example App +status: live +externalUrl: https://example.com +icon: E +description: Example app description. +category: Assistant +scopes: + - chatgpt.conversations +---` + ) + + expect(entry?.dataRequired).toEqual(["ChatGPT"]) + }) + + it("dedupes multiple scopes from the same platform into one label", () => { + const entry = parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/example.md", + `--- +id: example +name: Example App +status: live +externalUrl: https://example.com +icon: E +description: Example app description. +category: Assistant +scopes: + - linkedin.profile + - linkedin.connections +---` + ) + + expect(entry?.dataRequired).toEqual(["LinkedIn"]) + }) + + it("ignores the template file", () => { + const entry = parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/_template.md", + "---\nid: ignored\nname: Ignored\nstatus: coming-soon\nicon: I\ndescription: Ignored.\ncategory: Demo\n---" + ) + + expect(entry).toBeNull() + }) + + it("requires live apps to declare an external url", () => { + expect(() => + parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/invalid.md", + `--- +id: invalid +name: Invalid App +status: live +icon: I +description: Missing external URL. +category: Demo +scopes: + - chatgpt.conversations +---` + ) + ).toThrow() + }) + + it("rejects non-http submission schemes", () => { + expect(() => + parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/invalid.md", + `--- +id: invalid +name: Invalid App +status: live +externalUrl: mailto:test@example.com +icon: I +description: Invalid external URL. +category: Demo +scopes: + - chatgpt.conversations +---` + ) + ).toThrow(/externalUrl/i) + }) + + it("rejects http urls", () => { + expect(() => + parseAppSubmissionMarkdown( + "/virtual/ecosystem/app-submissions/invalid.md", + `--- +id: invalid +name: Invalid App +status: live +externalUrl: http://example.com +icon: I +description: Invalid external URL. +category: Demo +scopes: + - chatgpt.conversations +---` + ) + ).toThrow(/externalUrl/i) + }) +}) diff --git a/src/apps/submission-registry.ts b/src/apps/submission-registry.ts new file mode 100644 index 00000000..12044762 --- /dev/null +++ b/src/apps/submission-registry.ts @@ -0,0 +1,149 @@ +import { z } from "zod" +import { isAllowedSubmittedAppExternalUrl } from "./external-url" +import { getPrimaryDataSourceLabel } from "@/lib/scope-labels" +import type { AppRegistryEntry } from "./registry-types" + +const rawSubmissionFiles = import.meta.glob( + "../../ecosystem/app-submissions/*.md", + { + eager: true, + import: "default", + query: "?raw", + } +) + +const appSubmissionBaseSchema = z.object({ + id: z.string().min(1), + name: z.string().min(1), + icon: z.string().min(1), + iconUrl: z + .string() + .url() + .refine(isAllowedSubmittedAppExternalUrl, { + message: "iconUrl must use https://.", + }) + .optional(), + description: z.string().min(1), + category: z.string().min(1), +}) + +const liveAppSubmissionSchema = appSubmissionBaseSchema.extend({ + status: z.literal("live"), + externalUrl: z.string().url().refine(isAllowedSubmittedAppExternalUrl, { + message: "externalUrl must use https://.", + }), + scopes: z.array(z.string().min(1)).min(1), +}) + +const comingSoonAppSubmissionSchema = appSubmissionBaseSchema.extend({ + status: z.literal("coming-soon"), + scopes: z.array(z.string().min(1)).optional(), +}) + +const appSubmissionSchema = z.discriminatedUnion("status", [ + liveAppSubmissionSchema, + comingSoonAppSubmissionSchema, +]) + +export function parseAppSubmissionMarkdown( + filePath: string, + rawMarkdown: string +): AppRegistryEntry | null { + if (filePath.endsWith("/_template.md")) { + return null + } + + const data = parseFrontmatter(rawMarkdown) + const parsedEntry = appSubmissionSchema.parse(data) + const dataRequired = getDataRequiredFromScopes(parsedEntry.scopes) + + return { + ...parsedEntry, + dataRequired, + } +} + +export function parseSubmittedAppRegistryEntries( + rawFiles: Record +): AppRegistryEntry[] { + return [...Object.entries(rawFiles)] + .sort(([leftPath], [rightPath]) => leftPath.localeCompare(rightPath)) + .flatMap(([filePath, rawMarkdown]) => { + const entry = parseAppSubmissionMarkdown(filePath, rawMarkdown) + return entry ? [entry] : [] + }) +} + +export function getSubmittedAppRegistryEntries(): AppRegistryEntry[] { + return parseSubmittedAppRegistryEntries( + rawSubmissionFiles as Record + ) +} + +function getDataRequiredFromScopes(scopes?: string[]) { + if (!scopes?.length) { + return [] + } + + return Array.from( + new Set( + scopes + .map(scope => getPrimaryDataSourceLabel([scope])) + .filter((label): label is string => Boolean(label)) + ) + ) +} + +function parseFrontmatter(rawMarkdown: string): Record { + const lines = rawMarkdown.split(/\r?\n/) + + if (lines[0] !== "---") { + throw new Error("Submission markdown must start with frontmatter") + } + + const data: Record = {} + let currentListKey: string | null = null + + for (let index = 1; index < lines.length; index += 1) { + const line = lines[index] + + if (line === "---") { + return data + } + + if (!line.trim()) { + continue + } + + const listItemMatch = line.match(/^\s*-\s+(.*)$/) + if (listItemMatch) { + if (!currentListKey) { + throw new Error(`Unexpected frontmatter list item: ${line}`) + } + + ;(data[currentListKey] as string[]).push(listItemMatch[1].trim()) + continue + } + + const keyValueMatch = line.match(/^([A-Za-z0-9_-]+):(?:\s*(.*))?$/) + if (!keyValueMatch) { + throw new Error(`Unsupported frontmatter line: ${line}`) + } + + const [, key, rawValue = ""] = keyValueMatch + const value = rawValue.trim() + + if (value) { + data[key] = value + currentListKey = null + continue + } + + data[key] = [] + currentListKey = key + } + + throw new Error( + "Submission markdown frontmatter is missing a closing delimiter" + ) +} diff --git a/src/components/elements/icon-flow.test.tsx b/src/components/elements/icon-flow.test.tsx new file mode 100644 index 00000000..fc06752d --- /dev/null +++ b/src/components/elements/icon-flow.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from "@testing-library/react" +import { describe, expect, it } from "vitest" +import { IconFlow } from "./icon-flow" + +describe("IconFlow", () => { + it("renders from and to content with the directional arrow", () => { + const { container } = render( + From} + to={To} + /> + ) + + expect(screen.getByTestId("from-icon")).toBeTruthy() + expect(screen.getByTestId("to-icon")).toBeTruthy() + expect(container.querySelector('[data-slot="icon-flow"] svg')).toBeTruthy() + }) +}) diff --git a/src/components/elements/icon-flow.tsx b/src/components/elements/icon-flow.tsx new file mode 100644 index 00000000..87de0d7b --- /dev/null +++ b/src/components/elements/icon-flow.tsx @@ -0,0 +1,32 @@ +import type { ComponentProps, ReactNode } from "react" +import { ArrowRightIcon } from "lucide-react" +import { cn } from "@/lib/classes" + +interface IconFlowProps extends Omit, "children"> { + from: ReactNode + to: ReactNode + arrowClassName?: string +} + +export function IconFlow({ + from, + to, + className, + arrowClassName, + ...props +}: IconFlowProps) { + return ( +
+ {from} +
+ ) +} diff --git a/src/components/elements/platform-icon-group.test.tsx b/src/components/elements/platform-icon-group.test.tsx new file mode 100644 index 00000000..a55023c3 --- /dev/null +++ b/src/components/elements/platform-icon-group.test.tsx @@ -0,0 +1,43 @@ +import { render, screen } from "@testing-library/react" +import { describe, expect, it } from "vitest" +import { PlatformIconGroup } from "./platform-icon-group" + +describe("PlatformIconGroup", () => { + it("renders visible platform icons and an overflow count", () => { + const { container } = render( + + ) + + expect( + container.querySelectorAll('[data-slot="adaptive-icon"]') + ).toHaveLength(3) + expect(screen.getByText("+1")).toBeTruthy() + const adaptiveIcons = container.querySelectorAll( + '[data-slot="adaptive-icon"]' + ) + expect( + Array.from(adaptiveIcons).every(icon => + icon.className.includes("ring-background") + ) + ).toBe(true) + expect((adaptiveIcons[0] as HTMLElement).className).not.toContain("p-0") + expect((adaptiveIcons[0] as HTMLElement).className).not.toContain("p-1") + expect((adaptiveIcons[0] as HTMLElement).className).not.toContain( + "bg-foreground" + ) + expect((adaptiveIcons[1] as HTMLElement).style.marginLeft).toBe("-3px") + + const groupChildren = container.querySelector( + '[data-slot="platform-icon-group"]' + )?.children + expect((groupChildren?.[3] as HTMLElement).style.width).toBe("28px") + }) +}) diff --git a/src/components/elements/platform-icon-group.tsx b/src/components/elements/platform-icon-group.tsx new file mode 100644 index 00000000..7b1a71c6 --- /dev/null +++ b/src/components/elements/platform-icon-group.tsx @@ -0,0 +1,72 @@ +import type { ComponentProps } from "react" +import { PlatformIcon } from "@/components/icons/platform-icon" +import { cn } from "@/lib/classes" + +export interface PlatformIconGroupItem { + iconName: string + imageSrc?: string + fallbackLabel?: string +} + +interface PlatformIconGroupProps extends Omit< + ComponentProps<"div">, + "children" +> { + items: PlatformIconGroupItem[] + size?: number + maxVisible?: number +} + +export function PlatformIconGroup({ + items, + size = 28, + maxVisible = 3, + className, + ...props +}: PlatformIconGroupProps) { + const visibleItems = items.slice(0, maxVisible) + const overflowCount = items.length - visibleItems.length + const visibleSlicePx = Math.max(10, Math.round(size * 0.9)) + const overlapPx = size - visibleSlicePx + const overflowFontSizePx = Math.max(11, Math.round(size * 0.45)) + + return ( +
+ {visibleItems.map((item, index) => ( + 0 ? `${-overlapPx}px` : undefined, + zIndex: visibleItems.length - index, + }} + aria-hidden="true" + /> + ))} + {overflowCount > 0 ? ( + + ) : null} +
+ ) +} diff --git a/src/components/elements/source-stack.tsx b/src/components/elements/source-stack.tsx index e29522e5..0ec9935d 100644 --- a/src/components/elements/source-stack.tsx +++ b/src/components/elements/source-stack.tsx @@ -14,7 +14,6 @@ export interface SourceStackProps { iconClassName?: string labelColor?: "foreground" | "mutedForeground" arrowClassName?: string - stackPrimaryColor?: string trailingSlot?: ReactNode infoSlot?: ReactNode bottomClassName?: string @@ -28,26 +27,21 @@ export function SourceStack({ iconClassName, labelColor = "foreground", arrowClassName, - stackPrimaryColor, trailingSlot, infoSlot, bottomClassName, }: SourceStackProps) { const shouldShowArrow = Boolean(showArrow) - void stackPrimaryColor - // const darkenedStackColor = stackPrimaryColor - // ? `color-mix(in srgb, ${stackPrimaryColor} 30%, black)` - // : undefined - // bgColor: `color-mix(in srgb, ${darkenedStackColor} 1%, transparent)`, return ( -
+
diff --git a/src/components/icons/adaptive-icon.test.tsx b/src/components/icons/adaptive-icon.test.tsx new file mode 100644 index 00000000..d3d1a539 --- /dev/null +++ b/src/components/icons/adaptive-icon.test.tsx @@ -0,0 +1,57 @@ +import { cleanup, fireEvent, render } from "@testing-library/react" +import { AsteriskIcon } from "lucide-react" +import { afterEach, describe, expect, it } from "vitest" +import { AdaptiveIcon } from "./adaptive-icon" + +describe("AdaptiveIcon", () => { + afterEach(() => { + cleanup() + }) + + it("renders the solid icon surface by default", () => { + const { container } = render() + + const surface = container.querySelector( + '[data-slot="adaptive-icon"]' + ) as HTMLElement | null + + expect(surface).toBeTruthy() + if (!surface) { + throw new Error("Expected adaptive icon surface to be rendered") + } + + const icon = surface.querySelector("svg") + + expect(surface.className).toContain("bg-foreground") + expect(surface.style.width).toBe("32px") + expect(surface.style.height).toBe("32px") + expect(icon).toBeTruthy() + expect(icon?.getAttribute("class")).toContain("text-background") + expect(icon?.getAttribute("style")).toContain("width: 24px") + expect(icon?.getAttribute("style")).toContain("height: 24px") + }) + + it("advances to the next image candidate after an error", () => { + const { container } = render( + + ) + + const firstImage = container.querySelector("img") + expect(firstImage?.getAttribute("src")).toBe("https://example.com/first.png") + + if (!firstImage) { + throw new Error("Expected first image to be rendered") + } + + fireEvent.error(firstImage) + + const secondImage = container.querySelector("img") + expect(secondImage?.getAttribute("src")).toBe("https://example.com/second.png") + }) +}) diff --git a/src/components/icons/adaptive-icon.tsx b/src/components/icons/adaptive-icon.tsx new file mode 100644 index 00000000..7a4390c1 --- /dev/null +++ b/src/components/icons/adaptive-icon.tsx @@ -0,0 +1,199 @@ +import { + type CSSProperties, + type ElementType, + useEffect, + useRef, + useState, + type ComponentProps, + type ReactNode, +} from "react" +import { Text } from "@/components/typography/text" +import { cn } from "@/lib/classes" + +type AdaptiveIconComponent = ElementType<{ + className?: string + style?: CSSProperties + "aria-hidden"?: boolean +}> + +export type AdaptiveIconVariant = "solid" | "padded" | "plain" + +type AdaptiveIconProps = Omit, "children"> & { + imageSources?: Array + imageAlt?: string + size?: number + imageScale?: number + icon?: AdaptiveIconComponent + iconClassName?: string + iconScale?: number + fallbackLabel?: string + fallback?: ReactNode + fallbackScale?: number + variant?: AdaptiveIconVariant +} + +export function AdaptiveIcon({ + imageSources = [], + imageAlt = "", + size = 32, + imageScale = 1, + icon: Icon, + iconClassName, + iconScale, + fallbackLabel, + fallback, + fallbackScale = 0.75, + variant = "solid", + className, + style, + ...props +}: AdaptiveIconProps) { + const resolvedImageSources = imageSources.filter((value): value is string => + Boolean(value) + ) + const imageSourcesKey = resolvedImageSources.join("\0") + const [imageIndex, setImageIndex] = useState(0) + const [loadedImageSrc, setLoadedImageSrc] = useState(null) + const imageRef = useRef(null) + const scaledImageSize = Math.round(size * imageScale) + const resolvedIconScale = iconScale ?? (variant === "padded" ? 1 : 0.75) + const scaledIconSize = Math.round(size * resolvedIconScale) + const scaledFallbackSize = Math.round(size * fallbackScale) + const imageBorderRadiusPx = Math.max(3, Math.round(scaledImageSize * 0.12)) + const innerBorderRadiusPx = Math.max(3, Math.round(size * 0.12)) + + useEffect(() => { + setImageIndex(0) + setLoadedImageSrc(null) + }, [imageSourcesKey]) + + const activeImageSrc = resolvedImageSources[imageIndex] + const isLoaded = activeImageSrc != null && loadedImageSrc === activeImageSrc + + useEffect(() => { + setLoadedImageSrc(null) + }, [activeImageSrc]) + + useEffect(() => { + const image = imageRef.current + if (!activeImageSrc || !image || !image.complete) { + return + } + + if (image.naturalWidth > 0) { + setLoadedImageSrc(activeImageSrc) + return + } + + setImageIndex(current => current + 1) + }, [activeImageSrc]) + + const handleImageLoad = () => { + if (activeImageSrc) { + setLoadedImageSrc(activeImageSrc) + } + } + + const handleImageError = () => { + setImageIndex(current => current + 1) + } + + const nonImageNode = + fallback ?? + (Icon ? ( + + ) : fallbackLabel ? ( + + {fallbackLabel} + + ) : null) + + const rootClassName = cn( + "shrink-0 flex items-center justify-center rounded-button overflow-hidden", + variant === "padded" && "p-1", + variant === "solid" && "bg-foreground" + ) + + // Padded images need an inner frame so the loading surface and image radius + // stay inside the outer rounded shell. + const imageNode = + variant === "padded" ? ( + + {imageAlt} + + ) : ( + {imageAlt} + ) + + return ( +
+ {activeImageSrc ? imageNode : nonImageNode} +
+ ) +} diff --git a/src/components/icons/platform-icon.test.tsx b/src/components/icons/platform-icon.test.tsx new file mode 100644 index 00000000..0b05b4c7 --- /dev/null +++ b/src/components/icons/platform-icon.test.tsx @@ -0,0 +1,118 @@ +import { cleanup, fireEvent, render } from "@testing-library/react" +import { afterEach, beforeEach, describe, expect, it } from "vitest" +import { PlatformIcon } from "./platform-icon" + +let imageComplete = false +let imageNaturalWidth = 0 + +describe("PlatformIcon", () => { + beforeEach(() => { + imageComplete = false + imageNaturalWidth = 0 + + Object.defineProperty(HTMLImageElement.prototype, "complete", { + configurable: true, + get: () => imageComplete, + }) + + Object.defineProperty(HTMLImageElement.prototype, "naturalWidth", { + configurable: true, + get: () => imageNaturalWidth, + }) + }) + + afterEach(() => { + cleanup() + }) + + it("keeps the muted background until the image loads", () => { + const { container } = render( + + ) + + const image = container.querySelector("img") + + expect(image).toBeTruthy() + if (!image) { + throw new Error("Expected image to be rendered") + } + + const imageFrame = image.parentElement + + expect(imageFrame).toBeTruthy() + expect(imageFrame?.className).toContain("bg-muted") + + fireEvent.load(image!) + + expect(imageFrame?.className).not.toContain("bg-muted") + }) + + it("removes the muted background immediately for cached images", () => { + const { rerender } = render( + + ) + + imageComplete = true + imageNaturalWidth = 64 + + rerender( + + ) + + const image = document.querySelector("img") + + expect(image).toBeTruthy() + if (!image) { + throw new Error("Expected image to be rendered") + } + + const imageFrame = image.parentElement + + expect(imageFrame).toBeTruthy() + expect(imageFrame?.className).not.toContain("bg-muted") + }) + + it("restores the muted background immediately when the src changes", () => { + const { container, rerender } = render( + + ) + + const firstImage = container.querySelector("img") + expect(firstImage).toBeTruthy() + + fireEvent.load(firstImage!) + + const firstImageFrame = firstImage?.parentElement + expect(firstImageFrame?.className).not.toContain("bg-muted") + + rerender( + + ) + + const nextImage = container.querySelector("img") + const nextImageFrame = nextImage?.parentElement + + expect(nextImage).toBeTruthy() + expect(nextImageFrame?.className).toContain("bg-muted") + }) +}) diff --git a/src/components/icons/platform-icon.tsx b/src/components/icons/platform-icon.tsx index b07c1500..fda90b03 100644 --- a/src/components/icons/platform-icon.tsx +++ b/src/components/icons/platform-icon.tsx @@ -1,6 +1,12 @@ -import type { ComponentProps } from "react" +import { type ComponentProps } from "react" +import { AdaptiveIcon } from "@/components/icons/adaptive-icon" +import type { AdaptiveIconVariant } from "@/components/icons/adaptive-icon" import { getPlatformIconComponentForName } from "@/lib/platform/icons" -import { cn } from "@/lib/utils" +import { getPlatformLogoUrlForDomain } from "@/lib/platform/logo-provider" +import { + getPlatformRegistryEntryById, + getPlatformRegistryEntryByName, +} from "@/lib/platform/utils" /** * Shared platform icon utilities for displaying connector icons. @@ -12,15 +18,13 @@ interface PlatformIconProps extends Omit, "children"> { imageSrc?: string imageAlt?: string size?: number + imageScale?: number fallbackLabel?: string fallbackScale?: number + variant?: AdaptiveIconVariant ariaHidden?: boolean } -// Default 2px padding to ensure the icon is centered within the wrapper -const iconWrapper = - "flex items-center justify-center rounded-button overflow-hidden p-1" - /** * Platform icon component * Displays a platform logo or first-letter fallback @@ -30,68 +34,40 @@ export function PlatformIcon({ imageSrc, imageAlt = "", size = 32, + imageScale = 1, className, fallbackLabel, fallbackScale = 0.75, + variant = "padded", ariaHidden, "aria-hidden": ariaHiddenProp, ...props }: PlatformIconProps) { const Icon = getPlatformIconComponentForName(iconName) + const registryEntry = + getPlatformRegistryEntryById(iconName) ?? + getPlatformRegistryEntryByName(iconName) + const resolvedImageSrc = + imageSrc ?? + (registryEntry?.brandDomain + ? getPlatformLogoUrlForDomain(registryEntry.brandDomain) + : undefined) const resolvedAriaHidden = ariaHidden ?? ariaHiddenProp ?? true + const label = (fallbackLabel?.trim() || iconName.trim().charAt(0)).toUpperCase() - if (imageSrc) { - return ( -
- {imageAlt} -
- ) - } - - if (Icon) { - return ( -
- -
- ) - } - - // Fallback: show first letter - const label = fallbackLabel?.trim() || iconName.charAt(0) - const fontSize = Math.round(size * fallbackScale) return ( -
- - {label} - -
+ /> ) } diff --git a/src/components/navigation/nav-item-styles.ts b/src/components/navigation/nav-item-styles.ts index e1f3ecca..bcfcb9e8 100644 --- a/src/components/navigation/nav-item-styles.ts +++ b/src/components/navigation/nav-item-styles.ts @@ -5,9 +5,14 @@ const navItemInteractiveStateClasses = cn( // Inactive: transparent + dim text/icon "bg-transparent text-foreground-muted", // Hover: subtle emphasis while inactive - "hover:bg-foreground/[0.03] hover:text-foreground", + "hover:bg-foreground/[0.03]", + "hover:text-foreground", +) + +const navItemSharedActiveStateClasses = cn( // Active: stronger filled state - "aria-[current=page]:bg-foreground/[0.07] aria-[current=page]:text-foreground", + "aria-[current=page]:text-foreground", + "aria-[current=page]:bg-foreground/[0.07]", "aria-[current=page]:hover:bg-foreground/[0.07]" ) @@ -17,7 +22,10 @@ export const topNavItemClassName = cn( "rounded-button px-4.5", // transitions "transition-all duration-150 ease-in-out", - navItemInteractiveStateClasses + navItemInteractiveStateClasses, + // Top-nav active fill is manually tuned to match the server status dot ring. + "aria-[current=page]:bg-[#e5e5e5] aria-[current=page]:hover:bg-[#e5e5e5]", + "aria-[current=page]:text-foreground" ) export const settingsSidebarItemClassName = cn( @@ -28,5 +36,6 @@ export const settingsSidebarItemClassName = cn( // icon sizing "[&_svg]:text-current", "[&_svg:not([class*='size-'])]:size-[1.2em]", - navItemInteractiveStateClasses + navItemInteractiveStateClasses, + navItemSharedActiveStateClasses ) diff --git a/src/components/navigation/top-nav.test.tsx b/src/components/navigation/top-nav.test.tsx new file mode 100644 index 00000000..a0db320c --- /dev/null +++ b/src/components/navigation/top-nav.test.tsx @@ -0,0 +1,26 @@ +import { render, screen } from "@testing-library/react" +import { describe, expect, it } from "vitest" +import { MemoryRouter } from "react-router-dom" +import { TooltipProvider } from "@/components/ui/tooltip" +import { ROUTES } from "@/config/routes" +import { TopNav } from "./top-nav" + +function renderTopNav(initialEntry: string) { + return render( + + + + + + ) +} + +describe("TopNav", () => { + it("marks the server item active on the personal server route", () => { + renderTopNav(ROUTES.personalServer) + + expect(screen.getByRole("link", { name: "Server" }).getAttribute("aria-current")).toBe( + "page" + ) + }) +}) diff --git a/src/components/navigation/top-nav.tsx b/src/components/navigation/top-nav.tsx index 8169fe13..0ba68df9 100644 --- a/src/components/navigation/top-nav.tsx +++ b/src/components/navigation/top-nav.tsx @@ -9,11 +9,10 @@ import { } from "@/components/ui/tooltip" import { ROUTES } from "@/config/routes" import { cn } from "@/lib/classes" -import { buildSettingsUrl } from "@/pages/settings/url" import type { LucideIcon } from "lucide-react" import { HomeIcon, ServerIcon, UserRoundCogIcon, BoxIcon } from "lucide-react" import type { CSSProperties } from "react" -import { Link, NavLink } from "react-router-dom" +import { NavLink } from "react-router-dom" type NavItem = { id: "home" | "apps" | "docs" | "server" | "settings" @@ -28,7 +27,6 @@ type PersonalServerStatus = "stopped" | "starting" | "running" | "error" const navItems: NavItem[] = [ { id: "home", to: ROUTES.home, label: "Home", Icon: HomeIcon }, - { id: "apps", to: ROUTES.apps, label: "Apps", Icon: BoxIcon }, // { to: ROUTES.mcp, label: "MCP", Icon: IconMcp }, // { // id: "docs", @@ -40,10 +38,11 @@ const navItems: NavItem[] = [ // { to: "/activity", label: "Activity", Icon: ActivityIcon }, { id: "server", - to: buildSettingsUrl({ section: "personalServer" }), + to: ROUTES.personalServer, label: "Server", Icon: ServerIcon, }, + { id: "apps", to: ROUTES.apps, label: "Apps", Icon: BoxIcon }, { id: "settings", to: ROUTES.settings, @@ -54,8 +53,9 @@ const navItems: NavItem[] = [ function getStatusDotClassName(status: PersonalServerStatus) { if (status === "running") return "bg-success-foreground" - if (status === "starting") return "bg-amber-500 animate-pulse" - return "bg-destructive-foreground" + if (status === "starting") return "bg-success-foreground animate-pulse" + if (status === "error") return "bg-destructive-foreground" + return "bg-warning" } function getPersonalServerStatusLabel(status: PersonalServerStatus) { @@ -104,7 +104,6 @@ export function TopNav({ personalServerStatus }: TopNavProps) {