@grackle-ai/web 0.69.1 → 0.70.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -0
- package/dist/assets/{index-CNHMdDia.js → index-DGAyW9mT.js} +24 -13
- package/dist/index.html +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# @grackle-ai/web
|
|
2
|
+
|
|
3
|
+
The Grackle web dashboard -- a single-page application for managing remote AI coding agents, environments, tasks, and workspaces. It connects to the Grackle server over WebSocket for real-time state updates and streams agent output as it happens.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Real-time agent streaming** -- watch tool calls, code output, and agent reasoning as they happen, bridged from gRPC through the server's WebSocket layer.
|
|
10
|
+
- **Task tree management** -- create, edit, and monitor hierarchical task trees with parent/child relationships, dependency gating, review/approval workflows, and inline findings.
|
|
11
|
+
- **DAG visualization** -- interactive dependency graph powered by React Flow, showing task hierarchy and dependency edges at a glance.
|
|
12
|
+
- **Environment management** -- add, configure, and monitor Docker, SSH, Local, and Codespace environments from a unified panel.
|
|
13
|
+
- **Workspace boards** -- group tasks and sessions around a shared repo and environment; track progress, cost, and session history per workspace.
|
|
14
|
+
- **Chat with the orchestrator** -- talk directly to the root agent through a chat interface with full access to every Grackle MCP tool.
|
|
15
|
+
- **Findings panel** -- browse categorized discoveries shared across agents within a workspace.
|
|
16
|
+
- **Persona management** -- create and configure specialized agent personas with custom runtimes, models, and system prompts.
|
|
17
|
+
- **Credential & token management** -- store and manage API keys and provider credentials from the Settings page.
|
|
18
|
+
- **10 built-in themes** -- Grackle, Grackle Light, Glassmorphism, Matrix, Neubrutalism, Monokai, Ubuntu, Sandstone, Verdigris, and Primer. Several themes offer light/dark variants. Switch in Settings or follow system preference.
|
|
19
|
+
- **Responsive layout** -- sidebar drawer with mobile breakpoints, keyboard shortcuts (Escape to close), and animated page transitions.
|
|
20
|
+
- **Setup wizard** -- guided onboarding flow for first-time users.
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Tech Stack
|
|
29
|
+
|
|
30
|
+
| Layer | Technology |
|
|
31
|
+
|-------|------------|
|
|
32
|
+
| Framework | React 19 |
|
|
33
|
+
| Build | Vite 6 |
|
|
34
|
+
| Language | TypeScript (strict) |
|
|
35
|
+
| Styling | SCSS Modules + CSS custom properties (theme tokens) |
|
|
36
|
+
| Routing | React Router 7 |
|
|
37
|
+
| Animation | Motion (Framer Motion) |
|
|
38
|
+
| Graphs | React Flow + dagre |
|
|
39
|
+
| Markdown | react-markdown + remark-gfm + rehype-prism-plus |
|
|
40
|
+
| Testing | Vitest + React Testing Library |
|
|
41
|
+
| Shared types | `@grackle-ai/common` (protobuf-generated) |
|
|
42
|
+
|
|
43
|
+
## Development
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
# From the repo root -- install dependencies and build all packages
|
|
47
|
+
rush install && rush build
|
|
48
|
+
|
|
49
|
+
# Start the Vite dev server (hot-reload on port 5173)
|
|
50
|
+
cd packages/web
|
|
51
|
+
rushx dev
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The dev server proxies `/ws` requests to `ws://localhost:3000`, so you need a running Grackle server for live data. Start one with:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
# In another terminal
|
|
58
|
+
node packages/cli/dist/index.js serve
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Then open http://localhost:5173.
|
|
62
|
+
|
|
63
|
+
### Build for production
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
rushx build # TypeScript check + Vite production build → dist/
|
|
67
|
+
rushx preview # Serve the production build locally
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Run tests
|
|
71
|
+
|
|
72
|
+
```bash
|
|
73
|
+
rushx test # Vitest unit tests
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Mock mode
|
|
77
|
+
|
|
78
|
+
Append `?mock` to the URL (e.g., `http://localhost:5173/?mock`) to run the UI with a mock data provider instead of a live server connection. Useful for frontend development without a running backend.
|
|
79
|
+
|
|
80
|
+
## Project Structure
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
src/
|
|
84
|
+
main.tsx Entry point
|
|
85
|
+
App.tsx Root component, routing, context providers
|
|
86
|
+
themes.ts Theme registry (10 themes)
|
|
87
|
+
context/ React contexts (Grackle state, Toast, Theme)
|
|
88
|
+
hooks/ Custom hooks (WebSocket, sessions, tasks, environments, ...)
|
|
89
|
+
pages/ Route-level page components
|
|
90
|
+
components/
|
|
91
|
+
layout/ AppNav, Sidebar, StatusBar, BottomStatusBar
|
|
92
|
+
display/ EventStream, EventRenderer, SplashScreen, Spinner, ...
|
|
93
|
+
panels/ TaskEditPanel, FindingsPanel, EnvironmentEditPanel, ...
|
|
94
|
+
dag/ DagView, TaskNode (React Flow graph)
|
|
95
|
+
chat/ ChatInput
|
|
96
|
+
editable/ Inline-editable field components
|
|
97
|
+
lists/ TaskList, EnvironmentNav
|
|
98
|
+
workspace/ WorkspaceBoard
|
|
99
|
+
personas/ PersonaManager
|
|
100
|
+
notifications/ Toast, Callout
|
|
101
|
+
settings/ SettingsNav
|
|
102
|
+
styles/ Global SCSS, theme tokens, mixins
|
|
103
|
+
utils/ Navigation helpers, dashboard computations
|
|
104
|
+
mocks/ MockGrackleProvider for offline development
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## License
|
|
108
|
+
|
|
109
|
+
MIT
|