{"_id":"@alphatraderone/agentic-ui","name":"@alphatraderone/agentic-ui","dist-tags":{"latest":"0.3.2"},"versions":{"0.3.2":{"name":"@alphatraderone/agentic-ui","version":"0.3.2","description":"Reusable React UI and interaction primitives for agentic applications.","license":"UNLICENSED","repository":{"type":"git","url":"git+https://github.com/AlphaTraderOne/agentic-ui.git"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"type":"module","main":"./dist-library/agentic-ui.cjs","module":"./dist-library/agentic-ui.js","types":"./dist-library/types/index.d.ts","exports":{".":{"types":"./dist-library/types/index.d.ts","import":"./dist-library/agentic-ui.js","require":"./dist-library/agentic-ui.cjs","default":"./dist-library/agentic-ui.js"},"./style.css":"./dist-library/agentic-ui.css","./theme.css":"./src/theme/theme.css","./agent-guides/index.json":"./dist-library/agent-guides/index.json","./agent-guides/*":"./dist-library/agent-guides/*"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite --host 127.0.0.1","build":"npm run build:app && npm run build:lib","build:app":"tsc -b && vite build","build:lib":"vite build --config vite.config.library.ts && node scripts/copy-agent-guides.mjs && tsc -p tsconfig.library.json --pretty false","check":"npm run typecheck && npm run lint && npm run test:interaction && npm run test:workflow && npm run test:consumer-hardening && npm run build && npm run test:consumer-package && npm run test:security","typecheck":"tsc -b --pretty false","lint":"eslint .","test:interaction":"node --test scripts/interaction-contracts.test.mjs","test:security":"node --test scripts/rich-text-security.test.mjs","test:consumer-hardening":"node --test scripts/consumer-hardening-contract.test.mjs","test:consumer-package":"node --test scripts/package-consumer-import.test.mjs","test:workflow":"node --test scripts/package-workflow-contract.test.mjs","prepack":"npm run build:lib","pack:check":"npm pack --dry-run"},"dependencies":{"@codemirror/commands":"^6.10.4","@codemirror/lang-javascript":"^6.2.5","@codemirror/lang-json":"^6.0.2","@codemirror/lang-python":"^6.2.1","@codemirror/lang-sql":"^6.10.0","@codemirror/lang-yaml":"^6.1.3","@codemirror/language":"^6.12.4","@codemirror/state":"^6.7.0","@codemirror/view":"^6.43.4","@lezer/highlight":"^1.2.3","dompurify":"3.4.14","lucide-react":"^0.468.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@eslint/js":"^9.17.0","@types/react":"^19.0.1","@types/react-dom":"^19.0.2","@vitejs/plugin-react":"^4.3.4","eslint":"^9.17.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.16","globals":"^15.14.0","jsdom":"29.1.1","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.2","typescript-eslint":"^8.18.2","vite":"^6.0.5"},"_id":"@alphatraderone/agentic-ui@0.3.2","bugs":{"url":"https://github.com/AlphaTraderOne/agentic-ui/issues"},"homepage":"https://github.com/AlphaTraderOne/agentic-ui#readme","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-LwLcpwpQ48spCKPf9A5SmhuQ1zsE9IxUOemLdq3PYwZpc4bOeyTB+GNFTBfVfReshB73coPYrQbaFp/TLoHhAw==","shasum":"36915a718b028570f0751cb89b3351ca06d55753","tarball":"https://registry.npmjs.org/@alphatraderone/agentic-ui/-/agentic-ui-0.3.2.tgz","fileCount":925,"unpackedSize":1828282,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCnuq+cPL1QOVcZj1uWTllw+txhJFbgVCzSzpZwVziZswIgB9IzZ0bWPQjUOBEv7Bp3XRHPZUL2Vm3zaGcTSmxoc6w="}]},"_npmUser":{"name":"etleli","email":"eliasetl7@gmail.com"},"directories":{},"maintainers":[{"name":"etleli","email":"eliasetl7@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/agentic-ui_0.3.2_1788348664980_0.88180277672142"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T11:31:04.315Z","0.3.2":"2026-09-02T11:31:05.135Z","modified":"2026-09-02T11:31:05.887Z"},"maintainers":[{"name":"etleli","email":"eliasetl7@gmail.com"}],"description":"Reusable React UI and interaction primitives for agentic applications.","homepage":"https://github.com/AlphaTraderOne/agentic-ui#readme","repository":{"type":"git","url":"git+https://github.com/AlphaTraderOne/agentic-ui.git"},"bugs":{"url":"https://github.com/AlphaTraderOne/agentic-ui/issues"},"license":"UNLICENSED","readme":"# Agentic UI Components\r\n[![npm version](https://img.shields.io/npm/v/%40alphatraderone%2Fagentic-ui)](https://www.npmjs.com/package/@alphatraderone/agentic-ui)\r\n\r\nThis repository is a standalone React/TypeScript component-library workbench for\r\nAgentic UI: reusable controls, layouts, graph/canvas interactions, menus,\r\neditors, and related application UI infrastructure. It is intentionally separate\r\nfrom backend, auth, data services, and application-specific execution code.\r\n\r\nThe app is currently a library workshop: theme editing on the left, component\r\nselection and preview controls on the right.\r\n\r\n## Run Locally\r\n\r\n```bash\r\nnpm ci\r\nnpm run dev\r\n```\r\n\r\nThe active local workshop is available at `http://127.0.0.1:5174/` in this\r\nworkspace.\r\n\r\nUseful checks:\r\n\r\n```bash\r\nnpm run typecheck\r\nnpm run lint\r\nnpm run build\r\n```\r\n\r\n`npm run build` builds both outputs:\r\n\r\n- `dist/`: the local component workbench.\r\n- `dist-library/`: the reusable component package with JavaScript, CSS, and\r\n  TypeScript declarations.\r\n\r\nFor package-specific details, see `docs/library-development.md`.\r\nFor container sizing, unavailable actions, graph helpers, and the consumer\r\nmigration handoff, see `docs/consumer-hardening.md`.\r\n\r\n## Install The Package\r\n\r\nAfter its manual bootstrap publication, the package is publicly available from\r\nnpmjs. Install it without a registry override, a GitHub personal access token,\r\nor a project `.npmrc` scope mapping:\r\n\r\n```bash\r\nnpm install @alphatraderone/agentic-ui\r\n```\r\n\r\nThe public package entry is `src/index.ts`. A consuming React app should import\r\nthe generated CSS once and then import components and types from the package:\r\n\r\n```tsx\r\nimport '@alphatraderone/agentic-ui/style.css';\r\n\r\nimport {\r\n  AppShell,\r\n  Button,\r\n  DataTable,\r\n  NodeCanvas,\r\n  ContextMenu,\r\n} from '@alphatraderone/agentic-ui';\r\n\r\nimport type {\r\n  ButtonProps,\r\n  DataTableColumn,\r\n  NodeCanvasProps,\r\n} from '@alphatraderone/agentic-ui';\r\n```\r\n\r\nThe generated `style.css` already includes the base tokens because the library\r\nentry imports `src/theme/theme.css`. The package also exposes a standalone token\r\nentry for consumers that need the theme without all component styles:\r\n\r\n```tsx\r\nimport '@alphatraderone/agentic-ui/theme.css';\r\n```\r\n\r\nDo not import both files merely to obtain the tokens; `style.css` already\r\ncontains them.\r\n\r\n### Rich text security\r\n\r\n`RichTextViewer` treats its `html` input as plain text by default. Passing\r\n`trusted={true}` explicitly enables rich HTML rendering, but does not bypass the\r\nsecurity boundary: the component sanitizes the value immediately before the\r\nReact HTML sink with the exact pinned DOMPurify version. Consumers must still\r\napply their own authorization and data-classification rules before choosing the\r\nrich rendering mode.\r\n\r\n### Test The Packed Package Locally\r\n\r\nBuild and inspect the exact package contents:\r\n\r\n```bash\r\nnpm run build:lib\r\nnpm run pack:check\r\nnpm pack\r\n```\r\n\r\nInstall the generated archive in another repository:\r\n\r\n```bash\r\nnpm install ../path/to/alphatraderone-agentic-ui-x.y.z.tgz\r\n```\r\n\r\nTarball testing validates the published file whitelist, package exports,\r\nruntime dependencies, CSS, and declarations rather than relying on source\r\nimports or repository-only path resolution. Delete the temporary archive after\r\ntesting.\r\n\r\n### Maintainer Publishing\r\n\r\nThe publishing procedure is documented in `docs/publishing.md`. It describes the\r\none-time manual bootstrap of `0.3.2` before later npm trusted-publishing/OIDC\r\nreleases. Do not add npm credentials or registry configuration to this repository.\r\n\r\n### Package migration\r\n\r\nThe package was renamed from `@alphatraderone/agentic-trading-ui` to\r\n`@alphatraderone/agentic-ui` starting with version `0.3.2`. The old npm identity\r\nis retained only as a migration and future deprecation surface; use\r\n`@alphatraderone/agentic-ui` for all current installations and imports.\r\n\r\n## Reusable Integration Improvements\r\n\r\nThe library includes generic fixes identified while exercising components in a\r\nlarger integrated UI:\r\n\r\n- `ListView` supports built-in search, uncontrolled defaults, normalized\r\n  selection callbacks, and a non-selectable mode while retaining the legacy\r\n  `onSelect` callback.\r\n- `DataTable` and `PropertyList` support stable ID-based controlled and\r\n  uncontrolled selection in addition to their index APIs.\r\n- `NodeCanvas` supports generic marquee selection, panning, fit/zoom and grouped\r\n  drag utilities, shortcut hints, read-only ports, and explicit node-body\r\n  overflow.\r\n- `ToastProvider` and `useToast` provide reusable application-level toast state.\r\n- `AppShell`, `Tabs`, `AllocationBreakdown`, and `LogIndicator` include focused\r\n  layout, semantics, and history-accessibility corrections.\r\n\r\nThe complete integrated application workspace, its routing, mock data,\r\nconfiguration editing, and Obsidian-specific graph view are intentionally not\r\npart of the package surface.\r\n\r\n## Theme\r\n\r\nTheme tokens live in:\r\n\r\n- `src/theme/theme.css`: base CSS variables and typography.\r\n- `src/theme/theme.config.json`: persisted editable theme values.\r\n\r\nThe workshop can save theme values globally through the local Vite middleware.\r\nComponents should use theme variables for color, spacing, and radius unless a\r\ndata-specific override is part of the component API.\r\n\r\n## Components\r\n\r\nReusable components live under `src/components/`.\r\n\r\nCurrent component groups:\r\n\r\n- `inputs/Button`: momentary and toggle action buttons with text and icon content.\r\n- `inputs/Checkbox`: binary check control with label and supporting text.\r\n- `inputs/ColorInput`: color picker with editable hex value.\r\n- `inputs/Dropdown`: theme-driven single-select and multi-select dropdowns with\r\n  optional item color markers.\r\n- `inputs/NumberInput`: numeric field for thresholds and limits.\r\n- `inputs/SearchInput`: search field with icon and clear affordance.\r\n- `inputs/Slider`: range input for numeric thresholds.\r\n- `inputs/TextArea`: multiline text input with auto-resize, read-only, resize,\r\n  and counter options.\r\n- `inputs/TextInput`: single-line text field.\r\n- `forms/FormField`: reusable label, helper text, required marker, and\r\n  validation wrapper.\r\n- `forms/FormGroup`: grouped form surface with responsive field columns.\r\n- `forms/OptionPicker`: card or chip picker for single and multi-selection.\r\n- `forms/DatePicker`: themed calendar picker with month navigation.\r\n- `forms/TimePicker`: scrollable time picker with configurable step size.\r\n- `forms/DateRangePicker`: composed start/end date range picker with presets.\r\n- `forms/FilePicker`: drag/drop or browse file-name picker without upload\r\n  behavior.\r\n- `layout/AppShell`: full application frame with top bar, sidebar, content,\r\n  inspector, and status bar slots.\r\n- `layout/TopBar`: brand, workspace identity, status text, and action area.\r\n- `layout/SidebarNav`: selectable app navigation with optional collapsed rail.\r\n- `layout/PageHeader`: page-level heading, context text, metadata, and actions.\r\n- `layout/SplitPane`: two-pane layout with draggable horizontal or vertical\r\n  divider.\r\n- `layout/ResizablePanel`: adjustable side or stacked panel for inspectors and\r\n  editor panes.\r\n- `layout/StatusBar`: compact app status strip for runtime and mode signals.\r\n- `activity/Timeline`: ordered event timeline for strategy runs and audit trails.\r\n- `activity/ActivityFeed`: live activity stream with sources, timestamps, and\r\n  state badges.\r\n- `activity/WorkflowStepper`: clickable workflow stepper for process stages.\r\n- `activity/RunQueue`: queued workflow runs with progress, status, and actions.\r\n- `advanced-data/DatasetSummary`: dataset health summary with quality, coverage,\r\n  freshness, issues, and selectable metrics.\r\n- `advanced-data/FieldProfile`: selected-field profile with facts,\r\n  completeness, uniqueness, and distribution buckets.\r\n- `advanced-data/QueryResultPanel`: query result surface with execution summary,\r\n  query text, and selectable preview table.\r\n- `advanced-data/DataQualityPanel`: validation checklist with quality score and\r\n  selectable checks.\r\n- `content/MarkdownViewer`: theme-driven markdown renderer with raw HTML kept as\r\n  text.\r\n- `content/TextOutput`: read-only multiline output with wrapping, copy action,\r\n  max-height, and themed scrollbar.\r\n- `charts/TimeSeriesChart`: theme-driven line or area series chart.\r\n- `charts/CandlestickChart`: OHLC candle chart with optional volume bars.\r\n- `charts/VolumeBars`: absolute or signed volume bar visualization.\r\n- `charts/DepthChart`: bid/ask order book depth visualization.\r\n- `charts/EquityCurve`: portfolio equity curve with benchmark and drawdown.\r\n- `charts/CorrelationHeatmap`: matrix heatmap for symbol correlations.\r\n- `trading/PriceDisplay`: formatted price display with optional symbol and\r\n  currency code.\r\n- `trading/PnLDisplay`: signed profit/loss display with amount and percentage.\r\n- `trading/OrderStatus`: order lifecycle badge using the shared status badge.\r\n- `trading/PositionSummary`: compact position, exposure, and P/L card.\r\n- `trading/MarketStateBadge`: market session state badge.\r\n- `trading/LatencyIndicator`: latency pill with threshold-based tones.\r\n- `trading/OrderTicket`: order-entry shell using library inputs and buttons.\r\n- `trading/Watchlist`: selectable quote list with price, P/L, and sparkline.\r\n- `trading/PositionsTable`: sortable position table built on `DataTable`.\r\n- `trading/TradeBlotter`: sortable order blotter built on `DataTable`.\r\n- `trading/StrategyCard`: strategy state and metric summary card.\r\n- `trading/RiskLimitPanel`: portfolio guardrail panel with progress indicators.\r\n- `trading/QuoteTile`: compact quote card with spread, volume, and trend.\r\n- `trading/MarketTicker`: horizontally scrollable quote ticker.\r\n- `editors/CodeEditor`: CodeMirror-based editor with line numbers, syntax\r\n  highlighting, wrapping, read-only mode, and controlled values.\r\n- `lists/ListView`: searchable, controlled or uncontrolled rows for compact\r\n  navigation, status lists, and component catalogs.\r\n- `navigation/Accordion`: collapsible sections for inspectors and settings.\r\n- `navigation/Breadcrumb`: path display and navigation.\r\n- `navigation/ColumnExplorer`: Finder-style cascading column browser for\r\n  hierarchical workspaces, configs, and generated assets.\r\n- `navigation/CommandMenu`: keyboard-first command picker.\r\n- `navigation/Tabs`: view switching for compact panels.\r\n- `navigation/TreeView`: nested hierarchy for compact sidebars.\r\n- `node-system/NodeCanvas`: graph workspace with selection, panning, fit/zoom,\r\n  shortcut hints, and host-controlled node models.\r\n- `node-system/Node`: reusable node body with status, content, and ports.\r\n- `node-system/NodePort`: input or output connection anchor.\r\n- `node-system/NodeEdge`: connection path between node ports.\r\n- `node-system/NodeToolbar`: canvas action row for node tools.\r\n- `node-system/NodePalette`: searchable template list for adding node types.\r\n- `node-system/NodeInspector`: selected-node detail and configuration panel.\r\n- `node-system/NodeMiniMap`: graph overview with selected-node and viewport\r\n  tracking.\r\n- `overlays/Tooltip`: compact hover and focus hint.\r\n- `overlays/Popover`: anchored floating content for quick settings.\r\n- `overlays/ContextMenu`: right-click or action menu surface.\r\n- `overlays/Modal`: blocking dialog for confirmations and focused workflows.\r\n- `overlays/Drawer`: side or bottom panel for details.\r\n- `overlays/Toast`: transient notification and action feedback, with optional\r\n  `ToastProvider` and `useToast` state management.\r\n- `data-display/DataTable`: dense sortable table for runtime records.\r\n- `data-display/PropertyList`: key-value facts for inspectors.\r\n- `data-display/MetricCard`: compact KPI or status summary.\r\n- `feedback/LoadingIndicator`: indeterminate loading feedback.\r\n- `feedback/ProgressBar`: determinate and indeterminate progress display.\r\n- `feedback/Skeleton`: placeholder loading surfaces.\r\n- `feedback/StatusBadge`: compact state badge.\r\n- `feedback/DeltaIndicator`: positive, negative, or neutral movement display.\r\n- `feedback/RiskIndicator`: severity indicator for risk states.\r\n- `feedback/LogIndicator`: live log indicator with optional accessible recent\r\n  history.\r\n- `feedback/ConnectionIndicator`: connectivity status indicator.\r\n- `feedback/HealthMeter`: compact health score meter.\r\n- `feedback/SignalStrength`: signal quality indicator.\r\n- `feedback/TrendSparkIndicator`: tiny sparkline indicator.\r\n- `feedback/CountBadge`: notification count badge.\r\n- `feedback/FreshnessIndicator`: data freshness marker.\r\n- `surfaces/Card`: repeated content surface for summaries and selectable blocks.\r\n- `surfaces/Divider`: horizontal and vertical separator with optional labels.\r\n- `surfaces/EmptyState`: themed placeholder for empty or unconfigured regions.\r\n- `surfaces/Panel`: standard container for tool areas and inspectors.\r\n- `surfaces/Section`: titled content region with optional disclosure.\r\n- `surfaces/Toolbar`: dense action row or column for local tools.\r\n\r\nFor the full workflow, see:\r\n\r\n- `docs/component-authoring.md`\r\n- `docs/library-development.md`\r\n- `docs/component-roadmap.md`\r\n\r\n## Boundaries\r\n\r\nThis repo is UI component work only. It contains no trading logic, no broker or\r\nprovider calls, no real-time market-data connection, no order placement, no auth,\r\nand no secret handling.\r\n","readmeFilename":"README.md","_rev":"1-3dd7311dfccbe104d3e0e045e534862d"}