@alecsibilia/luca 14.0.0-alpha.18 → 14.0.0-alpha.19

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @alecsibilia/luca
 
+## 14.0.0-alpha.19
+
+No changes in this release.
+
 ## 14.0.0-alpha.18
 
 No changes in this release.

package/board/client/board-look.ts

@@ -13,7 +13,8 @@ import type {
 
 /**
  * Colors and words shared by the side panel and the chat rows, so both views
- * match. Every color comes from the host theme.
+ * match. Every color comes from the host theme, except the models' own
+ * (`MODEL_COLORS`).
  */
 
 export const MONO = Platform.select({ ios: 'Menlo', default: 'monospace' })
@@ -154,6 +155,31 @@ export const statusColor = ({
     }
 }
 
+/**
+ * The models' colors (#630): Opus purple, Sonnet orange, Haiku blue, and
+ * Clef (the decision model) green. Fixed hues that read on light and dark
+ * themes alike: the one exception to "every color from the host theme".
+ */
+export const MODEL_COLORS: ReadonlyMap<string, string> = new Map([
+    ['opus', '#a371f7'],
+    ['sonnet', '#e8833a'],
+    ['haiku', '#3b9fe8'],
+    ['clef', '#3fb950'],
+])
+
+/** Clef's confidence bar: green when sharp, orange when split. */
+export const CONFIDENCE_COLORS = { sharp: '#3fb950', split: '#e3a23b' }
+
+/** A model's color; the engine, or a model the board doesn't know, is muted. */
+export const modelColor = ({
+    model,
+    theme,
+}: {
+    model: string
+    theme: PluginTheme
+}): string =>
+    MODEL_COLORS.get(model.toLowerCase()) ?? theme.colors.foregroundMuted
+
 /** A run status in words. */
 export const statusText = ({ status }: { status: RunStatus }): string => {
     switch (status) {

package/board/client/board-panel-parts.tsx

@@ -0,0 +1,150 @@
+/**
+ * The small pieces the panel's sections share: a fix-loop counter, a running
+ * step with its time, a stage header, a banner, and a section.
+ */
+import type { ReactNode } from 'react'
+
+import { Icon } from '@getpaseo/plugin/client/react-native'
+import { Pressable, Text, View } from 'react-native'
+
+import { useNow } from './board-look'
+import type { Look, Styles } from './board-panel-styles'
+import { CutLine, useCloseBubble } from './one-line'
+
+import {
+    LOOP_CAP,
+    currentStepText,
+    type CurrentStep,
+} from '../shared/board-state'
+
+export const Counter = ({
+    label,
+    value,
+    theme,
+    styles,
+}: { label: string; value: number } & Look) => {
+    const color =
+        value >= LOOP_CAP
+            ? theme.colors.statusDanger
+            : value > 0
+              ? theme.colors.statusWarning
+              : theme.colors.foregroundMuted
+    return (
+        <Text
+            style={[styles.counter, { color, borderColor: color }]}
+            numberOfLines={1}
+        >
+            {label} {value}/{LOOP_CAP}
+        </Text>
+    )
+}
+
+/** A running step with its time, counting up by itself, on one line. */
+export const StepLine = ({
+    step,
+    prefix,
+    at = null,
+    styles,
+}: {
+    step: CurrentStep
+    prefix: string
+    /** A stopped clock (#635), in ms, in place of the ticking one. */
+    at?: number | null
+    styles: Styles
+}) => {
+    const ticking = useNow()
+    const now = at ?? ticking
+    return (
+        <CutLine
+            text={`${prefix}${currentStepText({ step, now })}`}
+            style={styles.muted}
+            styles={styles}
+        />
+    )
+}
+
+export const StageHeader = ({
+    title,
+    hint,
+    icon,
+    count,
+    color,
+    folded,
+    onPress,
+    theme,
+    styles,
+}: {
+    title: string
+    hint: string
+    icon: string
+    count: number
+    color: string
+    folded: boolean | null
+    onPress: (() => void) | null
+} & Look) => {
+    const closeBubble = useCloseBubble()
+    const empty = count === 0
+    const tint = empty ? theme.colors.foregroundMuted : color
+    const content = (
+        <>
+            <Icon name={icon} size={13} color={tint} />
+            <Text style={[styles.stageTitle, { color: tint }]}>
+                {title.toUpperCase()}
+            </Text>
+            <Text style={styles.stageCount}>{count}</Text>
+            {empty || hint === '' ? null : (
+                <Text style={styles.stageHint} numberOfLines={1}>
+                    {hint}
+                </Text>
+            )}
+            <View style={styles.spacer} />
+            {folded === null || empty ? null : (
+                <Icon
+                    name={folded ? 'ChevronRight' : 'ChevronDown'}
+                    size={13}
+                    color={theme.colors.foregroundMuted}
+                />
+            )}
+        </>
+    )
+    const style = [styles.stageHeader, empty ? styles.stageHeaderThin : null]
+    if (!onPress || empty) return <View style={style}>{content}</View>
+    return (
+        <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`${title}, ${count}. ${folded ? 'Open' : 'Fold'} this stage`}
+            onPress={() => {
+                closeBubble()
+                onPress()
+            }}
+            style={style}
+        >
+            {content}
+        </Pressable>
+    )
+}
+
+export const Banner = ({
+    icon,
+    color,
+    children,
+    styles,
+}: {
+    icon: string
+    color: string
+    children: ReactNode
+    styles: Styles
+}) => (
+    <View style={[styles.banner, { borderColor: color }]}>
+        <Icon name={icon} size={13} color={color} />
+        <Text style={[styles.bannerText, { color }]}>{children}</Text>
+    </View>
+)
+
+export const Section = ({
+    children,
+    styles,
+}: {
+    children: ReactNode
+    styles: Styles
+}) => <View style={styles.block}>{children}</View>

package/board/client/board-panel-stages.ts

@@ -0,0 +1,99 @@
+/**
+ * The stages the panel stacks tickets and lenses in, and the keys of the
+ * cards and stages a person opens or folds.
+ */
+import type { LensState, TicketStage } from '../shared/board-state'
+
+type StackStage = Exclude<TicketStage, 'stuck'>
+
+export const TICKET_STAGES: {
+    stage: StackStage
+    title: string
+    hint: string
+    icon: string
+    folded: boolean
+}[] = [
+    {
+        stage: 'blocked',
+        title: 'Blocked',
+        hint: "waits on a ticket that isn't done",
+        icon: 'Lock',
+        folded: false,
+    },
+    {
+        stage: 'building',
+        title: 'Building',
+        hint: 'the first tests and code',
+        icon: 'Hammer',
+        folded: false,
+    },
+    {
+        stage: 'reviewing',
+        title: 'Reviewing',
+        hint: 'a reviewer reads the ticket',
+        icon: 'ScanSearch',
+        folded: false,
+    },
+    {
+        stage: 'testing',
+        title: 'Testing',
+        hint: 'the red check or the checks running',
+        icon: 'FlaskConical',
+        folded: false,
+    },
+    {
+        stage: 'fixing',
+        title: 'Fixing',
+        hint: 'a fix round after the checks, a review or a join',
+        icon: 'Wrench',
+        folded: false,
+    },
+    {
+        stage: 'joining',
+        title: 'Joining',
+        hint: 'joining the run branch and its checks there',
+        icon: 'GitMerge',
+        folded: false,
+    },
+    {
+        stage: 'done',
+        title: 'Done',
+        hint: 'joined the run branch',
+        icon: 'CircleCheck',
+        folded: true,
+    },
+    {
+        stage: 'skipped',
+        title: 'Skipped',
+        hint: 'left out of this run, stays open',
+        icon: 'SkipForward',
+        folded: true,
+    },
+]
+
+export const LENS_STAGES: { stage: LensState; title: string; icon: string }[] =
+    [
+        { stage: 'waiting', title: 'Waiting', icon: 'Clock' },
+        { stage: 'reviewing', title: 'Reviewing', icon: 'ScanSearch' },
+        { stage: 'fixing', title: 'Fixing', icon: 'Wrench' },
+        { stage: 'clean', title: 'Clean', icon: 'CircleCheck' },
+    ]
+
+/** A card or stage key. */
+export type Key = string
+
+/** The key of the fold for tickets left out for a person (#499). */
+export const FOR_A_PERSON: Key = 'for_a_person'
+
+export const toggled = ({
+    set,
+    key,
+}: {
+    set: ReadonlySet<Key>
+    key: string
+}): Set<Key> => {
+    const next = new Set(set)
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    return next
+}

package/board/client/board-panel-styles.ts

@@ -0,0 +1,223 @@
+/**
+ * The side panel's styles: one `StyleSheet` made from the host theme, and
+ * the `Look` (theme and styles) every piece of the panel takes.
+ */
+import type { PluginTheme } from '@getpaseo/plugin'
+import { StyleSheet } from 'react-native'
+
+import { DIMMED, MONO } from './board-look'
+
+export const makeStyles = ({
+    theme,
+    compact,
+}: {
+    theme: PluginTheme
+    compact: boolean
+}) => {
+    const { colors } = theme
+    return StyleSheet.create({
+        screen: { flex: 1, backgroundColor: colors.surface0 },
+        content: { padding: compact ? 10 : 16, gap: 8 },
+        /** Fills the scroll area, so a tap on its blank part lands too. */
+        fill: { flexGrow: 1 },
+        /** The cards' scroll area, above the pinned status bar. */
+        scroll: { flex: 1 },
+        /** The status bar, pinned at the bottom of the panel. */
+        statusBar: {
+            flexShrink: 0,
+            gap: 4,
+            borderTopColor: colors.border,
+            borderTopWidth: 1,
+            backgroundColor: colors.surface1,
+            paddingHorizontal: compact ? 10 : 16,
+            paddingVertical: 5,
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: compact ? 6 : 10,
+        },
+        /** A row that stays on one line: its cut lines give way. */
+        line: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: compact ? 6 : 10,
+        },
+        /** A part that never shrinks or gets cut: a number, tag or time. */
+        fixed: { flexShrink: 0 },
+        /** What holds a cut line: it gives way, down to nothing. */
+        cut: { flexShrink: 1, minWidth: 0 },
+        /** The bubble a tap on a cut line opens, with its full text. */
+        bubble: {
+            color: colors.foreground,
+            backgroundColor: colors.surface2,
+            borderColor: colors.border,
+            borderWidth: 1,
+            borderRadius: 6,
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            fontSize: 12,
+        },
+        title: { color: colors.foreground, fontSize: 16, fontWeight: '700' },
+        spacer: { flex: 1 },
+        text: { color: colors.foreground, fontSize: 13 },
+        muted: { color: colors.foregroundMuted, fontSize: 12 },
+        mono: { color: colors.foregroundMuted, fontSize: 12, fontFamily: MONO },
+        small: { color: colors.foregroundMuted, fontSize: 11 },
+        pill: {
+            flexShrink: 0,
+            borderWidth: 1,
+            borderRadius: 999,
+            paddingHorizontal: 7,
+            paddingVertical: 1,
+            fontSize: 11,
+            fontWeight: '700',
+        },
+        chip: {
+            borderWidth: 1,
+            borderColor: colors.border,
+            borderRadius: 6,
+            paddingHorizontal: 8,
+            paddingVertical: 3,
+        },
+        chipOn: {
+            borderColor: colors.accent,
+            backgroundColor: colors.surface2,
+        },
+        banner: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            borderWidth: 1,
+            borderRadius: 6,
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+        },
+        bannerText: { fontSize: 12, flexShrink: 1 },
+        block: { gap: 6 },
+        stageHeader: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            paddingVertical: 4,
+            paddingHorizontal: 6,
+            borderRadius: 6,
+        },
+        stageHeaderThin: { paddingVertical: 1, opacity: DIMMED },
+        stageTitle: { fontSize: 12, fontWeight: '700', letterSpacing: 1 },
+        stageCount: {
+            color: colors.foregroundMuted,
+            fontSize: 12,
+            fontFamily: MONO,
+        },
+        stageHint: {
+            color: colors.foregroundMuted,
+            fontSize: 11,
+            flexShrink: 1,
+        },
+        stageBody: { gap: 6, paddingLeft: compact ? 0 : 8 },
+        card: {
+            backgroundColor: colors.surface1,
+            borderColor: colors.border,
+            borderWidth: 1,
+            borderRadius: 8,
+            paddingHorizontal: compact ? 8 : 10,
+            paddingVertical: compact ? 7 : 8,
+            gap: 5,
+        },
+        cardStuck: { borderColor: colors.statusDanger, borderLeftWidth: 4 },
+        cardPressed: { backgroundColor: colors.surface2 },
+        cardTop: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+        number: {
+            flexShrink: 0,
+            color: colors.foregroundMuted,
+            fontSize: 12,
+            fontWeight: '700',
+            fontFamily: MONO,
+        },
+        cardTitle: {
+            color: colors.foreground,
+            fontSize: 13,
+            fontWeight: '600',
+            flexShrink: 1,
+        },
+        tag: {
+            flexShrink: 0,
+            color: colors.foregroundMuted,
+            borderColor: colors.border,
+            borderWidth: 1,
+            borderRadius: 4,
+            paddingHorizontal: 4,
+            fontSize: 10,
+        },
+        /** Clef's confidence bar, and its part filled to the confidence. */
+        confidence: {
+            flexShrink: 0,
+            width: 28,
+            height: 5,
+            borderRadius: 3,
+            overflow: 'hidden',
+            backgroundColor: colors.surface2,
+        },
+        confidenceFill: { height: 5 },
+        /** A running helper's line (#636), its left edge in its model's colour. */
+        helperLine: { borderLeftWidth: 2, paddingLeft: 6 },
+        dots: { flexDirection: 'row', alignItems: 'center', flexShrink: 0 },
+        dotCell: { flexDirection: 'row', alignItems: 'center' },
+        link: { width: compact ? 7 : 10, height: 2 },
+        dot: { width: 8, height: 8, borderRadius: 4, borderWidth: 1.5 },
+        dotCurrent: { width: 12, height: 12, borderRadius: 6, borderWidth: 2 },
+        dotSkip: { borderStyle: 'dashed' },
+        stepLabel: { fontSize: 12, fontWeight: '600', marginLeft: 6 },
+        /** A waiting card's amber bar, where a heartbeat would be. */
+        waitBar: {
+            flexShrink: 0,
+            width: 28,
+            height: 4,
+            borderRadius: 2,
+            opacity: 0.8,
+        },
+        /** A busy card's heartbeat, and each of its bars, standing on the bottom. */
+        heartbeat: {
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            flexShrink: 0,
+            height: 14,
+            gap: 1,
+        },
+        heartbeatBar: { width: 2, borderRadius: 1 },
+        counter: {
+            flexShrink: 0,
+            borderWidth: 1,
+            borderRadius: 5,
+            paddingHorizontal: 5,
+            fontSize: 11,
+            fontFamily: MONO,
+        },
+        detail: {
+            gap: 3,
+            borderTopColor: colors.border,
+            borderTopWidth: 1,
+            paddingTop: 5,
+        },
+        label: {
+            color: colors.foregroundMuted,
+            fontSize: 12,
+            fontWeight: '700',
+        },
+        rule: { height: 1, backgroundColor: colors.border, marginVertical: 4 },
+        reviewTitle: {
+            color: colors.foreground,
+            fontSize: 14,
+            fontWeight: '700',
+        },
+        prLink: { color: colors.accent, fontSize: 12 },
+    })
+}
+
+type MakeStyles = typeof makeStyles
+
+export type Styles = ReturnType<MakeStyles>
+
+export type Look = { theme: PluginTheme; styles: Styles }