mirror of
https://github.com/0xWheatyz/handler.git
synced 2026-08-30 05:26:23 +00:00
Merge Handler mobile app (React Native + Expo) design + implementation
Brings in the mobile-app work from the design handoff session as a
sub-project alongside the backend:
- app/ React Native + Expo iOS implementation (components, screens,
state, theme tokens)
- chats/ design conversation transcript(s)
- project/ Claude Design export (HTML prototype + design-system tokens)
Kept the backend's top-level README.md; the design-handoff instructions
are preserved at project/HANDOFF.md.
This commit is contained in:
Claude
@@ -0,0 +1,6 @@
|
||||
node_modules/
|
||||
.expo/
|
||||
dist/
|
||||
web-build/
|
||||
*.log
|
||||
.DS_Store
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import {
|
||||
SafeAreaProvider,
|
||||
useSafeAreaInsets,
|
||||
} from "react-native-safe-area-context";
|
||||
import {
|
||||
useFonts,
|
||||
Outfit_400Regular,
|
||||
Outfit_500Medium,
|
||||
Outfit_600SemiBold,
|
||||
Outfit_700Bold,
|
||||
Outfit_800ExtraBold,
|
||||
} from "@expo-google-fonts/outfit";
|
||||
import {
|
||||
Figtree_400Regular,
|
||||
Figtree_500Medium,
|
||||
Figtree_600SemiBold,
|
||||
Figtree_700Bold,
|
||||
Figtree_400Regular_Italic,
|
||||
} from "@expo-google-fonts/figtree";
|
||||
import {
|
||||
SplineSansMono_400Regular,
|
||||
SplineSansMono_500Medium,
|
||||
SplineSansMono_600SemiBold,
|
||||
} from "@expo-google-fonts/spline-sans-mono";
|
||||
|
||||
import { useTheme } from "./src/theme/useTheme";
|
||||
import { AppStateProvider, useAppState } from "./src/state/AppState";
|
||||
import { FleetScreen } from "./src/screens/FleetScreen";
|
||||
import { AgentDetailScreen } from "./src/screens/AgentDetailScreen";
|
||||
import { AnswerScreen } from "./src/screens/AnswerScreen";
|
||||
import { SpawnScreen } from "./src/screens/SpawnScreen";
|
||||
import { LogScreen } from "./src/screens/LogScreen";
|
||||
import { SettingsScreen } from "./src/screens/SettingsScreen";
|
||||
|
||||
function Router() {
|
||||
const { screen } = useAppState();
|
||||
const { scheme, colors } = useTheme();
|
||||
|
||||
const Screen = {
|
||||
fleet: FleetScreen,
|
||||
detail: AgentDetailScreen,
|
||||
answer: AnswerScreen,
|
||||
spawn: SpawnScreen,
|
||||
log: LogScreen,
|
||||
settings: SettingsScreen,
|
||||
}[screen];
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: colors.surfacePage }}>
|
||||
<StatusBar style={scheme === "dark" ? "light" : "dark"} />
|
||||
<Screen />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [fontsLoaded] = useFonts({
|
||||
Outfit_400Regular,
|
||||
Outfit_500Medium,
|
||||
Outfit_600SemiBold,
|
||||
Outfit_700Bold,
|
||||
Outfit_800ExtraBold,
|
||||
Figtree_400Regular,
|
||||
Figtree_500Medium,
|
||||
Figtree_600SemiBold,
|
||||
Figtree_700Bold,
|
||||
Figtree_400Regular_Italic,
|
||||
SplineSansMono_400Regular,
|
||||
SplineSansMono_500Medium,
|
||||
SplineSansMono_600SemiBold,
|
||||
});
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
{fontsLoaded ? (
|
||||
<AppStateProvider>
|
||||
<Router />
|
||||
</AppStateProvider>
|
||||
) : (
|
||||
<SplashPlaceholder />
|
||||
)}
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
/** Blank page-colored screen while fonts load (avoids a font flash). */
|
||||
function SplashPlaceholder() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: colors.surfacePage,
|
||||
paddingTop: insets.top,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
# Handler — mobile app
|
||||
|
||||
A remote control for [Handler](https://github.com/0xWheatyz/handler): run many
|
||||
Claude Code agents across many projects, each isolated, each leaving a
|
||||
checkmark (current state) and an entry in the global log.
|
||||
|
||||
This is the **React Native + Expo (iOS)** implementation of the
|
||||
`Handler Mobile.dc.html` design (turn `2a`, the version the user committed to:
|
||||
*"Commit to 1a, wire-up the real screens"*). It reproduces the interactive
|
||||
prototype as a real app — six wired screens with the exact state logic from
|
||||
the design.
|
||||
|
||||
## Run it
|
||||
|
||||
```bash
|
||||
cd app
|
||||
npm install
|
||||
npm run ios # opens the iOS simulator (requires Xcode)
|
||||
# or: npm start then scan the QR code with Expo Go on a device
|
||||
```
|
||||
|
||||
## Screens
|
||||
|
||||
| Screen | File | What it does |
|
||||
| --- | --- | --- |
|
||||
| Fleet (home) | `src/screens/FleetScreen.tsx` | Stat cards, "Waiting on you" list → Answer, "Recent checkmarks" → detail |
|
||||
| Agent detail | `src/screens/AgentDetailScreen.tsx` | Checkmark / Log segmented control, meta table, Answer / Pause / Kill |
|
||||
| Answer | `src/screens/AnswerScreen.tsx` | Question, tappable quick replies, reply field + **Send & resume** |
|
||||
| Spawn | `src/screens/SpawnScreen.tsx` | Project select, task field, two toggles, Spawn |
|
||||
| Log | `src/screens/LogScreen.tsx` | All / handler / Errors filters over the global feed |
|
||||
| Settings | `src/screens/SettingsScreen.tsx` | Server info, notification toggles, Sign out |
|
||||
|
||||
The prototype navigates by swapping a single `screen` value (with working back
|
||||
/ close controls) rather than a native stack, mirroring the design. Answering
|
||||
`agt-7a1d` flips it **Waiting → Running** everywhere and clears it from the
|
||||
Fleet waiting list — that cross-screen behavior lives in one shared store
|
||||
(`src/state/AppState.tsx`, a direct port of the design's `renderVals()`).
|
||||
|
||||
## Design system
|
||||
|
||||
The Leeworks tokens (`project/_ds/.../tokens/*.css`) are ported to typed RN
|
||||
values in `src/theme/tokens.ts`; the components used by these screens
|
||||
(`Button`, `Badge`, `Icon`, `Switch`, `Select`, `Input`, segmented control,
|
||||
chip) are reimplemented in `src/components/` from the design-system bundle.
|
||||
|
||||
- **Fonts:** Outfit (display), Figtree (body), Spline Sans Mono (data) via
|
||||
`@expo-google-fonts/*`.
|
||||
- **Colors:** the warm-neutral ink ramp + muted status colors, light and dark.
|
||||
|
||||
## Intentional deviations from the HTML prototype
|
||||
|
||||
The prototype drew a phone frame to make an HTML mock look like a device. A
|
||||
real iOS app *is* the device, so:
|
||||
|
||||
- The fake status bar (`9:41`, signal, battery) and the home-indicator pill are
|
||||
dropped — the OS draws those. Screens use safe-area insets and
|
||||
`expo-status-bar` instead.
|
||||
- **Dark mode** was a design-time prop; here it follows the system appearance
|
||||
(`useColorScheme`, `userInterfaceStyle: "automatic"`).
|
||||
- The `Select` uses a bottom-sheet picker (native `<select>` has no
|
||||
cross-platform styling in RN) — same field, real picking behavior.
|
||||
|
||||
All copy, spacing, colors, and interactions otherwise match the `2a` design.
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "Handler",
|
||||
"slug": "handler-mobile",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"userInterfaceStyle": "automatic",
|
||||
"scheme": "handler",
|
||||
"ios": {
|
||||
"supportsTablet": false,
|
||||
"bundleIdentifier": "dev.wheaty.handler"
|
||||
},
|
||||
"android": {
|
||||
"package": "dev.wheaty.handler"
|
||||
},
|
||||
"newArchEnabled": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ["babel-preset-expo"],
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
import { registerRootComponent } from "expo";
|
||||
import App from "./App";
|
||||
|
||||
registerRootComponent(App);
|
||||
Generated
+11068
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "handler-mobile",
|
||||
"version": "1.0.0",
|
||||
"main": "index.ts",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"ios": "expo start --ios",
|
||||
"android": "expo start --android",
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo-google-fonts/figtree": "^0.2.3",
|
||||
"@expo-google-fonts/outfit": "^0.2.3",
|
||||
"@expo-google-fonts/spline-sans-mono": "^0.2.3",
|
||||
"expo": "~52.0.0",
|
||||
"expo-asset": "~11.0.1",
|
||||
"expo-font": "~13.0.0",
|
||||
"expo-status-bar": "~2.0.0",
|
||||
"react": "18.3.1",
|
||||
"react-native": "0.76.9",
|
||||
"react-native-safe-area-context": "^4.12.0",
|
||||
"react-native-svg": "^15.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "~18.3.12",
|
||||
"typescript": "~5.3.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
import { fonts, radius } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import type { BadgeTone } from "../state/AppState";
|
||||
|
||||
/** Leeworks Badge, ported from components/display/Badge.jsx. */
|
||||
export function Badge({ tone, children }: { tone: BadgeTone; children: string }) {
|
||||
const { colors } = useTheme();
|
||||
const tones: Record<BadgeTone, { bg: string; fg: string }> = {
|
||||
neutral: { bg: colors.ink1, fg: colors.ink7 },
|
||||
positive: { bg: colors.positiveTint, fg: colors.positive },
|
||||
warning: { bg: colors.warningTint, fg: colors.warning },
|
||||
danger: { bg: colors.dangerTint, fg: colors.danger },
|
||||
};
|
||||
const t = tones[tone];
|
||||
return (
|
||||
<View style={[styles.badge, { backgroundColor: t.bg }]}>
|
||||
<Text style={[styles.text, { color: t.fg }]}>{children}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
badge: {
|
||||
alignSelf: "flex-start",
|
||||
paddingVertical: 3,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: radius.pill,
|
||||
},
|
||||
text: {
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
fontSize: 12,
|
||||
lineHeight: 17,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
type StyleProp,
|
||||
type ViewStyle,
|
||||
} from "react-native";
|
||||
import { fonts, radius } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
|
||||
/**
|
||||
* Leeworks Button, ported from components/forms/Button.jsx. Hover collapses
|
||||
* into press on touch; the primary/secondary/danger press tints are kept.
|
||||
*/
|
||||
|
||||
export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
|
||||
export type ButtonSize = "sm" | "md" | "lg";
|
||||
|
||||
interface ButtonProps {
|
||||
children: string;
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
onPress?: () => void;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
const HEIGHT: Record<ButtonSize, number> = { sm: 32, md: 40, lg: 48 };
|
||||
const PAD_X: Record<ButtonSize, number> = { sm: 12, md: 16, lg: 20 };
|
||||
const FONT: Record<ButtonSize, number> = { sm: 13, md: 14, lg: 15 };
|
||||
|
||||
export function Button({
|
||||
children,
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
onPress,
|
||||
style,
|
||||
}: ButtonProps) {
|
||||
const { colors } = useTheme();
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => {
|
||||
const base: ViewStyle = {
|
||||
height: HEIGHT[size],
|
||||
paddingHorizontal: PAD_X[size],
|
||||
borderRadius: radius.md,
|
||||
};
|
||||
const byVariant: Record<ButtonVariant, ViewStyle> = {
|
||||
primary: {
|
||||
backgroundColor: pressed
|
||||
? colors.interactivePress
|
||||
: colors.interactive,
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: pressed ? "rgba(20,20,19,0.05)" : colors.surfaceCard,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.borderDefault,
|
||||
},
|
||||
ghost: {
|
||||
backgroundColor: pressed ? "rgba(20,20,19,0.05)" : "transparent",
|
||||
},
|
||||
danger: {
|
||||
backgroundColor: pressed ? "#8c2f25" : colors.danger,
|
||||
},
|
||||
};
|
||||
return [styles.base, base, byVariant[variant], style];
|
||||
}}
|
||||
>
|
||||
<View style={styles.inner}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
styles.label,
|
||||
{
|
||||
fontSize: FONT[size],
|
||||
color:
|
||||
variant === "primary"
|
||||
? colors.textInverse
|
||||
: variant === "danger"
|
||||
? "#ffffff"
|
||||
: variant === "secondary"
|
||||
? colors.textHeading
|
||||
: colors.ink9,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
inner: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
},
|
||||
label: {
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
import { Pressable, StyleSheet, Text } from "react-native";
|
||||
import { fonts, radius } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
|
||||
/**
|
||||
* Pill chip used for both the answer quick-replies and the log filters.
|
||||
* Ported from the `chip()` style helper in the DC script.
|
||||
*/
|
||||
export function Chip({
|
||||
label,
|
||||
selected,
|
||||
onPress,
|
||||
}: {
|
||||
label: string;
|
||||
selected: boolean;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={[
|
||||
styles.chip,
|
||||
{
|
||||
backgroundColor: selected ? colors.interactive : colors.surfacePage,
|
||||
borderColor: selected ? colors.borderStrong : colors.borderDefault,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.label,
|
||||
{ color: selected ? "#ffffff" : colors.textBody },
|
||||
]}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
chip: {
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: radius.pill,
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
fontFamily: fonts.bodyMedium,
|
||||
fontSize: 13,
|
||||
lineHeight: 13,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import Svg, { Circle, Path } from "react-native-svg";
|
||||
|
||||
/**
|
||||
* Leeworks Icon — the Lucide subset used by the Handler screens, ported from
|
||||
* components/display/Icon.jsx. Monochrome, 1.75px stroke, `currentColor`
|
||||
* becomes the required `color` prop since RN SVG doesn't inherit it.
|
||||
*/
|
||||
|
||||
export type IconName =
|
||||
| "chevronRight"
|
||||
| "chevronDown"
|
||||
| "home"
|
||||
| "file"
|
||||
| "settings"
|
||||
| "x";
|
||||
|
||||
const paths: Record<IconName, React.ReactNode> = {
|
||||
chevronRight: <Path d="m9 18 6-6-6-6" />,
|
||||
chevronDown: <Path d="m6 9 6 6 6-6" />,
|
||||
home: (
|
||||
<>
|
||||
<Path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<Path d="M9 22V12h6v10" />
|
||||
</>
|
||||
),
|
||||
file: (
|
||||
<>
|
||||
<Path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
|
||||
<Path d="M14 2v4a2 2 0 0 0 2 2h4" />
|
||||
</>
|
||||
),
|
||||
settings: (
|
||||
<>
|
||||
<Path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
||||
<Circle cx="12" cy="12" r="3" />
|
||||
</>
|
||||
),
|
||||
x: <Path d="M18 6 6 18M6 6l12 12" />,
|
||||
};
|
||||
|
||||
interface IconProps {
|
||||
name: IconName;
|
||||
size?: number;
|
||||
color: string;
|
||||
strokeWidth?: number;
|
||||
/** Degrees; the detail/answer back arrows reuse chevronRight rotated 180. */
|
||||
rotate?: number;
|
||||
}
|
||||
|
||||
export function Icon({
|
||||
name,
|
||||
size = 18,
|
||||
color,
|
||||
strokeWidth = 1.75,
|
||||
rotate,
|
||||
}: IconProps) {
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
style={rotate ? { transform: [{ rotate: `${rotate}deg` }] } : undefined}
|
||||
>
|
||||
{paths[name]}
|
||||
</Svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
import { Pressable, StyleSheet, Text, View } from "react-native";
|
||||
import { fonts } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Badge } from "./Badge";
|
||||
import { Icon } from "./Icon";
|
||||
import { Mono } from "./primitives";
|
||||
import type { BadgeTone } from "../state/AppState";
|
||||
|
||||
/**
|
||||
* Header for pushed screens (detail / answer / spawn): a leading nav control
|
||||
* plus either an agent id + status badge, or a plain title.
|
||||
*/
|
||||
export function PageHeader({
|
||||
leading,
|
||||
onLeadingPress,
|
||||
agentId,
|
||||
badge,
|
||||
title,
|
||||
}: {
|
||||
leading: "back" | "close";
|
||||
onLeadingPress: () => void;
|
||||
agentId?: string;
|
||||
badge?: { tone: BadgeTone; label: string };
|
||||
title?: string;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
<Pressable
|
||||
onPress={onLeadingPress}
|
||||
hitSlop={8}
|
||||
style={styles.control}
|
||||
>
|
||||
<Icon
|
||||
name={leading === "back" ? "chevronRight" : "x"}
|
||||
size={20}
|
||||
color={colors.textHeading}
|
||||
rotate={leading === "back" ? 180 : undefined}
|
||||
/>
|
||||
</Pressable>
|
||||
{agentId ? (
|
||||
<Mono style={[styles.agentId, { color: colors.textMuted }]}>
|
||||
{agentId}
|
||||
</Mono>
|
||||
) : (
|
||||
<Text style={[styles.title, { color: colors.textHeading }]}>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{badge ? <Badge tone={badge.tone}>{badge.label}</Badge> : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginTop: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
control: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
marginLeft: -8,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
agentId: {
|
||||
flex: 1,
|
||||
fontSize: 13,
|
||||
},
|
||||
title: {
|
||||
flex: 1,
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
fontSize: 13,
|
||||
lineHeight: 16,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from "react";
|
||||
import { Pressable, StyleSheet, Text, View } from "react-native";
|
||||
import { fonts, radius, shadows } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
|
||||
/**
|
||||
* Segmented control (the Checkmark / Log toggle on agent detail).
|
||||
* Ported from the `seg()` style helper in the DC script.
|
||||
*/
|
||||
export function SegmentedControl<T extends string>({
|
||||
segments,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
segments: { value: T; label: string }[];
|
||||
value: T;
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View style={[styles.track, { backgroundColor: colors.surfaceSunken }]}>
|
||||
{segments.map((s) => {
|
||||
const on = s.value === value;
|
||||
return (
|
||||
<Pressable
|
||||
key={s.value}
|
||||
onPress={() => onChange(s.value)}
|
||||
style={[
|
||||
styles.segment,
|
||||
on && {
|
||||
backgroundColor: colors.surfacePage,
|
||||
...shadows.card,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.label,
|
||||
{ color: on ? colors.textHeading : colors.textMuted },
|
||||
]}
|
||||
>
|
||||
{s.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
track: {
|
||||
flexDirection: "row",
|
||||
borderRadius: radius.md,
|
||||
padding: 3,
|
||||
},
|
||||
segment: {
|
||||
flex: 1,
|
||||
paddingVertical: 8,
|
||||
borderRadius: radius.sm,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
label: {
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
fontSize: 13,
|
||||
lineHeight: 13,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Modal,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { fonts, radius, shadows, text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Icon } from "./Icon";
|
||||
|
||||
/**
|
||||
* Leeworks Select, ported from components/forms/Select.jsx. Native <select>
|
||||
* has no cross-platform styling in RN, so the field opens a bottom sheet of
|
||||
* options — same visual field (value + chevron), real picking behavior.
|
||||
*/
|
||||
export function Select({
|
||||
label,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
options: string[];
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={{ gap: 6 }}>
|
||||
<Text style={[styles.label, { color: colors.textHeading }]}>{label}</Text>
|
||||
<Pressable
|
||||
onPress={() => setOpen(true)}
|
||||
style={[
|
||||
styles.field,
|
||||
{ backgroundColor: colors.surfaceCard, borderColor: colors.borderDefault },
|
||||
]}
|
||||
>
|
||||
<Text style={[text.body, { color: colors.textHeading, flex: 1 }]}>
|
||||
{value}
|
||||
</Text>
|
||||
<Icon name="chevronDown" size={16} color={colors.textMuted} />
|
||||
</Pressable>
|
||||
|
||||
<Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
|
||||
<Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
|
||||
<Pressable
|
||||
style={[
|
||||
styles.sheet,
|
||||
{ backgroundColor: colors.surfaceCard, borderColor: colors.borderSubtle },
|
||||
shadows.raised,
|
||||
]}
|
||||
>
|
||||
{options.map((opt) => {
|
||||
const on = opt === value;
|
||||
return (
|
||||
<Pressable
|
||||
key={opt}
|
||||
onPress={() => {
|
||||
onChange(opt);
|
||||
setOpen(false);
|
||||
}}
|
||||
style={({ pressed }) => [
|
||||
styles.option,
|
||||
pressed && { backgroundColor: colors.surfaceSunken },
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
text.body,
|
||||
{
|
||||
color: colors.textHeading,
|
||||
fontFamily: on ? fonts.bodySemiBold : fonts.bodyRegular,
|
||||
flex: 1,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{opt}
|
||||
</Text>
|
||||
{on && <Icon name="chevronRight" size={16} color={colors.textMuted} />}
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
label: {
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
fontSize: 13,
|
||||
lineHeight: 16,
|
||||
},
|
||||
field: {
|
||||
height: 48,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderRadius: radius.md,
|
||||
paddingHorizontal: 12,
|
||||
gap: 8,
|
||||
},
|
||||
backdrop: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(20,20,19,0.4)",
|
||||
justifyContent: "flex-end",
|
||||
padding: 20,
|
||||
},
|
||||
sheet: {
|
||||
borderWidth: 1,
|
||||
borderRadius: radius.xl,
|
||||
overflow: "hidden",
|
||||
marginBottom: 24,
|
||||
},
|
||||
option: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
minHeight: 44,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { Animated, Pressable, StyleSheet } from "react-native";
|
||||
import { radius } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
|
||||
/**
|
||||
* Leeworks Switch, ported from components/forms/Switch.jsx.
|
||||
* 36×22 track, 18px thumb, 14px travel, 180ms ease.
|
||||
*/
|
||||
export function Switch({
|
||||
value,
|
||||
onValueChange,
|
||||
}: {
|
||||
value: boolean;
|
||||
onValueChange: (v: boolean) => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(anim, {
|
||||
toValue: value ? 1 : 0,
|
||||
duration: 180,
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
}, [value, anim]);
|
||||
|
||||
const trackColor = anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [colors.ink3, colors.interactive],
|
||||
});
|
||||
const translateX = anim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0, 14],
|
||||
});
|
||||
|
||||
return (
|
||||
<Pressable onPress={() => onValueChange(!value)} hitSlop={8}>
|
||||
<Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
|
||||
<Animated.View
|
||||
style={[styles.thumb, { transform: [{ translateX }] }]}
|
||||
/>
|
||||
</Animated.View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
track: {
|
||||
width: 36,
|
||||
height: 22,
|
||||
borderRadius: radius.pill,
|
||||
padding: 2,
|
||||
},
|
||||
thumb: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
borderRadius: 9,
|
||||
backgroundColor: "#ffffff",
|
||||
shadowColor: "#141413",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 2,
|
||||
elevation: 2,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import { Pressable, StyleSheet, Text, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { fonts } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Icon, type IconName } from "./Icon";
|
||||
import { useAppState, type Screen } from "../state/AppState";
|
||||
|
||||
/**
|
||||
* Bottom tab bar shown on the three primary screens (Fleet / Log / Settings).
|
||||
* The design's fixed 24px bottom inset is replaced by the real home-indicator
|
||||
* safe-area inset.
|
||||
*/
|
||||
|
||||
const TABS: { key: Screen; label: string; icon: IconName }[] = [
|
||||
{ key: "fleet", label: "Fleet", icon: "home" },
|
||||
{ key: "log", label: "Log", icon: "file" },
|
||||
{ key: "settings", label: "Settings", icon: "settings" },
|
||||
];
|
||||
|
||||
export function TabBar({ active }: { active: Screen }) {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { go } = useAppState();
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.bar,
|
||||
{
|
||||
backgroundColor: colors.surfacePage,
|
||||
borderTopColor: colors.borderSubtle,
|
||||
paddingBottom: Math.max(insets.bottom, 12),
|
||||
},
|
||||
]}
|
||||
>
|
||||
{TABS.map((t) => {
|
||||
const on = t.key === active;
|
||||
const tint = on ? colors.textHeading : colors.ink4;
|
||||
return (
|
||||
<Pressable
|
||||
key={t.key}
|
||||
style={styles.tab}
|
||||
onPress={() => go(t.key)}
|
||||
>
|
||||
<Icon
|
||||
name={t.icon}
|
||||
size={22}
|
||||
color={tint}
|
||||
strokeWidth={on ? 2 : 1.75}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.label,
|
||||
{
|
||||
color: tint,
|
||||
fontFamily: on ? fonts.bodySemiBold : fonts.bodyMedium,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bar: {
|
||||
flexDirection: "row",
|
||||
borderTopWidth: 1,
|
||||
paddingTop: 8,
|
||||
paddingHorizontal: 12,
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
label: {
|
||||
fontSize: 12,
|
||||
lineHeight: 14,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
View,
|
||||
type StyleProp,
|
||||
type ViewStyle,
|
||||
} from "react-native";
|
||||
import { fonts, radius } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
|
||||
/**
|
||||
* Text field covering both the Leeworks single-line Input (answer reply) and
|
||||
* the multiline task textarea on the spawn screen. Focus swaps the border to
|
||||
* `--border-strong` per the Input component.
|
||||
*/
|
||||
export function TextField({
|
||||
value,
|
||||
onChangeText,
|
||||
placeholder,
|
||||
multiline = false,
|
||||
height = 48,
|
||||
style,
|
||||
}: {
|
||||
value: string;
|
||||
onChangeText: (t: string) => void;
|
||||
placeholder?: string;
|
||||
multiline?: boolean;
|
||||
/** For single-line this is the control height; for multiline, the box height. */
|
||||
height?: number;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
const [focus, setFocus] = useState(false);
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.wrap,
|
||||
{
|
||||
height,
|
||||
backgroundColor: colors.surfaceCard,
|
||||
borderColor: focus ? colors.borderStrong : colors.borderDefault,
|
||||
alignItems: multiline ? "stretch" : "center",
|
||||
paddingVertical: multiline ? 12 : 0,
|
||||
},
|
||||
style,
|
||||
]}
|
||||
>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
multiline={multiline}
|
||||
onFocus={() => setFocus(true)}
|
||||
onBlur={() => setFocus(false)}
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
color: colors.textHeading,
|
||||
textAlignVertical: multiline ? "top" : "center",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrap: {
|
||||
flexDirection: "row",
|
||||
borderWidth: 1,
|
||||
borderRadius: radius.md,
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
alignSelf: "stretch",
|
||||
fontFamily: fonts.bodyRegular,
|
||||
fontSize: 15,
|
||||
padding: 0,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
import { text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Switch } from "./Switch";
|
||||
|
||||
/**
|
||||
* A labelled settings row with a trailing Switch — used for the spawn options
|
||||
* and the notification settings. Matches the `min-height:44px` tap target.
|
||||
*/
|
||||
export function ToggleRow({
|
||||
title,
|
||||
subtitle,
|
||||
value,
|
||||
onValueChange,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
value: boolean;
|
||||
onValueChange: (v: boolean) => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
<View style={{ flex: 1, paddingRight: 12 }}>
|
||||
<Text style={[text.label, { color: colors.textHeading }]}>{title}</Text>
|
||||
<Text style={[text.caption, { color: colors.textMuted, marginTop: 2 }]}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch value={value} onValueChange={onValueChange} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
minHeight: 44,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
type StyleProp,
|
||||
type TextStyle,
|
||||
type ViewStyle,
|
||||
} from "react-native";
|
||||
import { fonts, radius, shadows, text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
|
||||
/** White card: 1px subtle border, 10px radius, whisper-quiet shadow. */
|
||||
export function Card({
|
||||
children,
|
||||
style,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
backgroundColor: colors.surfaceCard,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.borderSubtle,
|
||||
borderRadius: radius.lg,
|
||||
},
|
||||
shadows.card,
|
||||
style,
|
||||
]}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/** Uppercase, letter-spaced overline label (Outfit 600, 11px). */
|
||||
export function SectionLabel({
|
||||
children,
|
||||
style,
|
||||
}: {
|
||||
children: string;
|
||||
style?: StyleProp<TextStyle>;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<Text style={[text.overline, { color: colors.textMuted }, style]}>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
/** Hairline divider used between card rows. */
|
||||
export function Divider() {
|
||||
const { colors } = useTheme();
|
||||
return <View style={{ height: 1, backgroundColor: colors.borderSubtle }} />;
|
||||
}
|
||||
|
||||
/** 8px status dot. */
|
||||
export function StatusDot({ color, size = 8 }: { color: string; size?: number }) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: size / 2,
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** Monospace text helper (Spline Sans Mono). */
|
||||
export function Mono({
|
||||
children,
|
||||
style,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
style?: StyleProp<TextStyle>;
|
||||
}) {
|
||||
return <Text style={[monoStyles.mono, style]}>{children}</Text>;
|
||||
}
|
||||
|
||||
const monoStyles = StyleSheet.create({
|
||||
mono: { fontFamily: fonts.monoRegular },
|
||||
});
|
||||
@@ -0,0 +1,113 @@
|
||||
import type { ThemeColors } from "../theme/tokens";
|
||||
|
||||
/** Fixed prototype content, transcribed from the 2a design. */
|
||||
|
||||
export interface WaitingAgent {
|
||||
id: string;
|
||||
title: string;
|
||||
question: string;
|
||||
/** agt-7a1d is the one that clears from the list once answered. */
|
||||
clearsOnAnswer?: boolean;
|
||||
}
|
||||
|
||||
export const waitingAgents: WaitingAgent[] = [
|
||||
{
|
||||
id: "agt-7a1d",
|
||||
title: "handler · migrate state to sqlite",
|
||||
question: '"Drop the legacy JSON store, or keep it as a read fallback?"',
|
||||
clearsOnAnswer: true,
|
||||
},
|
||||
{
|
||||
id: "agt-3e90",
|
||||
title: "wheatsite · fix build on node 22",
|
||||
question: '"Pin node 20 in CI, or patch esbuild?"',
|
||||
},
|
||||
{
|
||||
id: "agt-b241",
|
||||
title: "api-gateway · add rate limiting",
|
||||
question: '"429 body: JSON or plain text?"',
|
||||
},
|
||||
];
|
||||
|
||||
export type CheckmarkStatus = "positive" | "danger";
|
||||
|
||||
export interface Checkmark {
|
||||
title: string;
|
||||
meta: string;
|
||||
status: CheckmarkStatus;
|
||||
}
|
||||
|
||||
export const recentCheckmarks: Checkmark[] = [
|
||||
{
|
||||
title: "handler · add /agents endpoint",
|
||||
meta: "done — tests pass · 14m ago",
|
||||
status: "positive",
|
||||
},
|
||||
{
|
||||
title: "wheatsite · refactor router",
|
||||
meta: "failed — 2 tests · 1h ago",
|
||||
status: "danger",
|
||||
},
|
||||
{
|
||||
title: "dotfiles · port zsh config",
|
||||
meta: "done — 12 turns · 3h ago",
|
||||
status: "positive",
|
||||
},
|
||||
];
|
||||
|
||||
export const quickReplyLabels = ["Drop it", "Keep as fallback", "Ask me later"];
|
||||
|
||||
export const projectOptions = ["handler", "wheatsite", "dotfiles", "api-gateway"];
|
||||
|
||||
/** Agent-detail log tab (fixed 7 rows). `color` picks a palette key. */
|
||||
export interface DetailLogRow {
|
||||
t: string;
|
||||
msg: string;
|
||||
color: keyof ThemeColors;
|
||||
}
|
||||
|
||||
export const detailLog: DetailLogRow[] = [
|
||||
{ t: "14:02", msg: "paused — waiting for input", color: "warning" },
|
||||
{ t: "13:57", msg: "checkmark updated", color: "textBody" },
|
||||
{ t: "13:52", msg: "tool: bash — sqlite3 .schema", color: "textMuted" },
|
||||
{ t: "13:48", msg: "tool: edit — store/sqlite.rs", color: "textMuted" },
|
||||
{ t: "13:40", msg: "tool: bash — cargo test store", color: "textMuted" },
|
||||
{ t: "13:29", msg: "checkmark updated", color: "textBody" },
|
||||
{ t: "13:21", msg: "tool: read — store/json.rs", color: "textMuted" },
|
||||
];
|
||||
|
||||
export interface DetailMetaRow {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const detailMeta: DetailMetaRow[] = [
|
||||
{ label: "Started", value: "41m ago" },
|
||||
{ label: "Model", value: "claude-sonnet-4" },
|
||||
{ label: "Turns", value: "21" },
|
||||
{ label: "Tokens", value: "348k" },
|
||||
];
|
||||
|
||||
/** Global log feed. `err` and `p` drive the All / handler / Errors filters. */
|
||||
export interface LogEntry {
|
||||
t: string;
|
||||
id: string;
|
||||
p: string;
|
||||
msg: string;
|
||||
color: keyof ThemeColors;
|
||||
err: boolean;
|
||||
}
|
||||
|
||||
export const allLog: LogEntry[] = [
|
||||
{ t: "14:02:11", id: "agt-7a1d", p: "handler", msg: "paused — waiting for input", color: "warning", err: false },
|
||||
{ t: "13:58:40", id: "agt-9c77", p: "handler", msg: "checkmark updated", color: "textBody", err: false },
|
||||
{ t: "13:51:02", id: "agt-2d08", p: "handler", msg: "done — 34 turns, tests pass", color: "positive", err: false },
|
||||
{ t: "13:44:19", id: "agt-e33a", p: "wheatsite", msg: "error — 2 tests failed", color: "danger", err: true },
|
||||
{ t: "13:39:55", id: "agt-51f0", p: "dotfiles", msg: "spawned → dotfiles", color: "textBody", err: false },
|
||||
{ t: "13:31:07", id: "agt-b241", p: "api-gateway", msg: "paused — waiting for input", color: "warning", err: false },
|
||||
{ t: "13:18:44", id: "agt-9c77", p: "handler", msg: "tool: bash — cargo test", color: "textMuted", err: false },
|
||||
{ t: "13:02:30", id: "agt-90bc", p: "dotfiles", msg: "done — 12 turns", color: "positive", err: false },
|
||||
{ t: "12:57:12", id: "agt-51f0", p: "dotfiles", msg: "tool: edit — .zshrc", color: "textMuted", err: false },
|
||||
{ t: "12:49:03", id: "agt-e33a", p: "wheatsite", msg: "checkmark updated", color: "textBody", err: false },
|
||||
{ t: "12:40:38", id: "agt-b241", p: "api-gateway", msg: "spawned → api-gateway", color: "textBody", err: false },
|
||||
];
|
||||
@@ -0,0 +1,160 @@
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { fonts, radius, text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Button } from "../components/Button";
|
||||
import { PageHeader } from "../components/PageHeader";
|
||||
import { SegmentedControl } from "../components/SegmentedControl";
|
||||
import { Card, Divider, Mono, SectionLabel } from "../components/primitives";
|
||||
import { useAppState } from "../state/AppState";
|
||||
import { detailLog, detailMeta } from "../data/mock";
|
||||
|
||||
export function AgentDetailScreen() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const {
|
||||
go,
|
||||
detailTab,
|
||||
setDetailTab,
|
||||
notAnswered,
|
||||
agentTone,
|
||||
agentStatus,
|
||||
agentStateText,
|
||||
} = useAppState();
|
||||
|
||||
return (
|
||||
<View style={[styles.page, { backgroundColor: colors.surfacePage }]}>
|
||||
<View style={{ height: insets.top }} />
|
||||
<ScrollView
|
||||
contentContainerStyle={[
|
||||
styles.content,
|
||||
{ paddingBottom: insets.bottom + 20 },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<PageHeader
|
||||
leading="back"
|
||||
onLeadingPress={() => go("fleet")}
|
||||
agentId="agt-7a1d"
|
||||
badge={{ tone: agentTone, label: agentStatus }}
|
||||
/>
|
||||
|
||||
<Text style={[text.h3, { color: colors.textHeading }]}>
|
||||
Migrate agent state to sqlite
|
||||
</Text>
|
||||
<Text style={[text.bodySm, { color: colors.textMuted, marginTop: 4, marginBottom: 16 }]}>
|
||||
handler · branch <Mono>agt/7a1d</Mono>
|
||||
</Text>
|
||||
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
<SegmentedControl
|
||||
segments={[
|
||||
{ value: "state", label: "Checkmark" },
|
||||
{ value: "log", label: "Log" },
|
||||
]}
|
||||
value={detailTab}
|
||||
onChange={setDetailTab}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{detailTab === "state" ? (
|
||||
<>
|
||||
<View
|
||||
style={[
|
||||
styles.sunkenCard,
|
||||
{ backgroundColor: colors.surfaceSunken, borderColor: colors.borderSubtle },
|
||||
]}
|
||||
>
|
||||
<SectionLabel style={{ marginBottom: 8 }}>Current state</SectionLabel>
|
||||
<Mono style={[styles.stateText, { color: colors.textBody }]}>
|
||||
{agentStateText}
|
||||
</Mono>
|
||||
<Text style={[text.caption, { color: colors.textMuted, marginTop: 10 }]}>
|
||||
updated 2m ago
|
||||
</Text>
|
||||
</View>
|
||||
<Card style={{ marginTop: 16 }}>
|
||||
{detailMeta.map((m, i) => (
|
||||
<View key={m.label}>
|
||||
{i > 0 && <Divider />}
|
||||
<View style={styles.metaRow}>
|
||||
<Text style={[text.bodySm, { color: colors.textMuted }]}>
|
||||
{m.label}
|
||||
</Text>
|
||||
<Mono style={{ fontSize: 13, color: colors.textHeading }}>
|
||||
{m.value}
|
||||
</Mono>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<View
|
||||
style={[
|
||||
styles.sunkenCard,
|
||||
{ backgroundColor: colors.surfaceSunken, borderColor: colors.borderSubtle },
|
||||
]}
|
||||
>
|
||||
{detailLog.map((row) => (
|
||||
<View key={row.t} style={styles.logRow}>
|
||||
<Mono style={[styles.logMono, { color: colors.ink4 }]}>
|
||||
{row.t}
|
||||
</Mono>
|
||||
<Mono style={[styles.logMono, { color: colors[row.color] }]}>
|
||||
{row.msg}
|
||||
</Mono>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.actions}>
|
||||
{notAnswered && (
|
||||
<Button size="lg" style={{ flex: 1 }} onPress={() => go("answer")}>
|
||||
Answer
|
||||
</Button>
|
||||
)}
|
||||
<Button size="lg" variant="secondary" style={{ flex: 1 }}>
|
||||
Pause
|
||||
</Button>
|
||||
<Button size="lg" variant="danger">
|
||||
Kill
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: { flex: 1 },
|
||||
content: { paddingTop: 8, paddingHorizontal: 20 },
|
||||
sunkenCard: {
|
||||
borderWidth: 1,
|
||||
borderRadius: radius.lg,
|
||||
padding: 16,
|
||||
},
|
||||
stateText: {
|
||||
fontSize: 13,
|
||||
lineHeight: 22,
|
||||
},
|
||||
metaRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
logRow: { flexDirection: "row", gap: 10 },
|
||||
logMono: {
|
||||
fontSize: 12.5,
|
||||
lineHeight: 26,
|
||||
},
|
||||
actions: {
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
marginTop: 20,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,106 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { radius, text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Button } from "../components/Button";
|
||||
import { Chip } from "../components/Chip";
|
||||
import { PageHeader } from "../components/PageHeader";
|
||||
import { TextField } from "../components/TextField";
|
||||
import { Mono, SectionLabel } from "../components/primitives";
|
||||
import { useAppState } from "../state/AppState";
|
||||
import { quickReplyLabels } from "../data/mock";
|
||||
|
||||
const QUESTION =
|
||||
"Migrations pass on the new sqlite store. Should I drop the legacy JSON store entirely, or keep it as a read-only fallback for one release?";
|
||||
|
||||
export function AnswerScreen() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { go, quickPick, setQuickPick, sendResume } = useAppState();
|
||||
const [reply, setReply] = useState("");
|
||||
|
||||
return (
|
||||
<View style={[styles.page, { backgroundColor: colors.surfacePage }]}>
|
||||
<View style={{ height: insets.top }} />
|
||||
<KeyboardAvoidingView
|
||||
style={styles.flex}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<View style={[styles.content, { paddingBottom: insets.bottom + 20 }]}>
|
||||
<PageHeader
|
||||
leading="back"
|
||||
onLeadingPress={() => go("detail")}
|
||||
agentId="agt-7a1d"
|
||||
badge={{ tone: "warning", label: "Waiting" }}
|
||||
/>
|
||||
|
||||
<Text style={[text.h3, { color: colors.textHeading, marginBottom: 16 }]}>
|
||||
Agent needs input
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.questionCard,
|
||||
{ backgroundColor: colors.surfaceSunken, borderColor: colors.borderSubtle },
|
||||
]}
|
||||
>
|
||||
<SectionLabel style={{ marginBottom: 8 }}>Question · 2m ago</SectionLabel>
|
||||
<Mono style={[styles.questionText, { color: colors.textBody }]}>
|
||||
{QUESTION}
|
||||
</Mono>
|
||||
</View>
|
||||
|
||||
<SectionLabel style={{ marginBottom: 10 }}>Quick replies</SectionLabel>
|
||||
<View style={styles.chips}>
|
||||
{quickReplyLabels.map((label, i) => (
|
||||
<Chip
|
||||
key={label}
|
||||
label={label}
|
||||
selected={quickPick === i}
|
||||
onPress={() => setQuickPick(i)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TextField
|
||||
value={reply}
|
||||
onChangeText={setReply}
|
||||
placeholder="Or type a reply…"
|
||||
/>
|
||||
<Button size="lg" style={{ width: "100%" }} onPress={sendResume}>
|
||||
Send & resume
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: { flex: 1 },
|
||||
flex: { flex: 1 },
|
||||
content: { flex: 1, paddingTop: 8, paddingHorizontal: 20 },
|
||||
questionCard: {
|
||||
borderWidth: 1,
|
||||
borderRadius: radius.lg,
|
||||
padding: 16,
|
||||
marginBottom: 20,
|
||||
},
|
||||
questionText: { fontSize: 13, lineHeight: 22 },
|
||||
chips: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 8,
|
||||
marginBottom: 20,
|
||||
},
|
||||
footer: { marginTop: "auto", gap: 12 },
|
||||
});
|
||||
@@ -0,0 +1,205 @@
|
||||
import React from "react";
|
||||
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { fonts, text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Button } from "../components/Button";
|
||||
import { Icon } from "../components/Icon";
|
||||
import {
|
||||
Card,
|
||||
Divider,
|
||||
Mono,
|
||||
SectionLabel,
|
||||
StatusDot,
|
||||
} from "../components/primitives";
|
||||
import { TabBar } from "../components/TabBar";
|
||||
import { useAppState } from "../state/AppState";
|
||||
import {
|
||||
recentCheckmarks,
|
||||
waitingAgents,
|
||||
type Checkmark,
|
||||
type WaitingAgent,
|
||||
} from "../data/mock";
|
||||
|
||||
export function FleetScreen() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { go, notAnswered } = useAppState();
|
||||
|
||||
const waiting = waitingAgents.filter((a) => !(a.clearsOnAnswer && !notAnswered));
|
||||
|
||||
const stats = [
|
||||
{ label: "Running", value: "6", tint: colors.textHeading },
|
||||
{ label: "Waiting", value: "3", tint: colors.warning },
|
||||
{ label: "Done", value: "42", tint: colors.textHeading },
|
||||
];
|
||||
|
||||
return (
|
||||
<View style={[styles.page, { backgroundColor: colors.surfacePage }]}>
|
||||
<View style={{ height: insets.top }} />
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.content}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={styles.headerRow}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={[text.h3, { color: colors.textHeading }]}>Fleet</Text>
|
||||
<Text style={[text.bodySm, { color: colors.textMuted, marginTop: 2 }]}>
|
||||
12 agents · 3 waiting on you
|
||||
</Text>
|
||||
</View>
|
||||
<Button size="sm" onPress={() => go("spawn")}>
|
||||
New
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<View style={styles.statsRow}>
|
||||
{stats.map((s) => (
|
||||
<Card key={s.label} style={styles.statCard}>
|
||||
<Text style={[text.caption, { color: colors.textMuted }]}>
|
||||
{s.label}
|
||||
</Text>
|
||||
<Text style={[styles.statValue, { color: s.tint }]}>
|
||||
{s.value}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<SectionLabel style={styles.overline}>Waiting on you</SectionLabel>
|
||||
<Card style={styles.section}>
|
||||
{waiting.map((a, i) => (
|
||||
<View key={a.id}>
|
||||
{i > 0 && <Divider />}
|
||||
<WaitingRow agent={a} onAnswer={() => go("answer")} />
|
||||
</View>
|
||||
))}
|
||||
</Card>
|
||||
|
||||
<SectionLabel style={styles.overline}>Recent checkmarks</SectionLabel>
|
||||
<Card>
|
||||
{recentCheckmarks.map((c, i) => (
|
||||
<View key={c.title}>
|
||||
{i > 0 && <Divider />}
|
||||
<CheckmarkRow checkmark={c} onPress={() => go("detail")} />
|
||||
</View>
|
||||
))}
|
||||
</Card>
|
||||
</ScrollView>
|
||||
<TabBar active="fleet" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function WaitingRow({
|
||||
agent,
|
||||
onAnswer,
|
||||
}: {
|
||||
agent: WaitingAgent;
|
||||
onAnswer: () => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View style={styles.rowPad}>
|
||||
<View style={styles.waitingTop}>
|
||||
<Mono style={{ fontSize: 12, color: colors.textMuted }}>{agent.id}</Mono>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={[styles.rowTitle, { color: colors.textHeading, flex: 1 }]}
|
||||
>
|
||||
{agent.title}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.waitingBottom}>
|
||||
<Text
|
||||
style={[
|
||||
text.bodySm,
|
||||
{ color: colors.textBody, flex: 1, fontFamily: fonts.bodyItalic },
|
||||
]}
|
||||
>
|
||||
{agent.question}
|
||||
</Text>
|
||||
<Button size="sm" variant="secondary" onPress={onAnswer}>
|
||||
Answer
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckmarkRow({
|
||||
checkmark,
|
||||
onPress,
|
||||
}: {
|
||||
checkmark: Checkmark;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
const { colors } = useTheme();
|
||||
const dot = checkmark.status === "positive" ? colors.positive : colors.danger;
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => [
|
||||
styles.checkmarkRow,
|
||||
pressed && { backgroundColor: colors.surfaceSunken },
|
||||
]}
|
||||
>
|
||||
<StatusDot color={dot} />
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={[styles.rowTitle, { color: colors.textHeading }]}
|
||||
>
|
||||
{checkmark.title}
|
||||
</Text>
|
||||
<Text style={[text.caption, { color: colors.textMuted, marginTop: 2 }]}>
|
||||
{checkmark.meta}
|
||||
</Text>
|
||||
</View>
|
||||
<Icon name="chevronRight" size={16} color={colors.ink4} />
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: { flex: 1 },
|
||||
content: { paddingTop: 8, paddingHorizontal: 20, paddingBottom: 20 },
|
||||
headerRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
marginTop: 12,
|
||||
marginBottom: 20,
|
||||
},
|
||||
statsRow: { flexDirection: "row", gap: 12, marginBottom: 20 },
|
||||
statCard: { flex: 1, paddingVertical: 14, paddingHorizontal: 16 },
|
||||
statValue: {
|
||||
fontFamily: fonts.monoSemiBold,
|
||||
fontSize: 24,
|
||||
lineHeight: 28,
|
||||
marginTop: 4,
|
||||
},
|
||||
overline: { marginBottom: 10 },
|
||||
section: { marginBottom: 20 },
|
||||
rowPad: { paddingVertical: 14, paddingHorizontal: 16 },
|
||||
waitingTop: { flexDirection: "row", alignItems: "center", gap: 8 },
|
||||
waitingBottom: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
marginTop: 8,
|
||||
},
|
||||
rowTitle: {
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
fontSize: 13,
|
||||
lineHeight: 16,
|
||||
},
|
||||
checkmarkRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
minHeight: 44,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Chip } from "../components/Chip";
|
||||
import { Mono, SectionLabel } from "../components/primitives";
|
||||
import { TabBar } from "../components/TabBar";
|
||||
import { useAppState, type LogFilter } from "../state/AppState";
|
||||
import { allLog } from "../data/mock";
|
||||
|
||||
const FILTERS: { key: LogFilter; label: string }[] = [
|
||||
{ key: "all", label: "All" },
|
||||
{ key: "handler", label: "handler" },
|
||||
{ key: "errors", label: "Errors" },
|
||||
];
|
||||
|
||||
export function LogScreen() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { logFilter, setLogFilter } = useAppState();
|
||||
|
||||
const entries = allLog.filter((e) =>
|
||||
logFilter === "all" ? true : logFilter === "errors" ? e.err : e.p === "handler"
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={[styles.page, { backgroundColor: colors.surfacePage }]}>
|
||||
<View style={{ height: insets.top }} />
|
||||
|
||||
<View style={styles.header}>
|
||||
<Text style={[text.h3, { color: colors.textHeading }]}>Log</Text>
|
||||
<View style={styles.filters}>
|
||||
{FILTERS.map((f) => (
|
||||
<Chip
|
||||
key={f.key}
|
||||
label={f.label}
|
||||
selected={logFilter === f.key}
|
||||
onPress={() => setLogFilter(f.key)}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.todayLabel}>
|
||||
<SectionLabel>Today</SectionLabel>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={[
|
||||
styles.feed,
|
||||
{ backgroundColor: colors.surfaceSunken, borderTopColor: colors.borderSubtle },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{entries.map((e, i) => (
|
||||
<View key={`${e.t}-${i}`} style={styles.logRow}>
|
||||
<Mono style={[styles.mono, { color: colors.ink4 }]}>{e.t}</Mono>
|
||||
<Mono style={[styles.mono, styles.idCol, { color: colors.ink6 }]}>
|
||||
{e.id}
|
||||
</Mono>
|
||||
<Mono style={[styles.mono, { color: colors[e.color], flex: 1 }]}>
|
||||
{e.msg}
|
||||
</Mono>
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<TabBar active="log" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: { flex: 1 },
|
||||
header: { paddingHorizontal: 20, paddingTop: 20, paddingBottom: 16 },
|
||||
filters: { flexDirection: "row", gap: 8, marginTop: 14 },
|
||||
todayLabel: { paddingHorizontal: 20, paddingBottom: 8 },
|
||||
feed: {
|
||||
borderTopWidth: 1,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
flexGrow: 1,
|
||||
},
|
||||
logRow: { flexDirection: "row", gap: 10 },
|
||||
mono: { fontSize: 12.5, lineHeight: 26 },
|
||||
idCol: { width: 66 },
|
||||
});
|
||||
@@ -0,0 +1,101 @@
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Button } from "../components/Button";
|
||||
import { ToggleRow } from "../components/ToggleRow";
|
||||
import {
|
||||
Card,
|
||||
Divider,
|
||||
Mono,
|
||||
SectionLabel,
|
||||
StatusDot,
|
||||
} from "../components/primitives";
|
||||
import { TabBar } from "../components/TabBar";
|
||||
import { useAppState } from "../state/AppState";
|
||||
|
||||
export function SettingsScreen() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { swPushWait, setSwPushWait, swPushFail, setSwPushFail } = useAppState();
|
||||
|
||||
return (
|
||||
<View style={[styles.page, { backgroundColor: colors.surfacePage }]}>
|
||||
<View style={{ height: insets.top }} />
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.content}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Text style={[text.h3, { color: colors.textHeading, marginVertical: 12, marginBottom: 20 }]}>
|
||||
Settings
|
||||
</Text>
|
||||
|
||||
<SectionLabel style={{ marginBottom: 10 }}>Server</SectionLabel>
|
||||
<Card style={{ marginBottom: 20 }}>
|
||||
<InfoRow label="Endpoint" value="https://handler.wheaty.dev" />
|
||||
<Divider />
|
||||
<InfoRow label="API key" value="hnd_••••••••4f2a" />
|
||||
<Divider />
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={[text.label, { color: colors.textHeading }]}>Status</Text>
|
||||
<View style={styles.statusValue}>
|
||||
<StatusDot color={colors.positive} size={7} />
|
||||
<Mono style={[styles.valueMono, { color: colors.positive }]}>
|
||||
connected · 38ms
|
||||
</Mono>
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
|
||||
<SectionLabel style={{ marginBottom: 10 }}>Notifications</SectionLabel>
|
||||
<Card style={{ marginBottom: 20 }}>
|
||||
<ToggleRow
|
||||
title="Waiting on input"
|
||||
subtitle="Push when an agent pauses"
|
||||
value={swPushWait}
|
||||
onValueChange={setSwPushWait}
|
||||
/>
|
||||
<Divider />
|
||||
<ToggleRow
|
||||
title="Failures"
|
||||
subtitle="Push when a checkmark fails"
|
||||
value={swPushFail}
|
||||
onValueChange={setSwPushFail}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Button variant="secondary" size="lg" style={{ width: "100%" }}>
|
||||
Sign out
|
||||
</Button>
|
||||
</ScrollView>
|
||||
<TabBar active="settings" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<View style={styles.infoRow}>
|
||||
<Text style={[text.label, { color: colors.textHeading }]}>{label}</Text>
|
||||
<Mono style={[styles.valueMono, { color: colors.textMuted }]}>{value}</Mono>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: { flex: 1 },
|
||||
content: { paddingTop: 8, paddingHorizontal: 20, paddingBottom: 20 },
|
||||
infoRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 16,
|
||||
minHeight: 44,
|
||||
gap: 12,
|
||||
},
|
||||
statusValue: { flexDirection: "row", alignItems: "center", gap: 6 },
|
||||
valueMono: { fontSize: 12.5 },
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { text } from "../theme/tokens";
|
||||
import { useTheme } from "../theme/useTheme";
|
||||
import { Button } from "../components/Button";
|
||||
import { PageHeader } from "../components/PageHeader";
|
||||
import { Select } from "../components/Select";
|
||||
import { TextField } from "../components/TextField";
|
||||
import { ToggleRow } from "../components/ToggleRow";
|
||||
import { Card, Divider } from "../components/primitives";
|
||||
import { useAppState } from "../state/AppState";
|
||||
import { projectOptions } from "../data/mock";
|
||||
|
||||
export function SpawnScreen() {
|
||||
const { colors } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { go, spawnGo, swEdits, setSwEdits, swTests, setSwTests } = useAppState();
|
||||
const [project, setProject] = useState("handler");
|
||||
const [task, setTask] = useState("");
|
||||
|
||||
return (
|
||||
<View style={[styles.page, { backgroundColor: colors.surfacePage }]}>
|
||||
<View style={{ height: insets.top }} />
|
||||
<KeyboardAvoidingView
|
||||
style={styles.flex}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<View style={[styles.content, { paddingBottom: insets.bottom + 20 }]}>
|
||||
<PageHeader
|
||||
leading="close"
|
||||
onLeadingPress={() => go("fleet")}
|
||||
title="New agent"
|
||||
/>
|
||||
|
||||
<View style={{ gap: 16 }}>
|
||||
<Select
|
||||
label="Project"
|
||||
options={projectOptions}
|
||||
value={project}
|
||||
onChange={setProject}
|
||||
/>
|
||||
|
||||
<View>
|
||||
<Text style={[text.label, { color: colors.textHeading, marginBottom: 6 }]}>
|
||||
Task
|
||||
</Text>
|
||||
<TextField
|
||||
value={task}
|
||||
onChangeText={setTask}
|
||||
placeholder="What should this agent do?"
|
||||
multiline
|
||||
height={120}
|
||||
/>
|
||||
<Text style={[text.caption, { color: colors.textMuted, marginTop: 6 }]}>
|
||||
Runs isolated on a fresh branch.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Card>
|
||||
<ToggleRow
|
||||
title="Auto-approve edits"
|
||||
subtitle="Skip file-edit confirmations"
|
||||
value={swEdits}
|
||||
onValueChange={setSwEdits}
|
||||
/>
|
||||
<Divider />
|
||||
<ToggleRow
|
||||
title="Run tests on done"
|
||||
subtitle="Checkmark fails if tests fail"
|
||||
value={swTests}
|
||||
onValueChange={setSwTests}
|
||||
/>
|
||||
</Card>
|
||||
</View>
|
||||
|
||||
<View style={{ marginTop: "auto" }}>
|
||||
<Button size="lg" style={{ width: "100%" }} onPress={spawnGo}>
|
||||
Spawn agent
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: { flex: 1 },
|
||||
flex: { flex: 1 },
|
||||
content: { flex: 1, paddingTop: 8, paddingHorizontal: 20 },
|
||||
});
|
||||
@@ -0,0 +1,127 @@
|
||||
import React, { createContext, useContext, useMemo, useState } from "react";
|
||||
|
||||
/**
|
||||
* Central prototype state, ported 1:1 from the DC script's
|
||||
* `state` + `renderVals()` in project/Handler Mobile.dc.html (turn 2a).
|
||||
*
|
||||
* The prototype navigates by swapping a single `screen` value rather than a
|
||||
* stack, and answering agt-7a1d flips it Waiting -> Running everywhere. That
|
||||
* cross-screen behavior is exactly why this lives in one shared store.
|
||||
*/
|
||||
|
||||
export type Screen =
|
||||
| "fleet"
|
||||
| "detail"
|
||||
| "answer"
|
||||
| "spawn"
|
||||
| "log"
|
||||
| "settings";
|
||||
|
||||
export type DetailTab = "state" | "log";
|
||||
export type LogFilter = "all" | "handler" | "errors";
|
||||
export type BadgeTone = "neutral" | "positive" | "warning" | "danger";
|
||||
|
||||
const ANSWERED_STATE =
|
||||
"Answer received: keep the JSON store as a read-only fallback for one release. Deprecating writes now; removal ticket filed for next cycle.";
|
||||
const WAITING_STATE =
|
||||
"Schema written, migrations pass. Blocked on the legacy JSON store — drop it or keep as read fallback? Holding before deleting store/json.rs.";
|
||||
|
||||
interface AppStateValue {
|
||||
screen: Screen;
|
||||
detailTab: DetailTab;
|
||||
quickPick: number | null;
|
||||
logFilter: LogFilter;
|
||||
answered: boolean;
|
||||
swEdits: boolean;
|
||||
swTests: boolean;
|
||||
swPushWait: boolean;
|
||||
swPushFail: boolean;
|
||||
|
||||
// Derived (mirrors renderVals()).
|
||||
notAnswered: boolean;
|
||||
agentTone: BadgeTone;
|
||||
agentStatus: string;
|
||||
agentStateText: string;
|
||||
|
||||
go: (screen: Screen) => void;
|
||||
setDetailTab: (tab: DetailTab) => void;
|
||||
setQuickPick: (i: number) => void;
|
||||
setLogFilter: (f: LogFilter) => void;
|
||||
sendResume: () => void;
|
||||
spawnGo: () => void;
|
||||
setSwEdits: (v: boolean) => void;
|
||||
setSwTests: (v: boolean) => void;
|
||||
setSwPushWait: (v: boolean) => void;
|
||||
setSwPushFail: (v: boolean) => void;
|
||||
}
|
||||
|
||||
const AppStateContext = createContext<AppStateValue | null>(null);
|
||||
|
||||
export function AppStateProvider({ children }: { children: React.ReactNode }) {
|
||||
const [screen, setScreen] = useState<Screen>("fleet");
|
||||
const [detailTab, setDetailTab] = useState<DetailTab>("state");
|
||||
const [quickPick, setQuickPickState] = useState<number | null>(null);
|
||||
const [logFilter, setLogFilter] = useState<LogFilter>("all");
|
||||
const [answered, setAnswered] = useState(false);
|
||||
const [swEdits, setSwEdits] = useState(false);
|
||||
const [swTests, setSwTests] = useState(true);
|
||||
const [swPushWait, setSwPushWait] = useState(true);
|
||||
const [swPushFail, setSwPushFail] = useState(true);
|
||||
|
||||
const value = useMemo<AppStateValue>(
|
||||
() => ({
|
||||
screen,
|
||||
detailTab,
|
||||
quickPick,
|
||||
logFilter,
|
||||
answered,
|
||||
swEdits,
|
||||
swTests,
|
||||
swPushWait,
|
||||
swPushFail,
|
||||
|
||||
notAnswered: !answered,
|
||||
agentTone: answered ? "positive" : "warning",
|
||||
agentStatus: answered ? "Running" : "Waiting",
|
||||
agentStateText: answered ? ANSWERED_STATE : WAITING_STATE,
|
||||
|
||||
go: setScreen,
|
||||
setDetailTab,
|
||||
setQuickPick: setQuickPickState,
|
||||
setLogFilter,
|
||||
sendResume: () => {
|
||||
setAnswered(true);
|
||||
setDetailTab("state");
|
||||
setScreen("detail");
|
||||
},
|
||||
spawnGo: () => setScreen("fleet"),
|
||||
setSwEdits,
|
||||
setSwTests,
|
||||
setSwPushWait,
|
||||
setSwPushFail,
|
||||
}),
|
||||
[
|
||||
screen,
|
||||
detailTab,
|
||||
quickPick,
|
||||
logFilter,
|
||||
answered,
|
||||
swEdits,
|
||||
swTests,
|
||||
swPushWait,
|
||||
swPushFail,
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
<AppStateContext.Provider value={value}>
|
||||
{children}
|
||||
</AppStateContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAppState(): AppStateValue {
|
||||
const ctx = useContext(AppStateContext);
|
||||
if (!ctx) throw new Error("useAppState must be used within AppStateProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import type { TextStyle, ViewStyle } from "react-native";
|
||||
|
||||
/**
|
||||
* Leeworks design tokens, ported from the CSS token files in
|
||||
* project/_ds/.../tokens/*.css to typed React Native values.
|
||||
*
|
||||
* CSS `font:` shorthand and weight-by-number don't exist in RN, so each
|
||||
* weight maps to a concretely-loaded font family (see `fonts`), and the
|
||||
* composite `--type-*` styles become the `text` style objects below.
|
||||
*/
|
||||
|
||||
// ---- Fonts (families loaded via @expo-google-fonts) --------------------
|
||||
export const fonts = {
|
||||
displayRegular: "Outfit_400Regular",
|
||||
displayMedium: "Outfit_500Medium",
|
||||
displaySemiBold: "Outfit_600SemiBold",
|
||||
displayBold: "Outfit_700Bold",
|
||||
displayExtraBold: "Outfit_800ExtraBold",
|
||||
|
||||
bodyRegular: "Figtree_400Regular",
|
||||
bodyMedium: "Figtree_500Medium",
|
||||
bodySemiBold: "Figtree_600SemiBold",
|
||||
bodyBold: "Figtree_700Bold",
|
||||
bodyItalic: "Figtree_400Regular_Italic",
|
||||
|
||||
monoRegular: "SplineSansMono_400Regular",
|
||||
monoMedium: "SplineSansMono_500Medium",
|
||||
monoSemiBold: "SplineSansMono_600SemiBold",
|
||||
} as const;
|
||||
|
||||
// ---- Radii (effects.css) -----------------------------------------------
|
||||
export const radius = {
|
||||
sm: 6,
|
||||
md: 8,
|
||||
lg: 10,
|
||||
xl: 16,
|
||||
pill: 999,
|
||||
} as const;
|
||||
|
||||
// ---- Color palettes (colors.css) ---------------------------------------
|
||||
// The warm-neutral ink ramp is shared across themes; only the semantic
|
||||
// aliases and status colors flip between light and dark.
|
||||
const ink = {
|
||||
white: "#ffffff",
|
||||
ink0: "#fcfcfb",
|
||||
ink1: "#f6f6f4",
|
||||
ink2: "#ececea",
|
||||
ink3: "#dcdcd8",
|
||||
ink4: "#b8b8b3",
|
||||
ink5: "#8b8b86",
|
||||
ink6: "#62625e",
|
||||
ink7: "#3d3d3a",
|
||||
ink8: "#232321",
|
||||
ink9: "#141413",
|
||||
} as const;
|
||||
|
||||
export const lightColors = {
|
||||
...ink,
|
||||
|
||||
signal: "#1d6b45",
|
||||
signalTint: "#e8f2ec",
|
||||
positive: "#1d6b45",
|
||||
positiveTint: "#e8f2ec",
|
||||
warning: "#8a6116",
|
||||
warningTint: "#f7efdd",
|
||||
danger: "#a33a2f",
|
||||
dangerTint: "#f9e9e6",
|
||||
|
||||
surfacePage: ink.white,
|
||||
surfaceRaised: ink.white,
|
||||
surfaceSunken: ink.ink1,
|
||||
surfaceCard: ink.white,
|
||||
surfaceInverse: ink.ink9,
|
||||
|
||||
textHeading: ink.ink9,
|
||||
textBody: ink.ink7,
|
||||
textMuted: ink.ink5,
|
||||
textInverse: ink.ink0,
|
||||
|
||||
borderSubtle: ink.ink2,
|
||||
borderDefault: ink.ink3,
|
||||
borderStrong: ink.ink9,
|
||||
|
||||
interactive: ink.ink9,
|
||||
interactiveHover: ink.ink7,
|
||||
interactivePress: "#000000",
|
||||
} as const;
|
||||
|
||||
export type ThemeColors = Record<keyof typeof lightColors, string>;
|
||||
|
||||
export const darkColors: ThemeColors = {
|
||||
...ink,
|
||||
|
||||
signal: "#4fa377",
|
||||
signalTint: "#1d2f26",
|
||||
positive: "#4fa377",
|
||||
positiveTint: "#1d2f26",
|
||||
warning: "#c99a3f",
|
||||
warningTint: "#2f2818",
|
||||
danger: "#d0685c",
|
||||
dangerTint: "#331e1b",
|
||||
|
||||
surfacePage: "#161615",
|
||||
surfaceRaised: "#1e1e1d",
|
||||
surfaceSunken: "#111110",
|
||||
surfaceCard: "#1e1e1d",
|
||||
surfaceInverse: ink.ink0,
|
||||
|
||||
textHeading: "#f4f4f2",
|
||||
textBody: "#c9c9c4",
|
||||
textMuted: "#8b8b86",
|
||||
textInverse: ink.ink9,
|
||||
|
||||
borderSubtle: "#2b2b29",
|
||||
borderDefault: "#3a3a37",
|
||||
borderStrong: "#f4f4f2",
|
||||
|
||||
interactive: "#f4f4f2",
|
||||
interactiveHover: "#d8d8d4",
|
||||
interactivePress: "#ffffff",
|
||||
};
|
||||
|
||||
// ---- Composite text styles (typography.css `--type-*`) -----------------
|
||||
// Color is intentionally omitted — callers set it from the active palette.
|
||||
export const text = {
|
||||
// `--type-h3` + font-display + tracking-tight, as the screens use it.
|
||||
h3: {
|
||||
fontFamily: fonts.displaySemiBold,
|
||||
fontSize: 24,
|
||||
lineHeight: 31,
|
||||
letterSpacing: -0.48,
|
||||
} as TextStyle,
|
||||
body: {
|
||||
fontFamily: fonts.bodyRegular,
|
||||
fontSize: 15,
|
||||
lineHeight: 23,
|
||||
} as TextStyle,
|
||||
bodySm: {
|
||||
fontFamily: fonts.bodyRegular,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
} as TextStyle,
|
||||
label: {
|
||||
fontFamily: fonts.bodySemiBold,
|
||||
fontSize: 13,
|
||||
lineHeight: 16,
|
||||
} as TextStyle,
|
||||
caption: {
|
||||
fontFamily: fonts.bodyMedium,
|
||||
fontSize: 12,
|
||||
lineHeight: 17,
|
||||
} as TextStyle,
|
||||
// Overlines are rendered at 11px with wide tracking + uppercase.
|
||||
overline: {
|
||||
fontFamily: fonts.displaySemiBold,
|
||||
fontSize: 11,
|
||||
lineHeight: 13,
|
||||
letterSpacing: 0.88,
|
||||
textTransform: "uppercase",
|
||||
} as TextStyle,
|
||||
} as const;
|
||||
|
||||
// ---- Shadows (effects.css) ---------------------------------------------
|
||||
export const shadows = {
|
||||
card: {
|
||||
shadowColor: "#141413",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
} as ViewStyle,
|
||||
raised: {
|
||||
shadowColor: "#141413",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.07,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
} as ViewStyle,
|
||||
} as const;
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useColorScheme } from "react-native";
|
||||
import { darkColors, lightColors, type ThemeColors } from "./tokens";
|
||||
|
||||
export type Scheme = "light" | "dark";
|
||||
|
||||
/**
|
||||
* Resolves the active Leeworks palette from the OS appearance.
|
||||
*
|
||||
* The design exposed dark mode as a design-time prop (`data-theme`); on a
|
||||
* real iOS app the faithful equivalent is the system appearance, so the
|
||||
* theme follows `useColorScheme()` (app.json sets userInterfaceStyle
|
||||
* "automatic"). All six screens read colors through this hook.
|
||||
*/
|
||||
export function useTheme(): { colors: ThemeColors; scheme: Scheme } {
|
||||
const scheme: Scheme = useColorScheme() === "dark" ? "dark" : "light";
|
||||
return { colors: scheme === "dark" ? darkColors : lightColors, scheme };
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx"]
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
# Handler mobile app design
|
||||
|
||||
_Started 2026-07-20 14:45 UTC_
|
||||
|
||||
---
|
||||
|
||||
## User
|
||||
|
||||
Design a mobile app for my "handler" project.
|
||||
|
||||
## Assistant
|
||||
|
||||
_[tool: list_files]_
|
||||
|
||||
_[tool: questions_v2]_
|
||||
|
||||
## User
|
||||
|
||||
Questions answered:
|
||||
- what_is_handler: A remote control wrapper for Claude Code agents. Run many claude agents across many projects — each isolated, each leaving behind a checkmark (its current state) and an entry in a big log (the complete history) — all backed by a centralized database, driven entirely through an HTTP API.
|
||||
See https://github.com/0xWheatyz/handler
|
||||
- core_object: Agents with long running tasks
|
||||
- key_screens: Home / dashboard, List + detail of the core object
|
||||
- scope: A full flow (5–7 screens)
|
||||
- interactivity: Light interactions (tabs, toggles)
|
||||
- audience: Just me — exploring the idea
|
||||
- tone: Utilitarian and terse
|
||||
- platform: iOS
|
||||
- variations: Yes — show 2–3 layout directions for the main screen
|
||||
|
||||
## Assistant
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: web_fetch]_
|
||||
|
||||
_[tool: grep]_
|
||||
|
||||
_[tool: list_files]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: grep]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: read_file]_
|
||||
|
||||
_[tool: dc_write]_
|
||||
|
||||
_[tool: ready_for_verification]_
|
||||
|
||||
## User
|
||||
|
||||
Commit to 1a, wire-up the real screens.
|
||||
|
||||
## Assistant
|
||||
|
||||
_[tool: dc_js_str_replace]_
|
||||
|
||||
_[tool: dc_js_str_replace]_
|
||||
|
||||
_[tool: dc_html_str_replace]_
|
||||
|
||||
_[tool: ready_for_verification]_
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
@@ -0,0 +1,25 @@
|
||||
# CODING AGENTS: READ THIS FIRST
|
||||
|
||||
This is a **handoff bundle** from Claude Design (claude.ai/design).
|
||||
|
||||
A user mocked up designs in HTML/CSS/JS using an AI design tool, then exported this bundle so a coding agent can implement the designs for real.
|
||||
|
||||
## What you should do — IMPORTANT
|
||||
|
||||
**Read the chat transcripts first.** There are 1 chat transcript(s) in `chats/`. The transcripts show the full back-and-forth between the user and the design assistant — they tell you **what the user actually wants** and **where they landed** after iterating. Don't skip them. The final HTML files are the output, but the chat is where the intent lives.
|
||||
|
||||
**Read `project/Handler Mobile.dc.html` in full.** The user had this file open when they triggered the handoff, so it's almost certainly the primary design they want built. Read it top to bottom — don't skim. Then **follow its imports**: open every file it pulls in (shared components, CSS, scripts) so you understand how the pieces fit together before you start implementing.
|
||||
|
||||
**If anything is ambiguous, ask the user to confirm before you start implementing.** It's much cheaper to clarify scope up front than to build the wrong thing.
|
||||
|
||||
## About the design files
|
||||
|
||||
The design medium is **HTML/CSS/JS** — these are prototypes, not production code. Your job is to **recreate them pixel-perfectly** in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit.
|
||||
|
||||
**Don't render these files in a browser or take screenshots unless the user asks you to.** Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won't tell you anything they don't.
|
||||
|
||||
## Bundle contents
|
||||
|
||||
- `README.md` — this file
|
||||
- `chats/` — conversation transcripts (read these!)
|
||||
- `project/` — the `Handler mobile app design` project files (HTML prototypes, assets, components)
|
||||
@@ -0,0 +1,572 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="stylesheet" href="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/tokens/fonts.css">
|
||||
<link rel="stylesheet" href="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/tokens/colors.css">
|
||||
<link rel="stylesheet" href="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/tokens/typography.css">
|
||||
<link rel="stylesheet" href="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/tokens/spacing.css">
|
||||
<link rel="stylesheet" href="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/tokens/effects.css">
|
||||
<link rel="stylesheet" href="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/styles.css">
|
||||
<script src="_ds/leeworks-design-system-b3e560db-22c8-4dea-b1ef-d19ecb5f5b6e/_ds_bundle.js"></script>
|
||||
<style>
|
||||
body{margin:0;background:#f0eee9;font-family:system-ui,sans-serif}
|
||||
a{color:#141413}a:hover{color:#555}
|
||||
@keyframes lwPulse{0%,100%{opacity:1}50%{opacity:.35}}
|
||||
.dv-turn{padding:40px 44px 32px;border-bottom:1px solid rgba(0,0,0,.08);scroll-margin-top:16px}
|
||||
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
|
||||
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px;text-decoration:none}
|
||||
.dv-tname{font:600 13px/1.2 system-ui,sans-serif;color:#1a1a1a}
|
||||
.dv-note{max-width:760px;font:12px/1.55 system-ui,sans-serif;color:rgba(0,0,0,.55);margin:0 0 24px}
|
||||
.dv-row-label{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.45);margin:28px 0 14px}
|
||||
.dv-opts{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
|
||||
.dv-opt{flex:none;display:flex;flex-direction:column;gap:9px;scroll-margin-top:16px}
|
||||
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(0,0,0,.08);color:#1a1a1a;border-radius:5px;text-decoration:none}
|
||||
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 11px/1.3 system-ui,sans-serif;color:rgba(0,0,0,.55)}
|
||||
.dv-opt:target .dv-oid{background:#2a78d6;color:#fff}
|
||||
.dv-next{margin:26px 0 0;font:12px/1.5 system-ui,sans-serif;color:rgba(0,0,0,.5)}
|
||||
</style>
|
||||
</helmet>
|
||||
<section class="dv-turn" id="t2">
|
||||
<div class="dv-thd"><a class="dv-tid" href="#t2">2</a><span class="dv-tname">Committed: 1a wired into one tappable prototype</span></div>
|
||||
<p class="dv-note">One phone, all screens live. Tap: Answer buttons → answer flow (quick replies + send & resume flips the agent to Running), checkmark rows → agent detail, New → spawn, tab bar → Log / Settings. Back arrows work.</p>
|
||||
<div class="dv-opts">
|
||||
<div class="dv-opt" id="2a"><div class="dv-olabel"><a class="dv-oid" href="#2a">2a</a>Handler — interactive prototype</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="2a Interactive prototype" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
|
||||
<!-- FLEET -->
|
||||
<sc-if value="{{ isFleet }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:12px 0 20px">
|
||||
<div style="flex:1">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Fleet</div>
|
||||
<div style="font:var(--type-body-sm);color:var(--text-muted);margin-top:2px">12 agents · 3 waiting on you</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" onClick="{{ goSpawn }}" hint-size="64px,32px">New</x-import>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||||
<div style="flex:1;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);padding:14px 16px"><div style="font:var(--type-caption);color:var(--text-muted)">Running</div><div style="font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--text-heading);margin-top:4px">6</div></div>
|
||||
<div style="flex:1;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);padding:14px 16px"><div style="font:var(--type-caption);color:var(--text-muted)">Waiting</div><div style="font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--warning);margin-top:4px">3</div></div>
|
||||
<div style="flex:1;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);padding:14px 16px"><div style="font:var(--type-caption);color:var(--text-muted)">Done</div><div style="font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--text-heading);margin-top:4px">42</div></div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Waiting on you</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);margin-bottom:20px">
|
||||
<sc-if value="{{ notAnswered }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="padding:14px 16px;border-bottom:1px solid var(--border-subtle)">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">agt-7a1d</span><span style="font:var(--type-label);color:var(--text-heading);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">handler · migrate state to sqlite</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px"><span style="flex:1;font:var(--type-body-sm);color:var(--text-body);font-style:italic">"Drop the legacy JSON store, or keep it as a read fallback?"</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" variant="secondary" onClick="{{ goAnswer }}" hint-size="76px,32px">Answer</x-import></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="padding:14px 16px;border-bottom:1px solid var(--border-subtle)">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">agt-3e90</span><span style="font:var(--type-label);color:var(--text-heading);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">wheatsite · fix build on node 22</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px"><span style="flex:1;font:var(--type-body-sm);color:var(--text-body);font-style:italic">"Pin node 20 in CI, or patch esbuild?"</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" variant="secondary" onClick="{{ goAnswer }}" hint-size="76px,32px">Answer</x-import></div>
|
||||
</div>
|
||||
<div style="padding:14px 16px">
|
||||
<div style="display:flex;align-items:center;gap:8px"><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">agt-b241</span><span style="font:var(--type-label);color:var(--text-heading);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">api-gateway · add rate limiting</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px"><span style="flex:1;font:var(--type-body-sm);color:var(--text-body);font-style:italic">"429 body: JSON or plain text?"</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" variant="secondary" onClick="{{ goAnswer }}" hint-size="76px,32px">Answer</x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Recent checkmarks</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div onClick="{{ goDetail }}" style="display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle);cursor:pointer" style-hover="background:var(--surface-sunken)"><span style="width:8px;height:8px;border-radius:4px;background:var(--positive);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">handler · add /agents endpoint</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">done — tests pass · 14m ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div onClick="{{ goDetail }}" style="display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle);cursor:pointer" style-hover="background:var(--surface-sunken)"><span style="width:8px;height:8px;border-radius:4px;background:var(--danger);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">wheatsite · refactor router</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">failed — 2 tests · 1h ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div onClick="{{ goDetail }}" style="display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:44px;cursor:pointer" style-hover="background:var(--surface-sunken)"><span style="width:8px;height:8px;border-radius:4px;background:var(--positive);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">dotfiles · port zsh config</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">done — 12 turns · 3h ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Fleet</span></div>
|
||||
<div onClick="{{ goLog }}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Log</span></div>
|
||||
<div onClick="{{ goSettings }}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Settings</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- AGENT DETAIL -->
|
||||
<sc-if value="{{ isDetail }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:8px 0 16px">
|
||||
<span onClick="{{ goFleet }}" style="display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-8px;color:var(--text-heading);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="20" style="transform:rotate(180deg)" hint-size="20px,20px"></x-import></span>
|
||||
<span style="font-family:var(--font-mono);font-size:13px;color:var(--text-muted);flex:1">agt-7a1d</span>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="{{ agentTone }}" hint-size="auto,22px">{{ agentStatus }}</x-import>
|
||||
</div>
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Migrate agent state to sqlite</div>
|
||||
<div style="font:var(--type-body-sm);color:var(--text-muted);margin:4px 0 16px">handler · branch <span style="font-family:var(--font-mono)">agt/7a1d</span></div>
|
||||
<div style="display:flex;background:var(--surface-sunken);border-radius:8px;padding:3px;margin-bottom:16px">
|
||||
<button onClick="{{ showState }}" style="{{ segStateStyle }}">Checkmark</button>
|
||||
<button onClick="{{ showLog }}" style="{{ segLogStyle }}">Log</button>
|
||||
</div>
|
||||
<sc-if value="{{ isState }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:10px;padding:16px">
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:8px">Current state</div>
|
||||
<div style="font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--text-body)">{{ agentStateText }}</div>
|
||||
<div style="font:var(--type-caption);color:var(--text-muted);margin-top:10px">updated 2m ago</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-body-sm);color:var(--text-muted)">Started</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">41m ago</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-body-sm);color:var(--text-muted)">Model</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">claude-sonnet-4</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-body-sm);color:var(--text-muted)">Turns</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">21</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px"><span style="font:var(--type-body-sm);color:var(--text-muted)">Tokens</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">348k</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ isLog }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:10px;padding:16px;font-family:var(--font-mono);font-size:12.5px;line-height:2.1">
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">14:02</span><span style="color:var(--warning)">paused — waiting for input</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:57</span><span style="color:var(--text-body)">checkmark updated</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:52</span><span style="color:var(--text-muted)">tool: bash — sqlite3 .schema</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:48</span><span style="color:var(--text-muted)">tool: edit — store/sqlite.rs</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:40</span><span style="color:var(--text-muted)">tool: bash — cargo test store</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:29</span><span style="color:var(--text-body)">checkmark updated</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:21</span><span style="color:var(--text-muted)">tool: read — store/json.rs</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="display:flex;gap:10px;margin-top:20px">
|
||||
<sc-if value="{{ notAnswered }}" hint-placeholder-val="{{ true }}"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" style="flex:1" onClick="{{ goAnswer }}" hint-size="100%,48px">Answer</x-import></sc-if>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" variant="secondary" style="flex:1" hint-size="80px,48px">Pause</x-import>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" variant="danger" hint-size="70px,48px">Kill</x-import>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0"></div>
|
||||
</sc-if>
|
||||
|
||||
<!-- ANSWER -->
|
||||
<sc-if value="{{ isAnswer }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px;display:flex;flex-direction:column">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:8px 0 16px">
|
||||
<span onClick="{{ goDetail }}" style="display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-8px;color:var(--text-heading);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="20" style="transform:rotate(180deg)" hint-size="20px,20px"></x-import></span>
|
||||
<span style="font-family:var(--font-mono);font-size:13px;color:var(--text-muted);flex:1">agt-7a1d</span>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="warning" hint-size="auto,22px">Waiting</x-import>
|
||||
</div>
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading);margin-bottom:16px">Agent needs input</div>
|
||||
<div style="background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:10px;padding:16px;margin-bottom:20px">
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:8px">Question · 2m ago</div>
|
||||
<div style="font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--text-body)">Migrations pass on the new sqlite store. Should I drop the legacy JSON store entirely, or keep it as a read-only fallback for one release?</div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Quick replies</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px">
|
||||
<sc-for list="{{ quickReplies }}" as="qr" hint-placeholder-count="3">
|
||||
<button onClick="{{ qr.pick }}" style="{{ qr.style }}">{{ qr.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="margin-top:auto;display:flex;flex-direction:column;gap:12px">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Input" placeholder="Or type a reply…" size="lg" hint-size="100%,48px"></x-import>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" style="width:100%" onClick="{{ sendResume }}" hint-size="100%,48px">Send & resume</x-import>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0"></div>
|
||||
</sc-if>
|
||||
|
||||
<!-- SPAWN -->
|
||||
<sc-if value="{{ isSpawn }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px;display:flex;flex-direction:column">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:8px 0 16px">
|
||||
<span onClick="{{ goFleet }}" style="display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-8px;color:var(--text-heading);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="x" size="20" hint-size="20px,20px"></x-import></span>
|
||||
<span style="font:var(--type-label);font-weight:600;color:var(--text-heading);flex:1">New agent</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Select" label="Project" options="{{ projectOpts }}" value="handler" size="lg" hint-size="100%,72px"></x-import>
|
||||
<div>
|
||||
<div style="font:var(--type-label);color:var(--text-heading);margin-bottom:6px">Task</div>
|
||||
<textarea placeholder="What should this agent do?" style="width:100%;box-sizing:border-box;height:120px;resize:none;padding:12px 14px;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-page);font:var(--type-body);font-family:var(--font-body);color:var(--text-body);outline:none"></textarea>
|
||||
<div style="font:var(--type-caption);color:var(--text-muted);margin-top:6px">Runs isolated on a fresh branch.</div>
|
||||
</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><div><div style="font:var(--type-label);color:var(--text-heading)">Auto-approve edits</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">Skip file-edit confirmations</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Switch" checked="{{ swEdits }}" onChange="{{ toggleEdits }}" hint-size="44px,24px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:44px"><div><div style="font:var(--type-label);color:var(--text-heading)">Run tests on done</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">Checkmark fails if tests fail</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Switch" checked="{{ swTests }}" onChange="{{ toggleTests }}" hint-size="44px,24px"></x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:auto">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" style="width:100%" onClick="{{ spawnGo }}" hint-size="100%,48px">Spawn agent</x-import>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0"></div>
|
||||
</sc-if>
|
||||
|
||||
<!-- LOG -->
|
||||
<sc-if value="{{ isLogScreen }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column">
|
||||
<div style="padding:20px 20px 16px">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Log</div>
|
||||
<div style="display:flex;gap:8px;margin-top:14px">
|
||||
<button onClick="{{ setFilterAll }}" style="{{ fAllStyle }}">All</button>
|
||||
<button onClick="{{ setFilterHandler }}" style="{{ fHandlerStyle }}">handler</button>
|
||||
<button onClick="{{ setFilterErrors }}" style="{{ fErrStyle }}">Errors</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 20px 8px;font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px">Today</div>
|
||||
<div style="flex:1;background:var(--surface-sunken);border-top:1px solid var(--border-subtle);padding:16px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:2.1">
|
||||
<sc-for list="{{ logEntries }}" as="e" hint-placeholder-count="8">
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">{{ e.t }}</span><span style="color:var(--ink-6);width:66px;flex-shrink:0">{{ e.id }}</span><span style="color: {{ e.color }}; flex:1">{{ e.msg }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div onClick="{{ goFleet }}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Fleet</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Log</span></div>
|
||||
<div onClick="{{ goSettings }}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Settings</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<!-- SETTINGS -->
|
||||
<sc-if value="{{ isSettings }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading);margin:12px 0 20px">Settings</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Server</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);margin-bottom:20px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-label);color:var(--text-heading)">Endpoint</span><span style="font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)">https://handler.wheaty.dev</span></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-label);color:var(--text-heading)">API key</span><span style="font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)">hnd_••••••••4f2a</span></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:14px 16px;min-height:44px"><span style="font:var(--type-label);color:var(--text-heading)">Status</span><span style="display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12.5px;color:var(--positive)"><span style="width:7px;height:7px;border-radius:4px;background:var(--positive)"></span>connected · 38ms</span></div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Notifications</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);margin-bottom:20px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><div><div style="font:var(--type-label);color:var(--text-heading)">Waiting on input</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">Push when an agent pauses</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Switch" checked="{{ swPushWait }}" onChange="{{ togglePushWait }}" hint-size="44px,24px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:44px"><div><div style="font:var(--type-label);color:var(--text-heading)">Failures</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">Push when a checkmark fails</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Switch" checked="{{ swPushFail }}" onChange="{{ togglePushFail }}" hint-size="44px,24px"></x-import></div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" variant="secondary" size="lg" style="width:100%" hint-size="100%,48px">Sign out</x-import>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div onClick="{{ goFleet }}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Fleet</span></div>
|
||||
<div onClick="{{ goLog }}" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Log</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading);cursor:pointer"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Settings</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<p class="dv-next">Answering agt-7a1d flips it to Running and clears it from the waiting list. Turn <a class="dv-tid" href="#t1">1</a> explorations kept below.</p>
|
||||
</section>
|
||||
<section class="dv-turn" id="t1">
|
||||
<div class="dv-thd"><a class="dv-tid" href="#t1">1</a><span class="dv-tname">Handler — iOS app, first pass</span></div>
|
||||
<p class="dv-note">Assumptions from the repo: entities are <b>projects → agents</b>; each agent carries a <b>checkmark</b> (current state) and writes to a <b>global log</b>; agents can be running, waiting on input, done, or failed. Tabs: Fleet / Log / Settings. Copy is terse, mono for ids & data per Leeworks. Three directions for the main screen below, then one shared flow.</p>
|
||||
|
||||
<div class="dv-row-label">Main screen — 3 directions</div>
|
||||
<div class="dv-opts">
|
||||
|
||||
<!-- ============ 1a Attention-first ============ -->
|
||||
<div class="dv-opt" id="1a"><div class="dv-olabel"><a class="dv-oid" href="#1a">1a</a>Attention-first — what needs you, then everything else</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1a Fleet attention-first" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:12px 0 20px">
|
||||
<div style="flex:1">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Fleet</div>
|
||||
<div style="font:var(--type-body-sm);color:var(--text-muted);margin-top:2px">12 agents · 3 waiting on you</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" hint-size="64px,32px">New</x-import>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;margin-bottom:20px">
|
||||
<div style="flex:1;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);padding:14px 16px"><div style="font:var(--type-caption);color:var(--text-muted)">Running</div><div style="font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--text-heading);margin-top:4px">6</div></div>
|
||||
<div style="flex:1;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);padding:14px 16px"><div style="font:var(--type-caption);color:var(--text-muted)">Waiting</div><div style="font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--warning);margin-top:4px">3</div></div>
|
||||
<div style="flex:1;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);padding:14px 16px"><div style="font:var(--type-caption);color:var(--text-muted)">Done</div><div style="font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--text-heading);margin-top:4px">42</div></div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Waiting on you</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card);margin-bottom:20px">
|
||||
<div style="padding:14px 16px;border-bottom:1px solid var(--border-subtle)">
|
||||
<div style="display:flex;align-items:center;gap:8px"><sc-if value="{{ showIds }}" hint-placeholder-val="{{ true }}"><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">agt-7a1d</span></sc-if><span style="font:var(--type-label);color:var(--text-heading);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">handler · migrate state to sqlite</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px"><span style="flex:1;font:var(--type-body-sm);color:var(--text-body);font-style:italic">"Drop the legacy JSON store, or keep it as a read fallback?"</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" variant="secondary" hint-size="76px,32px">Answer</x-import></div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;border-bottom:1px solid var(--border-subtle)">
|
||||
<div style="display:flex;align-items:center;gap:8px"><sc-if value="{{ showIds }}" hint-placeholder-val="{{ true }}"><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">agt-3e90</span></sc-if><span style="font:var(--type-label);color:var(--text-heading);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">wheatsite · fix build on node 22</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px"><span style="flex:1;font:var(--type-body-sm);color:var(--text-body);font-style:italic">"Pin node 20 in CI, or patch esbuild?"</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" variant="secondary" hint-size="76px,32px">Answer</x-import></div>
|
||||
</div>
|
||||
<div style="padding:14px 16px">
|
||||
<div style="display:flex;align-items:center;gap:8px"><sc-if value="{{ showIds }}" hint-placeholder-val="{{ true }}"><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">agt-b241</span></sc-if><span style="font:var(--type-label);color:var(--text-heading);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">api-gateway · add rate limiting</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:8px"><span style="flex:1;font:var(--type-body-sm);color:var(--text-body);font-style:italic">"429 body: JSON or plain text?"</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" variant="secondary" hint-size="76px,32px">Answer</x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Recent checkmarks</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="width:8px;height:8px;border-radius:4px;background:var(--positive);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">handler · add /agents endpoint</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">done — tests pass · 14m ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="width:8px;height:8px;border-radius:4px;background:var(--danger);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">wheatsite · refactor router</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">failed — 2 tests · 1h ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:44px"><span style="width:8px;height:8px;border-radius:4px;background:var(--positive);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">dotfiles · port zsh config</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">done — 12 turns · 3h ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Fleet</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Log</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Settings</span></div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- ============ 1b Projects-grouped ============ -->
|
||||
<div class="dv-opt" id="1b"><div class="dv-olabel"><a class="dv-oid" href="#1b">1b</a>Project-grouped — fleet organized by repo</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1b Fleet by project" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin:12px 0 16px">
|
||||
<div style="flex:1">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Projects</div>
|
||||
<div style="font:var(--type-body-sm);color:var(--text-muted);margin-top:2px">4 projects · 12 agents</div>
|
||||
</div>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="sm" hint-size="64px,32px">New</x-import>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="folder" size="16" style="color:var(--ink-5)" hint-size="16px,16px"></x-import><span style="font:var(--type-label);font-weight:600;color:var(--text-heading);flex:1">handler</span><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">3 agents</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="width:8px;height:8px;border-radius:4px;background:var(--warning);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">migrate state to sqlite</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">waiting on input · 2m</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="warning" hint-size="auto,22px">Waiting</x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="width:8px;height:8px;border-radius:4px;background:var(--positive);flex-shrink:0;animation:lwPulse 2s infinite"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">write API docs</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">running · turn 21</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="positive" hint-size="auto,22px">Running</x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:44px"><span style="width:8px;height:8px;border-radius:4px;background:var(--ink-4);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">add /agents endpoint</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">done · 14m ago</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="neutral" hint-size="auto,22px">Done</x-import></div>
|
||||
</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="folder" size="16" style="color:var(--ink-5)" hint-size="16px,16px"></x-import><span style="font:var(--type-label);font-weight:600;color:var(--text-heading);flex:1">wheatsite</span><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">2 agents</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><span style="width:8px;height:8px;border-radius:4px;background:var(--warning);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">fix build on node 22</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">waiting on input · 18m</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="warning" hint-size="auto,22px">Waiting</x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:44px"><span style="width:8px;height:8px;border-radius:4px;background:var(--danger);flex-shrink:0"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">refactor router</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">failed — 2 tests · 1h</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="danger" hint-size="auto,22px">Failed</x-import></div>
|
||||
</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="folder" size="16" style="color:var(--ink-5)" hint-size="16px,16px"></x-import><span style="font:var(--type-label);font-weight:600;color:var(--text-heading);flex:1">dotfiles</span><span style="font-family:var(--font-mono);font-size:12px;color:var(--text-muted)">1 agent</span><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="16" style="color:var(--ink-4)" hint-size="16px,16px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:12px 16px;min-height:44px"><span style="width:8px;height:8px;border-radius:4px;background:var(--positive);flex-shrink:0;animation:lwPulse 2s infinite"></span><div style="flex:1;min-width:0"><div style="font:var(--type-label);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">port zsh config</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">running · turn 6</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="positive" hint-size="auto,22px">Running</x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Fleet</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Log</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Settings</span></div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- ============ 1c Live-log-first ============ -->
|
||||
<div class="dv-opt" id="1c"><div class="dv-olabel"><a class="dv-oid" href="#1c">1c</a>Log-first — the fleet as a live terminal feed</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1c Fleet live feed" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column">
|
||||
<div style="padding:20px 20px 16px">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading);flex:1">handler</div>
|
||||
<span style="display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--positive)"><span style="width:7px;height:7px;border-radius:4px;background:var(--positive);animation:lwPulse 1.6s infinite"></span>live</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:14px">
|
||||
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-default);font-family:var(--font-mono);font-size:12px;color:var(--text-heading)"><span style="width:7px;height:7px;border-radius:4px;background:var(--positive)"></span>6 running</span>
|
||||
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-default);font-family:var(--font-mono);font-size:12px;color:var(--text-heading)"><span style="width:7px;height:7px;border-radius:4px;background:var(--warning)"></span>3 waiting</span>
|
||||
<span style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-default);font-family:var(--font-mono);font-size:12px;color:var(--text-heading)"><span style="width:7px;height:7px;border-radius:4px;background:var(--ink-4)"></span>42 done</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;background:var(--surface-sunken);border-top:1px solid var(--border-subtle);padding:16px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:2.1">
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">14:02:11</span><span style="color:var(--warning);flex:1">agt-7a1d paused — waiting for input</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:58:40</span><span style="color:var(--text-body);flex:1">agt-9c77 checkmark updated</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:51:02</span><span style="color:var(--positive);flex:1">agt-2d08 done — 34 turns, tests pass</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:44:19</span><span style="color:var(--danger);flex:1">agt-e33a error — 2 tests failed</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:39:55</span><span style="color:var(--text-body);flex:1">spawn agt-51f0 → dotfiles</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:31:07</span><span style="color:var(--warning);flex:1">agt-b241 paused — waiting for input</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:18:44</span><span style="color:var(--text-muted);flex:1">agt-9c77 tool: bash — cargo test</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:02:30</span><span style="color:var(--positive);flex:1">agt-90bc done — 12 turns</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">12:57:12</span><span style="color:var(--text-muted);flex:1">agt-51f0 tool: edit — .zshrc</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">12:49:03</span><span style="color:var(--text-body);flex:1">agt-e33a checkmark updated</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">12:40:38</span><span style="color:var(--text-body);flex:1">spawn agt-b241 → api-gateway</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Fleet</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Log</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Settings</span></div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="dv-row-label">The flow — agent detail → answer → spawn → global log</div>
|
||||
<div class="dv-opts">
|
||||
|
||||
<!-- ============ 1d Agent detail ============ -->
|
||||
<div class="dv-opt" id="1d"><div class="dv-olabel"><a class="dv-oid" href="#1d">1d</a>Agent detail — checkmark + log (segmented control works)</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1d Agent detail" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:8px 0 16px">
|
||||
<span style="display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-8px;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="20" style="transform:rotate(180deg)" hint-size="20px,20px"></x-import></span>
|
||||
<span style="font-family:var(--font-mono);font-size:13px;color:var(--text-muted);flex:1">agt-7a1d</span>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="warning" hint-size="auto,22px">Waiting</x-import>
|
||||
</div>
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Migrate agent state to sqlite</div>
|
||||
<div style="font:var(--type-body-sm);color:var(--text-muted);margin:4px 0 16px">handler · branch <span style="font-family:var(--font-mono)">agt/7a1d</span></div>
|
||||
<div style="display:flex;background:var(--surface-sunken);border-radius:8px;padding:3px;margin-bottom:16px">
|
||||
<button onClick="{{ showState }}" style="{{ segStateStyle }}">Checkmark</button>
|
||||
<button onClick="{{ showLog }}" style="{{ segLogStyle }}">Log</button>
|
||||
</div>
|
||||
<sc-if value="{{ isState }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:10px;padding:16px">
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:8px">Current state</div>
|
||||
<div style="font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--text-body)">Schema written, migrations pass. Blocked on the legacy JSON store — drop it or keep as read fallback? Holding before deleting store/json.rs.</div>
|
||||
<div style="font:var(--type-caption);color:var(--text-muted);margin-top:10px">updated 2m ago</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-body-sm);color:var(--text-muted)">Started</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">41m ago</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-body-sm);color:var(--text-muted)">Model</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">claude-sonnet-4</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle)"><span style="font:var(--type-body-sm);color:var(--text-muted)">Turns</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">21</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:12px 16px"><span style="font:var(--type-body-sm);color:var(--text-muted)">Tokens</span><span style="font-family:var(--font-mono);font-size:13px;color:var(--text-heading)">348k</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ isLog }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:10px;padding:16px;font-family:var(--font-mono);font-size:12.5px;line-height:2.1">
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">14:02</span><span style="color:var(--warning)">paused — waiting for input</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:57</span><span style="color:var(--text-body)">checkmark updated</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:52</span><span style="color:var(--text-muted)">tool: bash — sqlite3 .schema</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:48</span><span style="color:var(--text-muted)">tool: edit — store/sqlite.rs</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:40</span><span style="color:var(--text-muted)">tool: bash — cargo test store</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:29</span><span style="color:var(--text-body)">checkmark updated</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">13:21</span><span style="color:var(--text-muted)">tool: read — store/json.rs</span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="display:flex;gap:10px;margin-top:20px">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" style="flex:1" hint-size="100%,48px">Answer</x-import>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" variant="secondary" hint-size="80px,48px">Pause</x-import>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" variant="danger" hint-size="70px,48px">Kill</x-import>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0"></div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- ============ 1e Answer & resume ============ -->
|
||||
<div class="dv-opt" id="1e"><div class="dv-olabel"><a class="dv-oid" href="#1e">1e</a>Answer & resume — quick replies are tappable</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1e Answer and resume" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px;display:flex;flex-direction:column">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:8px 0 16px">
|
||||
<span style="display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-8px;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="chevronRight" size="20" style="transform:rotate(180deg)" hint-size="20px,20px"></x-import></span>
|
||||
<span style="font-family:var(--font-mono);font-size:13px;color:var(--text-muted);flex:1">agt-7a1d</span>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Badge" tone="warning" hint-size="auto,22px">Waiting</x-import>
|
||||
</div>
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading);margin-bottom:16px">Agent needs input</div>
|
||||
<div style="background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:10px;padding:16px;margin-bottom:20px">
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:8px">Question · 2m ago</div>
|
||||
<div style="font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--text-body)">Migrations pass on the new sqlite store. Should I drop the legacy JSON store entirely, or keep it as a read-only fallback for one release?</div>
|
||||
</div>
|
||||
<div style="font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px;margin-bottom:10px">Quick replies</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px">
|
||||
<sc-for list="{{ quickReplies }}" as="qr" hint-placeholder-count="3">
|
||||
<button onClick="{{ qr.pick }}" style="{{ qr.style }}">{{ qr.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="margin-top:auto;display:flex;flex-direction:column;gap:12px">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Input" placeholder="Or type a reply…" size="lg" hint-size="100%,48px"></x-import>
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" style="width:100%" hint-size="100%,48px">Send & resume</x-import>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0"></div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- ============ 1f Spawn agent ============ -->
|
||||
<div class="dv-opt" id="1f"><div class="dv-olabel"><a class="dv-oid" href="#1f">1f</a>Spawn agent — toggles work</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1f Spawn agent" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;padding:8px 20px 20px;display:flex;flex-direction:column">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin:8px 0 16px">
|
||||
<span style="display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-8px;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="x" size="20" hint-size="20px,20px"></x-import></span>
|
||||
<span style="font:var(--type-label);font-weight:600;color:var(--text-heading);flex:1">New agent</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Select" label="Project" options="{{ projectOpts }}" value="handler" size="lg" hint-size="100%,72px"></x-import>
|
||||
<div>
|
||||
<div style="font:var(--type-label);color:var(--text-heading);margin-bottom:6px">Task</div>
|
||||
<textarea placeholder="What should this agent do?" style="width:100%;box-sizing:border-box;height:120px;resize:none;padding:12px 14px;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-page);font:var(--type-body);font-family:var(--font-body);color:var(--text-body);outline:none">Add a /agents/:id/resume endpoint. Follow the existing route patterns. Update the OpenAPI spec.</textarea>
|
||||
<div style="font:var(--type-caption);color:var(--text-muted);margin-top:6px">Runs isolated on a fresh branch.</div>
|
||||
</div>
|
||||
<div style="background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-card)">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:44px;border-bottom:1px solid var(--border-subtle)"><div><div style="font:var(--type-label);color:var(--text-heading)">Auto-approve edits</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">Skip file-edit confirmations</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Switch" checked="{{ swEdits }}" onChange="{{ toggleEdits }}" hint-size="44px,24px"></x-import></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:44px"><div><div style="font:var(--type-label);color:var(--text-heading)">Run tests on done</div><div style="font:var(--type-caption);color:var(--text-muted);margin-top:2px">Checkmark fails if tests fail</div></div><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Switch" checked="{{ swTests }}" onChange="{{ toggleTests }}" hint-size="44px,24px"></x-import></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:auto">
|
||||
<x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Button" size="lg" style="width:100%" hint-size="100%,48px">Spawn agent</x-import>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:34px;flex-shrink:0"></div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- ============ 1g Global log ============ -->
|
||||
<div class="dv-opt" id="1g"><div class="dv-olabel"><a class="dv-oid" href="#1g">1g</a>Global log — filters work</div>
|
||||
<div data-theme="{{ theme }}" data-screen-label="1g Global log" style="width:390px;height:844px;background:var(--surface-page);border-radius:48px;border:1px solid var(--border-default);box-shadow:var(--shadow-overlay);overflow:hidden;display:flex;flex-direction:column;font:var(--type-body);color:var(--text-body);position:relative;flex-shrink:0">
|
||||
<div style="height:54px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 28px 6px;font:600 14px/1 var(--font-body);color:var(--text-heading)"><span>9:41</span><span style="display:inline-flex;gap:5px;align-items:center"><svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"></rect><rect x="4.5" y="5" width="3" height="7" rx="1"></rect><rect x="9" y="2.5" width="3" height="9.5" rx="1"></rect><rect x="13" y="0" width="3" height="12" rx="1" opacity=".35"></rect></svg><svg width="24" height="12" viewBox="0 0 24 12" fill="none"><rect x="0.5" y="0.5" width="20" height="11" rx="3" stroke="currentColor" opacity=".4"></rect><rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"></rect><path d="M22.5 4v4a2 2 0 0 0 0-4z" fill="currentColor" opacity=".4"></path></svg></span></div>
|
||||
<div style="flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column">
|
||||
<div style="padding:20px 20px 16px">
|
||||
<div style="font:var(--type-h3);font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-heading)">Log</div>
|
||||
<div style="display:flex;gap:8px;margin-top:14px">
|
||||
<button onClick="{{ setFilterAll }}" style="{{ fAllStyle }}">All</button>
|
||||
<button onClick="{{ setFilterHandler }}" style="{{ fHandlerStyle }}">handler</button>
|
||||
<button onClick="{{ setFilterErrors }}" style="{{ fErrStyle }}">Errors</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 20px 8px;font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);font-size:11px">Today</div>
|
||||
<div style="flex:1;background:var(--surface-sunken);border-top:1px solid var(--border-subtle);padding:16px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:2.1">
|
||||
<sc-for list="{{ logEntries }}" as="e" hint-placeholder-count="8">
|
||||
<div style="display:flex;gap:10px"><span style="color:var(--ink-4)">{{ e.t }}</span><span style="color:var(--ink-6);width:66px;flex-shrink:0">{{ e.id }}</span><span style="color: {{ e.color }}; flex:1">{{ e.msg }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:84px;flex-shrink:0;border-top:1px solid var(--border-subtle);background:var(--surface-page);display:flex;padding:8px 12px 24px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="home" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Fleet</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--text-heading)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="file" size="22" strokeWidth="2" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:600">Log</span></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--ink-4)"><x-import component-from-global-scope="LeeworksDesignSystem_b3e560.Icon" name="settings" size="22" hint-size="22px,22px"></x-import><span style="font:var(--type-caption);font-weight:500">Settings</span></div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--ink-9);opacity:.9"></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<p class="dv-next">Try next: "commit to <a class="dv-oid" href="#1a">1a</a> and wire the screens into one tappable prototype" · "merge <a class="dv-oid" href="#1b">1b</a>'s project cards into <a class="dv-oid" href="#1a">1a</a>" · "show a dark-mode pass" (there's a Dark mode tweak too)</p>
|
||||
</section>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"darkMode":{"editor":"boolean","default":false,"tsType":"boolean","section":"Theme"},"showAgentIds":{"editor":"boolean","default":true,"tsType":"boolean","section":"Content"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { detailTab: "state", quickPick: null, swEdits: false, swTests: true, logFilter: "all", screen: "fleet", answered: false, swPushWait: true, swPushFail: true };
|
||||
renderVals() {
|
||||
const s = this.state;
|
||||
const seg = (on) => ({ flex: 1, border: "none", cursor: "pointer", padding: "8px 0", borderRadius: "6px", font: "600 13px/1 var(--font-body)", background: on ? "var(--surface-page)" : "transparent", color: on ? "var(--text-heading)" : "var(--text-muted)", boxShadow: on ? "var(--shadow-card)" : "none", transition: "all 140ms ease-out" });
|
||||
const chip = (on) => ({ display: "inline-flex", alignItems: "center", padding: "8px 14px", borderRadius: "999px", cursor: "pointer", font: "500 13px/1 var(--font-body)", border: on ? "1px solid var(--border-strong)" : "1px solid var(--border-default)", background: on ? "var(--interactive)" : "var(--surface-page)", color: on ? "#fff" : "var(--text-body)", transition: "all 140ms ease-out" });
|
||||
const allLog = [
|
||||
{ t: "14:02:11", id: "agt-7a1d", p: "handler", msg: "paused — waiting for input", color: "var(--warning)", err: false },
|
||||
{ t: "13:58:40", id: "agt-9c77", p: "handler", msg: "checkmark updated", color: "var(--text-body)", err: false },
|
||||
{ t: "13:51:02", id: "agt-2d08", p: "handler", msg: "done — 34 turns, tests pass", color: "var(--positive)", err: false },
|
||||
{ t: "13:44:19", id: "agt-e33a", p: "wheatsite", msg: "error — 2 tests failed", color: "var(--danger)", err: true },
|
||||
{ t: "13:39:55", id: "agt-51f0", p: "dotfiles", msg: "spawned → dotfiles", color: "var(--text-body)", err: false },
|
||||
{ t: "13:31:07", id: "agt-b241", p: "api-gateway", msg: "paused — waiting for input", color: "var(--warning)", err: false },
|
||||
{ t: "13:18:44", id: "agt-9c77", p: "handler", msg: "tool: bash — cargo test", color: "var(--text-muted)", err: false },
|
||||
{ t: "13:02:30", id: "agt-90bc", p: "dotfiles", msg: "done — 12 turns", color: "var(--positive)", err: false },
|
||||
{ t: "12:57:12", id: "agt-51f0", p: "dotfiles", msg: "tool: edit — .zshrc", color: "var(--text-muted)", err: false },
|
||||
{ t: "12:49:03", id: "agt-e33a", p: "wheatsite", msg: "checkmark updated", color: "var(--text-body)", err: false },
|
||||
{ t: "12:40:38", id: "agt-b241", p: "api-gateway", msg: "spawned → api-gateway", color: "var(--text-body)", err: false }
|
||||
];
|
||||
const logEntries = allLog.filter(e => s.logFilter === "all" ? true : s.logFilter === "errors" ? e.err : e.p === "handler");
|
||||
const qrLabels = ["Drop it", "Keep as fallback", "Ask me later"];
|
||||
const quickReplies = qrLabels.map((label, i) => ({ label, pick: () => this.setState({ quickPick: i }), style: chip(s.quickPick === i) }));
|
||||
const go = (screen) => () => this.setState({ screen });
|
||||
return {
|
||||
theme: this.props.darkMode ? "dark" : "light",
|
||||
isFleet: s.screen === "fleet", isDetail: s.screen === "detail", isAnswer: s.screen === "answer", isSpawn: s.screen === "spawn", isLogScreen: s.screen === "log", isSettings: s.screen === "settings",
|
||||
goFleet: go("fleet"), goDetail: go("detail"), goAnswer: go("answer"), goSpawn: go("spawn"), goLog: go("log"), goSettings: go("settings"),
|
||||
sendResume: () => this.setState({ answered: true, screen: "detail", detailTab: "state" }),
|
||||
spawnGo: () => this.setState({ screen: "fleet" }),
|
||||
notAnswered: !s.answered,
|
||||
agentTone: s.answered ? "positive" : "warning",
|
||||
agentStatus: s.answered ? "Running" : "Waiting",
|
||||
agentStateText: s.answered ? "Answer received: keep the JSON store as a read-only fallback for one release. Deprecating writes now; removal ticket filed for next cycle." : "Schema written, migrations pass. Blocked on the legacy JSON store — drop it or keep as read fallback? Holding before deleting store/json.rs.",
|
||||
swPushWait: s.swPushWait, swPushFail: s.swPushFail,
|
||||
togglePushWait: (v) => this.setState({ swPushWait: !!v }), togglePushFail: (v) => this.setState({ swPushFail: !!v }),
|
||||
showIds: this.props.showAgentIds ?? true,
|
||||
isState: s.detailTab === "state", isLog: s.detailTab === "log",
|
||||
showState: () => this.setState({ detailTab: "state" }), showLog: () => this.setState({ detailTab: "log" }),
|
||||
segStateStyle: seg(s.detailTab === "state"), segLogStyle: seg(s.detailTab === "log"),
|
||||
quickReplies,
|
||||
swEdits: s.swEdits, swTests: s.swTests,
|
||||
toggleEdits: (v) => this.setState({ swEdits: !!v }), toggleTests: (v) => this.setState({ swTests: !!v }),
|
||||
projectOpts: ["handler", "wheatsite", "dotfiles", "api-gateway"],
|
||||
setFilterAll: () => this.setState({ logFilter: "all" }), setFilterHandler: () => this.setState({ logFilter: "handler" }), setFilterErrors: () => this.setState({ logFilter: "errors" }),
|
||||
fAllStyle: chip(s.logFilter === "all"), fHandlerStyle: chip(s.logFilter === "handler"), fErrStyle: chip(s.logFilter === "errors"),
|
||||
logEntries
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+432
@@ -0,0 +1,432 @@
|
||||
{
|
||||
"plugins": [
|
||||
"react",
|
||||
"import"
|
||||
],
|
||||
"rules": {
|
||||
"react/forbid-elements": [
|
||||
"warn",
|
||||
{
|
||||
"forbid": []
|
||||
}
|
||||
],
|
||||
"no-restricted-imports": [
|
||||
"warn",
|
||||
{
|
||||
"patterns": [
|
||||
{
|
||||
"group": [
|
||||
"components/display/**",
|
||||
"components/feedback/**",
|
||||
"components/forms/**",
|
||||
"components/navigation/**",
|
||||
"ui_kits/dashboard/**",
|
||||
"ui_kits/mobile/**",
|
||||
"ui_kits/website/**"
|
||||
],
|
||||
"message": "Import design-system components from 'index.js', not component internals."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-restricted-syntax": [
|
||||
"warn",
|
||||
{
|
||||
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
|
||||
"message": "Raw hex color — use a design-system color token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/\\b\\d+px\\b/]",
|
||||
"message": "Raw px value — use a design-system spacing token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Outfit|Figtree|Spline Sans Mono))/i]",
|
||||
"message": "Font not provided by the design system. Available: Outfit, Figtree, Spline Sans Mono."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|children|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Badge> doesn't accept that prop. Declared props: tone, children, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|positive|warning|danger|inverse)$/]",
|
||||
"message": "<Badge> tone must be one of 'neutral' | 'positive' | 'warning' | 'danger' | 'inverse'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|disabled|icon|children|onClick|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Button> doesn't accept that prop. Declared props: variant, size, disabled, icon, children, onClick, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|secondary|ghost|danger)$/]",
|
||||
"message": "<Button> variant must be one of 'primary' | 'secondary' | 'ghost' | 'danger'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
|
||||
"message": "<Button> size must be one of 'sm' | 'md' | 'lg'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Card'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|subtitle|actions|footer|variant|padding|children|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Card> doesn't accept that prop. Declared props: title, subtitle, actions, footer, variant, padding, children, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Card'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|sunken|outline)$/]",
|
||||
"message": "<Card> variant must be one of 'default' | 'sunken' | 'outline'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|checked|defaultChecked|onChange|disabled|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Checkbox> doesn't accept that prop. Declared props: label, checked, defaultChecked, onChange, disabled, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Dialog'] > JSXAttribute > JSXIdentifier[name!=/^(?:open|title|description|actions|onClose|width|children|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Dialog> doesn't accept that prop. Declared props: open, title, description, actions, onClose, width, children, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Icon'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|size|strokeWidth|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Icon> doesn't accept that prop. Declared props: name, size, strokeWidth, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Icon'] > JSXAttribute[name.name='name'] > Literal[value!=/^(?:dashboard|file|users|settings|search|bell|plus|check|chart|folder|chevronDown|chevronRight|more|arrowUpRight|x|menu|home|inbox|user)$/]",
|
||||
"message": "<Icon> name must be one of 'dashboard' | 'file' | 'users' | 'settings' | 'search' | 'bell' | 'plus' | 'check' | 'chart' | 'folder' | 'chevronDown' | 'chevronRight' | 'more' | 'arrowUpRight' | 'x' | 'menu' | 'home' | 'inbox' | 'user'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:size|variant|disabled|label|children|onClick|style|key|ref|className|style|children)$/]",
|
||||
"message": "<IconButton> doesn't accept that prop. Declared props: size, variant, disabled, label, children, onClick, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
|
||||
"message": "<IconButton> size must be one of 'sm' | 'md' | 'lg'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:ghost|outline|primary)$/]",
|
||||
"message": "<IconButton> variant must be one of 'ghost' | 'outline' | 'primary'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|hint|error|size|prefix|suffix|placeholder|value|onChange|type|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Input> doesn't accept that prop. Declared props: label, hint, error, size, prefix, suffix, placeholder, value, onChange, type, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
|
||||
"message": "<Input> size must be one of 'sm' | 'md' | 'lg'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Radio'] > JSXAttribute > JSXIdentifier[name!=/^(?:options|value|defaultValue|onChange|name|disabled|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Radio> doesn't accept that prop. Declared props: options, value, defaultValue, onChange, name, disabled, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Select'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|hint|options|size|value|onChange|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Select> doesn't accept that prop. Declared props: label, hint, options, size, value, onChange, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Select'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
|
||||
"message": "<Select> size must be one of 'sm' | 'md' | 'lg'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|checked|defaultChecked|onChange|disabled|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Switch> doesn't accept that prop. Declared props: label, checked, defaultChecked, onChange, disabled, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tabs'] > JSXAttribute > JSXIdentifier[name!=/^(?:tabs|value|defaultValue|onChange|variant|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Tabs> doesn't accept that prop. Declared props: tabs, value, defaultValue, onChange, variant, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tabs'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:underline|segmented)$/]",
|
||||
"message": "<Tabs> variant must be one of 'underline' | 'segmented'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:onRemove|children|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Tag> doesn't accept that prop. Declared props: onRemove, children, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|title|description|onDismiss|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Toast> doesn't accept that prop. Declared props: tone, title, description, onDismiss, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Toast'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|positive|danger)$/]",
|
||||
"message": "<Toast> tone must be one of 'neutral' | 'positive' | 'danger'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|side|children|style|key|ref|className|style|children)$/]",
|
||||
"message": "<Tooltip> doesn't accept that prop. Declared props: label, side, children, style."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tooltip'] > JSXAttribute[name.name='side'] > Literal[value!=/^(?:top|bottom|left|right)$/]",
|
||||
"message": "<Tooltip> side must be one of 'top' | 'bottom' | 'left' | 'right'."
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/index.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-restricted-imports": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"x-omelette": {
|
||||
"components": {
|
||||
"Badge": {
|
||||
"replaces": []
|
||||
},
|
||||
"Button": {
|
||||
"replaces": []
|
||||
},
|
||||
"Card": {
|
||||
"replaces": []
|
||||
},
|
||||
"Checkbox": {
|
||||
"replaces": []
|
||||
},
|
||||
"Dialog": {
|
||||
"replaces": []
|
||||
},
|
||||
"Icon": {
|
||||
"replaces": []
|
||||
},
|
||||
"IconButton": {
|
||||
"replaces": []
|
||||
},
|
||||
"Input": {
|
||||
"replaces": []
|
||||
},
|
||||
"Radio": {
|
||||
"replaces": []
|
||||
},
|
||||
"Select": {
|
||||
"replaces": []
|
||||
},
|
||||
"Switch": {
|
||||
"replaces": []
|
||||
},
|
||||
"Tabs": {
|
||||
"replaces": []
|
||||
},
|
||||
"Tag": {
|
||||
"replaces": []
|
||||
},
|
||||
"Toast": {
|
||||
"replaces": []
|
||||
},
|
||||
"Tooltip": {
|
||||
"replaces": []
|
||||
}
|
||||
},
|
||||
"tokens": [
|
||||
"--border-default",
|
||||
"--border-strong",
|
||||
"--border-subtle",
|
||||
"--content-max",
|
||||
"--control-h-lg",
|
||||
"--control-h-md",
|
||||
"--control-h-sm",
|
||||
"--control-pad-x-lg",
|
||||
"--control-pad-x-md",
|
||||
"--control-pad-x-sm",
|
||||
"--danger",
|
||||
"--danger-tint",
|
||||
"--dur-base",
|
||||
"--dur-fast",
|
||||
"--dur-slow",
|
||||
"--ease-out",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--gutter",
|
||||
"--ink-0",
|
||||
"--ink-1",
|
||||
"--ink-2",
|
||||
"--ink-3",
|
||||
"--ink-4",
|
||||
"--ink-5",
|
||||
"--ink-6",
|
||||
"--ink-7",
|
||||
"--ink-8",
|
||||
"--ink-9",
|
||||
"--interactive",
|
||||
"--interactive-hover",
|
||||
"--interactive-press",
|
||||
"--leading-normal",
|
||||
"--leading-snug",
|
||||
"--leading-tight",
|
||||
"--page-max",
|
||||
"--positive",
|
||||
"--positive-tint",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--radius-xl",
|
||||
"--shadow-card",
|
||||
"--shadow-focus",
|
||||
"--shadow-overlay",
|
||||
"--shadow-raised",
|
||||
"--signal",
|
||||
"--signal-strong",
|
||||
"--signal-tint",
|
||||
"--space-1",
|
||||
"--space-10",
|
||||
"--space-11",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-7",
|
||||
"--space-8",
|
||||
"--space-9",
|
||||
"--surface-card",
|
||||
"--surface-inverse",
|
||||
"--surface-page",
|
||||
"--surface-raised",
|
||||
"--surface-sunken",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-body",
|
||||
"--text-heading",
|
||||
"--text-inverse",
|
||||
"--text-lg",
|
||||
"--text-link",
|
||||
"--text-md",
|
||||
"--text-muted",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-normal",
|
||||
"--tracking-tight",
|
||||
"--tracking-wide",
|
||||
"--type-body",
|
||||
"--type-body-sm",
|
||||
"--type-caption",
|
||||
"--type-display",
|
||||
"--type-h1",
|
||||
"--type-h2",
|
||||
"--type-h3",
|
||||
"--type-h4",
|
||||
"--type-label",
|
||||
"--type-mono",
|
||||
"--type-overline",
|
||||
"--warning",
|
||||
"--warning-tint",
|
||||
"--weight-bold",
|
||||
"--weight-heavy",
|
||||
"--weight-medium",
|
||||
"--weight-regular",
|
||||
"--weight-semibold",
|
||||
"--white"
|
||||
],
|
||||
"tokenKinds": {
|
||||
"--white": "color",
|
||||
"--ink-0": "color",
|
||||
"--ink-1": "color",
|
||||
"--ink-2": "color",
|
||||
"--ink-3": "color",
|
||||
"--ink-4": "color",
|
||||
"--ink-5": "color",
|
||||
"--ink-6": "color",
|
||||
"--ink-7": "color",
|
||||
"--ink-8": "color",
|
||||
"--ink-9": "color",
|
||||
"--signal": "color",
|
||||
"--signal-strong": "color",
|
||||
"--signal-tint": "color",
|
||||
"--positive": "color",
|
||||
"--positive-tint": "color",
|
||||
"--warning": "color",
|
||||
"--warning-tint": "color",
|
||||
"--danger": "color",
|
||||
"--danger-tint": "color",
|
||||
"--surface-page": "color",
|
||||
"--surface-raised": "color",
|
||||
"--surface-sunken": "color",
|
||||
"--surface-card": "color",
|
||||
"--surface-inverse": "color",
|
||||
"--text-heading": "font",
|
||||
"--text-body": "font",
|
||||
"--text-muted": "font",
|
||||
"--text-inverse": "font",
|
||||
"--text-link": "font",
|
||||
"--border-subtle": "color",
|
||||
"--border-default": "color",
|
||||
"--border-strong": "color",
|
||||
"--interactive": "color",
|
||||
"--interactive-hover": "color",
|
||||
"--interactive-press": "color",
|
||||
"--focus-ring": "color",
|
||||
"--font-display": "font",
|
||||
"--font-body": "font",
|
||||
"--font-mono": "font",
|
||||
"--text-xs": "font",
|
||||
"--text-sm": "font",
|
||||
"--text-base": "font",
|
||||
"--text-md": "font",
|
||||
"--text-lg": "font",
|
||||
"--text-xl": "font",
|
||||
"--text-2xl": "font",
|
||||
"--text-3xl": "font",
|
||||
"--text-4xl": "font",
|
||||
"--leading-tight": "font",
|
||||
"--leading-snug": "font",
|
||||
"--leading-normal": "font",
|
||||
"--tracking-tight": "font",
|
||||
"--tracking-normal": "font",
|
||||
"--tracking-wide": "font",
|
||||
"--weight-regular": "font",
|
||||
"--weight-medium": "font",
|
||||
"--weight-semibold": "font",
|
||||
"--weight-bold": "font",
|
||||
"--weight-heavy": "font",
|
||||
"--type-display": "font",
|
||||
"--type-h1": "font",
|
||||
"--type-h2": "font",
|
||||
"--type-h3": "font",
|
||||
"--type-h4": "font",
|
||||
"--type-body": "font",
|
||||
"--type-body-sm": "font",
|
||||
"--type-label": "font",
|
||||
"--type-caption": "font",
|
||||
"--type-overline": "font",
|
||||
"--type-mono": "font",
|
||||
"--space-1": "spacing",
|
||||
"--space-2": "spacing",
|
||||
"--space-3": "spacing",
|
||||
"--space-4": "spacing",
|
||||
"--space-5": "spacing",
|
||||
"--space-6": "spacing",
|
||||
"--space-7": "spacing",
|
||||
"--space-8": "spacing",
|
||||
"--space-9": "spacing",
|
||||
"--space-10": "spacing",
|
||||
"--space-11": "spacing",
|
||||
"--control-h-sm": "spacing",
|
||||
"--control-h-md": "spacing",
|
||||
"--control-h-lg": "spacing",
|
||||
"--control-pad-x-sm": "spacing",
|
||||
"--control-pad-x-md": "spacing",
|
||||
"--control-pad-x-lg": "spacing",
|
||||
"--page-max": "spacing",
|
||||
"--content-max": "spacing",
|
||||
"--gutter": "spacing",
|
||||
"--radius-sm": "radius",
|
||||
"--radius-md": "radius",
|
||||
"--radius-lg": "radius",
|
||||
"--radius-xl": "radius",
|
||||
"--radius-pill": "radius",
|
||||
"--shadow-card": "shadow",
|
||||
"--shadow-raised": "shadow",
|
||||
"--shadow-overlay": "shadow",
|
||||
"--shadow-focus": "shadow",
|
||||
"--ease-out": "other",
|
||||
"--dur-fast": "other",
|
||||
"--dur-base": "other",
|
||||
"--dur-slow": "other"
|
||||
},
|
||||
"fontFamilies": [
|
||||
"Figtree",
|
||||
"Outfit",
|
||||
"Spline Sans Mono"
|
||||
]
|
||||
}
|
||||
}
|
||||
+2759
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,57 @@
|
||||
# Leeworks Design System
|
||||
|
||||
**Leeworks Systems** — a from-scratch design system built July 2026. No existing codebase, Figma, or brand assets were provided; everything here was authored fresh from the brief: *modern, bright whites, near-monochrome, explicitly avoiding common "AI" color themes (no bluish-purple gradients, no glassmorphism)*.
|
||||
|
||||
Personality: **crisp & professional**, with a **geometric & friendly** typographic voice. Softly rounded shapes (6–10px). Light-first with full dark tokens. Comfortable density.
|
||||
|
||||
## Sources
|
||||
None provided. Fonts are Google Fonts substitutes (see Caveats). No logo was provided — the brand renders as plain type ("Leeworks") wherever a mark would go.
|
||||
|
||||
## CONTENT FUNDAMENTALS
|
||||
- **Voice:** plain, confident, specific. Short sentences. Verbs first in CTAs ("Create a workspace", "Invite your team", "View report").
|
||||
- **Casing:** Sentence case everywhere — headings, buttons, labels, nav. Never Title Case, never ALL CAPS except tiny overline labels (letter-spaced, e.g. "OVERVIEW").
|
||||
- **Person:** "you/your" to the user; "we" only when Leeworks itself acts ("We'll email you a receipt"). Never "I".
|
||||
- **Numbers & data:** tabular figures in mono (`--font-mono`) for metrics, IDs, timestamps. Units spelled tight: "12.4k", "3m ago".
|
||||
- **Emoji:** never in product UI. None.
|
||||
- **Microcopy vibe:** helpful, unhurried, no exclamation marks. Empty states state the fact + one action: "No reports yet. Create your first report."
|
||||
- Examples: "Everything your team ships, in one place." / "Save changes" / "This can't be undone." / "Last synced 2m ago".
|
||||
|
||||
## VISUAL FOUNDATIONS
|
||||
- **Color:** bright white pages (`--surface-page: #fff`), a warm-neutral ink ramp (`--ink-0…9`) doing nearly all the work. Primary interactive color is **ink black** (`--interactive: #141413`) — buttons, links, focus. One restrained non-neutral: a deep leaf green `--signal` (#1d6b45), used sparingly for positive signals and small moments of life. Status colors are muted (green/ochre/brick), always paired with a tint surface. No gradients anywhere.
|
||||
- **Type:** Outfit for display/headings (geometric, friendly terminals), Figtree for body/UI, Spline Sans Mono for data & code. Headings tight (-0.02em, 1.1 leading); body 15px/1.55. Overlines are 12px Outfit semibold, +0.08em, uppercase.
|
||||
- **Spacing:** 4px base scale (`--space-1…11`), comfortable density (~4/10). Controls: 32/40/48px heights. Page max 1200px, prose max 720px, 24px gutters.
|
||||
- **Backgrounds:** flat bright white; sections separated by hairline borders (`--border-subtle`) or a faint sunken panel (`--surface-sunken: #f6f6f4`) — never gradients, textures, or imagery washes. Marketing hero = white with big ink type.
|
||||
- **Borders:** 1px hairlines, `--border-subtle` (#ececea) inside cards/dividers, `--border-default` (#dcdcd8) on inputs. `--border-strong` (ink) marks selected states.
|
||||
- **Shadows:** whisper-quiet. Cards: `--shadow-card` (1px). Popovers/menus: `--shadow-raised`. Dialogs: `--shadow-overlay`. No inner shadows, no colored shadows.
|
||||
- **Radii:** 6px small (badges, inputs' inner bits), 8px controls, 10px cards, 16px dialogs/large panels, pill for tags & switches. Never fully-square, never blob-round on containers.
|
||||
- **Cards:** white, 1px `--border-subtle`, 10px radius, `--shadow-card`, 20–24px padding. Sunken variant swaps white for `--ink-1` and drops the shadow.
|
||||
- **Animation:** brief and functional — 120–180ms, `--ease-out`, opacity + small translate (4–8px). No bounces, no spring theatrics. Dialogs fade+scale from .98.
|
||||
- **Hover:** ink surfaces lighten (`--interactive-hover`), quiet elements gain `--ink-1` wash. **Press:** darken to true black + no shrink transforms. **Focus:** 3px soft ring (`--shadow-focus`), visible on keyboard focus.
|
||||
- **Transparency/blur:** essentially none. Scrims are flat `rgba(20,20,19,.4)`. No backdrop blur.
|
||||
- **Imagery:** when photography appears (marketing), it is neutral-warm, high-key, plenty of white in frame; slight desaturation OK; no duotones or heavy grade.
|
||||
- **Dark mode:** `[data-theme="dark"]` scope; warm near-black (#161615) pages, same geometry, inverted ink roles.
|
||||
|
||||
## ICONOGRAPHY
|
||||
- No proprietary icon set was provided. The system uses **Lucide** (CDN, `lucide.dev`) as its icon language — 1.75px stroke weight at 16–20px sizes matches the geometric-friendly type. Load via `https://unpkg.com/lucide@latest` and `lucide.createIcons()`, or inline copied SVGs.
|
||||
- Icons are always monochrome `currentColor`, never multicolor, never filled variants.
|
||||
- No emoji, no unicode-glyph icons. **Substitution flag:** if Leeworks adopts a bespoke icon set later, drop the SVGs into `assets/icons/` and update this section.
|
||||
|
||||
## Index
|
||||
- `styles.css` — global entry (imports everything under `tokens/`).
|
||||
- `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `effects.css`.
|
||||
- `guidelines/` — foundation specimen cards (Design System tab).
|
||||
- `components/forms/` — Button, IconButton, Input, Select, Checkbox, Radio, Switch.
|
||||
- `components/display/` — Card, Badge, Tag, Icon.
|
||||
- `components/navigation/` — Tabs.
|
||||
- `components/feedback/` — Dialog, Toast, Tooltip.
|
||||
- `ui_kits/dashboard/` — Leeworks web app (analytics/workspace dashboard).
|
||||
- `ui_kits/website/` — marketing site (homepage).
|
||||
- `ui_kits/mobile/` — mobile app screens.
|
||||
- `SKILL.md` — agent-skill entry point.
|
||||
|
||||
## Intentional additions
|
||||
Standard component set authored from scratch (no source inventory existed). Lucide adopted as icon set (flagged above). `Icon` component wraps an inlined Lucide subset so kits never hand-roll SVG.
|
||||
|
||||
## Caveats
|
||||
- **Fonts are CDN-served Google Fonts** (Outfit, Figtree, Spline Sans Mono) — no binaries in-project. Provide licensed font files to ship offline.
|
||||
- No logo exists; wordmark is plain Outfit type. Provide a real mark if one exists.
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "tokens/fonts.css";
|
||||
@import "tokens/colors.css";
|
||||
@import "tokens/typography.css";
|
||||
@import "tokens/spacing.css";
|
||||
@import "tokens/effects.css";
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
/* Leeworks color system — bright white base, ink-led near-monochrome. */
|
||||
:root{
|
||||
/* Base scale (warm-neutral ink ramp) */
|
||||
--white:#ffffff;
|
||||
--ink-0:#fcfcfb;
|
||||
--ink-1:#f6f6f4;
|
||||
--ink-2:#ececea;
|
||||
--ink-3:#dcdcd8;
|
||||
--ink-4:#b8b8b3;
|
||||
--ink-5:#8b8b86;
|
||||
--ink-6:#62625e;
|
||||
--ink-7:#3d3d3a;
|
||||
--ink-8:#232321;
|
||||
--ink-9:#141413;
|
||||
|
||||
/* Signal (the one non-neutral: a deep leaf green used sparingly) */
|
||||
--signal:#1d6b45;
|
||||
--signal-strong:#155236;
|
||||
--signal-tint:#e8f2ec;
|
||||
|
||||
/* Semantic status (muted, low-saturation) */
|
||||
--positive:#1d6b45;
|
||||
--positive-tint:#e8f2ec;
|
||||
--warning:#8a6116;
|
||||
--warning-tint:#f7efdd;
|
||||
--danger:#a33a2f;
|
||||
--danger-tint:#f9e9e6;
|
||||
|
||||
/* Semantic aliases — light */
|
||||
--surface-page:var(--white);
|
||||
--surface-raised:var(--white);
|
||||
--surface-sunken:var(--ink-1);
|
||||
--surface-card:var(--white);
|
||||
--surface-inverse:var(--ink-9);
|
||||
--text-heading:var(--ink-9);
|
||||
--text-body:var(--ink-7);
|
||||
--text-muted:var(--ink-5);
|
||||
--text-inverse:var(--ink-0);
|
||||
--text-link:var(--ink-9);
|
||||
--border-subtle:var(--ink-2);
|
||||
--border-default:var(--ink-3);
|
||||
--border-strong:var(--ink-9);
|
||||
--interactive:var(--ink-9);
|
||||
--interactive-hover:var(--ink-7);
|
||||
--interactive-press:#000000;
|
||||
--focus-ring:rgba(20,20,19,.28);
|
||||
}
|
||||
[data-theme="dark"]{
|
||||
--surface-page:#161615;
|
||||
--surface-raised:#1e1e1d;
|
||||
--surface-sunken:#111110;
|
||||
--surface-card:#1e1e1d;
|
||||
--surface-inverse:var(--ink-0);
|
||||
--text-heading:#f4f4f2;
|
||||
--text-body:#c9c9c4;
|
||||
--text-muted:#8b8b86;
|
||||
--text-inverse:var(--ink-9);
|
||||
--text-link:#f4f4f2;
|
||||
--border-subtle:#2b2b29;
|
||||
--border-default:#3a3a37;
|
||||
--border-strong:#f4f4f2;
|
||||
--interactive:#f4f4f2;
|
||||
--interactive-hover:#d8d8d4;
|
||||
--interactive-press:#ffffff;
|
||||
--focus-ring:rgba(244,244,242,.35);
|
||||
--signal:#4fa377;
|
||||
--signal-tint:#1d2f26;
|
||||
--positive:#4fa377;
|
||||
--positive-tint:#1d2f26;
|
||||
--warning:#c99a3f;
|
||||
--warning-tint:#2f2818;
|
||||
--danger:#d0685c;
|
||||
--danger-tint:#331e1b;
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/* Leeworks effects — soft rounding, hairline borders, restrained shadows. */
|
||||
:root{
|
||||
--radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:16px; --radius-pill:999px;
|
||||
|
||||
--shadow-card:0 1px 2px rgba(20,20,19,.05);
|
||||
--shadow-raised:0 2px 8px rgba(20,20,19,.07),0 1px 2px rgba(20,20,19,.05);
|
||||
--shadow-overlay:0 12px 40px rgba(20,20,19,.14),0 2px 8px rgba(20,20,19,.06);
|
||||
--shadow-focus:0 0 0 3px var(--focus-ring);
|
||||
|
||||
--ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
|
||||
--dur-fast:120ms; /* @kind other */
|
||||
--dur-base:180ms; /* @kind other */
|
||||
--dur-slow:280ms; /* @kind other */
|
||||
}
|
||||
[data-theme="dark"]{
|
||||
--shadow-card:0 1px 2px rgba(0,0,0,.4);
|
||||
--shadow-raised:0 2px 8px rgba(0,0,0,.5);
|
||||
--shadow-overlay:0 12px 40px rgba(0,0,0,.6);
|
||||
}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
/* Leeworks webfonts — served from Google Fonts (no local binaries provided). */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap");
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
/* Leeworks spacing — 4px base, comfortable (not dense) rhythm. */
|
||||
:root{
|
||||
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
|
||||
--space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
|
||||
--space-9:56px; --space-10:80px; --space-11:120px;
|
||||
|
||||
--control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;
|
||||
--control-pad-x-sm:12px; --control-pad-x-md:16px; --control-pad-x-lg:20px;
|
||||
|
||||
--page-max:1200px; --content-max:720px; --gutter:24px;
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
/* Leeworks typography — Outfit (display), Figtree (body), Spline Sans Mono (data/code). */
|
||||
:root{
|
||||
--font-display:"Outfit",system-ui,sans-serif;
|
||||
--font-body:"Figtree",system-ui,sans-serif;
|
||||
--font-mono:"Spline Sans Mono",ui-monospace,monospace;
|
||||
|
||||
--text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
|
||||
--text-lg:20px; --text-xl:24px; --text-2xl:32px; --text-3xl:44px; --text-4xl:60px;
|
||||
|
||||
--leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.55;
|
||||
--tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.08em;
|
||||
|
||||
--weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-heavy:800;
|
||||
|
||||
/* Composite styles */
|
||||
--type-display:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
|
||||
--type-h1:var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
|
||||
--type-h2:var(--weight-semibold) var(--text-2xl)/1.2 var(--font-display);
|
||||
--type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
|
||||
--type-h4:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-display);
|
||||
--type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
|
||||
--type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
|
||||
--type-label:var(--weight-semibold) var(--text-sm)/1.2 var(--font-body);
|
||||
--type-caption:var(--weight-medium) var(--text-xs)/1.4 var(--font-body);
|
||||
--type-overline:var(--weight-semibold) var(--text-xs)/1.2 var(--font-display);
|
||||
--type-mono:var(--weight-regular) var(--text-sm)/1.5 var(--font-mono);
|
||||
}
|
||||
+1841
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user