Repository navigation
feat: refine Console UI and harden user operation workflows - #11
Merged
Merged
Conversation
Deploying zhin-demo-console with
|
| Latest commit: |
119e14c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://19b1e1dc.console-axj.pages.dev |
| Branch Preview URL: | https://codex-console-operation-stab.console-axj.pages.dev |
There was a problem hiding this comment.
🟡 Changes recommended
Integer validation, editor caret visibility, mutation result handling, and cross-Host tool cleanup remain incorrect.
4 open findings
What changed in this PR
This PR hardens Console read/write workflows, Host isolation, navigation, database operations, and responsive visual foundations.
Changes:
- Adds strict response validation, draft preservation, retry/error states, and safer mutation handling.
- Refines navigation, endpoint workflows, plugin management, Workroom views, and component previews.
- Introduces shared visual tokens, bundled syntax highlighting, extensive tests, and PR CI.
| File | Description |
|---|---|
.github/workflows/ci.yml |
Adds PR validation CI. |
package.json |
Adds highlighting dependency and preview configuration. |
pnpm-lock.yaml |
Locks highlight.js. |
scripts/check-visual-build.mjs |
Validates compiled visual tokens. |
client/console-app/ConsoleRoutes.tsx |
Adds route error boundaries. |
console-ui/src/bootstrap/assistant-navigation.ts |
Defines optional assistant navigation. |
console-ui/src/bootstrap/host-registration.d.mts |
Types Host registration lifecycle. |
console-ui/src/bootstrap/host-registration.mjs |
Manages Host-scoped registrations. |
console-ui/src/bootstrap/loadConsoleEntries.ts |
Guards dynamic Host entries. |
console-ui/src/bootstrap/optional-navigation.d.mts |
Types optional navigation. |
console-ui/src/bootstrap/optional-navigation.mjs |
Controls optional route visibility. |
console-ui/src/components/AgentSessionPicker.tsx |
Validates session identifiers. |
console-ui/src/components/empty-state.tsx |
Applies shared typography. |
console-ui/src/components/page-error-boundary.tsx |
Contains page rendering failures. |
console-ui/src/components/PageHeader.tsx |
Applies shared page-header styles. |
console-ui/src/components/PluginConfigForm/BasicFieldRenderers.tsx |
Improves numeric field handling. |
console-ui/src/components/PluginConfigForm/draft-guard.d.mts |
Types draft guard. |
console-ui/src/components/PluginConfigForm/draft-guard.mjs |
Protects dirty configuration drafts. |
console-ui/src/components/PluginConfigForm/form-state.d.mts |
Types form state. |
console-ui/src/components/PluginConfigForm/form-state.mjs |
Distinguishes configuration read states. |
console-ui/src/components/PluginConfigForm/numeric-validation.d.mts |
Types numeric validation. |
console-ui/src/components/PluginConfigForm/numeric-validation.mjs |
Validates numeric configuration fields. |
console-ui/src/components/PluginConfigForm/types.ts |
Adds integer schema metadata. |
console-ui/src/components/ui/alert.tsx |
Applies visual system styles. |
console-ui/src/components/ui/badge.tsx |
Adds semantic badge styling. |
console-ui/src/components/ui/button.tsx |
Standardizes button dimensions and shadows. |
console-ui/src/components/ui/card.tsx |
Uses shared card styles. |
console-ui/src/components/ui/dialog.tsx |
Standardizes dialogs and localization. |
console-ui/src/components/ui/dropdown-menu.tsx |
Standardizes menu styling. |
console-ui/src/components/ui/input.tsx |
Standardizes input styling. |
console-ui/src/components/ui/select.tsx |
Standardizes select styling. |
console-ui/src/components/ui/tabs.tsx |
Standardizes tab styling. |
console-ui/src/components/ui/textarea.tsx |
Standardizes textarea styling. |
console-ui/src/contracts/zhin-console.ts |
Adds cron validation RPC. |
console-ui/src/hooks/config-error-state.d.mts |
Types configuration errors. |
console-ui/src/hooks/config-error-state.mjs |
Separates read and save errors. |
console-ui/src/hooks/console-read-state.d.mts |
Types read state. |
console-ui/src/hooks/console-read-state.mjs |
Models successful and failed reads. |
console-ui/src/hooks/use-console-read.ts |
Adds reusable resilient reads. |
console-ui/src/hooks/useConfigSource.ts |
Preserves configuration error context. |
console-ui/src/layouts/dashboard.tsx |
Resolves navigation and breadcrumbs. |
console-ui/src/navigation-location.d.mts |
Types navigation resolution. |
console-ui/src/navigation-location.mjs |
Resolves current and parent routes. |
console-ui/src/navigation-taxonomy.ts |
Reuses navigation group ordering. |
console-ui/src/pages/assistant-jobs-model.d.mts |
Types assistant job validation. |
console-ui/src/pages/assistant-jobs-model.mjs |
Validates and filters assistant jobs. |
console-ui/src/pages/clipboard-copy.d.mts |
Types clipboard fallback. |
console-ui/src/pages/clipboard-copy.mjs |
Implements reliable clipboard copying. |
console-ui/src/pages/config-navigation.d.mts |
Types configuration navigation. |
console-ui/src/pages/config-navigation.mjs |
Resolves valid configuration sections. |
console-ui/src/pages/config-source-validation.d.mts |
Types source validation. |
console-ui/src/pages/config-source-validation.mjs |
Validates YAML and JSON roots. |
console-ui/src/pages/dashboard-health.ts |
Summarizes optional service health. |
console-ui/src/pages/database/database-page.tsx |
Adds resilient database read states. |
console-ui/src/pages/database/json-field.tsx |
Adds accessible field errors. |
console-ui/src/pages/database/mutation-model.d.mts |
Types mutation safeguards. |
console-ui/src/pages/database/mutation-model.mjs |
Guards duplicate and broad mutations. |
console-ui/src/pages/database/record-value-preview.d.mts |
Types value previews. |
console-ui/src/pages/database/record-value-preview.mjs |
Produces bounded value summaries. |
console-ui/src/pages/database/RecordValueDisclosure.tsx |
Adds deferred full-value disclosure. |
console-ui/src/pages/database/related-row-draft.d.mts |
Types related-row parsing. |
console-ui/src/pages/database/related-row-draft.mjs |
Preserves typed row drafts. |
console-ui/src/pages/database/related-row-identity.d.mts |
Types row identities. |
console-ui/src/pages/database/related-row-identity.mjs |
Builds safe primary-key conditions. |
console-ui/src/pages/database/related-row-validation.d.mts |
Types row validation. |
console-ui/src/pages/database/related-row-validation.mjs |
Validates typed database values. |
console-ui/src/pages/database/related-update-result.d.mts |
Types update readback. |
console-ui/src/pages/database/related-update-result.mjs |
Confirms zero-affected updates. |
console-ui/src/pages/database/save-error.d.mts |
Types save errors. |
console-ui/src/pages/database/save-error.mjs |
Produces actionable save feedback. |
console-ui/src/pages/database/use-database-console.ts |
Wraps database reads and mutations. |
console-ui/src/pages/database/use-mutation.ts |
Exposes mutation gating state. |
console-ui/src/pages/endpoint-detail/conversation-avatar.ts |
Uses theme-neutral avatars. |
console-ui/src/pages/endpoint-detail/conversation-labels.ts |
Updates channel catalog requests. |
console-ui/src/pages/endpoint-detail/conversation-list-notice.d.mts |
Types list notices. |
console-ui/src/pages/endpoint-detail/conversation-list-notice.mjs |
Distinguishes empty and failed lists. |
console-ui/src/pages/endpoint-detail/conversation-read-state.ts |
Scopes read state per Host. |
console-ui/src/pages/endpoint-detail/ConversationSection.tsx |
Suppresses redundant empty messages. |
console-ui/src/pages/endpoint-detail/ConversationSidebar.tsx |
Improves status and accessibility. |
console-ui/src/pages/endpoint-detail/endpoint-request.d.mts |
Types endpoint request payloads. |
console-ui/src/pages/endpoint-detail/endpoint-request.mjs |
Builds canonical request payloads. |
console-ui/src/pages/endpoint-detail/inbox-history-model.d.mts |
Types inbox history projections. |
console-ui/src/pages/endpoint-detail/inbox-history-model.mjs |
Validates and merges inbox history. |
console-ui/src/pages/endpoint-detail/pending-request-model.d.mts |
Types pending requests. |
console-ui/src/pages/endpoint-detail/pending-request-model.mjs |
Validates pending request projections. |
console-ui/src/pages/endpoint-detail/types.ts |
Allows non-persisted requests. |
console-ui/src/pages/endpoint-detail/useChannelManager.tsx |
Improves conversation list recovery. |
console-ui/src/pages/endpoint-detail/useGroupActions.ts |
Updates RPC payload shape. |
console-ui/src/pages/endpoint-detail/useMessageHistory.ts |
Preserves history errors and payload identity. |
console-ui/src/pages/endpoint-list-model.d.mts |
Types endpoint validation. |
console-ui/src/pages/endpoint-list-model.mjs |
Validates endpoint lists. |
console-ui/src/pages/endpoints.tsx |
Uses validated endpoint data and revised copy. |
console-ui/src/pages/env-editor-model.d.mts |
Types environment editor state. |
console-ui/src/pages/env-editor-model.mjs |
Masks secrets and controls access. |
console-ui/src/pages/files/code-editor.tsx |
Uses bundled syntax highlighting. |
console-ui/src/pages/files/code-highlight.css |
Adds local light/dark highlighting. |
console-ui/src/pages/files/draft-session.d.mts |
Types file draft sessions. |
console-ui/src/pages/files/draft-session.mjs |
Isolates file drafts by Host. |
console-ui/src/pages/files/editor-constants.ts |
Uses shared editor metrics. |
console-ui/src/pages/files/file-icons.tsx |
Uses monochrome accessible icons. |
console-ui/src/pages/files/file-tree.css |
Adds responsive file-tree constraints. |
console-ui/src/pages/files/github-dark-scoped.css |
Scopes GitHub Dark highlighting. |
console-ui/src/pages/files/highlight-code.d.mts |
Types syntax highlighting. |
console-ui/src/pages/files/highlight-code.mjs |
Registers bundled grammars safely. |
console-ui/src/pages/files/hljs-global.d.ts |
Removes obsolete global typings. |
console-ui/src/pages/files/tree-node.tsx |
Improves tree accessibility and truncation. |
console-ui/src/pages/files/use-hljs-theme.ts |
Removes CDN theme loading. |
console-ui/src/pages/introspection/component-gallery.css |
Adds masonry previews and drawer styles. |
console-ui/src/pages/introspection/component-output.d.mts |
Types component output normalization. |
console-ui/src/pages/introspection/component-output.mjs |
Unwraps supported output envelopes. |
console-ui/src/pages/introspection/empty-state.d.mts |
Types capability empty states. |
console-ui/src/pages/introspection/empty-state.mjs |
Differentiates filtered and empty registries. |
console-ui/src/pages/introspection/json-viewer.css |
Styles structured JSON disclosure. |
console-ui/src/pages/introspection/JsonViewer.tsx |
Adds structured highlighted JSON viewing. |
console-ui/src/pages/introspection/masonry-layout.d.mts |
Types masonry layout. |
console-ui/src/pages/introspection/masonry-layout.mjs |
Calculates responsive masonry positions. |
console-ui/src/pages/introspection/preview-parameters.d.mts |
Types preview parameters. |
console-ui/src/pages/introspection/preview-parameters.mjs |
Preserves examples and clipboard failures. |
console-ui/src/pages/login.tsx |
Applies responsive themed login styling. |
console-ui/src/pages/logs/disclosure.css |
Adds responsive log disclosure layout. |
console-ui/src/pages/logs/history-model.d.mts |
Types log history state. |
console-ui/src/pages/logs/history-model.mjs |
Validates pagination and stale requests. |
console-ui/src/pages/logs/read-state.d.mts |
Types log availability. |
console-ui/src/pages/logs/read-state.mjs |
Separates unavailable and empty logs. |
console-ui/src/pages/marketplace-install-model.d.mts |
Types install reconciliation. |
console-ui/src/pages/marketplace-install-model.mjs |
Reconciles uncertain installations. |
console-ui/src/pages/marketplace-version.d.mts |
Types registry versions. |
console-ui/src/pages/marketplace-version.mjs |
Applies authoritative registry versions. |
console-ui/src/pages/plugin-detail-model.d.mts |
Types plugin detail validation. |
console-ui/src/pages/plugin-detail-model.mjs |
Validates plugin details and diagnostics. |
console-ui/src/pages/plugin-lifecycle-model.d.mts |
Types lifecycle polling. |
console-ui/src/pages/plugin-lifecycle-model.mjs |
Polls formal plugin status. |
console-ui/src/pages/plugin-list-model.d.mts |
Types plugin list validation. |
console-ui/src/pages/plugin-list-model.mjs |
Validates plugin lists. |
console-ui/src/pages/registerBuiltinShell.tsx |
Updates route hierarchy and labels. |
console-ui/src/pages/workroom-catalog-model.d.mts |
Expands Workroom model typings. |
console-ui/src/pages/workroom-draft-session.d.mts |
Types Workroom draft sessions. |
console-ui/src/pages/workroom-draft-session.mjs |
Isolates cloned Workroom drafts. |
console-ui/src/pages/workroom-runs-model.d.mts |
Types Workroom run models. |
console-ui/src/pages/workroom-runs-model.mjs |
Validates and summarizes Workroom runs. |
console-ui/src/registerBuiltinShell.tsx |
Updates route hierarchy and labels. |
console-ui/src/registerOptionalRoutes.tsx |
Retains hidden assistant routes. |
console-ui/src/theme/index.ts |
Moves palette ownership to CSS. |
console-ui/src/utils/agent-session-history.ts |
Scopes session history by Host. |
console-ui/src/utils/agent-session.ts |
Fixes session-key decoding and validation. |
console-ui/src/utils/read-error.d.mts |
Types read error helpers. |
console-ui/src/utils/read-error.mjs |
Produces permission-aware read feedback. |
tests/agent-session-key.test.mjs |
Tests session-key round trips. |
tests/agent-workbench-disclosure.test.mjs |
Tests Workbench disclosure copy. |
tests/assistant-jobs.test.mjs |
Tests assistant job validation. |
tests/capability-empty-state.test.mjs |
Tests capability empty states. |
tests/channel-copy.test.mjs |
Tests channel navigation labels. |
tests/clipboard-copy.test.mjs |
Tests clipboard fallback behavior. |
tests/component-masonry.test.mjs |
Tests masonry layout. |
tests/component-output.test.mjs |
Tests output normalization. |
tests/component-preview-parameters.test.mjs |
Tests preview parameters and copying. |
tests/config-draft-guard.test.mjs |
Tests dirty draft preservation. |
tests/config-error-state.test.mjs |
Tests separate configuration errors. |
tests/config-navigation.test.mjs |
Tests configuration section fallback. |
tests/config-numeric-validation.test.mjs |
Tests numeric validation. |
tests/config-source-validation.test.mjs |
Tests source validation and secrecy. |
tests/console-contract.test.mjs |
Updates source contract assertions. |
tests/console-read-state.test.mjs |
Tests resilient read state. |
tests/conversation-list-notice.test.mjs |
Tests conversation notices. |
tests/dashboard-health.test.mjs |
Tests optional health summaries. |
tests/database-mutation-model.test.mjs |
Tests mutation safeguards. |
tests/database-save-error.test.mjs |
Tests database save feedback. |
tests/database-value-preview.test.mjs |
Tests bounded value disclosure. |
tests/endpoint-list-model.test.mjs |
Tests endpoint validation. |
tests/endpoint-request.test.mjs |
Tests endpoint request identities. |
tests/env-editor.test.mjs |
Tests masking and draft access. |
tests/file-drafts.test.mjs |
Tests Host-scoped file drafts. |
tests/files-code-highlight.test.mjs |
Tests syntax highlighting. |
tests/files-tree-presentation.test.mjs |
Tests responsive file presentation. |
tests/fixtures/plugin-detail.json |
Provides plugin detail fixture. |
tests/fixtures/workroom-run-details.json |
Provides Workroom detail fixture. |
tests/fixtures/workroom-run-list.json |
Provides Workroom list fixture. |
tests/host-registration.test.mjs |
Tests registration reset and epochs. |
tests/inbox-history-model.test.mjs |
Tests inbox history projections. |
tests/log-history.test.mjs |
Tests log filtering and pagination. |
tests/log-read-state.test.mjs |
Tests unavailable log handling. |
tests/marketplace-install.test.mjs |
Tests uncertain install reconciliation. |
tests/marketplace-version.test.mjs |
Tests registry version authority. |
tests/navigation-location.test.mjs |
Tests navigation resolution. |
tests/optional-navigation.test.mjs |
Tests optional route updates. |
tests/pending-request-model.test.mjs |
Tests pending request projections. |
tests/plugin-config-form-state.test.mjs |
Tests configuration form states. |
tests/plugin-detail.test.mjs |
Tests plugin detail validation. |
tests/plugin-lifecycle.test.mjs |
Tests lifecycle polling. |
tests/plugin-list-model.test.mjs |
Tests plugin list validation. |
tests/private-visual.test.mjs |
Tests private-view visual tokens. |
tests/read-error-state.test.mjs |
Tests read error messaging. |
tests/related-row-draft.test.mjs |
Tests row draft parsing. |
tests/related-row-identity.test.mjs |
Tests safe row identities. |
tests/related-row-validation.test.mjs |
Tests typed row validation. |
tests/related-update-result.test.mjs |
Tests update readback. |
tests/theme-runtime.test.mjs |
Tests runtime theme application. |
tests/visual-foundation.test.mjs |
Tests theme contrast and entries. |
tests/workroom-draft-session.test.mjs |
Tests Workroom draft isolation. |
tests/workroom-runs.test.mjs |
Tests Workroom run projections. |
tests/workroom-space-ownership.test.mjs |
Tests Workroom ownership conflicts. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
🧠 Review effort: Balanced
Give feedback about Copilot approvals in this survey to enter a drawing for a $150 gift card.
Comment on lines
+140
to
+142
| hostRegistrations.reset() | ||
| // Published SDK has no removeTool. Preserve known IDs to avoid duplicate | ||
| // registrations; stale asynchronous calls are rejected by the epoch guard. |
Comment on lines
+1
to
+18
| export function numericFieldIssue(field, value) { | ||
| if (value == null) return field.required ? '请输入数字' : null | ||
| if (typeof value !== 'number' || !Number.isFinite(value)) return '请输入有效数字' | ||
| if (field.integer && !Number.isInteger(value)) return '须为整数' | ||
| if (typeof field.min === 'number' && value < field.min) return `不能小于 ${field.min}` | ||
| if (typeof field.max === 'number' && value > field.max) return `不能大于 ${field.max}` | ||
| return null | ||
| } | ||
|
|
||
| export function numericConfigInvalid(fields, config) { | ||
| return Object.entries(fields).some(([key, field]) => { | ||
| const value = config?.[key] ?? field.default | ||
| if (field.type === 'number') return Boolean(numericFieldIssue(field, value)) | ||
| if (field.type === 'object' && value && typeof value === 'object') return numericConfigInvalid(field.object ?? field.properties ?? {}, value) | ||
| if (field.type === 'list' && Array.isArray(value) && field.inner) return value.some(item => numericConfigInvalid({item:field.inner}, {item})) | ||
| return false | ||
| }) | ||
| } |
| info: infoRead.data, tables: tablesRead.data, loaded: tablesRead.loaded, | ||
| loading: infoRead.loading || tablesRead.loading, error: tablesRead.error || infoRead.error, | ||
| loadInfo: infoRead.refresh, loadTables: tablesRead.refresh, | ||
| dropTable: async (table: string) => { const result = await manager.dbDropTable(table); await tablesRead.refresh(); return result }, |
| ...editorFontStyle, | ||
| color: 'transparent', | ||
| caretColor: 'hsl(var(--foreground))', | ||
| caretColor: 'var(--foreground)', |
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
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.
问题与结果
控制台存在读取失败被当作空列表、保存失败丢反馈、历史投影字段错配，以及全局连接状态被误用作机器人状态等问题。本 PR 按用户操作路径修复查询、详情、表单草稿、保存/重试、分页与只读边界，并统一导航和错误恢复。
视觉层统一明暗主题、响应式字体/圆角/边框与半透明柔影；组件画廊直接展示真实预览，使用弹性列宽瀑布流，详情改为抽屉。项目文件与 JSON 使用 highlight.js GitHub 主题，高级信息默认折叠。
验证
范围限制
全部页面、设备、不可逆操作和实时并发边界尚未全面验收。配套 Host 合同修复位于 zhinjs/zhin #692；这份 PR 不部署线上站点。
当前 head 的 push 与 PR 两次 Console CI 均通过：冻结安装、类型检查、149 测试与构建。