chore(ui): refactor workspace to monorepo (#70)

## Summary by Sourcery

Refactor the UI project structure into a pnpm monorepo packages layout
and align tooling and automation with the new paths.

Enhancements:
- Reorganize the UI app from the root ui directory into packages/ui
within a pnpm workspace.
- Update pnpm workspace configuration to include all packages under
packages/*.
- Adjust paths in changeset configuration so the @dropout/ui package
resolves from packages/ui.

Build:
- Update pre-commit configuration paths and arguments to reflect the new
UI location and normalize hook argument formatting.
- Update Dependabot configuration so npm updates target /packages/ui
instead of /ui.

CI:
- Update GitHub Actions workflows to watch packages/** instead of ui/**
and to run frontend tasks from packages/ui.
- Update pnpm cache dependency paths in workflows to use the root
pnpm-lock.yaml.
- Simplify frontend install steps in test workflows to run from the
repository root.

Chores:
- Add a new index.html under packages/ui and remove the old
ui/index.html to match the new project layout.

1 files changed, 42 insertions, 0 deletions

diff --git a/packages/ui/src/components/StatusToast.svelte b/packages/ui/src/components/StatusToast.svelte
new file mode 100644
index 0000000..4c981c7
--- /dev/null
+++ b/packages/ui/src/components/StatusToast.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { uiState } from "../stores/ui.svelte";
+</script>
+
+{#if uiState.status !== "Ready"}
+  {#key uiState.status}
+    <div
+      class="absolute top-12 right-12 bg-white/90 dark:bg-zinc-800/90 backdrop-blur border border-zinc-200 dark:border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
+    >
+      <div class="flex justify-between items-start mb-1">
+        <div class="text-xs text-zinc-500 dark:text-zinc-400 uppercase font-bold">Status</div>
+        <button
+          onclick={() => uiState.setStatus("Ready")}
+          class="text-zinc-400 hover:text-black dark:text-zinc-500 dark:hover:text-white transition -mt-1 -mr-1 p-1"
+        >
+          ✕
+        </button>
+      </div>
+      <div class="font-mono text-sm whitespace-pre-wrap mb-2 text-gray-900 dark:text-gray-100">{uiState.status}</div>
+      <div class="w-full bg-gray-200 dark:bg-zinc-700/50 h-1 rounded-full overflow-hidden">
+        <div
+          class="h-full bg-indigo-500 origin-left w-full progress-bar"
+        ></div>
+      </div>
+    </div>
+  {/key}
+{/if}
+
+<style>
+  .progress-bar {
+    animation: progress 5s linear forwards;
+  }
+  
+  @keyframes progress {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+</style>