feat: add file-observer dashboard workflow#40
Conversation
- DAG workflow for building file observer dashboard - Uses relay-80-100 pattern with E2E testing - Claude for research/design, Codex for implementation - One deliverable per step with proper verification gates - Creates packages/file-observer Next.js app
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 85acc0988a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| const { workflow } = require('@agent-relay/sdk/workflows'); | ||
|
|
||
| const RELAYFILE_ROOT = '/Users/khaliqgant/Projects/AgentWorkforce/relayfile'; |
There was a problem hiding this comment.
This hard-codes the workflow to a single developer machine path, and the rest of the file (including .run({ cwd: RELAYFILE_ROOT }) and all cd ${FILE_OBSERVER_DIR} commands) depends on it; on any checkout that is not at /Users/khaliqgant/Projects/AgentWorkforce/relayfile, the workflow fails before doing useful work. Use process.env.RELAYFILE_PATH and/or process.cwd() as a fallback so the workflow is runnable in other environments.
Useful? React with 👍 / 👎.
| .step('install-dependencies', { | ||
| type: 'deterministic', | ||
| dependsOn: ['create-use-file-events-hook'], | ||
| command: `cd ${FILE_OBSERVER_DIR} && npm install 2>&1 | tail -20`, |
There was a problem hiding this comment.
With failOnError: true, this step still uses npm install 2>&1 | tail -20; without an explicit pipefail, the pipeline status comes from tail, so a failed install can be reported as success and the workflow proceeds with missing dependencies. The same failure-masking pattern appears in later build verification commands, so the workflow can falsely pass gating steps.
Useful? React with 👍 / 👎.
| git add packages/file-observer/package.json \ | ||
| packages/file-observer/next.config.js \ | ||
| packages/file-observer/tsconfig.json \ | ||
| packages/file-observer/postcss.config.mjs \ | ||
| packages/file-observer/wrangler.file-observer.toml \ |
There was a problem hiding this comment.
The workflow explicitly creates packages/file-observer/tests/file-observer.test.ts and validates it, but the commit step stages a fixed file list that omits packages/file-observer/tests/...; this can produce a commit claiming E2E test coverage while leaving the actual test file untracked locally. Add the tests path to the git add allowlist.
Useful? React with 👍 / 👎.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| .run({ cwd: process.cwd() }); | ||
|
|
||
| console.log('Result:', result.status); |
There was a problem hiding this comment.
🔴 Skill Quick Reference uses bare top-level await, contradicting Failure Prevention section in same file
This PR changed the Quick Reference template (line 27-55) from using require() + async function main() to using import + bare top-level await. Simultaneously, the PR added a Failure Prevention section (line 146-169) that explicitly says: "Do not use raw top-level await", "Always wrap execution [in async function]", and "Do not end workflow files with bare top-level await workflow(...).run(...)". This is an internal contradiction — the Quick Reference demonstrates the exact pattern the Failure Prevention section warns against. Additionally, the workflows/AGENTS.md mandatory rule says "End files with main().catch(...) so failures set a non-zero exit code", which the Quick Reference template violates. Agents copying the Quick Reference will produce workflow files that fail with Top-level await is currently not supported with the "cjs" output format when executed through the tsx/esbuild path.
(Refers to lines 27-55)
Prompt for agents
The Quick Reference code block at lines 27-55 in .claude/skills/writing-agent-relay-workflows/SKILL.md uses bare import and top-level await, but the Failure Prevention section added in the same PR at lines 146-169 explicitly warns against this pattern ('Do not use raw top-level await'). The same contradiction exists in .agents/skills/writing-agent-relay-workflows/SKILL.md at lines 26-55 and 112-127.
Additionally, the workflows/AGENTS.md mandatory rule requires 'End files with main().catch(...)' which the Quick Reference template violates.
To fix: Revert the Quick Reference to the previous CJS-compatible pattern that uses require() and async function main() wrapper, matching the Failure Prevention section's recommended pattern and the workflows/AGENTS.md rule. Or reconcile the Failure Prevention guidance to explain when top-level await is safe. The same fix should be applied to both .claude/skills/ and .agents/skills/ versions of this file.
Was this helpful? React with 👍 or 👎 to provide feedback.
- Add packages/file-observer-router/ with worker.ts - Similar pattern to relaycast observer-router - Routes files.relayfile.dev to Pages origin
- Make workflow root path configurable via RELAYFILE_PATH env var - Add set -o pipefail to all piped commands to preserve failure status - Add missing files to commit: tests/file-observer.test.ts, DESIGN.md - Add verification for test file and DESIGN.md in verify-all-files step
…bility discovery, add visual verification step
- Import ClaudeModels and CodexModels from @agent-relay/config
- Add discover-capabilities step using usePersona('capability-discovery')
- Add verify-ui-beautiful step for browser-based visual verification
- Update agent roles to mention 80-100 workflow requirements
- Add guidance about frontendImplementer persona patterns
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- Next.js app at packages/file-observer/ displaying relayfile workspace files - File tree with expand/collapse and metadata - File details panel showing author, intent, status - Workspace selector dropdown - API client and hooks for relayfile - WebSocket support for real-time updates - E2E tests with Vitest - DESIGN.md with component architecture - Cloudflare Worker router at packages/file-observer-router/ - Proxies files.relayfile.dev to Cloudflare Pages origin - Same pattern as relaycast observer-router
| const WebSocketImpl = this.webSocketFactory ?? getGlobalWebSocket(); | ||
| const url = new URL(`${this.baseUrl}/v1/workspaces/${encodeURIComponent(workspaceId)}/fs/ws`); | ||
| url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'; | ||
| url.searchParams.set('token', options.token?.trim() || this.token); |
There was a problem hiding this comment.
🟡 WebSocket authentication token exposed in URL query string
In packages/file-observer/src/lib/relayfile-client.ts:389, the connectWebSocket method passes the auth token as a URL query parameter (url.searchParams.set('token', ...)). This means the bearer token will appear in browser history, server access logs, proxy logs, and potentially referrer headers. While WebSocket connections cannot use standard Authorization headers in the browser, the token in the URL is a security concern. A common mitigation is to send the token as the first message after the WebSocket opens, or to use a short-lived ticket/nonce exchanged via an authenticated REST endpoint.
Was this helpful? React with 👍 or 👎 to provide feedback.
| - name: Publish to NPM | ||
| if: github.event.inputs.dry_run != 'true' | ||
| working-directory: ${{ matrix.path }} | ||
| env: | ||
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | ||
| run: npm publish --access public --provenance --tag ${{ github.event.inputs.tag }} --ignore-scripts |
There was a problem hiding this comment.
🔴 NODE_AUTH_TOKEN removed from publish workflow, breaking npm authentication
The NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} environment variable was removed from both the publish-packages (line 220-223) and publish-single (line 273-276) jobs. The actions/setup-node action with registry-url configures .npmrc to use ${NODE_AUTH_TOKEN} for authentication. Without this env var, npm publish will fail with an authentication error against the npm registry. The previous version of this file (at HEAD~2) had this env var set, and it was working correctly.
Removed env block from publish-packages job
The diff shows:
- env:
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
run: npm publish --access public --provenance ...This was removed from both publish-packages and publish-single jobs.
| - name: Publish to NPM | |
| if: github.event.inputs.dry_run != 'true' | |
| working-directory: ${{ matrix.path }} | |
| env: | |
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | |
| run: npm publish --access public --provenance --tag ${{ github.event.inputs.tag }} --ignore-scripts | |
| - name: Publish to NPM | |
| if: github.event.inputs.dry_run != 'true' | |
| working-directory: ${{ matrix.path }} | |
| env: | |
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | |
| run: npm publish --access public --provenance --tag ${{ github.event.inputs.tag }} --ignore-scripts |
Was this helpful? React with 👍 or 👎 to provide feedback.
| - name: Publish to NPM | ||
| if: github.event.inputs.dry_run != 'true' | ||
| working-directory: ${{ steps.resolve-package.outputs.path }} | ||
| env: | ||
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | ||
| run: npm publish --access public --provenance --tag ${{ github.event.inputs.tag }} --ignore-scripts |
There was a problem hiding this comment.
🔴 NODE_AUTH_TOKEN also removed from publish-single job
Same issue as the parallel publish job — NODE_AUTH_TOKEN was also removed from the publish-single job at .github/workflows/publish.yml:273-276. Without it, single-package publishes will also fail to authenticate.
| - name: Publish to NPM | |
| if: github.event.inputs.dry_run != 'true' | |
| working-directory: ${{ steps.resolve-package.outputs.path }} | |
| env: | |
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | |
| run: npm publish --access public --provenance --tag ${{ github.event.inputs.tag }} --ignore-scripts | |
| - name: Publish to NPM | |
| if: github.event.inputs.dry_run != 'true' | |
| working-directory: ${{ steps.resolve-package.outputs.path }} | |
| env: | |
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | |
| run: npm publish --access public --provenance --tag ${{ github.event.inputs.tag }} --ignore-scripts |
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Summary
Adds a new agent-relay workflow (
003-file-observer-dashboard.ts) for building a beautiful file observer dashboard for relayfile workspaces.What this does
packages/file-observer/that displays files from relayfile workspacesfiles.relayfile.devKey fixes from review
CodexModels.O4_MINI)preset: 'worker'for one-shot DAG stepsTesting
The workflow includes: