@polderlabs/bizar 3.23.1 → 4.2.0

package/bizar-dash/src/web/mobile/views/MobileArtifactCanvas.tsx

@@ -0,0 +1,439 @@
+// src/mobile/views/MobileArtifactCanvas.tsx — mobile plan canvas: read-only + edit mode.
+import { useEffect, useState } from 'react';
+import { Plus, MessageSquare, Pencil, Trash2, CheckSquare, StickyNote, HelpCircle, X } from 'lucide-react';
+import { api } from '../../lib/api';
+import { formatRelative } from '../../lib/utils';
+import type { Canvas, CanvasElement } from '../../lib/types';
+import { MobileBottomSheet } from '../components/MobileBottomSheet';
+import { MobileModal } from '../components/MobileModal';
+
+type Props = {
+  slug: string;
+  onBack: () => void;
+};
+
+const ELEMENT_TYPES = [
+  { id: 'task', label: 'Task', color: 'var(--info)' },
+  { id: 'note', label: 'Note', color: 'var(--text-dim)' },
+  { id: 'decision', label: 'Decision', color: 'var(--accent)' },
+  { id: 'question', label: 'Question', color: 'var(--warning)' },
+];
+
+function elementColor(type: string): string {
+  return ELEMENT_TYPES.find((t) => t.id === type)?.color || 'var(--text-dim)';
+}
+
+function ElementIcon({ type, size = 12 }: { type: string; size?: number }) {
+  switch (type) {
+    case 'task': return <CheckSquare size={size} style={{ color: 'var(--info)' }} />;
+    case 'note': return <StickyNote size={size} style={{ color: 'var(--text-dim)' }} />;
+    case 'decision': return <CheckSquare size={size} style={{ color: 'var(--accent)' }} />;
+    case 'question': return <HelpCircle size={size} style={{ color: 'var(--warning)' }} />;
+    default: return <StickyNote size={size} />;
+  }
+}
+
+export function MobileArtifactCanvas({ slug, onBack }: Props) {
+  const [canvas, setCanvas] = useState<Canvas | null>(null);
+  const [meta, setMeta] = useState<{ title: string; status: string; tags: string[]; description?: string } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [editMode, setEditMode] = useState(false);
+  const [selectedEl, setSelectedEl] = useState<CanvasElement | null>(null);
+  const [showComments, setShowComments] = useState(false);
+  const [addElementOpen, setAddElementOpen] = useState(false);
+  const [addCommentOpen, setAddCommentOpen] = useState(false);
+  const [commentText, setCommentText] = useState('');
+
+  const reload = async () => {
+    setLoading(true);
+    try {
+      const plan = await api.get<{ meta: typeof meta; canvas: Canvas }>(
+        `/plans/${encodeURIComponent(slug)}`,
+      );
+      setCanvas(plan.canvas);
+      setMeta(plan.meta);
+    } catch {
+      // best-effort
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { reload(); }, [slug]);
+
+  const addElement = async (type: string, title: string, content: string) => {
+    try {
+      const maxX = (canvas?.elements || []).reduce((acc, el) => Math.max(acc, el.x || 0), 40);
+      const maxY = (canvas?.elements || []).reduce((acc, el) => Math.max(acc, el.y || 0), 40);
+      await api.post(`/plans/${encodeURIComponent(slug)}/elements`, {
+        type,
+        title,
+        content,
+        x: 20 + maxX,
+        y: 20 + maxY,
+        width: 240,
+        height: 120,
+      });
+      await reload();
+      setAddElementOpen(false);
+    } catch {
+      // best-effort
+    }
+  };
+
+  const updateElement = async (id: string, body: Partial<CanvasElement>) => {
+    try {
+      await api.put(`/plans/${encodeURIComponent(slug)}/elements/${encodeURIComponent(id)}`, body);
+      await reload();
+      setSelectedEl(null);
+    } catch {
+      // best-effort
+    }
+  };
+
+  const deleteElement = async (id: string) => {
+    if (!confirm('Delete this element?')) return;
+    try {
+      await api.del(`/plans/${encodeURIComponent(slug)}/elements/${encodeURIComponent(id)}`);
+      setSelectedEl(null);
+      await reload();
+    } catch {
+      // best-effort
+    }
+  };
+
+  const addComment = async (text: string, elementId: string | null) => {
+    try {
+      const path = elementId
+        ? `/plans/${encodeURIComponent(slug)}/elements/${encodeURIComponent(elementId)}/comments`
+        : `/plans/${encodeURIComponent(slug)}/comments`;
+      await api.post(path, { text, elementId });
+      await reload();
+      setCommentText('');
+      setAddCommentOpen(false);
+    } catch {
+      // best-effort
+    }
+  };
+
+  if (loading || !canvas || !meta) {
+    return (
+      <div className="mobile-view">
+        <div className="mobile-loading"><p>Loading canvas…</p></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-view mobile-view-canvas">
+      {/* Canvas top bar */}
+      <div className="mobile-canvas-bar">
+        <div className="mobile-canvas-meta">
+          <span className="mobile-canvas-title">{meta.title || slug}</span>
+          <span className="mobile-canvas-status" data-status={meta.status}>{meta.status}</span>
+        </div>
+        <div className="mobile-canvas-actions">
+          <button
+            type="button"
+            className={`mobile-icon-btn ${editMode ? 'active' : ''}`}
+            onClick={() => setEditMode((v) => !v)}
+            aria-label={editMode ? 'Done editing' : 'Edit'}
+          >
+            <Pencil size={16} />
+          </button>
+          <button
+            type="button"
+            className="mobile-icon-btn"
+            onClick={() => setShowComments((v) => !v)}
+            aria-label="Comments"
+          >
+            <MessageSquare size={16} />
+            {canvas.comments.length > 0 && (
+              <span className="mobile-canvas-comment-count">{canvas.comments.length}</span>
+            )}
+          </button>
+          {editMode && (
+            <button
+              type="button"
+              className="mobile-icon-btn"
+              onClick={() => setAddElementOpen(true)}
+              aria-label="Add element"
+            >
+              <Plus size={16} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Elements list */}
+      <div className="mobile-canvas-elements">
+        {canvas.elements.length === 0 && (
+          <div className="mobile-empty">
+            <p>No elements yet.</p>
+            {editMode && (
+              <button
+                type="button"
+                className="mobile-btn"
+                onClick={() => setAddElementOpen(true)}
+              >
+                <Plus size={14} /> Add Element
+              </button>
+            )}
+          </div>
+        )}
+          {canvas.elements.map((el) => (
+          <button
+            key={el.id}
+            type="button"
+            className={`mobile-canvas-element ${selectedEl?.id === el.id ? 'selected' : ''}`}
+            style={{ borderColor: elementColor(el.type) }}
+            onClick={() => {
+              if (editMode) {
+                setSelectedEl(el);
+              }
+            }}
+            aria-pressed={selectedEl?.id === el.id}
+          >
+            <div className="mobile-canvas-el-header" style={{ background: `${elementColor(el.type)}18` }}>
+              <ElementIcon type={el.type} size={12} />
+              <span className="mobile-canvas-el-type" style={{ color: elementColor(el.type) }}>{el.type}</span>
+              {el.status && el.status !== 'open' && (
+                <span className="mobile-canvas-el-status">{el.status}</span>
+              )}
+            </div>
+            <div className="mobile-canvas-el-title">{el.title || 'Untitled'}</div>
+            {el.content && (
+              <div className="mobile-canvas-el-content">
+                {el.content.slice(0, 120)}{el.content.length > 120 ? '…' : ''}
+              </div>
+            )}
+            <div className="mobile-canvas-el-comments">
+              <MessageSquare size={10} />
+              {canvas.comments.filter((c) => c.elementId === el.id).length}
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {/* Comments panel */}
+      {showComments && (
+        <div className="mobile-canvas-comments">
+          <div className="mobile-canvas-comments-header">
+            <h4>Comments ({canvas.comments.length})</h4>
+            <button type="button" className="mobile-icon-btn" onClick={() => setShowComments(false)}>
+              <X size={16} />
+            </button>
+          </div>
+          <div className="mobile-canvas-comment-list">
+            {canvas.comments.length === 0 && (
+              <p className="mobile-empty-inline">No comments yet.</p>
+            )}
+            {canvas.comments.map((c) => (
+              <div key={c.id} className="mobile-canvas-comment">
+                <div className="mobile-canvas-comment-head">
+                  <span className="mono">{c.author}</span>
+                  <span className="muted">{formatRelative(c.created)}</span>
+                </div>
+                <div className="mobile-canvas-comment-text">{c.text}</div>
+              </div>
+            ))}
+          </div>
+          <div className="mobile-canvas-comment-input">
+            <textarea
+              className="mobile-input"
+              rows={2}
+              placeholder="Add a comment…"
+              value={commentText}
+              onChange={(e) => setCommentText(e.target.value)}
+            />
+            <button
+              type="button"
+              className="mobile-btn"
+              disabled={!commentText.trim()}
+              onClick={() => { addComment(commentText.trim(), null); }}
+            >
+              Post
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Element edit sheet */}
+      {selectedEl && (
+        <MobileBottomSheet
+          open={true}
+          onClose={() => setSelectedEl(null)}
+          title={`Edit ${selectedEl.title || selectedEl.type}`}
+          actions={
+            <div className="mobile-task-detail-actions">
+              <button
+                type="button"
+                className="mobile-btn mobile-btn-danger"
+                onClick={() => deleteElement(selectedEl.id)}
+              >
+                <Trash2 size={14} /> Delete
+              </button>
+              <button
+                type="button"
+                className="mobile-btn"
+                onClick={() => setAddCommentOpen(true)}
+              >
+                <MessageSquare size={14} /> Comment
+              </button>
+            </div>
+          }
+        >
+          <ElementEditForm
+            element={selectedEl}
+            onSave={(body) => updateElement(selectedEl.id, body)}
+            onClose={() => setSelectedEl(null)}
+          />
+        </MobileBottomSheet>
+      )}
+
+      {/* Add element modal */}
+      <AddElementModal
+        open={addElementOpen}
+        onClose={() => setAddElementOpen(false)}
+        onAdd={addElement}
+      />
+
+      {/* Add comment modal */}
+      <MobileModal open={addCommentOpen} onClose={() => setAddCommentOpen(false)} title="Add Comment" actions={
+        <button
+          type="button"
+          className="mobile-btn"
+          style={{ width: '100%' }}
+          disabled={!commentText.trim()}
+          onClick={() => { addComment(commentText.trim(), selectedEl?.id || null); setAddCommentOpen(false); }}
+        >
+          <MessageSquare size={14} /> Post
+        </button>
+      }>
+        <textarea
+          className="mobile-input"
+          rows={3}
+          placeholder="Your comment…"
+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}
+          autoFocus
+        />
+      </MobileModal>
+    </div>
+  );
+}
+
+function ElementEditForm({
+  element,
+  onSave,
+  onClose,
+}: {
+  element: CanvasElement;
+  onSave: (body: Partial<CanvasElement>) => void;
+  onClose: () => void;
+}) {
+  const [type, setType] = useState(element.type);
+  const [title, setTitle] = useState(element.title || '');
+  const [content, setContent] = useState(element.content || '');
+  const [status, setStatus] = useState(element.status || 'open');
+
+  return (
+    <form
+      className="mobile-task-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave({ type, title, content, status });
+        onClose();
+      }}
+    >
+      <label className="mobile-field-label">Type</label>
+      <select className="mobile-input" value={type} onChange={(e) => setType(e.target.value)}>
+        {ELEMENT_TYPES.map((t) => (
+          <option key={t.id} value={t.id}>{t.label}</option>
+        ))}
+      </select>
+      <label className="mobile-field-label">Title</label>
+      <input
+        className="mobile-input"
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <label className="mobile-field-label">Status</label>
+      <input
+        className="mobile-input"
+        type="text"
+        value={status}
+        onChange={(e) => setStatus(e.target.value)}
+        placeholder="open / done / blocked"
+      />
+      <label className="mobile-field-label">Content (markdown)</label>
+      <textarea
+        className="mobile-input"
+        rows={4}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+      />
+      <button type="submit" className="mobile-btn" style={{ width: '100%', marginTop: 8 }}>
+        Save
+      </button>
+    </form>
+  );
+}
+
+function AddElementModal({
+  open,
+  onClose,
+  onAdd,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onAdd: (type: string, title: string, content: string) => void;
+}) {
+  const [type, setType] = useState('task');
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onAdd(type, title.trim(), content.trim());
+    setTitle('');
+    setContent('');
+  };
+
+  return (
+    <MobileModal open={open} onClose={onClose} title="Add Element" actions={
+      <button type="submit" form="add-el-form" className="mobile-btn" style={{ width: '100%' }}>
+        <Plus size={14} /> Add
+      </button>
+    }>
+      <form id="add-el-form" onSubmit={handleSubmit} className="mobile-task-form">
+        <label className="mobile-field-label">Type</label>
+        <select className="mobile-input" value={type} onChange={(e) => setType(e.target.value)}>
+          {ELEMENT_TYPES.map((t) => (
+            <option key={t.id} value={t.id}>{t.label}</option>
+          ))}
+        </select>
+        <label className="mobile-field-label">Title *</label>
+        <input
+          className="mobile-input"
+          type="text"
+          placeholder="Element title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          autoFocus
+          required
+        />
+        <label className="mobile-field-label">Content (markdown)</label>
+        <textarea
+          className="mobile-input"
+          rows={3}
+          placeholder="Description…"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </form>
+    </MobileModal>
+  );
+}

package/bizar-dash/src/web/mobile/views/MobileArtifacts.tsx

@@ -0,0 +1,143 @@
+// src/mobile/views/MobileArtifacts.tsx — plan list with tap-to-open.
+import { useEffect, useState } from 'react';
+import { FileText, Plus, RefreshCw } from 'lucide-react';
+import { api } from '../../lib/api';
+import type { Artifact, Snapshot } from '../../lib/types';
+import { MobileModal } from '../components/MobileModal';
+
+type Props = {
+  snapshot: Snapshot;
+  onBack: () => void;
+  onOpenArtifact: (slug: string) => void;
+};
+
+export function MobileArtifacts({ snapshot, onBack, onOpenArtifact }: Props) {
+  const [artifacts, setArtifacts] = useState<Artifact[]>(snapshot.artifacts || []);
+  const [loading, setLoading] = useState(!snapshot.artifacts);
+  const [filter, setFilter] = useState('');
+  const [newOpen, setNewOpen] = useState(false);
+  const [newSlug, setNewSlug] = useState('');
+  const [newTitle, setNewTitle] = useState('');
+
+  const reload = async () => {
+    try {
+      const data = await api.get<{ artifacts: Artifact[] }>('/artifacts');
+      setArtifacts(data.artifacts || []);
+    } catch {
+      // best-effort
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const createPlan = async () => {
+    if (!newSlug.trim()) return;
+    try {
+      const result = await api.post<{ slug: string }>('/artifacts', {
+        slug: newSlug.trim(),
+        title: newTitle.trim() || undefined,
+      });
+      setNewOpen(false);
+      setNewSlug('');
+      setNewTitle('');
+      onOpenArtifact(result.slug);
+    } catch {
+      // best-effort
+    }
+  };
+
+  const filtered = filter.trim()
+    ? artifacts.filter((p) =>
+        (p.title || p.slug || '').toLowerCase().includes(filter.toLowerCase()),
+      )
+    : artifacts;
+
+  return (
+    <div className="mobile-view">
+      <div className="mobile-tasks-toolbar">
+        <input
+          className="mobile-search-input"
+          type="text"
+          placeholder="Search artifacts…"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <button type="button" className="mobile-icon-btn" onClick={() => reload()} aria-label="Refresh">
+          <RefreshCw size={16} />
+        </button>
+      </div>
+
+      {/* New plan */}
+      <div style={{ marginBottom: 12 }}>
+        <button
+          type="button"
+          className="mobile-btn"
+          style={{ width: '100%' }}
+          onClick={() => setNewOpen(true)}
+        >
+          <Plus size={14} /> New Artifact
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="mobile-loading"><p>Loading…</p></div>
+      ) : filtered.length === 0 ? (
+        <div className="mobile-empty">
+          <FileText size={40} />
+          <p>No artifacts yet.</p>
+        </div>
+      ) : (
+        <div className="mobile-card-list">
+          {filtered.map((p) => (
+            <button
+              key={p.slug}
+              type="button"
+              className="mobile-list-item mobile-list-item-interactive"
+              onClick={() => onOpenArtifact(p.slug)}
+            >
+              <div className="mobile-list-icon"><FileText size={16} /></div>
+              <div className="mobile-list-content">
+                <span className="mobile-list-title">{p.title || p.slug}</span>
+                <span className="mobile-list-meta">
+                  {p.status} · {p.source}
+                  {p.elementCount != null ? ` · ${p.elementCount} elements` : ''}
+                  {p.commentCount != null ? ` · ${p.commentCount} comments` : ''}
+                </span>
+              </div>
+              <span className={`mobile-list-badge`} data-status={p.status}>{p.status}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <MobileModal open={newOpen} onClose={() => setNewOpen(false)} title="New Artifact" actions={
+        <button type="submit" form="new-plan-form" className="mobile-btn" style={{ width: '100%' }}>
+          <Plus size={14} /> Create
+        </button>
+      }>
+        <form id="new-plan-form" onSubmit={(e) => { e.preventDefault(); createPlan(); }} className="mobile-task-form">
+          <label className="mobile-field-label">Slug *</label>
+          <input
+            className="mobile-input"
+            type="text"
+            placeholder="my-plan"
+            pattern="[a-z0-9][a-z0-9-]{0,63}"
+            value={newSlug}
+            onChange={(e) => setNewSlug(e.target.value)}
+            autoFocus
+            required
+          />
+          <label className="mobile-field-label">Title (optional)</label>
+          <input
+            className="mobile-input"
+            type="text"
+            placeholder="My Artifact"
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+          />
+        </form>
+      </MobileModal>
+    </div>
+  );
+}