@yannelli/paseo-linear-plugin 1.0.0 → 1.1.0-beta.0

package/client/live-header.tsx

@@ -0,0 +1,312 @@
+import type { PluginAgentSnapshot } from "@getpaseo/plugin";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ActivityIndicator, Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import type { ActivityEvent } from "../shared/activity";
+import type { IssueDetail } from "../shared/linear";
+import type { LiveView, MappingMode } from "../shared/settings";
+import { todoStatus } from "../shared/todo-sync";
+import { eventTone, KIND_ICONS } from "./live-feed";
+import { type IssueProgress, MONO, ProgressBar } from "./live-issues";
+import { type LiveMap, NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
+import { ProviderIcon } from "./provider-icon";
+import { Button, StateIcon, type Theme } from "./ui";
+
+type AgentStatus = PluginAgentSnapshot["status"];
+
+const STATUS_COPY: Record<AgentStatus, string> = {
+  initializing: "Starting",
+  idle: "Idle",
+  running: "Working",
+  error: "Error",
+  closed: "Closed",
+};
+
+function providerName(provider: string): string {
+  return provider ? provider.charAt(0).toUpperCase() + provider.slice(1) : "Agent";
+}
+
+function StatusChip(props: { theme: Theme; status: AgentStatus; provider: string; reduce: boolean }) {
+  const { theme, status } = props;
+  const { colors } = theme;
+  const running = status === "running" || status === "initializing";
+  const [glow] = useState(() => new Animated.Value(1));
+  useEffect(() => {
+    if (!running || props.reduce) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(glow, { toValue: 0.35, duration: 700, useNativeDriver: NATIVE_DRIVER }),
+        Animated.timing(glow, { toValue: 1, duration: 700, useNativeDriver: NATIVE_DRIVER }),
+      ]),
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+      glow.setValue(1);
+    };
+  }, [running, props.reduce, glow]);
+  let tone = colors.foregroundMuted;
+  if (running) tone = colors.statusSuccess;
+  else if (status === "error") tone = colors.statusDanger;
+  const styles = useMemo(
+    () =>
+      ({
+        chip: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 7,
+          height: 26,
+          paddingHorizontal: 10,
+          borderRadius: 13,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.surface1,
+        },
+        dot: { width: 7, height: 7, borderRadius: 4, backgroundColor: tone, opacity: glow },
+        text: { color: colors.foreground, fontSize: 12, fontWeight: "500" },
+        muted: { color: colors.foregroundMuted, fontSize: 12 },
+      }) as const,
+    [colors, tone, glow],
+  );
+  return (
+    <View style={styles.chip}>
+      <Animated.View style={styles.dot} />
+      <Text style={styles.text}>{STATUS_COPY[status] ?? status}</Text>
+      <ProviderIcon provider={props.provider} size={12} color={colors.foregroundMuted} />
+      <Text style={styles.muted}>{providerName(props.provider)}</Text>
+    </View>
+  );
+}
+
+function NowLine(props: { theme: Theme; event: ActivityEvent; live: boolean }) {
+  const { theme, event } = props;
+  const { colors } = theme;
+  const tone = eventTone(theme, event);
+  const styles = useMemo(
+    () =>
+      ({
+        row: { flexDirection: "row", alignItems: "center", gap: 10, minWidth: 0 },
+        label: {
+          color: props.live ? colors.foreground : colors.foregroundMuted,
+          fontSize: 10,
+          fontWeight: "700",
+          letterSpacing: 0.6,
+          textTransform: "uppercase",
+          width: 34,
+        },
+        icon: {
+          width: 22,
+          height: 22,
+          borderRadius: 6,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: colors.surface2,
+        },
+        tint: { ...StyleSheet.absoluteFillObject, borderRadius: 6, backgroundColor: tone, opacity: 0.14 },
+        text: { color: props.live ? colors.foreground : colors.foregroundMuted, fontSize: 13 },
+        detail: { flex: 1, color: colors.foregroundMuted, fontFamily: MONO, fontSize: 11 },
+      }) as const,
+    [colors, tone, props.live],
+  );
+  return (
+    <View style={styles.row} accessible accessibilityLabel={`${props.live ? "Now" : "Last"}: ${event.text}`}>
+      <Text style={styles.label}>{props.live ? "Now" : "Last"}</Text>
+      <View style={styles.icon}>
+        <View style={styles.tint} />
+        <Icon name={KIND_ICONS[event.kind]} size={12} color={tone} />
+      </View>
+      <Text numberOfLines={1} style={styles.text}>
+        {event.text}
+      </Text>
+      {event.detail ? (
+        <Text numberOfLines={1} style={styles.detail}>
+          {event.detail}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export function LiveHeader(props: {
+  theme: Theme;
+  issue: IssueDetail;
+  progress: IssueProgress;
+  owners: OwnerColors;
+  status: AgentStatus;
+  provider: string;
+  current: ActivityEvent | null;
+  reduceMotion: boolean;
+}) {
+  const { theme, issue, progress, owners } = props;
+  const { colors } = theme;
+  const rows = issue.children.length > 0 ? issue.children : [issue];
+  const segments = rows.map((row) => {
+    const key = row.identifier.toUpperCase();
+    const todos = progress.groups.get(key) ?? [];
+    const done = todos.filter((todo) => todoStatus(todo) === "completed").length;
+    const finished = row.state.type === "completed";
+    return {
+      key,
+      color: owners.get(key) ?? colors.accent,
+      value: finished ? 1 : todos.length > 0 ? done / todos.length : 0,
+      finished,
+    };
+  });
+  const allTodos = [...progress.groups.values()].flat();
+  const todosDone = allTodos.filter((todo) => todoStatus(todo) === "completed").length;
+  const issuesDone = segments.filter((segment) => segment.finished).length;
+  const counts = [
+    issue.children.length > 0 ? `${issuesDone} of ${issue.children.length} sub-issues done` : null,
+    allTodos.length > 0 ? `${todosDone} of ${allTodos.length} todos` : null,
+  ].filter(Boolean);
+  const styles = useMemo(
+    () =>
+      ({
+        root: { gap: 12 },
+        top: { flexDirection: "row", alignItems: "center", gap: 10, minWidth: 0 },
+        key: { color: colors.foregroundMuted, fontFamily: MONO, fontSize: 12 },
+        title: { flex: 1, color: colors.foreground, fontSize: 16, fontWeight: "600" },
+        strip: { flexDirection: "row", gap: 4 },
+        segment: { flex: 1 },
+        counts: { color: colors.foregroundMuted, fontSize: 12 },
+      }) as const,
+    [colors],
+  );
+  return (
+    <View style={styles.root}>
+      <View style={styles.top}>
+        <StateIcon state={issue.state} size={16} />
+        <Text style={styles.key}>{issue.identifier}</Text>
+        <Text numberOfLines={1} style={styles.title}>
+          {issue.title}
+        </Text>
+        <StatusChip
+          theme={theme}
+          status={props.status}
+          provider={props.provider}
+          reduce={props.reduceMotion}
+        />
+      </View>
+      <View style={styles.strip}>
+        {segments.map((segment) => (
+          <View key={segment.key} style={styles.segment}>
+            <ProgressBar
+              theme={theme}
+              value={segment.value}
+              color={segment.color}
+              reduce={props.reduceMotion}
+              height={5}
+              tinted
+            />
+          </View>
+        ))}
+      </View>
+      {counts.length > 0 ? <Text style={styles.counts}>{counts.join(" · ")}</Text> : null}
+      {props.current ? (
+        <NowLine theme={theme} event={props.current} live={props.status === "running"} />
+      ) : null}
+    </View>
+  );
+}
+
+/** Where the map came from, and the explore job's state, for the map card header. */
+export function MapSource(props: { theme: Theme; live: LiveMap; mapping: MappingMode }) {
+  const { theme, live } = props;
+  const { colors } = theme;
+  const { explore } = live;
+  const styles = useMemo(
+    () =>
+      ({
+        row: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
+        note: { color: colors.foregroundMuted, fontSize: 12 },
+        error: { color: colors.statusDanger, fontSize: 12, flexShrink: 1 },
+      }) as const,
+    [colors],
+  );
+  const start = useCallback(() => explore(false), [explore]);
+  const retry = useCallback(() => explore(true), [explore]);
+  const job = live.job;
+  const running = job?.status === "running";
+  const semantic = live.map.source === "semantic";
+  const canExplore =
+    props.mapping === "explore" && !live.stored && !running && job?.status !== "failed";
+  return (
+    <View style={styles.row}>
+      <Text style={styles.note}>{semantic ? "From ticket text" : "From explore agent"}</Text>
+      {running ? <ActivityIndicator size="small" color={colors.foregroundMuted} /> : null}
+      {running ? <Text style={styles.note}>Exploring…</Text> : null}
+      {job?.status === "failed" ? (
+        <>
+          <Text style={styles.error}>{job.error ?? "Explore failed"}</Text>
+          <Button theme={theme} size="xs" icon="RefreshCw" label="Retry" busy={live.starting} onPress={retry} />
+        </>
+      ) : null}
+      {canExplore ? (
+        <Button
+          theme={theme}
+          size="xs"
+          icon="Sparkles"
+          label="Map with explore agent"
+          busy={live.starting}
+          onPress={start}
+        />
+      ) : null}
+      {live.error ? <Text style={styles.error}>{live.error}</Text> : null}
+    </View>
+  );
+}
+
+export function ViewToggle(props: {
+  theme: Theme;
+  value: LiveView;
+  onChange(value: LiveView): void;
+}) {
+  const { colors } = props.theme;
+  const styles = useMemo(() => {
+    const option = {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 5,
+      height: 24,
+      paddingHorizontal: 9,
+      borderRadius: 6,
+    } as const;
+    return {
+      track: {
+        flexDirection: "row",
+        padding: 2,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface1,
+      },
+      option,
+      on: { ...option, backgroundColor: colors.surface2 },
+      text: { color: colors.foregroundMuted, fontSize: 12 },
+      textOn: { color: colors.foreground, fontSize: 12, fontWeight: "500" },
+    } as const;
+  }, [colors]);
+  const options = [
+    { value: "map", label: "Map", icon: "LayoutGrid" },
+    { value: "graph", label: "Graph", icon: "Waypoints" },
+  ] as const;
+  return (
+    <View style={styles.track} accessibilityRole="tablist">
+      {options.map((option) => {
+        const on = props.value === option.value;
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: on }}
+            onPress={() => props.onChange(option.value)}
+            style={on ? styles.on : styles.option}
+          >
+            <Icon name={option.icon} size={12} color={on ? colors.foreground : colors.foregroundMuted} />
+            <Text style={on ? styles.textOn : styles.text}>{option.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/client/live-issues.tsx

@@ -0,0 +1,345 @@
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import type { IssueDetail } from "../shared/linear";
+import { progressByKey, type TodoLike, todoKey, todoLabel, todoStatus } from "../shared/todo-sync";
+import { NATIVE_DRIVER, type OwnerColors } from "./live-timeline";
+import { IconButton, StateIcon, type Theme, usePressableStyle } from "./ui";
+
+export const MONO = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  default: "ui-monospace, SFMono-Regular, Menlo, monospace",
+});
+const TODO_ICONS = { pending: "Circle", in_progress: "CircleDot", completed: "CircleCheck" };
+
+export type FocusKey = string | null;
+
+export function ProgressBar(props: {
+  theme: Theme;
+  value: number;
+  color: string;
+  reduce: boolean;
+  height?: number;
+  /** Tints the empty track with the bar color, so an empty bar still shows whose it is. */
+  tinted?: boolean;
+}) {
+  const { colors } = props.theme;
+  const height = props.height ?? 3;
+  const target = Math.max(0.001, Math.min(1, props.value));
+  const [scale] = useState(() => new Animated.Value(target));
+  useEffect(() => {
+    if (props.reduce) {
+      scale.setValue(target);
+      return;
+    }
+    const animation = Animated.timing(scale, {
+      toValue: target,
+      duration: 500,
+      useNativeDriver: NATIVE_DRIVER,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [target, props.reduce, scale]);
+  const styles = useMemo(
+    () =>
+      ({
+        track: {
+          height,
+          borderRadius: height / 2,
+          backgroundColor: colors.surface2,
+          overflow: "hidden",
+        },
+        tint: { ...StyleSheet.absoluteFillObject, backgroundColor: props.color, opacity: 0.22 },
+        fill: {
+          height,
+          width: "100%",
+          backgroundColor: props.color,
+          transformOrigin: "left",
+          transform: [{ scaleX: scale }],
+        },
+      }) as const,
+    [colors, props.color, scale, height],
+  );
+  return (
+    <View style={styles.track}>
+      {props.tinted ? <View style={styles.tint} /> : null}
+      <Animated.View style={styles.fill} />
+    </View>
+  );
+}
+
+function TodoRow({ theme, todo, color }: { theme: Theme; todo: TodoLike; color: string }) {
+  const { colors } = theme;
+  const status = todoStatus(todo);
+  const styles = useMemo(() => {
+    const done = status === "completed";
+    return {
+      row: { flexDirection: "row", alignItems: "flex-start", gap: 8, paddingVertical: 3 },
+      icon: { marginTop: 2 },
+      text: {
+        flex: 1,
+        fontSize: 12,
+        lineHeight: 17,
+        color: done || status === "pending" ? colors.foregroundMuted : colors.foreground,
+        textDecorationLine: done ? "line-through" : "none",
+      },
+    } as const;
+  }, [colors, status]);
+  let tone = colors.foregroundMuted;
+  if (status === "completed") tone = colors.statusSuccess;
+  else if (status === "in_progress") tone = color;
+  return (
+    <View style={styles.row}>
+      <View style={styles.icon}>
+        <Icon name={TODO_ICONS[status]} size={12} color={tone} />
+      </View>
+      <Text numberOfLines={2} style={styles.text}>
+        {todoLabel(todo.text)}
+      </Text>
+    </View>
+  );
+}
+
+interface RowData {
+  identifier: string;
+  title: string;
+  state: IssueDetail["state"];
+}
+
+function IssueRow(props: {
+  theme: Theme;
+  row: RowData;
+  color: string;
+  todos: readonly TodoLike[];
+  showTodos: boolean;
+  active: boolean;
+  focused: boolean;
+  parent: boolean;
+  reduceMotion: boolean;
+  onFocus(key: string): void;
+}) {
+  const { theme, row, color, todos, active, focused, onFocus } = props;
+  const { colors } = theme;
+  const done = todos.filter((todo) => todoStatus(todo) === "completed").length;
+  const finished = row.state.type === "completed";
+  const styles = useMemo(() => {
+    const idle = {
+      flexDirection: "row",
+      gap: 10,
+      padding: 10,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: focused || active ? colors.border : "transparent",
+      backgroundColor: active || focused ? colors.surface1 : "transparent",
+    } as const;
+    return {
+      idle,
+      hover: { ...idle, backgroundColor: colors.surface1 },
+      bar: { width: 3, borderRadius: 2, backgroundColor: color, opacity: finished ? 0.4 : 1 },
+      body: { flex: 1, minWidth: 0, gap: 6 },
+      line: { flexDirection: "row", alignItems: "center", gap: 6 },
+      key: { color: colors.foregroundMuted, fontFamily: MONO, fontSize: 11 },
+      state: { color: colors.foregroundMuted, fontSize: 11 },
+      count: { marginLeft: "auto", color: colors.foregroundMuted, fontSize: 11 },
+      title: {
+        color: finished ? colors.foregroundMuted : colors.foreground,
+        fontSize: props.parent ? 14 : 13,
+        lineHeight: props.parent ? 19 : 18,
+        fontWeight: props.parent || active ? "600" : "400",
+      },
+      todos: { paddingTop: 2 },
+    } as const;
+  }, [colors, color, active, focused, finished, props.parent]);
+  const pressStyle = usePressableStyle(styles.idle, styles.hover);
+  const press = useCallback(() => onFocus(row.identifier.toUpperCase()), [onFocus, row]);
+  const a11yState = useMemo(() => ({ selected: focused }), [focused]);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`${focused ? "Clear map focus on" : "Focus map on"} ${row.identifier}`}
+      accessibilityState={a11yState}
+      onPress={press}
+      style={pressStyle}
+    >
+      <View style={styles.bar} />
+      <View style={styles.body}>
+        <View style={styles.line}>
+          <StateIcon state={row.state} size={13} />
+          <Text style={styles.key}>{row.identifier}</Text>
+          <Text numberOfLines={1} style={styles.state}>
+            {row.state.name}
+          </Text>
+          {todos.length > 0 ? <Text style={styles.count}>{`${done}/${todos.length}`}</Text> : null}
+        </View>
+        <Text numberOfLines={2} style={styles.title}>
+          {row.title}
+        </Text>
+        {todos.length > 0 ? (
+          <ProgressBar
+            theme={theme}
+            value={finished ? 1 : done / todos.length}
+            color={color}
+            reduce={props.reduceMotion}
+          />
+        ) : null}
+        {props.showTodos && todos.length > 0 ? (
+          <View style={styles.todos}>
+            {todos.map((todo, index) => (
+              <TodoRow key={`${index}:${todo.text}`} theme={theme} todo={todo} color={color} />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+const NO_TODOS: readonly TodoLike[] = [];
+
+export interface IssueProgress {
+  /** Todos grouped by the issue key their text starts with; others go to the parent. */
+  groups: ReadonlyMap<string, TodoLike[]>;
+  /** The sub-issue with a todo in progress. */
+  active: string | null;
+}
+
+export function issueProgress(issue: IssueDetail, todos: readonly TodoLike[]): IssueProgress {
+  const parentKey = issue.identifier.toUpperCase();
+  const children = new Set(issue.children.map((child) => child.identifier.toUpperCase()));
+  const groups = new Map<string, TodoLike[]>();
+  for (const todo of todos) {
+    const key = todoKey(todo.text);
+    const owner = key && children.has(key) ? key : parentKey;
+    groups.set(owner, [...(groups.get(owner) ?? []), todo]);
+  }
+  const progress = progressByKey(todos);
+  const active = issue.children.find(
+    (child) => (progress.get(child.identifier.toUpperCase())?.inProgress ?? 0) > 0,
+  );
+  return { groups, active: active?.identifier.toUpperCase() ?? null };
+}
+
+// The map legend. Selecting a row focuses the map on that issue's files.
+export function SubIssues(props: {
+  theme: Theme;
+  issue: IssueDetail;
+  progress: IssueProgress;
+  owners: OwnerColors;
+  focus: FocusKey;
+  reduceMotion: boolean;
+  onFocus(key: string): void;
+}) {
+  const { theme, issue, progress, owners, focus } = props;
+  const parentKey = issue.identifier.toUpperCase();
+  const fallback = theme.colors.accent;
+  const styles = useMemo(
+    () =>
+      ({
+        list: { gap: 4 },
+        label: {
+          color: theme.colors.foregroundMuted,
+          fontSize: 11,
+          fontWeight: "600",
+          letterSpacing: 0.4,
+          textTransform: "uppercase",
+          paddingHorizontal: 10,
+          paddingTop: 14,
+          paddingBottom: 4,
+        },
+      }) as const,
+    [theme],
+  );
+  return (
+    <View style={styles.list}>
+      <IssueRow
+        theme={theme}
+        row={issue}
+        color={owners.get(parentKey) ?? fallback}
+        todos={progress.groups.get(parentKey) ?? NO_TODOS}
+        showTodos
+        active={false}
+        focused={focus === parentKey}
+        parent
+        reduceMotion={props.reduceMotion}
+        onFocus={props.onFocus}
+      />
+      {issue.children.length > 0 ? <Text style={styles.label}>Sub-issues</Text> : null}
+      {issue.children.map((child) => {
+        const key = child.identifier.toUpperCase();
+        const active = progress.active === key;
+        return (
+          <IssueRow
+            key={child.id}
+            theme={theme}
+            row={child}
+            color={owners.get(key) ?? fallback}
+            todos={progress.groups.get(key) ?? NO_TODOS}
+            showTodos={active || focus === key}
+            active={active}
+            focused={focus === key}
+            parent={false}
+            reduceMotion={props.reduceMotion}
+            onFocus={props.onFocus}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+/** The issues column when collapsed: a button to open it and each issue's state. */
+export function IssueRail(props: {
+  theme: Theme;
+  issue: IssueDetail;
+  owners: OwnerColors;
+  focus: FocusKey;
+  onFocus(key: string): void;
+  onExpand(): void;
+}) {
+  const { theme, issue, owners, focus } = props;
+  const { colors } = theme;
+  const styles = useMemo(
+    () =>
+      ({
+        rail: {
+          width: 48,
+          alignItems: "center",
+          gap: 8,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: 12,
+          backgroundColor: colors.surface0,
+        },
+        rule: { width: 24, height: 1, backgroundColor: colors.border },
+        dot: { width: 34, height: 38, borderRadius: 8, alignItems: "center", justifyContent: "center", gap: 4, borderWidth: 2 },
+        bar: { width: 14, height: 3, borderRadius: 2 },
+      }) as const,
+    [colors],
+  );
+  const rows = [issue, ...issue.children];
+  return (
+    <View style={styles.rail}>
+      <IconButton theme={theme} icon="PanelLeftOpen" label="Show issues" onPress={props.onExpand} />
+      <View style={styles.rule} />
+      {rows.map((row) => {
+        const key = row.identifier.toUpperCase();
+        const focused = focus === key;
+        return (
+          <Pressable
+            key={row.id}
+            accessibilityRole="button"
+            accessibilityLabel={`${row.identifier}: ${row.title}, ${row.state.name}`}
+            accessibilityState={{ selected: focused }}
+            onPress={() => props.onFocus(key)}
+            style={[styles.dot, { borderColor: focused ? (owners.get(key) ?? colors.accent) : "transparent" }]}
+          >
+            <StateIcon state={row.state} size={row === issue ? 17 : 15} />
+            <View style={[styles.bar, { backgroundColor: owners.get(key) ?? colors.accent }]} />
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}