From 9b79d0a4e0cce0514f393bcbd49374f3fcc20302 Mon Sep 17 00:00:00 2001
From: Kevin Paxton <kevinpaxton82@gmail.com>
Date: Fri, 22 Sep 2023 12:27:13 +0100
Subject: [PATCH] Reorganise components for exporting (#72)

---
 packages/webui/src/App.tsx                                | 4 ++--
 packages/webui/src/components/Authorization.test.tsx      | 2 +-
 packages/webui/src/components/Authorization.tsx           | 2 +-
 packages/webui/src/components/{ui => }/Button.test.tsx    | 0
 packages/webui/src/components/{ui => }/Button.tsx         | 0
 packages/webui/src/components/{ui => }/Code.test.tsx      | 0
 packages/webui/src/components/{ui => }/Code.tsx           | 0
 packages/webui/src/components/{ui => }/DateTime.test.tsx  | 0
 packages/webui/src/components/{ui => }/DateTime.tsx       | 0
 packages/webui/src/components/{ui => }/DropDown.test.tsx  | 0
 packages/webui/src/components/{ui => }/DropDown.tsx       | 0
 packages/webui/src/components/{ui => }/Fields.test.tsx    | 0
 packages/webui/src/components/{ui => }/Fields.tsx         | 0
 .../webui/src/components/{ui => }/IconButton.test.tsx     | 0
 packages/webui/src/components/{ui => }/IconButton.tsx     | 0
 packages/webui/src/components/{ui => }/Input.test.tsx     | 0
 packages/webui/src/components/{ui => }/Input.tsx          | 0
 .../webui/src/components/{ui => }/JsonDisplay.test.tsx    | 0
 packages/webui/src/components/{ui => }/JsonDisplay.tsx    | 0
 packages/webui/src/components/KeyValueList.test.tsx       | 2 +-
 packages/webui/src/components/KeyValueList.tsx            | 2 +-
 packages/webui/src/components/{ui => }/Label.test.tsx     | 0
 packages/webui/src/components/{ui => }/Label.tsx          | 0
 packages/webui/src/components/{ui => }/Loading.test.tsx   | 0
 packages/webui/src/components/{ui => }/Loading.tsx        | 0
 .../webui/src/components/{ui => }/SearchInput.test.tsx    | 0
 packages/webui/src/components/{ui => }/SearchInput.tsx    | 0
 packages/webui/src/components/{ui => }/Section.test.tsx   | 0
 packages/webui/src/components/{ui => }/Section.tsx        | 0
 .../webui/src/components/{ui => }/XmlDisplay.test.tsx     | 0
 packages/webui/src/components/{ui => }/XmlDisplay.tsx     | 0
 packages/webui/src/components/{ui => }/index.ts           | 3 +++
 .../src/components/{ => ui}/ConnectionStatus.test.tsx     | 2 +-
 .../webui/src/components/{ => ui}/ConnectionStatus.tsx    | 2 +-
 .../webui/src/components/{ => ui}/DebugToolbar.test.tsx   | 0
 packages/webui/src/components/{ => ui}/DebugToolbar.tsx   | 3 +--
 .../src/components/{ => ui}/FiltersAndActions.test.tsx    | 4 ++--
 .../webui/src/components/{ => ui}/FiltersAndActions.tsx   | 2 +-
 packages/webui/src/components/{ => ui}/Header.test.tsx    | 6 +++---
 packages/webui/src/components/{ => ui}/Header.tsx         | 0
 .../webui/src/components/{ => ui}/MainDisplay.test.tsx    | 4 ++--
 packages/webui/src/components/{ => ui}/MainDisplay.tsx    | 4 ++--
 .../webui/src/components/{ => ui}/QueryParams.test.tsx    | 0
 packages/webui/src/components/{ => ui}/QueryParams.tsx    | 3 +--
 .../webui/src/components/{ => ui}/RequestHeaders.test.tsx | 2 +-
 packages/webui/src/components/{ => ui}/RequestHeaders.tsx | 5 ++---
 .../src/components/{ => ui}/ResponseHeaders.test.tsx      | 2 +-
 .../webui/src/components/{ => ui}/ResponseHeaders.tsx     | 5 ++---
 .../webui/src/components/{ => ui}/TraceDetail.test.tsx    | 8 ++++----
 packages/webui/src/components/{ => ui}/TraceDetail.tsx    | 2 +-
 packages/webui/src/components/{ => ui}/TraceList.test.tsx | 2 +-
 packages/webui/src/components/{ => ui}/TraceList.tsx      | 2 +-
 .../src/components/{ => ui}/TraceRequestData.test.tsx     | 0
 .../webui/src/components/{ => ui}/TraceRequestData.tsx    | 0
 packages/webui/src/systems/GraphQL.test.tsx               | 2 +-
 packages/webui/src/systems/GraphQL.tsx                    | 2 +-
 packages/webui/src/systems/Sanity.test.tsx                | 2 +-
 packages/webui/src/systems/Sanity.tsx                     | 2 +-
 packages/webui/src/systems/index.tsx                      | 2 +-
 packages/webui/src/systems/systems.test.tsx               | 4 ++--
 60 files changed, 43 insertions(+), 44 deletions(-)
 rename packages/webui/src/components/{ui => }/Button.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Button.tsx (100%)
 rename packages/webui/src/components/{ui => }/Code.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Code.tsx (100%)
 rename packages/webui/src/components/{ui => }/DateTime.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/DateTime.tsx (100%)
 rename packages/webui/src/components/{ui => }/DropDown.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/DropDown.tsx (100%)
 rename packages/webui/src/components/{ui => }/Fields.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Fields.tsx (100%)
 rename packages/webui/src/components/{ui => }/IconButton.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/IconButton.tsx (100%)
 rename packages/webui/src/components/{ui => }/Input.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Input.tsx (100%)
 rename packages/webui/src/components/{ui => }/JsonDisplay.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/JsonDisplay.tsx (100%)
 rename packages/webui/src/components/{ui => }/Label.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Label.tsx (100%)
 rename packages/webui/src/components/{ui => }/Loading.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Loading.tsx (100%)
 rename packages/webui/src/components/{ui => }/SearchInput.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/SearchInput.tsx (100%)
 rename packages/webui/src/components/{ui => }/Section.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/Section.tsx (100%)
 rename packages/webui/src/components/{ui => }/XmlDisplay.test.tsx (100%)
 rename packages/webui/src/components/{ui => }/XmlDisplay.tsx (100%)
 rename packages/webui/src/components/{ui => }/index.ts (79%)
 rename packages/webui/src/components/{ => ui}/ConnectionStatus.test.tsx (97%)
 rename packages/webui/src/components/{ => ui}/ConnectionStatus.tsx (91%)
 rename packages/webui/src/components/{ => ui}/DebugToolbar.test.tsx (100%)
 rename packages/webui/src/components/{ => ui}/DebugToolbar.tsx (90%)
 rename packages/webui/src/components/{ => ui}/FiltersAndActions.test.tsx (97%)
 rename packages/webui/src/components/{ => ui}/FiltersAndActions.tsx (95%)
 rename packages/webui/src/components/{ => ui}/Header.test.tsx (94%)
 rename packages/webui/src/components/{ => ui}/Header.tsx (100%)
 rename packages/webui/src/components/{ => ui}/MainDisplay.test.tsx (95%)
 rename packages/webui/src/components/{ => ui}/MainDisplay.tsx (77%)
 rename packages/webui/src/components/{ => ui}/QueryParams.test.tsx (100%)
 rename packages/webui/src/components/{ => ui}/QueryParams.tsx (89%)
 rename packages/webui/src/components/{ => ui}/RequestHeaders.test.tsx (97%)
 rename packages/webui/src/components/{ => ui}/RequestHeaders.tsx (82%)
 rename packages/webui/src/components/{ => ui}/ResponseHeaders.test.tsx (97%)
 rename packages/webui/src/components/{ => ui}/ResponseHeaders.tsx (83%)
 rename packages/webui/src/components/{ => ui}/TraceDetail.test.tsx (99%)
 rename packages/webui/src/components/{ => ui}/TraceDetail.tsx (99%)
 rename packages/webui/src/components/{ => ui}/TraceList.test.tsx (99%)
 rename packages/webui/src/components/{ => ui}/TraceList.tsx (99%)
 rename packages/webui/src/components/{ => ui}/TraceRequestData.test.tsx (100%)
 rename packages/webui/src/components/{ => ui}/TraceRequestData.tsx (100%)

diff --git a/packages/webui/src/App.tsx b/packages/webui/src/App.tsx
index 74c2878..6e055d6 100644
--- a/packages/webui/src/App.tsx
+++ b/packages/webui/src/App.tsx
@@ -1,5 +1,5 @@
-import Header from '@/components/Header';
-import MainDisplay from '@/components/MainDisplay';
+import Header from '@/components/ui/Header';
+import MainDisplay from '@/components/ui/MainDisplay';
 import ApplicationContextProvider from '@/context/ApplicationContext';
 
 export default function App() {
diff --git a/packages/webui/src/components/Authorization.test.tsx b/packages/webui/src/components/Authorization.test.tsx
index 60eb4be..4e1892e 100644
--- a/packages/webui/src/components/Authorization.test.tsx
+++ b/packages/webui/src/components/Authorization.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import Authorization from './Authorization';
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Code: function ({ children, ...props }: any) {
     return <div {...props}>{children}</div>;
   },
diff --git a/packages/webui/src/components/Authorization.tsx b/packages/webui/src/components/Authorization.tsx
index f02ec60..353e195 100644
--- a/packages/webui/src/components/Authorization.tsx
+++ b/packages/webui/src/components/Authorization.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { HiChevronDown, HiChevronUp, HiCode, HiDotsHorizontal } from 'react-icons/hi';
 
-import { Code, IconButton, JsonDisplay } from '@/components/ui';
+import { Code, IconButton, JsonDisplay } from '@/components';
 import { safeParseJson, tw } from '@/utils';
 
 enum TokenType {
diff --git a/packages/webui/src/components/ui/Button.test.tsx b/packages/webui/src/components/Button.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Button.test.tsx
rename to packages/webui/src/components/Button.test.tsx
diff --git a/packages/webui/src/components/ui/Button.tsx b/packages/webui/src/components/Button.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Button.tsx
rename to packages/webui/src/components/Button.tsx
diff --git a/packages/webui/src/components/ui/Code.test.tsx b/packages/webui/src/components/Code.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Code.test.tsx
rename to packages/webui/src/components/Code.test.tsx
diff --git a/packages/webui/src/components/ui/Code.tsx b/packages/webui/src/components/Code.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Code.tsx
rename to packages/webui/src/components/Code.tsx
diff --git a/packages/webui/src/components/ui/DateTime.test.tsx b/packages/webui/src/components/DateTime.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/DateTime.test.tsx
rename to packages/webui/src/components/DateTime.test.tsx
diff --git a/packages/webui/src/components/ui/DateTime.tsx b/packages/webui/src/components/DateTime.tsx
similarity index 100%
rename from packages/webui/src/components/ui/DateTime.tsx
rename to packages/webui/src/components/DateTime.tsx
diff --git a/packages/webui/src/components/ui/DropDown.test.tsx b/packages/webui/src/components/DropDown.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/DropDown.test.tsx
rename to packages/webui/src/components/DropDown.test.tsx
diff --git a/packages/webui/src/components/ui/DropDown.tsx b/packages/webui/src/components/DropDown.tsx
similarity index 100%
rename from packages/webui/src/components/ui/DropDown.tsx
rename to packages/webui/src/components/DropDown.tsx
diff --git a/packages/webui/src/components/ui/Fields.test.tsx b/packages/webui/src/components/Fields.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Fields.test.tsx
rename to packages/webui/src/components/Fields.test.tsx
diff --git a/packages/webui/src/components/ui/Fields.tsx b/packages/webui/src/components/Fields.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Fields.tsx
rename to packages/webui/src/components/Fields.tsx
diff --git a/packages/webui/src/components/ui/IconButton.test.tsx b/packages/webui/src/components/IconButton.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/IconButton.test.tsx
rename to packages/webui/src/components/IconButton.test.tsx
diff --git a/packages/webui/src/components/ui/IconButton.tsx b/packages/webui/src/components/IconButton.tsx
similarity index 100%
rename from packages/webui/src/components/ui/IconButton.tsx
rename to packages/webui/src/components/IconButton.tsx
diff --git a/packages/webui/src/components/ui/Input.test.tsx b/packages/webui/src/components/Input.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Input.test.tsx
rename to packages/webui/src/components/Input.test.tsx
diff --git a/packages/webui/src/components/ui/Input.tsx b/packages/webui/src/components/Input.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Input.tsx
rename to packages/webui/src/components/Input.tsx
diff --git a/packages/webui/src/components/ui/JsonDisplay.test.tsx b/packages/webui/src/components/JsonDisplay.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/JsonDisplay.test.tsx
rename to packages/webui/src/components/JsonDisplay.test.tsx
diff --git a/packages/webui/src/components/ui/JsonDisplay.tsx b/packages/webui/src/components/JsonDisplay.tsx
similarity index 100%
rename from packages/webui/src/components/ui/JsonDisplay.tsx
rename to packages/webui/src/components/JsonDisplay.tsx
diff --git a/packages/webui/src/components/KeyValueList.test.tsx b/packages/webui/src/components/KeyValueList.test.tsx
index 1763e92..d545ef0 100644
--- a/packages/webui/src/components/KeyValueList.test.tsx
+++ b/packages/webui/src/components/KeyValueList.test.tsx
@@ -2,7 +2,7 @@ import { cleanup, render, within } from '@testing-library/react';
 
 import KeyValueList, { KeyValuePair } from './KeyValueList';
 
-jest.mock('@/components/ui/Fields', () => ({
+jest.mock('@/components/Fields', () => ({
   Field: function MockField({ label, children }: React.PropsWithChildren<{ label: string }>) {
     return (
       <div data-test-id="mock-field">
diff --git a/packages/webui/src/components/KeyValueList.tsx b/packages/webui/src/components/KeyValueList.tsx
index 9978f98..dbb5f0f 100644
--- a/packages/webui/src/components/KeyValueList.tsx
+++ b/packages/webui/src/components/KeyValueList.tsx
@@ -1,4 +1,4 @@
-import { Field } from '@/components/ui';
+import { Field } from './Fields';
 
 export type KeyValuePair = [string, any];
 
diff --git a/packages/webui/src/components/ui/Label.test.tsx b/packages/webui/src/components/Label.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Label.test.tsx
rename to packages/webui/src/components/Label.test.tsx
diff --git a/packages/webui/src/components/ui/Label.tsx b/packages/webui/src/components/Label.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Label.tsx
rename to packages/webui/src/components/Label.tsx
diff --git a/packages/webui/src/components/ui/Loading.test.tsx b/packages/webui/src/components/Loading.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Loading.test.tsx
rename to packages/webui/src/components/Loading.test.tsx
diff --git a/packages/webui/src/components/ui/Loading.tsx b/packages/webui/src/components/Loading.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Loading.tsx
rename to packages/webui/src/components/Loading.tsx
diff --git a/packages/webui/src/components/ui/SearchInput.test.tsx b/packages/webui/src/components/SearchInput.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/SearchInput.test.tsx
rename to packages/webui/src/components/SearchInput.test.tsx
diff --git a/packages/webui/src/components/ui/SearchInput.tsx b/packages/webui/src/components/SearchInput.tsx
similarity index 100%
rename from packages/webui/src/components/ui/SearchInput.tsx
rename to packages/webui/src/components/SearchInput.tsx
diff --git a/packages/webui/src/components/ui/Section.test.tsx b/packages/webui/src/components/Section.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Section.test.tsx
rename to packages/webui/src/components/Section.test.tsx
diff --git a/packages/webui/src/components/ui/Section.tsx b/packages/webui/src/components/Section.tsx
similarity index 100%
rename from packages/webui/src/components/ui/Section.tsx
rename to packages/webui/src/components/Section.tsx
diff --git a/packages/webui/src/components/ui/XmlDisplay.test.tsx b/packages/webui/src/components/XmlDisplay.test.tsx
similarity index 100%
rename from packages/webui/src/components/ui/XmlDisplay.test.tsx
rename to packages/webui/src/components/XmlDisplay.test.tsx
diff --git a/packages/webui/src/components/ui/XmlDisplay.tsx b/packages/webui/src/components/XmlDisplay.tsx
similarity index 100%
rename from packages/webui/src/components/ui/XmlDisplay.tsx
rename to packages/webui/src/components/XmlDisplay.tsx
diff --git a/packages/webui/src/components/ui/index.ts b/packages/webui/src/components/index.ts
similarity index 79%
rename from packages/webui/src/components/ui/index.ts
rename to packages/webui/src/components/index.ts
index 09933f9..0852a2a 100644
--- a/packages/webui/src/components/ui/index.ts
+++ b/packages/webui/src/components/index.ts
@@ -1,5 +1,7 @@
 /* istanbul ignore file */
 
+export { default as Authorization } from './Authorization';
+export { default as Button } from './Button';
 export { default as Code } from './Code';
 export { default as DateTime } from './DateTime';
 export { default as DropDown } from './DropDown';
@@ -7,6 +9,7 @@ export { default as Fields, Field } from './Fields';
 export { default as IconButton } from './IconButton';
 export { default as Input } from './Input';
 export { default as JsonDisplay } from './JsonDisplay';
+export { default as KeyValueList } from './KeyValueList';
 export { default as Label } from './Label';
 export { default as Loading } from './Loading';
 export { default as SearchInput } from './SearchInput';
diff --git a/packages/webui/src/components/ConnectionStatus.test.tsx b/packages/webui/src/components/ui/ConnectionStatus.test.tsx
similarity index 97%
rename from packages/webui/src/components/ConnectionStatus.test.tsx
rename to packages/webui/src/components/ui/ConnectionStatus.test.tsx
index 8884a7a..c378919 100644
--- a/packages/webui/src/components/ConnectionStatus.test.tsx
+++ b/packages/webui/src/components/ui/ConnectionStatus.test.tsx
@@ -12,7 +12,7 @@ jest.mock('react-icons/hi', () => ({
     return <>Mock HiStatusOnline component</>;
   },
 }));
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Loading: function MockLoading() {
     return <>Mock Loading component</>;
   },
diff --git a/packages/webui/src/components/ConnectionStatus.tsx b/packages/webui/src/components/ui/ConnectionStatus.tsx
similarity index 91%
rename from packages/webui/src/components/ConnectionStatus.tsx
rename to packages/webui/src/components/ui/ConnectionStatus.tsx
index 368ed9a..49e623a 100644
--- a/packages/webui/src/components/ConnectionStatus.tsx
+++ b/packages/webui/src/components/ui/ConnectionStatus.tsx
@@ -1,6 +1,6 @@
 import { HiStatusOffline, HiStatusOnline } from 'react-icons/hi';
 
-import { Loading } from '@/components/ui';
+import { Loading } from '@/components';
 import useApplication from '@/hooks/useApplication';
 
 export default function ConnectionStatus() {
diff --git a/packages/webui/src/components/DebugToolbar.test.tsx b/packages/webui/src/components/ui/DebugToolbar.test.tsx
similarity index 100%
rename from packages/webui/src/components/DebugToolbar.test.tsx
rename to packages/webui/src/components/ui/DebugToolbar.test.tsx
diff --git a/packages/webui/src/components/DebugToolbar.tsx b/packages/webui/src/components/ui/DebugToolbar.tsx
similarity index 90%
rename from packages/webui/src/components/DebugToolbar.tsx
rename to packages/webui/src/components/ui/DebugToolbar.tsx
index 52cce5f..8dcd378 100644
--- a/packages/webui/src/components/DebugToolbar.tsx
+++ b/packages/webui/src/components/ui/DebugToolbar.tsx
@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
 
+import Button from '@/components/Button';
 import useApplication from '@/hooks/useApplication';
 import mockData from '@/testing/mockTraces';
 
-import Button from './ui/Button';
-
 export default function DebugToolbar() {
   const { collector } = useApplication();
 
diff --git a/packages/webui/src/components/FiltersAndActions.test.tsx b/packages/webui/src/components/ui/FiltersAndActions.test.tsx
similarity index 97%
rename from packages/webui/src/components/FiltersAndActions.test.tsx
rename to packages/webui/src/components/ui/FiltersAndActions.test.tsx
index c3626d4..4aa72d9 100644
--- a/packages/webui/src/components/FiltersAndActions.test.tsx
+++ b/packages/webui/src/components/ui/FiltersAndActions.test.tsx
@@ -1,13 +1,13 @@
 import { act, cleanup, fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { DropDownItem } from '@/components/DropDown';
 import { setupMockSystems } from '@/testing/mockSystems';
 import { setUseApplicationData } from '@/testing/mockUseApplication';
 
 import FiltersAndActions from './FiltersAndActions';
-import { DropDownItem } from './ui/DropDown';
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   DropDown: function ({ items, onChange }: any) {
     return (
       <select
diff --git a/packages/webui/src/components/FiltersAndActions.tsx b/packages/webui/src/components/ui/FiltersAndActions.tsx
similarity index 95%
rename from packages/webui/src/components/FiltersAndActions.tsx
rename to packages/webui/src/components/ui/FiltersAndActions.tsx
index a091256..b879581 100644
--- a/packages/webui/src/components/FiltersAndActions.tsx
+++ b/packages/webui/src/components/ui/FiltersAndActions.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { HiTrash } from 'react-icons/hi';
 
-import { DropDown, IconButton, SearchInput } from '@/components/ui';
+import { DropDown, IconButton, SearchInput } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import { getDefaultSystem, getRegisteredSystems } from '@/systems/registration';
 
diff --git a/packages/webui/src/components/Header.test.tsx b/packages/webui/src/components/ui/Header.test.tsx
similarity index 94%
rename from packages/webui/src/components/Header.test.tsx
rename to packages/webui/src/components/ui/Header.test.tsx
index 4fae447..dfde3bc 100644
--- a/packages/webui/src/components/Header.test.tsx
+++ b/packages/webui/src/components/ui/Header.test.tsx
@@ -3,21 +3,21 @@ import { cleanup, render } from '@testing-library/react';
 import Header from './Header';
 
 jest.mock(
-  '@/components/ConnectionStatus',
+  '@/components/ui/ConnectionStatus',
   () =>
     function MockConnectionStatus() {
       return <div data-test-id="mock-connection-status">Mock ConnectionStatus component</div>;
     },
 );
 jest.mock(
-  '@/components/DebugToolbar',
+  '@/components/ui/DebugToolbar',
   () =>
     function MockDebugToolbar() {
       return <div data-test-id="mock-debug-toolbar">Mock DebugToolbar component</div>;
     },
 );
 jest.mock(
-  '@/components/FiltersAndActions',
+  '@/components/ui/FiltersAndActions',
   () =>
     function MockFiltersAndActions() {
       return <div data-test-id="mock-filters-and-actions">Mock FiltersAndActions component</div>;
diff --git a/packages/webui/src/components/Header.tsx b/packages/webui/src/components/ui/Header.tsx
similarity index 100%
rename from packages/webui/src/components/Header.tsx
rename to packages/webui/src/components/ui/Header.tsx
diff --git a/packages/webui/src/components/MainDisplay.test.tsx b/packages/webui/src/components/ui/MainDisplay.test.tsx
similarity index 95%
rename from packages/webui/src/components/MainDisplay.test.tsx
rename to packages/webui/src/components/ui/MainDisplay.test.tsx
index 58ba2af..ea83143 100644
--- a/packages/webui/src/components/MainDisplay.test.tsx
+++ b/packages/webui/src/components/ui/MainDisplay.test.tsx
@@ -5,14 +5,14 @@ import { setUseApplicationData } from '@/testing/mockUseApplication';
 import MainDisplay from './MainDisplay';
 
 jest.mock(
-  '@/components/TraceDetail',
+  '@/components/ui/TraceDetail',
   () =>
     function MockTraceDetail() {
       return <div data-test-id="mock-trace-detail">Mock TraceDetail component</div>;
     },
 );
 jest.mock(
-  '@/components/TraceList',
+  '@/components/ui/TraceList',
   () =>
     function MockTraceList() {
       return <div data-test-id="mock-trace-list">Mock TraceList component</div>;
diff --git a/packages/webui/src/components/MainDisplay.tsx b/packages/webui/src/components/ui/MainDisplay.tsx
similarity index 77%
rename from packages/webui/src/components/MainDisplay.tsx
rename to packages/webui/src/components/ui/MainDisplay.tsx
index 112fc42..1bb0785 100644
--- a/packages/webui/src/components/MainDisplay.tsx
+++ b/packages/webui/src/components/ui/MainDisplay.tsx
@@ -1,5 +1,5 @@
-import TraceDetail from '@/components/TraceDetail';
-import TraceList from '@/components/TraceList';
+import TraceDetail from '@/components/ui/TraceDetail';
+import TraceList from '@/components/ui/TraceList';
 import useApplication from '@/hooks/useApplication';
 
 export default function MainDisplay() {
diff --git a/packages/webui/src/components/QueryParams.test.tsx b/packages/webui/src/components/ui/QueryParams.test.tsx
similarity index 100%
rename from packages/webui/src/components/QueryParams.test.tsx
rename to packages/webui/src/components/ui/QueryParams.test.tsx
diff --git a/packages/webui/src/components/QueryParams.tsx b/packages/webui/src/components/ui/QueryParams.tsx
similarity index 89%
rename from packages/webui/src/components/QueryParams.tsx
rename to packages/webui/src/components/ui/QueryParams.tsx
index 635e84f..40f5d5b 100644
--- a/packages/webui/src/components/QueryParams.tsx
+++ b/packages/webui/src/components/ui/QueryParams.tsx
@@ -1,8 +1,7 @@
+import KeyValueList from '@/components/KeyValueList';
 import { Trace } from '@/types';
 import { pathAndQuery } from '@/utils';
 
-import KeyValueList from './KeyValueList';
-
 export default function QueryParams({ trace }: { trace: Trace }) {
   const [, qs] = pathAndQuery(trace);
   const urlSearchParams = new URLSearchParams(qs);
diff --git a/packages/webui/src/components/RequestHeaders.test.tsx b/packages/webui/src/components/ui/RequestHeaders.test.tsx
similarity index 97%
rename from packages/webui/src/components/RequestHeaders.test.tsx
rename to packages/webui/src/components/ui/RequestHeaders.test.tsx
index f6cd72c..7d55e59 100644
--- a/packages/webui/src/components/RequestHeaders.test.tsx
+++ b/packages/webui/src/components/ui/RequestHeaders.test.tsx
@@ -1,8 +1,8 @@
 import { cleanup, render } from '@testing-library/react';
 
+import Authorization from '@/components/Authorization';
 import { Trace } from '@/types';
 
-import Authorization from './Authorization';
 import RequestHeaders from './RequestHeaders';
 
 const mockKeyValueListComponent = jest.fn();
diff --git a/packages/webui/src/components/RequestHeaders.tsx b/packages/webui/src/components/ui/RequestHeaders.tsx
similarity index 82%
rename from packages/webui/src/components/RequestHeaders.tsx
rename to packages/webui/src/components/ui/RequestHeaders.tsx
index ce6e043..d11363c 100644
--- a/packages/webui/src/components/RequestHeaders.tsx
+++ b/packages/webui/src/components/ui/RequestHeaders.tsx
@@ -1,9 +1,8 @@
+import Authorization from '@/components/Authorization';
+import KeyValueList from '@/components/KeyValueList';
 import { Trace } from '@/types';
 import { cloneHeaders } from '@/utils';
 
-import Authorization from './Authorization';
-import KeyValueList from './KeyValueList';
-
 export default function RequestHeaders({ trace }: { trace: Trace }) {
   const requestHeaders = trace.http?.requestHeaders;
   if (!requestHeaders || Object.keys(requestHeaders).length === 0) return null;
diff --git a/packages/webui/src/components/ResponseHeaders.test.tsx b/packages/webui/src/components/ui/ResponseHeaders.test.tsx
similarity index 97%
rename from packages/webui/src/components/ResponseHeaders.test.tsx
rename to packages/webui/src/components/ui/ResponseHeaders.test.tsx
index e57735e..c40afae 100644
--- a/packages/webui/src/components/ResponseHeaders.test.tsx
+++ b/packages/webui/src/components/ui/ResponseHeaders.test.tsx
@@ -1,8 +1,8 @@
 import { cleanup, render } from '@testing-library/react';
 
+import Authorization from '@/components/Authorization';
 import { Trace } from '@/types';
 
-import Authorization from './Authorization';
 import ResponseHeaders from './ResponseHeaders';
 
 const mockKeyValueListComponent = jest.fn();
diff --git a/packages/webui/src/components/ResponseHeaders.tsx b/packages/webui/src/components/ui/ResponseHeaders.tsx
similarity index 83%
rename from packages/webui/src/components/ResponseHeaders.tsx
rename to packages/webui/src/components/ui/ResponseHeaders.tsx
index 82def8e..2b14ec4 100644
--- a/packages/webui/src/components/ResponseHeaders.tsx
+++ b/packages/webui/src/components/ui/ResponseHeaders.tsx
@@ -1,9 +1,8 @@
+import Authorization from '@/components/Authorization';
+import KeyValueList from '@/components/KeyValueList';
 import { Trace } from '@/types';
 import { cloneHeaders } from '@/utils';
 
-import Authorization from './Authorization';
-import KeyValueList from './KeyValueList';
-
 export default function ResponseHeaders({ trace }: { trace: Trace }) {
   const responseHeaders = trace.http?.responseHeaders;
   if (!responseHeaders || Object.keys(responseHeaders).length === 0) return null;
diff --git a/packages/webui/src/components/TraceDetail.test.tsx b/packages/webui/src/components/ui/TraceDetail.test.tsx
similarity index 99%
rename from packages/webui/src/components/TraceDetail.test.tsx
rename to packages/webui/src/components/ui/TraceDetail.test.tsx
index 395cf2b..5b45b4a 100644
--- a/packages/webui/src/components/TraceDetail.test.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.test.tsx
@@ -14,7 +14,7 @@ import { Trace } from '@/types';
 
 import TraceDetail from './TraceDetail';
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Code: function ({ children }: any) {
     return <>Mock Code component: {children}</>;
   },
@@ -42,7 +42,7 @@ jest.mock('@/components/ui', () => ({
 }));
 
 jest.mock(
-  '@/components/QueryParams',
+  '@/components/ui/QueryParams',
   () =>
     function MockQueryParams({ trace, ...props }: any) {
       return <div {...props}>Mock QueryParams component: {trace.id}</div>;
@@ -50,7 +50,7 @@ jest.mock(
 );
 
 jest.mock(
-  '@/components/RequestHeaders',
+  '@/components/ui/RequestHeaders',
   () =>
     function MockRequestHeaders({ trace, ...props }: any) {
       return <div {...props}>Mock RequestHeaders component: {trace.id}</div>;
@@ -58,7 +58,7 @@ jest.mock(
 );
 
 jest.mock(
-  '@/components/ResponseHeaders',
+  '@/components/ui/ResponseHeaders',
   () =>
     function MockResponseHeaders({ trace, ...props }: any) {
       return <div {...props}>Mock ResponseHeaders component: {trace.id}</div>;
diff --git a/packages/webui/src/components/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
similarity index 99%
rename from packages/webui/src/components/TraceDetail.tsx
rename to packages/webui/src/components/ui/TraceDetail.tsx
index d24485c..5854027 100644
--- a/packages/webui/src/components/TraceDetail.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Code, DateTime, Field, Fields, JsonDisplay, Loading, Section, XmlDisplay } from '@/components/ui';
+import { Code, DateTime, Field, Fields, JsonDisplay, Loading, Section, XmlDisplay } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import {
   SystemRequestDetailsComponent,
diff --git a/packages/webui/src/components/TraceList.test.tsx b/packages/webui/src/components/ui/TraceList.test.tsx
similarity index 99%
rename from packages/webui/src/components/TraceList.test.tsx
rename to packages/webui/src/components/ui/TraceList.test.tsx
index 1b04843..4e7d04a 100644
--- a/packages/webui/src/components/TraceList.test.tsx
+++ b/packages/webui/src/components/ui/TraceList.test.tsx
@@ -16,7 +16,7 @@ jest.mock('@/systems', () => ({
   },
 }));
 
-jest.mock('@/components/ui', () => ({
+jest.mock('@/components', () => ({
   Loading: function MockLoading() {
     return <>Mock Loading component</>;
   },
diff --git a/packages/webui/src/components/TraceList.tsx b/packages/webui/src/components/ui/TraceList.tsx
similarity index 99%
rename from packages/webui/src/components/TraceList.tsx
rename to packages/webui/src/components/ui/TraceList.tsx
index 12f7953..9c69a88 100644
--- a/packages/webui/src/components/TraceList.tsx
+++ b/packages/webui/src/components/ui/TraceList.tsx
@@ -1,6 +1,6 @@
 import { HiOutlineEmojiSad, HiOutlineLightningBolt, HiStatusOnline } from 'react-icons/hi';
 
-import { Loading } from '@/components/ui';
+import { Loading } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import { ListDataComponent } from '@/systems';
 import { Trace } from '@/types';
diff --git a/packages/webui/src/components/TraceRequestData.test.tsx b/packages/webui/src/components/ui/TraceRequestData.test.tsx
similarity index 100%
rename from packages/webui/src/components/TraceRequestData.test.tsx
rename to packages/webui/src/components/ui/TraceRequestData.test.tsx
diff --git a/packages/webui/src/components/TraceRequestData.tsx b/packages/webui/src/components/ui/TraceRequestData.tsx
similarity index 100%
rename from packages/webui/src/components/TraceRequestData.tsx
rename to packages/webui/src/components/ui/TraceRequestData.tsx
diff --git a/packages/webui/src/systems/GraphQL.test.tsx b/packages/webui/src/systems/GraphQL.test.tsx
index f019cf0..fb1011b 100644
--- a/packages/webui/src/systems/GraphQL.test.tsx
+++ b/packages/webui/src/systems/GraphQL.test.tsx
@@ -6,7 +6,7 @@ import { Trace } from '@/types';
 import GraphQLSystem from './GraphQL';
 
 jest.mock(
-  '@/components/ui/Code',
+  '@/components/Code',
   () =>
     function MockCode({ children, ...props }: any) {
       return <div {...props}>{children}</div>;
diff --git a/packages/webui/src/systems/GraphQL.tsx b/packages/webui/src/systems/GraphQL.tsx
index 9cff01d..259541c 100644
--- a/packages/webui/src/systems/GraphQL.tsx
+++ b/packages/webui/src/systems/GraphQL.tsx
@@ -2,7 +2,7 @@
 // can be implemented and registered from the application using envt to send
 // network traces
 
-import { Code, Field, Fields } from '@/components/ui';
+import { Code, Field, Fields } from '@/components';
 import { System, Trace } from '@/types';
 import { safeParseJson } from '@/utils';
 
diff --git a/packages/webui/src/systems/Sanity.test.tsx b/packages/webui/src/systems/Sanity.test.tsx
index 105ef42..f974c46 100644
--- a/packages/webui/src/systems/Sanity.test.tsx
+++ b/packages/webui/src/systems/Sanity.test.tsx
@@ -6,7 +6,7 @@ import { Trace } from '@/types';
 import SanitySystem from './Sanity';
 
 jest.mock(
-  '@/components/ui/Code',
+  '@/components/Code',
   () =>
     function MockCode({ children, ...props }: any) {
       return <div {...props}>{children}</div>;
diff --git a/packages/webui/src/systems/Sanity.tsx b/packages/webui/src/systems/Sanity.tsx
index 90dafc4..f35175f 100644
--- a/packages/webui/src/systems/Sanity.tsx
+++ b/packages/webui/src/systems/Sanity.tsx
@@ -2,7 +2,7 @@
 // can be implemented and registered from the application using envt to send
 // network traces
 
-import { Code, Field, Fields } from '@/components/ui';
+import { Code, Field, Fields } from '@/components';
 import { System, Trace } from '@/types';
 import { safeParseJson } from '@/utils';
 
diff --git a/packages/webui/src/systems/index.tsx b/packages/webui/src/systems/index.tsx
index 0010ba5..ffecaf5 100644
--- a/packages/webui/src/systems/index.tsx
+++ b/packages/webui/src/systems/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import TraceRequestData from '@/components/TraceRequestData';
+import TraceRequestData from '@/components/ui/TraceRequestData';
 import { System, Trace, TraceRowData } from '@/types';
 import { pathAndQuery } from '@/utils';
 
diff --git a/packages/webui/src/systems/systems.test.tsx b/packages/webui/src/systems/systems.test.tsx
index 0e9e966..9090eeb 100644
--- a/packages/webui/src/systems/systems.test.tsx
+++ b/packages/webui/src/systems/systems.test.tsx
@@ -1,7 +1,7 @@
 import { cleanup, render } from '@testing-library/react';
 import { ReactElement } from 'react';
 
-import { TraceRequestDataProps } from '@/components/TraceRequestData';
+import { TraceRequestDataProps } from '@/components/ui/TraceRequestData';
 import { setupMockSystems } from '@/testing/mockSystems';
 import mockTraces from '@/testing/mockTraces';
 import { Trace } from '@/types';
@@ -18,7 +18,7 @@ import {
 jest.mock('@/systems/registration');
 
 jest.mock(
-  '@/components/TraceRequestData',
+  '@/components/ui/TraceRequestData',
   () =>
     function MockTraceRequestData({ iconPath, hostName, path, data }: TraceRequestDataProps) {
       return (