Redesign Web Mode command interface#18
Merged
Merged
Conversation
Contributor
|
Here's the code health analysis summary for commits Analysis Summary
|
Greptile OverviewGreptile SummaryThis PR replaces the legacy dashboard layout/page with a new “Web Mode” command interface composed of a frame (header/footer), a provider-backed runtime, and a schema/policy-driven panel system. The UI dynamically filters and places panels by device tier, session presence, and control mode, and introduces several UI-only/mock integrations ( Key integration points:
Blocking issues to address before merge:
Confidence Score: 3/5
|
| Filename | Overview |
|---|---|
| .gitignore | Adjusted ignore rules to explicitly include web-ui/src/lib and normalized trailing newline; no functional runtime impact. |
| web-ui/src/app/layout.tsx | Swapped legacy dashboard layout for CommandCenterFrame; looks correct but ensure frame types compile with React types. |
| web-ui/src/app/page.tsx | Replaced dashboard content with CommandCenter entrypoint; straightforward. |
| web-ui/src/components/webmode/CommandCenter.tsx | Added provider-wrapped command center surface; simple composition. |
| web-ui/src/components/webmode/CommandCenterFrame.tsx | New web-mode frame/header/footer; currently uses React.ReactNode without importing React/ReactNode (type-check issue). |
| web-ui/src/components/webmode/CommandCenterSurface.tsx | Implements schema/policy-based panel layout and renders zones via PanelRenderer; logic appears consistent. |
| web-ui/src/components/webmode/PanelRegistry.tsx | Introduces static registry mapping panel IDs to components; type-only React import used. |
| web-ui/src/components/webmode/PanelRenderer.tsx | Generic panel wrapper with tone-based styling and registry lookup; handles missing panels gracefully. |
| web-ui/src/components/webmode/WebModeProvider.tsx | Adds context/provider and exposes webmode state/config; uses React.ReactNode without importing React/ReactNode (type-check risk). |
| web-ui/src/components/webmode/panels/ActivityStreamPanel.tsx | Renders mock signal stream events with simple styling. |
| web-ui/src/components/webmode/panels/AgentGraphPanel.tsx | Displays agent status cards from useNeuroRift; safe handling of missing agent keys via optional chaining. |
| web-ui/src/components/webmode/panels/CommandPanel.tsx | Chat-like command panel; message IDs based on Date.now() can collide, causing duplicate React keys. |
| web-ui/src/components/webmode/panels/ConfigMatrixPanel.tsx | Schema-driven config editor; uses path-based getter and updateConfig; works for current schema. |
| web-ui/src/components/webmode/panels/ExecutionTimelinePanel.tsx | Displays tasks progress bars from useNeuroRift; straightforward. |
| web-ui/src/components/webmode/panels/IntentFlowPanel.tsx | Static intent routing visualization; no risky logic. |
| web-ui/src/components/webmode/panels/MemoryPulsePanel.tsx | Displays config-derived meters; straightforward. |
| web-ui/src/components/webmode/panels/OnlineModePanel.tsx | Toggles online mode/access; public URL is randomized UI-only value; no backend integration here. |
| web-ui/src/components/webmode/panels/PermissionsPanel.tsx | Renders approvals list; action chips are presentational only. |
| web-ui/src/lib/hooks.ts | Adds mock useNeuroRift hook with demo state and timers; suitable for UI-only mode. |
| web-ui/src/lib/types.ts | Introduces shared frontend types for session/agent/task/approval/system health. |
| web-ui/src/lib/utils.ts | Adds cn, severity color mapping, and date formatting utilities. |
| web-ui/src/lib/webmode/config-schema.ts | Defines config schema for matrix panel; paths align with default config in state. |
| web-ui/src/lib/webmode/policy.ts | Implements panel policy evaluation (session, control-only, min device tier). |
| web-ui/src/lib/webmode/schema.ts | Defines panel definitions and layout zones; consistent with registry/types. |
| web-ui/src/lib/webmode/state.ts | Implements device tier detection and webmode state/config reducer; uses structuredClone and path updates. |
| web-ui/src/lib/webmode/stream.ts | Mock stream hook emitting demo events on an interval; cleans up timer on unmount. |
| web-ui/src/lib/webmode/types.ts | Defines webmode types for device tiers, panels, policy context, and config model. |
| web-ui/src/lib/websocket.ts | Adds mock websocket that dispatches CustomEvents; on() currently stores listeners but isn’t used in this PR. |
| web-ui/src/styles/globals.css | Updates base body background and adds new utility classes for webmode styling. |
| web-ui/tailwind.config.ts | Extends Tailwind theme with neuro.void and float animation/keyframes. |
Sequence Diagram
sequenceDiagram
autonumber
participant User
participant Page as Next.js page.tsx
participant CC as CommandCenter
participant WMP as WebModeProvider
participant State as useWebModeState
participant Surf as CommandCenterSurface
participant Policy as evaluatePanelPolicy
participant PR as PanelRenderer
participant Panel as Panel Component
participant Cmd as CommandPanel
participant WS as MockWebSocket
User->>Page: Request "/"
Page->>CC: Render <CommandCenter/>
CC->>WMP: Wrap surface in provider
WMP->>State: init reducer + config
State-->>WMP: Return state/config/controlMode
WMP-->>Surf: Provide context
Surf->>Policy: Filter panelDefinitions
Policy-->>Surf: Return allowed panels
Surf->>PR: Render panels per layoutZones
PR->>Panel: Resolve PanelRegistry[panel.id]
User->>Cmd: Submit message
Cmd->>WMP: sendSignal("Intent captured")
WMP->>State: dispatch SIGNAL
Cmd->>WS: send({type:"chat"})
WS-->>User: Dispatch window CustomEvent
Cmd-->>Cmd: Append assistant reply (timeout)
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+1
to
+3
| 'use client'; | ||
|
|
||
| import { Activity, ShieldCheck, Wifi, Signal } from 'lucide-react'; |
There was a problem hiding this comment.
Missing React import
CommandCenterFrame uses React.ReactNode in the prop type, but this file doesn’t import React (or ReactNode). This will fail type-checking in TS setups without jsxImportSource/global React types. Import type React or type ReactNode from react and use it in the signature.
Comment on lines
+39
to
+41
|
|
||
| setMessages(prev => [entry, ...prev]); | ||
| setInput(''); |
There was a problem hiding this comment.
Non-unique message IDs
Message IDs are derived from Date.now() (e.g. id: `${Date.now()}-user` ). If multiple messages are added within the same millisecond (easy via preset buttons or fast clicks), React will see duplicate keys and may mis-render the message list. Use a monotonic counter, crypto.randomUUID(), or include an incrementing suffix to guarantee uniqueness.
Comment on lines
+1
to
+3
| 'use client'; | ||
|
|
||
| import { createContext, useContext } from 'react'; |
There was a problem hiding this comment.
Missing React import
This file types children as React.ReactNode but doesn’t import React (or ReactNode). In TS configurations where React types aren’t globally available, this will cause a build/type-check failure. Import type React or type ReactNode from react and use it in the prop type.
![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: 0d68dd82d9
ℹ️ 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".
Neuro-Rift
added a commit
that referenced
this pull request
Feb 23, 2026
Merge pull request #18 from demonking369/codex/redesign-web-mode-for-…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Description
web-ui/src/app/layout.tsxandweb-ui/src/app/page.tsx.web-ui/src/lib/webmode/schema.tsandweb-ui/src/lib/webmode/policy.ts.web-ui/src/lib/webmode/types.ts,state.ts,stream.tsandconfig-schema.ts, plusWebModeProviderand theCommandCentersurface (web-ui/src/components/webmode/*) to orchestrate dynamic panels.web-ui/src/components/webmode/panels/.web-ui/src/lib/websocket.ts, a frontenduseNeuroRifthook with sample stateweb-ui/src/lib/hooks.ts, shared typesweb-ui/src/lib/types.ts, and utilitiesweb-ui/src/lib/utils.ts.web-ui/src/styles/globals.cssandweb-ui/tailwind.config.ts..gitignoreto allow committing the newweb-ui/src/libfolder.Testing
npm run devand Next reported the application as ready and served the root page (HTTP 200); there were non-blocking Google Fonts warnings but the app fell back to local fonts. (Succeeded)http://127.0.0.1:3000and capture a screenshot, producing the artifactartifacts/webmode-dashboard.png. (Succeeded)git commitafter staging; no automated unit tests were required for these UI-only changes. (Committed)Codex Task