this.gui 1.3.41 → 1.3.42

package/src/gui/components/organisms/IdentityNoise/Triad/identity.ts

@@ -0,0 +1,31 @@
+// identity.ts — derive identityRoot = hash(secret + namespace)
+// by suiGn
+import { keccak_256 } from "js-sha3";
+export interface IdentityInput {
+  secret: string;
+  namespace: string; // "username@hostname:port"
+}
+
+export interface IdentityResult {
+  namespace: string;
+  identityRoot: string;
+}
+
+/**
+ * Derives identityRoot using keccak256(secret + namespace)
+ */
+export function deriveIdentity({ secret, namespace }: IdentityInput): IdentityResult {
+  const combined = secret + namespace;
+  const hash = keccak_256(combined);
+  const identityRoot = "0x" + hash;
+  // Log to browser console
+  if (typeof window !== "undefined") {
+    console.log("ME Identity Derived:");
+    console.log("secret:", secret);
+    console.log("namespace:", namespace);
+    const masked = "••••••••••••••••••••••••••••••••" + identityRoot.slice(-4);
+    console.log("identityRoot:", masked);
+  }
+
+  return { namespace, identityRoot };
+}

package/src/gui/components/organisms/IdentityNoise/Triad/me/fundamentals/vectors/vectors.tsx

@@ -0,0 +1,252 @@
+import React from 'react';
+import { Box, Slider } from '@mui/material';
+interface VectorNode {
+  id: string;
+  children?: VectorNode[];
+  weight?: number;
+  frequency?: number;
+  lastUsed?: number;
+}
+
+interface VectorsOrbitProps {
+  vectors: VectorNode[];
+  visible?: boolean;
+  radius?: number;     // distance from parent
+  level?: number;      // recursion depth
+  containerSize?: number;
+  showControls?: boolean;
+  fitToContainer?: boolean;
+  squareOrbit?: {
+    size: number;
+    offsetX: number;
+    offsetY: number;
+    spiralFactor?: number;
+  };
+}
+
+const pulse = `
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 0.9; }
+    50% { transform: scale(1.15); opacity: 1; }
+  }
+`;
+
+const styles = `
+  ${pulse}
+`;
+
+const VectorsOrbit: React.FC<VectorsOrbitProps> = ({
+  vectors,
+  visible = true,
+  radius = 70,
+  level = 0,
+  containerSize = 140,
+  showControls = true,
+  fitToContainer = false,
+  squareOrbit,
+}) => {
+  const [timeScale, setTimeScale] = React.useState(1);     // vertical control
+  const [weightScale, setWeightScale] = React.useState(1); // horizontal control
+  const [viewMode, setViewMode] = React.useState<"icon" | "text">("icon");
+
+  if (!visible || vectors.length === 0) return null;
+
+  const enriched = vectors
+    .map(v => {
+      const last = v.lastUsed ?? Date.now();
+      const freq = v.frequency ?? 1;
+
+      const secondsSince = (Date.now() - last) / 1000;
+
+      // MASS = frequency density
+      const mass = freq / (1 + secondsSince);
+
+      // RECENCY for activation boost
+      const recency = 1 / (1 + secondsSince);
+
+      // WEIGHT combines both
+      const weight = mass + 2 * recency;
+
+      return { ...v, mass, weight };
+    })
+    .sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0));
+
+  return (
+    <>
+      <style>{styles}</style>
+
+      {/* Controls */}
+      {showControls && (
+        <Box sx={{ position: "absolute", top: 10, left: 10, zIndex: 999, width: 'calc(100% - 20px)' }}>
+          <button
+            style={{
+              marginBottom: 6,
+              padding: "4px 10px",
+              background: "rgba(0,150,255,0.2)",
+              border: "1px solid rgba(0,150,255,0.4)",
+              borderRadius: 6,
+              cursor: "pointer",
+              color: "white",
+              fontSize: 12,
+              display: "block",
+              width: "100%"
+            }}
+            onClick={() =>
+              setViewMode(viewMode === "icon" ? "text" : "icon")
+            }
+          >
+            {viewMode === "icon" ? "TEXT VIEW" : "ICON VIEW"}
+          </button>
+          {/* Horizontal weight slider */}
+          <Box sx={{ width: "100%", mb: 2 }}>
+            <Slider
+              value={weightScale}
+              onChange={(e, v) => setWeightScale(v as number)}
+              min={0.2}
+              max={3}
+              step={0.1}
+              valueLabelDisplay="auto"
+            />
+          </Box>
+
+          {/* Vertical time slider */}
+          <Box
+            sx={{
+              height: 120,
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Slider
+              orientation="vertical"
+              value={timeScale}
+              onChange={(e, v) => setTimeScale(v as number)}
+              min={0.2}
+              max={3}
+              step={0.1}
+              valueLabelDisplay="auto"
+            />
+          </Box>
+        </Box>
+      )}
+
+      <Box sx={{ position: "absolute", top: 0, left: 0, width: containerSize, height: containerSize }}>
+        {enriched.map((vector, i) => {
+          const bubbleOffset = viewMode === "icon"
+            ? (fitToContainer ? 9 : 13)
+            : (fitToContainer ? 16 : 20);
+          const bubbleRadius = viewMode === "icon" ? 13 : 16;
+
+          let centerX = containerSize / 2;
+          let centerY = containerSize / 2;
+
+          if (squareOrbit) {
+            const { size, offsetX, offsetY, spiralFactor = 0.25 } = squareOrbit;
+            const expandedSize = size * 1.6;
+            const perimeter = expandedSize * 4;
+            const step = perimeter / Math.max(1, enriched.length);
+            const distance = (i * step) % perimeter;
+
+            let px = 0;
+            let py = 0;
+            if (distance < expandedSize) {
+              px = distance;
+              py = 0;
+            } else if (distance < expandedSize * 2) {
+              px = expandedSize;
+              py = distance - expandedSize;
+            } else if (distance < expandedSize * 3) {
+              px = expandedSize - (distance - expandedSize * 2);
+              py = expandedSize;
+            } else {
+              px = 0;
+              py = expandedSize - (distance - expandedSize * 3);
+            }
+
+            const baseX = offsetX + px;
+            const baseY = offsetY + py;
+            const centerSquareX = offsetX + expandedSize / 2;
+            const centerSquareY = offsetY + expandedSize / 2;
+            const dx = baseX - centerSquareX;
+            const dy = baseY - centerSquareY;
+            const inward =
+              Math.min(0.85, ((i + 1) / Math.max(1, enriched.length)) * spiralFactor);
+            centerX = baseX - dx * inward;
+            centerY = baseY - dy * inward;
+          } else {
+            const maxRadius = containerSize / 2 - bubbleOffset;
+            const baseRadius = Math.min(radius + 8 * (vector.weight ?? 1), maxRadius);
+            const orbitRadius = fitToContainer ? maxRadius : baseRadius;
+            const theta = i * 0.75;
+            const x = Math.cos(theta) * orbitRadius * weightScale;
+            const y = Math.sin(theta) * orbitRadius * timeScale;
+            centerX = containerSize / 2 + x;
+            centerY = containerSize / 2 + y;
+          }
+
+          return (
+            <React.Fragment key={vector.id}>
+              {viewMode === "icon" ? (
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: centerY - bubbleRadius,
+                    left: centerX - bubbleRadius,
+                    width: 26,
+                    height: 26,
+                    borderRadius: "50%",
+                    border: "1px solid rgba(0,150,255,0.4)",
+                    background: "rgba(0,150,255,0.1)",
+                    backdropFilter: "blur(4px)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 11,
+                    color: "#9ff6ff",
+                    cursor: "pointer",
+                    animation: "pulse 2.5s ease-in-out infinite",
+                    transformOrigin: "center"
+                  }}
+                >
+                  {vector.id}
+                </Box>
+              ) : (
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: centerY - bubbleRadius,
+                    left: centerX - bubbleRadius,
+                    padding: "6px 10px",
+                    background: "rgba(0,50,90,0.6)",
+                    border: "1px solid rgba(0,150,255,0.4)",
+                    borderRadius: "6px",
+                    fontSize: "11px",
+                    color: "#bffaff",
+                    maxWidth: 140
+                  }}
+                >
+                  <div><b>{vector.id}</b></div>
+                  <div>mass: {vector.mass?.toFixed(3)}</div>
+                  <div>weight: {vector.weight?.toFixed(3)}</div>
+                  <div>freq: {vector.frequency ?? 1}</div>
+                </Box>
+              )}
+
+              {vector.children && vector.children.length > 0 && (
+                <VectorsOrbit
+                  vectors={vector.children}
+                  visible={true}
+                  radius={radius * 0.9}
+                  level={level + 1}
+                  containerSize={containerSize}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </Box>
+    </>
+  );
+};
+
+export default VectorsOrbit;

package/src/gui/components/organisms/IdentityNoise/Triad/me/me.stories.tsx

@@ -0,0 +1,314 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import Triad from "../Triad";
+import IconButton from "@mui/material/IconButton";
+import Icon from "@/gui/Theme/Icon/Icon";
+/**
+ * These stories focus on two things:
+ * 1) Triad UI states (online/offline/username available/exists) without needing a real ledger.
+ * 2) The core mental model you described: ME is a short-term thought machine.
+ *    - Everything creates a Thought.
+ *    - shortTermMemory is bounded (ring-buffer).
+ *    - Only when you "cleak" do you persist.
+ */
+const meta: Meta<typeof Triad> = {
+  title: "Identity Noise/Triad/me",
+  component: Triad,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Triad>;
+// ------------------------------------------------------------
+// Triad stories
+// ------------------------------------------------------------
+export const Default: Story = {
+  name: "Default (blockchain input collapsed)",
+  args: {},
+};
+
+export const WithBlockchainInputOpen: Story = {
+  name: "Blockchain input open",
+  render: () => {
+    return <Triad />;
+  },
+};
+
+export const OfflineBlockchain: Story = {
+  name: "Offline blockchain (simulated)",
+  render: () => (
+    <WithFetchMock mode="offline">
+      <Triad />
+    </WithFetchMock>
+  ),
+};
+
+export const OnlineBlockchainUsernameAvailable: Story = {
+  name: "Online blockchain + username available (simulated)",
+  render: () => (
+    <WithFetchMock mode="available">
+      <Triad />
+    </WithFetchMock>
+  ),
+};
+
+export const OnlineBlockchainUsernameExists: Story = {
+  name: "Online blockchain + username exists (simulated)",
+  render: () => (
+    <WithFetchMock mode="exists">
+      <Triad />
+    </WithFetchMock>
+  ),
+};
+
+/**
+ * Minimal fetch mock for Triad's endpoints:
+ *  - GET http://<host>/
+ *  - GET http://<host>/users/<username>
+ */
+function WithFetchMock({
+  mode,
+  children,
+}: {
+  mode: "offline" | "available" | "exists";
+  children: React.ReactNode;
+}) {
+  const originalFetch = React.useRef<typeof fetch | null>(null);
+  React.useEffect(() => {
+    originalFetch.current = globalThis.fetch;
+    globalThis.fetch = (async (input: any, init?: any) => {
+      const url = String(typeof input === "string" ? input : input?.url ?? "");
+      if (mode === "offline") {
+        return Promise.reject(new TypeError("Failed to fetch"));
+      }
+      // Root ping
+      if (url.endsWith("/")) {
+        return new Response("ok", { status: 200 });
+      }
+      // Username lookup
+      const m = url.match(/\/users\/([^/?#]+)/);
+      if (m) {
+        if (mode === "exists") return new Response("exists", { status: 200 });
+        if (mode === "available") return new Response("not found", { status: 404 });
+      }
+
+      return originalFetch.current!(input, init);
+    }) as any;
+    return () => {
+      if (originalFetch.current) globalThis.fetch = originalFetch.current;
+    };
+  }, [mode]);
+  return <>{children}</>;
+}
+
+// ------------------------------------------------------------
+// ME thought model story (no Triad dependency)
+// ------------------------------------------------------------
+export const ThoughtModel_RingBufferAndCleak: Story = {
+  name: "ME thought model: ring-buffer + cleak concept (explain)",
+  render: () => <ThoughtModelWithInfoCorner />, // purely explanatory + simulated
+  parameters: {
+    layout: "padded",
+  },
+};
+
+function ThoughtModelWithInfoCorner() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div style={{ position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 8,
+          right: 8,
+          zIndex: 10,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        {open && (
+          <div
+            style={{
+              maxWidth: 520,
+              padding: "10px 12px",
+              borderRadius: 12,
+              border: "1px solid rgba(127,127,127,0.35)",
+              background: "rgba(0,0,0,0.04)",
+              backdropFilter: "blur(6px)",
+              fontSize: 12,
+              lineHeight: 1.35,
+            }}
+          >
+            <div style={{ whiteSpace: "pre-wrap" }}>
+              {"Your idea: everything creates a Thought and goes into shortTermMemory. We don't worry about overflow because STM is a fixed-size ring buffer. If you never \"cleak\", the thoughts eventually fall out of STM. When you cleak, you persist the current state / snapshot elsewhere (ledger, disk, chain, etc.)."}
+            </div>
+          </div>
+        )}
+
+        <IconButton
+          aria-label={open ? "Hide info" : "Show info"}
+          onClick={() => setOpen((v) => !v)}
+          size="small"
+          sx={{
+            borderRadius: "10px",
+            border: "1px solid",
+            borderColor: "divider",
+            bgcolor: "background.paper",
+            color: "text.secondary",
+            boxShadow: 1,
+            "&:hover": {
+              bgcolor: "background.nav",
+              color: "text.primary",
+            },
+          }}
+        >
+          <Icon name={open ? "info" : "info"} fontSize={18} />
+        </IconButton>
+      </div>
+
+      <ThoughtModelDemo />
+    </div>
+  );
+}
+
+/**
+ * This is a UI-less demo of the mental model:
+ * - Every action yields a Thought
+ * - shortTermMemory is bounded (ring buffer)
+ * - selecting "cleak" copies current STM to persisted storage
+ *
+ * This does NOT import the ME runtime; it's a storybook explainer.
+ * (Keeps story stable even if ME typing/runtime changes.)
+ */
+function ThoughtModelDemo() {
+  type Thought = {
+    id: number;
+    path: string;
+    operator: string | null;
+    expression: any;
+    timestamp: number;
+  };
+  const MAX = 12;
+  const [stm, setStm] = React.useState<Thought[]>([]);
+  const [persisted, setPersisted] = React.useState<Thought[][]>([]);
+  const [counter, setCounter] = React.useState(0);
+  const pushThought = React.useCallback((t: Omit<Thought, "id" | "timestamp">) => {
+    setStm((prev) => {
+      const next: Thought[] = [
+        ...prev,
+        {
+          id: Date.now() + Math.floor(Math.random() * 1000),
+          timestamp: Date.now(),
+          ...t,
+        },
+      ];
+      // ring buffer
+      return next.length <= MAX ? next : next.slice(next.length - MAX);
+    });
+  }, []);
+
+  const fakeOps = React.useMemo(
+    () => [
+      () => pushThought({ path: "", operator: "@", expression: "jabellae" }),
+      () => pushThought({ path: "", operator: "_", expression: "••••" }),
+      () => pushThought({ path: "profile.name", operator: null, expression: "Abella" }),
+      () => pushThought({ path: "wallet.income", operator: null, expression: 1000 }),
+      () => pushThought({ path: "wallet.expenses.rent", operator: null, expression: 500 }),
+      () => pushThought({ path: "wallet.net", operator: "=", expression: "wallet.income - wallet.expenses.rent" }),
+      () => pushThought({ path: "wallet.hidden.notes", operator: "-", expression: "-" }),
+      () => pushThought({ path: "", operator: "~", expression: "noise" }),
+    ],
+    [pushThought]
+  );
+
+  return (
+    <div style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" }}>
+      <h3 style={{ marginTop: 0 }}>ME thought model (concept)</h3>
+      <p style={{ maxWidth: 860, lineHeight: 1.35, opacity: 0.9 }}>
+        <b>Everything creates a Thought</b> and goes into <b>ShortTermMemory</b>. We don't worry about overflow
+        because STM is a <b>fixed-size ring buffer</b>. If you never "cleak", the thoughts eventually fall out of STM.
+        When you <b>cleak</b>, you persist the current state / snapshot elsewhere (ledger, disk, chain, etc.).
+      </p>
+
+      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 10 }}>
+        <button
+          onClick={() => {
+            const op = fakeOps[counter % fakeOps.length];
+            op();
+            setCounter((c) => c + 1);
+          }}
+        >
+          Push Thought
+        </button>
+        <button
+          onClick={() => {
+            setPersisted((p) => [...p, stm]);
+          }}
+          disabled={stm.length === 0}
+        >
+          Cleak (persist snapshot)
+        </button>
+        <button
+          onClick={() => {
+            setStm([]);
+          }}
+        >
+          Drop STM (simulate losing memory)
+        </button>
+      </div>
+
+      <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
+        <div style={{ minWidth: 360, flex: 1 }}>
+          <div style={{ marginBottom: 6, opacity: 0.85 }}>
+            STM(ShortTermMemory) (max {MAX}) — current size: {stm.length}
+          </div>
+          <div style={{ border: "1px solid rgba(127,127,127,0.35)", borderRadius: 10, padding: 10 }}>
+            {stm.length === 0 ? (
+              <div style={{ opacity: 0.7 }}>No thoughts yet.</div>
+            ) : (
+              <ol style={{ margin: 0, paddingLeft: 18 }}>
+                {stm.map((t) => (
+                  <li key={t.id} style={{ marginBottom: 6 }}>
+                    <span style={{ opacity: 0.85 }}>
+                      {new Date(t.timestamp).toLocaleTimeString()} · {t.path || "<root>"} · {t.operator ?? "∅"} ·
+                    </span>{" "}
+                    <span style={{ opacity: 1 }}>{String(t.expression)}</span>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </div>
+        </div>
+
+        <div style={{ minWidth: 360, flex: 1 }}>
+          <div style={{ marginBottom: 6, opacity: 0.85 }}>persisted snapshots (Cleaks): {persisted.length}</div>
+          <div style={{ border: "1px solid rgba(127,127,127,0.35)", borderRadius: 10, padding: 10 }}>
+            {persisted.length === 0 ? (
+              <div style={{ opacity: 0.7 }}>No cleaks yet.</div>
+            ) : (
+              persisted
+                .slice()
+                .reverse()
+                .map((snap, i) => (
+                  <div key={i} style={{ marginBottom: 12 }}>
+                    <div style={{ marginBottom: 4, opacity: 0.85 }}>snapshot #{persisted.length - i} (size {snap.length})</div>
+                    <div style={{ opacity: 0.9, fontSize: 12 }}>
+                      {snap.map((t) => `${t.path || "<root>"}${t.operator ? `:${t.operator}` : ""}`).join(" · ")}
+                    </div>
+                  </div>
+                ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 12, maxWidth: 860, lineHeight: 1.35, opacity: 0.9 }}>
+        <b>Key invariant:</b> the runtime can be noisy and ephemeral; the <b>ledger persistence</b> should only happen on a
+        deliberate act (Cleak) and should serialize a stable representation (thoughts, encrypted branches, indexes, etc.).
+      </div>
+    </div>
+  );
+}

package/src/gui/components/organisms/organisms.ts

@@ -0,0 +1,15 @@
+/*
+ * This.GUI — Organisms registry
+ * High-level UI compositions built from molecules and atoms.
+ * Exported here so consumers can import from a single namespace.
+ */
+
+
+const Organisms = {
+};
+
+export {
+  Organisms,
+};
+
+export default Organisms;

package/src/gui/contexts/InsetsContext.tsx

@@ -0,0 +1,40 @@
+// src/themes/contexts/InsetsContext.tsx
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+type Insets = { top: number; right: number; bottom: number; left: number; nav: number };
+type InsetsContextType = {
+  insets: Insets;
+  updateInsets: (next: Partial<Insets>) => void;
+};
+
+export const InsetsContext = createContext<InsetsContextType | undefined>(undefined);
+
+export const InsetsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [insets, setInsets] = useState<Insets>({ top: 0, right: 0, bottom: 0, left: 0, nav: 0 });
+
+  const updateInsets = useCallback((next: Partial<Insets>) => {
+    setInsets((prev) => ({ ...prev, ...next }));
+  }, []);
+
+  useEffect(() => {
+    const { top, right, bottom, left, nav } = insets;
+    document.documentElement.style.setProperty('--gui-inset-top', `${top}px`);
+    document.documentElement.style.setProperty('--gui-inset-right', `${right}px`);
+    document.documentElement.style.setProperty('--gui-inset-bottom', `${bottom}px`);
+    document.documentElement.style.setProperty('--gui-inset-left', `${left}px`);
+    document.documentElement.style.setProperty('--gui-nav-height', `${nav || top}px`);
+  }, [insets]);
+
+  return (
+    <InsetsContext.Provider value={{ insets, updateInsets }}>
+      {children}
+    </InsetsContext.Provider>
+  );
+};
+
+export const useInsetsContext = () => {
+  const context = useContext(InsetsContext);
+  if (!context) {
+    throw new Error('useInsetsContext must be used within an InsetsProvider');
+  }
+  return context;
+};

package/src/gui/contexts/LeftSidebarContext.tsx

@@ -0,0 +1,20 @@
+// src/gui/contexts/LeftSidebarContext.tsx
+import React, { createContext, useState } from 'react';
+export type LeftSidebarView = 'rail' | 'expanded' | 'mobile';
+export type LeftSidebarContextType = {
+  view: LeftSidebarView;
+  setView: (view: LeftSidebarView) => void;
+};
+
+export const LeftSidebarContext = createContext<LeftSidebarContextType | undefined>(undefined);
+export const LeftSidebarProvider: React.FC<{ children: React.ReactNode; initialView?: LeftSidebarView }> = ({
+  children,
+  initialView = 'rail',
+}) => {
+  const [view, setView] = useState<LeftSidebarView>(initialView);
+  return (
+    <LeftSidebarContext.Provider value={{ view, setView }}>
+      {children}
+    </LeftSidebarContext.Provider>
+  );
+};