Incomex AI Portal
KB-6F29

ASSEMBLY-STEP1 — UI Components Inventory Report

14 min read Revision 1
reportassemblyinventorynuxt-ui

ASSEMBLY-STEP1: UI Components Inventory Report

Date: 2026-03-05 Mission: Investigate inventory of all UI components available and in-use

PART A — INSTALLED LIBRARIES

A1. Package Dependencies

UI Libraries:

Package Version Purpose
@nuxt/ui ^2.18.2 (resolved: 2.22.3) Primary UI component library
@headlessui/vue ^1.7.23 Unstyled accessible components
@tailwindcss/forms ^0.5.10 Form element resets
@tailwindcss/typography ^0.5.16 Prose styling
@nuxt/icon ^1.11.0 Icon system
@nuxt/image ^1.10.0 Image optimization
@nuxtjs/color-mode ^3.5.2 Dark/light mode

Directus:

Package Version Purpose
@directus/sdk ^19.1.0 Directus REST/GraphQL client

Utilities:

Package Version Purpose
@vueuse/core ^13.0.0 Vue composition utilities
@vueuse/nuxt ^13.0.0 VueUse Nuxt integration
@vueuse/motion ^3.0.3 Animation/motion
@formkit/auto-animate ^0.8.2 Auto-animate transitions
diff ^8.0.2 Text diff library
uuid ^11.1.0 UUID generation
micromark ^4.0.2 Markdown parser
vue-dompurify-html ^5.2.0 HTML sanitization

Platform:

Package Version Purpose
nuxt ^3.20.1 Framework
firebase ^12.6.0 Auth + hosting
@sentry/nuxt ^10.36.0 Error tracking
@stripe/stripe-js ^6.1.0 Payments
@nuxtjs/i18n ^10.2.1 Internationalization
@nuxtjs/seo ^3.0.1 SEO meta/sitemap

Agency OS: NOT a separate module or layer. Just the app brand name (fallback title in app.vue).

A2. Nuxt Config

Modules registered (8):

  1. @nuxt/image
  2. @nuxt/ui
  3. @nuxtjs/color-mode
  4. @nuxtjs/google-fonts
  5. @nuxtjs/seo
  6. @formkit/auto-animate/nuxt
  7. @vueuse/motion/nuxt
  8. @vueuse/nuxt
  9. @nuxt/icon

Layers (2):

  1. ./layers/proposals — Proposal/signature module (components prefixed Proposals)
  2. ./layers/portal — Client portal (components prefixed Portal, 15 components, Stripe integration)

Theme: Primary=violet, Gray=slate, BorderRadius=lg, Fonts: Inter, Poppins, Fira Code

A3. Nuxt UI Components — Usage Map

USED (23 components):

Component Count Primary Locations
UButton 48 Throughout (portal, navigation, admin, blocks)
UIcon 30 Throughout
UCard 13 Portal tasks/files, admin, projects
UTable 8 Portal TaskList/Widget, MessageList, admin/users
UBadge 7 TaskList, MessageList, KnowledgeTree, projects
UInput 6 TaskList, LoginForm
UKbd 5 GlobalSearch, VGallery
UForm 4 Task.vue, blocks/Form, TheFooter
USelectMenu 3 Task.vue
UModal 3 FileUploadModal, GlobalSearch
UCommandPalette 2 PortalSearch, GlobalSearch
UFormGroup 2 LoginForm
UTooltip 2 FileCard
USlideover 2 TaskList, TaskWidget
UPagination 2 TaskWidget
UContainer 2 Task.vue
UDropdown 2 FileCard
UAvatar 2 UserBadge
UTextarea 2 Various forms
UAccordion 1 blocks/Faqs
UAlert 1 LoginForm
UNotifications 1 Auto-imported
USelect 1 Various

NOT USED but AVAILABLE in Nuxt UI v2:

Component Purpose Potential Use
UTimeline Vertical timeline Could replace StepsTimeline.vue
UStepper Step-by-step progress Could replace step status UI
UPopover Positioned popover Could replace custom column description popover
UProgress Progress bars Step completion visualization
USkeleton Loading placeholders Better loading states
UDivider Section separator Table/section dividers
URadio Radio buttons Form selections
UToggle Toggle switches Boolean settings
UChip Small tags Status indicators
UMeter Meter/gauge Progress metrics
URange Slider input Numeric inputs
UTabs Tab navigation Replace custom tab nav in workflow detail
UBreadcrumb Breadcrumb nav Replace custom breadcrumb in workflow detail
UNavigationMenu Navigation Side navigation

A4. Agency OS

Finding: Agency OS is NOT a module, layer, or library. It's purely the app brand name used as fallback title in app.vue line 10: name: globals?.title ?? 'AgencyOS'. No separate components, composables, or configuration.

A5. Directus SDK & Composables

Version: @directus/sdk 19.1.0

17 Composables in web/composables/:

Composable Purpose
useAIDiscussions.ts AI Discussion System (WEB-39)
useAgentData.ts Agent Data search & logging
useAgentDataHealth.ts Agent Data health check
useAgentViews.ts Agent documentation views
useBlueprints.ts Blueprint documents
useCheckpoints.ts 3-tier task checkpoints (M-001)
useContentRequests.ts Content approval desk (E1)
useDOTConsole.ts DOT command interpreter (WEB-45)
useDirectusTable.ts Schema-driven tables (S101)
useKnowledge.ts Knowledge documents
useKnowledgeHistory.ts Document version history
useKnowledgeTree.ts Knowledge tree structure
useScroll.ts Page scroll tracking
useStepCheckpoints.ts Per-step checkpoints (M-002)
useTasks.ts Task management
useTaxonomyTree.ts Knowledge taxonomy
useWorkflows.ts Workflow DSL (M-002)

PART B — CUSTOM CODE NEEDING REPLACEMENT

B1. Custom Tables (6 files)

File Lines Purpose Replace with?
components/shared/DirectusDataTable.vue 639 Generic schema-driven table KEEP — this IS the standard component
components/modules/.../WorkflowMatrixView.vue 279 Workflow steps matrix Already replaced by DirectusDataTable (PR #440)
components/modules/.../ProcessRegistryView.vue 389 Workflow registry with hierarchy DirectusDataTable + custom slots
pages/knowledge/current-tasks/index.vue 217 Task list table DirectusDataTable
pages/approval-desk/index.vue 333 Approval desk table DirectusDataTable
pages/knowledge/workflows/[id].vue (diagram tab compact table) ~80 Compact steps table in diagram Keep as-is (special layout with checkboxes + status coloring)

Estimate: 3 files need DirectusDataTable migration (ProcessRegistryView, current-tasks, approval-desk)

B2. Custom Timeline/Stepper (1 file)

File Lines Purpose Replace with?
components/modules/.../StepsTimeline.vue 317 Vertical timeline with accordion UTimeline could provide base; custom features (checkboxes, insert marks, accordion) would need slots/extensions

Assessment: StepsTimeline is highly customized (3-state coloring, accordion expand, checkboxes, insert marks). UTimeline provides a simpler base. Partial migration possible but may not save LOC.

B3. Custom Form Elements (19 files)

Files with raw HTML form elements (not using Nuxt UI):

Category Files Elements Replace with?
Search inputs DirectusDataTable, ProcessRegistryView <input type="text"> UInput
Filter dropdowns DirectusDataTable, ProcessRegistryView, approval-desk <select> USelect / USelectMenu
Textareas ProposalPopup, InlineWcrPopup, WcrIntakePanel, narrative editor <textarea> UTextarea
Checkboxes StepsTimeline, workflows/[id].vue <input type="checkbox"> UCheckbox
Auth forms login.vue, register.vue, forgot-password.vue <input> Already partially using UFormGroup+UInput
Comment input CommentInput.vue <textarea> UTextarea
File upload VUpload.vue <input type="file"> Keep (specialized)
Admin forms admin/users.vue <input>, <select> UInput, USelect

Estimate: ~15 files could benefit from Nuxt UI form components

B4. Custom Popups/Modals (8+ files)

File Type Replace with?
shared/ProposalPopup.vue Absolute popup UPopover or UModal
modules/.../InlineWcrPopup.vue Absolute popup UPopover
shared/DirectusDataTable.vue (column desc) Absolute popover UPopover
ai/DetailPanel.vue Side panel USlideover
ai/CreateDiscussionModal.vue Modal UModal
navigation/MobileMenu.vue Full overlay Keep (already functional)
base/VGallery.vue Lightbox UModal
knowledge-tree/index.vue Popup UPopover

Estimate: ~5 files could use UModal/UPopover/USlideover

PART C — GAP ANALYSIS

C1. Feature Comparison

Feature Nuxt UI Used? Custom Code? Gap
Data table (sort/filter/page) UTable Yes (8x in portal) Yes (DirectusDataTable, 3 custom tables) Mixed — UTable used in portal, DirectusDataTable in knowledge. Need standardization.
Timeline vertical UTimeline No Yes (StepsTimeline 317 lines) GAP — available but unused
Stepper/Progress UStepper No No (custom step status via classes) GAP — available but unused
Checkbox UCheckbox No Yes (raw HTML in 2 files) GAP — easy swap
Accordion/Expand UAccordion Yes (1x Faqs) Yes (custom in StepsTimeline) Partial — used once, custom elsewhere
Tooltip UTooltip Yes (2x FileCard) Yes (custom title attrs) Partial — underused
Popover UPopover No Yes (5+ custom implementations) GAP — available but unused
Modal/Dialog UModal Yes (3x) Yes (5+ custom popups) Partial — UModal used, but many custom popups
Form validation UForm Yes (4x) Yes (manual validation) Partial — used in portal, not in knowledge
Editor/Rich text N/A N/A Basic textarea only External needed — Nuxt UI has no rich text editor
Badge/Tag UBadge Yes (7x) Yes (custom span badges everywhere) Partial — used in portal, custom in knowledge
Tabs UTabs No Yes (custom NuxtLink tabs in workflow detail) GAP — available but unused
Breadcrumb UBreadcrumb No (configured) Yes (custom in workflow detail) GAP — configured but unused
Pagination UPagination Yes (2x portal) Yes (custom in DirectusDataTable) Partial — used in portal, custom in knowledge
Toast/Notification UNotifications Yes (auto) Plus custom alert() calls Partial — need to replace alert()
Navigation menu UNavigationMenu No Custom TheHeader/MobileMenu GAP — available but unused
Slideover USlideover Yes (2x portal) Custom side panels elsewhere Partial
Skeleton loading USkeleton No Custom animate-spin divs GAP — available but unused
Progress UProgress No No progress bars GAP — could enhance UX
Command palette UCommandPalette Yes (2x) N/A Done
Dropdown UDropdown Yes (2x) N/A Done
Avatar UAvatar Yes (2x) N/A Done

C2. Recommendations

No packages to install — Nuxt UI v2 already provides everything needed.

Upgrade consideration:

  • Current: Nuxt UI 2.22.3 (via ^2.18.2)
  • Nuxt UI v3 (Pro) is available but would require Tailwind v4 migration — NOT recommended now.
  • Current v2 is sufficient for all assembly needs.

Missing capabilities (need external):

Need Options
Rich text editor TipTap, Quill, or ProseMirror
Charting/graphs Chart.js, ApexCharts, or D3
Drag and drop VueDraggable, @formkit/drag-and-drop
File upload progress Custom or tus.io

SUMMARY — Assembly Readiness

Files to Migrate (estimated)

Priority File Migration Effort
P1 ProcessRegistryView.vue (389 lines) -> DirectusDataTable Medium
P1 current-tasks/index.vue (217 lines) -> DirectusDataTable Low
P1 approval-desk/index.vue (333 lines) -> DirectusDataTable Medium
P2 ProposalPopup.vue (180 lines) -> UPopover/UModal Low
P2 InlineWcrPopup.vue (100 lines) -> UPopover Low
P2 Column description popover in DDT -> UPopover Low
P2 Workflow tabs (custom NuxtLink) -> UTabs Low
P2 Workflow breadcrumb (custom) -> UBreadcrumb Low
P3 15 files with raw form elements -> UInput/USelect/UCheckbox/UTextarea Low each
P3 Custom loading spinners -> USkeleton Low each
P3 Custom alert() calls -> useToast() Low each

Totals

  • P1 (Custom tables -> DirectusDataTable): 3 files, ~939 lines of custom code
  • P2 (Custom popups/UI -> Nuxt UI): 5 files, ~400 lines
  • P3 (Form elements + polish): ~15 files, incremental changes
  • Total estimated files to touch: ~23 files
  • Custom LOC to replace/simplify: ~1,500+ lines

Key Insight

The codebase has a two-world problem: Portal layer uses Nuxt UI extensively (UTable, UForm, USlideover, UPagination), while the Knowledge/Workflow modules use entirely custom HTML. Assembly means bringing Knowledge/Workflow modules up to the same Nuxt UI standard as the Portal layer.