@treenity/mods 3.0.1

package/board/view.tsx

@@ -0,0 +1,574 @@
+// Board views — kanban board + task detail (editable)
+
+import {
+  closestCorners,
+  DndContext,
+  type DragEndEvent,
+  type DragOverEvent,
+  DragOverlay,
+  type DragStartEvent,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { type ComponentData, type NodeData, register } from '@treenity/core';
+import { Render, RenderContext, type View } from '@treenity/react/context';
+import { set, useChildren, useNavigate, usePath } from '@treenity/react/hooks';
+import { minimd } from '@treenity/react/lib/minimd';
+import { cn } from '@treenity/react/lib/utils';
+import { trpc } from '@treenity/react/trpc';
+import { Button } from '@treenity/react/ui/button';
+import { Dialog, DialogContent, DialogTitle } from '@treenity/react/ui/dialog';
+import { FormField } from '@treenity/react/ui/form-field';
+import { Input } from '@treenity/react/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@treenity/react/ui/select';
+import { Textarea } from '@treenity/react/ui/textarea';
+import { useMemo, useRef, useState } from 'react';
+import { BoardColumn, BoardKanban, BoardTask } from './types';
+
+type TaskStatus = BoardTask['status'];
+
+const PRIORITY_COLOR: Record<string, string> = {
+  urgent: 'bg-red-500',
+  high: 'bg-orange-400',
+  normal: 'bg-blue-400',
+  low: 'bg-zinc-400',
+};
+
+const PRIORITIES: { value: string; label: string }[] = [
+  { value: 'urgent', label: 'Urgent' },
+  { value: 'high', label: 'High' },
+  { value: 'normal', label: 'Normal' },
+  { value: 'low', label: 'Low' },
+];
+
+function PriorityDot({ priority }: { priority: string }) {
+  return (
+    <span
+      className={cn('inline-block h-2 w-2 rounded-full', PRIORITY_COLOR[priority] ?? PRIORITY_COLOR.normal)}
+      title={priority}
+    />
+  );
+}
+
+function AiBadge() {
+  return (
+    <span className="rounded bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-medium text-violet-400">
+      AI
+    </span>
+  );
+}
+
+// ── board.task view — editable task detail ──
+
+const TaskView: View<BoardTask> = ({ ctx }) => {
+  const path = ctx?.path ?? '';
+  const node = usePath<NodeData>(path);
+  const proxy = usePath(path, BoardTask);
+  const [editingDesc, setEditingDesc] = useState(false);
+  if (!node || !proxy) return null;
+
+  const title = typeof proxy.title === 'string' ? proxy.title : '';
+  const description = typeof proxy.description === 'string' ? proxy.description : '';
+  const status = (typeof proxy.status === 'string' ? proxy.status : 'backlog') as TaskStatus;
+  const priority = typeof proxy.priority === 'string' ? proxy.priority : 'normal';
+  const assignee = typeof proxy.assignee === 'string' ? proxy.assignee : '';
+  const result = typeof proxy.result === 'string' ? proxy.result : '';
+
+  const save = (patch: Record<string, unknown>) => {
+    set({ ...node, ...patch, updatedAt: Date.now() });
+  };
+
+  return (
+    <div className="space-y-4">
+      <BlurInput
+        value={title}
+        placeholder="Task title..."
+        className="border-none bg-transparent p-0 text-lg font-semibold shadow-none focus-visible:ring-0"
+        onSave={v => save({ title: v })}
+      />
+
+      {editingDesc ? (
+        <Textarea
+          key={`desc-${node.$path}`}
+          defaultValue={description}
+          placeholder="Add a description..."
+          className="max-h-60 min-h-20 resize-none text-sm"
+          autoFocus
+          onBlur={e => {
+            if (e.target.value !== description) save({ description: e.target.value });
+            setEditingDesc(false);
+          }}
+        />
+      ) : description ? (
+        <div
+          className="cursor-pointer whitespace-pre-wrap rounded border border-transparent p-2 text-sm line-clamp-4 hover:border-border"
+          onClick={() => setEditingDesc(true)}
+          title="Click to edit"
+        >
+          {description}
+        </div>
+      ) : (
+        <div
+          className="cursor-pointer rounded border border-dashed border-border p-2 text-sm text-muted-foreground hover:border-foreground/30"
+          onClick={() => setEditingDesc(true)}
+        >
+          Add a description...
+        </div>
+      )}
+
+      <div className="space-y-2 text-sm">
+        <FormField label="Status">
+          <div className="flex items-center gap-2">
+            <span className="rounded bg-muted px-2 py-0.5 text-xs font-medium capitalize">{status}</span>
+            <TaskActions proxy={proxy} status={status} />
+          </div>
+        </FormField>
+
+        <FormField label="Priority">
+          <Select value={priority} onValueChange={v => save({ priority: v })}>
+            <SelectTrigger className="h-8 w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PRIORITIES.map(p => (
+                <SelectItem key={p.value} value={p.value}>
+                  <span className="flex items-center gap-1.5">
+                    <PriorityDot priority={p.value} /> {p.label}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FormField>
+
+        <FormField label="Assignee">
+          <BlurInput
+            value={assignee}
+            placeholder="Unassigned"
+            className="h-8 text-sm"
+            onSave={v => save({ assignee: v })}
+          />
+        </FormField>
+
+        {(status === 'review' || status === 'done' || result) && (
+          <FormField label="Result">
+            <ResultField path={node.$path} result={result} onSave={v => save({ result: v })} />
+          </FormField>
+        )}
+      </div>
+
+      {/* Named components (ai.plan, ai.thread, etc.) */}
+      <NamedComponents node={node} />
+
+      <EmbeddedTaskLog taskRef={typeof node.taskRef === 'string' ? node.taskRef : ''} />
+    </div>
+  );
+};
+
+function NamedComponents({ node }: { node: NodeData }) {
+  const keys = Object.keys(node).filter(k => {
+    if (k.startsWith('$') || k === 'taskRef') return false;
+    const v = node[k];
+    return v && typeof v === 'object' && '$type' in v;
+  });
+  if (!keys.length) return null;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {keys.map(k => (
+        <Render key={k} value={node[k] as ComponentData} />
+      ))}
+    </div>
+  );
+}
+
+function ResultField({ path, result, onSave }: { path: string; result: string; onSave: (v: string) => void }) {
+  const [editing, setEditing] = useState(false);
+  const html = useMemo(() => result ? minimd(result) : '', [result]);
+
+  if (editing) {
+    return (
+      <Textarea
+        key={`res-${path}`}
+        defaultValue={result}
+        placeholder="Result notes..."
+        className="min-h-20 max-h-60 resize-none text-sm"
+        autoFocus
+        onBlur={e => {
+          if (e.target.value !== result) onSave(e.target.value);
+          setEditing(false);
+        }}
+      />
+    );
+  }
+
+  if (!result) {
+    return (
+      <div
+        className="cursor-pointer rounded border border-dashed border-border p-2 text-sm text-muted-foreground hover:border-foreground/30"
+        onClick={() => setEditing(true)}
+      >
+        Add result...
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="minimd cursor-pointer rounded border border-transparent p-2 text-sm max-h-60 overflow-y-auto hover:border-border"
+      onClick={() => setEditing(true)}
+      title="Click to edit"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+
+function EmbeddedTaskLog({ taskRef }: { taskRef: string }) {
+  const mtTask = usePath(taskRef || null) as NodeData | undefined;
+  if (!mtTask) return null;
+
+  return (
+    <div className="mt-2 rounded-md border border-border p-2">
+      <div className="mb-1 flex items-center gap-2">
+        <span className="text-[10px] font-medium uppercase text-muted-foreground">Agent Log</span>
+        <span className={cn(
+          'rounded px-1.5 py-0.5 text-[10px] font-medium',
+          mtTask.status === 'running' ? 'bg-sky-500/20 text-sky-400' :
+          mtTask.status === 'done' ? 'bg-emerald-500/20 text-emerald-400' :
+          'bg-red-500/20 text-red-400',
+        )}>
+          {String(mtTask.status)}
+        </span>
+      </div>
+      <Render value={mtTask} />
+    </div>
+  );
+}
+
+register('board.task', 'react', TaskView);
+
+function TaskListItem({ value }: { value: NodeData }) {
+  const nav = useNavigate();
+  const priority = typeof value.priority === 'string' ? value.priority : 'normal';
+  const title = typeof value.title === 'string' && value.title
+    ? value.title
+    : value.$path.split('/').at(-1);
+  const aiStatus = typeof (value as any).aiStatus === 'string' ? (value as any).aiStatus : '';
+  const assignee = typeof value.assignee === 'string' ? value.assignee : '';
+
+  return (
+    <button
+      onClick={() => nav(value.$path)}
+      className="flex w-full items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-left transition-colors hover:bg-accent/50"
+    >
+      <PriorityDot priority={priority} />
+      <span className="flex-1 truncate text-sm font-medium">{title}</span>
+      {aiStatus && (
+        <span className="rounded bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-medium text-violet-400">
+          {aiStatus}
+        </span>
+      )}
+      {assignee && !aiStatus && (
+        <span className="text-xs text-muted-foreground">{assignee}</span>
+      )}
+    </button>
+  );
+}
+
+register('board.task', 'react:list', TaskListItem as any);
+
+// ── Helpers ──
+
+function TaskActions({ proxy, status }: { proxy: ReturnType<typeof usePath<BoardTask>>; status: TaskStatus }) {
+  const btn = 'h-7 text-xs';
+  switch (status) {
+    case 'backlog':
+      return <Button variant="outline" size="sm" className={btn} onClick={() => proxy.start()}>Start</Button>;
+    case 'todo':
+      return <Button variant="outline" size="sm" className={btn} onClick={() => proxy.start()}>Begin</Button>;
+    case 'doing':
+      return <Button variant="outline" size="sm" className={btn} onClick={() => proxy.submit()}>Submit</Button>;
+    case 'review':
+      return (
+        <div className="flex gap-1">
+          <Button variant="outline" size="sm" className={btn} onClick={() => proxy.approve()}>Approve</Button>
+          <Button variant="ghost" size="sm" className={btn} onClick={() => proxy.reject()}>Reject</Button>
+        </div>
+      );
+    case 'done':
+      return <Button variant="ghost" size="sm" className={btn} onClick={() => proxy.reopen()}>Reopen</Button>;
+    default:
+      return null;
+  }
+}
+
+function BlurInput({ value, onSave, ...props }: {
+  value: string; onSave: (v: string) => void;
+} & Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange' | 'onBlur' | 'onKeyDown'>) {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <Input
+      ref={ref}
+      defaultValue={value}
+      onBlur={e => { if (e.target.value !== value) onSave(e.target.value); }}
+      onKeyDown={e => { if (e.key === 'Enter') ref.current?.blur(); }}
+      {...props}
+    />
+  );
+}
+
+// ── Task card (kanban) ──
+
+function TaskCardContent({ task, isDragging }: { task: NodeData; isDragging?: boolean }) {
+  const proxy = usePath(task.$path, BoardTask);
+
+  const title = typeof proxy?.title === 'string' && proxy.title
+    ? proxy.title
+    : task.$path.split('/').at(-1);
+  const assignee = typeof proxy?.assignee === 'string' ? proxy.assignee : '';
+  const priority = typeof proxy?.priority === 'string' ? proxy.priority : 'normal';
+  const result = typeof proxy?.result === 'string' ? proxy.result : '';
+  const aiStatus = typeof task.aiStatus === 'string' ? task.aiStatus : '';
+  const isAi = assignee === 'metatron' || !!aiStatus;
+
+  return (
+    <div className={cn(
+      'mb-2 rounded-md border border-border bg-card p-3 shadow-sm transition-colors',
+      isDragging ? 'opacity-50' : 'hover:bg-accent/50',
+    )}>
+      <div className="mb-1 flex items-center gap-2">
+        <PriorityDot priority={priority} />
+        <span className="flex-1 text-sm font-semibold leading-tight">{title}</span>
+        {aiStatus ? (
+          <span className="rounded bg-violet-500/20 px-1.5 py-0.5 text-[10px] font-medium text-violet-400">
+            {String(aiStatus)}
+          </span>
+        ) : isAi ? <AiBadge /> : null}
+      </div>
+
+      {assignee && !isAi && (
+        <div className="mb-1 text-xs text-muted-foreground">{assignee}</div>
+      )}
+
+      {result && (
+        <div className="line-clamp-2 text-xs text-muted-foreground">{result}</div>
+      )}
+    </div>
+  );
+}
+
+function TaskCard({ task, onSelect, colStatus }: { task: NodeData; onSelect: (path: string) => void; colStatus: string }) {
+  const proxy = usePath(task.$path, BoardTask);
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: task.$path,
+    data: { task, status: colStatus, move: proxy.move },
+  });
+
+  // dnd-kit requires inline style for runtime-computed transforms
+  const style = { transform: CSS.Transform.toString(transform), transition };
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      className="cursor-grab active:cursor-grabbing"
+      style={style}
+      onClick={() => { if (!isDragging) onSelect(task.$path); }}
+    >
+      <TaskCardContent task={task} isDragging={isDragging} />
+    </div>
+  );
+}
+
+// ── Column ──
+
+function Column({ col, onSelect, highlighted }: { col: NodeData; onSelect: (path: string) => void; highlighted?: boolean }) {
+  const proxy = usePath(col.$path, BoardColumn);
+  const tasks = useChildren(col.$path, { watch: true, watchNew: true });
+  const status = col.$path.split('/').at(-1) ?? '';
+  const { setNodeRef } = useDroppable({ id: `col:${status}`, data: { status } });
+
+  const label = typeof proxy?.label === 'string' ? proxy.label : status;
+  const color = typeof proxy?.color === 'string' ? proxy.color : 'border-zinc-400';
+  const taskIds = useMemo(() => tasks.map(t => t.$path), [tasks]);
+
+  return (
+    <div className="flex min-w-40 flex-1 flex-col">
+      <div className={cn('mb-2 flex items-center gap-2 border-b-2 pb-1.5', color)}>
+        <span className="text-sm font-bold">{label}</span>
+        <span className="text-xs text-muted-foreground">({tasks.length})</span>
+      </div>
+
+      <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
+        <div
+          ref={setNodeRef}
+          className={cn(
+            'flex-1 rounded-md p-1 transition-colors min-h-16',
+            highlighted && 'bg-accent/30 ring-1 ring-accent',
+          )}
+        >
+          {tasks.map(task => (
+            <TaskCard key={task.$path} task={task} onSelect={onSelect} colStatus={status} />
+          ))}
+
+          {tasks.length === 0 && (
+            <div className="rounded-md border border-dashed border-border py-6 text-center text-xs text-muted-foreground">
+              {highlighted ? 'Drop here' : 'Empty'}
+            </div>
+          )}
+        </div>
+      </SortableContext>
+    </div>
+  );
+}
+
+// ── Kanban Board ──
+
+const KanbanView: View<BoardKanban> = ({ value, ctx }) => {
+  const [selectedTask, setSelectedTask] = useState<string | null>(null);
+  const [activeTask, setActiveTask] = useState<NodeData | null>(null);
+  const [overColumn, setOverColumn] = useState<string | null>(null);
+  const selectedNode = usePath(selectedTask ?? '') as NodeData | undefined;
+  const basePath = ctx!.path;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+  );
+
+  const children = useChildren(basePath, { watch: true, watchNew: true });
+  const columns = children
+    .filter(c => c.$type === 'board.column')
+    .sort((a, b) => {
+      const oa = typeof a.order === 'number' ? a.order : 0;
+      const ob = typeof b.order === 'number' ? b.order : 0;
+      return oa - ob;
+    });
+
+  const createTask = async () => {
+    const id = Date.now().toString(36).toUpperCase();
+    await trpc.set.mutate({
+      node: {
+        $path: `${basePath}/data/${id}`,
+        $type: 'board.task',
+        title: `Task #${id}`,
+        status: 'backlog',
+        priority: 'normal',
+        assignee: '',
+        description: '',
+        result: '',
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      } as NodeData,
+    });
+  };
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = event.active.data.current?.task;
+    if (task && typeof task === 'object' && '$path' in task) {
+      setActiveTask(task as NodeData);
+    }
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const over = event.over;
+    if (!over) { setOverColumn(null); return; }
+
+    // Over a column droppable
+    const overId = String(over.id);
+    if (overId.startsWith('col:')) { setOverColumn(overId.slice(4)); return; }
+
+    // Over a card — get its column status
+    const status = over.data.current?.status;
+    setOverColumn(typeof status === 'string' ? status : null);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveTask(null);
+    setOverColumn(null);
+    const { active, over } = event;
+    if (!over) return;
+
+    // Target is either a column droppable (col:status) or a card sortable (has data.status)
+    const overId = String(over.id);
+    const targetStatus = over.data.current?.status
+      ?? (overId.startsWith('col:') ? overId.slice(4) : undefined);
+    if (typeof targetStatus !== 'string') return;
+
+    const src = active.data.current;
+    if (!src?.task || typeof src.task !== 'object' || !('status' in src.task)) return;
+    if (src.task.status === targetStatus) return;
+
+    const move = src.move;
+    if (typeof move === 'function') move({ status: targetStatus });
+  };
+
+  return (
+    <div className="view-full px-4 py-3">
+      <div className="mb-3 flex items-center justify-between">
+        <h2 className="text-lg font-bold">Task Board</h2>
+        <Button onClick={createTask}>+ New Task</Button>
+      </div>
+
+      <DndContext sensors={sensors} collisionDetection={closestCorners} onDragStart={handleDragStart} onDragOver={handleDragOver} onDragEnd={handleDragEnd}>
+        <div className="flex gap-3 overflow-x-auto pb-2">
+          {columns.map(col => (
+            <Column key={col.$path} col={col} onSelect={setSelectedTask} highlighted={overColumn === (col.$path.split('/').at(-1) ?? '')} />
+          ))}
+        </div>
+
+        <DragOverlay>
+          {activeTask && (
+            <div className="w-60 rotate-2 opacity-90">
+              <TaskCardContent task={activeTask} />
+            </div>
+          )}
+        </DragOverlay>
+      </DndContext>
+
+      {selectedTask && selectedNode && (
+        <Dialog open onOpenChange={open => { if (!open) setSelectedTask(null); }}>
+          <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-lg" aria-describedby={undefined}>
+            <DialogTitle className="sr-only">Task</DialogTitle>
+            <Render value={selectedNode} />
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+};
+
+register('board.kanban', 'react', KanbanView);
+
+// ── board.column view ──
+
+function ColumnView({ value }: { value: NodeData & BoardColumn }) {
+  const tasks = useChildren(value.$path, { watch: true, watchNew: true });
+  const label = typeof value.label === 'string' ? value.label : value.$path.split('/').at(-1);
+  const color = typeof value.color === 'string' ? value.color : 'border-zinc-400';
+
+  return (
+    <div className="flex flex-col gap-2 p-3">
+      <div className={cn('flex items-center gap-2 border-b-2 pb-1.5', color)}>
+        <span className="text-sm font-bold">{label}</span>
+        <span className="text-xs text-muted-foreground">({tasks.length})</span>
+      </div>
+      <RenderContext name="react:list">
+        {tasks.map(task => (
+          <Render key={task.$path} value={task} />
+        ))}
+        {tasks.length === 0 && (
+          <div className="rounded-md border border-dashed border-border py-4 text-center text-xs text-muted-foreground">
+            Empty
+          </div>
+        )}
+      </RenderContext>
+    </div>
+  );
+}
+
+register('board.column', 'react', ColumnView as any);

package/brahman/CLAUDE.md

@@ -0,0 +1,18 @@
+## brahman
+Telegram bot constructor. Pages with ordered actions, DnD menu editor, session/user management.
+
+### Файлы
+- types.ts — 24 component classes (BotConfig, PageConfig, 20 action types, User, Session)
+- service.ts — Grammy bot runtime: middleware, template engine, 20 action handlers via register()
+- action.ts — server-side action:run for brahman.page (tRPC execute)
+- views/action-cards.tsx — icons, summaries, editors for all 20 action types
+- views/page-layout.tsx — DnD sortable action list (@dnd-kit)
+- views/menu-editor.tsx — DnD button/row editor for inline/reply keyboards
+- views/bot-view.tsx — bot config view (token, langs, maintenance)
+- views/tstring-input.tsx — TString multilingual text editor
+
+### Конвенции
+- Action handlers registered via `register('brahman.action.X', 'brahman:run', handler)` — no switch/case
+- TString = Record<string, string> for multilingual text (keyed by lang code)
+- Template engine: Handlebars-like {var}, {{#ifEquals}}, {{#tag}}, {{eval expr}}
+- Views go in views/, registered in view.ts for 'react' and 'react:list' contexts